Adobe DreamweaverWhat is Dreamweaver?| 00:00 | Adobe Dreamweaver is an application
used by Web designers and developers
| | 00:04 | to create websites and applications
for use across multiple targets,
| | 00:09 | including browsers, devices, and tablets.
| | 00:12 | Web designers use Dreamweaver for
creating website prototypes using
| | 00:15 | Web-friendly artwork, visually tweaking
semantic Web elements using CSS Inspectors
| | 00:20 | and Tools, creating standards-based
websites and applications that easily
| | 00:24 | flow across multiple screens.
| | 00:26 | Web developers use Dreamweaver for
writing clean organized code using the
| | 00:30 | powerful IDE, creating flexible mobile
applications that can be deployed both
| | 00:35 | online and across devices,
| | 00:37 | easily working with complex content
management systems like WordPress and
| | 00:41 | Drupal, and developing and deploying
native mobile applications using Web
| | 00:45 | standards-based frameworks and services.
| | 00:48 | Dreamweaver allows designers and
developers to create websites and mobile
| | 00:52 | applications, like the ones you see here.
| | 00:54 | In short, Dreamweaver gives designers
and developers the ability to create
| | 00:58 | and manage websites and mobile
applications in a user-friendly environment.
| | Collapse this transcript |
|
|
IntroductionWelcome| 00:05 | I'm James Williamson, Lynda.com Senior Author and I want to welcome you to
| | 00:09 | Dreamweaver CS6 Essential Training.
| | 00:11 | In this course we'll be focusing on
introducing you to the tools and workflows
| | 00:15 | in Dreamweaver that help you
build standards-compliant websites.
| | 00:18 | We'll start by becoming comfortable in
the Dreamweaver environment and exploring
| | 00:23 | how to properly manage your sites.
| | 00:25 | From there, we'll look at creating new
pages, structuring content properly,
| | 00:29 | and making sure that your code is
generated in a clean and an accessible manner.
| | 00:33 | We'll also cover Dreamweaver's powerful
CSS tools, how you can use other programs
| | 00:37 | like Word and Photoshop to speed up
your workflows, and how to properly
| | 00:41 | create and style forms and tables.
| | 00:43 | We'll also look at ways that you can
add user interactivity to your pages,
| | 00:48 | and how to use Dreamweaver to design for
multiple screens so that your sites work
| | 00:51 | properly across multiple devices.
| | 00:53 | It may sound cliche, but we really
will be talking about all of that and more.
| | 00:58 | Dreamweaver is an amazing tool and I'm
excited about showing you what it can do.
| | 01:02 | Let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a Premium member of the
Lynda.com Online Training Library or
| | 00:05 | if you're watching this tutorial on a disk,
you have access to the Exercise Files
| | 00:09 | used throughout this course.
| | 00:10 | Exercise Files for this title are
arranged by chapter and are located in folders
| | 00:14 | that are named based on the
movie numbers they represent.
| | 00:17 | Since each exercise is self-contained,
you'll want to work with these
| | 00:21 | files individually.
| | 00:22 | Prior to each exercise, copy the
appropriate exercise folder to your Desktop
| | 00:27 | and redefine your local Dreamweaver site
using the new exercise folder as your root folder.
| | 00:32 | To help you with this process, I'll
go ahead and demonstrate it for you.
| | 00:36 | So here I am in Dreamweaver and I want
to set up my site so that I can begin
| | 00:39 | working with the first exercise file.
| | 00:41 | So to do that, I'm just going to go
right to the Welcome screen and I am going
| | 00:44 | to choose a new Dreamweaver Site
and all I've to do is just two things:
| | 00:49 | name the site and then point it to
the folder that I need to work on.
| | 00:52 | So in this case I'm just
going type in DWCS6_Essential.
| | 01:00 | You don't really need the underscore there,
you can name the site name anything you want
| | 01:03 | it to be, it doesn't really matter,
| | 01:05 | I just love using underscores.
| | 01:07 | So for the Local Site Folder I am
going to Browse, and as you see,
| | 01:10 | I can Browse out to the Desktop and right
there is my Exercise Files folder
| | 01:13 | that I copied over earlier.
| | 01:14 | So I am going to open that up, I'll
go in Chapter_01 and find the first
| | 01:19 | folder, which is 01_06.
| | 01:23 | So these exercises will correspond
with the sixth movie of Chapter_01.
| | 01:27 | So I'll double-click that to open it up
and I'll choose Select on the PC,
| | 01:33 | and on the Mac you'll have to select
Choose, you see how that works.
| | 01:36 | So I'm going to choose
Select and then I'll Save it.
| | 01:40 | So Dreamweaver is going to cache
out the contents of that folder and
| | 01:43 | you'll notice here, and I'll just
expand this so you can see the Files
| | 01:45 | Panel, now inside my Files Panel
I have all the files right there that
| | 01:50 | I'm going to be working with.
| | 01:51 | The reason that I recommend working
with this particular workflow is it makes
| | 01:56 | sure that you're focusing on exactly
the files that you need to work on.
| | 01:59 | It's going to make sure that your site
structure is consistent with what's being
| | 02:03 | used in the Exercise Files as well.
| | 02:05 | So this is definitely an approach
that I would encourage you to adopt.
| | 02:09 | If you don't have access to the
Exercise Files, feel free to follow along
| | 02:12 | with your own files and experiment with the
features that we'll cover in this course.
| | Collapse this transcript |
| Learning web design| 00:00 | If you're brand-new to Dreamweaver, chances
are you're brand-new to Web design as well.
| | 00:04 | This can make for somewhat of a steep
learning curve as you try to learn
| | 00:08 | a new discipline and a new
program all at the same time.
| | 00:11 | In this movie I'd like to offer some
advice designed to make that path maybe
| | 00:15 | a little bit easier for you.
| | 00:17 | I also want to make sure that you
have the proper expectations about
| | 00:19 | Dreamweaver's capabilities, where it
fits into a proper Web design workflow,
| | 00:24 | and what your expectations
about this course should be.
| | 00:26 | First, if you're new to Web design,
I recommend starting by learning
| | 00:30 | the basics of HTML and CSS.
| | 00:32 | These two technologies are the core
of Web design, and without a solid
| | 00:36 | foundation in how they both work, your skills
as a Web designer will always be incomplete.
| | 00:41 | Dreamweaver is an amazing tool,
and much of the web design process
| | 00:45 | in Dreamweaver can be performed
without ever touching the code.
| | 00:47 | This doesn't mean however that you don't
need to know what's going on behind the scenes.
| | 00:52 | Without a proper understanding of the
code itself, you won't be able to tweak
| | 00:56 | minor errors or go beyond the
capabilities of Dreamweaver's visual tools.
| | 01:00 | Look at it this way, a talented
mechanic might use really expensive tools
| | 01:04 | when working on your car because they help
them work faster and more precisely.
| | 01:08 | Now, going out and buying the same
tools however wouldn't automatically
| | 01:12 | make me a good mechanic.
| | 01:14 | That's how you should view Dreamweaver,
it's a tool, and to use it properly you
| | 01:17 | need to understand the processes
and technology behind Web design.
| | 01:21 | That doesn't mean that you
can't learn both at the same time.
| | 01:24 | As you build your pages in Dreamweaver,
take time to examine the code being generated,
| | 01:27 | this is a great way to learn
the structure and syntax of CSS and HTML.
| | 01:32 | I do want to stress however that the
focus of this title is to teach the basics
| | 01:37 | of Dreamweaver, not the basics of HTML and CSS.
| | 01:41 | To learn those I recommend exploring
the many titles in the Lynda.com Online
| | 01:46 | Training Library that focus
on core Web design skills.
| | 01:49 | I recommend starting with my Web
Design Fundamentals course, as it gives
| | 01:53 | an overview of web design, explores
best practices, and defines much of the
| | 01:57 | terminology you'll hear in this title.
| | 01:59 | If you're brand-new to web design, I
recommend completing that title first
| | 02:03 | before moving forward with this one.
| | 02:05 | After that, I recommend also exploring
the HTML Essential Training title and my
| | 02:10 | CSS series, including
| | 02:12 | CSS: Core Concepts and CSS: Page Layout.
| | 02:15 | Those courses will broaden your
understanding of HTML and CSS and
| | 02:20 | help you utilize Dreamweaver
to its fullest potential.
| | Collapse this transcript |
|
|
1. The Dreamweaver InterfaceLooking at the Welcome screen | 00:00 | Before we get started building pages,
we should take a closer look at the
| | 00:03 | Dreamweaver interface.
| | 00:05 | Being comfortable with the interface,
and knowing where things are located
| | 00:08 | will make it easier to concentrate on the
concepts and workflows being presented,
| | 00:12 | rather than trying to find
a specific toolbar or icon.
| | 00:15 | Now first, I want to take a
look at the Welcome Screen.
| | 00:19 | When you open up Dreamweaver, the
Welcome Screen is the first thing you see.
| | 00:24 | Showing up right here in the middle of screen,
where you would normally see an open file.
| | 00:29 | You can think that the Welcome Screen as
Dreamweaver's homepage, as it gives you
| | 00:32 | quick access to a lot of
common tasks in Dreamweaver.
| | 00:36 | Now if you open a file up, and I'll do
that really quickly by just creating a
| | 00:39 | new in here, the Welcome
Screen is going to go away.
| | 00:41 | But the moment you close a
file, it'll come right back.
| | 00:45 | All right, so let's take a closer look
at the Welcome Screen and some of the
| | 00:48 | things that it can do for you.
| | 00:50 | The first thing I want to show you
is in the upper left-hand corner of
| | 00:53 | the Welcome Screen.
| | 00:54 | I'll bet you my list looks
a lot different than yours.
| | 00:56 | This is Open a Recent Item, so the
things that you've been working on recently,
| | 01:00 | are going to show up here in a list
and there's about the ten most recent.
| | 01:04 | Now if you haven't worked on anything recently,
that list will of course be totally empty.
| | 01:08 | So the first time you launch
Dreamweaver after purchasing it, you'll
| | 01:11 | probably see an empty list there, but that'll
probably the last time you see an empty list.
| | 01:16 | Now you also have the option of just
going ahead and opening a file and
| | 01:19 | browsing out to find a file as well.
| | 01:21 | So if you just want to open one from a
directory that you don't have defined
| | 01:25 | within a site and it's not listed there,
that's a very quick and easy way to do that.
| | 01:30 | The middle column right here under
Create New, allows us to create new files
| | 01:35 | and the most popular types
of files are listed there.
| | 01:37 | Dreamweaver can certainly create more
types of files than you're seeing here
| | 01:41 | in this list, but this is just like some
of the more frequently-used formats;
| | 01:44 | HTML, ColdFusion, PHP, CSS,
JavaScript, XML, things like that.
| | 01:51 | Now you'll also see Fluid Grid Layout
which is new in Dreamweaver CS6, and the
| | 01:55 | ability to either create a new Dreamweaver
site or a new business catalyst site,
| | 02:00 | and we'll talk about the site
creation process in just a moment.
| | 02:04 | The little link here that says More
will take you to an expanded page, where
| | 02:08 | you have a lot of other
file types to choose from.
| | 02:11 | So as I mentioned before it's certainly
not the only file type available to you.
| | 02:16 | Now in the third column over here
in the Top Features, if you're new to
| | 02:19 | Dreamweaver or just new to Dreamweaver CS6,
and you want to run a little bit more about it.
| | 02:23 | For example, now you see here the option
to create a new Business Catalyst Site.
| | 02:27 | Well what is Business Catalyst?
| | 02:29 | Well if you click right there on the
Business Catalyst Authoring, it's going to
| | 02:32 | take you out to Adobe's tv.adobe.com and
you're going to see some videos related
| | 02:38 | to Business Catalyst or
some of the new feature overviews.
| | 02:41 | So there are some top
videos here for you to watch
| | 02:44 | to get you up and running with
Dreamweaver CS6, or more comfortable with
| | 02:47 | some of the concepts.
| | 02:48 | Now on the bottom of the Welcome Screen, we
also have links to different help files online.
| | 02:54 | So if you click on any of these, like
New Features or Getting Started, it's
| | 02:57 | going to take you out to Adobe's Help
section where you can learn little bit
| | 03:00 | more about Dreamweaver or some of
the specific concepts of Dreamweaver.
| | 03:05 | The Dreamweaver Exchange is not
necessarily a help file, it's a place
| | 03:09 | where you can go out and extend Dreamweaver.
| | 03:11 | Now later on in the title we're going
to talk about the Dreamweaver Exchange,
| | 03:14 | but it's a place where you can go out
and grab some plug-ins or extensions that
| | 03:18 | people have written, to extend
a Dreamweaver's functionality.
| | 03:21 | So it's a very, very handy
place to go out and take a look at.
| | 03:23 | Now on the right-hand side of the bottom
of the Welcome Screen, I've got an area
| | 03:28 | that I bet looks a little bit
different from yours as well.
| | 03:30 | Now the reason for that is that I am
recording this on a beta version of Dreamweaver.
| | 03:35 | So basically they haven't
plugged everything in yet.
| | 03:38 | But when they ship that, this area is
going to basically communicate with Adobe
| | 03:43 | servers, and if there are any new
features of Dreamweaver, for example, perhaps
| | 03:48 | a new plugin or a new patch released
for it, you'll see that message there and
| | 03:53 | you'll also see other messages about
what Dreamweaver has out, that's brand-new.
| | 03:58 | So this is a nice little messaging
center that Adobe has for you.
| | 04:01 | Now if you just don't like the Welcome
Screen at all, you do have the option
| | 04:05 | to select Don't show again.
| | 04:07 | Now once you do that Dreamweaver is
going to let you know, okay well, so you
| | 04:11 | don't want to see it again, but
if you do it's in the Preferences.
| | 04:13 | So if you turn that off, the next time
I'll launch Dreamweaver, here I'll show you.
| | 04:17 | I'll go ahead and close Dreamweaver,
and then I'll launch it again and once you
| | 04:23 | open it again you can see no Welcome Screen.
| | 04:25 | So I can go right back to my Preferences.
| | 04:27 | Now on the PC I'm going to go up to
Edit>Preferences, on the Mac you guys
| | 04:31 | will go upto Dreamweaver>Preferences.
| | 04:34 | If I just click on the General
category right there is the checkbox,
| | 04:37 | Show Welcome Screen, and of course
you have to close out Dreamweaver.
| | 04:43 | But once you open it again
there is the Welcome Screen.
| | 04:45 | I love how the Welcome Screen
unobtrusively gives me access to
| | 04:50 | things like recently opened files.
| | 04:51 | It allows me to create new files with
just a single click, and it gives me
| | 04:55 | a way to explore the new
features found in Dreamweaver CS6.
| | 04:59 | Now although some people tend to let
the Welcome Screen kind of blend into the
| | 05:02 | background, I think you'll find it
really speeds up the process of opening up
| | 05:06 | current files, or when creating new ones.
| | Collapse this transcript |
| Exploring Windows and Mac interface differences | 00:00 | Dreamweaver is designed for both the Mac
and the PC, and although Adobe does the
| | 00:05 | best they can in making the program the
same in both platforms, there are a few
| | 00:09 | slight differences between the two versions.
| | 00:12 | Let's take a quick glance at those
differences in case you ever have to
| | 00:15 | move from one platform to the other.
| | 00:18 | So what I've done is I've opened up Dreamweaver
obviously, and I've opened up a brand-new file.
| | 00:22 | So you're not opening up a file from
any location, you can just go to File and
| | 00:26 | choose New and choose a new default
HTML file, or you can just go right to
| | 00:30 | the Welcome screen that we talked about in
the last movie, and click Create New HTML
| | 00:33 | and it will show you exactly
what I have up at the moment.
| | 00:37 | The first thing I want to point
out is the slight difference in menus
| | 00:41 | between the platforms.
| | 00:42 | Now, as you can see on the PC, the
Application Toolbar is this toolbar right here.
| | 00:48 | It has the Layout, Extended
Dreamweaver, and Site pull-down menus,
| | 00:52 | and the Workspace Switcher.
| | 00:54 | That is integrated on the PC
with the main program menu.
| | 00:59 | Now on the Mac, as you can see, the
Application Toolbar is simply part of the
| | 01:03 | Window Chrome, if you will,
of your open document.
| | 01:06 | So it's not part of the menu, but it is
attached right up here and you won't be
| | 01:09 | able to undock it and move it around.
It's going to stay up on top of the
| | 01:13 | document window the
entire time you have that open.
| | 01:17 | Another slight toolbar difference
involves the Style Rendering Toolbar.
| | 01:20 | Let me show you how to open that up.
| | 01:22 | I'm just going to go to right up here
to the Document Toolbar, which is just
| | 01:25 | above the open document, I'm just going
to right-click, Ctrl+click on the Mac,
| | 01:29 | and I'm going to choose Style Rendering.
| | 01:31 | So this opens up the Style Rendering Toolbar.
| | 01:33 | Now, on the PC, which is what we're
looking at right now, I'm free to undock
| | 01:37 | this toolbar and move it around.
| | 01:38 | Kind of move it wherever I would like
and then redock it anywhere that I'd like.
| | 01:42 | So you'll notice I can even move it up.
| | 01:44 | So as you can see, you can
dock it with existing toolbars.
| | 01:47 | You can make sort of a new toolbar area for it.
| | 01:49 | I like docking it with the document
toolbar, just because it sort of fills that
| | 01:53 | out and gives me very quick access to
it without cluttering up the workspace.
| | 01:58 | On the Mac, the Style Rendering Toolbar,
when I turn it on, it's going to dock
| | 02:02 | with the document toolbar, and
as you notice I can't move it.
| | 02:06 | So I can't undock it.
| | 02:07 | If you don't have enough room to
display it, essentially what's going to happen
| | 02:11 | is you're either going to get a much
taller document toolbar, or you can have a
| | 02:14 | portion of it sort of clipped off.
| | 02:17 | Another slight difference between platforms
is in where you'll find your Preferences.
| | 02:21 | Now, on the PC you'll go up to the
menu and you'll choose Edit>Preferences,
| | 02:28 | but as you can see here on the Mac,
I'm going to go up to Dreamweaver and
| | 02:31 | choose Preferences.
| | 02:32 | So a slightly different
location, same exact panel.
| | 02:36 | Like most Adobe applications, Dreamweaver
is also very keyboard shortcut rich.
| | 02:41 | Now, these keyboard shortcuts
can change based on the platform.
| | 02:44 | Most of the time it's simple changes,
like using the Cmd key on the Mac
| | 02:48 | in place of the Ctrl key on the PC, but
occasionally there will be a bigger
| | 02:52 | shortcut difference due to the operating system.
| | 02:55 | Just be sure to check out the shortcut
keys if you have to switch platforms.
| | 03:00 | Keyboard shortcuts can be found under
the Edit Menu on the PC and under the
| | 03:05 | Dreamweaver Menu for the Mac.
| | 03:07 | So it's just like the Preferences.
| | 03:08 | One of the biggest differences between
the Mac and the PC is how the Files Panel
| | 03:13 | is handled when expanded.
| | 03:15 | The Files Panel handles all of your
site management in Dreamweaver and acts as
| | 03:19 | the FTP client for uploading and
downloading files on your site.
| | 03:23 | Now, to show you how that works I'm
just going to define a site really quickly
| | 03:25 | here, and once again, I'm just going
to give it Dreamweaver CS6 Essential
| | 03:30 | (DW CS6 Essential), and I'm just going to
go to my Exercise File, and it doesn't
| | 03:35 | matter which folder you choose, so I'm just
going to choose the first one there and save it.
| | 03:39 | Now, the reason I'm doing that is so
that I have access to the Files Panel now.
| | 03:43 | On the PC, there's this little button
right over here on the far right-hand side.
| | 03:47 | It's there on the Mac as well, but when
I click that on the PC, the Files Panel
| | 03:51 | expands and it takes over the entire program.
| | 03:54 | So it basically removes everything else,
it expands to take over the entire screen.
| | 03:58 | It kind of replaces the rest of the application.
| | 04:00 | And so what that allows you to do is do
all of your site management in one location.
| | 04:05 | You can upload your files, you can
download your files, and then when you're
| | 04:08 | finished, once you click that icon again,
it will collapse back down and sort of
| | 04:13 | retake its place, that sort of
minimized look within the dock.
| | 04:16 | Now, let's take a look at
how that works on the Mac.
| | 04:19 | Now, on the Mac when I click this button,
you'll notice instead of taking over
| | 04:23 | the whole interface, it
simply becomes a floating panel.
| | 04:25 | Now, how large this panel
becomes is totally up to me.
| | 04:29 | I can resize this panel, I can move it
around, and do whatever I want to with it.
| | 04:33 | Now, all of the menu options continue
to come from the Dreamweaver menu
| | 04:38 | up top here instead of on the PC.
| | 04:40 | On the PC when we expanded it and it
went full screen, the PC had its own little
| | 04:44 | submenu up top that replaced the main
document menu, but as you can see on the
| | 04:48 | Mac, the menu structure up top
remains more or less unchanged.
| | 04:53 | So while these are subtle differences,
they're very important to note in case
| | 04:57 | you find yourself working on a
different operating system than what you're used
| | 05:00 | to, or in this case, watching a
tutorial that uses a different OS
| | 05:05 | than the one that you're currently using.
| | Collapse this transcript |
| Arranging panels | 00:00 | In any program as complex as Dreamweaver,
one of the biggest challenges
| | 00:04 | is keeping the workspace organized.
| | 00:06 | There are multiple panels, views
and panel groups to keep track of
| | 00:10 | and access when you need them.
| | 00:12 | So in this movie, I want to take a
closer look at managing and arranging
| | 00:15 | these panels, so that you are taking full
advantage of the Dreamweaver workspace.
| | 00:19 | The only thing I've done here is just
sort of opened up a new file, so if you
| | 00:23 | don't have a file open you could just
go right to the Welcome screen and click
| | 00:26 | on Create New HTML File and you'll be
seeing pretty much exactly what I see.
| | 00:30 | And I'm also looking at the Designer
workspace, so if you see a different
| | 00:34 | arrangement of panels than I do, in
terms of what's open and what's out there,
| | 00:38 | that's probably why.
| | 00:39 | So, even though I am going to talk
about them in more detail in the next movie,
| | 00:43 | I want to talk about workspaces
for just a moment.
| | 00:45 | If you go up to the workspace switcher
which is found in the Application toolbar.
| | 00:50 | And once again in the Mac that will be
just above the document, in the PC it's
| | 00:53 | up here sort of docked with the menu.
| | 00:55 | But you will notice that we have
access to several default workspaces.
| | 00:59 | Now later I'll show you how you can
create your own, but these workspaces
| | 01:02 | basically give you a default layout in
terms of the interface and they help you
| | 01:06 | manage your panels because they'll
close certain panels that are not
| | 01:10 | applicable for a specific workspace
and then they'll open others.
| | 01:12 | So for example if I go to Coder,
you'll notice that the panels have now moved
| | 01:17 | over here to the left-hand side and
there are far fewer panels open now than
| | 01:20 | there were just a moment here ago.
| | 01:22 | If I go back to say Designer, which is
where we were, I see the exact same panel
| | 01:26 | grouping that I had before.
| | 01:27 | So workspaces are nice, they allow you
to quickly and easily switch back and
| | 01:30 | forth between the series of panel groupings,
but the thing is, is if you are
| | 01:34 | relying on workspaces to make sure you
have the panels opened and arranged where
| | 01:39 | you need them, you're probably going
to run into a situation where you don't
| | 01:43 | have a certain panel open that you need
or maybe you have too many panels open.
| | 01:46 | So it's really helpful to know how to
work with these panels how to move them
| | 01:50 | around and arrange them
the way that you want them.
| | 01:53 | Now if you've used other Adobe software
like Photoshop, Illustrator or InDesign,
| | 01:57 | you're probably already familiar with
the way the panels work because it's
| | 02:00 | pretty consistent across the Adobe interfaces.
| | 02:04 | Essentially, if you want to close a panel,
there are several different ways to do this.
| | 02:07 | Let's take a look at the Adobe
BrowserLab panel for example.
| | 02:10 | This is a great panel, but maybe
it's not something I am using currently.
| | 02:14 | So I have a couple of options here.
| | 02:16 | One, I can go to the Panel menu, every
panel is going to have a menu in the upper
| | 02:19 | right-hand corner just beside the tab
here and notice that I can tell it to
| | 02:24 | Close this or Close a Tab Group.
| | 02:25 | So if you have more than one panel in a
group you can close all of them at once.
| | 02:30 | Panels can also be undocked.
| | 02:32 | So you'll notice by clicking on the
tab I sort of expand that panel out.
| | 02:36 | So double clicking on a tab and then
clicking on a tab again, will collapse
| | 02:39 | and expand that panel.
| | 02:41 | But panels don't need to reside
in the dock, they don't have to.
| | 02:45 | If I grab the tab of the BrowserLab
panel and drag it out and release it,
| | 02:49 | you will notice that it floats this panel.
| | 02:51 | So now I am free to move this
panel to a different location.
| | 02:55 | I can move it in the left-hand side, down
towards the bottom, it doesn't really matter.
| | 02:59 | I can also come up and close the panel
by clicking the upper-right hand corner
| | 03:03 | where this little X is.
| | 03:04 | Now on the Mac, you are going to see sort of a
red circle and that does the same exact thing.
| | 03:08 | So just close that.
| | 03:10 | What happens if you have closed a panel
that you need or you just don't see the
| | 03:14 | panel that you want and you need to go get it?
| | 03:16 | Well the place to find your panels
is in the menu under Window.
| | 03:20 | So if I go up to the menu and I
select Window, I can see all the panels
| | 03:24 | Dreamweaver has available for me.
| | 03:26 | In fact BrowserLab panel is here, even
though you don't see it right off the bat,
| | 03:29 | there are some panels that are sort of
hidden if you will within groups,
| | 03:33 | they are just in submenus.
| | 03:34 | So if I go down to
Extension, there is BrowserLab.
| | 03:36 | If I click on that, it brings it right back.
| | 03:39 | Now you may have noticed that it
brings the panel back in the exact
| | 03:42 | same location you had it before.
| | 03:43 | So Dreamweaver sort of has an internal
memory about your panel arrangements.
| | 03:47 | If you close a panel and reopen it,
wherever the panel was before, that's
| | 03:51 | where Dreamweaver is going to place it.
| | 03:54 | If you don't like the existing
groupings, you can change them.
| | 03:56 | For example, Business Catalyst is
another service that you may or may not be
| | 04:00 | using and BrowserLab is a service
that you may or may not be using.
| | 04:04 | But if you are using them and you're
using both of them it would be kind of nice
| | 04:07 | to have them together since they are
both services that you might be using.
| | 04:11 | So I'm going to grab the tab
of the Adobe BrowserLab panel.
| | 04:14 | I am just going to drag this over on
top of the Business Catalyst panel.
| | 04:17 | Now at first nothing happens.
| | 04:19 | So what I need to do is I need to get up
right beside the tab of Business Catalyst.
| | 04:23 | When I do that, I see a nice blue
outline show up around the panel grouping
| | 04:27 | and when I let go, the Adobe BrowserLab
panel now docks with it and I have created
| | 04:31 | a new tab grouping. So switching back and
forth between those two panels is very simple.
| | 04:36 | If I decided that I really don't need
those panels until later, again I can
| | 04:40 | grab that pulldown menu and I can
just tell it to the tab grouping.
| | 04:44 | So if you end up with a workspace where
there's a lot of panels and it's really
| | 04:48 | cluttered, feel free to go ahead and
close as many of those as you want and the
| | 04:51 | next time you open Dreamweaver, it will
remember that those panels were closed.
| | 04:55 | Now sometimes you won't see the
contents of a panel because it's collapsed.
| | 04:57 | Remember, all you have to do to open
one up, such as the Files panel down
| | 05:00 | here at the bottom, is simply click the tab
and it will expand that panel upwards again.
| | 05:06 | Whenever panels are a part of a dock, as
these panels are here on the right-hand
| | 05:09 | side of my interface, they are all
docked together and they just sort of
| | 05:13 | cement one on top of another.
| | 05:14 | Well if you need to see more of a
given panel, you can just move your mouse
| | 05:18 | between the two panels, you will see
this little divider icon show up and then
| | 05:21 | you can click and drag up or down to
increase or decrease the amount of room
| | 05:26 | that particular panel has taken up.
| | 05:28 | Some panels like the CSS panel actually
have interior portions of the panel that
| | 05:32 | can be arranged as well.
| | 05:34 | Basically, if you ever see a line and
you are curious as to whether you can
| | 05:37 | expand or decrease the amount of space
that it's taking up, just hover over it.
| | 05:41 | You will get a nice tooltip and it
will let you know that indeed you can.
| | 05:45 | Now one more thing about panels before we move
on, you're not limited to just a single dock.
| | 05:49 | For example, take the CSS
Styles and AP Elements panel.
| | 05:53 | If I grab those and hold down the Alt key,
which would be the Opt key on the Mac,
| | 05:57 | if I click on the tab of the CSS
Styles panel and drag that out and note
| | 06:01 | that I'm dragging the entire grouping
out and not just one panel at a time.
| | 06:06 | Now if I wanted to, again I could grab
the little title bar of this grouping,
| | 06:09 | I could move it over here on the left-hand
side and you will notice when I get all
| | 06:13 | the way against the edge of the
screen, when I let go, it will create
| | 06:17 | a brand-new dock on the left-hand side.
| | 06:19 | So if you want your docks on the left
hand side, on the right-hand side or
| | 06:22 | if you have a big enough monitor and you
want multiple docks, you're free to
| | 06:25 | go ahead and create those as well.
| | 06:26 | Now the panels themselves, if they're
taking up too much room within a dock,
| | 06:30 | you will notice that you have this little
set of arrows in the upper left-hand corner.
| | 06:34 | If you hover over that it
will say Collapse to Icons.
| | 06:37 | So if I click on that, notice that the
panels now collapsed down to a series of icons.
| | 06:43 | If you click on one of those icons the
panel will appear, allowing you to work
| | 06:46 | in that panel and do what you want to do.
| | 06:48 | Clicking on the icon again will just
sort of slide that panel if you will
| | 06:52 | back into the tray.
| | 06:53 | This is a nice way of sort of keeping a
dock active, but not having it take up
| | 06:57 | a lot of screen real estate.
| | 06:58 | In fact, you can see here that we see
icons that have both an icon and the
| | 07:03 | label of the panel on it.
| | 07:05 | Well if you're comfortable with what
these icons are, you can actually grab
| | 07:09 | the dock itself and collapse it even
further so that it's just icons.
| | 07:13 | So I could do that on either side,
collapse it down to just icons and notice
| | 07:17 | that we are seeing a lot more of the
screen real estate now for our file and
| | 07:21 | our preview and if we need to access a
panel, we can simply click on that panel's
| | 07:25 | icon and it will appear.
| | 07:28 | So that's another very handy way of using that.
| | 07:30 | Now another way to hide panels
and docks is to use the F4 key.
| | 07:34 | If I hit F4 it appears at first glance
is that my panels have just gone away.
| | 07:40 | But if you're really paying attention
to the edges of your interface, you will
| | 07:43 | see that you have sort of this
thick gray bar over there on the edge.
| | 07:46 | If I hover over that gray bar, I can
see that my panels show up allowing me to
| | 07:51 | do what I need to do and as soon as I
hover off of them, they go back to sort of
| | 07:55 | that gray bar look and then
hitting F4 again will toggle that.
| | 07:59 | Now obviously we've made a lot of
changes to our interface here and
| | 08:02 | we have moved these panels around a lot.
| | 08:04 | After a while sometimes it can get a
little confusing and you can say, wow,
| | 08:07 | I just want to go back and set this to
the way the interface was when I started.
| | 08:12 | A very quick and easy way to do that
is to go up to your workspace switcher,
| | 08:16 | grab the pulldown menu and tell
it to reset the current workspace.
| | 08:20 | As soon as you do that it'll just go right
back to the way it was, when you started out.
| | 08:25 | So obviously the Dreamweaver
workspace is incredibly flexible.
| | 08:28 | You can modify it to suit your own
personal workflow to make sure that you
| | 08:31 | have just the panels that you need open at
any given time and, as we are going to see
| | 08:35 | in our next movie, we are able to use
workspaces to save custom layouts to make
| | 08:40 | switching between our interfaces quick and easy.
| | Collapse this transcript |
| Managing workspaces | 00:00 | It's very common to switch back and
forth between tasks in Dreamweaver.
| | 00:04 | On one occasion you might be working
heavily in code while other days
| | 00:08 | you might be working with dynamic
data or building a CSS layout.
| | 00:12 | Often this requires using panels and
toolbar layouts that differ from each
| | 00:15 | other significantly.
| | 00:18 | Rather than having to constantly open
and close panels and rearrange them
| | 00:23 | we can use workspaces to quickly switch
between interface setups, and even create
| | 00:27 | our own when the presets don't suit our needs.
| | 00:31 | So I'm starting out with the Designer
Workspace, and again, your workspaces,
| | 00:34 | if you are looking for a very quick and
easy way to access them, you can go right
| | 00:37 | up the Application toolbar which
on the PC is found docked with the Menu,
| | 00:42 | and on the Mac it's just below the Menu.
| | 00:44 | But if I grab that pull-down menu, you
will notice Dreamweaver has a lot of presets.
| | 00:48 | Most of the time you can find what you are
looking for just by going up to the Presets.
| | 00:53 | If I click App Developer for example,
you are going to see it switches to almost
| | 00:57 | mimic an eclipse-like Workspace.
| | 00:59 | We have our Styles over here, Databases,
Server Behaviors and our Files panel,
| | 01:04 | and then of course the coding
environment is front and center.
| | 01:08 | If I go to the Classic Workspace for example,
this looks very similar to Designer,
| | 01:13 | but our Insert panel is now moved up top,
and that's one of the very interesting
| | 01:17 | things about the Insert panel.
| | 01:19 | We'll take a closer look at that in
another movie, but it's one of
| | 01:22 | the only panels that can exist both
horizontally and vertically.
| | 01:26 | You will notice if I go to say the Designer
Layout, the Insert panel is found right
| | 01:30 | here docked with the rest of our panels,
and to switch between different
| | 01:35 | types of objects, I simply
click on the pull-down menu.
| | 01:38 | But, if I undock this panel and move it
up towards the top of my Workspace,
| | 01:43 | it will dock up here as a
horizontal panel grouping.
| | 01:46 | That's actually how I prefer it.
| | 01:48 | Just because I am used to working with
it that way and it's very easy just to
| | 01:51 | click on the tabs up here to switch
to the object types that I need.
| | 01:55 | Now you may not feel that way, you may
love having it over in the Panel dock
| | 01:59 | and that's the great thing
about choosing these workspaces.
| | 02:02 | You are free to do with them whatever you want.
| | 02:05 | The other thing is Dreamweaver has a memory.
| | 02:08 | It remembers what you
have done to the Workspace.
| | 02:10 | You will notice I am still in the
Designer Workspace, but the Insert panel
| | 02:15 | is now in sort of a horizontal layout,
which its not, when you first switched
| | 02:19 | the Designer Workspace.
| | 02:20 | Well if I switch to say this Mobile
Applications Workspace and then I switch
| | 02:25 | back to the Designer Workspace, you can
see it remembers that I would prefer
| | 02:29 | to have the Insert Bar up top.
| | 02:31 | So that's very handy.
| | 02:32 | Of course, it can also get you in trouble,
so if you've moved panels out and
| | 02:36 | you move them around and you close
panels that you in fact need and you switch
| | 02:41 | to the Designer Workspace, you are like,
oh man, I thought the Browser Lab panel was here.
| | 02:45 | Well never fear, you can go right
up top and just tell it to reset the
| | 02:48 | Workspace, and then it will
reset it back to its original.
| | 02:53 | I want to show you how to manage workspaces
by building a Workspace, and we are
| | 02:57 | going to build my favorite Workspace.
| | 02:59 | I am not telling you that this is the
most efficient panel layout far from it.
| | 03:03 | This just works for me,
the majority of the time.
| | 03:08 | The more you work with Dreamweaver, the
more you will know which panels you are
| | 03:11 | going to be using on a frequent basis
and which ones you don't use at all.
| | 03:14 | And I recommend after a while just
starting to build your own Workspace inside
| | 03:19 | Dreamweaver, so you kind of have it
customize to the way that you like to work.
| | 03:24 | So the first thing I am going to do is
I am going to come over to my Document window,
| | 03:28 | and here you have a choice to either
view it in Code View which is just total code,
| | 03:31 | Split Screen View which is code
on the left-hand side and the page
| | 03:36 | is designed on the right-hand
side, and then Design view.
| | 03:39 | The Workspace will remember which one
of those that you've chosen when you
| | 03:43 | created the Workspace.
| | 03:44 | So I am going to switch it over to
Design view and just leave it there.
| | 03:49 | Now I do like have my Insert panel up
top, so I am actually going to switch
| | 03:52 | over to the Classic view so that it
shows up, up top, and you will notice again
| | 03:56 | the view here changed to this Split Screen
view and that's because workspaces remember that.
| | 04:00 | Again, I am just going to consciously
click on Design so that Design is the
| | 04:03 | default view of this.
| | 04:04 | I am going to go down and expand my
Properties panel by clicking on the Tab for that.
| | 04:09 | Now over on the right-hand side in the dock,
I am going to rearrange the dock a little bit
| | 04:13 | and I'd like a very minimal dock,
I only want a few panels over there
| | 04:18 | that I know I am going to be
using say 80 to 90% of the time.
| | 04:22 | Other panels that I'll need, I'll
just open those up whenever I need them.
| | 04:25 | So I am going to take the Adobe BrowserLab
panel and I am going to close that group.
| | 04:29 | I am going to take the CSS Styles
Panel and I am going to leave them open.
| | 04:34 | I really like that and I need that panel group.
| | 04:35 | The Database, Bindings, Server Behaviors,
I am not going to be using them that
| | 04:39 | often, so I am going to
close that Tab group as well.
| | 04:42 | And then File, Assets, and Snippets, I use
those a good bit so I am going to leave those up.
| | 04:47 | So I really just kind of
stick with that particular layout.
| | 04:50 | Mostly I am going to open the CSS Styles
panel and sort of rearrange that
| | 04:54 | divider, so that I can see equal amount of my
files, and an equal amount of my CSS Styles.
| | 05:00 | I would say all the panels in Dreamweaver,
those are the two that are used
| | 05:03 | the most frequently, so I want them
sort of front and center when
| | 05:07 | I am creating my Workspace.
| | 05:09 | You may not see this Toolbar right here,
you may see that Toolbar above if you
| | 05:13 | are on a Mac, for example, you may see it above
the Document Toolbar instead of docked with it.
| | 05:17 | This is the Style Rendering Toolbar.
| | 05:20 | I can undock it here on the PC, but on the
Mac if you have it visible, you can't undock it.
| | 05:25 | That is a Toolbar that you can choose to
either have up or not, it's totally up to you.
| | 05:29 | If you right-click the Document
toolbar, you can see there it is,
| | 05:33 | Style Rendering or you can open it up by going
up to View>Toolbars>Style Rendering.
| | 05:40 | So either way. I'm just going to leave
it out and leave it docked.
| | 05:43 | If I don't need it, it's very easy to
simply right-click and get rid of it.
| | 05:47 | What the Style Rendering toolbar allows
you to do is toggle your visual styles
| | 05:51 | on and off or switch between different
styles such as Print Style sheets or
| | 05:55 | Handheld Style sheets and things like that.
| | 05:58 | The Properties Inspector down here on
the bottom, I use that a good bit,
| | 06:00 | so I am going to keep that open.
| | 06:01 | But there is another series of panels
that I use a good bit as well that are
| | 06:04 | not open right now.
| | 06:06 | So I am going to go up to Window,
I am going to go down to Results and I am
| | 06:11 | going to open up this Search panel grouping.
| | 06:12 | Now it doesn't matter really which
one I choose between this grouping.
| | 06:16 | Opening one is going to open the rest
of them because they are all part of a
| | 06:18 | pretty large group.
| | 06:20 | Now when you first see this, there is
a reason that people don't make this
| | 06:24 | part of the Workspace.
| | 06:25 | Look how much room it takes up;
| | 06:27 | not only that, it's sitting below the
Properties Inspector, so what I end up
| | 06:31 | with is almost no room to
look at my code or my design.
| | 06:35 | But that's okay, because
remember, you can customize these.
| | 06:38 | The way that our panel grouping starts out,
is not the way that it has to finish.
| | 06:42 | So what I am going to do is grab my
Properties Inspector by the tab, move it
| | 06:47 | down and over the tabs for the search
panel grouping and when I let go,
| | 06:52 | it just becomes part of that.
| | 06:53 | Now you can also reorganize these tabs.
| | 06:56 | I prefer to have the Properties Inspector
as the first tab because it's the
| | 07:00 | panel out of this grouping
that I am going to use the most.
| | 07:02 | So I am just going to move this over, and be
careful, you want to move it in a straight line.
| | 07:07 | If you move it up or down,
it will tend to undock it.
| | 07:09 | But I am just going to move that over
there, left-hand side, and now I have all
| | 07:14 | these panels that I can flip back and
forth between like validating my current
| | 07:18 | code, checking links on my page or my
site and my Properties Inspector,
| | 07:23 | all there sort of grouped together.
| | 07:24 | So that way I don't have to
go out and open those up again.
| | 07:27 | There is also this little thing
where when you do certain actions inside
| | 07:30 | Dreamweaver like Find and Replace
for example, where it'll open up this
| | 07:34 | grouping automatically.
| | 07:35 | So rather than have it sort of
overwhelming interface or pop-up unexpectedly,
| | 07:39 | I just have it sitting down there in the
bottom, and if any of those functions
| | 07:42 | ever run, then I'm not really interrupted
when that panel grouping shows up.
| | 07:47 | This is kind of how I like
to work inside Dreamweaver.
| | 07:50 | It's a minimal set up.
| | 07:51 | I am either working totally in code
just sort of coding things or working over
| | 07:55 | here in my Styles panel, in my Files panel.
| | 07:58 | The other panels I'll open them up when
I need them, but for the most part this
| | 08:02 | is kind of how I work inside Dreamweaver.
| | 08:04 | So I want to save this. I don't want to
have to go back and re-build this every
| | 08:09 | single time I open Dreamweaver.
| | 08:11 | Remember, Dreamweaver does have a memory.
| | 08:13 | Right now, we've been actually working
on the Classic Workspace or whatever
| | 08:17 | Workspace you currently had
open when we started this process.
| | 08:20 | So if I do switch a Workspace right now,
let's say I go over to the Designer again,
| | 08:23 | when I go back to Classic,
it's going to remember that.
| | 08:27 | But it's memory is limited.
| | 08:29 | If I close Dreamweaver and open it
up again it doesn't remember that.
| | 08:32 | Classic would just go back to its normal
state, and if for some whatever reason,
| | 08:36 | I chose Reset 'Classic' which I'm
not going to do, but if I did,
| | 08:40 | all my hard-work would be gone.
| | 08:42 | It makes sense to go ahead
and save this Workspace layout.
| | 08:46 | If you get Dreamweaver's interface to
a level of where you like it, and if
| | 08:50 | you like the panel groupings, just
save it, that way you can come back to
| | 08:53 | this anytime you want.
| | 08:54 | So I am going to go grab this pull-down
menu, I am going to go right down to
| | 08:58 | where it says New Workspace and
I just like calling this one The James.
| | 09:03 | So I click OK, and now in the Workspace
Switcher there is The James. If I grab
| | 09:08 | that pull-down menu, you will notice
that any of your custom workspaces are
| | 09:11 | going to show up at the very top
of the workspaces, which is nice.
| | 09:15 | So it just makes sure that you've the ones
that you've created yourself are right up top.
| | 09:19 | And now it doesn't matter, if I choose
a different Workspace, or if I go into
| | 09:24 | Classic and choose to reset the
Classic Workspace, it doesn't matter.
| | 09:28 | I can come up here choose The James any
time I want and I get the Workspace that
| | 09:32 | is best suited to me.
| | 09:35 | The great thing again about workspaces,
you can switch from task-to-task in
| | 09:39 | Dreamweaver without spending a whole
lot of time rearranging panels as long as
| | 09:42 | you build workspaces out that meets
specific requirements inside Dreamweaver,
| | 09:47 | then switching tasks is very, very simple.
| | 09:49 | Now my advice to you: be observant as
you start using Dreamweaver, watch how
| | 09:54 | frequently you find yourself
opening and closing specific panels.
| | 09:57 | If you find yourself constantly
going back and arranging the same panels
| | 10:01 | over-and-over, based on tasks that you
are performing, we will just consider
| | 10:05 | building a Workspace around them.
| | 10:07 | You'll find, it's the small things like
utilizing workspaces that dramatically
| | 10:11 | speed up your workflow in Dreamweaver.
| | Collapse this transcript |
| Exploring the Application toolbar| 00:00 | The application toolbar in Dreamweaver
is designed to give you quick access
| | 00:04 | to program options such as Workspaces,
Document Views and Site Management.
| | 00:08 | It's also where you'll find panels
that can extend the functionality
| | 00:11 | of Dreamweaver by downloading
interactive widgets or accessing many
| | 00:15 | of Adobe's new online services.
| | 00:16 | Now I just have a blank document open
here, so that we can see the workspace
| | 00:20 | in its entirety, if you don't have one of
these open, just go to the welcome screen
| | 00:23 | and click on the new HTML icon and it'll
open up a blank document for you, okay.
| | 00:28 | For those you on the Mac, you'll see a
slightly different set of options than
| | 00:31 | we have here on the PC.
| | 00:32 | Now I'll kind of explain the
differences as I go through them.
| | 00:35 | Okay, so the application
toolbar itself is pretty small.
| | 00:37 | If you'll notice on the PC it just
goes from here to say about here and
| | 00:42 | it includes pretty much only about
three or four things right now.
| | 00:45 | Now in the last movie we spend a good
bit of time taking about workspaces,
| | 00:49 | so if you've seen that movie, I think
you've a pretty good handle on everything
| | 00:52 | that is going on within the workspace
switcher, but that is indeed part
| | 00:55 | of the application toolbar.
| | 00:56 | You'll notice, just to the right of
the workspace switcher there's a little
| | 00:59 | search field over here and
this confuses a lot of people.
| | 01:03 | This is actually a help menu and the
idea behind this is that you type
| | 01:07 | something in such as you know CSS
styles and hit Return or Search.
| | 01:13 | Dreamweaver is going to take you out
online and it's going to search
| | 01:17 | the Community Help pages for
exactly what you've searched for.
| | 01:21 | Now the Community Help Pages, the
relevancy of the information that you typed
| | 01:25 | in, it's sort of cloud sourced.
| | 01:27 | So sometime you're going to find
exactly what you're looking for,
| | 01:30 | sometimes it can be a little frustrating.
| | 01:32 | So try to be really specific with what
you type in and be aware that this page
| | 01:35 | changes a lot, so the results that I'm
looking at or even the page layout or
| | 01:40 | even the functionality, that I'm showing
you guys may change in the future
| | 01:43 | since this an online feature.
| | 01:44 | Now over on the left-hand side of the
application toolbar we have three quick
| | 01:49 | little pull down menus. I call these
quick menus, because they give you quick
| | 01:52 | access to specific features.
| | 01:54 | For example, if I go to Layout, notice
that it gives me quick access to Code,
| | 01:59 | a Split Code view, a Code and Design
and what's really nice again,
| | 02:06 | there is no Split Code View button
right here, but there is here.
| | 02:08 | So, if I need to look at say my CSS on
one side, my HTML on the other,
| | 02:13 | I can go to that Split Screen View and it
allows me to kind of see two code windows
| | 02:17 | at the same time. That's kind of a neat actually.
| | 02:19 | You can also change it to Split
Vertically, so that the panels are on top
| | 02:23 | of each other, but I really like the
Split Vertical Layout and not so much
| | 02:26 | the Horizontal Layout.
| | 02:28 | Now the middle menu here is the
Extension Manager, Widget Browser and where
| | 02:32 | you can go out to Dreamweaver's exchange.
| | 02:35 | Now I'm going to talk more about this
in a movie little bit later on in the title
| | 02:38 | when I talk about Extending Dreamweaver.
| | 02:40 | What this allows you to do is sort of
go outside of Dreamweaver and grab some
| | 02:44 | things that are going to make
Dreamweaver more functional.
| | 02:46 | So for example, if you want a
calendar widget or if you're looking to drop
| | 02:49 | Google map into the program
and you want that automated.
| | 02:52 | There are things out there with in
the Dreamweaver marketplace that can
| | 02:55 | allow you to do that and these are the items
that would help you browse for those things.
| | 02:59 | Extension Manager is where you'll sort
of load all the plug-ins that you
| | 03:03 | and extensions that you download for
Dreamweaver and the Widget Browser is sort of
| | 03:06 | a unique little application where people
can create really handy widgets,
| | 03:11 | such asSlideshow Galleries and things like
such asthat that you can just sort of
| | 03:14 | insert directly onto your page without
having to really know a lot of code.
| | 03:16 | So these can be extremely useful and I'm
going to show this off in more detail
| | 03:20 | a little bit later on in the title.
| | 03:21 | Now just beside that we have our Site
Management capabilities and notice that
| | 03:26 | there are two options to create a New
Site or to Manage Sites and of course,
| | 03:30 | all of these things are actually available
in the Menu commands themselves.
| | 03:34 | You'll notice when I go over to Site,
here is New Site and Manage Sites as well.
| | 03:37 | It's just that the application
toolbar gives us nice quick access to those
| | 03:40 | things without having to search
and comb through a lot of menus.
| | 03:43 | So, for some common tasks that you
might want to perform or for some very
| | 03:46 | specific things, it's very
quick place to go up and grab them.
| | 03:49 | Now you may not, for whatever reason, like
the application toolbar, maybe you just
| | 03:54 | find it annoying, I don't know, but if
you ever want to turn it off, you can.
| | 03:58 | You can go right up to the Menu and go
to Window and notice right there I can
| | 04:02 | click on Application Bar and it
turns it off, and if I go and turn
| | 04:07 | the Application Bar back on, it comes back.
| | 04:09 | Notice that regardless of whether you
switch the Application toolbar on and off
| | 04:13 | again, the Workspace Switcher and the
Help Search remains, so those things
| | 04:17 | remain apart from the Application toolbar.
| | 04:20 | Now if you're on a Mac, the last part
I should you where I went to the Window
| | 04:23 | and should you this option down here,
your options look a little different
| | 04:27 | and I want to explain those.
| | 04:28 | The first thing that you're going to
notice is that the Application bar
| | 04:31 | at first glance this option is probably
grayed out, and that's because you have
| | 04:35 | to choose between whether or not you want
the workspace to be within what's called
| | 04:39 | an application frame.
| | 04:40 | Now most Mac applications have floating
windows that sort of float around
| | 04:44 | and the Desktop is visible in the background,
you'll notice on the PC, for example,
| | 04:47 | that I can't see any of the Desktop.
And if I rearrange my panels,
| | 04:51 | rearrange this, or even close this file,
I still can't see the Desktop.
| | 04:56 | It's locked in with in the
application frame itself.
| | 04:58 | Well, that's not the way Mac applications are.
| | 05:01 | So, Dreamweaver gives you the option of
having this sort of application frame or not.
| | 05:06 | I personally find the lack of an
application frame a little--I don't want to
| | 05:10 | use the word confusing--but it's sometimes
annoying, because there are so many times
| | 05:13 | I click on the Desktop without
meaning to and I loose focus on
| | 05:16 | the application, so I really like
having that application frame.
| | 05:19 | By default, you'll notice that
application frame has a checkmark beside it.
| | 05:22 | For those of you on a Mac, if you
deselect that, now everything sort of becomes
| | 05:26 | a floating panel and you're able
to go back up to Window and turn the
| | 05:29 | Application Bar either on or off.
| | 05:32 | Now again, another sort of Mac and
PC difference is when you turn the
| | 05:36 | Application Bar off on the Mac, and
again, I know we don't have any visuals of
| | 05:39 | this, but if you're on a Mac give this a whirl.
| | 05:42 | If you turn the Application Bar off,
you also lose the Workspace Switcher
| | 05:46 | and that the Help Search feature.
| | 05:47 | So, those are two sort of differences
between the PC and the Mac interface.
| | 05:51 | And if you're on a Mac and you won't get
it back again, really simple to do, just
| | 05:55 | make sure Application Bar is turned
on and then click the checkbox beside
| | 05:58 | application frame again, and you'll see
the Application toolbar sort of stretch
| | 06:01 | itself out, so that it fits the
application frame itself, okay.
| | 06:05 | So, even though its kinds of small in
size, the Application toolbar does put
| | 06:08 | considerable power in your hands, but
the workspace switcher alone is something
| | 06:12 | that you're going to just use
continuously inside of Dreamweaver.
| | 06:16 | So again, even though it may not have
that many options, it's an incredibly
| | 06:19 | handy toolbar to have around.
| | Collapse this transcript |
| Exploring the Document toolbar | 00:00 | The Document toolbar is such an
important part of Dreamweaver, I doubt
| | 00:04 | you'll ever think if it is just a toolbar.
| | 00:06 | More than likely you'll think of it as an
extension of the document that you are working on.
| | 00:11 | Now Document toolbar is found just
above any open document and it allows you to
| | 00:15 | access different views, preview your pages,
upload files, title your pages, check
| | 00:20 | your page code and a lot more.
| | 00:23 | So in order to sort of go over a little
bit about what the Document toolbar can
| | 00:26 | do for you, I went ahead and defined
my site to target the 01_06 folder and
| | 00:33 | I have opened up the index file
that you can find inside of that.
| | 00:36 | So it's okay if you have a blank
document open, it doesn't really matter
| | 00:39 | that it's the index page, but for this
exercise I am going to go ahead and use the
| | 00:42 | files found within that folder.
| | 00:43 | Now another thing I want to do is I
am going to turn off my Style Rendering
| | 00:46 | toolbar and the reason for that is
because it's not really a part of the
| | 00:48 | Document toolbar and on the PC interface,
it's really easy to get it confused.
| | 00:53 | Plus, one of things that's really kind
of interesting about the Document toolbar
| | 00:56 | is it will sort of flex based on what
you are focused on and what you're looking at,
| | 01:00 | you'll see fewer or more options
up on the Document toolbar.
| | 01:04 | So I don't want to get really crowded
up there, so I am just going to turn
| | 01:06 | Style Rendering off by right clicking the
Document toolbar and turning Style Rendering off.
| | 01:10 | Now, if you didn't have Style Rendering
on, don't worry about turning it on just
| | 01:13 | sort of leave it off.
| | 01:15 | Okay now, you'll notice that currently
I'm in the Code view of this file and
| | 01:21 | the first thing you will notice in the
Document toolbar are four buttons;
| | 01:25 | Code, Split, Design and Live. Let's
talk about what those will do for you.
| | 01:29 | Code view is a pretty self-explanatory,
it lets you see the code of your page
| | 01:34 | edit and work with that code and if
you're somebody that really likes to hand
| | 01:37 | code this is going to be probably
your default view inside Dreamweaver.
| | 01:40 | Now we also have a Split screen view
and this Split view, what this does for you
| | 01:44 | is it's going to show you code on the
one side and on the other side it's going
| | 01:48 | to show a Design view that shows you
the page that you're currently working on.
| | 01:52 | So this is incredibly handy, especially
for people that are brand-new
| | 01:56 | to learning Web design, because this
allows you to make changes say over in the
| | 02:00 | Design side and see those changes in the code.
| | 02:03 | So you can see the code that's being
generated based on what you're doing and
| | 02:06 | it's a really nice way of sort of learning that.
| | 02:08 | It also helps you sort of look through
the code and then figure out what you're
| | 02:10 | looking at over here on the page.
| | 02:12 | So if you are wondering, you know, who
is this if you highlight this, notice
| | 02:16 | the Design view changes and it
highlights the content on the page
| | 02:20 | that belongs to this code.
| | 02:21 | So it's very, very nice way of sort of
figuring out what's what, who's who and
| | 02:25 | learning about the process of affecting
an item on the page and seeing the code
| | 02:29 | update or writing the code and
seeing what that does in the Design view.
| | 02:33 | Now if you prefer to work visually,
we do have the Design view.
| | 02:36 | Now I want to show you guys something
about Design view that's much truer today
| | 02:40 | than it was say four years ago when I
started doing Dreamweaver titles
| | 02:44 | and that is that this Design view is
beginning to really sort of show its age.
| | 02:48 | This Design view uses a very, very old
rendering engine and it can't handle
| | 02:53 | the majority of the CSS that
most modern browsers can handle.
| | 02:57 | So you might code a layout that's going
to look just fine, but you will notice
| | 03:01 | that in this Design view, the layout
looks terrible and it's very hard to
| | 03:05 | access certain things.
| | 03:06 | If I click inside this particular
container for example, because of the way
| | 03:10 | Dreamweaver's Design view renders this,
I can't click inside and select a code.
| | 03:15 | All I can do is highlight this one element.
| | 03:18 | It becomes a lot harder to click
inside of an element and select something.
| | 03:21 | Plus you're not really getting a good look
at what actually is going on inside your page.
| | 03:26 | So while the Design view is helpful,
don't ever look at a page within Design
| | 03:30 | view and think that that's the way it's
going to look in a browser, because it
| | 03:33 | just is not going to look the same.
| | 03:36 | Now with that in mind, there is a
button over here on the right-hand side
| | 03:40 | just beside Design view called Live.
| | 03:42 | And this is going to
toggle Live view on and off.
| | 03:45 | Now if I click on Live view, I see
a totally different view of my page.
| | 03:49 | Live view turns on Dreamweaver's
internal WebKit rendering engine.
| | 03:54 | WebKit is an open-source rendering
engine that a lot of browsers like Apple
| | 03:57 | Safari and Google's Chrome
uses to render its pages.
| | 04:01 | So, by turning this on, I get a much
more realistic view of kind of what's
| | 04:06 | going on within my page.
| | 04:07 | For example, it will even show
interactive things like, if I hover over this,
| | 04:11 | I can see the transitions happening
between these elements and I just can't
| | 04:15 | see that in normal Design view.
| | 04:17 | Now you might say to yourself, well wow!
| | 04:19 | Why would you ever use Design
view, why don't you just leave this
| | 04:21 | particular view on?
| | 04:23 | Well that's because this view is
really designed for previewing.
| | 04:26 | You can't select an item in here and work on it.
| | 04:28 | I can highlight code, but if I begin
to type, you can see I'm not making
| | 04:33 | any changes to my page.
| | 04:34 | So I would need to switch back and
turn Live view off, then I can highlight
| | 04:38 | content on the page and make changes to them.
| | 04:40 | So Live view is a great preview
function, but is not something that you are
| | 04:44 | going to be using when you're
making edits to your pages.
| | 04:46 | Now you may have noticed this, you may
not, so I am going to toggle it on and
| | 04:49 | off again so you can see this.
| | 04:50 | But look at the options that are
on my Document toolbar right now.
| | 04:53 | If I turn the Live view off,
some of them go away.
| | 04:55 | If I turn the Live view back on, they come back.
| | 04:57 | And that's because these items right here
are relative to Live view being turned on,
| | 05:02 | Live Code for example is going
to show me the code as it's generated.
| | 05:06 | So if you have JavaScript or external
PHP code that's generating specific
| | 05:11 | content and placing it on the page,
Live view is instead of showing you sort of
| | 05:15 | the script itself, it's going to show
you the actually contents or the actually
| | 05:18 | code that's generated.
| | 05:19 | Inspect is something that we'll be
taking a closer look at later on, but it
| | 05:23 | allows me to inspect the elements on
the page, to determine the value of
| | 05:26 | margins, padding, what element is
causing spacing things like that.
| | 05:30 | So Inspect is incredibly helpful.
| | 05:31 | Now we also have this nice little
address window and what's really cool about
| | 05:35 | this is when you're in Live view
you really are looking at a browser.
| | 05:39 | So I'm seeing the page or let's say I
can pass parameters to my page, I can type
| | 05:43 | in new addresses as a matter of fact
if I wanted to, well let's just try it,
| | 05:47 | http://www.lynda.com, let's
see if that works. It does.
| | 05:54 | This is a browser within Dreamweaver,
so it allows you to just type in and
| | 05:58 | kind of do your thing.
| | 05:59 | So it's really cool if you have
tutorials online like at Lynda.com,
| | 06:03 | you can go into Dreamweaver and sort of
browse through those, really cool!
| | 06:07 | So if you are looking for certain
things or if you are searching for something
| | 06:09 | or more importantly and this is really
why this function is here, if you have
| | 06:12 | absolute links in your page that link
out to external websites, you can make
| | 06:15 | sure they're working.
| | 06:16 | You can also hit the Back button, you
can refresh the page and you can go back
| | 06:20 | to the page we were looking at, at any time.
| | 06:22 | Now I am going to turn Live view off
and I am going to take a look at
| | 06:25 | this set of icons right here.
| | 06:27 | Now, each one of these set of icons
has a series of things that you can
| | 06:30 | do within your page.
| | 06:32 | The Multiscreen preview if I grab that
that helps you if you are designing for
| | 06:35 | multiple-screens, you can change
the Preview pane of your window.
| | 06:39 | So for example if I went down to
Smart Phone, you can see that it shrinks
| | 06:42 | all the window size down, so the page sort of
displays the same way it would on a Smart Phone.
| | 06:46 | I can also open up Multiscreen Preview
if I want to see the Multiscreen Preview
| | 06:51 | panel which allows me to see the
page in different sizes all at once.
| | 06:54 | So that's a very handy tool and of course
I can always reset it back to Full Size.
| | 07:00 | Now we also have other options like
previewing in a browser which I am going
| | 07:03 | to explore in a little bit more detail
later on, uploading and downloading files
| | 07:07 | to your server, Validation, so you can
validate your document through the W3C
| | 07:10 | to make sure you are using valid HTML.
| | 07:13 | We have browser compatibility
to make sure that your CSS
| | 07:16 | is relatively error-free.
| | 07:18 | We can check spelling from here, so all
sorts of things and we also have Visual Aids
| | 07:22 | so we can turn off things like CSS
Layout Box Model Guides, Table Borders,
| | 07:27 | Fluid Grid Layouts, which is a
new feature in Dreamweaver CS6.
| | 07:30 | So we have a lot of things that we can
do in terms of previewing and checking
| | 07:33 | our document right from the Document
toolbar without having to go out to any
| | 07:36 | external panels or opening closing panels.
| | 07:38 | So it's incredibly handy.
| | 07:40 | And perhaps one of the nicest things
about it is right here is the Title of
| | 07:43 | our page or Document Title and that's
something you definitely want to do for every
| | 07:47 | single page, so the last thing I am
going to do with the Document toolbar
| | 07:50 | is give this page a title because it
doesn't have one and I am just going to type
| | 07:53 | in Welcome to Roux Academy.
| | 07:58 | Now what does that do for you?
| | 07:59 | Well if I save the file and I look
inside my source code, you can see up in the
| | 08:03 | head of the document now, my title tag
now has Welcome to Roux Academy in it.
| | 08:07 | That's going to help me in terms of letting
search engines know what that page is all about.
| | 08:11 | They will use that when
they display the results.
| | 08:14 | And if I preview this in a browser,
you can see right up top it says
| | 08:17 | Welcome to Roux Academy now.
| | 08:18 | So it's very important if you've
never worked with Page Titles before,
| | 08:21 | it's very important that you title them, so your
pages then come up and say Untitled Document.
| | 08:26 | So it's incredibly handy to have
the titling functional right there
| | 08:29 | in the Document toolbar.
| | 08:30 | You know it just does an amazing job
of putting really much of Dreamweaver's
| | 08:34 | functionality right there in
your fingertips in one toolbar.
| | 08:38 | But focusing on using it, as you learn
Dreamweaver, you are going to develop an
| | 08:41 | efficient workflow when performing the
majority of tasks within Dreamweaver.
| | Collapse this transcript |
| Working with the Property inspector| 00:00 | Without a doubt the Properties
Inspector is one of the most important
| | 00:03 | and powerful panels in Dreamweaver.
| | 00:05 | It displays and allows you to edit the properties
of whatever you happen to be focused on.
| | 00:10 | It's contextually sensitive, so it's
going to change to display the properties
| | 00:13 | of any object that you have selected.
| | 00:15 | Now, the Properties Inspector, which
you can find right down here at the bottom
| | 00:18 | of the interface, has two tabs; HTML and CSS.
| | 00:23 | The HTML tab allows you to control the
properties of the HTML elements on the page,
| | 00:28 | while the CSS tab allows you
to create and edit existing styles.
| | 00:32 | Now, I don't want to go too deep into
the Properties Inspector in this movie,
| | 00:35 | because we're going to be using it
throughout the title, so you are
| | 00:38 | going to have plenty of practice in
using the Properties Inspector and
| | 00:42 | sort of seeing what it can do.
| | 00:43 | But I want to point out a couple of
very important things about the Properties
| | 00:46 | Inspector and this is especially true
for any of you guys who might be watching
| | 00:50 | the title who are print designers
moving over to the Web for the first time,
| | 00:53 | I know you're probably familiar with
using a Properties Inspector type panel
| | 00:58 | in say InDesign, for example.
| | 00:59 | And it's very tempting to come in and
select an item, and say, oh, I can change
| | 01:04 | the font right here and just change it.
| | 01:05 | But it's very different from a document,
| | 01:07 | say like an InDesign document, and
doing something like that to a webpage.
| | 01:11 | Because essentially you're changing
styles which govern the entire site.
| | 01:16 | Again, it's very easy to say, oh, well,
I've used styles before in InDesign,
| | 01:20 | but they are not the same.
| | 01:21 | CSS is a presentational language and
you need to be really aware of
| | 01:27 | what it is that you're changing
before you make those changes.
| | 01:28 | So as we work through this exercise,
I want you to focus on how different
| | 01:33 | changing things within the Properties
Inspector is in Dreamweaver in terms
| | 01:38 | of dealing with the content of the page
than it is in some other programs that you
| | 01:41 | might be familiar with using. Okay.
| | 01:43 | So the first thing I am going to do is
take the Properties Inspector and switch
| | 01:46 | it back to the HTML tab.
| | 01:48 | Now, the page that I am working on here,
the about.htm page, this is sort of a
| | 01:51 | stripped down page, there is not a lot
going on here and it's going to allow us
| | 01:55 | to really focus on our content. All right.
| | 01:57 | So I am going to go up and click just
inside About Roux Academy.
| | 02:01 | I don't have to highlight the text.
| | 02:02 | As a matter of fact, sometimes you
really don't want to highlight the text,
| | 02:05 | you just want to focus on the content itself.
| | 02:07 | So by clicking inside of that
I can see About Roux Academy.
| | 02:10 | Now, if you are wondering about this
little icon that comes up, that looks
| | 02:13 | a lot like a steering wheel or a
paddlewheel, that's the Code Navigator.
| | 02:17 | And I am going to be honest with you, I use the Code
Navigator all the time, but that icon is annoying.
| | 02:21 | So I am going to show you how to turn it off.
| | 02:23 | If you click on that icon, it's going
to bring up this little dialog box and
| | 02:26 | you can choose Disable.
| | 02:28 | Now, that doesn't mean that you're
getting rid of the Code Navigator.
| | 02:31 | Later on I'll show you how to bring it back.
| | 02:34 | But I want to disable it right now so
that it doesn't come up every single
| | 02:37 | time I click some place. Okay.
| | 02:38 | So I am going to click inside About
Roux Academy, and if I go down to my
| | 02:42 | Properties Inspector and I make sure
that the HTML tab is the tab that I've
| | 02:46 | clicked on, you can see right over here
on the left-hand side we have a little
| | 02:49 | pull-down menu for format, and
currently this is formatted as a paragraph.
| | 02:54 | Well, if I grab that pull-down menu,
I can see a number of Headings and this
| | 02:58 | little Preformatted option as well.
| | 02:59 | Now, these are not styles, these
are tags, so these are HTML tags.
| | 03:03 | So if I change this to a Heading 1
tag, yes, it gets bigger, yes, it gets
| | 03:08 | bolder, but in reality what I've done is
I've switched it from being a Paragraph
| | 03:12 | tag to be an h1 tag.
| | 03:13 | If you go into Split Screen
View, you can see this in action;
| | 03:16 | you can see that now About Roux
Academy sits inside of an h1 tag.
| | 03:20 | If I scroll down, I can see Our
Continuing Mission paragraph and
| | 03:24 | if I click inside that, you'll notice that
currently that text is inside of a Paragraph.
| | 03:28 | Well, if I click again and make sure
I am clicking in Design View when I do
| | 03:31 | but if I click inside Our Continuing
Mission and I change that to a Heading 2,
| | 03:35 | notice that even though it changes
the way it looks on the screen,
| | 03:39 | in reality the only thing that's changed
is now it's surrounded by an h2 tag rather
| | 03:43 | than a Paragraph tag.
| | 03:44 | I am going to continue to scroll down,
I am going to find Transportation and
| | 03:48 | I am going to change that to a Heading 2 as well.
| | 03:51 | So you're essentially structuring the
contents of your page through the use
| | 03:54 | of these tags when you make those changes
inside of the Properties Inspector,
| | 03:59 | and that's if you're focused on HTML.
| | 04:01 | Now, if you are focused on CSS, a
totally different set of things happened. Okay.
| | 04:05 | So if I scroll back up, for example, and
I'm just going to switch back to Design
| | 04:09 | View really quickly here, but if I
scroll back up, let's say, I want to change
| | 04:14 | the color of the main headline.
| | 04:15 | So if I click in About Roux Academy,
notice, again, I don't have to highlight
| | 04:19 | the whole text, it knows
that I am inside an h1 tag.
| | 04:22 | Well, I noticed right over here in CSS view
I have Font, I have Size, I have Color,
| | 04:27 | and we are going to break these
down in more detail when we get into the
| | 04:31 | chapter on managing CSS in Dreamweaver.
| | 04:33 | But it's very tempting to do something
like this and say, oh, well, you know,
| | 04:36 | I'd really like that headline to be an
orange that matches this, and Dreamweaver
| | 04:40 | gives you those tools.
| | 04:41 | You can click on this color chip,
you get a little Eyedropper tool and
| | 04:44 | I can mouse that over an image, I can click
and, again, my headline becomes that color.
| | 04:49 | But what has really happened behind the scenes?
| | 04:52 | Well, if I switch over to Code View,
I can see that I have a style right
| | 04:55 | up here for h1 selector and you'll notice it
just gave it a color definition to match that.
| | 05:01 | Now, I just so happen to already have one
of those rules up there. What if I didn't?
| | 05:06 | Let's say I go down to Our Continuing
Mission and I want to make that h2
| | 05:11 | kind of one of these darker blue colors?
| | 05:13 | So again, you'll notice that if I click
on the paint chip, I get the Eyedropper
| | 05:18 | tool, I can mouse over a part of this
wall and click and now I see an entirely
| | 05:22 | different dialog box come up, and for
those of you that aren't familiar with CSS,
| | 05:25 | this can be a little daunting at first.
| | 05:28 | So we are going to cover this in a
little bit more detail when we talk
| | 05:31 | about managing the CSS.
| | 05:32 | But essentially it's asking me, oh,
you want to create another style, right?
| | 05:37 | So if I say, oh yeah, sure, and I want
to do a tag, and I am going to redefine
| | 05:40 | that h2 tag, and I can put in an
external CSS or This document only.
| | 05:44 | I'll just do it in This document only.
| | 05:46 | I'll click OK and now you
can see it changes the color.
| | 05:49 | But in reality what we did, we wrote a brand-
new rule that's now up there in our style sheet.
| | 05:53 | So the Properties Inspector allows
me to do this very quickly and very easily,
| | 05:56 | but I have to keep in the back of
my mind as a designer, I have to
| | 06:00 | understand what's happening.
| | 06:02 | Am I changing the structure of
the code, or am I writing a style?
| | 06:05 | If I'm writing a style, is it written
in the proper place and is it written
| | 06:09 | using the proper selector?
| | 06:11 | If I am changing the structure and the
code of my page, am I using the proper tags?
| | 06:16 | For example, if I scroll down here and
I have these three items, if I switch
| | 06:20 | back over to HTML and I highlight
those, I can click right here on this
| | 06:25 | little bulleted list.
| | 06:26 | That's almost exactly
the same way it is in Word.
| | 06:29 | But again, what have I really done, I've
created an unordered list right there in my code.
| | 06:34 | So the Properties Inspector, it actually
does an amazing thing, it allows us
| | 06:38 | to make big changes on our
code with just a single click.
| | 06:41 | But again, you have to be
aware of what you're doing.
| | 06:43 | If I come back up and I highlight this
text, But age hasn't slowed us down,
| | 06:48 | I can click the Italics and what I'm doing is
I am surrounding that text with an <em> tag.
| | 06:52 | And you can change that in your
preferences if you'd rather use the Italic tag,
| | 06:56 | which is no longer deprecated.
| | 06:58 | But what about seeing the same
things in two different locations?
| | 07:01 | For example, the Bold and Italic that
we see here on the HTML tab is also here
| | 07:06 | when I look at CSS, but
they're not the same thing.
| | 07:09 | Again, if I scroll down and I find,
We exist to educate, and I highlight that,
| | 07:13 | now if I am in the CSS pane and I click
Bold, what happens is, again, I get this
| | 07:17 | new rule selector. And it thinks I
want to control the weight of the text
| | 07:21 | through a CSS rule rather than
through a tag like the <em> tag.
| | 07:24 | So again, here I am going to have to
either come up with a class, in this case
| | 07:27 | maybe I'll just say something like
Bold it, click OK, and visually you really
| | 07:33 | can't tell the difference when something
is within say an <em> tag or a strong
| | 07:37 | tag or whether a class has been
applied, visually it looks the same,
| | 07:40 | but in terms of the structure of
your page, it's very different.
| | 07:43 | So here I notice when I say, We exist to
educate, that it's in a span tag with a
| | 07:47 | class boldIt, which is referring
to this selector that we just wrote.
| | 07:52 | Whereas, the italicized text is
actually inside an em tag, which the default
| | 07:58 | rendering of an <em> tag in the majority
of browsers out there is to italicize.
| | 08:03 | So it just depends upon where you're
focused, what you're looking at, and which
| | 08:07 | of those two tabs you have selected in
terms of what Dreamweaver is actually
| | 08:10 | going to do behind the scenes.
| | 08:11 | Now, I mentioned earlier
that the Properties Inspector
| | 08:13 | is contextually sensitive.
| | 08:15 | So if I select something different,
say this image for example, I don't see
| | 08:18 | the two tabs, the HTML and CSS tab anymore.
I actually see the properties of the image.
| | 08:23 | The source (Src) of the image, the
alternative text (Alt), the width (W) and the
| | 08:27 | height (H) of it, all sorts of things,
which we'll actually look into a little
| | 08:30 | bit deeper when we get into our
chapter on images a little bit later on.
| | 08:34 | The thing that I really want you take
away from this is that, although the
| | 08:37 | Properties Inspector is an incredibly
efficient way to make quick edits
| | 08:40 | to elements within your pages, you need to
keep in mind that changes made to the CSS
| | 08:45 | can cause site-wide and
sometimes very unexpected changes.
| | 08:48 | So be sure you know exactly which rule
you're targeting, how it fits into your
| | 08:52 | overall CSS structure before
you make a change in the CSS View.
| | 08:56 | Also, pay really close attention to
the active tab, whether it's HTML, CSS,
| | 09:01 | that sort of thing.
| | 09:02 | Remember the edits that you make in
the HTML tab are actually going to change
| | 09:05 | the structure and of course changes in the
CSS tab are going to be changing the styles.
| | 09:09 | The good news is, if you're totally
overwhelmed by that, don't be.
| | 09:13 | We're certainly going to be going through
the Properties Inspector in great detail
| | 09:16 | as this title goes on and we'll
discuss all of those options.
| | 09:19 | So don't be afraid to use it, it's
just something that I think you need to be
| | 09:22 | really aware of what it's actually doing
before you use it, because it can cause
| | 09:27 | some unintended side effects
if you're using it incorrectly.
| | Collapse this transcript |
| Using the Insert panel | 00:00 | One of the things that Dreamweaver is
known for is its ability to handle many
| | 00:04 | of the complex tasks of creating Web pages
visually, with Dreamweaver automatically
| | 00:09 | generating the code behind the scenes.
| | 00:11 | Even when working with objects that are
relatively simple to code such as tables,
| | 00:14 | Dreamweaver can speed up the process of
generating that code into just a single click.
| | 00:20 | The secret behind much of this success
is the Insert panel, and in this movie
| | 00:24 | I want to take a moment to explore
the Insert panel in more detail.
| | 00:28 | Now because of the Custom workspace
that I have up, I see the Insert panel
| | 00:31 | docked up here in a horizontal fashion.
| | 00:33 | You may see it as a vertical panel
over here in the panel dock.
| | 00:37 | It doesn't really matter where you
have it, just so long as you're
| | 00:40 | comfortable with it being there.
| | 00:41 | I am just going to show you that real quick.
| | 00:43 | If I take the panel and undock it and
float it around, notice that it sort of
| | 00:46 | becomes that vertical panel and you might see
it in a workspace, where it's sort of over here.
| | 00:52 | So if you like it like that, you
can certainly leave it like that.
| | 00:54 | You can switch between the different groupings
of objects, by simply grabbing the menu.
| | 00:59 | But if you prefer it in sort of this
horizontal space, that's easy to do as well.
| | 01:04 | Now one of the first things that you're
going to notice about the Insert panel
| | 01:06 | is that it has these tabs or menu options up
top, and they sort of group objects together.
| | 01:12 | So you're going to hear me refer to these
as objects all the time and that shows you.
| | 01:16 | When somebody has been using Dreamweaver
for a long time, they will refer
| | 01:19 | to this almost sometimes as the Objects panel
because that's what it used to be known as.
| | 01:23 | So it's very tough for me
to get out of that habit.
| | 01:25 | But each of these things I refer to as Objects.
| | 01:27 | This is the Common objects for example.
| | 01:29 | These are Layout objects.
| | 01:31 | So essentially they've grouped these
object together based on either the type
| | 01:35 | of object that they are, or how frequently
you're probably going to be using them.
| | 01:39 | Common objects, you guessed it, these
are objects that you're going to be using
| | 01:43 | fairly frequently within Dreamweaver.
| | 01:44 | They are very common.
| | 01:45 | Our Layout objects are going to be elements
or objects that are related to page layout.
| | 01:50 | We have Forms, Data, Spry.
| | 01:53 | Now in some cases you're going to see
fewer or more of these based upon on
| | 01:58 | the type of page that you have opened.
| | 01:59 | For example, if you're working with a
PHP page, you'll see an entirely new tab
| | 02:03 | that has PHP elements in it.
| | 02:05 | You're working with ColdFusion,
you'll see ColdFusion tab.
| | 02:07 | So there are instances where you're
going to see more of these or less of these,
| | 02:12 | based on what you have opened.
| | 02:13 | Now some of these you may never use,
if you're not doing InContext Editing,
| | 02:17 | which has actually been discontinued by Adobe.
| | 02:19 | There are plenty people out
there, they are still using it.
| | 02:22 | But if you're not using it, you'll
probably never open that panel up.
| | 02:25 | If you're not working on any jQuery
Mobile projects, you'll probably never use
| | 02:29 | this grouping as well.
| | 02:31 | Now if you have the Insert panel
arranged in this sort of horizontal layout
| | 02:35 | as I do and your tabs are taking up too much
space, feel free to right-click that and
| | 02:40 | you can actually tell it to show as menu,
and that saves even more space by sort
| | 02:44 | of lowering the height of the Insert
toolbar, and then you have just as you do
| | 02:49 | when it say vertical menu, you have
sort of this pulldown menu option.
| | 02:53 | Now in my opinion it doesn't
really take up that much space.
| | 02:56 | So I actually like to show it as tabs instead.
| | 02:59 | You also may have noticed when I was
looking at those options that we have the
| | 03:02 | option of turning these color icons on and off.
| | 03:05 | This sort of becomes a thing within Adobe
interfaces, this sort of neutral gray color.
| | 03:10 | If I right-click I can turn the color
icons on and off, and there's actually
| | 03:14 | been some debate during the pre-release
phase, as to whether Adobe was just going
| | 03:18 | to turn all the icons gray by default.
| | 03:21 | Frankly I don't like it, because I
think gray icons looks like something is
| | 03:24 | inaccessible and then when you hover
over it, you get the color which is
| | 03:27 | again kind of weird.
| | 03:28 | But there's a bigger reason, and I'm
going to turn the Color icons back on again
| | 03:32 | and sort of discuss that.
| | 03:34 | You can see that these icons have different
colors, and there's actually a reason for that.
| | 03:38 | If I go to Spry for example, you'll
notice that the Spry Widget objects are blue.
| | 03:43 | The Spry form objects have
sort of this green tint to them.
| | 03:46 | So a lot of times the objects are
communicating something visually by that color.
| | 03:50 | But again, it's a personal choice.
| | 03:51 | You can turn that on, you can
turn it off, doesn't really matter.
| | 03:55 | Okay, so we're going to be using
again the Insert panel all the way
| | 03:58 | throughout this title.
| | 03:59 | I don't want to go through every single
setting here and overburden you with that.
| | 04:03 | Just spend some time looking
at all these different options.
| | 04:05 | You can insert tables for example.
| | 04:07 | You can insert images.
| | 04:08 | Now you'll notice that some of these
have pulldown menus and if you click on the
| | 04:11 | pulldown menu, you can see that there
are actually multiple things that you can
| | 04:15 | insert that are grouped with images,
or multiple things that are grouped with
| | 04:19 | media like Flash video, or
ActiveX Plug-ins and things like that.
| | 04:23 | Now I want to just kind of show off what
the Insert panel can do, by coming over
| | 04:27 | here to an area of the page that's
really impossible to access in Design view
| | 04:33 | and that's the Head of the document.
| | 04:34 | There's a lot that goes on in the head
of your document, you're going to have
| | 04:37 | keywords, metadata, the title of your
document, links to external Style sheets.
| | 04:42 | There's a lot going on there, and
unless you go into Code view, it's almost
| | 04:46 | impossible to access that content.
| | 04:48 | But through the Insert panel I can
modify content within the head of my document
| | 04:52 | without ever going into Code view.
| | 04:54 | So for example, I can garb this
pulldown menu, and notice I can create any
| | 04:57 | custom Meta tag I want, I can use
Keywords, Descriptions, Links to external CSS
| | 05:02 | files and things like that,
very quickly and very easily.
| | 05:05 | I'm just going to click Description and that
brings up a nice dialog box, this is okay.
| | 05:10 | You want to give this page a
description, go right ahead and do that.
| | 05:13 | So I'm going to type in, The Roux
Academy provides fine art education
| | 05:20 | across multiple disciplines in an
environment that encourages growth and
| | 05:29 | nurtures creativity. All right!
| | 05:31 | I know watching me type is fascinating.
| | 05:34 | Essentially, you can just go in and
type in whatever description you want and
| | 05:38 | when I click OK, now my page has a description.
| | 05:41 | Now what did I actually do, by doing that?
| | 05:43 | Well if I switch over to Code view, you
can see that now up in the Head of the
| | 05:46 | document, which we simply couldn't see
in Design view, there is a new Meta tag
| | 05:49 | with a description and we've given it one.
| | 05:51 | So now search engines say return to
this particular page for example, some of
| | 05:56 | them are going to choose to display
that description, and it's going to help
| | 05:59 | people understand what this page is
all about, which is really nice.
| | 06:02 | Again through the Insert Panel I'm able to do
that without ever having to go into my Code.
| | 06:06 | So I can access things on my page
that I might have hard time accessing
| | 06:10 | otherwise, or I can insert really
complex objects like Widgets or Tables
| | 06:14 | or Forms right on the page
without ever having to go into code.
| | 06:17 | So if you're the type of designer
that just prefers to work visually or
| | 06:21 | if you're just looking for a quick way to
generate standards-compliant, clean HTML
| | 06:25 | for complex objects, the Insert
Panel is your likely tool of choice.
| | Collapse this transcript |
|
|
2. Site ControlUnderstanding basic site structure | 00:00 | From the time it was released one of
the things that made Dreamweaver different
| | 00:03 | from other HTML editors was its
focus on managing sites, not just pages.
| | 00:08 | While other editors were designed
to create webpages, Dreamweaver
| | 00:12 | was designed to create websites.
| | 00:14 | This focus is one of the reasons that Dreamweaver's
site management tools are so powerful.
| | 00:19 | In this chapter we're going to discuss
basic site management within Dreamweaver
| | 00:23 | and some of the tools that you can
use to take control of your site.
| | 00:26 | No matter how powerful a program's tools
are, unless you understand the concepts
| | 00:30 | behind them, you won't be
effective when using them.
| | 00:34 | That's why the first concept I want to
discuss here is basic site structure.
| | 00:38 | To those new to Web design the task
of creating an entire website can be
| | 00:41 | a little intimidating at first.
| | 00:44 | The truth of the matter is that most
websites are actually quite simple.
| | 00:48 | Websites at their core are simply a
collection of files and folders just like
| | 00:52 | any other project on your computer.
| | 00:54 | Although every website is different,
some standards have emerged when
| | 00:57 | structuring your site that can help keep
your site organized and running smoothly.
| | 01:02 | To create your site you'll first need a
folder on your hard drive to put it in.
| | 01:07 | This folder is referred to as your root
folder, and later when you define your
| | 01:12 | site, this is the folder that
you'll point Dreamweaver to.
| | 01:15 | Inside the root folder you'll structure
your files and folders based on how they
| | 01:20 | need to appear online.
| | 01:21 | If you have a small site, for example,
all your HTML files might go right
| | 01:25 | into the root directory.
| | 01:27 | As your sites get larger or more
complex, it's not uncommon to create
| | 01:30 | subdirectories to create
more structure within your site.
| | 01:35 | You can easily see this
structure when browsing online.
| | 01:37 | For example, if we're on the Lynda.com
site and we go to the page where we can
| | 01:43 | sign up to join the mailing list
and receive the Lynda.com newsletter.
| | 01:46 | If you look at the URL, you can see
that this page is titled newsletter.aspx,
| | 01:52 | that's the name of the
file that we're looking at.
| | 01:54 | However, just to the left of that
we can see forward slash (/) news.
| | 01:59 | That's the name of the directory
that this page is inside of.
| | 02:02 | If you were to look at this structure
from a folder directory view, you'd have
| | 02:06 | the root folder, which the Lynda.com
site was inside of, and then you'd have
| | 02:11 | another folder called News, which this
newsletter.aspx file would sit inside of as well.
| | 02:18 | In addition to structuring pages this way,
most web designers will place site
| | 02:22 | assets into their own folders as well,
it's a good way to organize the site
| | 02:26 | and make additional assets easy to find.
| | 02:29 | Images, CSS, external scripts, videos,
and other assets are routinely placed
| | 02:34 | within their own folders.
| | 02:36 | For the Roux Academy site, which we
will be building throughout this course,
| | 02:40 | all of our asset folders will have an underscore
in front of their name, as you can see here;
| | 02:45 | _css, _fonts, _images, and _scripts.
| | 02:50 | This helps move those asset folders to
the top of any directory structure making
| | 02:54 | them a little bit easier to find, and
it makes it easier to identify those
| | 02:58 | as assets rather than mistaking them
for a subdirectory within the site.
| | 03:03 | The homepage of the site will sit
directly upon the root directory and
| | 03:08 | is usually named index or default,
depending upon your Web server's preferences.
| | 03:13 | After that how you structure and
organize your site is entirely up to you.
| | 03:18 | It is however very important to
structure your site logically and plan your site
| | 03:22 | structure in detail before you
begin creating the files for your site.
| | 03:27 | Understanding site structure
is key to managing it properly.
| | 03:30 | Most designers will map out or wireframe
their site before creating even the first file.
| | 03:36 | This will ensure that files are created
in the right place, limit the amount of
| | 03:39 | movement site files will undergo
during the creation process, and ensure
| | 03:43 | that the site is properly organized.
| | Collapse this transcript |
| Exploring file naming conventions| 00:00 | As you create files for the Web
understanding the rules governing
| | 00:04 | their naming is vitally important.
| | 00:05 | If your files aren't named correctly,
certain pages might become inaccessible
| | 00:09 | or just not work properly.
| | 00:11 | Remember that webpages contain
links to other webpages and assets.
| | 00:16 | If file naming isn't handled correctly,
your site's functionality can really suffer.
| | 00:20 | Fortunately, the rules for Web file
naming conventions are pretty easy to follow.
| | 00:25 | First, don't use any spaces in your file names.
| | 00:28 | If you have a file that's longer than
one word, use an underscore or a hyphen
| | 00:33 | to separate the words.
| | 00:34 | Most Web servers will allow file name
as spaces, but when the link is resolved,
| | 00:39 | the special character, %20 is
used in place of that space.
| | 00:43 | So if you've ever seen that in the URL,
now you know what that's referring to.
| | 00:47 | Now, this is really messy and can
lead to a lot of confusion when
| | 00:51 | sending links or displaying URLs.
| | 00:53 | Second, shorten the file names when you can.
| | 00:56 | Rather than using something like
about_us.htm, how about just about.htm?
| | 01:02 | Shorter names are easier to remember
and make URLs easier for clients to type.
| | 01:07 | Next, avoid using special characters,
no dollar signs, exclamation points,
| | 01:12 | forward or backslashes, question
marks, periods, really any other special
| | 01:17 | character or punctuation.
| | 01:18 | Now, many of those symbols are
actually used to denote things like directory
| | 01:22 | structure, URL parameters, or other
meanings that you could unwittingly
| | 01:26 | trigger if you use them.
| | 01:28 | Numbers are okay to use in file names,
just avoid using them as the first character.
| | 01:33 | Also, avoid uppercase letters if possible.
| | 01:36 | Most Web servers won't care, but some
UNIX servers are case-sensitive and links
| | 01:41 | could not be resolved correctly even if
they're spelled correctly by your users,
| | 01:45 | so you want to be very careful about that.
| | 01:48 | When using extensions, just be consistent.
| | 01:50 | Honestly, one of the biggest questions I
get from users is, should I use .htm or.html?
| | 01:55 | Well, for non-dynamic websites,
it's okay to use either one.
| | 01:59 | Now, to avoid having to worry about it,
you can set up a default document
| | 02:03 | extension in Dreamweaver's Preferences
and Dreamweaver will resolve that
| | 02:07 | extension for you when you save the file.
| | Collapse this transcript |
| Defining a new site| 00:00 | When you start working on a new project
in Dreamweaver the very first thing you
| | 00:04 | should do is define a site.
| | 00:06 | The site management capabilities of
Dreamweaver are tied directly into
| | 00:10 | that site's definition.
| | 00:12 | Without first defining a site Dreamweaver
won't be able to resolve links,
| | 00:16 | check related files or help you
manage any of your assets.
| | 00:19 | The best part about defining sites in Dreamweaver
is how amazingly simple the process is.
| | 00:23 | In fact, you only need to know two things
to get started; where the local root
| | 00:28 | directory is, and what
you want to name the site.
| | 00:31 | So there are several different locations
in Dreamweaver where you can define a site.
| | 00:35 | Let's take a look at a few of them.
| | 00:37 | You could go up to the menu and
you could choose Site>New Site.
| | 00:40 | You could go to the Application toolbar
and choose Site>New Site, you could come
| | 00:45 | over to the Files panel and you could
grab the pull-down menu right here under
| | 00:50 | Desktop and go to Manage Sites, which
in turn allows you to create a new site.
| | 00:56 | And probably my favorite is just in
the Welcome Screen, I can go in the
| | 01:00 | Welcome Screen where it says Create New, I
can go right down here to new Dreamweaver Site.
| | 01:05 | Doesn't really matter where you select
this from, whether it's the menu or the
| | 01:09 | Application toolbar it doesn't matter.
| | 01:11 | If you click on new Dreamweaver Site
this is a dialog box that you're going to
| | 01:16 | get, so really it doesn't
matter where you start from.
| | 01:18 | Now for the Site Name, the Site Name
can be anything that you want it to be.
| | 01:21 | So you're not restricted in the use of
characters here, it just needs to be a
| | 01:25 | unique name within your Dreamweaver sites.
| | 01:28 | Usually it's something that means
something to either you or your team,
| | 01:32 | so in this case I'm just going to type
in DW for Dreamweaver, CS6 and then do
| | 01:38 | Essential Training.
| | 01:39 | So, DWCS6 Essential Training, I am
using spaces here and capital letters,
| | 01:45 | again it doesn't really matter, this name
is relevant to you not so much Dreamweaver.
| | 01:49 | Now the next thing that Dreamweaver
wants to know is, where is the local
| | 01:54 | root directory. Where you're
going to be working off of?
| | 01:56 | Now for the most part you're probably
going to be working off your local computer.
| | 01:59 | So it's looking for a folder on your
hard drive and in some instances
| | 02:04 | you might be working off of a development
server that might not be local,
| | 02:08 | so there are ways to handle that as well.
| | 02:10 | But for the most part you're probably going
to be working off of your local hard drive.
| | 02:14 | So what I'm going to do is for the
Local Site Folder I'm going to click the
| | 02:17 | Folder icon right here which allows me to
browse out and find what I'm looking for.
| | 02:22 | Now in this case I've copied my
exercise files over to the Desktop,
| | 02:26 | so that's where I'm going to start.
| | 02:27 | I don't recommend that you keep your
sites on your Desktop just because in terms
| | 02:30 | of an organization it's really not the
best way to do it, but for Exercise Files
| | 02:34 | it just makes it easier for them to find.
| | 02:36 | So I'm going to go out to Desktop, I'm going
to find my Exercise Files and open that up.
| | 02:40 | Now for this exercise I'm going to go
into Chapter_02 and I'm going to find 02_03.
| | 02:45 | Now if you watch the movie on
Exercise Files, you've already gone to this
| | 02:49 | process at least once, but I'm betting
there is a lot of you out there that kind
| | 02:53 | of skipped that movie.
| | 02:54 | So, essentially what we're doing is
for each exercise I'm going out and
| | 02:59 | I'm redefining our site, so that it's
pointing to the current exercise, in this case
| | 03:03 | it's 02_03. I'm going to double-click
that folder to open it up.
| | 03:08 | Now if you're on a Mac there is a
little slide difference here, for example,
| | 03:11 | it'll probably say choose down here
rather than select on the PC it says Select.
| | 03:15 | It doesn't really matter, you just
want to make sure that you're pointing to
| | 03:17 | 02_03, I'm going to select
that and for the most we are done.
| | 03:23 | Now we do have some advanced options,
if I click on Advanced Settings you
| | 03:27 | can see there is Local Info, Cloaking,
all sorts of stuff over here which
| | 03:31 | we're going to talk about in a little
bit more detail later on when we talk
| | 03:34 | about managing sites.
| | 03:36 | We also have the option at this point
of going ahead and telling Dreamweaver
| | 03:40 | where the remote servers for the site
are, you could have testing servers,
| | 03:44 | you could have QA servers and you can have
the actual live remote server as well,
| | 03:48 | you can have as many or as
few of those as you need.
| | 03:51 | That information is not required right
out of the gate, so if you're designing
| | 03:54 | a site and you're not sure who's going
to host it or where the remote server
| | 03:58 | is going to be until little bit later on
in the project, that's okay, Dreamweaver
| | 04:01 | doesn't really care.
| | 04:02 | The only two things that really needs
from you right off the bat are the name
| | 04:05 | of the site in a local site folder.
| | 04:07 | So as soon as I click Save, what it's
going to do is it's going to cache up,
| | 04:10 | since it hasn't seen that directory
before, it's going to scan through that
| | 04:13 | directory, it's going to find all the
images, all the files any content that
| | 04:17 | might already be there.
| | 04:18 | Now this is a brand-new site from
scratch and you have nothing in the folder,
| | 04:21 | it's going to be very quick-and-easy process.
| | 04:23 | But, if it's a site that you've been
working on a little bit maybe it's assets
| | 04:27 | that you've generated, maybe you have
some text files in there that you need for
| | 04:30 | your HTML files, maybe you have images
that you've create, maybe some video
| | 04:33 | content, some Flash, things like that,
it's going to cache all that information up
| | 04:37 | and it's going to show off the directory
structure of your site right over
| | 04:40 | here in the Files panel.
| | 04:42 | So the Files panel now shows us all
the files that we have in our site,
| | 04:46 | all the directories and we have access now
to all of that content inside that
| | 04:51 | in one nice central location, and of
course, that was done because we went
| | 04:55 | ahead and defined the site.
| | 04:56 | Remember defining a site in Dreamweaver
is a easy, but a very necessary step
| | 05:01 | required at the beginning of every
single new project that you work on.
| | 05:05 | You can give Dreamweaver all of the site
information at the very beginning of the
| | 05:08 | project if you want or, like we're
doing here, you can wait and define things
| | 05:12 | like remote information at a later date.
This is especially helpful if you don't
| | 05:16 | have those settings when first starting out.
| | 05:18 | Just be sure to make defining a
site the very first step in any
| | 05:22 | new Dreamweaver project.
| | Collapse this transcript |
| Managing files and folders | 00:00 | If you're like me, when you work on a
site you're constantly creating new files
| | 00:04 | and folders, renaming files, moving
files around within your directory
| | 00:08 | structure, all sorts of mayhem. Let's face it.
| | 00:11 | No matter how well you plan your site,
chances are you're going to modify the
| | 00:15 | directory structure at one time or another.
| | 00:18 | Now to make those kinds of changes to
your site I strongly recommend using the
| | 00:22 | Files panel, that you will find right over here.
| | 00:25 | Instead of going out say to Windows
Explorer or the Finder Panel in the Mac,
| | 00:30 | the reason for that is the Files panel can
be used for a lot of different things.
| | 00:33 | For example, you can create new
files and folders with it, you can rename
| | 00:37 | existing files, move files and folders,
copy and paste files, everything that
| | 00:41 | you can do in Windows
Explorer or the Mac Finder.
| | 00:44 | But the reason is not just because
it's the most efficient way to make those
| | 00:49 | changes rather than having to go back
outside of the program, but there is a
| | 00:52 | bigger reason, it's the
safest way to make those changes.
| | 00:56 | Now websites by their very nature, rely
on understanding where other files are.
| | 01:02 | When you place an image on the page
or you link to another file, Dreamweaver
| | 01:06 | places code on your page that tells
the browser where it can find that
| | 01:10 | particular file or resource to either
resolve the link or display the image.
| | 01:15 | If you move a file and the link to
it doesn't update along with it,
| | 01:20 | those links are no longer going to work,
or in the case of an image the image
| | 01:23 | just doesn't display anymore.
| | 01:24 | Now that's especially problematic for
larger sites where dozens of pages might
| | 01:28 | link to a single page.
| | 01:29 | Making all those changes manually or
making the changes outside of Dreamweaver
| | 01:34 | would take a considerable amount of time.
| | 01:36 | But if you remember to use the Files
panel to make those changes, Dreamweaver
| | 01:40 | will automatically update all the links
on the page as well as any pages in your
| | 01:44 | site that linked to it, and it
saves you a tremendous amount of time.
| | 01:47 | So let's take a closer look at using
the Files panel to manage files and
| | 01:51 | folders in our site.
| | 01:52 | Now I don't have it pointing to the
right directory right now because
| | 01:55 | I wanted to show you, for those of you
that skipped the Exercise Files movie,
| | 01:59 | how basically the process of redefining
a site or pointing it to a new root
| | 02:03 | directory works, and we are going to do
this for every exercise within our title.
| | 02:07 | So I am just going to right
up here to the Files panel.
| | 02:09 | In this pull-down menu I am going
to double-click the name of our site.
| | 02:12 | That's a very quick and easy way to
bring the Site Setup dialog box back up.
| | 02:16 | It's sort of one of those hidden features.
| | 02:18 | You can certainly go to Site, Manage
Sites, click this site and then edit it,
| | 02:22 | but this is just so much faster.
| | 02:24 | Okay, so here's the site we defined
in our last movie and it still pointing
| | 02:27 | to the same folder.
| | 02:28 | If I don't change the name but click
the Browse icon, I can simply redirect
| | 02:33 | it to a new folder, and in this
case, I want to redirect it to, in the
| | 02:36 | Chapter_02 directory, 02_04.
| | 02:40 | So again, I am going to open that
folder up, hit Select, Save it and it will
| | 02:45 | re-cache it up and I'll see a new set of
files show up over here in the Files panel.
| | 02:49 | So make sure that you are
pointing to the 02_04 folder.
| | 02:53 | So the first thing I want to show off
about the Files panel in terms of the site
| | 02:56 | management capabilities is the
creation of new files and folders,
| | 03:00 | and it's something that you are
going to be doing a good bit.
| | 03:02 | There are a lot of different ways to do it.
| | 03:03 | You can come over and create new here,
you can do it from the menu where you go
| | 03:06 | to File>New, but you are also free
to do it right here in the Files panel.
| | 03:10 | If I go up to the root directory and
I right-click it, notice that one of the
| | 03:13 | options that I get is New File.
| | 03:15 | If I go up and do that it creates a
brand new untitled.html file in my
| | 03:19 | directory structure.
| | 03:20 | And whatever folder you right-clicked
that's the directory it's going to place that in.
| | 03:24 | So I am just going to go
ahead and give this a name.
| | 03:25 | And so if you clicked off of it, just
click back once and then one more time to
| | 03:29 | highlight the text here, I am
just going to title it test.html.
| | 03:33 | Now notice it got the .html extension and
that's because the preferences that I have set.
| | 03:38 | Once I change my preferences later on,
and I will show you how to do that in a
| | 03:41 | movie in just a little bit, you will be
able to get exactly the extension that
| | 03:44 | you are looking for.
| | 03:45 | Okay, so what's in this document?
| | 03:47 | Well, if I open it up,
nothing, absolutely nothing.
| | 03:50 | It's just a blank empty untitled document.
That's extremely helpful in terms of,
| | 03:55 | if you build out wireframes and you
don't have any files you need in each
| | 03:58 | directory, you can just go ahead and
start creating new files and naming them
| | 04:02 | what they are supposed to be named in
the directories and then open those files
| | 04:05 | up and start working on them.
| | 04:06 | Now you can also delete files.
| | 04:08 | So if I select this file and right-click it,
I can go up to Edit and choose Delete.
| | 04:13 | It's going to get rid of that file.
It's going to ask me, because when
| | 04:16 | you delete it, it really does delete
it right from your hard drive and
| | 04:20 | off it goes, don't need that anymore.
| | 04:22 | Okay, now another thing that we can do
is rename files, and one of the things
| | 04:26 | I want to do here just so you
can see this a little bit better,
| | 04:28 | I am going to extend the width of my
Files Panel out by grabbing that sort of
| | 04:31 | side handle and extending it out,
and then these columns here, I'm free
| | 04:35 | to rearrange the size of those as well.
| | 04:37 | So I want to take the name and extend
that so that you guys can see what it is
| | 04:41 | that I am working on here.
| | 04:43 | Okay, so student-spotlight, it's
accurate, that is what is in that page.
| | 04:47 | It's the current student-spotlight.
| | 04:49 | However, remember what I said earlier
about our file naming? That's really long.
| | 04:53 | So I want to rename that to just spotlight.
| | 04:56 | Well, it's very easy to do, all I have
to do is click once to highlight the file
| | 04:59 | and then click one more time. You don't
want to click too fast or you will end
| | 05:02 | up double-clicking it, and then
that's going to highlight the name of that.
| | 05:05 | And now I can just remove the
student- and just save it as spotlight.
| | 05:09 | As soon as I'm done I can hit Return.
That's going to change that.
| | 05:13 | Now here is where the power of
managing files and folders inside
| | 05:17 | Dreamweaver starts to show up.
| | 05:19 | As soon as I make a change to an existing
file, especially one that has links
| | 05:23 | to it or out from it,
Dreamweaver is going to ask me, hey!
| | 05:26 | Wait a second. The Index page was
linked to this, do you want me to go ahead
| | 05:29 | and update that link.
| | 05:31 | Remember, that you link to the page
before would have been student-spotlight,
| | 05:36 | but now it's just spotlight.
| | 05:38 | So I can say, yeah, yeah, sure go
ahead and Update that, and Dreamweaver just
| | 05:42 | saved me a tremendous amount of work.
| | 05:43 | I didn't have to open up the Index
page and change all the links on the page
| | 05:46 | that might linked to the student-spotlight,
I just did it in one fell swoop.
| | 05:50 | That's kind of simple because it's
only one page, but imagine that you have
| | 05:53 | a site with, oh, I don't
know, 50 pages that linked to it.
| | 05:56 | Imagine how much work you just saved yourself.
| | 05:58 | I need to do a little bit of reorganization.
For example, graphic-design and
| | 06:03 | programs need to be in a subdirectory
called Programs, and right now they are
| | 06:07 | within the root directory.
| | 06:08 | So I can use the Files panel
to do that for me as well.
| | 06:12 | I am going to come right up to the root
folder, I am going to right-click that
| | 06:15 | and tell it this time to create a New Folder.
| | 06:17 | So that's going to create a new directory
within my site and I can just go ahead
| | 06:21 | and call that one, programs.
| | 06:23 | So I have a subdirectory that I need
for that, now I need to move the files.
| | 06:27 | Once again, it's really, really simple,
I simply select the files that I need,
| | 06:29 | in this case, graphic-design, and now
I am going to hold down either the Ctrl
| | 06:33 | or the Command key so I can select
non-contiguous files, and I am going to
| | 06:37 | select programs as well.
| | 06:38 | So, both of those need to go in a subdirectory.
| | 06:40 | So I have got both of those highlighted,
I am just going to click-and-drag
| | 06:43 | down into the programs directory and
when I release, once again, I get this
| | 06:46 | nice little message from Dreamweaver saying,
wait a second. You are moving those files.
| | 06:51 | So any links to those files and any
links that are currently in those files
| | 06:54 | pointing to other files in my site
aren't going to be broken if you move this.
| | 06:58 | How about, do you want to update those links?
| | 07:01 | And by clicking Update, once again,
I saved myself a bunch of work.
| | 07:05 | Now if I had gone out to the Finder
Panel or the Windows Explorer panel
| | 07:09 | and move those files around certainly
I could have created the directory structure,
| | 07:12 | I could have move the files in there, but
the updating to links would not have occurred.
| | 07:17 | So the next time I come back in Dreamweaver,
I would open it up, I test my site out,
| | 07:21 | and none of links would work,
and now I would have like an afternoon's
| | 07:24 | worth of work ahead of me.
| | 07:25 | So that's the main reason that
I recommend using the Files panel
| | 07:30 | when you're managing your files
and folder inside Dreamweaver.
| | 07:33 | Of course, that's not all the Files
panel can do. Later on in this title we will
| | 07:37 | discuss using the Files panel to upload
files and manage site synchronization.
| | 07:41 | For now however, concentrate on making
sure that you practice discipline when
| | 07:45 | needing to make changes on your site.
Make these updates from within Dreamweaver
| | 07:50 | using the Files panel and you will
be confident in making those changes
| | 07:53 | correctly and without
breaking site functionality.
| | Collapse this transcript |
| Adding remote servers| 00:00 | At some point you're going to need to
upload your finished files to your Web
| | 00:03 | server in order to get your site online.
| | 00:06 | Although you could use a standalone
FTP client to do this, Dreamweaver has
| | 00:10 | built-in FTP capabilities that will handle
uploading and downloading your site for you.
| | 00:15 | In order to take advantage of them however,
you'll first need to setup a remote server.
| | 00:19 | So I'm going to work with the same
site definition that I had in the previous
| | 00:23 | movie which is the 02_04 folder.
| | 00:26 | We won't be transferring any
files in this particular movie.
| | 00:28 | So any site definition will do.
| | 00:31 | I'm just going to go over to the
Files Panel and find the site that
| | 00:35 | we're currently working on, DWCS6
Essential Training, and I'm just going
| | 00:39 | to double-click on that, so it will
open up a Site Setup dialog box.
| | 00:42 | You can also find this by going up to
Site>Manage Sites, selecting this site
| | 00:47 | and then clicking the Edit button.
| | 00:48 | After hearing me describe that, you know
why I double-click the menu, much faster.
| | 00:52 | So in order to setup a Remote server,
we need to go over here on the left-hand
| | 00:56 | side on categories and click on Servers.
| | 00:58 | Now currently I don't have any servers defined.
| | 01:00 | One of the nice changes they have made
over the years in Dreamweaver is that now
| | 01:04 | we can define as many servers as we want.
| | 01:06 | In some of the older versions of Dreamweaver,
you were only limited to one remote server.
| | 01:11 | Okay, so what I'm going to do is I'm
going to go right down here and click
| | 01:14 | the Plus (+) symbol to add a new server.
| | 01:16 | Now the first thing Dreamweaver wants me to
do is to go ahead and give the server a name.
| | 01:21 | Once again, this name is applicable
for you, it doesn't really matter
| | 01:24 | and it doesn't have to conform
to any one specific thing.
| | 01:27 | I really like naming the server what
it actually is and in this case
| | 01:31 | I'm going to name it remote.
| | 01:33 | So if it was a Testing Server or a QA Server
I would give it an appropriate name.
| | 01:37 | Now the next thing Dreamweaver wants to know
is what protocol you want to Connect using.
| | 01:42 | Notice that you can choose FTP, SFTP and
there are some other settings that deal
| | 01:46 | with certain types of encryption as well.
| | 01:48 | If you're confused about which protocol to use,
you're more than likely going to be using FTP.
| | 01:54 | But you can contact your hosting
provider or the person in IT that's
| | 01:57 | setting up your account to let you know.
| | 01:59 | Notice also that one of
our options is Local/Network.
| | 02:02 | So if you're using a Testing Server that's on
your local machine or somewhere on
| | 02:06 | your network you can set it up that way as well.
| | 02:08 | So I'm just going to say FTP and then
the next thing it wants to know from me
| | 02:11 | is, what is the FTP Address of my remote server.
| | 02:15 | Now in this case, and obviously yours
is going to be different based upon your
| | 02:18 | hosted account, I'm going
to type in ftp.ldcsites.com.
| | 02:25 | That's the FTP Address for the server
that's hosting the Roux Academy site.
| | 02:28 | Now yours will differ based
on who is hosting your site.
| | 02:31 | So if you're using host like BlueHost
or HostGator or some other company
| | 02:35 | like that, you're going to
get that address from them.
| | 02:38 | If you have somebody that's internal to
the company like an IT Department that's
| | 02:41 | setting that up for you, again they
should provide this information for you.
| | 02:44 | Okay, I'm going to go ahead
and enter in my Username.
| | 02:47 | Now you're probably going to
see this username blurred out.
| | 02:51 | Please don't be offended by that.
| | 02:53 | It's not that I don't trust you.
| | 02:55 | I don't trust the other
people watching the title.
| | 02:58 | So you I trust, the other people, not so much.
| | 03:01 | Next I need to enter in a Password and
the password we probably won't blur out
| | 03:06 | because well frankly it's in bullets,
so I don't need to worry about anybody
| | 03:11 | grabbing that from us.
| | 03:12 | You'll also notice that right beside
the Password is this little Save checkbox.
| | 03:16 | If you're the only person on that
particular workstation that's going to be
| | 03:19 | uploading and downloading files, I
recommend saving the Username and Password.
| | 03:24 | This way every time you want to upload and
download a file, it will just do it seamlessly.
| | 03:28 | It will connect to the server in the background.
| | 03:30 | It will go ahead and handle the transfer,
and it's not going to prompt you for anything.
| | 03:34 | Now if you turn that off, every time
you want to upload or download a file,
| | 03:37 | Dreamweaver is going to prompt you for some
credentials, so you can sign into the server.
| | 03:41 | Now that's helpful if you work in a
team environment, and you're not the only
| | 03:46 | one that is going to be using that
workstation and you don't want other
| | 03:49 | people to have access to uploading and
downloading files on the Remote server.
| | 03:53 | It's a little bit of a pain from a
maintenance standpoint, but it is a
| | 03:56 | little bit more secure.
| | 03:57 | Now the first thing that I do after
entering in my Username and Password
| | 04:01 | credentials, is go ahead
and click this Test button.
| | 04:04 | What that's going to do for me is this
is going to go out to the Web server,
| | 04:07 | it's going to supply them with the
Username and Password credentials that
| | 04:11 | I just typed in, and it's going
to see if it can connect.
| | 04:13 | I'm going to click OK, and that's really
nice because now you know that you're
| | 04:17 | going to be able to upload and download files.
| | 04:19 | You're not going to be hit with this
error later on, when you try to make
| | 04:21 | your first transfer.
| | 04:22 | Now there are a couple of other things
that I want to mention down here as well.
| | 04:25 | You're going to notice that
there is a Root Directory option.
| | 04:28 | For some sites you might
actually be working on sub-domain.
| | 04:31 | If that's the case, you're probably
going to find that your Root Directory
| | 04:35 | is actually a sub-directory of the Web server.
| | 04:38 | Now if you have no idea what I'm talking
about there, then you probably don't
| | 04:41 | need to worry about that.
| | 04:42 | But again that's information that
should be supplied to you by the hosting
| | 04:46 | company, or by the internal team
that's handling your hosting duties.
| | 04:50 | The best thing to do is just ask.
| | 04:51 | If you're ever having trouble connecting
to your site, or if you upload files
| | 04:55 | and you're not seeing them on the
website, chances are there's probably
| | 04:58 | some type of issue with the Root Directory.
| | 05:00 | So just send out a quick shout out.
| | 05:01 | Most hosting companies have really good
tech support, and they will respond to
| | 05:04 | you right away and make sure that
this information is supplied properly.
| | 05:08 | You also have a Web URL.
| | 05:09 | It's typically used for resolving links,
and making sure that everything is
| | 05:13 | going to the right location.
| | 05:15 | In this case, I'm not going to change
anything there, uploading and downloading
| | 05:17 | files, it's going to work just fine
with the information that I've supplied.
| | 05:21 | So I'm going to Save this and now there's
my remote folder, there's the FTP Address.
| | 05:26 | There's the protocol that it's
going to be using, and you'll see this
| | 05:29 | little checkbox here that is telling me that
Dreamweaver views this as the Remote server.
| | 05:34 | There's also an option for Testing server.
| | 05:36 | What's the difference?
| | 05:37 | Well, a lot of times when you're developing
applications or you have dynamic
| | 05:41 | development that's being populated,
or even just on larger sites where you
| | 05:45 | want to test the changes that you make to
the site, before you commit to a Live server.
| | 05:49 | A lot of times people have a staging
or a testing server, that they will
| | 05:53 | upload content to first.
| | 05:55 | Now in a lot of cases
this workflow is automated.
| | 05:58 | Pages will go up to a Testing server.
| | 05:59 | They will go through a Q&A process,
and then they will be pushed up
| | 06:02 | automatically after the click boxes
have been checked or something like that.
| | 06:05 | But if you're handling the process manually,
you might have a local testing server,
| | 06:08 | for example, that you want to test
your blog add on, maybe you've
| | 06:12 | installed the blog software locally and
you want to run a local blog before you
| | 06:16 | upload all your content to your remote blog.
| | 06:19 | Well you can add another server, make it
your Testing server and then based upon
| | 06:23 | how you push files up, you can make sure
you're pushing it to either the Testing
| | 06:26 | server or that when you preview a
page, you're previewing it based on the
| | 06:30 | Testing server or you can
upload it to the Remote.
| | 06:32 | So if you need that kind of a workflow,
Dreamweaver allows you to add multiple
| | 06:35 | servers and then specify
what type of server they are.
| | 06:38 | Okay, I'm going to go ahead and Save that.
| | 06:40 | When I do that Dreamweaver gives me a
message that hey, I'm going to re-cache
| | 06:42 | your site and it's doing that, because
we've introduced a Remote server to it.
| | 06:46 | So it wants to make sure that it's dealing
with the most recent set of files and folders.
| | 06:50 | So it wants to make sure its cache is correct.
| | 06:52 | Our Remote server is now setup, and
ready to help us upload and manage files
| | 06:56 | between our local and remote environments.
| | 06:58 | In our next movie, we'll explore how
to use Dreamweaver's FTP capabilities
| | 07:03 | to do just that.
| | Collapse this transcript |
| Uploading files| 00:00 | Whether you like to upload your files
incrementally throughout the development process,
| | 00:03 | or all at once after a project
is finished Dreamweaver gives you
| | 00:07 | a variety of options for connecting to
your server and uploading your files.
| | 00:12 | In this movie we will explore that
process in a little bit more detail and
| | 00:16 | take advantage of several methods for
uploading files to your remote server.
| | 00:20 | I have a feeling that some of you at
this point are saying, wait a minute we
| | 00:23 | haven't even built our first file yet,
why are we learning how to upload
| | 00:26 | files to a remote server?
| | 00:28 | Now it's a valid point.
| | 00:29 | But the fact of the matter is, site
management and file management is so
| | 00:34 | ingrained into Dreamweaver's workflow
process that it's very important that
| | 00:38 | you understand how this works
before you begin working on sites.
| | 00:42 | Since some people really like to upload
files as they work, other people like
| | 00:46 | to wait until the project is finished
before they upload files and folders,
| | 00:50 | and of course, as you're maintaining sites
and working on sites that are already live,
| | 00:54 | you're going to need to know this.
| | 00:55 | So this is one of those features that
I can teach at the beginning of the course
| | 00:59 | or towards the end course.
| | 01:00 | At this point I prefer to teach it at
the beginning of the course, because it
| | 01:03 | really gives you an overview of how
Dreamweaver sees and manages all the files
| | 01:08 | that you are working on and some of
the options you have available to you.
| | 01:10 | So this is a good thing
to learn right off the bat.
| | 01:13 | The other thing that I wanted to say
about this is it's not a requirement for
| | 01:16 | you to take this course for you to have
a hosted account on different servers.
| | 01:20 | So I don't want to worry
or alarm you about that.
| | 01:23 | You could view this movie more as a
demo because even if you do have a hosted
| | 01:27 | account more than likely you're not
going to have the directory structure on your
| | 01:31 | remote server that I am going to show you.
| | 01:33 | So really you should view this movie as a
demo that you just sort of watch through.
| | 01:37 | You probably won't be interacting
with any of your own files during
| | 01:40 | this particular exercise.
| | 01:42 | So I've redefined my site to the 02_06,
So if you are playing along with me at
| | 01:47 | home and you do have a hosted account
and you kind of want to do some of the
| | 01:50 | stuff along with me, I've
just redefined it to 02_06.
| | 01:52 | I am going to expand my Site panel
by clicking on this little expansion
| | 01:58 | icon right up here.
| | 01:59 | Now again on the PC that's going to
expand to take up the entire interface,
| | 02:03 | on a Mac you're just going to have a
slightly larger floating panel which you can
| | 02:06 | then expand to be as large as you need it to be.
| | 02:08 | When you upload or download files
it's not required that you connect to the
| | 02:11 | server originally if you have an
account set up, Dreamweaver will sort of
| | 02:15 | automatically do that for you if you
tell the file to upload or download.
| | 02:18 | However, if you really want to manage
your files and you want to see what's
| | 02:22 | going on in both environments the local
files which you'll notice is now on the
| | 02:26 | right-hand side and the remote files
which will appear on the left-hand side,
| | 02:29 | then this is a good view do it in.
| | 02:31 | And it's also a good idea to go ahead
and go up right up to this little icon
| | 02:35 | right here that says Connect to Remote Server.
| | 02:36 | When I select that it's going to connect
out to the remote server and I am
| | 02:40 | going to see a directory listing right here
of all the files currently on my Remote Server.
| | 02:45 | Now if you have a hosted account and
you did this along with me, my guess is
| | 02:49 | your directory structure over here on
the left-hand side looks a little bit
| | 02:52 | different than mine, and that's okay,
there's nothing wrong with that.
| | 02:55 | Probably what you guys are seeing is
something similar to mine and if you go out
| | 03:00 | eventually and get a hosted account
and you open it up, you're going to see
| | 03:02 | something similar to this as well.
| | 03:03 | So what are you looking at?
| | 03:04 | Well, we have all these numbered pages
over here and those deal with error codes.
| | 03:09 | So if somebody visits your site and a
page takes too long to load and it times out
| | 03:13 | or if they look for a page that
just isn't there, one of these errors is
| | 03:18 | going to be returned and the content
on these pages will be displayed letting
| | 03:21 | them know kind of what happened.
| | 03:23 | In a lot of cases you might want to
give them additional information,
| | 03:26 | but hosted companies are going to have
just their like default files in there for you,
| | 03:30 | just as a starting point or to make sure
that if an error code is given, a message shows up.
| | 03:36 | You're also going to have other things
like this favorite icon (favicon),
| | 03:39 | the _htaccess file that's going to handle
your site caching and some of other of
| | 03:43 | your site management capabilities.
| | 03:45 | And those are all things that you will
learn more about as you will learn more
| | 03:48 | about hosting a site.
| | 03:49 | And you'll also probably see things like
for example a folder that says either
| | 03:53 | www.public.html or even both of those,
and if you see those folders, that's
| | 03:58 | where your website is actually going to go.
| | 04:00 | Now, I don't have time in this particular
course to go into remote directory
| | 04:05 | structures and kind of how to manage that,
so I want to recommend something to you.
| | 04:08 | After you're done with this course,
go out and watch Ray Villalobos' course
| | 04:12 | Managing a Hosted Website, which you'll also
find in the Lynda.com Online Training Library.
| | 04:17 | He has got a really nice course setup
that describes to you exactly how to
| | 04:22 | manage your hosted environment and what
all of that structure that you're going
| | 04:26 | to be seeing and looking
at actually corresponds to.
| | 04:29 | Back to our task at hand, I want to
start managing files backwards and forwards
| | 04:34 | between my local files and my remote files.
| | 04:36 | Well when I am in this view it's a
simple matter of dragging-and-dropping.
| | 04:39 | Let's say that I wanted to see some of
these error messages and make sure that
| | 04:43 | they were consistent with my site design.
| | 04:45 | So if I grabbed the 404 error for
example, I can just come right over and
| | 04:49 | drag-and-drop that into my root directory,
or if I highlight it, I could also
| | 04:54 | come up and these two icons
are the get and put icons.
| | 04:57 | You can think of put as placing
or putting to the remote server.
| | 05:01 | You can think of getting as
grabbing from the remote server.
| | 05:03 | So in this case I am going to highlight
that and I am going to say get, and I am
| | 05:06 | going to get this message that says,
hey do also want to grab the dependent
| | 05:10 | files for this folder.
| | 05:11 | Now dependent files are any resources
that are linked inside this file and those
| | 05:15 | are actual resources like external
script files or external CSS files or
| | 05:20 | images that might be placed on the page,
elements that are needed or resources that
| | 05:24 | are needed for that particular file.
| | 05:25 | Now if you haven't changed those in any
way you can say no, or if you just don't
| | 05:29 | need them or in this case the particular
file doesn't have any, you can say no
| | 05:33 | and it'll just download that file only.
| | 05:35 | Had I said yes and let's say that had
images attached to it, it would have also
| | 05:39 | download the images as well.
| | 05:41 | Okay, so there is my 404 file.
| | 05:43 | If I double-click that icon I can
open this file up in Dreamweaver.
| | 05:46 | You can see it's also going to collapse
the Site panel back down to a smaller size.
| | 05:51 | Now I noticed this icon right here that
tells me that I am still connected to my
| | 05:54 | Remote Server, so I can still make
any changes that I want to this.
| | 05:58 | In this case, the 404 file,
the default one, boring.
| | 06:01 | 404 File Not Found, it's a common error,
it just means that the file that this
| | 06:06 | person was looking for doesn't exist
or has been renamed or moved somewhere else,
| | 06:09 | it's not here anymore.
| | 06:10 | I want to give my users a little
bit more information than that.
| | 06:14 | So I am going to close this and then
I am going to open up this error file
| | 06:18 | and if I turn Live view on, you can
kind of see there's more to this.
| | 06:22 | It says sorry we don't
have what you're looking for;
| | 06:25 | if you're looking for
something you can search to find it.
| | 06:27 | Here is some frequent places that you
might want to go to, and here is a little
| | 06:31 | more about our lovely academy.
| | 06:32 | So there is a lot more information there, right?
| | 06:35 | So what I am going to do is
I am just going to save this.
| | 06:37 | I am just going to do a Save As and I am
going to save it right on top of that 404 file.
| | 06:44 | So I am going to save this and it
says are you sure of that,
| | 06:46 | oh yeah I am absolutely sure.
| | 06:47 | And now that 404 file has all the logos,
my CSS, all sorts of really cool stuff,
| | 06:53 | so it's going to look a lot nicer
and it will be a lot more informative.
| | 06:57 | Everytime you want to upload or download
a file, you don't necessarily have to
| | 07:01 | expand this particular panel.
| | 07:03 | Notice for example that I can still go
right over here to the Site panel
| | 07:06 | and I can even collapse that
even a little bit further.
| | 07:08 | And I could choose Put from here or
I could go up to the Document toolbar and
| | 07:12 | right over here I can choose to put this file.
| | 07:15 | So if I do this, if I choose Put, it's
going to take it back out and it's going
| | 07:19 | to overwrite the 404 file
that was on the server.
| | 07:22 | Now in this case it's going to
say, what about dependent files.
| | 07:25 | Well this one has a lot of dependent files.
| | 07:27 | There are images here, there are
CSS going on, there are some script
| | 07:29 | files included with this.
| | 07:31 | So this time I am going to say, yes, and
that way Dreamweaver is going to handle
| | 07:34 | a lot of things for me.
| | 07:36 | What it's going to do is it's going to
upload not only the 404 file, but any Web
| | 07:41 | fonts that were included, you'll notice
it's uploading images up there in the
| | 07:44 | log file and if I expand this panel
back out again and I take a look at my
| | 07:48 | remote server, if I refresh this,
which is the Refresh button right here,
| | 07:52 | you can see that now there are
directories that didn't exist there before.
| | 07:55 | The reason that those are there is of
course I uploaded that file and told it to
| | 07:59 | send all the dependent files as well.
| | 08:01 | What's really helpful about that is if
you are not sure which images are located
| | 08:04 | on that page, but you know you needed
to upload those, you can say Yes and it
| | 08:08 | will go ahead and upload them.
| | 08:09 | On the other hand, if you know the
images that are on that page or the CSS and
| | 08:13 | you know that those items
haven't changed, you can say No.
| | 08:16 | And just that file will upload or
download and you won't need to worry about
| | 08:20 | overwriting files that frankly don't
need to be overwritten and waiting a long
| | 08:24 | time for it to upload all of those
resources that it doesn't need to upload.
| | 08:28 | You may have also noticed in that dialog box
that you have the option of disabling that.
| | 08:32 | So you can choose to always overwrite,
send those files, never send those files,
| | 08:36 | and you can choose to never see that
dialog box again if you don't want to.
| | 08:40 | You can see that uploading and
downloading files is pretty easy to do, you can
| | 08:43 | do it from a couple different locations.
But what if you have to do a lot of
| | 08:47 | uploading and you're not really sure
what's going on within your site,
| | 08:51 | what's new, what's not new, that sort of thing.
| | 08:53 | Well Dreamweaver has a nice little
feature called Synchronize, and if I go right
| | 08:56 | up here in the Files panel I can click
on this Synchronize with Remote Server.
| | 09:01 | When I do that, I can tell it to put
just Selected Files or I can tell it that
| | 09:06 | I want to synchronize the entire site.
| | 09:08 | Now if I do that I have to be very,
very careful and the direction that I place
| | 09:12 | matters in this case.
| | 09:14 | Notice that I can tell it to just put
all the newer files on the local server to
| | 09:18 | the remote, I can tell it to go out to
the remote, grab any of that files that
| | 09:22 | might be newer out there, maybe I have
some team members update some files that
| | 09:25 | I'm not privy to and I can grab those,
or I can Get and Put newer files.
| | 09:29 | Now I have to be very careful about Get and Put.
| | 09:31 | Let's say that I have finished
working on a file and I upload it and then
| | 09:34 | a coworker of mine is working on the
exact same file, but doesn't tell me,
| | 09:38 | finishes it an hour later and uploads it.
| | 09:40 | Guess what happens? It is overwritten.
| | 09:43 | So in cases of working with a team,
you want to be very careful about getting
| | 09:46 | and putting files and you probably
want to work with some type of version
| | 09:49 | control so you know who is working on what.
| | 09:51 | Now in this case I am just going to
tell it to put newer files to remote.
| | 09:55 | I never ever want to check this box.
| | 09:57 | I wish they would just get rid of it,
because this box is the ruin your day box
| | 10:01 | is what I call this checkbox.
| | 10:02 | Delete remote files not
on the local drive. Wow!
| | 10:06 | So that means that all of these cgi
files, the htaccess, favicon, all that,
| | 10:11 | one fell swoop, gone!
| | 10:14 | So be very, very careful about that checkbox.
| | 10:16 | In fact never check it.
| | 10:17 | Now the good news is we have this
little preview which is going to scan through
| | 10:22 | all the files on my site and then it's
going to tell me what's going to happen.
| | 10:24 | So I don't have to commit to this
until I'm happy with it, and I can even
| | 10:28 | turn things on and off.
| | 10:29 | So for example, this 400.shtml,
I could turn that off.
| | 10:34 | I don't actually need to upload that,
I've already got that out there.
| | 10:37 | So I can ignore that one.
I could ignore this one.
| | 10:41 | I can select whole groupings of them
and tell them to ignore, so any of these
| | 10:45 | within the access directory
actually don't need to go up.
| | 10:48 | Now you can also cloak directories
and files by cloaking, I will show you
| | 10:52 | that in just a second.
| | 10:53 | You can go ahead and just select that
dialog box and say, hey, these types of
| | 10:55 | files, don't ever upload those.
| | 10:57 | So Photoshop files for example, the
PST files that you're building your site
| | 11:01 | from, you might just say, hey, you know
what, don't upload those, they're big,
| | 11:04 | they don't need to be on
my remote server anyway.
| | 11:05 | I am going to click OK and
Dreamweaver is about to do its thing.
| | 11:09 | It's going to take all the files that
are on my local site and it's going to
| | 11:12 | push them up to our remote site.
| | 11:15 | Now it's going to take a while to do that.
| | 11:17 | So while it's doing that
I want to show you something.
| | 11:20 | Once that's done I am going to go
up to Site and choose Manage Sites.
| | 11:24 | I am just going to edit this site, because
I want to show you something really quickly.
| | 11:29 | So if I go into my Advanced Settings,
notice I have a section for Cloaking.
| | 11:35 | If I Enable Cloaking I can turn
on which files I want cloaked.
| | 11:38 | So I could cloak .PSD files, I could
cloak Word documents, things like that
| | 11:43 | that might be in your root folder that
you don't want uploaded to the remote
| | 11:46 | server just because of size or
they're not appropriate to go online you can
| | 11:51 | cloak those files as well.
| | 11:53 | Okay, I am going to finish with that
and now you can see that on my remote
| | 11:59 | server I have all my files including
my index file over there as well as.
| | 12:04 | And so now if I go to the browser
and browse out to my site, which is
| | 12:08 | learn.rouxacademy.com, interacting with
your remote server is such a common part
| | 12:15 | of your design and development process
that Dreamweaver has put those tools at
| | 12:18 | your fingertips, almost every step of the way.
| | 12:21 | It's here in the site panel when
you're working on a site, it's here on the
| | 12:24 | Document toolbar, it's up in the Menu,
there are so many different areas for you
| | 12:29 | to do get and put.
| | 12:30 | It's in so many places woven into
Dreamweaver that whenever you're working on a
| | 12:34 | file, you always have the option of
getting it from the server or putting it to
| | 12:37 | the server and what that does for you
is it reduces the amount of time that it
| | 12:41 | takes to go from creating or updating
files to having that content live online.
| | Collapse this transcript |
| Previewing in browsers | 00:00 | As a Web designer one of the toughest
things to learn is that your design is
| | 00:04 | always at the mercy of the user's browsers.
| | 00:07 | Your site's visitors have a lot of
browsers to choose from, like
| | 00:11 | Internet Explorer, Firefox, Safari, Opera,
Google's Chrome, and now a wealth of mobile
| | 00:16 | devices and tablets.
| | 00:18 | Knowing that so many different
browsers will render your pages,
| | 00:22 | it's always a smart idea to test them
in as many browsers as you can.
| | 00:26 | This can prevent rendering errors
from one browser to the next and help
| | 00:30 | you ensure a consistent experience
for all visitors to your site.
| | 00:33 | Dreamweaver allows you to set up
multiple browsers for testing and also
| | 00:37 | gives you an internal testing
environment using its Live View.
| | 00:40 | So I have the index.htm page open
here, and this is from 02_07 folder.
| | 00:47 | And the first thing I want to show you
is just sort of this internal view.
| | 00:50 | Right now I am looking at the page in
Dreamweaver's Design View and you can see
| | 00:54 | the layout looks, well, terrible.
| | 00:56 | Well, that's actually just because the
Design View uses a really old rendering
| | 01:01 | engine that really doesn't
support a lot of modern CSS.
| | 01:04 | So if I click the Live View, that's
going to render it using Dreamweaver's
| | 01:08 | WebKit rendering engine.
| | 01:09 | Now, I am going to collapse the
Properties Inspector here, so you can see
| | 01:12 | this page a little bit better.
| | 01:13 | If you are wondering maybe kind of
what browser the Live View most closely
| | 01:17 | resembles, well, it's WebKit, so it's
going to be closer to Chrome or Safari,
| | 01:23 | and in fact, it uses the WebKit
build that's very close to Safari 4.0.
| | 01:27 | I'm not sure if the rendering engine
inside Dreamweaver has been updated for CS6,
| | 01:31 | but it wouldn't surprise me if it
now more closely resembles Safari 5.0.
| | 01:36 | But I know that it's at least 4.0 in Safari
and maybe a little bit higher than that.
| | 01:40 | This isn't the only place
obviously to preview our pages.
| | 01:44 | And if it was, it would be a bit of a
problem, although this is kind of a nice
| | 01:47 | environment, because it does show you
the fully rendered page and it also shows
| | 01:50 | you things like transitions, hover events.
| | 01:53 | You'll see as I hover over the menu
here I get to see kind of a hover I have
| | 01:57 | placed on these items, so
it's aptly named, Live Preview.
| | 02:01 | But there's just no substitute for
viewing the page in the browser itself,
| | 02:05 | which is the ultimate rendering
environment if you look at it that way.
| | 02:08 | So the first thing I am going
to do is go up to my Preferences.
| | 02:11 | Now, on the PC I am going to go
up to Edit and choose Preferences.
| | 02:14 | On the Mac you are going to go to
the Dreamweaver option on the menu
| | 02:17 | andchoose Preferences.
| | 02:18 | And then from our Category over here
on the left-hand side, I want to select
| | 02:21 | Preview in Browser, which
is down towards the end.
| | 02:24 | Now, you are probably going to see a
slightly different list than I see here.
| | 02:27 | If you're on a Mac, for example, you
probably see Safari, or maybe you just see
| | 02:31 | one browser, or maybe you see multiples.
| | 02:33 | Dreamweaver does a nice job of sort of
scanning things and loading browsers by default,
| | 02:37 | but it's always going to miss
a couple or there might be times where
| | 02:40 | you download a new version or a new
browser and you want to add that to the
| | 02:43 | Preview process as well.
| | 02:44 | Very simple to do, all I have to do is
click the Plus (+) symbol right here and
| | 02:48 | I can browse out and find
which browser I am looking for.
| | 02:50 | Now, in this case I am going to add Opera,
so I am going to Browse for the application.
| | 02:54 | It's going to take me directly into my
Program Files, I am going to scroll down.
| | 02:58 | On the Mac it will take you into your
Applications, I am going to open up Opera,
| | 03:02 | find the opera browser
Executable File itself and Open that.
| | 03:07 | So it's going to point to that page.
| | 03:08 | Now, I have the option here of making
this my Primary and/or Secondary browser.
| | 03:13 | It's probably neither of those, so I am
going to go ahead and click OK, and you
| | 03:16 | can see that I have Chrome as my
Secondary browser and Firefox as my Primary.
| | 03:22 | Now, how do I know that?
| | 03:23 | Well, it's the keyboard
shortcut that's beside them.
| | 03:25 | Notice, Firefox has a
checkbox for Primary browser.
| | 03:28 | Meaning if I select the F12 key, it's
going to automatically preview the page
| | 03:32 | that I have within Firefox.
| | 03:35 | Chrome is Ctrl+F12, meaning if I hit Ctrl+F12,
I am going to preview that in Chrome.
| | 03:40 | That's really all that Primary and Secondary
browser really refers to, that's it.
| | 03:45 | Now, with my list being complete
I am going to go ahead and click OK.
| | 03:47 | And now, anytime I want to
preview my page, I can do just that.
| | 03:51 | I can hit F12 if I want, that's going
to preview my page inside Firefox, and
| | 03:56 | I can see, again, all of these
elements are working within there.
| | 04:00 | I can really test my layout
within the browser itself.
| | 04:02 | Now, if I go back into Dreamweaver and
I hit Ctrl+F12 or Cmd+F12 on the Mac,
| | 04:08 | it's going to preview that in Chrome.
| | 04:09 | Now, if you have different browsers
set up to be your default browser or your
| | 04:13 | Secondary browser, you are obviously
going to launch this in something other
| | 04:16 | than Firefox or Chrome.
| | 04:18 | Now, I am not limited to
those keyboard shortcuts.
| | 04:21 | If I go back into Dreamweaver and I
look on the Document Toolbar, I can see
| | 04:24 | there is this little Planet icon
here, and you'll notice that it says
| | 04:27 | Preview/Debug in browser.
| | 04:30 | So if I grab that pull-down menu,
there are all the browsers that I recently
| | 04:34 | loaded in, in addition to Adobe's BrowserLab.
| | 04:37 | Now, I am going to talk about BrowserLab
in just a moment, but I am going to use
| | 04:40 | this as an opportunity to preview in one
of my browsers that's not my Primary or
| | 04:44 | Secondary browser, perhaps
Internet Explorer.
| | 04:45 | So I am going to launch that, it will
launch the page in Internet Explorer
| | 04:50 | and I can see it rendered in IE as well.
| | 04:52 | So I can see some slight differences.
| | 04:54 | For example, Internet Explorer doesn't
support the transitions, the animatable
| | 04:57 | transitions that the other browsers do.
| | 04:59 | So I can see that there is a slight
behavior difference, but other than that
| | 05:02 | the layout looks fairly similar.
| | 05:03 | One thing I've noticed throughout
this entire previewing is that this
| | 05:07 | paragraph is sort of up a little bit,
I can see that it's actually sort of
| | 05:11 | layering over top of the menu.
| | 05:13 | So that tells me it's consistent across
all browsers, so that tells me that it's
| | 05:17 | not necessarily a specific issue to one
browser, rather it's a problem with my
| | 05:22 | CSS that I need to fix.
| | 05:24 | And that's the whole point
of previewing in browsers.
| | 05:26 | You get to find these little errors and
you can see whether they are present
| | 05:29 | in one browser versus another.
| | 05:31 | If they are present across all browsers,
you know it's a general problem with your CSS.
| | 05:35 | If it's only a problem in a single browser,
it's probably either a bug with that
| | 05:39 | browser or some type of rendering that,
that browser does based on standards
| | 05:44 | that the other ones don't and you
can track it down that way as well.
| | 05:46 | So it's a nice way to track down issues
and make sure that you get a consistent
| | 05:50 | experience across your browsers.
| | 05:52 | Now, I am going to close Internet
Explorer and I want to go back into Dreamweaver.
| | 05:55 | I want to talk about a third option of
previewing pages in Dreamweaver, and that
| | 05:58 | option is BrowserLab.
| | 05:59 | You saw BrowserLab available earlier in
the Preview in Browser menu right here;
| | 06:04 | it's at the very bottom.
| | 06:05 | But BrowserLab also has its own panel,
so I am going to open that up.
| | 06:08 | Now, I'm already previewing a page
in BrowserLab, so I can see that
| | 06:11 | I'm connected to the external BrowserLab server.
| | 06:13 | If you're opening up this panel for
the first time, you are probably going to
| | 06:16 | see a disconnected icon there and it's going to
you ask you whether you want to preview or not.
| | 06:20 | So you just click the Preview button
and it will launch you out to
| | 06:23 | Adobe BrowserLab, which is an
external online service from Adobe.
| | 06:27 | Now, what does BrowserLab do?
| | 06:28 | Well, let me hit the Preview button and
take you over to BrowserLab and show you.
| | 06:31 | Okay.
| | 06:32 | So here I am in BrowserLab.
| | 06:33 | Now, I skipped a couple of steps here for you.
| | 06:35 | The first time you show up in BrowserLab,
it's going to ask you for an Adobe ID.
| | 06:39 | If you already have one, you can enter
that in and you can start using the service.
| | 06:43 | If you don't have an Adobe ID, it's
going to give you the option of creating one
| | 06:46 | and you can go ahead and create
one and sign up for the service.
| | 06:48 | Now, for the moment BrowserLab is free.
Eventually it's going to become,
| | 06:53 | I think, a pay service.
| | 06:54 | But then again, they've been saying that
for a while now, it's still more or less free.
| | 06:58 | So if it's not free by the time you
watch this, don't blame me, it's not my
| | 07:01 | fault, Adobe had plans for that all along.
| | 07:03 | Now, the thing I love about BrowserLab;
What does this do for me?
| | 07:05 | Well, you can see that I am previewing
pages on a PC, so I don't have access
| | 07:09 | to certain browsers.
| | 07:10 | For example, I don't have access to any
of the browsers on the Mac like Safari,
| | 07:14 | so I want to test it on Safari
and make sure that it's working.
| | 07:16 | So when I launch BrowserLab, one of the
things that I can do is I can go in my
| | 07:20 | Browser Sets and I can turn
certain browsers on and off.
| | 07:23 | You'll notice, for example, that for
this particular test I just told BrowserLab
| | 07:27 | to Preview in Firefox 7.0 on the Mac,
Internet Explorer 6.0 for Windows,
| | 07:31 | because hey, who doesn't want to see that,
and Safari 5.1 for OS X. So it gives me a
| | 07:36 | nice preview of those particular browsers,
and I can add different Browser Sets
| | 07:40 | and sort of group them together and
I can have different testing platforms set
| | 07:43 | up, so that when I come into BrowserLab,
I can just hit that particular platform
| | 07:46 | and it will test it.
| | 07:47 | So what it's going to do is it will
upload your page, which will take a little
| | 07:50 | bit of time, it will go ahead and
render it out and it will give you a
| | 07:53 | screenshot of the page in that browser.
| | 07:55 | I am going to go back to my
test and you can see that.
| | 07:58 | So right now I am looking at it in Safari 5.1.
| | 08:00 | I get a nice little screenshot.
| | 08:02 | I don't get to test the functionality,
because it's a static screenshot,
| | 08:06 | but I do get to check the layout,
I can see if the colors are working.
| | 08:09 | I can see if I have layout issues,
and yes, once again, that paragraph
| | 08:12 | is overlaying that.
| | 08:13 | So that's definitely a problem I need to fix.
| | 08:15 | And then if I grab the pull-down menu,
I can come down to Firefox, check that
| | 08:18 | out on OS X, and I can
see that that's a problem.
| | 08:22 | And then finally, I can test this in
Internet Explorer 6.0, oh well, so some
| | 08:30 | issues in Internet Explorer 6.0.
| | 08:33 | Show of hands, how many
people were expecting that?
| | 08:35 | Now, you know it is what it is.
| | 08:36 | But at least you could still read
the content and sometimes with Internet
| | 08:38 | Explorer 6.0 that makes me happy enough.
| | 08:41 | So that's Adobe BrowserLab, it's a neat service.
| | 08:43 | I think you should at least check it out.
| | 08:45 | It allows you to test on different
platforms than the one you have and it allows
| | 08:48 | you to test against multiple browsers.
| | 08:50 | So it's a pretty nice little option.
| | 08:51 | Whether you use a service like BrowserLab
or not, you should make sure that you spend
| | 08:56 | plenty of time reviewing your pages
as you are working on them, in as many
| | 09:00 | browsers as you can.
| | 09:02 | It's going to help you prevent small
errors from becoming bigger problems
| | 09:05 | later on, and it's going to assist you
in ensuring a consistent experience for
| | 09:09 | all of your users.
| | Collapse this transcript |
| Managing multiple sites| 00:00 | Things change and it's not uncommon to
need to add or modify the information
| | 00:05 | of a site as you work on it.
| | 00:06 | It's also not uncommon to have your
files panel crowded with the older sites
| | 00:10 | that are archived or no longer current projects.
| | 00:13 | To deal with these types of situations,
you'll need to understand a little bit
| | 00:16 | about site management in Dreamweaver.
| | 00:18 | Managing your sites in Dreamweaver is
extremely easy and all the information
| | 00:21 | is right there at your fingertips.
| | 00:23 | We're going to examine a few ways to
access a Site Management dialog box,
| | 00:26 | take a look at its capabilities, and then talk
about what you need to do when editing sites.
| | 00:31 | So over here in my Files panel, if I
grab the pull-down menu, I can see that
| | 00:34 | I only have one site defined, otherwise
I'm allowed to go out to my desktop and
| | 00:39 | browse for certain things in files and
folders or I can manage sites but for the
| | 00:43 | most part, when I'm working on this site,
I want to stay within this directory.
| | 00:46 | Now if you've defined a lot of sites,
you are obviously able, in that pull-down
| | 00:51 | menu, to choose whichever site
you want to currently work on.
| | 00:53 | So if you have a number of running projects,
you can go and work on the one that you want.
| | 00:57 | However, sometimes they can get
a little cluttered and sometimes
| | 01:00 | you want to remove site definitions for
projects that are no longer current projects
| | 01:04 | or projects that you've archived.
| | 01:06 | So at any point, you can go right
down here to the pull-down menu and you
| | 01:08 | can choose Manage Sites or you can
go up to dialog box up here and choose
| | 01:13 | Site>Manage Sites.
| | 01:14 | There're actually a few places for you
to look at it but those are the two that
| | 01:17 | you're probably getting used most frequently.
| | 01:19 | So this is going to show you a dialog box
where you have a list of all the sites
| | 01:23 | that you have defined.
| | 01:24 | Again, I only have one site
here defined for this project.
| | 01:27 | So it's not like I have a whole lot to manage.
| | 01:29 | However, if wanted to change one of
those sites, it's very easy to do.
| | 01:33 | I can select the site and then from
this little list of icons down here,
| | 01:37 | I can either delete the current site,
so if you've archived a site it's no longer
| | 01:41 | in your hard drive and it's just
sort of taking a face in Dreamweaver.
| | 01:44 | It's a matter of fact.
| | 01:45 | Well, a lot of times Dreamweaver will
actually tell you, hey, the local root
| | 01:49 | folder for site so-and-so doesn't exist
anymore. What you want me to do about that?
| | 01:53 | So basically, it's prompting you to go
back and redefine it and point to where
| | 01:56 | that site actually is now.
| | 01:57 | In that case, it's a lot easier and a
lot less annoying for you to just go ahead
| | 02:02 | and delete the site.
| | 02:03 | If you ever delete a site that you didn't mean to,
you have to redefine it all over again.
| | 02:07 | So be very careful about that process.
| | 02:09 | Now we also have the ability to edit a current
site which we're going to see in just a moment.
| | 02:12 | We can duplicate a site.
| | 02:14 | So if you have multiple sites that share
files and folders, you can duplicate
| | 02:17 | them, rename the site, or even
point it to a different directory.
| | 02:20 | The best reason to do this because a
lot of people will ask me, why would you
| | 02:23 | ever want to duplicate a site?
| | 02:24 | Well, let's say that you have three
sites that you're going to use the same
| | 02:29 | remote and server information,
testing server information, maybe any of
| | 02:33 | the other options that you have setup.
| | 02:35 | This can be a little bit of a
pain to go through and set up.
| | 02:38 | So you can duplicate the site and then
go into it and point it to a new local
| | 02:42 | folder and change some of the
information that changes and basically, you're
| | 02:46 | doing a little less work,
other than that, I don't know.
| | 02:50 | Well, the next thing that you can do is
you can export the currently selected site.
| | 02:52 | So if you're going to be working on
multiple machines maybe you've got a site
| | 02:56 | definition at home and then at work you
have another site that you need to work on,
| | 03:00 | you can export that out, save
the file and go home, load up the site
| | 03:05 | definition and everything's just
going to go ahead and populate.
| | 03:07 | You can then go out to the remote server,
grab everything and start working so or
| | 03:11 | you can send it to a colleague, so
that again they have the remote server
| | 03:14 | information, they can download the site,
and they can begin working on it locally.
| | 03:17 | Now just below that, we have
a couple of options as well.
| | 03:20 | We can import a site so again if
you've exported that, here's the option
| | 03:23 | that you'd use to import it.
| | 03:24 | We can import a Business Catalyst site.
| | 03:27 | Now Business Catalyst is another service
from Adobe. Business Catalyst
| | 03:30 | is sort of a turnkey, site building,
hosting platform where you can host your site
| | 03:35 | or your clients' sites. There is a
lot of functionality sort of baked in to
| | 03:38 | Business Catalyst that makes it easier
to rapidly develop sites. And maybe,
| | 03:42 | if you're not a Web developer or
programmer, for example, maybe add some
| | 03:45 | functionality to your site that you
wouldn't be able to do on your own.
| | 03:48 | So Business Catalyst is something cool
you might want to take a look at.
| | 03:51 | But if you have a Business Catalyst site
defined elsewhere, you can export that
| | 03:55 | definition and then import it here.
| | 03:56 | We have options to create a brand-new
site and we've already gone through that
| | 03:59 | process and we have the option to
create a new Business Catalyst site as well.
| | 04:02 | So again, if you're interested in
Business Catalyst, you can create a new
| | 04:05 | Business Catalyst site right from there.
| | 04:08 | Any time I want to edit a site,
I can just grab that and click the Pencil
| | 04:11 | icon and it's going to bring up the dialog
box that we're already pretty familiar with.
| | 04:15 | So this is the same process, it's
going over to the Files panel and
| | 04:18 | double-clicking on the name of the site;
| | 04:19 | exact same process.
| | 04:21 | So there's no benefit gain from doing
it here, as a matter of fact, doing it
| | 04:24 | from the Manage Site
dialog box is a little slower.
| | 04:27 | All right, so I'm not going to make
any changes, I'm just going to hit Cancel
| | 04:30 | and then I'm going to select Done.
| | 04:31 | Now the chances are you won't need to
do a whole lot of work managing your
| | 04:34 | sites, but knowing that Dreamweaver
makes any changes that you need to
| | 04:37 | make through your site definitions
quick and easy allows you not to worry so
| | 04:40 | much about updating your site, but
more concentrate instead on creating the
| | 04:45 | actual content for it.
| | Collapse this transcript |
|
|
3. Creating New DocumentsCreating new documents | 00:00 | After defining your site the next
logical step in creating websites is to begin
| | 00:04 | creating new webpages.
| | 00:06 | Since it's such a common task
Dreamweaver has many different options
| | 00:10 | for creating new pages.
| | 00:11 | Some are designed to be fast and
result in a new page based on your default
| | 00:15 | document preferences, while others
require more manual input,
| | 00:19 | but give you a wider array of options
regarding your new document.
| | 00:22 | In this movie we will store Dreamweaver's
new document creation capabilities so
| | 00:26 | that you can make sure the pages you're
creating are conforming to the standard
| | 00:30 | required for your site.
| | 00:32 | So the first option I want to show you
guys for creating a new page is one that
| | 00:35 | you've probably already used if you've
been watching the title up till now.
| | 00:39 | You can go straight to the Welcome
Screen and just choose Create New HTML.
| | 00:44 | Now if I click that notice that
I get a brand-new page open up.
| | 00:48 | But Dreamweaver didn't offer me any choices.
It basically created a brand-new page
| | 00:53 | based on a set of preferences that,
at this point, I didn't have any input in.
| | 00:57 | Now of course, you can set those
preferences yourself and I am going to
| | 01:01 | show you how to do that a little
bit later on in the chapter.
| | 01:03 | But what if you want a little bit more
input in to the options surrounding the
| | 01:08 | document that you're creating?
| | 01:09 | Well, to do that you are going to use a
slightly different method of creating a new page.
| | 01:12 | So I am just going to go ahead and close the
page that I just created without saving it.
| | 01:15 | Now I am going to go up to the menu and
go to File and choose New and you will notice
| | 01:20 | that the shortcut key for that is Ctrl+N,
which on the Mac will be Cmd+N.
| | 01:23 | And I want to point out that, later on
when we look at our preferences,
| | 01:28 | I am going to show you an option
regarding that keyboard shortcut too.
| | 01:31 | So, remember this for later on in the chapter.
| | 01:34 | Okay, so I am going to go ahead and
select that and that brings up the new
| | 01:37 | document dialog box, at first glance
this dialog box is almost overwhelming;
| | 01:42 | there are so many choices here.
| | 01:43 | So I just want to break them
down for you a section at a time.
| | 01:47 | If we start on the left side of this
dialog box, notice that we have different
| | 01:51 | types of pages that we can create;
Blank Pages, new brand-new Template, Fluid
| | 01:57 | Grid Layout, which is new in CS6,
| | 01:59 | Page from an existing Template if
your site contains templates, they have a
| | 02:03 | couple of Sample Pages to get you started from.
| | 02:05 | And then there are these really odd
little other feature down here that allows
| | 02:08 | you create some document types that
probably aren't as common as the other ones
| | 02:12 | you'll find in the Blank Page section.
| | 02:14 | Well that's where I am going to focus,
I am going to focus right here on Blank Page.
| | 02:16 | That's what we are
interested in for this movie.
| | 02:19 | Now the Page Type, again we have all these
different page type so we can choose from.
| | 02:23 | If you are doing static development,
some of the choices up top here, HTML,
| | 02:27 | you will be using a good bit.
| | 02:29 | CSS, you'll probably be creating a
number of CSS files, JavaScript,
| | 02:33 | if you're creating some external script files.
| | 02:35 | But if you are creating dynamic pages,
notice that we have the option of
| | 02:38 | creating ASP.NET pages, ColdFusion
pages, JSP pages and PHP pages as well,
| | 02:44 | directly here in Dreamweaver.
| | 02:45 | I am going to stick with just a static
HTML page type and then that takes me
| | 02:50 | over to the third column,
which in this case, is layout.
| | 02:53 | Anything past this None option
right down through here, those are
| | 02:57 | Dreamweaver's starter pages.
| | 02:59 | And I am going to talk about those in more
detail a little bit later on in the chapter.
| | 03:03 | But for right now, those just give
you sort of a head start, if you will.
| | 03:07 | So if you need a head start on the
Layout or your CSS skills aren't particularly
| | 03:12 | strong and you want to make sure that
you are using really solid starting point
| | 03:16 | for your styles in terms of your layout.
| | 03:18 | These are some really good choices,
but for right now I'm just going to
| | 03:21 | choose Layout>None.
| | 03:23 | So, you might be saying, well, up
till now you really haven't made any
| | 03:26 | choices at all, so what's different than just
going to the Welcome screen and hitting New.
| | 03:30 | Well, over there on the right-hand side
we have another set of options and these
| | 03:35 | options essentially affect the document itself.
| | 03:38 | So the first option that I want to go
down and take a look at is the DocType.
| | 03:43 | Now the DocType is a tag that goes
right above the HTML tag and it essentially
| | 03:47 | tells the browser what type of document
that it's going to be parsing.
| | 03:52 | Based upon the standards or the actual
version of the HTML used, the browser
| | 03:56 | knows which parsing rules to use.
| | 03:58 | But more importantly, the only thing
the DocType really does is it triggers
| | 04:02 | Standards mode or Quirks mode in browsers.
| | 04:05 | There is a whole long convoluted story that
I don't think I have time to get into right now.
| | 04:09 | But suffice to say that what Dreamweaver
is asking you here is which version of
| | 04:14 | HTML do you want to use?
| | 04:16 | If I grab the pull-down menu I can see
that we go all the way from no DocType
| | 04:20 | declaration at all, to from
HTML 4.1, all the way up to XHTML.
| | 04:26 | Now HTML 5 is available as well, that's
a new standard from HTML and it's pretty
| | 04:31 | much what I use my default now.
| | 04:33 | So I am just going to go ahead choose HTML 5.
| | 04:35 | The next thing Dreamweaver is asking
me is do you want to attach a CSS file?
| | 04:41 | So if you are about the create a brand-new
HTML page and you already have part
| | 04:45 | of your site finished and you have
some external CSS already written
| | 04:49 | for your site, you could go ahead
and attach that CSS file now.
| | 04:52 | Now you could also go ahead and create
a stylesheet here as well if you just
| | 04:55 | wanted to go ahead and do both
of those things at the same time.
| | 04:57 | So if I click Attach Style Sheet, now
at first it just looks like you can just
| | 05:01 | Browse out for a file, but you are also
free to go ahead and create one here as well.
| | 05:05 | So I am just going to Cancel both of those.
| | 05:07 | We will take a look at that process
in more detail little bit later on.
| | 05:10 | So in addition to the Attached CSS file,
we have a couple of other options down
| | 05:14 | here as well, and the one that I
want to point out is Preferences.
| | 05:17 | We are going to take a look at those
preferences in the movie later in this chapter,
| | 05:19 | but when you bring a document
if you've forgotten to set certain
| | 05:23 | preferences, you can go ahead and
access them directly from this dialog box,
| | 05:27 | which is extremely useful.
| | 05:29 | Okay, I am going to go ahead and click
Create and now you can see that the code
| | 05:33 | that's generated by Dreamweaver is
actually very different than the code that
| | 05:36 | was generated by the Welcome screen.
| | 05:38 | So you see here it's using the
HTML5 document type, it's using
| | 05:43 | HTML5 character encoding.
| | 05:44 | So the choices that I made within the
new document dialog box resulted in a
| | 05:48 | dramatically different document. For example,
| | 05:49 | if I close this again, go back to
Welcome screen and create a new HTML file, you
| | 05:55 | can see how different that code is.
| | 05:57 | And it's just based upon the DocType
Declaration that you want for that
| | 05:59 | document, the character encoding
you are doing, those sorts of things.
| | 06:03 | Now if I close this, I mentioned before
that you could use the keyboard shortcut
| | 06:06 | of Cmd+ or Ctrl+N to create a new document.
| | 06:09 | Now if do that if I just hit Ctrl+N,
you will notice it's a new document dialog
| | 06:13 | box comes back up again.
| | 06:15 | Now as I am going to show you a
little bit later on in Preferences,
| | 06:18 | you can disable that if you'd like.
| | 06:19 | So once you set your Preferences, all
the options that I showed you over here
| | 06:23 | in terms of the DocType Declaration
and that sort of thing, you can set those
| | 06:27 | as preferences so that every time you
create a new document, it's exactly what
| | 06:30 | you're looking for without having to go
through this dialog box every single time.
| | 06:34 | So I am going to go ahead and Cancel that.
| | 06:36 | Now that we understand all the different
methods of creating new files in
| | 06:39 | Dreamweaver and some of the choices
that we are presented with, in our next
| | 06:43 | movie we are going to explore setting
those choices as preferences for any
| | 06:48 | new documents that we create.
| | Collapse this transcript |
| Setting up new document preferences| 00:00 | Based on the method that you use for
creating new documents, Dreamweaver
| | 00:04 | often makes a lot of the key decisions
for you as it creates the new page.
| | 00:08 | Whenever you start a new project, or
when your page requirements in your
| | 00:12 | site changes, it's a good idea to
take a few moments to set up your new
| | 00:16 | document preferences so that Dreamweaver
will create new pages to your
| | 00:20 | proper specification.
| | 00:21 | So to do that, I'm just going to
open up my Dreamweaver Preferences.
| | 00:25 | You can find those on the PC, by going
to Edit>Preferences, and of course on the
| | 00:29 | Mac you'll go to Dreamweaver>Preferences.
| | 00:31 | Now, what I'm looking for this time is
the New Document category, right over
| | 00:35 | here on the left-hand side.
| | 00:36 | We don't have very many choices here,
but the choices that we do have are
| | 00:39 | incredibly important.
| | 00:41 | So the first thing that it's going to ask
me is what default document type do I want?
| | 00:45 | And if I need something other than HTML,
for example, if I'm working on a ColdFusion site,
| | 00:48 | I choose ColdFusion from this.
| | 00:51 | For what we're doing in this course
of course we're going to choose HTML.
| | 00:54 | Now, the next thing it wants to know is,
okay, if I create a document and I save
| | 00:58 | it, what default extension do I want?
| | 01:00 | Now, I can choose .htm or .html.
| | 01:03 | For the most part it doesn't really matter.
| | 01:05 | It's a tomato, tomato type deal.
| | 01:07 | I actually really like the .htm extension.
| | 01:10 | Again, it doesn't matter,
it's a personal preference.
| | 01:12 | The only time you're really going to
see that happen is when you go over to the
| | 01:15 | Files panel and you right-click and
you choose to create a new file, then
| | 01:18 | Dreamweaver is going to go ahead and
create a file and save it all at the same
| | 01:21 | time for you and it's going
to give it that extension.
| | 01:24 | Also, you'll see that when you save a
file, you'll see that default extension
| | 01:27 | come up in the Save a File dialog box.
| | 01:30 | Now, the next choice we have here is
Default Document Type, and this is a
| | 01:33 | very important choice.
| | 01:34 | Essentially it tells the browser
which version of HTML you're using
| | 01:38 | and basically, how you're serving that content.
| | 01:41 | So it explains to that particular
user agent how it should parse the code.
| | 01:46 | So I'm going to grab the pull-down menu here.
| | 01:48 | Again, we see all the choices that we
saw in the previous movie's dialog box.
| | 01:52 | We can choose everything from HTML 4
to HTML 5 and XHTML 1.0, all the way
| | 01:58 | upto XHTML Mobile 1.0.
| | 01:59 | Unless you have a very compelling
reason to use something else, most people are
| | 02:04 | using either HTML 4.0 Transitional,
XHTML 1.0 Transitional,
| | 02:11 | or the new standard, which is HTML 5.
| | 02:14 | If you just browse, go to Google and
browse for doctype declaration history
| | 02:20 | or something like that, you're
going to read about how the doctype
| | 02:23 | declaration is kind of not important
as you'd like to think or some people
| | 02:28 | would make you believe.
| | 02:29 | There is absolutely no benefit gained by
choosing one over the other for the most part.
| | 02:35 | The reason I like HTML 5, it's not that
all of a sudden it becomes this HTML 5
| | 02:41 | document with magical properties,
it's just the most simple, basic doctype
| | 02:45 | declaration there is.
| | 02:46 | It essentially tells the
browser this is an HTML document.
| | 02:51 | It actually doesn't say anything about
the version number, and so basically what
| | 02:54 | your browser is going to do is it's
going to use the parsing regulations and
| | 02:57 | rules for HTML to parse the document.
| | 03:00 | It's also going to make sure it triggers
standards mode instead of quirks mode,
| | 03:04 | so everything renders and parses correctly.
| | 03:06 | All the other ones, they're kind of
just fluff to be quite honest with you.
| | 03:10 | For example, the XHTML Transitional
one, when most people choose that,
| | 03:15 | they think they're severing their pages
XHTML, but they're really not, they're
| | 03:19 | serving it as HTML, but just passing
in an XHTML document type declaration.
| | 03:23 | So again, lot of history to that, go
read up about it, there's lot of blog
| | 03:27 | postings and stuff out there where you
can read about the doctype declaration.
| | 03:30 | But for our pages, I'm just
going to set mine to HTML 5.
| | 03:34 | The next thing it's going to
ask is about the default encoding.
| | 03:37 | Now, for the most part the default
choice here, UTF-8, is sort of an adopted
| | 03:42 | standard for English speaking
languages, but you do have other options.
| | 03:47 | Now, I doubt if you're living in an
English speaking country that you'll ever
| | 03:50 | really need to worry about any of the
other encoding options, but of course
| | 03:53 | there are people all around
the world designing websites.
| | 03:56 | So Adobe gives you a lot of choices
here when choosing your encoding.
| | 04:00 | So I'm going to stick with the UTF-8 encoding.
| | 04:03 | And I've a little checkbox there that
says Use when opening existing files that
| | 04:06 | don't specify an encoding.
| | 04:08 | So if you're opening up an HTML file
or some other document from another location,
| | 04:12 | if it doesn't specify an encoding,
that's what you're going to tell it
| | 04:15 | to use when opening and parsing that file.
| | 04:19 | Just below that we have a little checkbox
right here that says Show New Document
| | 04:24 | dialog box on Ctrl+N. So you remember
the keyboard shortcut that we talked
| | 04:27 | about earlier, the Cmd+ or Ctrl+N
for creating a New Document?
| | 04:31 | You can choose to either have the New Document
dialog box, where you get to make all
| | 04:34 | these choices again, come up, or if you
want to just stick to these choices,
| | 04:38 | you can deselect that, and now whenever I
do my keyboard shortcut of Cmd+N or Ctrl+N,
| | 04:43 | I'm just going to click OK,
and show you guys this.
| | 04:46 | So now I'm just going to do Ctrl+N
on the PC, Cmd+N on the Mac.
| | 04:50 | I get a new document that opens up,
and notice that now it's using my new
| | 04:53 | document's preferences that I just
set instead of the XHTML 1.0,
| | 04:58 | which was the preference before.
| | 04:59 | So now I'm getting exactly what I want.
| | 05:02 | So if you go ahead and set these
preferences at the start of each one
| | 05:05 | of your projects, you can really speed up
your new document creation by having
| | 05:09 | Dreamweaver create new documents that
fit your specifications without really
| | 05:13 | requiring your input or having you
go through a lot of dialog boxes.
| | 05:17 | If you switch projects, or if something within
your project changes in terms of standards,
| | 05:21 | it's equally as easy to
make few minor changes to your preferences
| | 05:25 | to ensure that Dreamweaver is creating
documents exactly the way that
| | 05:29 | you need it to.
| | Collapse this transcript |
| Setting accessibility preferences | 00:00 | Before starting any new project,
there are a few settings that you
| | 00:03 | want to review and set that are
going to be specific to that site.
| | 00:07 | None of these settings are as potentially
as important as Accessibility.
| | 00:11 | In simple terms, Accessibility refers to how
your site's content is accessed by all users.
| | 00:17 | It's easy to get in the mindset of
designing specifically for say a browser,
| | 00:22 | but the truth of the matter is that
browsers are only one of the client types
| | 00:25 | potentially accessing your site's content.
| | 00:28 | Mobile devices, tablets, and screen
readers are just a few of the devices
| | 00:32 | that can now access your content, and frankly,
that number is exploding every year.
| | 00:37 | Now, while it's obviously a good idea
to provide your content to everyone
| | 00:40 | that tries to access it,
in some cases it's also the law.
| | 00:44 | Section 508 of the Americans with
Disabilities Act states that any website
| | 00:49 | paid for with Federal funds need to meet a
certain Standards Accessibility Guideline.
| | 00:54 | Now, the good news is that making your
content accessible isn't all that hard.
| | 00:58 | It just requires your attention
throughout the design process.
| | 01:01 | To make it even easier for you, Dreamweaver
has many built-in preferences that
| | 01:05 | assist you in making your document successful.
| | 01:08 | So in this movie, we're going to take a
quick look at setting your accessibility
| | 01:11 | preferences to let Dreamweaver
automate many of those accessibility-
| | 01:16 | related tasks for your sites.
| | 01:18 | So once again, I am going
to go back to my Preferences.
| | 01:19 | So I am just going to go right up to
Edit>Preferences, and of course, on the Mac,
| | 01:23 | you will go to Dreamweaver>Preferences.
| | 01:25 | Okay, I want to go up to the top, and
select Accessibility, it's the second
| | 01:28 | category down, and as you can see, we
don't have a whole lot of options here.
| | 01:32 | As a matter of fact, you also
notice that the default settings
| | 01:35 | in your Preferences, is for
Accessibility options to be turned on.
| | 01:39 | So this is actually something
that you willfully have to turn off.
| | 01:43 | So what's Dreamweaver going to do here?
| | 01:45 | Well, when we insert objects like
Form Objects, Frames, you're not
| | 01:49 | inserting frames, are you?
| | 01:51 | You're not? Okay, good, thank you!
| | 01:52 | Media like Video and Images, on the
page, what Dreamweaver is going to do
| | 01:57 | for you is any feature such as for example
Alt tags on images that can help make
| | 02:03 | that content more accessible, it's going
to bring that dialog box up for you first.
| | 02:07 | So it sort of reminds you that, hey,
| | 02:10 | this is the information you need.
| | 02:11 | So when you're placing Tables on the
page or when you're placing Images
| | 02:15 | on the page or Form Objects, Dreamweaver
is going to prompt you and say, hey,
| | 02:18 | this is the information that you need to
make this content a little bit more accessible.
| | 02:22 | So it just makes it part of your workflow,
and I really don't recommend turning
| | 02:26 | these off at all unless you
have a good reason to do that.
| | 02:29 | I am going to go ahead and click OK
just to accept the default preferences.
| | 02:33 | And I am going to show you one of
these accessibility features in action.
| | 02:36 | So I have the index page opened up from
the 03_03 directory, and what I am going
| | 02:43 | to do is I am going to scroll down on
my page, and I can see that I have this
| | 02:47 | little article right down here that
says Victor Stuesse, and that is how
| | 02:51 | you pronounce his name, Stuesse,
he wins the Lacie Award.
| | 02:54 | Okay, well I need a picture of Victor,
and I just happen to have one.
| | 02:58 | If I go over to Files panel, and I open
up the _images directory, I can see that
| | 03:02 | right there I have a file called award.jpg.
| | 03:05 | Now, we have a whole chapter on images.
| | 03:08 | So in terms of placing image content
on the page, and things that
| | 03:11 | you can do with images, we'll talk
about that a little bit later on.
| | 03:13 | What we're focusing on
right now is Accessibility.
| | 03:16 | So I am going to take this, and
simply drag-and-drop it right here
| | 03:21 | at the beginning of the paragraph.
| | 03:23 | Now, as soon as I do that, do I see my image?
| | 03:25 | No, I do not, I see the Image
Tag Accessibility Attributes.
| | 03:29 | So the first thing that it's going to ask
me is what Alt text do you want for this?
| | 03:33 | And I am just going to type in Victor
Stuesse wins Lacie Award. Fantastic!
| | 03:42 | Now, you might be wondering about
that next option which is Long
| | 03:45 | description. Man, oh, man, if you
want some fun reading, go out on Google
| | 03:49 | HTML5 Long description.
| | 03:50 | There is a battle raging about whether Long
description should be allowed to come back in.
| | 03:55 | Essentially what Long description
allows you to do is point to
| | 03:59 | a longer description.
| | 04:00 | So let's say you have a chart where you are
showing the sales results of 2011 or 2012.
| | 04:06 | Long description will allow you to
substitute text file for that, so screen
| | 04:10 | reader would read that text file
rather than just describe in graphic.
| | 04:13 | It's a valuable accessibility attribute.
| | 04:16 | But, it got ripped out of HTML, and now
there's some battling about exactly how
| | 04:21 | this type of functionality should occur.
| | 04:22 | So, we also have a link right
here to Accessibility preferences.
| | 04:26 | So if you're tired of this dialog box
coming up every time you place an image,
| | 04:30 | or other element on the page,
you can again go back to those
| | 04:32 | preferences and turn them off.
| | 04:34 | Again, I don't recommend that.
| | 04:36 | I am going to click OK.
| | 04:38 | There's the image on the page, and if
you look right down here in the Properties
| | 04:40 | Inspector, there is my Alt text.
| | 04:42 | So obviously, there's more than one
place within the Dreamweaver interface
| | 04:46 | where you can enter in that information,
but what that does for you is it sort of
| | 04:50 | prompts you, it reminds you that you
need that information, and after a while it
| | 04:53 | just becomes part of the workflow.
| | 04:56 | For the most part, those Accessibility
preferences in Dreamweaver,
| | 04:59 | they're really the type of preferences
that you just set and forget, and you let
| | 05:02 | Dreamweaver kind of do its thing,
and as matter of fact, if you don't do
| | 05:06 | anything, then by default, Dreamweaver
is going to prompt you for the necessary
| | 05:09 | accessibility information.
| | 05:11 | As I mentioned before, I really can't
think of any type of compelling reason
| | 05:14 | to turn them off unless you just
don't like to be prompted for it.
| | 05:17 | I want to stress also very clearly that
while these settings will save you a ton
| | 05:21 | of time and potential errors, like if
you forget to set all of your Alt text
| | 05:27 | and you have to go back and do it for the
entire project or you just forget about it
| | 05:30 | altogether, it can save you from that fate.
| | 05:33 | But however, these settings don't
guarantee that your site will meet
| | 05:37 | accessibility requirements.
| | 05:39 | So, you really ought to look at these
settings as more way of designing things
| | 05:42 | the right way, making sure the proper
information is there, and as a way to
| | 05:46 | save time while you're doing it.
| | 05:47 | The responsibility to create accessible
sites and content is still on you
| | 05:51 | as the Web designer, and there are some
accessibility requirements that are not
| | 05:55 | met by these preferences.
| | 05:56 | So obviously, as a Web designer,
you need to learn more about this.
| | 05:59 | So I'm going to show you a couple
of websites that can help you out.
| | 06:02 | And the first site I want to
take you to is the government's
| | 06:05 | website, Section508.gov.
| | 06:08 | This is a great site to go to, to
learn a little bit more about Web
| | 06:11 | accessibility, and how to ensure that
your site is meeting 508 requirements.
| | 06:15 | I also recommend you take a look at the
W3C's Web Accessibility Initiative page.
| | 06:21 | The Web Accessibility Initiative is an
organization that's dedicated to defining
| | 06:25 | accessibility standards across the Web.
| | 06:28 | So this is a great site to go to, to
learn more about the standardization
| | 06:32 | of accessibility options.
| | 06:33 | I'd also like to mention that
will continue to focus on
| | 06:37 | I accessibility throughout this title.
| | 06:38 | As we discuss images, forms, tables,
and other types of page elements, we'll
| | 06:42 | discuss their accessibility requirements
and any assistance that Dreamweaver
| | 06:46 | can give you in ensuring that
those elements are accessible.
| | Collapse this transcript |
| Working with starter pages| 00:00 | There are going to be times when creating a
new page from scratch is not your best option.
| | 00:05 | If you're new to using CSS for layout
or if you're simply looking for a head
| | 00:09 | start for the structure and layout of
your new files, Dreamweaver's starter
| | 00:13 | pages offer over a dozen standards-
compliant, cross-browser compatible
| | 00:17 | layouts to choose from.
| | 00:19 | These layouts render consistently in
almost all versions of Internet Explorer,
| | 00:23 | Firefox, Opera, Safari, and Chrome and
they're often a good choice for starting out.
| | 00:28 | So to access those, you
simply go to File and choose New.
| | 00:32 | Once again, I'm going to do
Blank Page>HTML and then from Layout,
| | 00:36 | I can choose from any of these options.
| | 00:38 | So taking a closer look at these,
we have options between one-, two-,
| | 00:42 | and three-column layouts.
| | 00:43 | We also have what's known as a
fixed layout or a liquid layout.
| | 00:47 | The fixed layout is going to be a specific
fixed size whereas a Liquid layout is
| | 00:51 | going to be based on percentages and
will resize and reflow based upon the
| | 00:55 | available space within the viewport, the
browser window, or the screen at hand.
| | 01:00 | What I want to do is I'm going to choose 2-column,
fixed, right sidebar, header and footer.
| | 01:05 | Notice that when you select one of these,
you'll see a little preview of what
| | 01:09 | the starter page is going to look like,
the little padlock icon there means that
| | 01:12 | this is a fixed layout.
| | 01:14 | Now in addition to being able to choose
which layout you want to use, you can
| | 01:18 | also still choose the document type and
you can also choose where you want the
| | 01:21 | Layout CSS to be added.
| | 01:22 | So the simple creation of this page
is going to generate not only HTML
| | 01:26 | structure, but also CSS code as well.
| | 01:29 | Now I'm going to choose HTML5 DocType
and then for Layout CSS, I'm going to make
| | 01:34 | sure for this particular example, it's
added to the head. That's just going to
| | 01:37 | make it a little bit easier for us to see.
| | 01:39 | You're also given the option of creating
a brand-new CSS file, you also have
| | 01:43 | the option of linking out to an existing
file if you have one already out there,
| | 01:46 | for example, handling typography
because these styles are going
| | 01:49 | to handle page layout.
| | 01:50 | So I'm just going to choose Add to Head
and then I'm going to create this page.
| | 01:56 | So you'll notice what this creates,
it's not really a template.
| | 02:00 | It's what it says it is,
| | 02:01 | it's a starter page.
| | 02:02 | As you can see placeholder
information and neutral background colors
| | 02:07 | clearly marked content areas.
| | 02:08 | So it's very easy to tell where the
header is, where the sidebar is,
| | 02:12 | where the main content is.
| | 02:13 | You have some written instructions
on how the page is structured,
| | 02:18 | how the styles are structured.
| | 02:19 | So again, if you're brand-new to CSS,
not only this just give you sort of
| | 02:23 | a leg up on getting started and up and
running with your pages but it's also
| | 02:27 | very instructive, it's a great way to
learn kind of how these files should
| | 02:30 | be structured, how the code is written.
| | 02:32 | I'm going to switch over to
Code view really quickly here.
| | 02:35 | You can see the code, you can see
the structure but more importantly,
| | 02:38 | in this case, because I embedded the
styles in the head of the document,
| | 02:41 | you can also see the styles.
| | 02:43 | Now, one of the things that you're
going to notice right off the bat and
| | 02:46 | I'll just scroll up to the top of the styles, is
that these styles are really heavily commented.
| | 02:51 | This gray text that you're seeing here
those are comments, and essentially what
| | 02:56 | you can do is you go through these styles,
read through the comments, learn what
| | 03:00 | these selectors are doing, what they're
driving, why they're written the way they are.
| | 03:04 | My good friend, Stephanie Sullivan,
wrote these and she does a great job
| | 03:09 | of explaining different browser imperfections
and inconsistencies, why selectors
| | 03:13 | need to be written in certain way.
| | 03:15 | So this is as much instructive as it is
anything else, and of course, if you're
| | 03:19 | going to use this truly as a starter
page, one of the things you'll probably
| | 03:22 | want to do is come in here and sort of
rip out some of these comments because
| | 03:26 | they're quite verbose and very extensive.
| | 03:28 | They are that way for a reason but
again, it's something that as you start
| | 03:31 | replacing some of these styles with
your own, you're going to want to go in
| | 03:34 | there and sort of whittle some of those down.
| | 03:36 | Now starter pages aren't for everyone.
| | 03:38 | However, if you've never used CSS for
layout before and you want to make sure
| | 03:42 | you're using solid standards-compliant,
cross-browser CSS, they are a
| | 03:46 | fantastic place to start.
| | 03:48 | If you already have a strategy for
using CSS in place, and one of the starter
| | 03:53 | pages sort of fits your layout requirements,
| | 03:55 | it can save you a lot of time in the
creation of your CSS as all you'll need to
| | 03:59 | do really is simply tweak the existing
CSS to be a little bit more inline with
| | 04:03 | your specific needs.
| | 04:05 | Now keep in mind that the CSS and the
page structure generated from starter
| | 04:08 | pages is entirely customizable.
| | 04:10 | You can go in here take away from
the code, add to it, tweak it,
| | 04:15 | really in whatever manner you want.
| | 04:16 | Just make sure that you approach using
starter pages with a very clear strategy,
| | 04:20 | so that the overall implementation
of them within your site is seamless.
| | 04:24 | Towards that end, and in our next movie,
we're going to discuss strategies for
| | 04:27 | customizing starter pages and
adopting them as part of your workflow.
| | Collapse this transcript |
| Managing starter pages| 00:00 | While starter pages can do a great
job of giving new designers a head start
| | 00:04 | on controlling page layout with CSS, they
are by nature designed to be individual pages.
| | 00:10 | Using the CSS within a starter page to
control an entire site can be a bit of
| | 00:14 | a challenge to somebody
who's not familiar with CSS.
| | 00:17 | So in this movie I want to show a
workflow based on creating sites
| | 00:21 | through starter pages.
| | 00:23 | By no means is it the only way you use
starter pages, nor am I suggesting that
| | 00:27 | this is the preferred way
of establishing site layout.
| | 00:30 | It does however offer somebody who's
new to Web design a quick way to establish
| | 00:35 | a solid site-wide layout, and it
introduces new designers to the concept of
| | 00:39 | controlling sites through external CSS files.
| | 00:43 | So I want to go right back to what
we were doing in the previous movie
| | 00:46 | by using some starter pages.
| | 00:47 | I have defined the 03_05 folder as the
root folder for our site, and I am just
| | 00:54 | going to go up to File and choose New.
| | 00:57 | Once again this is going to take us
back to this dialog box and I want to
| | 01:00 | stay with the options that I chose in
the previous movie; Page Type is going
| | 01:03 | to be HTML, Layout is going to be this 2 column
fixed, right sidebar header and footer.
| | 01:08 | I am going to do HTML5 for the DocType,
but one change I am going to make is
| | 01:12 | instead of Layout CSS in the head of
the document I want to create a new file.
| | 01:16 | So make sure that choice is Create a New File.
| | 01:19 | Now don't worry about doing any of
this Attach CSS file by just
| | 01:23 | telling it to create a new file.
| | 01:25 | First thing before you even open your
page it's going to prompt you to create
| | 01:28 | the CSS file and ask you
where you want to save it.
| | 01:30 | So I am going to go ahead and create this.
And as a promised, Dreamweaver is
| | 01:35 | first asking me, okay, as far as the
CSS goes where do you want to put that?
| | 01:39 | So within the 03_05 directory I am
going to click the Create New Folder option
| | 01:46 | and I am going to choose _css.
| | 01:48 | Almost all designers are going to store
their CSS in a central location within the site.
| | 01:53 | It makes it easier to find, it's a
little bit easier to maintain your styles,
| | 01:56 | and it's easier to link to
those files throughout the site.
| | 02:00 | Now once I create that folder
I am going to open it up.
| | 02:02 | So this is the folder that I am choosing,
this is where I am going to place the file.
| | 02:06 | And then you have to decide
what you want to name this file.
| | 02:09 | Now you could name it like layout.css, main.css.
| | 02:12 | I am going to leave the name as it is;
two column fixed right
| | 02:14 | header (twoColFixRtHdr).
| | 02:15 | It's very descriptive but probably on
a larger project I would rename that to
| | 02:19 | something that was a little bit more
generic or a little bit more stated of its
| | 02:23 | purpose like layout for example.
| | 02:24 | So I am going to save that, and
just as before nothing really new here.
| | 02:29 | We get a brand-new file, starter page,
but this time if I look over in the
| | 02:33 | Files panel, I can see there is my CSS folder
and there is the new CSS file that we created.
| | 02:40 | Now I am going to go up and save this
file and I am going to save it in the
| | 02:43 | 03_05 directory, I am going to
save it as index.htm. Perfect!
| | 02:49 | A couple of things here.
| | 02:51 | In the previous movie the CSS was
added to the head of the document.
| | 02:54 | If I look in Code view, I can see
right up here instead of a bunch of CSS,
| | 02:59 | it simply has this one link which links
out to the external file that we created,
| | 03:03 | and it basically says, okay, this is a
stylesheet and that's what we are going
| | 03:06 | to use to style our pages.
| | 03:08 | So accessing that code and modifying it
can sometimes be a little bit of a chore.
| | 03:13 | So one of my favorite features in
Dreamweaver, I actually love this,
| | 03:17 | is the Related Files feature.
| | 03:18 | You can find Related Files
directly above the Document toolbar.
| | 03:23 | You'll notice here I have Source Code
and I have the twoColFixRtHdr.css.
| | 03:27 | If I click on that, it's going to change
to a split screen or even a Code view
| | 03:31 | and I have access to all of the CSS code
without having to go open that document up.
| | 03:35 | So I can edit those styles,
change them, save them, hand code them,
| | 03:40 | directly here without having to open them up
as a separate document, which is just awesome.
| | 03:44 | And I can switch back and forth between the
HTML code from my file and the code for the CSS.
| | 03:49 | That's really a neat feature.
| | 03:50 | Now I am going to switch that back to
Design view, because we are going to edit
| | 03:54 | some styles, but we are going to edit
them using the CSS Styles panel,
| | 03:59 | which is a little bit easier in terms
of editing if you're new to CSS and
| | 04:03 | you're not familiar with the hand coding.
| | 04:04 | Now rest assured, I have an entire
chapter on CSS in terms of writing CSS,
| | 04:10 | managing and modifying CSS through Dreamweaver.
| | 04:12 | So this is not the only
thing we are going to do.
| | 04:14 | I am going to do this relatively quickly.
| | 04:17 | So I'll spend a lot more time within
CSS in sort of explaining those things to
| | 04:20 | you a little bit later on in another chapter.
| | 04:22 | But for right now, I am going to open
up the CSS Styles panel and then I am
| | 04:27 | going to minimize the Files panel so
that I have a little bit more room here.
| | 04:30 | Now you may need to re-arrange
your CSS Styles panel.
| | 04:33 | I want to make sure I am looking at
the All view and I want to arrange this
| | 04:36 | divider here so that's pretty easy for me
to find the styles that I am looking for.
| | 04:40 | Now if your window just simply won't go
that long, you can still scroll through
| | 04:44 | your styles, but if you can sort of
expand that so that you can see
| | 04:47 | all of them at the same time, that's
even more advantageous for you.
| | 04:51 | Before you start modifying styles,
you want to know a little bit about the
| | 04:54 | document that you're going to be
working on in terms of how it's structured.
| | 04:57 | One way to do that is simply
to switch over to the Code.
| | 05:01 | If you switch over the Code, you can
go through and you can say, okay,
| | 05:04 | first thing I see inside the body tag
is a div tag with a class of container.
| | 05:08 | Inside of that I have the class, div tag
with a class of header, so there's my header.
| | 05:11 | Then I have my sidebar and then if I go a
little bit further down there is my content.
| | 05:15 | Now if you are a person that really
sort of enjoys the visual aspect of
| | 05:20 | Dreamweaver, you can switch back to
Design view and in here for example
| | 05:24 | if I click inside the header.
| | 05:25 | If I look in the tag selector, which is
this little area right down here on the
| | 05:28 | Status bar, this is almost like a little
breadcrumb navigation telling you where you are.
| | 05:33 | Notice that currently, for example, I'm
inside of a link tag which is inside of
| | 05:37 | a div with a class of header, which is
inside of div with a class of container,
| | 05:41 | which is also inside the body tag.
| | 05:43 | So every time I click in a different
location, it tells me where I am.
| | 05:47 | That's also going to help me determine
which style to edit to change
| | 05:52 | a specific item on the page.
| | 05:53 | So our layout, it looks fine.
| | 05:55 | I am certainly going to replace the content.
| | 05:57 | For example, I could come in here and
change this headline from Instructions
| | 06:01 | to Welcome to Roux Academy.
| | 06:05 | But frankly, you're probably going to
just simply delete all that placeholder
| | 06:08 | content and replace it with your content.
| | 06:11 | But you're free to modify those if you want.
| | 06:13 | Currently, I'm more interested in sort
of styling these container areas, because
| | 06:18 | that's more sort of something that
I need to do across the entire site.
| | 06:21 | The colors in the site right now
don't fit my branding. And in terms
| | 06:25 | of the mockup that I did for the site,
these regions aren't the right size either.
| | 06:29 | So if I click inside the header I'll
start there, I can see that again it's a
| | 06:33 | div with a class of header applied to it.
| | 06:35 | So if I go over to the CSS Styles
panel and I look through the styles,
| | 06:39 | I can find right there .header.
| | 06:41 | So that tells me which rule I need
to edit in order to edit that region.
| | 06:45 | So I am going to click on that and I
can see that the only thing right now
| | 06:48 | defined for that is background color.
| | 06:50 | Well, I want to change that.
| | 06:52 | So what I am going to do is I am going
to click right here where the background
| | 06:55 | color is and I am free to
type in whatever I want.
| | 06:57 | Now they are using hexadecimal notation.
| | 06:59 | I am going to use RGB notation which
is just another way to denote color.
| | 07:03 | So I am going to type in rgb and then
open up parentheses and then I am going to
| | 07:08 | type in 251, 174, 44.
| | 07:14 | Close my parentheses (rgb(251,174,44))
and I am going to hit Return or Enter,
| | 07:18 | and you'll notice that the header changes color.
| | 07:20 | Now the little placeholder doesn't,
but that's just a little
| | 07:23 | placeholder graphic.
| | 07:24 | That's really just designed for you
to swap out your logo with it if you so
| | 07:27 | desire or you can just delete and get rid of it.
| | 07:30 | You'll notice as soon as I deleted
that all of a sudden the header got really
| | 07:33 | small and that's because currently the
height of the header is being driven by
| | 07:36 | the content inside of it.
| | 07:38 | Well, what if you want it to be
a specifically designed height?
| | 07:41 | Well, instead of just changing properties
that you already have, using this view
| | 07:45 | of the CSS Styles panel you
can add some properties as well.
| | 07:49 | So I am going to add a property
and I am going to add height.
| | 07:52 | If you're not sure what properties
are available to you, you can grab
| | 07:55 | the pulldown menu and you can
sort of scroll through all
| | 07:58 | of the available properties.
| | 07:59 | So I am going to choose height.
| | 08:00 | And the height that I am going
to set for this is 192 pixels.
| | 08:04 | You can see as soon as I do that
the header area gets a lot taller.
| | 08:09 | Well, if I look at the container in
the sidebar over here, again color scheme
| | 08:13 | isn't quite right and also my sidebar
needs to be a little bit wider, based on
| | 08:17 | the mockup that I created, my sidebar
needs to take up more room, because there
| | 08:20 | is more relevant content inside of it I guess.
| | 08:22 | I am not really sure, that's
just the way I designed it.
| | 08:25 | So clicking inside this content region,
again I can see that I am inside of
| | 08:29 | a div with a class of content.
| | 08:31 | So I am going to go over to my CSS,
find content and select it and I can see
| | 08:35 | that this is floating to the right,
it's padding is 10 pixels top and bottom,
| | 08:40 | 0 pixels left and right and
its width is 780 pixels.
| | 08:43 | I need to change that.
| | 08:44 | So I am going to change
it from 780 to 640 pixels.
| | 08:50 | Now when I do that, probably you were
thinking that it was going to shrink on
| | 08:54 | left hand sort of, right?
| | 08:55 | But this is floating to the right, so
essentially this container, and you can
| | 08:58 | see the outlines of the container
here, Dreamweaver has given us
| | 09:02 | a lot of information about this.
| | 09:03 | You can see that it just sort of
shrunk it, but it created a bunch
| | 09:06 | of empty space over here.
| | 09:08 | So what I am going to do now is
I am going to find my sidebar.
| | 09:11 | When I click inside my sidebar, again
that's a div tag with a class of .sidebar1.
| | 09:16 | Okay, fair enough.
| | 09:17 | So I am going to go up to find that
rule, I am going to select that and I am
| | 09:20 | going to change a couple of things here.
| | 09:21 | One of the first things that I am
going to do is I am going to change
| | 09:24 | the background color.
| | 09:25 | So with background color again I am
going to replace this with RGB values.
| | 09:28 | I am going to type in rgb(2,99,174).
| | 09:33 | If you are wondering, is it more
advantageous to use one of these hexadecimal
| | 09:36 | notations versus RGB, not really.
| | 09:39 | When I click on that, I can see it
changes again the background color of the
| | 09:43 | sidebar to that blue color that I was wanting.
| | 09:46 | And the next thing I am going
to do here is change the width.
| | 09:49 | So I am going to change the width from
180 pixels to 318 pixels and as soon as
| | 09:54 | I do that, you can see now my sidebar is
much wider and the content region over
| | 09:58 | here sort of moves back
over to its proper location.
| | 10:02 | I am going to go ahead and Save All here.
| | 10:05 | And all we've really done so far is create
one new page and sort of modify a few styles.
| | 10:10 | That's hardly the basis of workflow
for an entire site, but in reality by
| | 10:15 | separating the CSS to this external
file we've made it a lot easier for us to
| | 10:19 | build a site around the choices that we've made.
| | 10:22 | If I close this file and I go back to
Dreamweaver and go to File>New, and I can
| | 10:29 | go back through these choices again.
| | 10:30 | I can say, hey, I want to create a new
page in this time, but I want to base it
| | 10:34 | off of the CSS that I just created and edited.
| | 10:37 | So again I can choose HTML, 2 column
fixed, right sidebar, header and footer.
| | 10:41 | That's going to give me the exact same
structure as the index page that I just saved.
| | 10:45 | But this time instead of creating a brand-new
CSS file, I am going to tell it to
| | 10:49 | link to an existing file.
| | 10:51 | So now I can go ahead and attach that
file, I am going to browse out into the
| | 10:55 | 03_05 folder, find the CSS directory;
| | 11:00 | select the (twoColFixRtHdr), click OK.
| | 11:02 | Now it's going to show you
something about a relative path.
| | 11:05 | Don't worry about that.
| | 11:06 | That's just because we
haven't saved our HTML page yet.
| | 11:09 | I am going to click OK and Create.
| | 11:12 | It creates a brand-new page
for me, which I can then save.
| | 11:15 | I am going to save this page.
| | 11:16 | I'll save it in 03_05 directory.
| | 11:19 | I'll save this one as about.htm,
maybe this is our about page and
| | 11:23 | I can replace this content.
| | 11:25 | But what's awesome about this workflow
is that all the changes that we made to
| | 11:31 | our previous file in terms of the CSS
are added to this one as well, because
| | 11:35 | they're both linking to the exact same CSS file.
| | 11:39 | So this workflow is a way to sort of
initially take your CSS file from the
| | 11:42 | starter page, modify it however you want,
typography, layout, whatever you want
| | 11:47 | to do, and then from there just keep
using the same structure in terms of the
| | 11:52 | starter pages, but link it to your custom CSS.
| | 11:55 | So it's kind of an efficient way to
create a lot of pages that are going to
| | 11:59 | use the exact same layout.
| | 12:00 | Now the nice thing about this workflow
is, for you guys that are newer Web
| | 12:03 | designers, it's going to allow you to
quickly establish a basic page structure
| | 12:08 | and an external CSS file that can
be used to control the entire site.
| | 12:12 | Now the CSS that the starter pages add,
it's very lightweight, can be modified
| | 12:16 | as much as the site requires and it's
also a great way for you guys to learn
| | 12:20 | CSS, as you can experiment with the CSS
to see how it affects multiple pages,
| | 12:25 | add rules to the CSS to control additional
elements within the page that you
| | 12:29 | add a little bit later on. Of
course there are other ways to achieve
| | 12:32 | the exact same results, but this is one
of the quickest and easiest ways for
| | 12:37 | new users to adopt CSS layout.
| | 12:39 | Now of course, I have to note that in
no way this lessens the need for you
| | 12:43 | new designers out there to learn
CSS as quickly as possible.
| | 12:47 | CSS is used to control almost all modern
websites and without understanding
| | 12:52 | how CSS works and how to author it so that
you can control your Web pages, what you
| | 12:57 | can accomplish as a Web designer
is going to be extremely limited.
| | Collapse this transcript |
|
|
4. Adding and Structuring TextGetting text into Dreamweaver | 00:00 | In this chapter we are going to
discuss using Dreamweaver to add text
| | 00:03 | and structure to your HTML.
| | 00:05 | Although you can certainly type to
your heart's content inside Dreamweaver,
| | 00:09 | chances are that most of the copy you
work with will be created either by you
| | 00:13 | or another person in a
program other than Dreamweaver.
| | 00:16 | So we are going to start by discussing how to
get text from those programs into Dreamweaver.
| | 00:21 | So I have the programs.htm file
open from the 04_01 directory.
| | 00:27 | You'll notice that over here in the main
content section I don't have any content.
| | 00:31 | This is pretty typical.
| | 00:32 | You will create a page, and you style it,
and then you'll go out to get the
| | 00:36 | content that someone else has written
or that you've written in a word
| | 00:38 | processing program and you'll just paste it in.
| | 00:40 | So it's actually a really common workflow.
| | 00:42 | I notice over here in the Files panel
I have an assets directory folder and
| | 00:46 | inside that I have this
Word document programs.doc.
| | 00:50 | Now the great thing about Dreamweaver
is it recognizes that this is a Word program.
| | 00:53 | In fact, within Dreamweaver's
Preferences, you can tell it what type
| | 00:57 | of program to use when
editing specific types of files.
| | 01:01 | The default one for Word
is of course naturally Word.
| | 01:04 | So if I double-click this icon, this is
going to go ahead and open up this file
| | 01:08 | directly inside of Word.
| | 01:09 | So here we are in Word and I can see
that someone's been very helpful to us in
| | 01:14 | terms of formatting the content for me.
| | 01:16 | So they have structured the content,
they have applied styles to it.
| | 01:19 | And let's break down kind of the
styling that they have applied, the structure
| | 01:22 | that they have added, and we can talk
about how that's going to translate once
| | 01:26 | I get back over in the Dreamweaver.
| | 01:27 | So if I click inside the first heading
here Academic Programs, I can see that
| | 01:32 | the default style Heading 1 has been used.
| | 01:34 | If I click inside the paragraph, I can
see that the custom style Body Copy has
| | 01:38 | been applied to this.
| | 01:39 | Now I appreciate somebody styling this
for me, I'm not really sure I'm all that
| | 01:44 | supportive of their color choices, but
it's nice of them to go ahead and format
| | 01:48 | this for you and you are going to find
that people will do this a lot for you
| | 01:51 | if they are giving you content.
| | 01:52 | They will create a Word document and
they will try their level best to make it
| | 01:56 | look exactly the way they
want it to look on the webpage.
| | 01:59 | Actually, they're not helping
you at all when they do that.
| | 02:01 | So I want to talk about the things
that they can do that will help you
| | 02:05 | and some of the things that they might do
that might not be so helpful that you
| | 02:07 | need to look out for.
| | 02:09 | So again with all of the headings you
will notice that we are using default the
| | 02:11 | Heading 1, Heading 2, and Heading 3 styles.
| | 02:16 | That's important because there are
preferences within Dreamweaver that are going
| | 02:19 | to help retain that structure and make
sure that the proper structural tags
| | 02:23 | in the HTML are used for this content.
| | 02:26 | You will also notice that certain text
doesn't have a style applied to it,
| | 02:30 | but we do have formatting such as
Bold or Italic applied to it as well.
| | 02:34 | Dreamweaver has options to remember
that as well and that can save you a little
| | 02:38 | bit of time when you copy and paste this text.
| | 02:41 | So what I am going to do now is I am
going to go ahead and do a Select All and
| | 02:44 | I am just going to copy this text and then
I am going to jump back into Dreamweaver.
| | 02:47 | Alright!
| | 02:47 | So here I am back in Dreamweaver.
| | 02:49 | I am going to place my cursor
right inside this main content region.
| | 02:53 | But one of the things you'll probably
notice, if you're like me and you're in
| | 02:55 | Design view, is I have this sort of dotted
line or dashed line all the way around this area.
| | 03:00 | That's to let me know visually that
there is a region an element here that
| | 03:05 | is acontaining element that
I can put content inside of.
| | 03:07 | In fact, if you click inside this and
you look down here in the tag selector,
| | 03:11 | you'll see that I'm now inside of a
paragraph tag which is inside this article
| | 03:15 | element with an ID if mainContent.
| | 03:16 | So again that's just another way to
sort of double-check and make sure
| | 03:19 | you're in the right place.
| | 03:20 | Now before we paste our text, I
want to bring up the Preferences inside
| | 03:24 | Dreamweaver that guide this process
and show you what the results of those
| | 03:27 | different preferences will be.
| | 03:29 | So, if I go up to Edit and choose Preferences,
| | 03:32 | on the Mac you'd go to Dreamweaver
and choose Preferences, I am going to go
| | 03:35 | right here to the Copy/Paste category.
| | 03:37 | So we have a few options here.
| | 03:39 | The first option is Text only,
then we have Text with structure.
| | 03:43 | You will notice it's talking about
basic structural elements like paragraphs,
| | 03:46 | list, tables, and things like that.
| | 03:48 | Then we have Text with structure plus
basic formatting, which is bold and italic.
| | 03:51 | Now this is the default preference actually.
| | 03:53 | So if you haven't set this before,
that's the one that you are likely to see
| | 03:56 | selected and then finally we have Text
with structure plus full formatting and
| | 04:00 | that's bold, italic plus styles.
| | 04:02 | We have another set of options below
this and we have some checkboxes down here.
| | 04:06 | I want to talk about what these will do for you.
| | 04:08 | The first one is Retain line breaks.
| | 04:10 | So if somebody in Word has done
what's known as a soft return.
| | 04:13 | So instead of hitting Enter or Return,
they hit Shift+Enter or Shift+Return to
| | 04:17 | break down to another line, but stay
within the same paragraph, Dreamweaver
| | 04:21 | will honor that for you and it will put
a line break tag, a br tag in the code
| | 04:25 | rather than a paragraph.
| | 04:27 | Then we also have this really nice little
feature that cleans up Word paragraph spacing.
| | 04:31 | It's very common for people in Word to
get space between their paragraphs by
| | 04:34 | hitting Return or Enter twice rather
than going up and formatting that space.
| | 04:39 | So what Dreamweaver will do for you
is it will rip out all those empty
| | 04:42 | paragraphs so you don't end up with code
that's just littered with empty paragraphs.
| | 04:47 | Then finally we have the Convert
smart quotes to straight quotes.
| | 04:49 | So if for example someone did smart
quotes and they have these curly quotes
| | 04:54 | and you need straight quotes for
measurements or something like that,
| | 04:58 | you can rip those out as well.
| | 04:59 | So what I am going to do is I am just
going to go up and experiment with these
| | 05:02 | different preferences that we have.
| | 05:03 | I am going to start with Text only.
| | 05:05 | So if I click OK and I paste my content
in now, Text only is exactly what I get.
| | 05:11 | I don't get any line breaks, I don't
get anything other than just one huge
| | 05:14 | paragraph with all of that text. That
has the advantage of stripping out any
| | 05:19 | formatting from Word that we don't need.
| | 05:21 | You will notice a lot of times when
you paste text in from Word that it
| | 05:24 | brings in some pretty funky formatting;
line breaks that you didn't mean to
| | 05:27 | bring in, paragraphs that are all over
the place, and this is one way to sort
| | 05:31 | of just strip all that stuff out and
allow you to go back in and apply your
| | 05:35 | own structure to it.
| | 05:36 | Of course, this particular workflow is
going to be a little bit more manually
| | 05:39 | labor-intensive, because now I would
have to go in, manually insert all my
| | 05:44 | paragraphs and headings and things like that.
| | 05:45 | So I am going to undo that.
| | 05:47 | I am going to back to my Preferences.
| | 05:50 | This time I am going to go to the other
extreme and I am going to do Text with
| | 05:53 | structure plus full formatting.
| | 05:54 | Now for a lot of new Dreamweaver
users this seems like Mecca.
| | 05:58 | They are like, wait a minute.
| | 05:59 | I can bring in the text from Word
and retain all of the formatting?
| | 06:03 | That means I can work in Word the
way I like to and bring it in and poof!
| | 06:06 | My webpage magically looks just like that.
| | 06:08 | Well, there are some problems
with this particular workflow.
| | 06:11 | Let's check those out.
| | 06:12 | If I click OK and then paste my text again,
notice that it does come in and it
| | 06:16 | does sort of retain the formatting.
| | 06:19 | This particular file has an external
CSS file that's driving the look and
| | 06:23 | the feel and the presentation,
if you will, of the text.
| | 06:25 | So what we are seeing here is we
are seeing some conflicting styles.
| | 06:29 | It's retaining some of the formatting
from Word and it's getting a lot of its
| | 06:33 | formatting from the external CSS file.
| | 06:34 | To really understand what's going on here, we
are going to need to switch over to the Code.
| | 06:37 | So I am going to switch over to
Code view and I can see that these
| | 06:40 | paragraphs that it brought in also
have these classes applied to them like
| | 06:44 | BodyCopy and MsoNormal.
| | 06:47 | Now if you remember from the Word document,
BodyCopy was one of the styles
| | 06:50 | that we had up there.
| | 06:51 | So it actually brought that style in,
but it brought that style in as a class.
| | 06:54 | It also places the style in the head
of the document as an embedded style and
| | 06:58 | you can see it sort of writes
a custom selector around this.
| | 07:02 | I doubt that this is a workflow that
you really want to embrace, because if
| | 07:05 | you're controlling your entire site
with your external CSS file, you are going
| | 07:08 | to have a lot of styling conflicts, you
are going to have more classes applied
| | 07:12 | to your files than you need and it's
just not a very efficient way of working.
| | 07:16 | So once again I am going to go back to
Design view and I'm going to undo that.
| | 07:19 | I'm going to go up and do one final
preference and this time I am going to do
| | 07:23 | Text with structure plus basic formatting.
| | 07:25 | Now this one is almost exactly like the
option above it, the only difference is
| | 07:29 | if anybody has applied bold text or
italic text inside of Word, it's going to
| | 07:34 | honor that in Dreamweaver and I
want to show you how it honors that.
| | 07:37 | So I am going to bring this back in,
I'll click OK, paste the text again.
| | 07:41 | And you will notice I don't
need to go back out and copy it.
| | 07:43 | It just remembers whatever is in the clipboard.
| | 07:45 | So now you'll notice that the formatting
is being controlled by my external CSS file.
| | 07:50 | The structure is being controlled
by the structure that I gave to the
| | 07:53 | content inside Word.
| | 07:54 | You will notice when I click inside
Academic Programs for example, it's a
| | 07:57 | Heading 1, when I click inside
Academic Departments, it's a Heading 2.
| | 08:01 | All my paragraphs are coming in as separate
paragraphs, and right down here the text
| | 08:06 | that has bold applied to it inside Word, you
will notice that that is inside of a strong tag.
| | 08:10 | So it's not writing a custom CSS
selector for that, it's actually using
| | 08:15 | the HTML structure to achieve the same
exact results within Dreamweaver.
| | 08:19 | So copying and pasting text into
Dreamweaver is likely to be a very common
| | 08:23 | workflow for you, and because of that,
Dreamweaver has a lot of different options
| | 08:27 | within its Preferences to help
control how the text is brought in.
| | 08:31 | Now this is a workflow, this copying
and pasting of text in the Dreamweaver is
| | 08:35 | a workflow that you are going to use a
lot, but there is another way to bring
| | 08:38 | text in the Dreamweaver from Word
and we are going to take a look at
| | 08:42 | that option in our next movie.
| | Collapse this transcript |
| Importing Word documents | 00:00 | In an effort to create efficient workflows,
Adobe has integrated Dreamweaver
| | 00:04 | with many other programs that you or
your team members are likely to use.
| | 00:08 | Most integration is understandably
within Adobe's Creative Suite,
| | 00:12 | but other programs like Word feature
differing levels of integration as well.
| | 00:16 | It's not often that I have to break
bad news to Mac folks, but this is sadly
| | 00:21 | one of those times.
| | 00:23 | The integration between Word and Dreamweaver
that I'm about to show you only
| | 00:26 | works on the PC version of Dreamweaver.
| | 00:28 | Still, the Mac folks should keep watching,
no need to stop and go to the next movie,
| | 00:32 | because there is one option in the
following example that does work for
| | 00:36 | you and it's something you might
want to take advantage of later on.
| | 00:39 | So I have the programs.htm file open
from the 04_02 directory, and once again,
| | 00:44 | we are sort of presented with this blank
space over here and remain content region.
| | 00:48 | So I am going to click inside that and the first
think I am going to show you is Menu option.
| | 00:52 | So I can go right up to the Menu, go to
File and when I choose Import you will
| | 00:57 | notice that one of the options in
Import is to import a Word document.
| | 01:01 | So rather than copying and
pasting, I can just import this.
| | 01:04 | So if I go to File>Import Word Document,
I can just browse out of the 04_02>_assets
| | 01:10 | directory, find the program's
Word Document and click Open.
| | 01:14 | As soon as I do that it just takes its
content and drops it right into the area
| | 01:19 | that I have selected. How cool is that?
| | 01:21 | It's a very quick, it's very easy.
| | 01:22 | Now one of the things that you are
going to notice about this is it didn't
| | 01:25 | prompt me in terms of how it wanted
to process this copy and bring it in.
| | 01:30 | It's basing its settings off of the preferences
that I have set in the copy and paste
| | 01:34 | preferences that we
covered in the last movie.
| | 01:37 | So if you're looking for a prompt, if
you ever want to change that, you either
| | 01:41 | need to change the preferences before
you do the import, or you need to use the
| | 01:45 | second method that I'm about to show you.
| | 01:47 | So if I undo this and I go over to my
Files panel, you will notice again, here
| | 01:52 | is the _assets directory, here is programs.doc.
| | 01:55 | I can actually grab the programs.doc
file and drag and drop it into the region
| | 02:00 | that I want the text to appear in.
| | 02:02 | As soon as I let go of the mouse, my
preferences come up and now Dreamweaver
| | 02:06 | is actually prompting me in saying, okay,
well how do you want to inset this?
| | 02:10 | You will notice it's the exact same
preferences that you have within your
| | 02:13 | Copy and Paste preferences except
for one down here on the bottom.
| | 02:16 | So I am going to make sure that it
stays as Text with structure plus basic
| | 02:20 | formatting and the Clean
up Word paragraph spacing.
| | 02:23 | Now I am going to come back to
this option in just a moment.
| | 02:25 | So when I click OK, you will notice
I get the exact same results,
| | 02:29 | the text comes in and it's formatted
exactly the way I want to format it based
| | 02:33 | upon structure that it's grabbing from
the Word Document and the styles
| | 02:36 | that I have applied to my site.
| | 02:38 | That last option, I want to talk
to you about that for just a moment.
| | 02:41 | What if you had a Word Document that
you wanted to give the users of your site
| | 02:45 | an option to download?
| | 02:46 | So if I go to the next line here for
example, and just create sort of an empty
| | 02:50 | paragraph over there, well if go over
to the Files panel and I grab the Word
| | 02:55 | document and I drag it to that empty
paragraph, I can choose this last option
| | 03:00 | which is to Create a link.
| | 03:01 | Now for you guys that are on the Mac,
this is the option that works for you.
| | 03:05 | So although, it's not going to bring
in the content as quickly and easily as
| | 03:08 | it will for PC users,
| | 03:10 | if you want to give people the option
of clicking and downloading this file to
| | 03:14 | their hard drive, you can use
this option to Create a link.
| | 03:16 | I will click OK and you can
see there is a link to programs.
| | 03:20 | It just uses the title of the document
and it just creates a link to that.
| | 03:24 | You can see _assets right here in
the Properties Inspector, programs.doc.
| | 03:27 | So if that's up live online, if
somebody clicks on that, since the browser
| | 03:31 | doesn't understand how to read a Word
Document you are going to be prompted to
| | 03:34 | download that, and of course you
can change to the text over here.
| | 03:36 | You can say something like
download the programs word doc.
| | 03:44 | That would prompt people when they
click that to download the document
| | 03:47 | to the local hard drive.
| | 03:48 | So there you go, that's it, it's quick and easy.
| | 03:50 | What's easier than dragging and dropping right?
| | 03:52 | Now I'm sorry to say this
feature doesn't work on the Mac.
| | 03:55 | I have been waiting for it for years,
but unfortunately it still doesn't work.
| | 03:58 | But do take note of the fact that if
you want to link to an external Word file
| | 04:02 | for users of your site to download, it
as easy as dragging and dropping as well.
| | Collapse this transcript |
| Adding structure to text | 00:00 | When designing a new page, one of the
first tasks you'll need to do is create
| | 00:04 | the basic structure of your page's HTML.
| | 00:07 | Although we've seen how to import text
from programs like Word and retain the
| | 00:11 | default structure, most of the time
you are going to need to do a lot of
| | 00:15 | the structuring of the content yourself.
| | 00:17 | And thankfully Dreamweaver makes it incredibly
easy to add basic structure to your HTML.
| | 00:22 | In this exercise, we are going to take
our programs file which you can see here
| | 00:25 | is been kind of stripped down to the bare bones.
| | 00:28 | And add meaning to the text by
formatting it with specific tags.
| | 00:31 | Now keep in mind, that in this exercise
we are focusing on simply the main
| | 00:36 | content region of the page, not
the layout or the secondary areas.
| | 00:39 | We are just talking about basic
text structuring at this point.
| | 00:43 | It would be really easy to look at this
file at the moment and say, it doesn't
| | 00:46 | have any structure at all,
there is no formatting here.
| | 00:48 | But this is not exactly true.
| | 00:50 | If I click inside for example this
paragraph and I look down here in the Tag
| | 00:55 | selector, I can see that
this is inside a paragraph tag.
| | 00:58 | As a matter of fact, you can sort
of think of the paragraph tag as
| | 01:01 | Dreamweaver's default tag.
| | 01:03 | Any time you hit Return and begin typing,
what are you really doing, is creating
| | 01:07 | a brand new paragraph.
| | 01:09 | You can see that right down here on the
Tag selector, there is my new paragraph.
| | 01:12 | So by default most of the elements
that you have in Dreamweaver especially
| | 01:16 | if you're typing in yourself
or inside of a paragraph.
| | 01:19 | You can't assume, when you look
along the text however, that it is just
| | 01:22 | automatically inside of a paragraph.
| | 01:23 | You will notice if I click right up
here in the Roux Academy of Art and Design,
| | 01:27 | the very top line of text, there is no
tag down here other than the body tag.
| | 01:31 | And that tells you that this particular
line of text is not wrapped within a tag.
| | 01:36 | The tag selector is very useful for
telling you kind of where you are,
| | 01:41 | but there is another view that you can do
that makes things little bit easier to
| | 01:44 | tell us what is going on in the underlying HTML
structures as well and that's a Split screen view.
| | 01:48 | So I am going to go up here to the
Document toolbar and I am going to choose
| | 01:51 | Split, so that I have got a Code view on
the left hand side and a Design view on
| | 01:55 | the right hand side.
| | 01:56 | As we are working with our structure
this is going to be really quick and easy
| | 01:59 | way to make sure there we are
using the proper structural tags.
| | 02:01 | The next thing I am going to do and
this is just so I have a little bit more
| | 02:05 | space, I am going to collapse my panel
doc down to icons so that I have more
| | 02:08 | space for both the
Design view and the Code view.
| | 02:12 | Okay, so I am going to start off with
this Roux Academy of Art and Design.
| | 02:15 | If I click inside that particular line,
again I notice that there is no
| | 02:19 | tag inside of this.
| | 02:20 | Be careful here, if you click inside
the Code view, if you see the code lines
| | 02:24 | over here, sort of highlighted in blue,
that means your focus is over here and
| | 02:26 | any changes will actually be made of
code itself, whereas if you click over here
| | 02:30 | in Design view that's where you focus is.
| | 02:32 | So just be sure that you know kind of
where you are focused at any given time if
| | 02:36 | you are in this Split view.
| | 02:37 | So I am going to click inside the Roux
Academy of Art and Design and probably
| | 02:41 | the quickest and easiest way to add
structure to your text inside Dreamweaver
| | 02:46 | is to use the Properties Inspector.
| | 02:48 | So I am going to go down to my Properties
Inspector and I am going to make sure
| | 02:51 | that I have clicked on the HTML tab here,
this little HTML button to make sure
| | 02:55 | I am looking at the HTML properties of my content.
| | 02:57 | You will notice that I have a little
drop down menu here for Format and
| | 03:01 | currently that reads as None
because it's not inside of a tag.
| | 03:03 | If I change that by grabbing this pull
down menu and choosing say Heading 1, you
| | 03:08 | will notice now that the text
is wrapped inside of an h1 tag.
| | 03:12 | Now in Design View it does get bigger
and it does get bolder, but I don't want
| | 03:16 | you to equate this structure with
specific types of visual formatting because
| | 03:21 | through CSS I can make the
headline look any way I want.
| | 03:24 | I can make the text actually tiny or
even hided all together if I want to.
| | 03:28 | So just because the default rending of
H1 is big and bold doesn't mean that it
| | 03:32 | has to be the final rendering of the
text or that doesn't mean that's why we
| | 03:36 | choose a specific tag.
| | 03:38 | We choose these structural
elements because of what they represent.
| | 03:41 | A Heading 1 is the top level heading,
meaning it's the most important heading
| | 03:46 | in either a section or the page.
| | 03:48 | It depends upon the sort of
strategy you develop for your page.
| | 03:52 | Speaking of that strategy, I am going to
go down to Academic Programs, I am going
| | 03:55 | to click inside that and I am going
to change this to Heading 1 as well.
| | 03:59 | Now you may have read in certain tutorials
and articles only use one h1 per page.
| | 04:05 | That was perpetrated more
by Google than anything else.
| | 04:09 | And I am not saying Google recommended it,
but way back in the day Google's search
| | 04:13 | results really liked having a single H1
tag up at the top of the page.
| | 04:18 | You would index that page and apply
a level of importance to that
| | 04:22 | particular headline.
| | 04:23 | Well no body outside of Google knows
exactly how they handle their search results.
| | 04:27 | But the new HTML 5 Standard says that
it's fine, it's accepted practice to use
| | 04:32 | more than one h1 and as we move forward
with the site, the Roux Academy of Art
| | 04:37 | Design will actually end up in the
header of our page, where Academic Program
| | 04:41 | is going to be in then article sections.
| | 04:44 | So there are going to be two separate
sections and each one by using an h1
| | 04:47 | there, it becomes the top
level heading for that section.
| | 04:51 | So really, it's all based upon the personal
strategy that you come up with for your file.
| | 04:56 | The only thing that is important
is that you remain consistent.
| | 04:59 | Okay, now I am just going to go
through and start adding structure
| | 05:02 | to the remainder of the content.
| | 05:03 | I am going to go down to Academic Departments.
| | 05:05 | I am going to format that as Heading 2,
I am going to go down to Animation,
| | 05:12 | I am going to format that as Heading 3.
| | 05:13 | So you can see I am sort of stepping
down in level of importance as I go
| | 05:17 | through the content.
| | 05:18 | Fashion and Textile design will be a
Heading 3 because it has the same level of
| | 05:22 | importance as animation.
| | 05:24 | Fine Arts and Visual Culture will get
a Heading 3. I am guessing by now you
| | 05:27 | probably picked up on level of importance
and what heading are you going to use for this.
| | 05:31 | So Graphic Design will also be a Heading 3.
| | 05:35 | Photography will be Heading 3, and
then finally Academic Links is going to be
| | 05:41 | Heading 2 and the rest of this content
we will deal with in a later movie,
| | 05:46 | as we start formatting lists.
| | 05:47 | Okay I am going to scroll back up and
I can see that now our page has some
| | 05:51 | structure to it, even if you were to
look at this page in sort of non-formatted
| | 05:55 | way that we are seeing it right now.
| | 05:57 | You could gauge the level of importance
of the content of the page by the
| | 06:00 | headlines and the paragraph themselves.
| | 06:02 | Now there is an additional structure
that we can add to the page using a
| | 06:06 | Properties Inspector as well.
| | 06:07 | For example, if I highlight the
names of the Department chairs,
| | 06:12 | I can go down and click Bold.
| | 06:14 | And what that's going to do for me is
yes visually, it bolds it, but what it's
| | 06:16 | actually done is it's taking that text
and wrapped it within the strong tag.
| | 06:20 | So it's using a structural element
to basically say, hey this particular
| | 06:25 | text within this line should be
strongly emphasized which visually
| | 06:29 | is rendered as being bold.
| | 06:30 | Alright, so I am going to go back and
do each one of those names, just with
| | 06:34 | Bold tag to be consistent in my
structure and have a strong tag surrounding
| | 06:40 | each one of those names.
| | 06:48 | You may have noticed earlier, when I
was looking at this Format pull down menu
| | 06:52 | that we have an option
down here called Preformatted.
| | 06:54 | I get asked about that actually pretty
frequently by folks. What is preformatted?
| | 06:58 | Well that actually is going to wrap
content in a pretag a PRE tag which causes
| | 07:03 | browser to display the text in sort of
a monospaced font and retain any line
| | 07:08 | breaks or white space and that's the
important thing because for most part HTML
| | 07:11 | doesn't recognize more than one
character of white space within that text.
| | 07:15 | So what is really good for and what
it's primarily used for is displaying
| | 07:18 | computer code or scripting examples
within blogs, tutorials things like that.
| | 07:23 | Our page is on its way, but
structurally its not quite done yet.
| | 07:26 | You'll notice we have this little section
down here that we need to still format.
| | 07:29 | So next up we are going to explore
another fundamental structural element
| | 07:33 | as we work with lists.
| | Collapse this transcript |
| Creating lists | 00:00 | Most people think of lists as simply
a way of displaying related items
| | 00:05 | in a numbered or unordered listing, well
that certainly is true but list can do
| | 00:09 | so much more than that.
| | 00:10 | Lists allow us to group related content
together and then structure that content
| | 00:15 | in a way that denotes
importance, rank or similarity.
| | 00:18 | When used for navigation, lists offer a
way to group links together so that user
| | 00:22 | agents know that all of those links are
related. So if you've ever looked at the
| | 00:26 | code of a page and you wondered why in
the world would somebody take their menu
| | 00:29 | and place it inside of a list. That's why?
| | 00:31 | They're basically telling user agents
that hey, these links belong together
| | 00:35 | and they're related to each other.
| | 00:37 | So HTML offers us three main types of lists:
| | 00:40 | Ordered, Unordered, and Definition Lists.
| | 00:43 | Ordered and Unordered Lists are the
two most common types, so we're going to
| | 00:47 | take a look at those first.
| | 00:48 | So I have the programs.htm file open
here from the 04_04 directory and it's kind
| | 00:54 | of right where we left it in the last movie.
| | 00:56 | If I scroll down for example I can see
that the only thing that it lacks sort
| | 01:00 | of a really defined structure are these
choices right down here. We have a list
| | 01:04 | of academic links that are going to
sit up there in one of the sidebars a
| | 01:06 | little bit later on.
| | 01:07 | So I want these items to be related to
each other in some way, right now they're not.
| | 01:12 | They're all just separate paragraphs
so there's nothing to tell any type of
| | 01:15 | user agent that these items belong together.
Well a list is a perfect structure for that.
| | 01:20 | So what I'm going to do is I'm just
going to go ahead and highlight all of these
| | 01:23 | elements, each one of them, and then
making sure that I'm in my Properties
| | 01:27 | Inspector looking at the HTML properties,
I can see that right here, just like
| | 01:31 | Word or any other Word Processing
program, I have the option of creating an
| | 01:35 | Unordered or an Ordered List.
| | 01:37 | I'm going to go ahead and create an
Ordered List, and as soon as I do that,
| | 01:40 | I notice that I get numbers 1
through 13, and there are all my choices.
| | 01:44 | So again, this is sort of a way of
grouping them together and whether you use an
| | 01:48 | Ordered or Unordered List is largely up to you.
| | 01:51 | Numbered lists are good for when you
need to denote a specific order or a
| | 01:55 | hierarchy of elements, whereas,
Unordered Lists are really good for just
| | 01:59 | grouping related items together.
| | 02:01 | Now there's really not much difference
between the two to be quite honest with you,
| | 02:04 | and I'm going to switch over to Split
Screen view to show you what I mean by that.
| | 02:08 | You'll notice that if we go over to
Split Screen view and we focus on the code
| | 02:12 | of our list, you can see right here we
have an opening ol tag for Ordered List
| | 02:17 | and we have a closing ol tag, and
then each of the elements inside of it is
| | 02:20 | inside an li or that's
what's known as a List Item.
| | 02:24 | So we have all these list
items inside this Ordered List.
| | 02:27 | So how difficult is it to go from
an Ordered List to an Unordered List?
| | 02:30 | Well, obviously we could just simply
click a button down here in the Properties
| | 02:33 | Inspector, but if you're working with a
code it's actually pretty darn easy too.
| | 02:37 | You'll notice for example if I change
this ol to a ul, in both the opening and
| | 02:43 | the closing tags, and I click back
over in Design view, we go from an Ordered
| | 02:47 | List to an Ordered List so
that's how similar they are.
| | 02:50 | They're amazingly similar.
| | 02:51 | Each of these lists will have
options that are specific to the list.
| | 02:55 | For example, if I click back on the
list itself and take this back to being an
| | 03:00 | Ordered List, which is an ol, if I click
on the list itself, you can see that if
| | 03:05 | I click inside one of the list items I
have this little option for list items here,
| | 03:10 | and I can change the entire
list itself, so I can change it to say a
| | 03:15 | Bulleted List or a Numbered List.
| | 03:17 | I could change the Style, so if I don't
want a Number, if I want alphabet small
| | 03:22 | or Roman numerals that sort of thing,
and I can also change where this starts at,
| | 03:26 | so you have a lot of options
that you can change here.
| | 03:28 | Now as soon as you do that what you're
going to notice is what you really doing
| | 03:31 | is setting attributes within the list
itself, and some our list types are going
| | 03:36 | to have more attributes than others.
| | 03:38 | For example, for Unordered Lists, let me
go back to our ul, the only attributes
| | 03:42 | that I have really got here are a type,
which allows me to choose circle disk or
| | 03:47 | square, so if instead of bullets, if I
just want the squares, I can come in and
| | 03:51 | do an unordered list and do squares like that.
| | 03:54 | Now of course, this is really only
going to work for you if you want the list
| | 03:59 | structure itself to be visible.
| | 04:01 | A lot of times through CSS, you're going to
strip out all the default list formatting.
| | 04:05 | You're going to do away with the
margins and padding, you're going to do away
| | 04:07 | with the bullets, you might substitute
your own custom icons through CSS or you
| | 04:12 | might do away with the numbers, just
so, you can sort of group this content
| | 04:15 | together and then style it however you want.
| | 04:17 | So keep in mind that for the most
part what you're looking at when you're
| | 04:21 | working with list is you're looking
at grouping related content together.
| | 04:25 | Okay, so that covers
Ordered List and Unordered List.
| | 04:28 | In our next movie we're going to take
a look at a third type of list that you
| | 04:31 | can create within Dreamweaver and
that would be a Definition List.
| | Collapse this transcript |
| Creating definition lists| 00:00 | In our last movie, we focused on two of
the most common types of lists you will
| | 00:03 | be using for your projects,
the ordered and unordered list.
| | 00:07 | Well, in this movie, I want to talk
about a third type of list and that would be
| | 00:10 | the definition list.
| | 00:11 | Definition list might not be used as
widely as the ordered and unordered lists
| | 00:16 | but they do offer us an extremely powerful
way to organize structure in group content.
| | 00:21 | So I want to talk about not only the
list and how it's structured, but what some
| | 00:24 | of the possible uses for it might be.
| | 00:27 | So I have the alumni.htm page open
here from 04_05 directory and you can see
| | 00:34 | this is a profile of an alumni of
the Roux Academy and in the very middle
| | 00:38 | column here we have an interview. So we have
the question and then we have the response.
| | 00:43 | Now that's content that really should
be grouped together in some way to let
| | 00:48 | people know that there is a relationship.
But there is actually sort of if you will,
| | 00:51 | relationships inside of relationships.
So this question and this answer
| | 00:56 | are related to each other, while all
the rest of the questions and answers are
| | 01:00 | also related to each other and in turn,
they're all related to each other in a
| | 01:04 | way of being part of the same interview.
| | 01:06 | So you can see there is a structure
that's going on there that really doesn't
| | 01:09 | lend itself to say an ordered or an
unordered list, even though we certainly
| | 01:13 | could nest those unordered or order
lists, it still doesn't give you the same
| | 01:16 | type of functionality.
| | 01:18 | So we're going to create
what's known as a definition list.
| | 01:20 | Now the creation of a definition list
visually, if you are not hand coding it,
| | 01:24 | is something that is
really sometimes pretty tricky.
| | 01:27 | So you have to be very, very
careful in how you select your content.
| | 01:30 | Essentially, a definition list
contains three structural elements.
| | 01:34 | There is the dl tag which is sort of
the parent definition list tag, which
| | 01:37 | we will see in just a moment and then you
also have a dt for term, and a dd for definition.
| | 01:43 | So you have got two
items within the list itself.
| | 01:45 | You have a term and you have a definition.
| | 01:47 | The order in which you select items matters.
| | 01:50 | The order in which you select items
controls what's a dt and what is a dd.
| | 01:55 | If you select the list from the bottom up,
the terms are actually the bottom elements.
| | 01:59 | If you select it from the top down,
it's actually the top element.
| | 02:01 | So be really careful about this.
| | 02:02 | I want to make sure I am selecting it
from the top down. I am going to start
| | 02:05 | with the first question, I am just
going to highlight all the way down through
| | 02:09 | the interview, to that
last paragraph right there.
| | 02:12 | So these are all currently
right now, they're just paragraphs.
| | 02:15 | I am going to go up to my Menu and I
might choose Format>List>Definition List.
| | 02:21 | So you will notice there really isn't
an option on the Properties Inspector
| | 02:24 | for Definition Lists.
| | 02:25 | If you want one, you are going to
have to go up to the Menu here or you are
| | 02:27 | going to have to code it by hand.
| | 02:28 | I am going to choose Definition List
and now my formatting is going to change.
| | 02:32 | Now the Formatting is being
controlled through Styles.
| | 02:34 | So using CSS, I essentially just said,
hey dts should look like this, dds
| | 02:40 | should look like this.
| | 02:41 | So you can indent things,
you can italicize things;
| | 02:44 | it's totally up to you.
| | 02:45 | But what I'm really interested
in is the structure of the list.
| | 02:48 | So I have minimized my doc down to
icons and I am going to switch back to the
| | 02:51 | Split screen view, so I can see our new list.
| | 02:54 | Okay, so at the very top we have a dl
or Definition List tag, and below that we
| | 02:58 | have the start of our terms, and our
definitions, and you'll notice the terms
| | 03:03 | obviously are the questions, the
answers are the definitions and these
| | 03:08 | dts and dds are related to each other.
| | 03:10 | So this answer obviously relates to
this particular question and then the
| | 03:15 | grouping of the question and answers
inside the Definition list gives it a
| | 03:19 | larger overall structure.
| | 03:20 | So if I kind of scroll down, I can
see right here, here is the closing
| | 03:25 | definition list, here is
the end of the interview.
| | 03:27 | So it's really nice way of structuring
some of the complex content within your files.
| | 03:31 | I've seen people use it to structure
product details, where they will have the
| | 03:35 | title of the project in the term and
they will have the description of the
| | 03:38 | product in the definition.
| | 03:39 | I have seen it used a lot for
interviews, things like that.
| | 03:42 | So these complex structural elements really
lend themselves well, to a definition list.
| | 03:47 | They are also very easy to Style through CSS.
| | 03:49 | So there are very logical choices to use
when you need to group content together
| | 03:53 | in a complex way that doesn't
necessarily lend itself to a simpler list,
| | 03:58 | like an unordered list or an ordered list.
| | Collapse this transcript |
| Using the Quick Tag Editor| 00:00 | While the Properties Inspector and
the Program menus give you many options
| | 00:04 | when formatting text.
| | 00:05 | There are times when those choices
either won't be available to do what you need
| | 00:09 | to do or when they're simply just not
that efficient as a means of getting done
| | 00:14 | what you need to get done.
| | 00:15 | At that point, you have two options;
| | 00:17 | you can either go into the code and modify it
yourself, or you can use the Quick Tag Editor.
| | 00:23 | In this movie, I want to take a
look at what I call Dreamweaver's most
| | 00:27 | overlooked feature and
that is the Quick Tag Editor.
| | 00:30 | So I have the graphic-design.htm
file open from the 04_06 directory.
| | 00:36 | And as I sort of scroll around this document,
even in this regular Design View,
| | 00:40 | I can tell there are a few
things that look a little off.
| | 00:42 | For example, if I scroll down to Required
Curriculum and I click inside the word
| | 00:47 | Curriculum, I can see that it's
italicized for whatever reason.
| | 00:50 | It's not supposed to be.
| | 00:53 | I notice if I look down here in the Tag
selector that I have this little em tag,
| | 00:57 | this little em tag, and
I really don't want that.
| | 01:01 | So the Quick Tag Editor in the Tag selector,
this little status bar down here,
| | 01:05 | those two work together very, very closely.
| | 01:07 | So one of the quickest and easiest ways
for me to get rid of this particular tag
| | 01:11 | is simply go down to the tag selector,
I can right click the tag and I can tell
| | 01:15 | it to remove the tag.
| | 01:17 | It's going to strip that formatting out
and it's just going to leave that text
| | 01:20 | within the h2 which is kind of what I want.
| | 01:22 | That was pretty easy to do, but if I
look above this, I have got sort of a
| | 01:26 | bigger challenge ahead of me.
| | 01:28 | You will notice that there is a
paragraph just above this headline,
| | 01:31 | that's actually a quote from a former
student. an alumni of Roux Academy.
| | 01:35 | And it's sitting inside of a paragraph
which honestly isn't the most appropriate
| | 01:40 | structural element for that quote.
| | 01:42 | We actually have an element in HTML
called blockquote which is much more
| | 01:47 | appropriate at basically describing
a quote or a citation from somebody.
| | 01:53 | So what I want to do is I want to change
that paragraph element to a blockquote tag.
| | 01:57 | Now in the previous movies when we
needed to change the structural formatting
| | 02:02 | of our page, we have been able to click
inside of an element and then just select
| | 02:05 | this Format pull-down menu.
| | 02:06 | But you will notice that
blockquote is not an option.
| | 02:09 | I'm really very limited in terms of what
this menu gives me and allows me to format.
| | 02:13 | So again here I'm sort of left
having to either go into the code
| | 02:18 | or use the Quick Tag Editor.
| | 02:19 | So, I want to show you how
the Quick Tag Editor works.
| | 02:22 | So I am just going to click
anywhere inside of the paragraph.
| | 02:25 | The quickest and easiest way to get it
to come up is to use a keyboard shortcut.
| | 02:30 | Now on the Mac, you'll hit Cmd+T
and on the PC you are going to hit Ctrl+T.
| | 02:35 | Now based on where you are focused,
you are going to have very dramatic
| | 02:38 | differences in what the Quick Tag
Editor is going to allow you to do.
| | 02:41 | Let me show you what I mean.
| | 02:42 | Notice that I don't have the
paragraph highlighted, I just have clicked
| | 02:44 | inside the paragraph.
| | 02:45 | So if I hit Ctrl+T or Cmd+T,
notice the Quick Tag Editor comes up.
| | 02:49 | It allows me to start writing code, but
notice that the option that it's giving
| | 02:53 | me is to Insert HTML, so it thinks
that I want to insert some code into the
| | 02:58 | section of the page that
I am currently focused on.
| | 03:00 | That's not what I want to do, I
want to modify the existing tag.
| | 03:04 | So in order to do that, I have
to change my focus. All right!
| | 03:06 | So I am not going to do anything here,
I am just going to click off of that.
| | 03:08 | And now what I am going to do, I am
going to go down to the tag selector and
| | 03:12 | using the tag selector down here, I am going
to select the paragraph that I am inside of.
| | 03:16 | You can see now it highlights that text.
| | 03:18 | I want to be very clear about this and
I am going to go over to Split screen
| | 03:21 | view so you can see what I'm talking
about and this is one of the reasons why
| | 03:24 | I'm such an advocate of using the tag selector.
| | 03:27 | There is a huge difference between
highlighting text and selecting a tag.
| | 03:31 | If I click inside this paragraph and I
highlight the actual text itself, you can
| | 03:36 | see in the code, I don't have the
paragraph itself selected, I have the content
| | 03:40 | inside the paragraph
selected, it's big difference.
| | 03:42 | If on the other hand, I click inside
of this and I use the tag selector to
| | 03:46 | select the Paragraph tag, now in
addition to selecting the content, it actually
| | 03:51 | selects the paragraph tag itself, okay.
| | 03:53 | So I am going to switch back into Design view.
| | 03:54 | It's just really important for
you to understand that difference.
| | 03:57 | This and this are two very different things,
even though they look the same visually.
| | 04:03 | So now I have selected the paragraph
with my tag selector and once again
| | 04:06 | I am going to use keyboard shortcut the Ctrl+
or Cmd+T to bring up my tag selector.
| | 04:10 | Now look what it's doing.
| | 04:11 | It's saying okay, you want
to edit this existing tag.
| | 04:14 | So now it thinks because I have the
paragraph selected, it's saying okay,
| | 04:17 | you must want to edit this existing tag. I do.
| | 04:19 | So I am going to remove the p, I am
just going to hit Backspace and now I am
| | 04:22 | going to start typing.
| | 04:23 | Now what's really cool about the tag
selector is it gives you code hinting.
| | 04:27 | So as I type a b and an l, notice it
jumps down to blockquote, I don't have to
| | 04:32 | type the whole thing out.
| | 04:33 | Now all I have to do is hit Return to
select that particular element, hit Enter
| | 04:37 | one more time and now it switches the
element itself from being a paragraph tag
| | 04:42 | to being a blockquote tag.
| | 04:44 | I know it seems like that took a while
because I was talking about it as I did it,
| | 04:47 | but one of the things that is amazing
about the Quick Tag Editor and one,
| | 04:51 | it's well named, is how fast it is.
| | 04:53 | Let me show you this again.
| | 04:54 | This time I am going to show
you in real-time. All right!
| | 04:57 | So I am going to show you exactly
kind of how I would work without
| | 04:59 | actually describing this.
| | 05:00 | I can click inside of tag, use the tag
selector, hit Ctrl+T to bring this up,
| | 05:05 | type in bl and I am done.
| | 05:07 | And it's just that quick and easy,
that's actually faster than we switching over
| | 05:10 | to Code view, highlighting the
opening and closing tags and changing them.
| | 05:14 | It's an incredibly quick way of
editing the actual code itself.
| | 05:19 | So far we've seen that it can help us
insert HTML. We've seen that it can help
| | 05:23 | us modify existing HTML and it
has another very nice use as well.
| | 05:28 | You can see that right now there's no
sort of differential between the quote
| | 05:32 | and the person making the quote.
| | 05:33 | So what I am going to do is I am going to
highlight her name and title which is right here.
| | 05:38 | And once again with that text highlighted,
I am going to hit Ctrl+ or Cmd+T again.
| | 05:43 | Now I see that the Quick Tag Editor is
actually giving me a third option.
| | 05:47 | So instead of inserting HTML or modifying
existing HTML, now it's saying, okay you
| | 05:52 | have a section of content selected, you
probably want to wrap that in a tag.
| | 05:56 | Actually I do want to wrap it inside of a tag.
| | 05:58 | What I want to do is I want to wrap it inside
of a span tag, so I am going to type in span.
| | 06:02 | But this time instead of just hitting
Return once, what I am going to do is
| | 06:05 | after I'm done selecting span, I am
going to hit Space and now I can begin to
| | 06:10 | add attributes to the tags.
| | 06:11 | So I am going to go ahead and do a
class attribute and I am going to do a
| | 06:14 | class attribute of quote.
| | 06:16 | You can see how nice the code
hinting tools inside Dreamweaver are.
| | 06:20 | We are going to take a closer look at
those when we do the chapter on coding,
| | 06:24 | but what I love about that is so it's
quick and easy, it's going to scan through
| | 06:27 | my CSS, it's going to find all the
available classes and it's going to say oh,
| | 06:30 | do you want to do a quote?
| | 06:30 | Yeah, I want to do a quote.
| | 06:32 | Now when I hit Enter or Return, it's
going to go ahead and style that form me
| | 06:35 | as well and if I look at that in Live view,
I can see that now my blockquote is
| | 06:40 | styled exactly the way I wanted to
and there is a nice difference visually
| | 06:44 | between the paragraph and the blockquote.
| | 06:46 | And there is also that difference
structurally that lets other user agents know
| | 06:49 | that hey, this is a quote from
somebody and not just a normal paragraph.
| | 06:54 | You can also use this to make
very minor edits to elements as well.
| | 06:58 | If I look over here in the sidebar,
I can see that my one sort of info bubble
| | 07:02 | over here, info Links is very different from
the other ones in terms of how the heading looks.
| | 07:06 | And if I click inside one of these, I
can see that it's a section with two
| | 07:10 | classes applied to it, it has
connect and info applied to it.
| | 07:13 | However, if I come over here to
Academic Links and click inside that,
| | 07:17 | I can see it's a section and it has a class
applied to it, but it's missing the info class.
| | 07:21 | So once again I can use the tag
selector to select that section.
| | 07:25 | I can hit Ctrl+ or Cmd+T to bring
this up and you will notice that it takes
| | 07:28 | me right inside the classes and I can
just go ahead and hit Space and type in
| | 07:33 | info to apply multiple classes to it
and now if I save the file and preview it
| | 07:38 | in Live view, I can see that this
particular section is looking exactly
| | 07:43 | the same as the other sections as well.
| | 07:44 | And that was a very fast and easy way to do it.
| | 07:47 | Now even if you're like me and you are
somebody that prefers just to kind of
| | 07:50 | hand code your site yourself, you'll
find that the Quick Tag Editor, if you
| | 07:54 | start using it at a good bit, you'll
find that it's actually in many cases
| | 07:57 | faster than coding the change yourself.
| | 08:00 | It's the one visual tool in Dreamweaver
that I consistently use on whatever
| | 08:04 | project I'm working with you know.
| | 08:06 | Just as the name suggests, it's quick,
it allows me full access to the code that
| | 08:10 | I'm working with, it gives me the
freedom to work with my pages' code while
| | 08:13 | seeing the immediate results
here in the visual side of things.
| | 08:16 | And if you adopt using it early on as
you learn Dreamweaver, you'll find that it
| | 08:20 | quickly becomes an
invaluable part of your workflow.
| | Collapse this transcript |
|
|
5. Coding in DreamweaverExploring the Code toolbar | 00:00 | While Dreamweaver has an impressive
array of visual tools designed to help you
| | 00:03 | create websites, what is often overlooked
is that it has an equally impressive
| | 00:07 | set of tools designed to
help you write and edit code.
| | 00:11 | In this chapter, I want to take a closer
look at some of Dreamweaver's coding tools,
| | 00:14 | so that you can author code in Dreamweaver
in the most efficient manner.
| | 00:18 | Now by the way, if you're a visual designer
that's now moving into Web design,
| | 00:22 | you might be tempted to skip
this chapter and focus on the visual
| | 00:26 | tools of Dreamweaver.
| | 00:27 | I know that there's a lot of visual
designers are out there that run
| | 00:30 | at the first mention of the code.
| | 00:32 | I hope that you'll reconsider
this for a couple of reasons.
| | 00:35 | First, if you really want to be a Web designer,
there's simply no getting around
| | 00:39 | needing to learn HTML and CSS, and one
of the best ways of learning them is to
| | 00:44 | actually spend time writing them.
| | 00:45 | Second, Dreamweaver's visual tools are
quite impressive, but there is a limit
| | 00:51 | as to what you can do with them.
| | 00:52 | At some point you're going to want to
do something that you simply can't do
| | 00:55 | visually in Dreamweaver.
| | 00:56 | When that happens, you will have to
turn the writing code to get it done.
| | 01:00 | Fortunately, Dreamweaver makes
writing code just as quick and easy
| | 01:03 | as it does everything else.
| | 01:04 | I want to first introduce you to the
coding environment in Dreamweaver
| | 01:08 | by showing off the Code toolbar.
| | 01:10 | To do that, we're going to use a sample
file here, I've got the index.htm file
| | 01:13 | opened from the 05_01 folder, and you
can see that I've got just the Code view.
| | 01:19 | So I'm not doing Split view this time,
just Code view, opened up and I've also
| | 01:22 | minimized the Properties Inspector, so
that we have more sort of vertical space
| | 01:26 | so I can show off the coding toolbar.
| | 01:28 | Now the Code toolbar is found just to
the left of your line numbers, right over
| | 01:32 | here and if you hover over at some of
these icons, you'll get a little tooltip
| | 01:37 | that tells you exactly what that
icon does and what its functionality is.
| | 01:41 | Now throughout this chapter, we're going
to be experimenting with a lot of those
| | 01:45 | different features of the coding toolbar.
| | 01:47 | So I really just want to sort of hit
some of the highlights of them so you have
| | 01:50 | an idea as to how the Code toolbar works.
| | 01:53 | Okay, so I'm just going to scroll down
in my code a little bit and one of the
| | 01:57 | first things that you'll notice when
you start writing code is that it can
| | 02:00 | sometimes get a little tedious just to find
what it is that you're looking for.
| | 02:05 | You know if you're working on a very
specific area and you need to go back to
| | 02:08 | the top for something and then scroll
back down again, it can become really
| | 02:12 | difficult to sort of figure out where you are.
| | 02:13 | Let me give you an example.
| | 02:14 | Let's say I was going to go all the way
down to the footer and just work on the footer.
| | 02:18 | Well, it would help me if I could
just isolate that footer in terms of just
| | 02:22 | looking at the footer itself. That's
actually really easy to do using the coding toolbar.
| | 02:27 | So if I click anywhere inside this
footer down here at the bottom, I can go
| | 02:31 | down to my tag selector and I can click the
footer right there to select all of that code.
| | 02:36 | Now as soon as I do that, I get
these little handles that show up.
| | 02:38 | Now these aren't officially part of
the Code toolbar, but they have the same
| | 02:41 | type of functionality, they allow me to
collapse a series of code down and then
| | 02:44 | expand that later on.
| | 02:45 | So you can sort of collapse code to
hide it and then expand it later on
| | 02:50 | when you need to work on it.
| | 02:50 | Well, I mentioned wanting to isolate say
just the footer and work on this, while
| | 02:55 | the rest of the code is sort
of minimized like that, right?
| | 02:57 | Well, if I hover over the Code toolbar,
I have a couple of collapsing options,
| | 03:01 | I have a Collapse Selection
and I have Collapse Full Tag.
| | 03:05 | They're very similar in
terms of their functionality.
| | 03:07 | If I click on them, you'll notice that
it's doing exactly the same things as
| | 03:11 | lines were doing for me before, but
this one gives me some options here.
| | 03:15 | If for example, let me expand those
back out and you can see that right here
| | 03:18 | this little icon will go
ahead and expand this back out.
| | 03:20 | If I hold down the Alt key,
that'd be the Opt key on the Mac,
| | 03:24 | and click that icon again, notice that that
collapses everything except for the footer.
| | 03:28 | So now I know that if I'm working on code
and writing code, I've isolated the footer,
| | 03:33 | I'm working on just the footer itself,
and it helps sort of shorten the amount
| | 03:36 | of code that I need to scroll through in
order to find something which is really nice.
| | 03:41 | Now anytime I want to expand something
back out again, I have a couple
| | 03:44 | of choices for doing that.
| | 03:45 | One, I can click on the collapse section
and click the plus (+) symbol beside it
| | 03:49 | or I can come more right over here to
the coding toolbar, click Expand All and
| | 03:54 | that's going to expand that down again.
| | 03:55 | So you can see the coding toolbar
makes a lot of the functionality within
| | 04:00 | Dreamweaver very quick and very easy.
| | 04:02 | Just to give you an overview of the
different sections of the coding toolbar,
| | 04:05 | we have our collapsible icons here
that allow us to isolate code sections.
| | 04:09 | And we have one of my favorite ones
right here which is Select Parent Tag.
| | 04:12 | If you click inside of a very complex
structure such as this unordered list
| | 04:16 | for example, if I click that, it's going to
select the tag that I'm inside of.
| | 04:20 | If I click it again, it's going to select
that parent tag, if I click it again,
| | 04:24 | it's going to select the parent tag that
that's inside of and I can keep going all
| | 04:28 | the way until I get to the body tag.
| | 04:29 | So if I want to know exactly what
section an element is inside of,
| | 04:33 | it's very easy for me to find that by simply
clicking there and then clicking up until
| | 04:37 | I get the appropriate section.
| | 04:39 | Now I have that code isolated and
I can begin to work with it or
| | 04:42 | change that in some way as well.
| | 04:43 | We have a section just below that
that helps us spot errors in our code.
| | 04:47 | I can turn Line Numbers on and off,
Ican Highlight Invalid Code, of course
| | 04:51 | I don't have any invalid code, so you're
not going to see anything there.
| | 04:54 | But as you're authoring code, if that's turned
on and you write something that is invalid,
| | 04:57 | you'll get a nice little underline.
| | 04:59 | It's almost like Word, when you
misspell something, so that's pretty cool.
| | 05:02 | You also have Syntax Error Alerts, you
have the ability to apply comments, which
| | 05:06 | we're going to play around with a little
bit later on, manage files like CSS.
| | 05:11 | We have the ability to indent code and
change the indentation of our code and
| | 05:15 | then we have this Format Source Code that
we're going to be doing a little bit
| | 05:18 | later on in a title as well.
| | 05:20 | So that's a quick
overview of the coding toolbar.
| | 05:22 | Once again we're going to use a lot of
this functionality throughout the chapter.
| | 05:24 | So it's certainly not the last
time that we're going to see it.
| | 05:27 | So I want to encourage you to go over
the coding toolbar, click on some of these
| | 05:29 | icons, hover over them, see what they do,
experiment with them, and by doing so
| | 05:33 | you're not only going to get
comfortable with the coding toolbar,
| | 05:37 | you're also going to get a lot more comfortable
within Dreamweaver's coding environment.
| | Collapse this transcript |
| Setting code preferences| 00:00 | Just like any other task you'll perform
in Dreamweaver, you'll have your own
| | 00:03 | personal preferences in terms of how
you like to write and edit your code.
| | 00:07 | Thankfully, Dreamweaver has a multitude
of preferences that you can set to make
| | 00:11 | sure that your code is created
exactly the way you want.
| | 00:15 | So to take a look at those preferences
we are going to go up to our Dreamweaver
| | 00:18 | Preferences which again, on the PC you'll
find under Edit>Preferences, on the Mac
| | 00:22 | you'll find it under Dreamweaver>
Preferences, and we are going to start by
| | 00:25 | looking at the Code Coloring category
over here on the left-hand side.
| | 00:29 | Now when I select that, I can see that
I have some basic coloring scheme options,
| | 00:33 | like default background.
| | 00:35 | So for example I could change that to
black and when I click OK, I notice that
| | 00:39 | now my coding window is black.
| | 00:41 | So if you have a specific color
coding scheme that you're used to working
| | 00:45 | with in maybe a different code editor,
you can go ahead and mimic that by
| | 00:49 | changing those preferences.
| | 00:50 | Now I want to bring those back up again
and I want to point out something that
| | 00:53 | is really important here.
| | 00:54 | You'll notice that there is no button for
me to click on to go back to the default.
| | 00:59 | So if you change those and you sort of
forget you know like, oh I didn't
| | 01:03 | mean to do that, to go back, you are
just going to have to remember or you
| | 01:06 | going to have to throw your Preferences away
and start all over again which is hardly fun.
| | 01:10 | So be very careful, you might want to
even write those down the first couple
| | 01:12 | of times you edit that.
| | 01:13 | Now, in addition to sort of these default
options that we have here for just the
| | 01:17 | coding window itself, we also have the
ability to edit the Coloring Scheme of
| | 01:21 | any specific type of document. In this
case of course we are focusing on HTML.
| | 01:25 | If I click the Edit Coloring Scheme,
you can see that I have all sorts
| | 01:30 | of different options.
| | 01:31 | If you know what I am going to do, hang
on just one second here. I need to click
| | 01:33 | OK again to set that back to white and
I'll bring my Preferences back up.
| | 01:37 | That way when we look at the Coloring Scheme,
we are seeing an accurate preview of
| | 01:41 | the way our code is going to look.
| | 01:42 | So, right down here in the Preview
section, if I scroll through this,
| | 01:46 | I can see all of the different elements of
an HTML file and sort of how they're going
| | 01:50 | to be coded in terms of their color.
| | 01:52 | Now you might say to yourself, well yeah,
that's not a big deal. What does it matter?
| | 01:55 | It really does matter.
| | 01:57 | Let me show you what I mean.
| | 01:58 | So if you want to change a color of a
specific element or attribute, one way
| | 02:02 | to do that is to look for the Styles
for list and find it, but if you're
| | 02:07 | new to HTML or maybe you don't know what
exactly something is called, you can simply
| | 02:11 | click inside the Preview and
it will jump to that value.
| | 02:14 | So this for example is an HTML
attribute value and currently
| | 02:18 | the color for those guys is blue.
| | 02:19 | Well, I can change that color if I want to,
but I need to be very, very careful
| | 02:23 | about that and let me show you why.
| | 02:24 | Again, I am just going to click OK, I am
not going to change it and click OK again.
| | 02:28 | The Code Coloring in Dreamweaver
really does matter.
| | 02:31 | Let's say that I'm working on my code
and I forget to close one of the quotation
| | 02:35 | marks for this particular attribute.
As soon as I hit Backspace here to
| | 02:39 | get rid of it, watch what happens
to the code that comes after it.
| | 02:42 | So what's happening is, all this code
after it is seen as still belonging to
| | 02:47 | this particular attribute,
and it's going to keep going until
| | 02:50 | it runs into another quotation mark.
| | 02:52 | That is a syntax error and through the
use of Code Coloring, I can pick up
| | 02:57 | on that and find that really easily.
| | 02:59 | And sometimes it's a little
bit more noticeable than others.
| | 03:01 | Notice if I do here for example, that
entire section of code now turns into blue.
| | 03:06 | So that's sort of a visual clue to me,
oh something is wrong with this code.
| | 03:10 | Then I could scroll back up, see when my
code sort of returns back to its normal
| | 03:15 | Code Coloring and say, oh okay, well
it's probably something to do with an
| | 03:18 | attribute because it's using the color blue.
| | 03:20 | So once you're used to the Code Coloring
inside Dreamweaver, you'll sort of
| | 03:24 | instantly pick up on what's wrong
with your code and where it's wrong.
| | 03:27 | So pay close attention to the Code Coloring
that Dreamweaver does for the code,
| | 03:32 | and only change it if you have a very
specific reason for doing that. All right!
| | 03:35 | I am going to go back up to my Preferences
and I am going to click on Code Formatting.
| | 03:40 | Now I am not going to go through every
single option here, if you want to kind
| | 03:43 | of play around with this, feel free.
| | 03:44 | But essentially, what this does is it
handles how the code is formatted within
| | 03:48 | the window, the type of indentations
that you are using, whether you are using
| | 03:52 | uppercase or lowercase letters for your tags
and attributes, all sorts of things like that.
| | 03:57 | We also have Advanced Formatting
options for things like CSS, where you can
| | 04:01 | go ahead and format your CSS code.
| | 04:03 | Now we are going to take a closer look at
these options towards the end of this chapter.
| | 04:06 | We also have a wonderful
feature called Code Hinting.
| | 04:09 | When you're writing code inside Dreamweaver,
Dreamweaver can help you complete
| | 04:12 | your code by offering you a hint,
what it thinks you want to do.
| | 04:15 | Whether you are applying a class attribute
or finishing an h1 tag, doesn't
| | 04:19 | really matter, Code Hinting will come up
and allow you to rapidly complete that.
| | 04:22 | Again you can change some of the preferences
here, but the default preferences
| | 04:26 | are basically to turn all
the stuff on and enable it.
| | 04:28 | So there's no real reason to change these
preferences again unless you really want to.
| | 04:32 | Now there is another cool little thing
that's sort of hidden here that I want
| | 04:35 | to show you guys before I move on.
| | 04:37 | If you notice right down here I've
got a little link to what's called
| | 04:40 | the Tag library editor.
| | 04:42 | All the code hinting hints that
we get, come from this library.
| | 04:45 | And if I open this up, you can see that
I get this nice little panel here with
| | 04:49 | all the available HTML tags.
| | 04:51 | Now this is actually a pretty good
reference and a pretty good learning tool.
| | 04:54 | For example I could open up the anchor
tag here and I could see all of the
| | 04:58 | different attributes that are available
to me and there are parts of the
| | 05:01 | specification for the anchor tag.
| | 05:03 | Certainly the specifications are
undergoing a lot of changes right now.
| | 05:05 | What if HTML5 adds a tag?
| | 05:07 | Well, all of a sudden, Dreamweaver
no longer supports that specific tag.
| | 05:11 | So what if for example the group
that's editing the HTML5 specification
| | 05:15 | right now came up with a speech tag?
| | 05:16 | Well, all I would need to do is go right
up here to Tags, click on this and tell
| | 05:20 | it that I want to create a New Tag.
| | 05:22 | And when I create this new tag, I can
come in and say okay I am going to place
| | 05:26 | this in the HTML library, I am going
to call it the speech tag and I want
| | 05:30 | to make sure that it has an
opening and closing tag.
| | 05:32 | Now as soon as I do that, you'll notice
that it adds it right here to the Tag Library.
| | 05:36 | I can even go up and add Attributes
to that particular tag if I want to.
| | 05:40 | So I could do you know voice or
something like that and now inside that tag,
| | 05:45 | I've got those attributes.
| | 05:47 | So that's really cool.
| | 05:48 | You can create your own Tag Library based
on that and Dreamweaver will offer
| | 05:51 | coding support for that particular tag
and enable hints for that tag as well.
| | 05:56 | Now if you're really a power user,
you can also import what's known as a
| | 06:00 | Document Type Definition Schema, DTTSchema.
| | 06:03 | For example if you have a custom
XML library, you can import that and
| | 06:07 | Dreamweaver will go ahead and pick all
the objects out of that and enable
| | 06:10 | Code Hinting for your custom library.
| | 06:11 | It's an amazingly powerful feature
that few people take advantage of.
| | 06:15 | So I just wanted to let you guys know that
that is available in part of Dreamweaver.
| | 06:19 | All right!
| | 06:19 | The final thing I am going to show
you guys before we move on is the
| | 06:21 | Code Rewriting preference.
| | 06:23 | Now, again this is not something that
you are going to see at all when you're
| | 06:26 | actually authoring the code yourself.
| | 06:29 | What you see here is the rules that
Dreamweaver is going to follow when it's
| | 06:33 | copying and pasting code say from another
application, or the visual tools that
| | 06:37 | you are going to be using in the Design
view that place objects on the page.
| | 06:41 | This controls how the underlying
code behind those are written.
| | 06:44 | So if you're not happy with the way
Dreamweaver is creating your code,
| | 06:47 | if you say want to fix any invalidly nested
tags, or if you want to make sure that your
| | 06:52 | special characters are encoded, you
can go ahead and do that right here
| | 06:56 | by setting those preferences.
| | 06:57 | Okay, I am just going to click OK,
I know I didn't really change any of
| | 07:00 | my Preferences, but to be honest with you,
the default position of the Preferences
| | 07:03 | in Dreamweaver are actually pretty good.
| | 07:06 | But Dreamweaver does have a ton of
Preferences that can control how your
| | 07:10 | code is written and displayed and changing
those Preferences can allow you to work
| | 07:14 | exactly how you like to work and in
the long run, that's going to make
| | 07:18 | you more productive.
| | Collapse this transcript |
| Using code hints | 00:00 | There's just no way to sugarcoat it.
| | 00:01 | Writing code by hand can be tedious.
| | 00:04 | Also, if you're just starting out in
terms of learning a language, it can be
| | 00:07 | really easy to forget the exact tag
you're looking for or remember all the
| | 00:11 | options that you have within a specific tag.
| | 00:13 | That is why I love Dreamweaver's
code hinting features.
| | 00:16 | Code hinting helps you speed up writing
your code and also gives you an idea of
| | 00:20 | the tags and options available to you.
| | 00:22 | So I want to demonstrate that by
working in our Index file which you
| | 00:26 | can find in the 05_03 folder.
| | 00:29 | All right, I'm going to scroll down
into my code and as if by magic,
| | 00:32 | we have a little hole right there in our
unordered list within the navigation.
| | 00:36 | I have to 'fess up. I did that so that we can
show off some of the code hinting features.
| | 00:41 | So the structure of these links, we
have the text of the actual link itself
| | 00:44 | which is surrounded by an a tag;
| | 00:46 | a stands for anchor and what that
has do with links, I don't know.
| | 00:50 | But then we also have an href
attribute that points to the page that we're
| | 00:54 | linking to and a title that lets people
know a little bit more about that link.
| | 00:58 | That is in turn, surrounded by a list
item tag, and remember, the list items are
| | 01:02 | grouping all of these links in one
unordered list to let user agents know that
| | 01:07 | hey, these links all relate to each other.
| | 01:09 | Okay, so we want to finish the last link in the
page which is going to go to the About Us page.
| | 01:15 | And for me to do that I'm just going to
start hand-coding and I'm going to start
| | 01:18 | off by coding the list item.
| | 01:20 | And I'm going to start off by opening
up one of my angle brackets here and
| | 01:23 | I notice that I get a full list of all of
the HTML tags available to me and it's
| | 01:27 | pulling that from the Tag library
that we talked about in our last movie.
| | 01:30 | Now if I scroll through this list,
I don't even have to type again.
| | 01:34 | I can select exactly the tag I'm looking
for, hit Return, and it'll finish it for me.
| | 01:38 | Now if you do want to type though,
notice that if I type-in an l,
| | 01:42 | it jumps down into the ls and if type-in an i,
it jumps right down to list item.
| | 01:45 | Now at this point I could hit Return
and you really wouldn't see much happening
| | 01:49 | because this is a list item
and it only has two letters.
| | 01:51 | But if it was something really long
like block quote, it would finish typing it
| | 01:55 | out for me, which is nice.
| | 01:56 | So I'm just going to hit Return or
Enter and you can see my cursor is just
| | 01:59 | sitting right there after the tag is finished.
| | 02:00 | Now if I hit a Space, Dreamweaver
assumes that I want an attribute for this tag
| | 02:02 | and it gives me a list of all of the
available attributes for the list item tag.
| | 02:03 | Now in this case I don't need an
attribute, so I'm just going to hit
| | 02:04 | Backspace and then use my closing
angle brackets there to close out my
| | 02:06 | initial opening list item tag.
| | 02:06 | Now I like building the structure of
things out as I go, so instead of opening
| | 02:07 | up my link here, I'm going to go ahead
and close my list item out and I can do
| | 02:09 | that very simply and easily by opening up
another angle bracket and hitting
| | 02:10 | the Forward Slash (/), and notice that
it'll go ahead and complete the rest of
| | 02:32 | the closing tag for me.
| | 02:33 | So that speeds up that process as well.
| | 02:35 | Now in terms of how these closing tags
are created, that's entirely up to you.
| | 02:38 | If I go back to my Preferences
really quickly, I can see that in the
| | 02:42 | code hinting Preferences, I have some
options about closing tags being completed.
| | 02:46 | I like the default option, which is after
typing in the start of the closing tag.
| | 02:50 | But some people prefer this that the
moment they finish typing their opening tag,
| | 02:54 | go ahead and create the closing tag.
| | 02:56 | Now I don't like that because it sort
of leaves you here outside of the tag
| | 03:01 | and now you've got to click
back in it to keep writing.
| | 03:02 | So I'm not a huge fan of that method,
but it's all based on personal preference.
| | 03:06 | So you could try out both of them
and see which method you like better.
| | 03:09 | Now code hinting can do a lot more for
us than just help us complete our tags.
| | 03:13 | Notice for example that when we start
doing our link, I'm going to click inside
| | 03:16 | the list items and then I'm going
to go ahead and start an anchor tag.
| | 03:19 | As soon as we start our anchor tag,
if I hit Space to start doing the
| | 03:24 | attributes that I need here,
| | 03:24 | again, I get a nice list of all the
attributes of the link tag, and if I hit H,
| | 03:28 | it's going to jump down to the list
of hs and what I'm looking for is href.
| | 03:33 | href points out to an external resource,
which in this case is going to be the page.
| | 03:37 | Now you'll also notice something pretty
interesting about the href attribute as
| | 03:41 | compared to some of the other attributes.
| | 03:42 | It has a nice little icon beside it that
looks like a link and it's because it is.
| | 03:46 | It's linking out to an external resource.
| | 03:48 | Now that's more than just a
visual cue as to what this does.
| | 03:51 | That actually has some functionality to it.
| | 03:53 | Let me show you what I mean.
| | 03:54 | When I hit Return, what it's going to do
for me is it's not only going to finish
| | 03:57 | out the attribute, but it's also going
to type-in the Equals sign (=)
| | 04:01 | and it's going to place my cursor directly
inside the Quotation Marks, meaning I could
| | 04:05 | start typing the path to the
page that I wanted to link to.
| | 04:08 | But what if I don't
remember the path to the page?
| | 04:10 | What if I know the page that I want,
but I don't have the directory structure
| | 04:14 | memorized or maybe it's a really long directory
structure that I don't feel like typing out?
| | 04:19 | Well, you'll notice that the code hinting
tooltip hasn't entirely gone away.
| | 04:22 | I've got this little Browse icon up
there, and if I hit Return before
| | 04:27 | I start typing, watch what it does.
| | 04:29 | It says, oh, you want to link out to a page.
| | 04:31 | Well, who do you want to link out to?
| | 04:33 | So I'm going to browse into the about
folder, find the about.htm, highlight
| | 04:38 | that, click OK, and it's going to
finish that out and resolve that path for me.
| | 04:42 | That's a huge timesaver.
| | 04:44 | Now the next thing you need to do is do
another space and then I'm going to title.
| | 04:47 | So in this case, I'll just type-in
ti, it'll get down to title.
| | 04:50 | Once again, hitting Return finishes
that attribute for me, places me within the
| | 04:54 | Quotation Marks, and now I can just type -in
About Us and there's my attribute.
| | 04:59 | Now I'm going to finish my opening link tag,
then I'm going to type-in the word
| | 05:03 | About, and then again, using our
code hinting I'll close the link tag.
| | 05:08 | Now because I was explaining it there, it
took a little bit of time to complete that.
| | 05:12 | But if you were just going through and
using the code hinting features that
| | 05:16 | I just showed you, you will very quickly
and easily write the rest of this code
| | 05:20 | without having to type out the whole line.
| | 05:22 | It's all about saving time.
| | 05:23 | Now there is a lot more that's involved in terms
of what code hinting can do for you as well.
| | 05:28 | Before we move on, I want to show
off a little feature for you in CSS
| | 05:31 | in terms of code hinting.
| | 05:32 | So I'm going to save this page
and switch over to the main.css.
| | 05:36 | Now what I want to do is I want
to scroll down to about Line 141.
| | 05:40 | At Line 141, you'll find the
class selector for the orange class.
| | 05:46 | so this is going to style any element
that has the class of orange applied to it
| | 05:50 | or the class attribute that equals orange.
| | 05:53 | Currently right now, all it's doing is
doing a text-transform, it's transforming
| | 05:56 | all the text to uppercase
and it's making the text bold.
| | 05:59 | What I want to do is I want to set a
color on it and I also want to give it
| | 06:02 | a background graphic.
| | 06:03 | Code hinting is going to
help me do both of those things.
| | 06:06 | So if I go to right here
where there is a Semicolon (;)
| | 06:08 | right after the property of font-weight
equals bold, I'm going to hit Return,
| | 06:12 | again, code hinting pops up automatically.
| | 06:14 | So if you don't know CSS, now you have a
list of all the properties that you can
| | 06:18 | set for this, and if you have an idea in
terms of what you're wanting to do, you
| | 06:22 | can choose it from this list of properties.
| | 06:24 | Well, I want to set the color, so I'm
just going to type-in co, it's going to
| | 06:27 | jump down to color, and I'm going to hit Enter.
| | 06:30 | Now at this point, you'll notice that
again, one of the values here is color and
| | 06:34 | it has this little Color Palette beside it.
| | 06:36 | As soon as I begin typing something,
for example, let's say I want to use RGB,
| | 06:40 | as soon as I type-in rgb, I get this
nice little Color Picker that comes up,
| | 06:45 | which is really cool.
| | 06:46 | So now visually, I can pick a color,
I can even go into this option here to
| | 06:51 | change the color formatting, whether I
want to use rgba which is going to give
| | 06:55 | me alpha transparency or
just the rgb value itself.
| | 06:58 | I can change those preferences on the fly
as I code which is really, really cool.
| | 07:02 | So I could go ahead and choose an
orange color here for this particular
| | 07:06 | selector, then hit Semicolon (;)
| | 07:08 | to close that out. And then if I want to do a
background graphic, watch what happens here.
| | 07:12 | I can go in and type backg, for
background, hit Return or Enter,
| | 07:17 | it's going to take me to my attributes.
| | 07:18 | And if I just type-in a u,
again, URL is going to come up.
| | 07:21 | And just like we had in the HTML code
hinting, URL has a little link icon beside
| | 07:25 | it that tells me that this is clickable,
and if I just hit Return, it's going to
| | 07:29 | allow me to browse out for
the image that I'm looking for.
| | 07:31 | So I can just go out, browse out to
images, I'm going to go down until
| | 07:35 | I find this sort of diagonal pattern right here,
click OK, and then type-in the Semicolon (;)
| | 07:40 | to save that.
| | 07:41 | So if I save my file and preview this
in the Browser, you can see the work that
| | 07:44 | we've done, our about link is now up
there, and notice this text that has the
| | 07:48 | orange class applied to it not only is
orange which is what we're going for,
| | 07:52 | but has that diagonal
background pattern to it as well.
| | 07:54 | And writing the code for that was made a
lot easier through the use of code hinting.
| | 07:58 | So it doesn't matter whether you're
writing HTML or CSS, there's simply not a
| | 08:02 | good reason not to take advantage of code hints.
| | 08:05 | They just make you more productive.
| | Collapse this transcript |
| Wrapping tags| 00:00 | Occasionally when writing code you'll
need to take existing content,
| | 00:04 | and wrap it inside of another parent tag.
| | 00:06 | Well, this is usually fairly simple.
| | 00:08 | It's sometimes rather difficult to do
manually and still keep track of exactly
| | 00:12 | where the proper position for
opening and closing tags needs to be.
| | 00:16 | Let's take a look at how Dreamweaver
can help us out when we need to wrap
| | 00:19 | content in our tags.
| | 00:20 | So I've the Index file open this time
from the 05_04 folder, and the first thing
| | 00:25 | I'm going to do is scroll
down to about line number 51.
| | 00:29 | Down in this area we have an unordered
list that has a calendar of events.
| | 00:34 | Now you'll notice that the structure of
the final list item is little different
| | 00:38 | than these, in the fact that it lacks
the span tag that identifies those numbers
| | 00:43 | as belonging to the date class,
so that's what we need to add.
| | 00:47 | Well, we could go ahead and do it the
hard way, which would be to go ahead and
| | 00:52 | put the opening span tag on this side,
and then go back over on the side of the
| | 00:56 | day and close it, but again, that's
going to take a little bit longer.
| | 00:59 | I'd rather just wrap in the tag
and have Dreamweaver do it for me.
| | 01:02 | So what I'm going to do is just highlight
just the date number itself, 5/21 and
| | 01:07 | then going over the Coding Toolbar,
I see what looks to be a pencil on a tag
| | 01:12 | and that is exactly the icon.
| | 01:13 | That's called Wrap Tag.
| | 01:14 | It's actually the Tag Editor icon, but
when you have code highlighted like this,
| | 01:18 | any content highlighted it changes its
functionality, when I hover over it,
| | 01:22 | it's going to say Wrap Tag.
| | 01:23 | As soon as I click on that I get a
little tool tip that comes up, this is okay.
| | 01:27 | What do you want to wrap this in?
| | 01:28 | Well, I want to wrap it in a span tag
like everybody else, but I also want an
| | 01:32 | attribute applied to that,
and that's the class attribute.
| | 01:34 | So I'm going to hit space and you'll
notice that all of my code hinting comes
| | 01:38 | right along with me right here in this tool tip.
| | 01:40 | So this is awesome.
| | 01:42 | I can just go ahead and do class.
| | 01:43 | I can type in date, but I don't even need
to type in date, Dreamweaver does it for me.
| | 01:47 | Now how does it know?
| | 01:48 | Well, what it's doing is, it's going
out to my styles, and it's finding all the
| | 01:52 | IDs and all of the classes that are
defined within my external stylesheet.
| | 01:57 | It's going to make those available to me,
whenever I do an ID attribute or a class attribute.
| | 02:01 | So then I can just pick them out from a list.
| | 02:03 | Now if I'm typing my code from scratch,
and I don't have any styles applied,
| | 02:07 | then each time I'm going to
need to go ahead and type that in.
| | 02:09 | So this is a really good reason
where you should go in and just sort of
| | 02:12 | define some classes that you know
you're going to need within your CSS file,
| | 02:16 | because this is going to give you
quick and easy access when applying those
| | 02:19 | classes within your code.
| | 02:20 | All right to finish this up, all I've
to do is hit Return to choose date,
| | 02:24 | and hit Return one more time.
| | 02:25 | You'll notice that the opening and
closing tag are taken care of for me.
| | 02:28 | It's going to wrap that content
in the tag, very simple, very easy.
| | 02:32 | Now that is simple, but it gets a
little bit more difficult when
| | 02:36 | your content becomes more complex.
| | 02:37 | Let me show you what I mean.
| | 02:38 | If I scroll down towards the bottom of
the page, down towards the footer,
| | 02:42 | I'm going to go down to about line 91 or so.
| | 02:44 | I think I went a little too far, yeah I did.
| | 02:46 | You can see that the footer basically
has several sections of links inside of it,
| | 02:51 | and within those individual sections,
there are individual columns, so that
| | 02:55 | links can sort of sit right side by
side each other, and the way that
| | 02:59 | that is structured, each of the
columns is inside of a div tag.
| | 03:02 | So I've separate unordered list that
are grouping these links together,
| | 03:05 | and then they're incased within a div tag which
is then further incased inside this section.
| | 03:10 | Okay, so sometimes you can sort of
forget some of that content,
| | 03:14 | and in this case, we don't have the
div tag for column 1,
| | 03:19 | so I need to surround this unordered list.
| | 03:20 | Well, that can sometimes
be very difficult to do.
| | 03:22 | I can't tell you how many times
I've seen people do this, watch this.
| | 03:24 | Did you see what I did wrong?
| | 03:27 | Notice I've the very end of the closing
angle bracket (>) there, left unselected.
| | 03:31 | So now if I was to wrap this, or
modify this code in anyway, I'd basically
| | 03:36 | be messing my code up.
| | 03:37 | So I'm going to use the
Coding Toolbar to help me out here.
| | 03:40 | I'm going to click inside any one of
these links, then I'm going to use this
| | 03:42 | little icon right here which
is the Select Parent Tag icon.
| | 03:46 | I can click on that once and twice, and
as soon as I click on it twice,
| | 03:52 | I get to the unordered list and it
wraps all the way around that.
| | 03:54 | Now I could go right over here again to
the coding toolbar, that was pretty easy
| | 03:57 | and click the Wrap Tag icon.
| | 03:59 | But there is a second way for you to
quickly and easily wrap tags and that is
| | 04:04 | the exact same method that we used
earlier in the title, when we were talking
| | 04:08 | about using the Quick Tag Editor in Design view.
| | 04:11 | The Quick Tag Editor works here in
Code view as well, which makes it
| | 04:15 | even more of an amazing tool.
| | 04:16 | So if I do my keyboard shortcut,
which if you remember it,
| | 04:20 | it's Ctrl+ or Cmd+T based upon your platform.
| | 04:22 | So I'm just going to of Ctrl+T. As soon
as I do that, notice that the tool tip
| | 04:26 | comes up for the Quick Tag Editor.
| | 04:28 | Now I can say div class="col1".
Hit Return twice.
| | 04:35 | It's going to finish that for me and
wrap that and now if I save this and
| | 04:38 | preview this in my browser, I can see
that my column1 is showing up properly.
| | 04:45 | I can also see in my account of events,
last one is styled properly and is being
| | 04:50 | represented as a date as well.
| | 04:52 | So there we go, taking advantage of
Dreamweavers' ability to wrap content
| | 04:56 | in a tag with a single shortcut.
| | 04:58 | Not only is it going to speed up your
coding, but it's also going to help you
| | 05:00 | reduce errors, by making sure that
the opening and closing tags are in
| | 05:04 | exactly the right location.
| | Collapse this transcript |
| Adding comments | 00:00 | Depending upon whether you're just
reminding yourself of what a specific
| | 00:03 | element or property does,
| | 00:05 | communicating with your team or
performing functional conditional code,
| | 00:09 | commenting your code is an
important part of offering it.
| | 00:12 | As you would imagine Dreamweaver makes it
extremely easy to add comments to your code.
| | 00:16 | So, again I'm just in the Index file
here and what I'm going to do is scroll
| | 00:21 | down to about line 15 I actually don't
even scroll, it's right there I can see it.
| | 00:24 | All right, so I want to add a comment.
So you might be thinking yourself
| | 00:28 | What's a comment?
| | 00:29 | Take a look at this code right up here
in gray all that code is commented out.
| | 00:34 | Commented code is basically code
that you'll either turning off to test
| | 00:38 | functionality and see if maybe that
was the thing causing the problem or
| | 00:42 | it's code that you're just basically
giving yourself a message or giving
| | 00:45 | somebody else a message, let me show you.
| | 00:47 | So if I go right above the header
class I could do something like
| | 00:50 | I could type-in header content starts here.
| | 00:54 | People that create templates and
a lot of like Drupal and Joomla!
| | 00:57 | templates will often comment those
little sections to let them know that hey
| | 01:01 | this is where this snippet of
code goes or this is what this is.
| | 01:05 | So if I highlight this, I can come over
to my Coding Toolbar and I've got two
| | 01:09 | great little tools right over here; one
is to add a comment and the other one is
| | 01:12 | to strip the comment out if I no longer need it.
| | 01:15 | So, if I click on the Apply Comment,
I notice that I have several different types.
| | 01:19 | And based upon the type of scripting
language that you're using, you're going
| | 01:23 | to use one or the other.
| | 01:24 | Now obviously we're in HTML, so I'm
going to choose Apply HTML Comment.
| | 01:29 | You can see that now the text is wrapped
in an opening comment tag and a closing
| | 01:33 | comment tag. You also notice that the
default code coloring inside Dreamweaver
| | 01:38 | is to make comments gray, and it sort of
talks about there are sort of nature of
| | 01:41 | being sort of in the background.
They're not going to actually render.
| | 01:44 | You're not going to see that code within the Browser.
| | 01:47 | Now if I scroll down right to where the
header ends, I could also come in here
| | 01:51 | and add another little line.
| | 01:53 | Now last time I typed in the code and
then I wrapped it with a comment,
| | 01:56 | but I could actually start out with the
comment. I can come right over here to my
| | 01:59 | Coding Toolbar, apply an HTML comment.
It's going to place my cursor right in
| | 02:03 | the middle of it and I could type something
like header content ends here, here we go.
| | 02:09 | And now for anybody visiting my page or
if I'm working within a team environment
| | 02:13 | and the team would know very quickly
and easily sort of where the breaks for
| | 02:16 | this content is; Okay the header
starts here, it ends here, if something is
| | 02:20 | going to be in the header it
needs to be within this section.
| | 02:22 | So, obviously it's a nice way to leave
yourself notes or work within a team or
| | 02:26 | even let people that are coming in and
looking at your code later on learn a
| | 02:29 | little bit from that.
| | 02:31 | If you go out to the Web and you find a
page that you really like, you can use
| | 02:35 | the Browser's development tools to
view the source code of that particular page,
| | 02:38 | and lot of times you'll find
that the designers and the developers have
| | 02:42 | been really nice in terms of leaving
comments behind to instruct you as to
| | 02:45 | what's going on there.
| | 02:46 | Now that's probably not their number one
goal behind it, but well commented code
| | 02:50 | is code that's very easy to learn from.
So doing that sort of helps you figure
| | 02:55 | out exactly kind of what you're doing.
| | 02:56 | Now depending upon whether you're working
with HTML or CSS or JavaScript or
| | 03:01 | some other scripting language, you're going
to be using different types of comments
| | 03:04 | and these comments sort of sometimes
have different rules, so I'm going to
| | 03:07 | switchover to main.css.
| | 03:09 | Now before we scroll down and actually
add a comment I want to show you guys
| | 03:12 | some of the ways that I use
commenting for myself in CSS.
| | 03:15 | One of the things that I really wish
they would add to Dreamweaver, and I've been
| | 03:19 | requesting this for years, so I don't
know if Adobe listing is listing or not,
| | 03:22 | but hey guys, I've been requesting
these for years, can I please have a Color
| | 03:26 | Swatch Panel inside my CSS where
I can store custom swatches? No?
| | 03:31 | Okay.
| | 03:32 | So I end up doing this, you will
notice that I have my Color Palette for the
| | 03:35 | Roux Academy up here, I have
hexadecimal notation for the color value,
| | 03:39 | I have rgb notation for it and then
I'll just give the name of the color
| | 03:43 | to remind myself what it is.
| | 03:44 | So, I know if an element needs to be orange
for example, I'm going to use one of
| | 03:48 | these two notations to apply the color.
| | 03:50 | In a lot cases I'm just sort of copying
and pasting from this, but this is a
| | 03:54 | nice way of letting my team know what
the color scheme is going to be and it's
| | 03:57 | also nice way for me not having to
memorize all these color declarations.
| | 04:02 | And you can also pass in copyright
information, you can say hi to your mom,
| | 04:06 | whatever you want to do within the comments.
| | 04:08 | All right, I'm going to scroll down to
about Line 125 and show you guys have
| | 04:11 | commenting works in CSS.
| | 04:13 | So, here we've got a nice comment that
lets people know that the technique that
| | 04:18 | I'm doing here with a clearfix was
created by a gentleman name Nicolas Gallagher
| | 04:22 | and I even give a link to his blog-post
on that particular technique.
| | 04:26 | That's something that a lot of Web
designers do, just add a sign of respect,
| | 04:29 | if you're using a technique that somebody
else sort of came up with or blogged
| | 04:32 | about, lot of times people will write
in there, hey, Paul Irish created this
| | 04:36 | or Nicolas Gallagher create this, here's
where you can go learn a little bit more about it.
| | 04:40 | Okay, but one of the things I also like
to do is to let people know why certain
| | 04:43 | things are being done.
| | 04:44 | For example, this little clearfix zoom:1.
| | 04:47 | What's that all about, right?
| | 04:49 | Well, I'm going to leave a comment to
let people know what that is all about.
| | 04:52 | Again I can go ahead and type the text
in first and then wrap it in a comment
| | 04:55 | or I can just come right up
here and apply a CSS comment.
| | 04:58 | Now the comments that are used in CSS
have sort of the /* */, and you can do
| | 05:04 | multiple lines of comment with that or
a single line, it doesn't really matter.
| | 05:08 | So you just wrap whatever text
you want into those two characters.
| | 05:12 | All right, now here what I'm going to
do is I'm going to type in for IE 6/7 and
| | 05:19 | then I'm going to type-in something
like this will trigger hasLayout, which one
| | 05:25 | of the really big bugs in Internet
Explorer, older versions of it, there's sort
| | 05:29 | of no layout apply to an
element causing something to break.
| | 05:32 | So just that zoom:1 property is only for
Internet 6 and 7, it's going to trigger
| | 05:36 | hasLayout, so it's just letting
people know what this is doing.
| | 05:39 | Now in CSS you can apply comments
in a couple of different locations.
| | 05:42 | Here I'm applying it right above the property.
But notice I can also grab this
| | 05:46 | and I can drag it right here and apply
after the property is set to
| | 05:51 | if I really want to be specific.
| | 05:52 | The only thing I can't do is place it
between the property and the value itself,
| | 05:57 | So it needs to stay either above or beside
that particular property, one or the other.
| | 06:01 | So I'm just going to leave it
right there and then save the file.
| | 06:04 | Now for the most part you'll probably
use comments as a way to communicate with
| | 06:08 | others reading your code, or if
you're like me, even as a way of reminding
| | 06:11 | yourself why you did something a
specific way, because I'll look back at code
| | 06:16 | I wrote six months ago and I'm like why
did I do that, so if don't comment it
| | 06:19 | then I just don't know.
| | 06:20 | Now in certain instances comments can
even have specific functionality and
| | 06:24 | that's something that we're going
to explore in our next movie as we
| | 06:27 | discuss Code Snippets.
| | Collapse this transcript |
| Using snippets| 00:00 | Once you begin coding pages on a
regular basis, you'll find that you often
| | 00:04 | repeat code structures or specific
code blocks over-and-over again.
| | 00:08 | In order to speed up the process
of writing this code, you can create
| | 00:11 | what's known as a Code Snippet, which can
then be added to your code with a single click.
| | 00:16 | So I am going to be working in the
Index file again, and this time, this is
| | 00:20 | found in the 05_06 folder. I want to
point out something that's changed a little bit.
| | 00:25 | You'll notice that up here on line 7 and 7,
the script tags in previous versions
| | 00:30 | were inside of a comment tag.
| | 00:32 | You may have noticed that
from our previous movie.
| | 00:34 | So I have stripped out the comment
tags in order to show you guys kind of how
| | 00:37 | snippets work, and what they are.
| | 00:39 | All right, so snippets
reside in their own panel.
| | 00:41 | So I am going to go over to my Panel
Dock over here, and I can find the Snippets
| | 00:44 | panel typically docked with
the files in the Assets panel.
| | 00:48 | Now if you don't see it over
here, it's very easy to find.
| | 00:50 | You can just go up to Window,
and you can choose Snippets.
| | 00:53 | Okay now, essentially you can think of
the Snippets panel as just a collection
| | 00:58 | of little pieces of code, and these
little pieces of code can be inserted or
| | 01:02 | injected into your pages as many times and
as often as you want and wherever you want.
| | 01:07 | And there are a couple of different types.
| | 01:08 | One for example, you can just go ahead
and insert code directly on to the page,
| | 01:12 | or you can wrap content within a snippet.
| | 01:15 | Now, as you can see there are some
folders over here and these folders hold some
| | 01:19 | of the default snippets
that ship with Dreamweaver.
| | 01:21 | In a moment I am going to
show you how to create your own.
| | 01:23 | But, if you want to use one of these,
for example, we notice, we have a whole
| | 01:27 | folder worth of comments, so I am going
to open those up, and you can see that
| | 01:30 | we have all sorts of different comments.
| | 01:32 | We have some just generic comments,
but what I am looking for are these
| | 01:35 | conditional comments for Internet Explorer.
| | 01:38 | So basically, Internet Explorer is the
only Browser out there that recognizes
| | 01:42 | what they call a conditional comment.
| | 01:44 | Basically, browsers are taught to ignore
comments altogether, just don't even parse them.
| | 01:48 | But, Internet Explorer says, hey!
| | 01:49 | There is a special type of comment
and if I read that, if it says a certain thing,
| | 01:54 | then go ahead and take the code
that's inside of it, and process it,
| | 01:57 | run the script or display the code, or parse it.
| | 01:59 | So that's very helpful, because it
allows us to actually target specific
| | 02:03 | versions of Dreamweaver.
| | 02:04 | So both of these scripts, the html5shiv
and the respond JavaScript Library,
| | 02:10 | both of those target earlier versions of
Internet Explorer, versions earlier than 9,
| | 02:15 | and help it support both
HTML5 and media queries.
| | 02:17 | So it's something that I kind of
put almost in all my documents.
| | 02:20 | All right, so I am going
to select line number 6.
| | 02:22 | I can do that very quickly and easily
by clicking on the line number itself.
| | 02:26 | So if you ever want to select a whole
line of text, you can just click on the
| | 02:29 | line number and it will do that for you.
| | 02:30 | Then, I am going to come over to my Snippets
Panel and I am going to find the If Less Than IE.
| | 02:36 | Now, you will notice that If Less Than IE,
I don't have an IE 9, I only have an IE 8,
| | 02:41 | and that's okay because it
gives us a nice starting point.
| | 02:44 | So if we just double-click on that,
what that's going to do is it's going to
| | 02:47 | surround the line that I had
selected with this comment.
| | 02:50 | Now, you may want to get rid of
some of the white space there.
| | 02:53 | Let me go ahead and do that.
| | 02:54 | But, what this does is it goes ahead and
inserts that comment directly on to the page.
| | 02:58 | Now, the other thing that I
can do here is I can modify this.
| | 03:01 | So right now, it just says If Less Than IE 8.
| | 03:03 | I can change that to say If Less Than IE 9.
| | 03:06 | Now obviously, if I wanted to, I could
go ahead and copy and paste this around
| | 03:10 | the second one or even just do that again.
| | 03:13 | But chances are, I am going to need
this over-and-over again in my files.
| | 03:16 | So, what I can do, I am going to go
ahead and on the next line down, go ahead
| | 03:21 | and place that comment again, and I'm
going to sort of move that up a little bit,
| | 03:26 | I am going to change that to IE 9.
| | 03:27 | Now, why would I do that again?
| | 03:29 | Well, because I want to actually make a snippet.
| | 03:31 | Making a snippet is extremely easy to do.
| | 03:34 | All I have to do is highlight the code
that I want to make a snippet out of,
| | 03:38 | and then I can come right
down to the Snippets panel.
| | 03:40 | There is a series of icons down there in
the bottom, and one of them says New Snippet.
| | 03:44 | If I click on that, it's going to
bring up this panel. And it's going to say,
| | 03:47 | okay, what do you want to call this one?
| | 03:48 | And I am going to call it Less Than IE 9.
| | 03:53 | Now, I could write a description there
if I wanted to, that would be especially
| | 03:56 | helpful if I was doing this for my team.
| | 03:58 | But, I get two choices with my snippet;
| | 04:00 | one is just to insert the block of code.
| | 04:02 | Now, that's for you so if you just want
to go ahead and take the code that you
| | 04:05 | have here in the snippet, and just
inject it directly onto the page.
| | 04:08 | I actually want to use it to wrap the selection.
| | 04:10 | Now, if I do that, I have to tell it
which part of the snippet goes before the
| | 04:14 | selection and which part goes after.
| | 04:16 | So I am going to take the closing part
of the conditional comment, I am going to
| | 04:19 | cut that, and then I am going to
paste it into the Insert after.
| | 04:23 | Now, you can create
snippets entirely from scratch.
| | 04:25 | I could have nothing selected, come
over to the Snippet panel, click on this,
| | 04:29 | and then I could just hand-code directly in
here the snippet that I wanted. All right!
| | 04:32 | I am going to go ahead and click OK to
create that, and you can see that now
| | 04:36 | within my Comments
section, I have Less Than IE 9.
| | 04:38 | Now, I'm also free to create new
subdirectories, new folders and organize these
| | 04:42 | snippets any way that I want.
| | 04:44 | So I am going to focus back in my code
and get rid of the code that's on the page,
| | 04:46 | and now I am going to highlight
my script there, then I am going to
| | 04:50 | come over to Less Than IE 9, double-click
that again, and you'll notice that now it
| | 04:54 | surrounds that particular
script tag with the Less Than IE 9.
| | 04:58 | So not only did I take advantage of
some of the default snippets that are
| | 05:01 | pre-built in the Dreamweaver, but then,
I sort of modified them, and created my own.
| | 05:05 | And there are a lot of different
uses that you can use this for.
| | 05:08 | For example, you could come down, let's
say you have a menu structure that you
| | 05:12 | know you're going to repeat in page
after page after page within a site.
| | 05:15 | If you're not using templates, if you're
not using some type of dynamic assembly
| | 05:18 | for this, you could go ahead and make a
snippet out of this menu, and then on a
| | 05:22 | new page, you could simply
click to insert the snippet.
| | 05:25 | Another thing that you can do is you
can assign keyboard shortcuts to the
| | 05:29 | snippets as well, so if you really know
that you're going to be using a section
| | 05:32 | of code over and over and over again,
you can assign a keyboard shortcut to it,
| | 05:36 | and then just inject it directly on the page.
| | 05:38 | That's extremely helpful
when you're writing CSS.
| | 05:40 | For example, if I go over to my main.css,
I talk about these colors, but let me
| | 05:45 | let you in on a little secret. I make my
own Color Palette by creating snippets.
| | 05:50 | So what I do is I will come in and
I'll select an item like this, say rgb 251
| | 05:54 | and then I will just come down
into my Snippets Panel and I will create
| | 05:59 | a new snippet, and I can call this snippet
whatever I want, I will just call it orange.
| | 06:03 | I don't need to give it a description,
but I am going to do Insert block,
| | 06:06 | so that will just inject the code directly
wherever I wanted, and I will click OK.
| | 06:09 | Now, I can rearrange that if I wanted to.
| | 06:11 | I would create say a new snippet folder,
and I could call this new snippet
| | 06:15 | folder or something like Roux Academy Colors.
| | 06:17 | It's really up to me.
| | 06:19 | Whatever I want to do, I can
organize this anyway that I want.
| | 06:21 | Move this outside so it is no longer part
of that, and then move that orange in there.
| | 06:27 | Now, I could assign a keyboard
shortcut to this particular snippet.
| | 06:32 | Notice if I right-click the snippet,
I could choose Edit Keyboard Shortcuts.
| | 06:35 | It's going to bring out
my Keyboard Shortcut panel.
| | 06:37 | Now, if I ever want to modify these, the
first thing I have to do is make a duplicate.
| | 06:41 | So I am going to make a Duplicate Set here.
| | 06:42 | I am just going to call him james shortcuts.
| | 06:47 | And now what I can do is, I can go directly
into my Snippets, I can find RA Colors,
| | 06:50 | select that, and I could just
go ahead and add a new keyboard shortcut
| | 06:54 | to this, and I could make this
keyboard shortcut anything that I want,
| | 06:57 | say Ctrl+F1 for example.
| | 06:58 | I will go ahead and change
it to assign it, click OK.
| | 07:02 | And what's awesome about this, I could
go ahead and do this for the rest of my
| | 07:04 | colors, and any time I wanted a color,
let's say I go down to say line 141
| | 07:09 | where we have that orange selector.
| | 07:11 | I could go right down here to color.
| | 07:12 | Now, when I'm typing this code in,
I can now just hit Ctrl+F1, boom!
| | 07:17 | Color is in there, I didn't have to memorize it,
or go back up and copy and paste it.
| | 07:20 | How cool is that?
| | 07:22 | So if you're going to be doing a lot of
heavy coding, or if you're going to be
| | 07:25 | needing to reuse Code Snippets over
and over and over again, be sure to take
| | 07:29 | advantage of Dreamweaver's
Code Snippets feature.
| | Collapse this transcript |
| Formatting source code| 00:00 | When you're coding pages it's not
always easy to keep everything neat
| | 00:03 | and pretty. Not only that, but if you
copying and pasting code from one location
| | 00:07 | to the next or inserting items to your
code through some of Dreamweaver's
| | 00:11 | automated features, there's no guarantee
that the code is going to be formatted
| | 00:14 | exactly as you want.
| | 00:16 | Well, that's where Dreamweaver's Source
Code Formatting option comes in.
| | 00:20 | In this movie I want to take a closer look at that.
| | 00:22 | Now I have the Index file open from the
05_07 and one of the reasons why I point
| | 00:27 | that out to you is if I scroll through
the code, you can see it just doesn't
| | 00:32 | look as good as the code has in
previous titles. Look at this.
| | 00:37 | I've got a huge thing of white space there.
| | 00:39 | Now that's actually not going to
keep the code from displaying properly.
| | 00:42 | Browsers will parse that code just
fine, but it's really hard to work with.
| | 00:47 | You know, imagine trying to work through
this menu structure right here when you
| | 00:50 | don't have any line breaks and the
codes are not formatted properly.
| | 00:54 | So one of the things that you can do is
just with a single-click of the button
| | 00:57 | you can reestablish the
formatting option that you want.
| | 01:00 | Now if I go up to my Preferences,
I'm going to bring up Preferences again.
| | 01:04 | Remember, we have this Code Format
preference and this allows us to control
| | 01:08 | exactly how much Indentation is happening,
when it happens, the Size of the Tab
| | 01:12 | that's used to ended this, all of
the Code Formatting options in terms of
| | 01:16 | whether tag should be lowercase or
uppercase. That sort of thing. So you have a
| | 01:20 | lot of options right in here that you can set.
| | 01:23 | All right, I'm going to go ahead and
click OK, and what I'm going to do is just
| | 01:25 | with a single click I'm going to go
down to the bottom of my Code toolbar.
| | 01:29 | I can see this little Paint Bucket icon.
| | 01:31 | I think they stole that from Photoshop.
| | 01:33 | Don't tell anybody on the Photoshop team,
but I think they snagged it from those guys.
| | 01:37 | All right, I am going to click on this
and I can see right here I have the
| | 01:40 | Apply Source Formatting option, Now I also
have what you were just looking at which is
| | 01:44 | the Code Format Settings there as well,
so if you don't want to go up to your
| | 01:47 | Preferences you can access it
directly from the Code Toolbar there.
| | 01:51 | So when I click Apply Source Formatting, boom!
| | 01:53 | Automagically, look at that.
| | 01:55 | We get all of our formatting back, we
don't have any more of those really ugly
| | 01:59 | awful spaces and our code becomes
once again pretty and easy to use.
| | 02:05 | Now there is actually several different
creative ways that you can use this.
| | 02:08 | For example, when I go to over to my main.css
file, everything in the CSS looks fine.
| | 02:13 | This is easy to work with, it's easy
to author, each of the properties are on
| | 02:17 | their own line, so it's really easy to
read the code and work on it, but this is
| | 02:21 | maybe not the best way to
actually distribute the code.
| | 02:24 | You know, when you're working on
larger sites, for example, every little bit
| | 02:27 | of bandwidth helps.
| | 02:28 | So one of things that people recommend
doing is minifying your code, meaning
| | 02:31 | sort of removing all these extra
spaces and line breaks, removing all that
| | 02:35 | and then g-zipping it.
| | 02:37 | Well minifying your code, there's a
lot of script out there that they will do
| | 02:39 | that for you, but one of the nice
things about Dreamweaver is we have certain
| | 02:43 | options for CSS that we can apply with
a simple click of the Source Formatting options.
| | 02:47 | Let me show you.
| | 02:48 | If I go back up to my Format Source Code
and I click on my Code Format Settings,
| | 02:52 | there's a little setting here for CSS.
| | 02:54 | If I click on that I can start to
turn things off like Indentation.
| | 02:57 | I can turn off
Each property on its own separate line.
| | 03:00 | I can turn off All selectors for a
rule on same line, but I actually
| | 03:04 | kind of like that, because
that does save me some space.
| | 03:07 | And I can turn off Blank lines between rules.
| | 03:08 | So I can start to sort of reduce
the amount of space this is taking up.
| | 03:12 | I'm going to close out of that and
notice for example that right now my CSS
| | 03:16 | takes up a total of 671 lines.
| | 03:19 | Well, if I come in and apply those
new Source Formatting options to my CSS,
| | 03:23 | notice I've reduced that all the
way down to 168 lines, that's a
| | 03:27 | significant savings.
| | 03:29 | So I can save this file and then
upload this and have this with the CSS
| | 03:32 | that's live online, because frankly our
browser parse is just fine and doesn't
| | 03:36 | have trouble reading it.
| | 03:37 | You and I might have trouble reading it,
but a browser doesn't. And the thing is
| | 03:40 | if I ever need to work on this again,
you are like, wow, what if you need to
| | 03:43 | work on it again, I mean
how is that going to help you?
| | 03:45 | Well, again, you just go right back to
your Code Format Settings, you go right
| | 03:49 | back in and you start turning all of
these things on that you just turned off
| | 03:52 | again, and as soon as you do that, click
OK, you can come right back here, apply
| | 03:57 | the Source Formatting once
again, and now you can read that.
| | 04:00 | It's also extremely helpful if
you're ever downloading some Libraries;
| | 04:04 | JavaScript Libraries or External CSS
Template files that have been minified.
| | 04:08 | You can open those up in Dreamweaver,
apply your Source Formatting options to it
| | 04:11 | and it becomes a lot easier to work with.
| | 04:14 | So those are your Source Code
Formatting options inside of Dreamweaver.
| | 04:18 | Be sure to take advantage of them to
keep your code maintainable, organized,
| | 04:23 | and easy to author and read.
| | Collapse this transcript |
|
|
6. Managing CSSSetting CSS preferences | 00:00 | In this chapter we will explore
Dreamweaver's powerful CSS Authoring
| | 00:03 | and Management tools.
| | 00:05 | Dreamweaver has made working with CSS
a fundamental part of almost every
| | 00:09 | workflow within Dreamweaver.
| | 00:11 | As such, the options around creating
and modifying your CSS can sometimes
| | 00:15 | be a bit overwhelming.
| | 00:17 | Fortunately, Dreamweaver has multiple
preferences that allow customization
| | 00:20 | of exactly how your styles are
created, presented and formatted.
| | 00:24 | Let's take a moment to go over these
Preferences and customize how Dreamweaver
| | 00:28 | goes about creating your CSS before we
get into the actual tools themselves.
| | 00:33 | So to illustrate these preferences, I am
going to work with just an external CSS file.
| | 00:37 | I have the main.CSS file open from the
06_01 folder and it looks like a really
| | 00:43 | complex rule, but it's really not.
| | 00:45 | The only thing going on in this particular
rule is we are describing what size
| | 00:49 | the font should be, which font should
be used for the headline, the amount of
| | 00:52 | space through margin that the headline
should have with other elements on the
| | 00:55 | page, how much padding we should have
inside actual heading itself and then a
| | 00:59 | border and what that border should
be all the way around the element.
| | 01:02 | Now obviously here in this case we are
just looking at the actual code itself.
| | 01:06 | How the code is generated is actually
really, really important in terms of
| | 01:11 | how efficient the code is,
how easy it is to maintain.
| | 01:14 | And if you're going to be using any
of the tools inside of Dreamweaver
| | 01:17 | they are going to create this code for you
automatically, you want to take a little
| | 01:20 | bit of control over how those code is
created, so that it is created to your
| | 01:24 | own personal standards.
| | 01:26 | So the first thing I am going to do is
go up to my Preferences. And I can go to
| | 01:29 | Edit and choose Preferences,
obviously on the Mac you will be going to
| | 01:32 | Dreamweaver and choose Preferences.
| | 01:33 | The first thing I want to show off is
Code Coloring. I know we looked at this a
| | 01:36 | little bit earlier when we were talking
about Coding inside Dreamweaver,
| | 01:40 | but I want to show you that it
also applies to CSS as well.
| | 01:43 | So if I click Code Coloring, I can come
down in the Document type and choose CSS.
| | 01:47 | I can also choose to Edit the Color Scheme.
| | 01:49 | So here, if I wanted to change this
color scheme, perhaps you are somebody who's
| | 01:53 | used to coding in another application
and you are used to see your CSS looking
| | 01:57 | a slightly different way, it's fine for
you to come in here and change this.
| | 02:00 | For example, the Properties and Values,
they're a different shade of blue,
| | 02:05 | but they are still very close to each other.
| | 02:06 | So sometimes it's very difficult to tell
when a semicolon (;) has been left off.
| | 02:10 | So if you wanted to you could select
Property and you could come up and you
| | 02:14 | could choose maybe even a darker blue
and if I click OK and click OK again,
| | 02:19 | I can see that now I have a much darker
blue for my Properties than I do my
| | 02:23 | values and it's a little bit easier to see.
| | 02:25 | You're free to change that any time
that you want, but of course, there's no
| | 02:29 | sort of Reset to default button on this,
so be very careful about changing them,
| | 02:33 | if you're in a team environment.
Somebody else might not be able to come back in
| | 02:36 | and change it to the way they were used
to working if they don't remember what
| | 02:39 | everything is as well.
| | 02:40 | Now thing that I really want to focus
on in this movie is how the properties
| | 02:43 | that you're seeing here are actually
created by some of the various tools and
| | 02:47 | procedures within Dreamweaver.
| | 02:48 | So there are a lot of different ways
to create styles inside of Dreamweaver.
| | 02:52 | For instance so you could do it to
the CSS Styles Panel or through their
| | 02:55 | Properties Inspector and we are
going to experiment with both of those
| | 02:58 | particular methods in just a moment.
| | 02:59 | But when you're creating those styles
visually through dialog boxes, obviously
| | 03:03 | at some point Dreamweaver has to
come in here and write the code.
| | 03:06 | And you want to be in total control over
how Dreamweaver generates that code.
| | 03:10 | So I am going to go back up to my
Preferences and this time I am going to
| | 03:14 | come right down to CSS styles
category, it's about midway down.
| | 03:18 | The first set of options I have in this
Preference are when I am creating CSS rules,
| | 03:22 | should I Use shorthand notation or not?
| | 03:25 | Now the code that you're looking
at in this rule is obviously not
| | 03:27 | using shorthand notation.
| | 03:29 | Now if you are not familiar with CSS,
and you are wondering what shorthand
| | 03:31 | notation is; shorthand notation
means instead of writing four separate
| | 03:36 | properties for margin like we are doing
here, where we explicitly state the top
| | 03:39 | right and bottom and left margins, we
just give it one margin declaration and
| | 03:43 | pass the values into that.
| | 03:45 | It's a little bit more efficient in
terms of writing your CSS. It's a lot more
| | 03:49 | efficient in terms of maintaining and it
certainly is going to save a little bit
| | 03:52 | space and make your overall CSS file smaller.
| | 03:55 | So it's a really good thing
for you to do within your styles.
| | 03:58 | So what I am going to do is I am
going to go ahead and turn on Shorthand
| | 04:01 | notation for everything, except for font.
| | 04:04 | Now you will also notice that currently
we are using shorthand notation for font.
| | 04:08 | The font shorthand notation allows you
to set the font style, the font weight,
| | 04:13 | the font variant, the font size
and the font family itself.
| | 04:18 | In this case the font size would be 1.4ems,
while the font family would be Arial,
| | 04:22 | falling back to Helvetica and
sans-serif if Arial wasn't available.
| | 04:25 | Well, we have left some stuff off
here in this declaration and that's
| | 04:28 | actually pretty common.
| | 04:30 | But what we have left off is we have left off
whether this should be bold or not,
| | 04:32 | whether the font style should be
italic or not or whether font variant,
| | 04:36 | whether we should be using small caps.
| | 04:38 | The problem with leaving that information
off is that it assumes that you want the default,
| | 04:43 | which in this case would be normal.
| | 04:45 | So what happens when you use font
shorthand notation is that sometimes you are
| | 04:48 | overriding rules in a way
that's totally unintended.
| | 04:51 | I have nothing against using it,
Ijust want to be very explicit
| | 04:55 | in terms of when I use it, I don't want
Dreamweaver to go ahead and use font shorthand
| | 04:59 | notation for me every single time and
make a font declaration, because I may not
| | 05:03 | want it to overwrite a rule
that's a little further up the cascade.
| | 05:06 | So that's something that
I want to control myself.
| | 05:08 | So I make sure that, you know, when
Dreamweaver is actually writing in styles
| | 05:11 | that it doesn't use shorthand for font notation.
| | 05:14 | Now you may feel the exact opposite of
me and that's the great thing about this
| | 05:17 | is you have that option to say yes, I want
to use shorthand notation there or no I don't.
| | 05:23 | You also control exactly when shorthand
notation is used or not. You'll notice
| | 05:26 | that the next set of options right down
here for Use shorthand, our options are:
| | 05:31 | If the original used it, according to
all the settings above and then we also
| | 05:34 | have the option of
opening CSS files when modified.
| | 05:37 | Now essentially what that is doing for us,
is it's saying okay, do you only want
| | 05:42 | me to use shorthand notation if the
original rule itself, if I modify that rule
| | 05:46 | if it used it, or should I go ahead and
do it every single time I write a rule.
| | 05:50 | I do like doing the According to
settings above, so that every single time you
| | 05:54 | write a rule, regardless of whether
you are writing one from scratch or
| | 05:57 | modifying the existing one, that it
will go ahead and use the shorthand
| | 06:00 | annotation settings.
| | 06:01 | The other option that we have here
is when double-clicking a rule in the
| | 06:04 | CSS Panel which we are just about to do, how
would you prefer personally to edit that rule?
| | 06:09 | Would you rather Edit it using the CSS dialog?
That's a dialog box that comes up,
| | 06:13 | that lets you Edit those Properties visual.
| | 06:15 | D you want to Edit using the
Properties pane which is a pane with in the
| | 06:19 | CSS Styles panel or Edit using Code View.
| | 06:22 | So if you're the type of person that
really likes to hand code, you don't like
| | 06:25 | to do a lot of things visually, you can
click on Edit using Code View, when you
| | 06:29 | double-click on a rule, it will jump
to that rule within the code itself
| | 06:32 | and bring that selector up.
| | 06:34 | If you leave it where is the default,
which is what I am going to do, where it
| | 06:37 | says Edit using CSS dialog;
| | 06:38 | that's going to bring up the CSS rule
definition dialog box and allow you to
| | 06:42 | edit those rules visually.
| | 06:44 | Okay, so I'm going to leave those Preferences
the way I have them right there and click OK.
| | 06:49 | And then we are going to
see this shorthand in action.
| | 06:52 | What I am going to do is I am going to come
up to my CSS Styles panel and open that up.
| | 06:56 | There is only one rule in the document,
so it's really easy to find it,
| | 06:58 | that's the h1 rule.
| | 06:59 | I am going to double-click that.
| | 07:01 | Notice, because of the
Preference that I had setup,
| | 07:03 | it brings up the CSS rule definition dialog box.
| | 07:06 | Now this may seem kind of weird to you right
now because we are just editing a CSS file.
| | 07:09 | But if we were on an HTML file that
has an External CSS file attached to it,
| | 07:14 | it wouldn't jump over to the External
CSS document, it would just go ahead
| | 07:17 | and open this up. And this will then
allow me to Edit the rule and then click
| | 07:21 | OK and continue doing what I'm doing.
| | 07:23 | So also for people that are new to CSS,
this is a nice visual way to edit Styles
| | 07:28 | without having to worry about
knowing the exact syntax of CSS.
| | 07:32 | It's a very nice way sort of
easing yourself into that, if you will.
| | 07:35 | All right, what I am going to do here
is I am going to change the font size to
| | 07:38 | 1.2em, then I am going to go to the
Box model category which is over here on
| | 07:43 | the left hand side and I am going to change
my Padding and I will change that to 12 pixels.
| | 07:49 | And notice that you've got the pull-down
menu here, but if you want, if you
| | 07:52 | don't want to have to stop to grab this
pull-down menu, you could just type in
| | 07:56 | 12px with no space, and when you hit Tab,
notice it will resolve that for you.
| | 08:00 | I am also going to change my Top margin,
I am going to make that 2em and I will
| | 08:04 | leave the Bottom margin at 1 and then
finally I am going to go to my Border.
| | 08:08 | And I am going to change my border so
that instead of 1 pixel, it's 2 pixels
| | 08:12 | all the way around.
| | 08:13 | So essentially I've modified all of the
properties that exist within the rule,
| | 08:17 | I have modified some of the font
declaration, I have modified the Margin,
| | 08:20 | the Padding and Border.
| | 08:21 | So when I click OK, it's going to update
the rule that we have on the page here,
| | 08:25 | but remember it's going to update it
using the Preferences that we just set.
| | 08:28 | So when I click OK, I can see that
now I have a much more efficient rule in
| | 08:33 | terms of the size it's taking up and in
terms of the actual number of properties
| | 08:37 | that I would have to modify
if I were doing this by hand.
| | 08:40 | Although I do want to point something out;
you will notice that the Margin,
| | 08:43 | Padding, and Border now only occupy
one property a piece, instead of like the
| | 08:46 | four properties separately that they
used to occupy, but look at the font.
| | 08:50 | Notice that because I turned the
Preference for font shorthand off, it actually
| | 08:55 | took the font declaration, which was
using shorthand property before, and it now
| | 08:59 | split it out into the individual
components, so font family and font size
| | 09:03 | are now being defined separately.
| | 09:05 | And so, now in Dreamweaver I have it
setup, so that any time a rule is modified
| | 09:10 | or created through some other means
than hand coding, it's going to format
| | 09:15 | the syntax exactly the way that I want it.
| | 09:17 | Now, not everybody likes to work with
CSS the same way. Some of you may have
| | 09:22 | different preferences than me.
| | 09:23 | So I think it's great that Adobe makes
it so easy for us to get Dreamweaver's
| | 09:28 | workflow to match your own personal preferences.
| | Collapse this transcript |
| An overview of the CSS Styles panel| 00:00 | The CSS Styles panel acts as a central
hub for all things CSS in Dreamweaver,
| | 00:04 | providing you with both a global
view of all document styles, as well as
| | 00:08 | allowing you to focus on
individual rules in style applications.
| | 00:13 | You'll find the CSS Styles panel in
the CSS Panel Group, which is usually
| | 00:16 | located at the top of the panel dock,
although you can reposition it in custom
| | 00:20 | workspaces if you'd like.
| | 00:22 | If you don't see the panel, you can
go up to Window and choose CSS Styles,
| | 00:26 | and it should open up.
| | 00:27 | Now, at the top of the panel you'll find
buttons for two views; All and Current.
| | 00:33 | The Current View gives you a detailed
view of all the rules applied to a
| | 00:36 | selected element, while the All View
gives you an overview of all the CSS Styles
| | 00:41 | applied to the current document.
| | 00:43 | Before we start creating styles in
earnest, let's take a moment to get
| | 00:46 | comfortable with finding our way
around and using the CSS Styles panel.
| | 00:50 | So to do that, I am going to work with the
index file that we have here from the 06_02 folder.
| | 00:56 | And you may have noticed the CSS Styles
panel takes up a lot of room, especially
| | 00:59 | when you have a lot of styles going on,
so what I've done is I've sort of
| | 01:02 | minimized all the other panels.
| | 01:04 | The Files Panel, I've got that minimized,
I just have the CSS Styles Panel opened up.
| | 01:08 | Now, currently we're looking at the All view,
we'll take a look at the Current view
| | 01:11 | in just a moment.
| | 01:12 | And what I'm doing is with this Properties
pane I am same sort of bringing it down
| | 01:15 | a little bit so I can see
more of these rules. All right!
| | 01:18 | So currently what I am looking at right
now is, I am looking at all of the
| | 01:21 | rules that apply to the current
document that I have open.
| | 01:23 | So every time you open up a new document,
if you have a different set of rules
| | 01:27 | that apply to that, or that it's
linking out to, you are going to
| | 01:30 | see those listed there as well.
| | 01:31 | Now, I want to minimize these really
quickly so you can see the difference
| | 01:35 | in how the CSS Styles Panel reports on
the styles that you have attached to
| | 01:38 | that particular document.
| | 01:40 | The first thing that I see listed is main.css.
| | 01:43 | Now, that tells me that this
is an external style sheet.
| | 01:45 | How do I know it's an external style sheet?
| | 01:47 | Well, there are a couple of reasons.
| | 01:48 | Number one, I know because it has a .css
extension, and number two, it's not
| | 01:53 | within this sort of style
tag that you're seeing here.
| | 01:55 | Anytime you see the style tag
represented like this, that's essentially
| | 02:00 | an embedded style that's contained within
the style tag in the head of the document.
| | 02:04 | If I, for example, were to go over to
Code View, you can see in the head of
| | 02:07 | the document I have that style tag right
there that's being reported by the CSS Styles panel.
| | 02:12 | And what's nice about that is it means
that you're not going to have to do a lot
| | 02:15 | of hunting through the code of your
file to figure out which styles have been
| | 02:19 | applied and what order those styles are in.
| | 02:22 | The other very interesting thing here
that we have about the CSS Styles panel
| | 02:26 | is that the order that you see these in
are the order that they are encountered
| | 02:30 | in the code itself.
| | 02:31 | And that actually is very, very
important to CSS, because CSS has something
| | 02:35 | called the cascade, cascading style sheets.
| | 02:37 | Cascade basically says last rule applied wins.
| | 02:40 | So obviously any rule that's further
down this list, if there is a conflict
| | 02:43 | to the rule above it, for the most part that
rule is going to override the rule above it.
| | 02:47 | So this also helps you get an idea as to
which styles are being applied and what
| | 02:51 | order they are being applied in.
| | 02:52 | Another thing that we get from this
sort of basic overview of all the styles in
| | 02:55 | our file are these two properties right here:
| | 02:57 | screen and projection.
| | 02:58 | That's basically telling you the
value of any media attribute that has been
| | 03:02 | applied to our style.
| | 03:03 | So it's basically saying, okay, these
particular styles are going to apply to
| | 03:07 | any devices that are screen
devices or projection devices.
| | 03:11 | Now, that's actually handled when you
use links to link to an external style,
| | 03:14 | that's handled through this media
attribute that you're seeing right here, so
| | 03:17 | that's being reported in the CSS
Styles dialog box, and once again, that's
| | 03:21 | something that I'm not going to
have to go into the code and check.
| | 03:24 | Now, if I don't see something there, that
means the media attribute has not been defined.
| | 03:28 | Now, as soon as I expand this, I can
see every single rule in my external
| | 03:32 | style sheet, which makes it very easy
to scan through and kind of find what
| | 03:35 | you are looking for.
| | 03:36 | Now, obviously, how you've organized
the style sheet matters, because you are
| | 03:40 | going to see these rules in the
exact order that they are found.
| | 03:43 | Now, if you decide to highlight one of
these rules or focus on it in any way,
| | 03:48 | you're going to get even more information.
| | 03:49 | So if I click on this rule right here,
this pageHeader h1, you'll notice that
| | 03:54 | the Properties panel below this now is
activated and I'm seeing exactly what is
| | 03:59 | contained within the rule.
| | 04:00 | As a matter of fact, I am just going to
sort of move this up a little bit so
| | 04:03 | I can see more of these, because I want
to talk about the different ways that
| | 04:06 | we can view these properties.
| | 04:07 | You'll notice at the bottom left-hand
corner of the CSS Styles panel that
| | 04:11 | we have three icons.
| | 04:13 | The first one shows your
Properties in Category view.
| | 04:16 | Now, in a moment we are going to talk
about defining new CSS rules using the
| | 04:21 | CSS Rule Definition dialog box.
| | 04:23 | Essentially what you're seeing is
these properties grouped into categories,
| | 04:27 | such as all the properties that might be
associated with the Fonts or the Box Model or Lists.
| | 04:32 | So if you're looking for a specific
property and you know which category it's
| | 04:35 | in, this is a very easy way to sort of
sift through all of that and find exactly
| | 04:39 | what you're looking for.
| | 04:40 | Now, the next one is a List view
of all the different CSS properties.
| | 04:45 | You'll notice if I scroll through this,
there are a lot of them. And to be quite
| | 04:50 | honest with you, this isn't quite
all of them, but it's very, very close.
| | 04:53 | So what about the ones up top?
| | 04:55 | Well, anytime you see a property
that's in blue and it's at the top of this
| | 04:58 | particular type of view, those are the
properties that have actually been set on this rule.
| | 05:02 | So the ones down below it that are
in black are not set, but you have the
| | 05:06 | option of setting them.
| | 05:07 | And then finally, we have the third
view and this one is my favorite, and this
| | 05:10 | is the Show Only Applied Properties.
| | 05:13 | This filters it out so the only
thing you're looking at are the
| | 05:15 | actual properties that have been
applied to this rule and the values
| | 05:18 | of those properties.
| | 05:19 | What's nice about this is anytime you
see a property listed in blue in this
| | 05:23 | panel, that means that you can
click on that and you can change it.
| | 05:26 | So if I wanted to change this say
Margin value, I could just click on that and
| | 05:30 | type in the value I wanted for the
margin, same thing for the text-indent,
| | 05:35 | the top position of this, any of these
properties that I want to modify I can.
| | 05:38 | I can also add more properties here as well.
| | 05:40 | So if I were modifying my CSS Styles,
and we'll do this a little bit later on,
| | 05:44 | I could go ahead and continue to add all
the properties that I want without ever
| | 05:47 | having to actually touch
the code, which is nice.
| | 05:50 | Now, I want to show off the Current
View as well, but to do that we're going to
| | 05:53 | have to focus on an element on the page itself.
| | 05:56 | So what I am going to do is I am going
to click inside this paragraph right over
| | 05:59 | here, and then clicking on that I then
want to focus on exactly the element that
| | 06:03 | I want to look at in terms of its styling.
| | 06:05 | And to do that I am going to use the Tag
Selector right down here on the bottom.
| | 06:08 | I am going to click right there in the
<p.branding>, that means a paragraph that
| | 06:13 | has the class of branding applied to it.
| | 06:15 | And once I click on that, it focuses on that.
| | 06:17 | Now, the CSS Styles panel is going to
pick up on the fact that I'm now focused
| | 06:21 | on a specific element on the page.
| | 06:23 | So if I go over to the Current view,
you'll notice that it's giving me the rules
| | 06:28 | for this <p.branding>.
| | 06:30 | Now, here this can be a little bit more
confusing the first time you see this,
| | 06:34 | so I want to talk about
what these different panes are.
| | 06:36 | First off, notice that it's pretty easy
for me to resize these panes so that
| | 06:40 | I have a little bit more
room in one versus the other.
| | 06:42 | So the top pane is a summary for this selection.
| | 06:45 | It's not really focused on how many
rules or which rules are applied to it,
| | 06:49 | but it's basically saying, okay, here
is like the entire styling for this,
| | 06:53 | everything all combined, this is what it is.
| | 06:56 | So it's very easy for you to look through
this and determine whether the proper
| | 06:59 | font or the proper size is being
applied to that, anything like this.
| | 07:03 | Now, the second pane, this middle
one right here, this is the one that
| | 07:06 | confuses the most people.
| | 07:07 | This is the cascade essentially, the rules.
| | 07:10 | So these are all of the rules in your
styles that are applying to this element.
| | 07:14 | There are a lot of rules that have
properties applied to them that are then
| | 07:17 | inherited by their children.
| | 07:19 | Now, in this case the paragraph is
obviously a child of the home header area
| | 07:23 | or the body tag and the styles that are
applied to that will also a lot of times
| | 07:28 | apply to the paragraph.
| | 07:30 | And I can use this cascade rule to see
if the selector that I wrote is applying
| | 07:34 | in the order that I wanted it in.
| | 07:35 | For example, <p.branding> selector
right here, basically that is an element
| | 07:41 | specific class selector, and it's
saying that anytime you find a paragraph
| | 07:45 | with a class of branding, apply this style.
| | 07:47 | That's a pretty specific selector,
because of that it is the last rule applied,
| | 07:52 | meaning its properties are going to
overwrite any of the properties of these
| | 07:56 | rules if there's a conflict between them.
| | 07:58 | So I can very quickly and easily tell if
the rule is applying within the cascade
| | 08:02 | in the order that I want it.
| | 08:04 | The next pane we have here is the exact
same pane that we have in the All view,
| | 08:07 | which is just the Properties itself,
and I can come in here and I can change
| | 08:11 | these properties and do whatever I want.
| | 08:12 | Notice, for example, I can Add a Property.
I am just going to go ahead and add
| | 08:15 | one here, and I am going to add color.
| | 08:17 | Now, I can grab this pull-down menu and
choose color from that if I don't know
| | 08:22 | all of those properties or know exactly
which property I am looking for or
| | 08:25 | I can just type it in, either way.
| | 08:27 | When I choose color, it also gives me
the option of going ahead and grabbing the
| | 08:29 | color picker and choosing a color that
way, or if I want, I can highlight the
| | 08:34 | value and I could type in anything that I want.
| | 08:37 | So I could even use a keyword notation
in this case, which is white, and I'll
| | 08:40 | still get the same results.
| | 08:42 | Now, as soon as I do a Save All and
deselect this, you can see that, that color
| | 08:46 | has now been applied to that rule.
| | 08:48 | So it's a very quick and easy way to
select an element on the page, flip right
| | 08:51 | over to the CSS Styles panel, see what
type of formatting is being applied to it,
| | 08:55 | and then modify that, again,
without ever having to go into the code.
| | 08:59 | I know it probably seems to you like
we've covered a lot of ground with the
| | 09:02 | CSS Styles panel, but to be honest,
we have really only just scratched
| | 09:07 | the surface of what it can do.
| | 09:08 | Don't worry, we are going to be using
the CSS Styles panel throughout the rest
| | 09:12 | of the chapter, indeed as well as the
rest of the title, which is going to give
| | 09:15 | you plenty of time to familiarize
yourself with these capabilities, as well as
| | 09:19 | exploring some of its additional functionality.
| | Collapse this transcript |
| Creating a new CSS rule| 00:00 | The CSS Styles panel can help control
every phase of creating and managing CSS
| | 00:04 | within Dreamweaver.
| | 00:06 | In this movie I want to begin exploring
how you can use the CSS Styles panel
| | 00:10 | to create a new CSS rule.
| | 00:12 | To do that we're going to keep working
in the index file, but this time I have
| | 00:16 | it opened from the 06_03 directory, and
if I scroll down into my content,
| | 00:21 | I can see these little section
boxes, these info boxes.
| | 00:25 | The headline doesn't look the way it should.
| | 00:26 | It's just not styled at all
to be quite honest with you.
| | 00:29 | So we're going to focus on those and
we're going to create a brand new rule
| | 00:31 | that's going to target those elements.
| | 00:33 | Now to do that, we're going to go over to the
CSS Styles panel and use the new rule feature.
| | 00:38 | I noticed that if I look in the lower
right-hand corner of the CSS Styles panel
| | 00:41 | I have a series of icons over there.
| | 00:43 | One of them that little chain like
icon will allow me to Attach an External
| | 00:47 | Style Sheet to a page, so if I create a
brand new page from scratch and I want
| | 00:50 | to go out and attach an External Style Sheet
to it that's the icon I'll use for that.
| | 00:54 | Though what we're interested in is the one
right beside it, and this is a new CSS rule.
| | 00:58 | You can see it looks like a little
page with a plus (+) symbol on it.
| | 01:01 | So anytime I want to create a new
rule visually, I can just do that.
| | 01:05 | Now there's nothing wrong with going
down there and clicking that icon and
| | 01:08 | beginning to create your rule, but if you
pay attention to where you're focused,
| | 01:11 | both on the page and within the
CSS Styles panel, you're going to do
| | 01:15 | a much more efficient job of not only
creating the proper selector to target the
| | 01:19 | element on the page, but you're also
going to be able to control where within
| | 01:23 | your styles in terms of the organization
of your styles, where this rule is
| | 01:27 | going to be placed and both of those
are very important things, especially as
| | 01:30 | your pages get more complex.
| | 01:32 | So in order to do that, what I'm going
to do, I'm first going to click over here
| | 01:36 | in Student Spotlight.
| | 01:37 | Now the first time you click on one
of these info boxes, it's not going to
| | 01:42 | select the individual element. You're
going to get this blue outline around it
| | 01:45 | because it's an element that Dreamweaver
sees as a positioned element, so you're
| | 01:48 | going to sort of get that
overall group selection first.
| | 01:51 | But if you double-click on that,
that should take you into the elements inside
| | 01:54 | of that, and I'm going to place my
cursor directly inside the
| | 01:58 | Student Spotlight headline.
| | 01:59 | Now when I do that, I can see that this
is an h2, so I know I need to target now
| | 02:03 | a heading2 tag, and I see that
it's inside of this section element.
| | 02:07 | And the section element actually has
several classes applied to it, Spotlight,
| | 02:11 | Info, and Condense.
| | 02:13 | Now when I click on each of these as well,
I can see that the classes they have
| | 02:16 | applied to them are Events, Info, and Condense.
| | 02:19 | Now Condense is basically controlling
the transition, the animation of these things,
| | 02:24 | when you hover over them they'll
expand and we'll be covering that a
| | 02:26 | little bit later in the title.
| | 02:28 | So the only other class that allows me
to target all of these at once is Info,
| | 02:32 | so we need to somehow combine this h2
with the Section Info class and what
| | 02:37 | we're going to do that is
we created our new rule.
| | 02:39 | So now that I have some idea as to
what the selector that I'm going to be
| | 02:42 | creating needs to look like, I'm going
to go over to the CSS Styles panel and
| | 02:46 | I'm going to scroll through, to see
if there's a location within my styles
| | 02:49 | already that would be
appropriate for our new rule.
| | 02:52 | And I happened to notice as I'm scrolling
down through here, I do have a whole
| | 02:56 | series of selectors that are targeting
elements within those info sections,
| | 03:02 | so that's a perfect place for my new rule.
| | 03:05 | So in order to make sure that the
rule is placed in the proper location,
| | 03:08 | what I'm going to do is I'm going to
go up and I'm first going to highlight
| | 03:12 | the section.info rule.
| | 03:13 | Now, I'm not going to double-click on that,
I'm just going to click on it one time,
| | 03:16 | and when I do that it's going
to highlight it, and that essentially
| | 03:19 | establishes the focus.
| | 03:20 | So I've got really focus
in two places right now.
| | 03:23 | On the actual html page I have focus on
the Student Spotlight headline, and in
| | 03:27 | the CSS Styles panel I have my
focus on the section.info rule.
| | 03:31 | Okay, so now when I go down to the
bottom of the CSS Styles panel and I click
| | 03:35 | on the New CSS Rule icon, that's going
to open up the New CSS Rule dialog box.
| | 03:40 | This box essentially has three sections to it.
| | 03:43 | The first one is what Type of
Selector that you want to write.
| | 03:46 | The next is the actual selector itself,
and then finally it asks where do you
| | 03:50 | want to place these styles?
| | 03:51 | Well, let's tackle these one at a time.
| | 03:53 | For Selector Type, I can
choose Class, ID, Tag or Compound.
| | 03:58 | Class, ID and Tag allows me to create a
single Class selector, ID selector,
| | 04:04 | or Element selector, so if I want to
target all h2s on a page, or everything
| | 04:08 | with the class of Info applied to it,
then those are the choices to use.
| | 04:12 | If you want to be more specific however,
you're going to create a compound
| | 04:15 | selector, and essentially compound
selector is allow you to type in as terms of a
| | 04:20 | selector name, almost anything you want,
but they're really focusing on doing
| | 04:23 | what we call descendent selectors.
| | 04:25 | Now you'll notice that we get an
immediate benefit by having our
| | 04:30 | cursor inside the element.
| | 04:31 | You'll notice that it tries
to write the selector for us.
| | 04:34 | It's doing spotlight.info.condense h2,
so essentially it's saying, this
| | 04:41 | particular selector would apply to any h2
that's found within an element that
| | 04:45 | has all three of these classes applied to it.
| | 04:47 | Well, I appreciate Dreamweaver for the
effort here, but it didn't get it quite right.
| | 04:52 | But that's okay, because I am
now free to come in and modify this
| | 04:56 | anyway that I want.
| | 04:57 | The first thing I want to do is I want to
take the spotlight and I want to replace that.
| | 05:01 | I want to make it so that instead of
just spotlight, it's actually targeting a
| | 05:05 | section tag, and then the condense really
doesn't have anything to do with those headlines.
| | 05:10 | There are certainly going to
be some info boxes that don't animate,
| | 05:13 | so I want to get rid of that.
| | 05:14 | So I want to modify the
selector to say section.info h2.
| | 05:20 | Now this illustrates, for you guys that
are new to CSS and you're wondering
| | 05:25 | Do I need to learn syntax?
| | 05:26 | Do I really need to learn CSS?
| | 05:27 | This illustrates that yes, indeed you do.
| | 05:30 | So even though Dreamweaver does its
level best to assist you in writing the
| | 05:34 | selectors and to be honest with you,
it's going to do a really good job
| | 05:38 | most of the time, especially if
you have fairly simple pages.
| | 05:40 | There are going to be times when you have
to go in there and edit that manually,
| | 05:42 | so that you're targeting the proper
element on the page. And the only
| | 05:46 | way to be able to do that is if you
understand CSS syntax and you
| | 05:49 | know how to write these selectors.
| | 05:50 | The next thing that I want to choose
is where I want this rule defined
| | 05:54 | and in this case I want it defined
in my external main.css file.
| | 05:58 | The only other choices that we have
here is within this document that would
| | 06:02 | create in embedded style in the head of
the document, or if we wanted to create a
| | 06:06 | brand-new style sheet file, which we
don't, we want to leave that in main.css.
| | 06:10 | Okay, so those are your options for
the New CSS Rule dialog box.
| | 06:15 | Now once the rule has been created, you need
to define the properties and the values for that rule,
| | 06:19 | that's what we're going to do next.
| | 06:21 | Since that process deserves a much
closer look, we're going to explore setting
| | 06:24 | Rule Properties to the Rule Definition
dialog box in our next movie, and since
| | 06:29 | we're going to be picking up from right
where we left off, you don't necessarily
| | 06:32 | need to even close the
screen you have up right now.
| | 06:35 | When this movie finishes, just go ahead
and start the next one, stay right where
| | 06:38 | you are at and we'll pick it
up from this exact location.
| | Collapse this transcript |
| Using the CSS Rule Definition dialog| 00:00 | Once you've created a rule visually
within the CSS Styles panel,
| | 00:04 | you're then presented with the CSS
Rule Definition dialog box.
| | 00:07 | Using this dialog, you'll enter the
values for properties that you wish to set.
| | 00:12 | We're going to finish the Info
section's headline rule by setting
| | 00:15 | the appropriate property.
| | 00:16 | So I'm really just picking this up right
from where we left off in the last movie.
| | 00:21 | I've created a new rule. It's a
compound selector, section.info h2,
| | 00:27 | which is going to target any heading 2,
inside of a section element with a class
| | 00:31 | of info applied, so a fairly specific rule.
| | 00:33 | And that is going to be
contained within the main.css.
| | 00:35 | So once you've entered everything into
the New CSS Rule dialog, you click OK and
| | 00:41 | that's when this one comes up.
| | 00:42 | This is the CSS Rule Definition dialog box.
| | 00:45 | Now I know a lot of you guys out there
probably prefer to hand-code your styles
| | 00:49 | and there's nothing wrong with that whatsoever.
| | 00:51 | But for those of you that are new to
CSS or for those of you that are just
| | 00:55 | looking to do something very quickly visually
without having to switch over to the code,
| | 00:58 | this dialog box makes a lot of sense.
| | 01:02 | You'll notice that we have a list of
categories over here on the left-hand side.
| | 01:04 | Those categories basically group properties
together based on what they control.
| | 01:10 | So the first one that we're presented
with is Type and of course, we see over
| | 01:13 | here on the right-hand side, all of
the properties that we can set for an
| | 01:16 | element in terms of its type.
| | 01:18 | So one of the first things I want to do
is I want to set the Font-family for this.
| | 01:22 | Now I notice that this is a pulldown
menu and if I click on that pulldown,
| | 01:27 | I see a list of sort of default
font stacks within Dreamweaver.
| | 01:31 | Now if you're not familiar with what
a font stack is, essentially the first
| | 01:34 | font that is listed here is the font that the
page is going to request from the client machine.
| | 01:39 | If that font is not found, it moves on
to the next one and finally falls back
| | 01:43 | to a default sort of generic family if you
will, and it just says to the computer,
| | 01:47 | okay, fine, just give me
whatever sans serif you typically use.
| | 01:50 | So it's a way of sort of protecting
ourselves, in case that particular machine
| | 01:54 | doesn't have a font installed.
| | 01:56 | Now the issue with what we're doing
here though is that we're using Web fonts.
| | 02:00 | Web fonts basically allow you to
use nonstandard fonts, fonts that don't
| | 02:04 | have to be installed on a client machine.
| | 02:06 | In this case we're going to
be hosting them ourselves.
| | 02:08 | So here I need to define a
font stack that isn't already
| | 02:12 | here inside Dreamweaver.
| | 02:13 | Well, the nice thing is I'm free to just
type whatever font stack I want in.
| | 02:17 | What I'm going to do is I'm just
going to click right here for Font-family.
| | 02:20 | I'm going to type in the word Bitter
with a capital B, Georgia, Times, serif.
| | 02:30 | Now as you can imagine, if you have to
do that every single time you declare a
| | 02:34 | font inside this dialog box,
that's going to get pretty tedious.
| | 02:38 | Well, one of the really nice things
that we have here in CS6 is we have this
| | 02:41 | little icon over here that says Add
Font to Favorites and when I do that,
| | 02:45 | as soon as I click that, that's going
to place the stack that we just wrote
| | 02:49 | within that pulldown menu.
| | 02:50 | So now every single time, and it doesn't
matter whether it's this file or a file
| | 02:54 | ten weeks from now, when I come back
into Dreamweaver, that's going to be
| | 02:58 | available to me in my font
stack, which is excellent.
| | 03:01 | I love that feature, and
I'm really happy to see that.
| | 03:03 | The next thing we're going to do is
we're going to define the size of the font.
| | 03:06 | Now for this font, we
want the font to be 1.6ems.
| | 03:10 | Now I'm free to go ahead and grab ems
from this pulldown menu of units of
| | 03:14 | measurement, but if you're in a hurry and you
like doing things quickly, you can just do this.
| | 03:18 | You can type in 1.6, no space, just
type an em and hit Tab, and it's just
| | 03:23 | going to tab it over.
| | 03:24 | Now be very careful when you're
entering in values in this dialog box,
| | 03:28 | not to hit Enter or Return, because if you do,
it's likely going to go ahead and close
| | 03:32 | this dialog box thinking that you're just
saying, okay, you're finished with the rules.
| | 03:35 | So be very careful about that.
| | 03:37 | Tab is your friend here.
| | 03:38 | Don't hit an Enter or a Return.
| | 03:40 | Tab from one value to the next, if
you continue to want to move around.
| | 03:43 | Now for Line-height I'm going to grab
Line-height, and move it 45px, again,
| | 03:47 | I'm just going to do px right beside it.
| | 03:49 | That's going to ensure
that we have pixels there.
| | 03:51 | And so that's all I need for my fonts.
| | 03:53 | The rest of these
properties I'm just not going to set.
| | 03:55 | The next thing I'm going
to do is go to Background.
| | 03:56 | I want these guys to have a
background image behind them.
| | 04:00 | Again, it's one of the really nice
things about this particular dialog box.
| | 04:03 | I can click on the Category and I can
see kind of all of the things that are
| | 04:05 | available to me, Background-color, image,
whether that background image should
| | 04:09 | repeat, all sorts of things.
| | 04:11 | So this is really easy to work with.
| | 04:12 | I'm just going to browse out and what
I want to do is I want to go in the 06_03
| | 04:17 | folder because that's the one
we're working with right now.
| | 04:19 | I want to open up the images directory,
and inside images, what I want is
| | 04:24 | I'm looking for this one
right here, diag_pattern.png;
| | 04:27 | that's the one I want.
| | 04:28 | I'm going to click OK and then I do
want that to repeat, so I'm not going to
| | 04:32 | select anything on Background-repeat.
| | 04:34 | The default is for it to repeat, so I
don't need to actually explicitly ask for that.
| | 04:38 | Finally, the last thing I'm going to do
is I'm going to come over here into the
| | 04:41 | Box category and in the Box category
I'm going to turn Padding, which is the
| | 04:46 | interior space of an element.
| | 04:47 | I'm going to turn off Same for all and
I'm going to do a Padding Left of .6ems,
| | 04:52 | so it's going to push the edge of the
text away from the edge of the Info box.
| | 04:59 | Now if you ever want to sort of
preview what the style is going to look like,
| | 05:01 | you can always click Apply before you click OK.
| | 05:03 | As soon as I click Apply, you're going
to get a nice sort of preview of what
| | 05:07 | this is going to look like.
| | 05:08 | Now because I don't have Live view
turned on, it's not 100% exactly what it's
| | 05:13 | going to look like, but it's very, very close.
| | 05:14 | Now I noticed something right off the
bat by doing this, I forgot to do color.
| | 05:19 | So that's one of the things I like about
that Apply button is when you click on that,
| | 05:22 | you can sort of say, is that the
way I want it to look? No, it's not.
| | 05:26 | Okay, let's go fix something.
| | 05:27 | So I can go right back up to the Type
Category and that's where I'd find Color
| | 05:31 | and I'm just going to type in the
word white and hit tab and now when I hit
| | 05:35 | Apply again, I can see that my
headlines are white, so that's perfect.
| | 05:38 | So now I know it's exactly the
way I want it and I can click OK.
| | 05:41 | Now if you ever do close out of that
dialog box by mistake, don't worry.
| | 05:45 | You can come right back over to the
CSS Styles panel, you can find the rule
| | 05:49 | that you just created and double-clicking it
should bring that Info box right back up again.
| | 05:53 | So you can just pick up where you left off.
| | 05:55 | Now I do want to point out something
that carries over from the previous movie.
| | 05:58 | You'll notice that if we look in our CSS
Styles, this rule that we just created,
| | 06:03 | section.info h2, notice its location.
| | 06:06 | It's just below section.info.
| | 06:08 | The reason that it's located there is
because I had clicked right on this and
| | 06:13 | focused on that rule before I created a new one.
| | 06:16 | So if you're focused on a
rule within a style sheet,
| | 06:18 | and you create a new CSS rule using this
icon, it's going to place it just below
| | 06:23 | the rule that you were focused on.
| | 06:24 | Now if you don't see yours there, and
it ended up towards the bottom of your
| | 06:28 | styles, don't panic.
| | 06:30 | I'm going to show you guys how to
organize your styles and move them around
| | 06:33 | within your CSS Styles panel, so that
you don't have to resort to going ahead
| | 06:36 | and doing that by hand.
| | 06:38 | Now I feel like I need to point out,
there are a lot of other options for
| | 06:41 | creating CSS rules in Dreamweaver.
| | 06:43 | And in fact, we're going to explore
exactly how to create rules via the
| | 06:46 | Properties Inspector a little
bit later on in this chapter.
| | 06:49 | However, the ability to go ahead and
create these rules visually is a very
| | 06:52 | powerful option in Dreamweaver, especially
for those of you that are new to CSS
| | 06:56 | and maybe you're not fully comfortable
yet with all the properties that are
| | 07:00 | available to you when you're creating rules.
| | 07:02 | I do feel like I need to point out
however that this dialog box isn't
| | 07:06 | appropriate for all instances, as there
are properties that aren't available as
| | 07:11 | options that exist within CSS, so not
everything is contained within that dialog box.
| | 07:16 | For those instances, the CSS will need
to be created by hand, which is really
| | 07:20 | just yet another reason for making sure
you become comfortable with CSS syntax.
| | Collapse this transcript |
| Organizing styles| 00:00 | It's not uncommon to add
styles throughout your project.
| | 00:02 | It's actually really quite rare for a
designer to sit down and write all the
| | 00:06 | styles for a site in one sitting.
| | 00:08 | Yeah, most of the time it's a very
organic process and because of this,
| | 00:12 | it's very easy for styles to become unorganized
or for them to gain unnecessarily in size.
| | 00:18 | The organization of styles
is incredibly important.
| | 00:20 | Not only will it help you maintain and
update the site a little bit later on,
| | 00:24 | but it also prevents style conflicts
from causing major problems in your files.
| | 00:28 | In this movie, I want to show you
how to use the CSS Styles panel
| | 00:32 | to keep your styles organized.
| | 00:34 | To do this, we're going to be working
in the index file from 06_05 folder.
| | 00:39 | I'm going to modify my CSS
Styles panel a little bit here.
| | 00:42 | I'm going to take this Properties pane
and I'm going to minimize that all the
| | 00:46 | way down to where it's
just not even visible anymore.
| | 00:49 | And the reason for that is because we
have a lot of styles in this file.
| | 00:52 | We're going to be moving some around, and
I want to have enough visual space in order
| | 00:56 | for me to do that in a fairly efficient manner.
| | 00:58 | Well, I notice that we
have two things going on here.
| | 01:00 | We have an external main.css file and
then we have some embedded styles within
| | 01:05 | this particular document.
| | 01:06 | If open those up, I could see that
they're all classes, and for the most part
| | 01:10 | they aren't classes such as this one,
homeHeader, that apply to this file,
| | 01:14 | but there are the ones such as course,
orange, blue, lavender, those apply to
| | 01:18 | everything within the site.
| | 01:19 | So there's really no reason
for them to be just on this page.
| | 01:23 | It's not a very efficient way of handling those.
| | 01:25 | I actually need those selectors inside
my main.css file, so that the rest of my
| | 01:30 | site can benefit from them and it's
going to also help with my organization.
| | 01:34 | So I need them moved from my
styles here up into main.css.
| | 01:40 | Now one way for me to that would
be to go to the actual code itself.
| | 01:44 | I could switch over to Code view, I
could go up to the styles themselves,
| | 01:48 | and then I could just copy and paste them
where I needed them within main.css.
| | 01:52 | And that really doesn't take probably
that long, but one of the really nice
| | 01:56 | things about the CSS Styles panel is
that I can move rules around, not only
| | 02:01 | within one style sheet, but from one
style sheet to another, which is an
| | 02:05 | amazingly powerful feature.
| | 02:07 | So what I'm going to do is I'm going to
go ahead and select the first four classes.
| | 02:12 | Now I can do that by clicking on one,
holding the Shift key down and clicking on
| | 02:15 | the last one, so these four,
course, orange, blue, and lavender.
| | 02:20 | I'm going to expand main.css, because
this is going to help me decide exactly
| | 02:24 | where to place these.
| | 02:25 | And then I'm going to take these four
that I've selected, hold the mouse down
| | 02:29 | and I'm going to drag up.
| | 02:30 | Now you'll notice that as I begin to
drag up, I see this blue bar that shows up
| | 02:34 | as I'm scrolling through.
| | 02:36 | Essentially what that's telling you is
okay, if you let go of the mouse, this is
| | 02:40 | where those selectors are going to be copied to.
| | 02:43 | I'm going to go all the way up to the top,
so that it scrolls a little bit and
| | 02:46 | then I'm going to find these
section of classes right here.
| | 02:49 | Now because I wrote the style sheet,
I happen to know that this section of
| | 02:53 | styles is in a little session called
global classes, and that's what these guys are.
| | 02:58 | So even though I wrote these styles and
I created a section of global classes,
| | 03:03 | for whatever reason, as I was working
maybe with this page, I went ahead and
| | 03:06 | created more classes and
embedded them in this file.
| | 03:09 | So now at this point, I need to
reorganize my styles and make sure
| | 03:12 | they're in the right place.
| | 03:13 | So I'm going to move them up just below
where it says .more and as soon as I let
| | 03:17 | go of the mouse, I can see that it
adds those selectors right there.
| | 03:21 | Now what Dreamweaver just did
for me was a very physical thing.
| | 03:25 | If I look back in the Source Code,
if I switch back over to the Source Code,
| | 03:29 | I now notice that those
selectors are not there anymore.
| | 03:33 | They're not there any longer.
| | 03:34 | If I go over to main.css and I scroll
into these global classes, I can see
| | 03:41 | there are course, orange, blue, and
lavender, they've been physically moved
| | 03:45 | from one style sheet to another and I was able
to do all of that without going into the code.
| | 03:49 | That's a pretty powerful feature.
| | 03:51 | Now I'm going to complete this by
going down to the homeHeader, which
| | 03:55 | really belongs to a different set of styles
and I'm going to click on that and move
| | 03:59 | this up into where the other header styles are.
| | 04:03 | And as I scroll this up, I can see
right here we have programHeader,
| | 04:07 | aboutHeader, graphics and request.
| | 04:10 | I'm just going to place it at the
very top of these headers, because
| | 04:12 | it is the homepage, so I'm going to
place it between this programHeader
| | 04:16 | and pageHeader hover style.
| | 04:17 | As soon as I do that, it's going to
physically move it within my styles
| | 04:22 | and I'll notice that the style tag is now empty.
| | 04:24 | Now if that style tag is now empty and
I don't plan on adding anything to it
| | 04:28 | later on, it doesn't really need to be there.
| | 04:30 | So at the current time in the head of my
document, I just have this sort of empty
| | 04:33 | style tag if you will.
| | 04:35 | So again, using the CSS Styles panel,
I can simply click on that, come down to
| | 04:39 | the Trashcan and click, and it's literally
going to remove that from the Source Code.
| | 04:45 | So again, that's just one of the
awesome things about the CSS Styles panel.
| | 04:48 | I can visually and very quickly make
significant edits to my code and organize
| | 04:53 | my styles, which is awesome.
| | 04:55 | Now there are additional things this
allows me to do as well, and I'm guessing
| | 04:58 | that more than one of you, when you're
watching this exercise, because I do this
| | 05:02 | myself, when you were selecting one of
these styles, you probably selected it
| | 05:06 | and clicked it again to move it, and
instead of moving, you saw this. All right!
| | 05:09 | Well, that option allows you to
rename a selector and that's sometimes
| | 05:13 | really, really important.
| | 05:14 | For example, if I scroll down through
my styles, I can find down here towards
| | 05:21 | the bottom this really weird selector here.
| | 05:23 | This selector says body/article #mainContenth2.
| | 05:24 | That's very, very specific.
| | 05:30 | It's applying to any h2 which is inside
of an article with an ID of mainContent,
| | 05:34 | which is inside the body tag.
| | 05:35 | Well, that's way more specific than it needs.
| | 05:37 | Look at all the other selectors around it.
| | 05:39 | They just say article h1, article h3.
| | 05:42 | So I think I got a little overzealous
when I wrote that particular selector.
| | 05:46 | So what I'm going to do is I'm going to
click it once to highlight it,
| | 05:49 | then I'm going to click it again a short time
after that, and when I do that, what that's
| | 05:53 | going to do is it's going to focus
on the actual selector itself and
| | 05:56 | I can rename the selector.
| | 05:58 | What I'm going to do is I'm going to
get rid of everything, except for the h2
| | 06:01 | and in front of the h2;
| | 06:03 | I'm just going to type in article, and
then make sure there's a space between
| | 06:06 | h2 and the article.
| | 06:07 | So what it should read is article space h2.
| | 06:10 | Now you need to be very, very careful
when you do this, because it's so easy to
| | 06:15 | forget a space or not add a space in
the right place or delete the wrong thing
| | 06:20 | and I have something spelled correctly.
| | 06:21 | So when you're writing your selectors
and only when I'm writing in the code,
| | 06:25 | it just seems that I'm paying a
little bit more attention to that.
| | 06:27 | But in this panel, it's sometimes
really hard to tell exactly where spaces
| | 06:31 | and dots are, so you want to be really
careful about that and you want to test those
| | 06:34 | selectors out, before you begin
actually moving on to another task.
| | 06:38 | With that said, I'm going to do Save All,
I'm going to switch this over to Live view,
| | 06:42 | and as I switch it over to the Live view,
if I scroll down, I can see there
| | 06:46 | is the selector that we just styled
and the styling is coming through
| | 06:51 | so that worked out just fine.
| | 06:53 | So even if you're the type of person
that enjoys hand-coding, managing and
| | 06:56 | organizing your styles through the CSS
Styles Panel is often actually faster,
| | 07:01 | to be honest, although you should
strive to author your styles with
| | 07:05 | a clear strategy and attempt to keep
them organized as you work.
| | 07:09 | I mean, let's be honest, it's the real world.
| | 07:11 | It's nice to know that even if things
get a little out of hand, you can use the
| | 07:15 | CSS Styles panel to bring order back
to your chaos, without requiring an
| | 07:19 | all-night coding session.
| | Collapse this transcript |
| Modifying style properties| 00:00 | Tweaking styles as you work is just a
fact of life. You're often going to have
| | 00:04 | to revisit existing styles and rules
and modify them based on design decisions
| | 00:09 | or other factors you have going on at the time.
| | 00:12 | Now thankfully, editing an existing rule
and modifying the style property is an
| | 00:16 | extremely easy thing to do
with the CSS Styles panel.
| | 00:20 | So, I have the index once again open
here from the 06_06 directory in there.
| | 00:24 | A couple things are going on here,
I want to switch over to the Live view
| | 00:27 | and show you what it is that we need to fix.
| | 00:29 | One, you may have noticed in last exercise,
the header graphic is not showing up.
| | 00:33 | So we're missing our branding image here.
And if I scroll down I can see it
| | 00:39 | may not appear at first glance that
anything wrong here, but to this headline;
| | 00:44 | Fall registration is now open and
Victor Stuesse winning the Lacie Awards.
| | 00:48 | Both of those aren't the font nor
the size that I want them to be.
| | 00:52 | I need to change both of those things.
| | 00:54 | Now I'm going to turn Live view off.
I'll scroll back up.
| | 00:57 | I need to focus on each of
those regions individually.
| | 01:00 | All right, so the first thing I'm going
to do is I'm going to scroll through all
| | 01:03 | of my styles and I want to find this home-header.
So that's where the background graphic
| | 01:07 | should be displaying, so that image
that we're looking for is actually
| | 01:10 | a background image. And once I select
that rule, I need to take a closer look at
| | 01:15 | the property, so I'm going to
take this divider move back up again.
| | 01:18 | Now, you may have remembered from an
earlier movie that when we look at the
| | 01:21 | properties of rule by highlighting it
the way we're here, we have the option
| | 01:26 | of changing those properties.
| | 01:27 | And if I click on this to change the URL,
because obviously it's pointing to the
| | 01:32 | right graphic, main_back, but the
location here is wrong, it's going up like two
| | 01:36 | directories and looking for
images, and that's incorrect.
| | 01:39 | So, I could change that, but I
don't get an option here to browse.
| | 01:43 | Now I'm free to go ahead and type this in.
| | 01:44 | So, if you know the path, if you have
that path memorized or you know the exact
| | 01:48 | file or you know kind of what's wrong,
you can make that change manually.
| | 01:52 | But in this case, what if you don't know it?
| | 01:54 | Well, you either would have to go out
and write it down and then come back and
| | 01:58 | edit it or go in to code.
| | 01:59 | Or you can use option number two, which
is to go up to the rule itself, which is
| | 02:03 | home-header and double-click on that.
Because if you double-click on that,
| | 02:06 | remember, that brings up the CSS Rule
Definition dialog box and this gives us
| | 02:11 | far more manual control over
certain aspects, such as using images.
| | 02:15 | So, if I click on the Background Category,
I can see there's my Background-image
| | 02:19 | and I can actually browse to make sure
I'm resolving that on the right location.
| | 02:23 | So, if I go in the 06_06 folder,
go into Images, and once again I'm going
| | 02:29 | to change my menu here to make this a
little bit easier for me to find, I'm going
| | 02:32 | to scroll down and find this file right
here, which is main_back, I'm going to
| | 02:38 | go ahead and click OK.
| | 02:38 | Now that's the only thing I need to change.
| | 02:40 | I don't need to change any of the other properties.
I'm going to go ahead and click OK.
| | 02:43 | As soon as I do that the image shows
back up again and everything is great.
| | 02:47 | Now I want to point something
out over here in the related files.
| | 02:50 | You can see, we have the option looking
at the Source Code or there's the main.css.
| | 02:54 | You might see that little
asterisk (*) right above the main.css.
| | 02:58 | What Dreamweaver is telling you there
is that, hey, this code has been changed.
| | 03:02 | It's been modified in some way, and it's
letting you know this has been modified
| | 03:05 | since the last time it was saved.
| | 03:07 | It's sort of warning you if you will
that this document currently is in an
| | 03:11 | unsaved state, so if you had a crash
or something would happen, those changes
| | 03:15 | that you just made aren't guaranteed to persist.
| | 03:18 | This is also true, before you upload it,
you might want to save it.
| | 03:20 | So what I'm going to do is I'm just
going to go up to File and choose Save All,
| | 03:24 | that's going to save not only the
current index file, but also the
| | 03:27 | externalmain.css file as well.
| | 03:29 | Okay, now, you don't have to double-click on a
rule every single time you want to edit it.
| | 03:34 | Most the time you'll be able to edit
straight from the Property section over here.
| | 03:37 | I'm going to scroll down and find
headline that we need to change and
| | 03:41 | I'm going to click inside that.
| | 03:42 | Now the reason I want to click
inside this and then select the h2 tag
| | 03:46 | is remember it makes it little
bit easier to find that rule.
| | 03:49 | You know earlier we were sort of scrolling
up or down, there are lots of rules
| | 03:52 | in the style sheet, and lot of times
you're going to spend half your time
| | 03:56 | scrolling up and down, trying to find the
right rule or find where that rule is organized.
| | 04:00 | So, the best thing to do if you want
to target something very quickly is to
| | 04:04 | click inside of it, use the Tag Selector
to select the element that you're targeting,
| | 04:08 | in this case the h2 and then you can
just switch over to the Current rule.
| | 04:12 | When you switch over to the Current rule
right here in this middle pane, you can
| | 04:16 | choose the selector that you're looking for.
| | 04:17 | So you may even have multiple
selectors that apply to that particular element
| | 04:21 | and apply their styles in sort of a
cumulative fashion, but you still filter
| | 04:25 | through the rules that are applying to it,
to find exactly what you're looking for.
| | 04:28 | In this case, its article h2,
that's the one I want.
| | 04:31 | Okay, one of the first thing I want to
do is I think the font size is a little
| | 04:34 | large, at 2ems, so I'm going to
change that, I'm going kick that down little
| | 04:37 | bit to maybe 1.5ems.
| | 04:38 | So I can just click right here in the
value for a font size and I can choose 1.5ems.
| | 04:44 | Now I also want to set the font, the
font isn't correct either, but I notice
| | 04:49 | that property is not
currently part of this rule.
| | 04:52 | So in order to change that, this time
I'm going to click to add a property, and
| | 04:56 | again, I can add a property from this
pull down menu or I can simply type it in,
| | 05:00 | if I know what property I want to add.
| | 05:01 | In this case I want to add font-family,
and then if I hit Tab, it takes me over
| | 05:08 | to the value side of the Property's
dialog here and now I can grab the pull-down
| | 05:13 | menu and choose from the list
that we were working with earlier.
| | 05:17 | Now if you member earlier, I wrote out
Bitter, Georgia, Times, and serif as the
| | 05:21 | font stack that I want to be able
to use, and I saved it as a favorite.
| | 05:25 | By saving that as a favorite within that
dialog box, that means that anyplace in
| | 05:30 | Dreamweaver, Code Hinting, over here in
CSS Styles panel, whether I'm actually
| | 05:34 | hand-writing the code, it's going to
make that available to me, so that is a
| | 05:37 | really neat feature and something
you should take advantage of.
| | 05:40 | In this case I'm going to choose Bitter,
Georgia, Times, serif, and we have it,
| | 05:43 | I'm going to do Save All again, and
then I'm going to turn on the Live Preview
| | 05:47 | and I'm going to check out
the changes that we've made.
| | 05:49 | So, there is our background graphic,
it's appearing, and now the headline over
| | 05:53 | here is the proper font and
the proper size that I needed.
| | 05:57 | You know, so far we focused on the
CSS Styles panel and its considerable
| | 06:01 | abilities to write, organize and
manage styles within your sites.
| | 06:05 | However, it's not the only place that
you can edit your styles in Dreamweaver.
| | 06:09 | And in our next movie we're going to
explore one of those alternate methods as
| | 06:13 | we use the Properties Inspectors to control CSS.
| | Collapse this transcript |
| Controlling CSS through the Property inspector| 00:00 | While the CSS Styles panel is where
you're going to be doing the majority of
| | 00:04 | your CSS related tasks in Dreamweaver,
the Properties Inspector allows you to do
| | 00:08 | a fair amount of CSS based work as well,
and sometimes in a much more direct
| | 00:13 | fashion then the CSS Styles panel.
| | 00:16 | It is important to note however, that
without understanding what the Properties
| | 00:19 | Inspector is doing in regards to CSS, you
can cause some major issues within your site.
| | 00:25 | So let's take a moment to examine how the
Properties Inspector works with your site's CSS.
| | 00:31 | I'm on the programs.htm page, which can
be found within the programs directory
| | 00:36 | of the 06_07 subfolder and I'm just
going to click in this first link right here
| | 00:41 | for Academic Links because there's a very
small change that I want to make to this,
| | 00:45 | and really usually when I use the
Properties Inspector to modify my CSS,
| | 00:50 | it's for a small incremental, sort of
these immediate changes I want to make,
| | 00:54 | not really these large edits on style.
| | 00:57 | So usually it's for really small,
very quick things that I want to do.
| | 01:00 | Okay so I've clicked inside this first
link where it says Undergraduate Degrees
| | 01:04 | and I'm going to go look
at the Properties Inspector.
| | 01:06 | Now, remember there are two
tabs on the Properties Inspector.
| | 01:09 | There's HTML and there's CSS.
| | 01:11 | I want to make sure that I'm
looking at the CSS tab here.
| | 01:15 | When I do that, I see a couple of things
going on but the first thing that grabs
| | 01:18 | your eyes, especially if you're a
graphic designer coming from another program
| | 01:23 | like InDesign or something like that, is
we see this section right over here on
| | 01:27 | the right-hand side, that allows us to
choose a Font, a Size, a Color and you're
| | 01:32 | going to be tempted the first
time you open up Dreamweaver and
| | 01:35 | start working with it is to highlight an
element on the page, and begin formatting it.
| | 01:39 | But it doesn't quite work that way.
| | 01:41 | You'll notice that if you hover
over one of these properties,
| | 01:44 | let's say this Font property.
| | 01:45 | If I hover over in here it, I get this
little tool tip that comes up and tells me,
| | 01:48 | The property 'font-family' is
inherited from the rule, and then it just goes
| | 01:53 | on this really long sort of CSS
reset that I have in my Styles.
| | 01:56 | If I hover over Size, it tells me The
property 'font-size' is inherited from the
| | 02:01 | rule 'section.info li' and if I
hover over the Color that tells me it's
| | 02:06 | inherited from the rule A. So I've got
three separate properties, that are being
| | 02:11 | basically inherited or applied or
styled if you will, from three separate
| | 02:16 | different selectors and that's actually
quite common in files where you have CSS
| | 02:20 | applied because you would like to write
your rules as globally as you can, and
| | 02:23 | have those properties inherit.
| | 02:25 | It's just a much more efficient way of working.
| | 02:27 | So it's very tempting to just come
over here and change something but you're
| | 02:30 | have be aware of where
the styling is coming from.
| | 02:32 | The other thing that you want to be
aware of is if you do make a change,
| | 02:36 | what rule is that going to be changing.
| | 02:38 | We found that out by coming right over
here to the Targeted Rule pulldown menu.
| | 02:43 | You can see that by clicking on any of
the elements on the page, this Targeted
| | 02:47 | Rule is going to change to
reflect what you've just selected.
| | 02:51 | So by clicking into this first link
in this Academic Links sidebar,
| | 02:55 | it's targeting the rule that's applying to any
of those links which are inside of one
| | 02:59 | of the Info sections.
| | 03:00 | Now if that's what I want, and in
this case it is, I leave that alone.
| | 03:04 | But it's not what I want you'll
notice that I can grab that pulldown menu.
| | 03:08 | I'm going to scroll all the way to
the top and just sort of move down.
| | 03:11 | You'll notice that I can apply to
any rule that's within the Cascade that
| | 03:15 | applies to where I'm focused, and what
that means is, I'm not going to see every
| | 03:19 | single selector in my CSS.
| | 03:20 | I'm only going to see the selectors that
apply to the element that I'm focused on.
| | 03:24 | So it helps you sort of filter it out,
so that you don't have to guess which
| | 03:27 | rules are applying here.
| | 03:28 | The next thing you can do is you
can create a brand new CSS rule.
| | 03:31 | So if you want to create a new rule
targeting this element, I can do that.
| | 03:35 | You can also apply what's known as an
Inline Style and it's worth noting this is
| | 03:38 | the only automated way within
Dreamweaver to create an Inline Style.
| | 03:41 | Any other way you are going to have to
do it by hand. An Inline Style is style
| | 03:45 | that's written within the
tag itself as an attribute.
| | 03:47 | So I would go into that link tag and then use
a Style Attribute and then write my selector.
| | 03:52 | That's one way to do that.
| | 03:53 | Or I can apply a class, so I could take
any other classes that have been written
| | 03:57 | in the CSS, and I can apply those as well.
| | 03:59 | Well I'm actually quite happy
with the Targeted Rule the way it is.
| | 04:02 | So I'm going to leave that alone.
| | 04:03 | So the next thing I'm going to do is
instead of just telling it to inherit
| | 04:07 | whatever default font I've placed on
the body tag, I want to grab that pulldown
| | 04:11 | menu and I'm actually going to choose
that Bitter, Georgia, Times, serif stack
| | 04:16 | that we created earlier
and put it in our favorites.
| | 04:18 | So again, it's another great reason to
use that favorites list because you get to
| | 04:22 | choose that wherever you are within Dreamweaver.
| | 04:24 | So as soon as I select that, it's
going to change the font over here, and the
| | 04:28 | other thing it does for me is it tells me,
when I hover over this, that now that
| | 04:32 | property 'font-family' is inherited
from the rule "section.info li a.
| | 04:36 | So this is the rule that we were targeting.
| | 04:39 | So even though it was inheriting it
from that long CSS reset before,
| | 04:43 | changing that property isn't necessarily going
to change it in terms of the rule that's
| | 04:48 | originally inheriting it from.
| | 04:49 | It's going to change it, based on
what's over here in the Targeted Rule.
| | 04:53 | Now you can see that the options
that we have here in terms of formatting
| | 04:55 | are fairly limited.
| | 04:56 | We only Fonts, Font Size and Color,
we also have the ability to do Bold,
| | 05:00 | Italic and change the Alignment, but for the
most part, very small subset of properties.
| | 05:06 | What if you want to edit more than that?
| | 05:08 | Well, you could switch over to the CSS
Styles panel, or based on what rule you
| | 05:12 | have selected in Targeted Rule, if you
click Edit Rule, that's going to bring up
| | 05:15 | the CSS Rule Definition dialog box.
| | 05:17 | So it's going to give you very quick access
to much broader range of choices for you.
| | 05:23 | Now if you do decide that you want to
go to the CSS panel, you can just click
| | 05:26 | right here on the CSS panel button,
and it's going to jump to the current
| | 05:30 | view of the CSS Styles panel, and it's going
to focus on whatever element you have selected.
| | 05:34 | Now you may or may not have seen that
particular button enabled or not.
| | 05:39 | You'll notice that the CSS Styles panel is
currently open, doesn't matter if you're
| | 05:42 | looking at the All or the Current rule.
| | 05:44 | If it's open and you click on elements that
button does not highlight, it's not selectable.
| | 05:49 | However, if I minimize the CSS Styles
panel, or if I close it altogether, now
| | 05:54 | when I click on an element I can go back,
activate the CSS panel button and jump
| | 05:58 | to the current view.
| | 05:59 | So it's one of the things where the
circumstances have to be exactly right,
| | 06:03 | in order for that particular
functionality to present itself.
| | 06:06 | So using the Properties Inspector to speed
up your CSS workflow makes a lot of sense.
| | 06:10 | But as you can see, you really need to
be aware of exactly which rule you're
| | 06:14 | adding to or editing, as
you use it to modify your CSS.
| | 06:18 | Now my guess is that as your command over
CSS grows and you get more comfortable,
| | 06:22 | structuring the styles within
your site, you'll find the Properties
| | 06:26 | Inspector an indispensable
part of your day-to-day workflow.
| | 06:29 | Initially however, I really want to
caution you to be careful when using it,
| | 06:33 | so you don't make unintended
changes throughout your site.
| | Collapse this transcript |
| Attaching external style sheets | 00:00 | So, how do you go about giving your
styles into an External StyleSheet
| | 00:04 | and then attaching them to the Page?
| | 00:05 | Dreamweaver makes that process pretty
seamless and gives you a tremendous amount
| | 00:09 | of flexibility and control over it.
| | 00:11 | You can create CSS file separately and
then attach them to your HTML pages or
| | 00:16 | or you can create CSS files as
you create rules for your site.
| | 00:20 | As usual, which method you use
will largely depend upon your
| | 00:23 | Personal Preferences.
| | 00:25 | Now you may notice something little
different about the programs.htm file here
| | 00:28 | and that's that it doesn't have
any styles applied to it whatsoever.
| | 00:32 | So, basically it is style-free for most
the part and what I want to do is start
| | 00:36 | attaching some External StyleSheets.
| | 00:38 | I just basically want to go through
some of the different ways that you can do
| | 00:41 | that by first creating a couple
of Test StyleSheets if you will.
| | 00:44 | So, I'm just going to go up to
Dreamweaver File>New>New CSS File.
| | 00:49 | So you can create these
separately from your HTML if you want.
| | 00:53 | You can just start working on your CSS
and I'm going to go ahead and create that.
| | 00:56 | And just for brevity's sake, I am
going to do a very simple rule here.
| | 00:59 | I am just going to do a Paragraphs Selector.
| | 01:01 | Inside the Paragraphs Selector I am just
going to set the color something like red.
| | 01:06 | So I am going to save that.
| | 01:07 | And what I am going to do is I am going
to go in to this news 06_08 directory,
| | 01:10 | which is the one we're working in.
| | 01:12 | And I want to go into the _CSS folder
and I am just can call this
| | 01:15 | test.CSS and click Save.
| | 01:19 | Now I'll close that, I don't need to
have the CSS file open in order to attach
| | 01:24 | it to one of the html files we are working with.
| | 01:26 | All I need to do that is the CSS Styles panel.
| | 01:29 | So, if I go over the CSS Styles panel,
I can see down the bottom right hand
| | 01:33 | corner, I've got the
little Attach StyleSheet icon.
| | 01:35 | I am going to click on that.
| | 01:37 | And when I do that I get a chance to
Browse out to the file that I am looking for.
| | 01:40 | So I want to Browse out to the 06_08 directory,
I am going to go inside the CSS folder
| | 01:46 | and I am going to Find
the test that we created earlier.
| | 01:49 | So I am going to go ahead and grab that,
click OK and now I'm presented with
| | 01:52 | a few more choices.
| | 01:53 | Now the first choice is whether
I want to link this or import this.
| | 01:57 | It is a big difference. Link is going
to use a Link Tag in the head of my
| | 02:01 | Document and it's going to point
to the External CSS Reference File.
| | 02:04 | Import is actually going to place a
Style Tag ahead of my Document and use the
| | 02:10 | @import syntax in order to bring it in.
| | 02:13 | Really there are some just very
specialized usages of the import syntax,
| | 02:17 | so unless there's a reason
for you not to, use Link.
| | 02:21 | Now the next thing that allows
me to do is choose Media Type.
| | 02:23 | So I can grab that pull-down menu and
I could choose any Media Type I want.
| | 02:28 | Now if you have used a previous version
of Dreamweaver, you'll probably notice
| | 02:31 | wow there is a lot more in
there now than it was before.
| | 02:34 | Well that's because Dreamweaver now
supports media query syntax which has a lot
| | 02:39 | more Media options to choose from.
| | 02:41 | I am just going to go down and
choose Screen and then click OK.
| | 02:44 | As soon as I do that it attaches the Style Sheet.
| | 02:48 | If I go under the Source Code, I can
see there is a Link Tag that we just
| | 02:52 | created through that process.
| | 02:54 | And now all of my paragraphs are red
which is exactly what we're going for.
| | 02:58 | All right, I am going to delete this
StyleSheet, I am going to click on it right
| | 03:01 | over here in the All view of my CSS Styles panel.
| | 03:04 | And then just click the Trashcan icon.
| | 03:05 | Because I want to show you an
alternate method of doing the exact same
| | 03:08 | thing that we just did.
| | 03:10 | If I go over to my CSS Styles panel
unless I don't have any Styles applied.
| | 03:14 | I can come down and create a brand New
CSS Rule and when I do that I can say,
| | 03:18 | Okay, I just want to do Tag Selector
and I wanted to the Paragraph Tags.
| | 03:21 | So we're just going to do
the same rule we did before.
| | 03:23 | Now after that it's going to say,
well, where do want to place that rule?
| | 03:26 | And if you don't already have a
Style Sheet attached, it's going to prompt you to
| | 03:29 | do either in this document only which
will do embedded styles, or you can prompt
| | 03:34 | it to create a new Style Sheet file.
| | 03:35 | So you can sort of do this all at once
and not have to do in separate steps.
| | 03:39 | So as soon as I click OK, it's
going to prompt me to save this.
| | 03:42 | This time I am just going to do a test 2.CSS.
| | 03:46 | And I'm just going to change once again
color to something like red and I'll click OK.
| | 03:51 | Now notice that as soon as I
did that it did two things for me.
| | 03:55 | It created the link in head of the
document to that test 2 CSS file and it also
| | 04:00 | created the first rule inside it as well.
| | 04:02 | So that way, if you're creating a
brand New StyleSheet from scratch, you know
| | 04:06 | it's a lot quicker and a lot
easier in terms of getting it done.
| | 04:09 | I don't know if you notice this or
not however, there is one crucial thing
| | 04:13 | missing from that particular workflow.
| | 04:15 | You'll notice that we were
not able to choose a media type.
| | 04:19 | So we couldn't do any type of
media declaration to the rule.
| | 04:22 | Now you certainly we could go into the
code and add that yourself little bit
| | 04:25 | later on, but that's something that you
need to be aware of in case you thinking
| | 04:28 | of adopting that particular method.
| | 04:30 | Ok I am going to go and delete
this one and we're going to attach our
| | 04:34 | actual Style Sheets.
| | 04:35 | So now that we know kind of different
methods that we have in terms of attaching
| | 04:38 | a Style Sheet, it becomes pretty easy to do.
| | 04:40 | First I'm going to do to Save All to get rid
of those Links that we're not using anymore.
| | 04:44 | And the next thing I am going to do is,
I am going to attach the Style Sheet and
| | 04:48 | I am going to Browse Out into our CSS directory.
| | 04:50 | And this time, I am going to choose
the one that was already sitting in
| | 04:52 | there for main.CSS.
| | 04:55 | Now instead just grabbing the Media
pull-down menu this time and choosing
| | 04:58 | a Single Media type.
| | 04:59 | You're also allowed to enter in a comma
separated list or even if you guys are
| | 05:03 | working with media queries, you can even
type of media query directly into this.
| | 05:07 | So I am just going to type in
screen, projection and then click OK.
| | 05:11 | And as soon as I do that I see all my
styling show up the way that I expected to,
| | 05:16 | Main.CSS shows up over here on the side.
| | 05:20 | And if I go in the Code view again I'll
see that link with my media type applied
| | 05:25 | to it as well and I am going to do a Save All.
| | 05:28 | And it's a very quick and easy Way to go
grab a Style Sheet that you already have
| | 05:32 | and attach it to the page.
| | 05:34 | Now you could always a hand code
the link into the Style Sheet as well.
| | 05:38 | It's a simple element and Dreamweaver's
Code Hinting will even help you Browse
| | 05:42 | for the correct CSS file as you link out to it.
| | 05:45 | But in the end, like many of the options
inside Dreamweaver, the method that you
| | 05:49 | choose to use will largely be
based on Personal Preference.
| | Collapse this transcript |
| Using CSS visual aids| 00:00 | When designing pages it's sometimes
extremely helpful to note what you're
| | 00:04 | looking at, or what the properties of an
element are without having to resort to
| | 00:08 | using one of the panels that
we've been using up 'till now.
| | 00:11 | Dreamweaver has several visual aids
that you can use to assist you, when
| | 00:15 | designing your pages with CSS.
| | 00:18 | So with the programs.htm file open from
the 06_09 directory, and we're just going
| | 00:23 | to show off some of the visual aids here.
| | 00:25 | Now, I of course had the foresight,
because I'm the one writing the tutorial, right?
| | 00:29 | But I'd the foresight to go
in and turn all of them off.
| | 00:31 | So your preview screen may
look a little different than mine.
| | 00:34 | I just want show a couple of
these visual aids off to you.
| | 00:36 | So in doing that I turned them all off
and I'm going to turn them on at a time.
| | 00:40 | So you can see kind of what those things are.
| | 00:41 | Now you'll also notice that I'm in
Design view and I'm not in Live view.
| | 00:46 | So I've got Live view turned off and
I'm in Design view, so that I can sort of
| | 00:49 | see the visual rendering on the page.
| | 00:51 | Alright, so our visual aids are
accessible through a couple different places.
| | 00:55 | You can go upto the menu and go to View.
| | 00:56 | But probably the easiest place to grab
them is right here in the Document toolbar.
| | 01:00 | You can see this little
pull-down menu with the eye.
| | 01:02 | I'm going to grab that and I'm just
going to start kind of in the bottom
| | 01:05 | and work my way up.
| | 01:06 | Now we have a lot of different Visual Aids,
but in terms of CSS Visual Aids,
| | 01:11 | we have pretty much stuff for these guys.
| | 01:13 | Although, I guess you could select AP
Elements Outline as being one of those as well.
| | 01:16 | If you do any absolutely positioned element,
it'll give you a nice outline around it.
| | 01:20 | So as a matter of fact, you can see
that right here, that is an absolute
| | 01:23 | positioned element and
that's the outline around it.
| | 01:26 | Okay, I'm going to turn
on the CSS Layout Outlines.
| | 01:29 | Now the first thing that that does for you,
you are probably used to this view by now.
| | 01:32 | It gives you some dashed (-) lines
around the different elements on the page.
| | 01:37 | So it's very easy for me to tell,
when I'm looking at one container element
| | 01:41 | versus another, and as I hover over
those lines you'll see that it'll turn red
| | 01:45 | indicating I can select that particular element.
| | 01:48 | So a lot of times when you're dealing
with more complex layouts where you have
| | 01:52 | a lot of nested elements inside of elements,
this is a really handy thing to turn on,
| | 01:56 | because it makes it very easy to tell
kind of who you're hovering over
| | 01:57 | and who you're looking at.
| | 01:57 | The next tool, I want to show you is a
Layout Box Model, and it sort of goes
| | 01:59 | hand-in-hand with these layout outlines.
| | 01:59 | You'll notice now, that if I hover over
one of these elements, and let's say
| | 02:27 | I selected like this main article.
| | 02:28 | As soon as I select it, instead of
just selecting the element now, I get
| | 02:29 | this sort of these little
diagonal lines inside of it.
| | 02:30 | And these diagonal lines are indicating
to me, the amount of padding and margins
| | 02:31 | that an element has.
| | 02:32 | If I hover over that area you can see, as a
matter of fact, it says Padding: 16 pixels.
| | 02:33 | So the more I go over an element,
when I hover over an element,
| | 02:35 | I'm getting some of the box model
properties of that specific element.
| | 02:38 | When I go over the contents of that article,
I get more information about the article itself,
| | 02:42 | what type of tag it is,
what type of box model positioning.
| | 02:46 | In this case, it's Floating to the left.
| | 02:48 | The width of that applied to as well.
| | 02:50 | So that's a, extremely useful feature.
| | 02:52 | The next thing I am going to do, I'm
going to go upto my Visual Aid menu again,
| | 02:55 | and I'm going to choose
the CSS Layout Backgrounds.
| | 02:58 | Now, you may find this useful or not,
when you turn this on all of your
| | 03:02 | background images and all of your
background colors that you've assigned through
| | 03:05 | CSS are going to go away, and what
you're going to see, is you're going to see a
| | 03:09 | semi-opaque background that's applied to
the elements itself, and it's just kind
| | 03:14 | of letting you know where those regions are.
| | 03:17 | So you can very quickly and easily
scan through the page, and tell that these
| | 03:22 | headlines and these two columns
are inside of an element.
| | 03:26 | We can also tell that these links
are inside their own regions as well.
| | 03:30 | We can also tell how these regions are
being positioned, and the amount of space
| | 03:34 | between them, which is really
hard to do when this is turned off.
| | 03:36 | If I turn these back off for example you
can see that other then the outlines,
| | 03:40 | I really don't have anything
visually letting me know, that info.
| | 03:43 | So it's a very nice quick
and easy way to scan it.
| | 03:45 | Now one thing you need to know about that,
is as soon as I turn it on, I get a
| | 03:49 | different set of colors every time.
| | 03:51 | So there's a random algorithm that
determines what these colors are going to be.
| | 03:55 | So it would be lovely if you're like,
hey, every single time you find the
| | 03:59 | element named Info it would
give this background color.
| | 04:02 | But they don't quite work that way.
| | 04:04 | They're really for just sort of a
quick visual survey if you will.
| | 04:06 | I'm going to turn those off, and I'm
not going to turn this on, but this option
| | 04:10 | Fluid Grid Layout Guides, if you
use the new Fluid Grid feature inside
| | 04:13 | Dreamweaver, it's going to give you
basically an overlay of columns on your page.
| | 04:18 | When you resize your layout
elements, it's going to help you
| | 04:23 | snap to those particular column.
| | 04:24 | So this is very useful if
you're using Fluid Grids.
| | 04:27 | Now there's one more feature that I want
to show you guys, that's not really one
| | 04:31 | of these contained within the menu.
| | 04:32 | If I go up to View and I turn my Rulers on.
| | 04:36 | So I'm going to go down towards bottom here
to Rulers, and I'm going to tell it to Show.
| | 04:40 | You can see that I get rulers above this.
| | 04:42 | Now this is quite common for anybody
that's ever used Photoshop, Illustrator,
| | 04:45 | InDesign, programs like that.
| | 04:47 | You're used to having those rulers, and
if you're used to having those rulers my
| | 04:50 | guess is that you're used to being able
to drag guides out from those rulers as
| | 04:54 | I'm doing here, and place them on the page.
| | 04:56 | Now I absolutely love the guides in Dreamweaver.
| | 04:59 | I wish other programs had
guides as powerful as Dreamweaver.
| | 05:02 | That sounds like a ridiculous
statement to make, but it's true.
| | 05:06 | Notice that as I mouse over these areas,
it's snapping right to the edge of
| | 05:10 | those elements, and notice that as I'm
dragging out the guide it tells me where
| | 05:15 | I'm at, position-wise, on the page.
| | 05:17 | So as I drag these guides out, it's
telling me exactly where I am and what
| | 05:23 | I'm lining up with.
| | 05:24 | So as I continue to drag these out,
you'll notice that I'm getting really
| | 05:30 | precise measurements.
| | 05:31 | Now above and beyond that, check this out.
This blows my mind. I love this.
| | 05:35 | If I mouse over an area where I have
some guides on the page, and I hold down
| | 05:40 | the Ctrl Key on a PC or the
Cmd Key on the Mac, look at that.
| | 05:44 | I get measurements between the guides.
| | 05:47 | Let's say I mouse inside this and turn
this on, I can see that the height of
| | 05:51 | these undergraduate degrees, all these
links is 24 pixels, and I can see the
| | 05:55 | width of the box, there inside of is 318 pixels.
| | 05:59 | That is really cool.
| | 06:00 | Again I wish other programs
will allow us to do that.
| | 06:03 | Now the one really big downer to using
these really cool CSS Visual Aids
| | 06:08 | is that as soon as I go up and turn
Live view on, they all go away.
| | 06:12 | So while those ruler guides are
amazing, and they're very powerful.
| | 06:16 | Since the Design view does such a
poor job of showing you what the layout's
| | 06:21 | actually looking like of the large part,
unless you're using extremely simple
| | 06:25 | CSS you probably won't find
a whole lot of usage in them.
| | 06:29 | You will find usage out of things like
these CSS Layout Elements though in the
| | 06:32 | box model properties.
| | 06:33 | That's really useful, but unfortunately
for the most part I don't use the guides
| | 06:37 | a whole lot, because well, it's not
an accurate representation of what my
| | 06:41 | layout's going to be.
| | 06:42 | So while the CSS Visual Aids in Dreamweaver
are powerful, that lack of support
| | 06:46 | for them in Live View means they're
not as effective as you'd want to them to be
| | 06:49 | when planning and testing your layouts.
Thankfully Dreamweaver does have
| | 06:53 | a few more tricks up its sleeve when
dealing with Live view and we're going to
| | 06:57 | explore that in our next movie,
as we use the CSS Inspect feature.
| | Collapse this transcript |
| Using CSS Inspect | 00:00 | Live view is amazing at helping you understand
how your layout will look in most browsers.
| | 00:04 | But trying to troubleshoot
your CSS can be frustrating.
| | 00:08 | As the CSS visual aids that we
covered in the last movie are disabled
| | 00:12 | when you are in Live view.
| | 00:13 | Well, that's where CSS Inspect comes in.
| | 00:16 | CSS Inspect let's you do just that;
inspect the elements on the page and visually
| | 00:22 | explore the box model properties
that have been set on the elements.
| | 00:26 | As you'll see, it's an invaluable
way to troubleshoot layout issues.
| | 00:30 | So I have the spotlight.htm file open
and that can be found in the 06_10 folder.
| | 00:36 | And I have Live view turned on.
| | 00:38 | Now if I just scroll around my page you
know everything looks for the most part okay,
| | 00:42 | but I notice a couple of things
right off the bat that are troubling.
| | 00:46 | I have too much space between the
headline and the student's name.
| | 00:50 | And everywhere between the elements
I have this sort of three pixel spacing
| | 00:55 | that creates the look and feel borders
around them, but towards the bottom here,
| | 00:58 | I notice that the space between the
footer and elements above it was actually
| | 01:02 | probably about double that.
| | 01:03 | So I have some problems
there that I need to track down.
| | 01:07 | Now with a really complex layout like
this one where you have a lot of elements
| | 01:10 | on the page and lot of positioning
going on, it can be very difficult to track
| | 01:14 | that down, it can also be really
difficult to sift through all the styles
| | 01:18 | we have over here and find
out what we are looking for.
| | 01:20 | Now we learned a little bit earlier how
to focus on an element and how to go to
| | 01:23 | the CSS Styles panel and
see what its properties are.
| | 01:27 | That's one way to start
troubleshooting something like this.
| | 01:30 | But it's a little bit more helpful
if you know exactly which elements
| | 01:33 | are causing the problem.
| | 01:34 | So what I am going to do is I am going
to come up to my document tool bar and
| | 01:38 | I am going to turn on Inspect mode.
| | 01:39 | Now the only time you are going to
see that particular button, that Inspect
| | 01:42 | button, is when Live view is on, when
Live view is off it doesn't show up.
| | 01:46 | So I am going to turn Live
view on and then click Inspect.
| | 01:49 | Now Dreamweaver is going to give you
this little message that says Inspect mode
| | 01:53 | is most useful with certain workspace settings.
| | 01:55 | What it really wants you to do is have
the CSS Styles panel open in one side and
| | 01:59 | have the code open on the other, which
is fine. It works fine, it works fine that
| | 02:02 | way because you're able to
kind of switch back and forth.
| | 02:05 | But I'm really more interested right
now in getting a nice overview of the page
| | 02:08 | so I am not going to turn that on.
| | 02:10 | So as I mouse around I begin to see
things you know I am not clicking on
| | 02:14 | anything I am just mousing over
elements, that's how you want to use Inspect.
| | 02:17 | But I see overlays when I
start mousing over elements.
| | 02:20 | And I see these overlays I see
different kind of colors show up.
| | 02:24 | Well, what we are looking at is we are
looking at the Box Model properties and
| | 02:27 | that would be the Content,
the Margins and the Padding.
| | 02:31 | So let's say I mouse over
this image of Gerald Chow.
| | 02:34 | All I see is this translucent blue and
sometimes it can look kind of green to
| | 02:38 | depending upon what color of background
you are over, that indicates content.
| | 02:42 | But if I mouse over student spotlight,
I see this little yellow band down below,
| | 02:46 | now the yellow indicates margins.
| | 02:49 | And if I mouse up just so that I'm sort
of in the parent elements the div with a
| | 02:54 | class of students that's
applied, I see all three.
| | 02:57 | On the left hand side down here in
the left corner, I see sort of that blue
| | 03:00 | color which indicates content.
| | 03:02 | I see on the far right hand side a
yellow which indicates a really big margin
| | 03:06 | which is pushing this over.
| | 03:08 | And then on the top and on the
interior right side of it I see sort of this
| | 03:13 | magenta color and that's padding.
| | 03:15 | So I'm seeing all those elements.
| | 03:17 | So, who is in charge of all
the space between these guys?
| | 03:21 | Well, if I hover over the name Gerald
Chow I can see there's a fair amount of
| | 03:24 | padding on top of that.
| | 03:26 | If I hover over Student Spotlight I can
see that there's a little bit of yellow
| | 03:31 | margin below that and if kind of go
back and forth between those two I can see
| | 03:35 | that those are touching each other.
| | 03:37 | So they are actually both
responsible for all that space.
| | 03:40 | I have a little bit of a margin below
the Student Spotlight that actually looks
| | 03:43 | pretty good, I probably
don't want to get rid of that.
| | 03:45 | But this extra spacing that's caused
by padding that's probably the culprit.
| | 03:49 | Now, what if I scroll down and
start going over elements on the bottom.
| | 03:55 | Well if just over the image and just
see the image if I come down a little bit,
| | 03:58 | then I get a paragraph and if I go
over to the left hand side, then I finally
| | 04:03 | get this Container element and I can
see that little margin that goes below it.
| | 04:07 | But that margin that goes below it
doesn't actually extend down in to the footer.
| | 04:11 | So that tells me this is not the problem.
| | 04:12 | And the one beside it is not the problem
and the paragraph is not the problem.
| | 04:17 | Well, a lot of times, again when
you're dealing with these complex structures
| | 04:20 | it's really difficult to tell who is
at fault or even which element might be
| | 04:24 | causing the problem.
| | 04:25 | So you end up mousing around a lot,
trying to find out who it is and you know
| | 04:30 | the footer is not it because I
don't have any margin above the footer.
| | 04:32 | So let me show you a really neat
way to deal with nested elements when
| | 04:36 | you're using CSS Inspect.
| | 04:37 | Now I want to make a point of saying
this because I'm betting that a few of you
| | 04:40 | that are watching this exercise with me
and doing it along with me, have sort of
| | 04:44 | disabled CSS Inspect sort of unwittingly.
| | 04:47 | If you ever click on an element,
essentially what Dreamweaver does is it
| | 04:51 | establishes focus on that
element and it turns Inspect off.
| | 04:54 | So as I begin to hover around
anymore, I'm not seeing it any more.
| | 04:57 | If that happens to you,
don't panic it's not a big deal.
| | 05:00 | All you have to do is get right back
up to Inspect, turn it back on again
| | 05:04 | and you're back in business.
| | 05:05 | So if I hover over a nested element
like this photograph for example,
| | 05:09 | I am seeing the contents of the photographs.
| | 05:11 | But I can also start using my Arrow keys.
| | 05:13 | If I hit my left Arrow key I go back
outward to the parent that it sits inside of,
| | 05:19 | in this case it's a div with
class of artwork and I can use
| | 05:23 | my Tag Selector to see that.
| | 05:24 | If I hit my left Arrow one more time it
goes further up the tree to its parent.
| | 05:27 | Now look, see this is the article with
an ideal spotlight and sort of everything
| | 05:32 | sitting inside of it I can see that it
has a margin that's pushing down a little
| | 05:36 | bit and it's actually touching the footer.
| | 05:39 | And if you hit your right Arrow
key you'll go back down the tree.
| | 05:42 | If I had to guess out of these elements,
I would say that last one is causing the problem.
| | 05:48 | So now by using CSS Inspect, we get a
nice visual overview of all the Box Model
| | 05:54 | properties the elements have applied to them.
| | 05:56 | And it's really easy for us to
troubleshoot and find out who is causing
| | 06:01 | issues within our layout.
| | 06:02 | So now that we know the elements that
are causing the problems, correcting them
| | 06:07 | will actually be pretty easy.
| | 06:08 | Now I know that often it seems like
people kind of hype features,
| | 06:13 | they hype it more than maybe it deserves.
| | 06:14 | But I am being incredibly honest with
you here when I say that I view the
| | 06:19 | CSS Inspect feature as an
invaluable part of my style and workflow.
| | 06:22 | If you've ever used Firebug, Opera's
Dragonfly or Webkit Inspector you know they
| | 06:28 | have a similar feature to CSS Inspect.
| | 06:30 | However, when Dreamweaver's CSS Inspect
is combined with another feature which is
| | 06:35 | the Code Navigator they become an
indispensable tool for inspecting
| | 06:39 | and troubleshooting your styles.
| | 06:41 | So in the next movie, I am going to
show you the Code Navigator and
| | 06:45 | how it works with CSS Inspect.
| | Collapse this transcript |
| Using the Code Navigator| 00:00 | In our last movie, I showed off CSS Inspect,
which allows you to preview the Box
| | 00:05 | Model properties of elements while in Live view.
| | 00:07 | In this movie, I want to show you another
feature that I consider to be equally,
| | 00:11 | if not more important, to your daily
styling workflow and that's the Code Navigator.
| | 00:17 | The Code Navigator gives you an easy
way to access and modify your styles,
| | 00:21 | from anywhere in your document, without
having to know exactly which rule is
| | 00:26 | controlling the element from within your styles.
| | 00:28 | As your site gets more complicated,
it's not unusual to have styles in
| | 00:32 | various places throughout your site.
| | 00:34 | All coming together at run time
to determine the final rendering.
| | 00:37 | Because of this it can often be very
difficult to know exactly which rule to
| | 00:41 | modify to achieve the desired results.
| | 00:44 | The Code Navigator can help
you narrow that process down.
| | 00:47 | Now, I actually know of no other feature
that's been as unfairly vilified as the
| | 00:52 | Code Navigator and let me show you why.
| | 00:54 | I have the spotlight file here open
from the 06_11 folder, and you can see
| | 01:00 | I've got Live view turned off at the
moment, but if I click on an element
| | 01:02 | watch what happens.
| | 01:03 | There's a little bit of a
delay and then, that happens.
| | 01:07 | Okay, we saw that a little bit
earlier in the title, but that is the
| | 01:10 | Code Navigator icon.
| | 01:12 | If I hover over that, it says Click the
indicator to bring up the Code Navigator.
| | 01:15 | Well, most the time if people
don't actually use that,
| | 01:18 | they get over-frustrated with that.
| | 01:20 | So that when you mention the Code Navigator
to them they go oh, the Code Navigator.
| | 01:23 | I hate that thing.
| | 01:25 | Well they hate it because it's intrusive.
| | 01:27 | But just because it's
intrusive doesn't mean it's bad.
| | 01:29 | As a matter fact, I can click this,
and we did this a little bit earlier.
| | 01:32 | But I can click this and here
the Code Navigator comes up.
| | 01:35 | So notice what's nice about the
Code Navigator is that I get a list of
| | 01:39 | all-of-the selectors that are
applying to the element that I'm focused on.
| | 01:43 | So I get the cascade of all the selectors.
| | 01:45 | But more than that, if I hover over
those cascades, I get to see the properties.
| | 01:50 | So I can tell for example, if something
has a margin that's causing me problems,
| | 01:54 | I can begin to go through the
cascade and find out where that margin is.
| | 01:58 | In this case, this would be the margin
causing you the issue, because it's the
| | 02:02 | farthest one down the cascade.
| | 02:03 | If I want to find out where an
element's getting its color from,
| | 02:07 | I can just continue to go up until I find
Color in which case, I know it's on
| | 02:10 | that particular element.
| | 02:11 | Now obviously, having this icon come up
every single time you click on an element
| | 02:15 | isn't probably the way you want to work,
because you're not always working with Styles.
| | 02:20 | So I'm going to disable this by clicking the
checkbox over here on the right hand corner.
| | 02:24 | At that point, let's say
I click in the paragraph here.
| | 02:27 | I don't see the Code Navigator
icon come up anymore.
| | 02:30 | If I want it, it's very easy to access.
| | 02:33 | On the PC all I have to do is hold the
Alt Key down and click on an element.
| | 02:38 | Boom, comes right back up.
| | 02:39 | If you're on a Mac you're going to
hold down the Opt+Cmd Key and click
| | 02:44 | and boom, it's going to come right back up.
| | 02:46 | So it's very easy to bring back
and that's the way it typically work.
| | 02:49 | I'll turn off that indicator in any
time I need it, I'll just use the keyboard
| | 02:52 | shortcut to click on an element
and then bring this back up again.
| | 02:56 | Okay now in our last movie, I mentioned
that when you combine this with CSS Inspect,
| | 02:59 | it becomes really powerful workflow
for troubleshooting your pages.
| | 03:03 | So let's take a look at how that works.
| | 03:05 | I'm just going to click off to the site here,
and I want to turn the Live view back on.
| | 03:08 | Not only do we want to turn the Live view
on I'm going to turn Inspect back on as well.
| | 03:12 | So I've Inspect on, and to make life a
little bit easier for me, I'm going to go
| | 03:15 | over to my panel dock and
I'm going to minimize that.
| | 03:17 | So I've a little bit more room here.
| | 03:20 | Now I'm doing that because I don't
have quite as much screen real estate
| | 03:23 | as would have if were at full
resolution and you may not need to do that.
| | 03:26 | But I just want to give myself a
little bit more room, because in a moment
| | 03:29 | we're going to be looking at a Split
Screen view of the code on one side,
| | 03:34 | and the Live view on the other.
| | 03:35 | Alright so as I hover over elements
again I'm trying to find the culprit for
| | 03:39 | the spacing between these two, that's a
little off and we know it's this Gerald Chow
| | 03:43 | because when I hover over that, this
text here I can see that it has a large
| | 03:47 | amount of padding on top of it,
that it frankly doesn't need.
| | 03:50 | Alright so the inspector's done its job.
| | 03:52 | Now it's time for the
Code Navigator to do its job.
| | 03:55 | So what I'm going to do is,
I'm going to use my hotkey.
| | 03:57 | I'm going to hold down the Alt Key.
| | 03:59 | Remember on the Mac that's going to be
Cmd+Opt, and then I'm simply going
| | 04:02 | to click this element.
| | 04:04 | When I do that that brings up the Code
Navigator, and I can begin the find the
| | 04:07 | rule that has that padding.
| | 04:09 | If I go down to the very first rule,
the bottom rule, the last one that's
| | 04:12 | being applied the div.students p. I can see
that that has the padding-top of 16 pixels.
| | 04:18 | That's what I want to change.
| | 04:20 | Well to change it, all I have
to do is click on that rule.
| | 04:23 | The moment I click on it, it opens up the
CSS code and it jumps right to that rule.
| | 04:28 | So I don't even have to know where in
my hundreds or even thousands of lines
| | 04:32 | of code exactly where that rule is.
| | 04:35 | I can find that padding-top.
| | 04:36 | I can go ahead and use
backspace to just get rid of that.
| | 04:40 | You can do Save All, and then when
I click back on to Design view, I can see now
| | 04:45 | that spacing issue has been resolved,
and I'm just going to sort of move this
| | 04:48 | over just a little bit so that the
code isn't taking up quite as much room.
| | 04:51 | Remember as soon as you select an element or
focus on something, CSS Inspect is turned off.
| | 04:56 | So every time I want to use it, I just
have to go back up and turn it back on again.
| | 04:59 | Now I'm going to scroll down, and I'm
going to hover over, any one of these
| | 05:03 | pictures will do really, because
I'm going to use my Arrow keys now.
| | 05:06 | I'm going to just start arrowing back,
until I get to this article spotlight,
| | 05:12 | and now once again, I can
use my keyboard shortcut.
| | 05:14 | I can hold down the Alt Key,
Cmd+Opt on the Mac, click one time and
| | 05:18 | as soon as I do that I can go right
here to this article#spotlight selector.
| | 05:23 | I can see that it has a margin-bottom
of 3 pixels applied to it.
| | 05:26 | I click on that and I can
change that from 3 pixels to 0.
| | 05:30 | I need it to be 0 because I need to
overwrite that margin in another one.
| | 05:34 | So it's not good enough to just to delete that.
| | 05:36 | All I'm going to do is Save All, we'll
click back into Design view, you can see
| | 05:40 | that extra spacing goes away and that is fixed.
| | 05:44 | So with CSS Inspect turned on,
you can mouse around your file.
| | 05:48 | You can then hold down the Alt Key,
click on an element, find the exact
| | 05:52 | selector with the property that you're
looking for, click on that and jump to
| | 05:56 | it directly in your code.
| | 05:57 | There is no faster way of going through
your files and troubleshooting layout,
| | 06:02 | or typography issues or anything.
| | 06:04 | It's just a great way of working.
| | 06:06 | Now CSS Inspect does not need to be
turned on in order to use the Code Navigator.
| | 06:11 | So I have Inspect turned off now, and
if I were just doing something with like
| | 06:15 | typography and I want to know what
size this particular headline was,
| | 06:19 | I can still just hold my Alt key down or
my Cmd+Opt key, Click, find the
| | 06:23 | selector that has font size applied to it.
| | 06:26 | Jump right to that one and
then I could modify the font size.
| | 06:28 | So, CSS Inspect doesn't have to be
turned on, in order to use the Code Navigator.
| | 06:33 | It's just the two of them make an
extremely powerful combination,
| | 06:37 | when you use them together.
| | Collapse this transcript |
|
|
7. Working with ImagesManaging assets in Dreamweaver | 00:00 | In this chapter, we're going to
talk about working with images
| | 00:02 | within Dreamweaver.
| | 00:04 | Now, before we discuss placing and
modifying images on your pages, I want to
| | 00:08 | take a moment to talk about managing your
images in Dreamweaver using the Assets Panel.
| | 00:13 | The Assets Panel provides you with a
nice central location to manage and control
| | 00:17 | a number of assets including images.
| | 00:19 | It allows you to organize your images,
place images directly on the page by
| | 00:23 | dragging-and-dropping them, gives you a
thumbnail preview, and it also displays
| | 00:27 | additional image information.
| | 00:29 | So you notice, for this particular
exercise, I don't have a file opened.
| | 00:33 | Well, I don't need to, because what I
am going to do is I am going to show you
| | 00:35 | guys the Assets Panel just make sure
that if you're following along with me with
| | 00:39 | Exercise Files that you have the
site defined to the 07_01 folder.
| | 00:45 | So you just need to make sure that,
that folder is defined as the root
| | 00:48 | folder for the site. Okay.
| | 00:50 | Now, I'm going to expand my panel dock
a little bit to give my Assets Panel a
| | 00:54 | little bit more room, so we can see
everything that it has going on, and then
| | 00:57 | I am going to click on the Assets Panel,
it's typically right beside the Files Panel.
| | 01:01 | And if you don't see it, remember you
can always go up to Window and you can
| | 01:04 | choose Assets right there. Okay.
| | 01:07 | So the first thing I am going to show
off about the Assets Panel is that on the
| | 01:10 | left-hand side, we have a series of
icons here that allow you to manage and
| | 01:14 | control different types of assets.
| | 01:16 | So things like Flash movies, and
external script files and things like that, you
| | 01:20 | can manage directly from the Assets Panel.
| | 01:23 | Now, the top icon is the one that deals
with images and since that's what we're
| | 01:26 | focusing on in this chapter,
make sure you have that selected.
| | 01:29 | Now, what you're going to see in the
Assets Panel is every single image in your site.
| | 01:33 | You will notice that the majority of my
images are found within the directory _images.
| | 01:37 | However, some of them are found
in a directory called _assets.
| | 01:41 | So it doesn't really matter where
within your site your images are located, the
| | 01:45 | Assets Panel is going to show that for you.
| | 01:47 | It's also going to show you the name
of the image, the dimensions of it, so
| | 01:50 | it's a very quick and easy way to tell
what the dimensions of any of the images
| | 01:54 | that you are working with are going to be, the
size, what type of file, and the full path of it.
| | 01:58 | So you get a lot of information out
of the Assets Panel just by sort of
| | 02:02 | scanning through it.
| | 02:03 | Another nice thing that I really love
about the Assets Panel, you will notice
| | 02:06 | you can resize the sort of top window.
| | 02:09 | If I click through these, it gives
me a nice preview of the image itself.
| | 02:13 | So if I'm curious about one, you'll
notice for example that I have a bunch of
| | 02:17 | them here named feature1 feature2, if
I remember the image that I want, but I
| | 02:21 | don't remember what I named it, but I
knew it was one of those feature images, I
| | 02:24 | can simply click one time, and
highlight those and go through them, and find
| | 02:28 | which image I was looking for.
| | 02:29 | So I really like that feature,
I think that's really cool.
| | 02:32 | Now, another thing that you're going to
notice is that we have two radio buttons
| | 02:35 | at top, one says Site, and
the other one says Favorites.
| | 02:39 | If I click the Favorites radio
button, this is totally empty.
| | 02:41 | Essentially, favorites is a way for you
to filter out your images if you have a
| | 02:45 | site that has say hundreds of images
in it, looking for exactly the right one
| | 02:49 | within your Assets Panel
can be really, really tricky.
| | 02:52 | So they give you the sort of
Favorites as a way of organizing your images.
| | 02:57 | Let's go ahead and test out using that,
and what we're going to do, I am going
| | 03:00 | to flip over to Favorites, and I am
going to create a couple of folders.
| | 03:03 | Down there in the lower right-hand
corner, I have a few icons, and one of them
| | 03:07 | will be New Favorites folder, I am
going to click that, I am going to title the
| | 03:10 | first one banner, and then I am going
to add another folder, and I am going to
| | 03:14 | call this folder spotlight, there we go!
| | 03:18 | Now, you can arrange directory
structures any way that you want, you can even
| | 03:21 | have folders inside of
folders here, that's fine.
| | 03:24 | But, I want to point out something, I
want to be really clear about something.
| | 03:26 | This is not creating a
folder on your hard-drive.
| | 03:29 | The only place this is creating a
directory and organizing something is
| | 03:32 | right here in this panel.
| | 03:34 | So you're not going to be moving
images on your site, you are not going to
| | 03:37 | be changing your directory
structure at all, you're simply adding
| | 03:41 | organization within this panel.
| | 03:42 | Okay, I am going to go back to my Site
radio button here so I can see all of
| | 03:46 | the images in my site.
| | 03:48 | And what I want to do now is I want
to go through these accent photos.
| | 03:51 | These are the photos that we're using
for the banners at the top of the page.
| | 03:55 | So I want to make all of
those part of my favorites.
| | 03:58 | So I am going to select all of those,
and I am going to scroll down, and find
| | 04:02 | this main_back as well.
| | 04:04 | So I am going to hold the Ctrl or the
Command key down, and click on that one,
| | 04:08 | so that I've selected all of those
at once, so sort of a noncontiguous
| | 04:11 | selection if you will.
| | 04:13 | And I notice at the very bottom right-hand
corner of the Assets Panel, there's a
| | 04:16 | little ribbon with a Plus symbol on it.
| | 04:18 | If I find that I can click on that,
and that is the Add to Favorites.
| | 04:22 | So if I click on that, Dreamweaver
is going to let me know that hey!
| | 04:25 | Those images have now
been added to the Favorites.
| | 04:27 | Now, if you find this message
annoying, you can always turn that off.
| | 04:30 | Okay, if I click over on Favorites,
here are all my banner images.
| | 04:33 | Now, I want the spotlight images as well.
| | 04:35 | So, if I go back to site, those are
those featured images, and I'm going to show
| | 04:40 | you a couple of different
techniques to get an image over in Favorites.
| | 04:43 | First, you can just highlight an image
or multiple images, you could right-click
| | 04:48 | them, and you can choose Add to
Favorites, so that's an option.
| | 04:51 | But, you even add something to the favorites
without actually being in the Assets Panel.
| | 04:55 | If I switch to the Files Panel, and I
open up the _images directory, you can see
| | 05:00 | here, if I select the remaining feature
graphics, in this case, feature2 through
| | 05:04 | 9, if I grab those and right-click,
you can see, right there Add to Image
| | 05:09 | Favorites is available to
me in the Files Panel itself.
| | 05:13 | So that's really nice.
| | 05:13 | You don't even have to be in the Assets
Panel in order to declare an image a favorite.
| | 05:17 | So now I want to go back to
Assets, and click on Favorites.
| | 05:21 | I can see that I'm not looking at
quite as big a list as I was before.
| | 05:25 | Of course, you can also see that
as you begin to add images to your
| | 05:28 | favorites, you can get pretty
cluttered over here too, and that's the reason
| | 05:32 | we created those directories.
| | 05:33 | So now what I can do is I can
highlight all those banner images, and put them
| | 05:37 | in the banner folder, and I can
highlight all of those featured images, and put
| | 05:42 | them in the spotlight folder, and I
can take that main_back and put it in the
| | 05:45 | banner folder as well, so you can organize
these into these directories anytime you want.
| | 05:49 | And at this point, I can close those
directories and then open them up whenever
| | 05:53 | I want, I can select those images and
take a look at them, and scan through them
| | 05:56 | if you will anytime I want to.
| | 05:57 | Now, at this point, I have the
full range of features of working with
| | 06:02 | images whether I'm looking at the Full Site
View, or whether I'm looking at my Favorites.
| | 06:06 | So if I double-click an image, it's
going to open that image up in whatever
| | 06:09 | program in Dreamweaver is defined as the
default editor for that particular file type.
| | 06:14 | Now, you can set that up via
Preference or you can just go with
| | 06:17 | Dreamweaver's default.
| | 06:18 | I am going to switch back to
Dreamweaver here really quickly.
| | 06:21 | Now, there are a few other things that I can do.
| | 06:22 | If I had a page for example, I could
drag-and-drop the image on the page, I
| | 06:26 | could do that, right-clicking an
image in the Assets Panel gives you the
| | 06:29 | ability to edit it as well.
| | 06:31 | You can also do what's known as edit a nickname.
| | 06:34 | If I do a nickname, well, I move it in
favorites, if I click on this, I'm able
| | 06:38 | to give this a nickname like arrows,
and let's say if I grab this one, I could
| | 06:42 | give it a nickname like wall.
| | 06:45 | Now, I'm not actually
changing the name of that image.
| | 06:48 | In the Files Panel, the image
will still be known as feature1.jpg.
| | 06:52 | But, what that does is it gives me a
way to sort of immediately identify what
| | 06:56 | painting or what image that is.
| | 06:58 | So that's actually another nice little
feature of the Assets Panel, if you had
| | 07:01 | this really long name of a graphic or
a confusing name of a graphic, you can
| | 07:06 | give it a nickname here.
| | 07:07 | It doesn't change the name of the
graphic, but it does allow you to identify it
| | 07:11 | in a much easier and more precise fashion.
| | 07:13 | So, the Assets Panel isn't for everyone.
| | 07:15 | I know several designers that
don't use it at all in their workflow.
| | 07:19 | However, for a site where you're going
to be managing images quite frequently,
| | 07:23 | using the Asset Panel to organize and
manage your image assets can really speed
| | 07:27 | up your image related tasks.
| | Collapse this transcript |
| Setting external image editing preferences | 00:00 | One of the nice things about
working with Dreamweaver is how seamlessly
| | 00:03 | integrates with other Creative Suite
applications, so just Photoshop and Fireworks.
| | 00:08 | When working with the images for
your site it's inevitable you need to
| | 00:11 | occasionally Tweak or Edit those images.
| | 00:13 | Dreamweaver makes editing
your image remarkably easy.
| | 00:17 | Often all that's required is a single
click which will then open your image in
| | 00:20 | your favorite image Editing Software.
| | 00:23 | So how does Dreamweaver know which
program to use when editing your images?
| | 00:26 | Well in this movie, we're going to take
a look at how you can set exactly which
| | 00:30 | programs Dreamweaver uses
for Image Editing purposes.
| | 00:33 | It's also extremely easy, all you
need to do is go to the Preferences.
| | 00:37 | So I am going to go up to the Menu, go
to Edit Preferences, of course there is
| | 00:40 | going to Dreamweaver Preferences on
the Mac, and you want to choose the File
| | 00:44 | Types/Editors Category over on the left inside.
| | 00:48 | Now at the top, it talks about what
types of files they Dreamweaver should
| | 00:51 | open up in Code View.
| | 00:53 | But if you look down towards the bottom of
this, we have different file type Extensions.
| | 00:58 | When you highlight them you have a list
of programs over here on the right-hand
| | 01:02 | side, the Dreamweaver
should use to open those files.
| | 01:05 | So I'm going to start off by taking a
look that was common image type used on
| | 01:09 | the Web which is PNG files, GIFs and JPEG's.
| | 01:13 | So for PNG files currently right now
Fireworks is the Primary Editing Program
| | 01:18 | for that and the
Photoshop is a Secondary Program.
| | 01:21 | Now if I have another application that I
like to use above and beyond these two,
| | 01:26 | I'm free to add that.
| | 01:27 | All I've to do is click the Plus
symbol right here, browse out on my
| | 01:30 | computer, find thee
program I want and select it.
| | 01:34 | Now in this case, I am actually
going to change something here by Default
| | 01:37 | Fireworks is the Primary Program for
editing.png files and the reason for that
| | 01:41 | is because Native Fireworks Files
have a (.png extension) on them.
| | 01:45 | So typically, if you Save a Fireworks
File as (.PNG file) and you have that file
| | 01:50 | in Dreamweaver, you want to go open
backup in the program that you created in.
| | 01:55 | But in this case I have several PNG
files that actually have a Photoshop file as
| | 01:59 | a Source File and I would rather a
single click giving me a Photoshop.
| | 02:03 | Rather than having to
choose Photoshop from a list.
| | 02:06 | So what I am going to do is I am going
to select Photoshop and then I'm going to
| | 02:08 | tell to make Primary.
| | 02:10 | You'll notice that now Dreamweaver is
reporting to me that Photoshop is now the
| | 02:13 | Primary Image Editing Program for png files.
| | 02:16 | For gifs I can see the Photoshop is
already the Primary and for jpeg it's
| | 02:21 | the Primary as well.
| | 02:22 | So I'm really going to be Photoshop for this
particular project to edit all my image files.
| | 02:27 | Now as I mentioned before, you're free
to change that, you're free to add other
| | 02:30 | programs, that's one of the nice
things about Dreamweaver in terms of the
| | 02:33 | flexibility it gives you,
in setting up your Workflows.
| | 02:36 | I am going to go ahead and click
OK and I just want to test this out.
| | 02:39 | So I've got a spotlight file open from
the 07_02 directory and I am just going
| | 02:45 | to click on any of the images on the page.
| | 02:47 | I can scroll through the page
and select whichever one I want.
| | 02:49 | I'll just going to ahead and grab our
first feature image which is the jpeg.
| | 02:53 | Now I notice that here right here on
the Properties Inspector there is little
| | 02:56 | icon right here that says Edit.
| | 02:58 | Now you can trigger editing in a
couple of different places, the most obvious
| | 03:03 | when you select an image on the page
is the Properties Inspector itself.
| | 03:06 | If I click Edit it's going to open
up this image directly in Photoshop.
| | 03:10 | But if I go back into Dreamweaver, I
see that if I go over to say the Assets
| | 03:15 | Panel that we were looking at earlier.
| | 03:17 | If I go to over my Site Assets and I
go down here and find the same image
| | 03:20 | which is feature 1.
| | 03:22 | If I double-click that again it's going
launch this image and switch over to Photoshop.
| | 03:26 | If I switch the Files Panel and I open
up the Images Folder, I can scroll down
| | 03:31 | and find the same image Feature 1.
| | 03:33 | And once again, if I double-click that
it's going to switch over to Photoshop,
| | 03:37 | open up the image and allow
me to Edit within Photoshop.
| | 03:40 | So, pretty much at any stage of
being able to interact with an Image File
| | 03:44 | whether it's in the Assets Panel, the
Files Panel or one that you already have
| | 03:48 | on the page, simply right clicking,
double-clicking or choosing the Proper icon
| | 03:52 | is going to take that image and open it
back up in the image editing program of
| | 03:56 | your choice and let you make your changes.
| | 03:58 | Now the single click editing of
images is a fantastic feature.
| | 04:02 | And being able to choose which program
that you use for your imaging, makes it
| | 04:06 | even more powerful
depending upon how you like to work?
| | 04:09 | Now regardless of whether using
Photoshop or Fireworks even Open Source
| | 04:12 | Solutions like GIMP or Acorn, take a second
before starting your next Dreamwear Project.
| | 04:18 | Set your Image Editing
Preferences to the way you like to work.
| | 04:21 | And this is going to make your
Workflow more efficient and save
| | 04:24 | yourself considerable time.
| | Collapse this transcript |
| Placing images on the page | 00:00 | Regardless of what you're doing, having
multiple options for completing the task
| | 00:04 | at hand is a good thing.
| | 00:05 | When it comes to placing images on
the page, you have plenty of options to
| | 00:09 | choose from in Dreamweaver.
| | 00:11 | In this movie, we'll examine
different methods for getting images onto your
| | 00:14 | webpages and discuss the
pros and cons of each one.
| | 00:17 | To do that, I'm going to use two files
this time, so I have the index.htm file
| | 00:21 | open and I have the spotlight.htm file open.
| | 00:25 | You can see, when you've got multiple
documents open in Dreamweaver, you get
| | 00:28 | tabs up here and I can just tab
back and forth between those two.
| | 00:31 | And that's from the 07_03 folder.
| | 00:35 | So the first thing I want to do is show
off placing images onto the page using
| | 00:39 | the Assets Panel that we covered a
little bit earlier in the chapter.
| | 00:42 | So I'm going to scroll down on the index
page until I find the article down here
| | 00:47 | about Victor Stuesse winning the Lacie Award.
| | 00:49 | Now you'll notice that I'm in
Design View but I'm not in Live View.
| | 00:54 | In order to make changes on the page
and place images on the page, Live View
| | 00:57 | needs to be turned off.
| | 00:58 | So I'm going to make sure
I'm looking in Design View.
| | 01:00 | I'm going to go over to the Assets
Panel, and what I want to do is I want to
| | 01:03 | scroll down through my
assets until I find award.
| | 01:06 | Now you may notice that we have two of
these displaying and that may trip you up
| | 01:11 | at first, but the way that our
Exercise Files are structured, we have a
| | 01:15 | finished_files folder,
and I'll show that to you.
| | 01:18 | I'll go over to the Files Panel.
| | 01:19 | You see we have finished_files which
contains the duplicate of the Exercise
| | 01:23 | Files in a finished state and you can
see it also has an images directory with
| | 01:28 | all our images in it as well.
| | 01:29 | So what the Assets Panel is showing you
is, it's showing you all the images in a
| | 01:33 | defined site, not just a specific
folder, so that's why we're seeing two.
| | 01:37 | But you want to make sure you're using
the right one, so what I'm going to do
| | 01:39 | is I'm going to take my Panel Dock here
and I'm going to expand it out a little
| | 01:43 | bit and you can see that as I expand it out, I
get the full path of the images over here as well.
| | 01:48 | So I want to make sure I'm using
the one in the images directory, not
| | 01:51 | finished_files, and for me,
that is the top one right here.
| | 01:55 | So I'm going to do award.jpg. Okay.
| | 01:57 | So with that one selected, what I'm
going to do is I'm literally just going to
| | 02:01 | drag-and-drop it right on the page
right in front of the word Victor.
| | 02:04 | So I can just drag it from the
Assets Panel to the page, place it where I
| | 02:08 | want it, and let go.
| | 02:10 | As soon as I do that, Dreamweaver is
going to prompt me for some alternative
| | 02:13 | text and I'm just going to type in
Victor Stuesse and then I'm going to click
| | 02:19 | OK, and it places the image right on the page.
| | 02:22 | Now that was fairly simple, but there's
another way that you can drag-and-drop
| | 02:25 | images on the page as well.
| | 02:27 | So I'm going to undo that, Ctrl+Z
or Command+Z, flip over to the Files
| | 02:31 | Panel, and this time I can go
straight to the images directory, find the
| | 02:35 | file I'm looking for;
| | 02:36 | in this case, award.jpg, and I can drag-and-
drop that one as well right onto the page.
| | 02:41 | Once again, it prompts me for some alt text.
| | 02:44 | As soon as I enter that in, there's my image.
| | 02:47 | Both of those methods work exactly the same.
| | 02:49 | The only difference of course is that in
the Assets Panel, I get to see a little
| | 02:53 | bit more about the image, I get to
see a thumbnail, that sort of thing.
| | 02:56 | In the Files Panel, I just see
the list of the images. All right!
| | 02:59 | I'm going to save this file and while
dragging-and-dropping is extremely easy,
| | 03:04 | it's so easy just to drag something over,
drop it on the page where you want it and boom!
| | 03:08 | Your image appears, but the biggest
problem with this is that as your layouts
| | 03:12 | get more complex, it's a lot harder to
drag something into a precise location.
| | 03:17 | Indeed, there are some
instances where it's almost impossible.
| | 03:21 | Let me show you what I mean.
| | 03:21 | I'm going to switch over to spotlight.
htm, and in the spotlight.htm, our first
| | 03:26 | image which is going to be of the student,
Gerald Chow, even though the image is
| | 03:29 | going to show up on the right-hand side,
the image itself needs to show up in
| | 03:33 | front of the Student Spotlight div tag.
| | 03:36 | That may seem a little odd, but the
way I've done the layout in terms of the
| | 03:39 | floats, it really sort of
demands that the image be placed there.
| | 03:43 | I also don't want to place the image
inside the div tag because the div tag has
| | 03:47 | a white background which basically
needs to bud up against the image.
| | 03:50 | If the image goes inside that div tag,
it's basically going to expand the height
| | 03:54 | of the div tag and the illusion of
that container is going to be ruined.
| | 03:58 | So to drag the image to the left-
hand side of this element is pretty much
| | 04:03 | impossible because I have a couple of
items sitting on top of this div tag and
| | 04:08 | the Design View is not
rendering it really all that well.
| | 04:11 | So it's going to be very, very difficult for
me to do that through the use of drag-and-drop.
| | 04:15 | But one of the great things about
Dreamweaver is there's always an alternate
| | 04:18 | method of doing something if one
particular technique doesn't work.
| | 04:22 | First, let me show you how to
precisely position your cursor, where you want
| | 04:26 | to place an object.
| | 04:27 | You can see that I have
the student div tag selected.
| | 04:30 | The easiest way to do that, just click
inside of it, and then go down to your
| | 04:34 | tag selector and once again,
click only the div.student tag.
| | 04:38 | It should highlight the entire div tag and you
should see the outline all the way around it.
| | 04:42 | Well, once you have an element selected,
you can use your Arrow keys to move
| | 04:46 | your cursor to the immediate right or
to the immediate left of an element.
| | 04:50 | So what I'm going to do is I'm
going to hit my Left Arrow key.
| | 04:53 | That's going to move my
cursor over before that element.
| | 04:56 | Now what's really odd about this in
terms of the way Dreamweaver is displaying
| | 05:00 | this, is the cursor looks like it's
just sort of blinking right there in front
| | 05:04 | of the S, but in reality, your cursor is
just to the left of the entire div tag.
| | 05:09 | So this is more really of a
rendering error than anything else.
| | 05:12 | You just sort of have to trust it.
| | 05:14 | Now of course once you place your
cursor in a precise location like that,
| | 05:16 | it's really important not to click on the
document itself or hit any of your Arrow keys.
| | 05:21 | You want to make sure that
the cursor stays right there.
| | 05:23 | Okay, I'm going to go over to my Assets
Panel, I'm going to open this up again,
| | 05:26 | and what we're looking for
this time is the chow.jpg file.
| | 05:30 | Now I'm going to click that once to
highlight it and I'm going to use the top
| | 05:33 | one because it's the one from my
images directory, not the finished_files.
| | 05:36 | And when I select this, this time
instead of dragging-and-dropping it, I'm going
| | 05:40 | to right down to the bottom of the
Assets Panel and I'm going to click the
| | 05:43 | Insert button right there.
| | 05:45 | So if you have your cursor in a
location where you want your image to show up,
| | 05:49 | you don't need to worry
about trying to drag-and-drop it.
| | 05:51 | All you need to do is click the Insert button
and it's going to place the image on the page.
| | 05:55 | Now I'm just going to go ahead and do
a quick alt tag here, Gerald Chow, and
| | 05:59 | the image shows up.
| | 06:00 | Notice that it comes on the left-hand
inside and it is before that div tag.
| | 06:05 | As a matter of fact, you could switch to
Split Screen View, and you could verify
| | 06:08 | that that the image is
indeed coming before the div tag.
| | 06:11 | Now if it didn't work out for you,
just undo it and try it again and just
| | 06:15 | double-check to make sure that you're
selecting the div tag not inside the div
| | 06:20 | tag and that you hit your Left Arrow key.
| | 06:22 | Now we're going to have another
opportunity to practice this again because I'm
| | 06:25 | going to show you another way to get
an image on the page without using the
| | 06:29 | Files Panel or the Assets Panel.
| | 06:31 | So I'm going to undo that, I'm going
to switch back over to Design View, and
| | 06:35 | once again, I'm going to click inside
the div tag and then I'm going to click
| | 06:38 | the div tag itself and then
I'm going to click my Left Arrow.
| | 06:41 | Again, that's the easiest way in
Design View to place your cursor in a very
| | 06:45 | precise location within the code.
| | 06:47 | Now the next thing, I'm going to do is
I'm going to go up to my Insert toolbar
| | 06:51 | which is right up here up top and
depending on your workspace, it may be docked
| | 06:55 | above your CSS Styles Panel.
| | 06:57 | You can always go to Window>Insert
to open it up if you don't see it.
| | 07:00 | And there's a little category of
objects right here in the middle of the Common
| | 07:03 | objects and it deals with images.
| | 07:05 | Now, if I grab that pulldown menu, the first
option there is to insert an image on the page.
| | 07:10 | Now the thing that I like about this
technique versus using the Assets Panel
| | 07:14 | or the Files Panel itself is that when I do
this, I get the option to browse for that image.
| | 07:20 | Now in addition to browsing for the
image which allows you to go to the precise
| | 07:23 | location that you're looking for, there
are some other things going on here that
| | 07:27 | I want to point out to you.
| | 07:28 | First, I'm going to scroll
down and find the chow.jpg.
| | 07:31 | Notice that as soon as I select this,
I get to go down here and see how it's
| | 07:36 | going to resolve the URL.
| | 07:37 | What I mean by that is I get to see the
path where it's going to point to this
| | 07:41 | image from the file I'm currently in.
| | 07:43 | I could also change whether it's a
Document or a Site Root relative link.
| | 07:47 | Now for the most part, that's not
going to be that important to you, but if
| | 07:50 | you're working with certain blogging
platforms or certain types of content
| | 07:53 | delivery networks, being able to do a Site
Root relative path is actually pretty nice.
| | 07:58 | And finally, the last thing here that I want
to talk about is being able to use Data sources.
| | 08:02 | So what's really nice about this is
if you had a database of images and you
| | 08:06 | wanted to pull, let's say I had 15
different students within a database
| | 08:10 | somewhere, I could click on the Data
sources, tell it where to go, and have it
| | 08:14 | bring in a dynamic image on my page,
which is really cool and that's something
| | 08:18 | that you cannot do using the
Files Panel or the Assets Panel.
| | 08:21 | So I'm going to go ahead and click OK.
| | 08:23 | It's going to again prompt me for an
alt tag, I'm just going to type in Gerald
| | 08:27 | Chow one more time and I'm going to click OK.
| | 08:29 | Now if you're still having trouble
because I've got to tell you, it's a
| | 08:32 | little tricky sometimes to place your
cursor in that exact location, there's
| | 08:36 | even an easier way to do that, and the
easiest way to do it is simply just go to the code.
| | 08:40 | If you go into the code and you find
where you want to place an image, let's
| | 08:44 | say for example that I go down to say,
Line 35, there's a little break in the
| | 08:48 | code here, and this is where the first
feature image needs to go, I can click
| | 08:52 | my cursor directly on the line of code or
anywhere between tags of where I want this image to go.
| | 08:58 | You can see how difficult it would be.
| | 09:00 | If I went in Design View, the image
needs to go somewhere inside this gray box.
| | 09:05 | But if I click inside this gray box or
try to use my Arrows as I click around
| | 09:09 | inside of it, it becomes
really, really difficult to do.
| | 09:12 | So the easiest thing to do is simply
go into Split Screen View or Code View,
| | 09:15 | place your cursor exactly where you
want your image to go, and then you could
| | 09:19 | use one of the techniques that we've
used before or you could also go up to
| | 09:22 | Insert>Image, so that's yet another method.
| | 09:25 | Again, this method also gives you the
browse functionality, and again, I could
| | 09:29 | scroll down, find the feature1
.jpg that I need to go here.
| | 09:33 | Again, this is going to prompt me for
an alt tag, so I'm just going to type
| | 09:36 | in thataway which is the name of the
piece of art and I'm going to click OK,
| | 09:40 | and there's my image.
| | 09:41 | So it places it directly in the code
where I want and you can see on screen it's
| | 09:45 | being placed where I need it to as well.
| | 09:47 | So I'm going to go ahead and save this file.
| | 09:49 | Now you may not utilize all of the
techniques that we described here in terms
| | 09:53 | of the different types of methods that
I've given you for placing images on the page.
| | 09:56 | But it's worth noting the strengths of
each one of them so that you can use the
| | 10:01 | technique that best fits your current situation.
| | 10:04 | Having choices is a good thing, and
thankfully, Dreamweaver provides plenty of
| | 10:08 | those when placing images on the page.
| | Collapse this transcript |
| Exploring Photoshop integration| 00:00 | One of the benefits of working
within a suite of software such as Adobe's
| | 00:03 | Creative Suite is the powerful integration
between the programs within the suite itself.
| | 00:08 | Dreamweaver features a very
streamlined integration with Photoshop, which can
| | 00:12 | make working with images
in your site much easier.
| | 00:15 | The most powerful integration between
the two programs is Dreamweaver support of
| | 00:19 | Photoshop's Smart Objects.
| | 00:21 | Smart Objects allow you to insert
Photoshop files directly on to your pages
| | 00:25 | in Dreamweaver and makes editing and
updating the images between the programs a snap.
| | 00:30 | In exploring the integration between
Dreamweaver and Photoshop, we'll look first
| | 00:34 | in this movie at working with
Photoshop's Smart Objects and then explore editing
| | 00:38 | and updating our Photoshop
images a little later on.
| | 00:41 | So to do that I have the spotlight.htm
file open and it probably looks a little
| | 00:45 | bit different than you remember it.
| | 00:47 | The reason for that is I've
turned our Style Rendering off.
| | 00:50 | To do that, go up to the Document
Toolbar right-click and turn the Style
| | 00:54 | Rendering toolbar on.
| | 00:55 | You can also find that in the menu
under View>Toolbars>Style Rendering.
| | 01:00 | Now what you are looking for is
this little icon right here, Toggle
| | 01:03 | Displaying of CSS Styles.
| | 01:05 | What that will do is, it will either
render your styles within the Design View
| | 01:07 | or it will turn off Style Rendering
altogether, sort of an all or nothing.
| | 01:11 | And the reason I like that option and
I am glad that option is available is
| | 01:15 | because it makes it even easier to
select very difficult areas or very complex
| | 01:20 | areas within your layout.
| | 01:21 | For example, in the last movie we had
a hard time putting our cursor exactly
| | 01:25 | where we wanted it in relation to the
Student Spotlight, and now I've made it
| | 01:28 | even easier on myself.
| | 01:29 | Okay so, we know where we want this image to
go, because we placed it in our last movie.
| | 01:33 | What we want to do is click inside the
Student Spotlight div tag here, click the
| | 01:38 | div tag, <div.student>
to select the whole thing.
| | 01:41 | And once again use your arrow keys, I
am going to hit my left arrow -- and
| | 01:44 | remember in the code that's going to
place my cursor just prior to that div tag,
| | 01:49 | so we've positioned it right where we want it.
| | 01:51 | So I am going to make sure that while
I am doing this I don't hit any of the
| | 01:53 | other arrow keys, I don't click
anywhere on the actual document itself.
| | 01:58 | Okay, so the typical workflow for
creating web graphics is that you'll have an
| | 02:02 | original file which is either going
to be in a program like Photoshop or
| | 02:05 | Fireworks and then you take that file
and you export it out as an optimized PNG
| | 02:10 | file, a JPEG or a GIF file, one
of those three formats is typical.
| | 02:15 | And then you take that file, place it
in your HTML file here in Dreamweaver and
| | 02:20 | then if you ever need to change it,
you'll manually go ahead and fire up
| | 02:23 | Fireworks or Photoshop, navigate to
the source file, open it back up again,
| | 02:27 | make your changes, re-export that back
out again, come back into Dreamweaver
| | 02:31 | and resume working.
| | 02:33 | That's not a bad workflow, but
it's not as efficient as it can be.
| | 02:36 | So in using Smart Objects what we'll do
is we'll take a Photoshop file and we'll
| | 02:40 | place the Photoshop file itself
directly inside of our document.
| | 02:43 | Now that's a bit of a misstatement,
because what Dreamweaver is actually going
| | 02:46 | to do for us is Dreamweaver is going to
see you do that, it's going to recognize
| | 02:50 | that it's a Photoshop document and it's
going to say, oh, okay, so you want to
| | 02:53 | take this source Photoshop document,
create an image out of it, refine it or
| | 02:58 | optimize it and export it out to the
file format that you want, place in the
| | 03:01 | directory that you want, and place the
image on the page, and it's going to do
| | 03:05 | all that for you in one step.
| | 03:07 | And then it's going to establish a link
back to the original Photoshop document,
| | 03:12 | so that if you ever want to make changes,
it knows which source file to optimize
| | 03:16 | the image again from, so
it's a really neat workflow.
| | 03:18 | All right, so in order to place this on
the page I could drag and drop, but we
| | 03:21 | know how difficult dragging and dropping an
image into that tight area is going to be.
| | 03:26 | So I am just going to go up to the
Common Objects actually to insert an Image, I
| | 03:30 | am just going to click Insert Image.
| | 03:31 | Once again this is going to bring up
the Select Image Source, so this is pretty
| | 03:34 | much the exact same
workflow we used in the last movie.
| | 03:38 | And I am going to open up from the
07_04 directory, I am going to open up the
| | 03:42 | assets folder, and inside
the assets folder I have two Photoshop
| | 03:45 | files, I have feature1 and I have chow.
| | 03:48 | And of course the student's name is Gerald Chow;
| | 03:50 | chow is the one we want.
| | 03:51 | So chow is a Photoshop document.
| | 03:53 | When I click OK, what happens is,
Dreamweaver says, okay, this is a Photoshop
| | 03:58 | document, I know you want to place an
image on the page, what type of image do
| | 04:01 | you want me to export
out of this Photoshop file?
| | 04:04 | So notice we get this Image Optimization
dialog box and we can choose from some Presets.
| | 04:08 | We have Presets for PNG files, JPEGs and GIFs.
| | 04:12 | What I am going to do this time is I
am going to say JPEG High for Maximum
| | 04:15 | Compatibility, that's the
initial start point here.
| | 04:18 | Now if you choose to not to use one of
the Presets, you can come right in here
| | 04:21 | to Format, choose which file format you
want and then based upon the file format
| | 04:26 | that you've chosen, you'll make
some adjustments to the Image Quality.
| | 04:29 | Now if I move this slider to the left
you can see the image Quality change over
| | 04:34 | here on the left-hand side, and that's
what I really like about this technique
| | 04:38 | is that as you choose settings, you're
going to get a live preview of what that
| | 04:42 | quality setting is going to do to the image.
| | 04:44 | You're also going to get a File Size
down here, in this case, I can see it's 3K,
| | 04:47 | I am just going to move
this back up to around 60.
| | 04:51 | I can see I do get a loss in Image
Quality, so I am going to want to keep that
| | 04:54 | up around 80, because it was a pretty
significant saving I think with the file
| | 04:57 | size, but the image quality
was definitely noticeable.
| | 05:00 | So if you've ever watched the workflow
from earlier versions of Dreamweaver,
| | 05:03 | earlier than CS6, you've saw an
entirely different dialog box.
| | 05:07 | What you would see is you'd basically
see Photoshop's Save for Web dialog box,
| | 05:11 | which had a lot more options to it.
| | 05:13 | So you are losing some of those
options that you have in Photoshop when you
| | 05:17 | export the image out, and that's
something you need to think about before
| | 05:20 | adopting this particular workflow.
| | 05:22 | But what this workflow is designed to
do is to be fast, it's designed to be
| | 05:25 | extremely efficient.
| | 05:27 | So if you don't have a lot of factors
into saving the image, if you don't need
| | 05:30 | the preview it against the original
and really do a lot of close color
| | 05:34 | comparison, then this is a really,
really nice smooth workflow to use.
| | 05:38 | Now as soon as I click OK, it's going
prompt me, because we are creating a JPEG
| | 05:42 | when we do this, we are
exporting this image out of Photoshop.
| | 05:45 | I am going to go into the images
directory and I just want to save it as chow.jpg.
| | 05:50 | When I save this, it's then going to
prompt me for some Alt text,
| | 05:54 | so I am just going to say Gerald Chow,
click OK and it places the image on the page.
| | 05:59 | So if I select this, if I look at my
image preferences, I can see that this is a
| | 06:03 | brand-new image that we've created,
it's in the images directory, its
| | 06:07 | name is chow.jpg and down here in the
Original, I see that it's pointing to the
| | 06:12 | assets directory, chow.psd.
| | 06:15 | So there is now a physical link
between the source Photoshop file and this
| | 06:20 | image, and in an upcoming movie we'll
talk about how we can take advantage of
| | 06:24 | that link by creating a really, really
smooth editing workflow or optimization
| | 06:28 | workflow to this image.
| | 06:30 | The next thing you are going to notice
is in the upper left-hand corner we have
| | 06:33 | this little Photoshop Smart Object icon.
| | 06:36 | That does two things, number one, it
let's you know that this is a Photoshop
| | 06:39 | Smart Object, so it has a link
to an original Photoshop file.
| | 06:43 | The second thing that it's going to
tell you is whether you are using the most
| | 06:46 | recent version of that Photoshop file.
| | 06:49 | So if I were to go out into Photoshop,
open up that image and do something
| | 06:52 | different to it, the next time I came
back into Dreamweaver and opened this file
| | 06:56 | up, I wouldn't see a green arrow on
the bottom, I'd see a red arrow down here
| | 07:00 | and that would let me know that although
the image itself is okay and it's going
| | 07:03 | to be fine, there's been a change made
to the original, do I want to update it?
| | 07:07 | So you know it's kind of the choice that I have.
| | 07:10 | Now that creates an extremely efficient
workflow and it's one that we are going
| | 07:13 | to take a look at and tackle in our next movie.
| | Collapse this transcript |
| Modifying Smart Objects| 00:00 | The most powerful feature of Photoshop
Smart Object Integration is the ease and
| | 00:04 | efficiency with which you can
make full site image updates.
| | 00:08 | As you'll see, if you edit the
original image in Photoshop Dreamweaver will
| | 00:12 | indicate that the current image
doesn't contain the most recent version.
| | 00:15 | In addition to keeping tabs on
the status of your Smart objects,
| | 00:18 | Dreamweaver will also give you the
opportunity to edit your Smart Object in
| | 00:22 | Photoshop, resave the web version
and update it in Dreamweaver all in one
| | 00:27 | round-trip workflow.
| | 00:28 | Now we are going to explore this
round-trip functionality first and then
| | 00:31 | discover how Dreamweaver monitors
Photoshop smart object once they've been updated.
| | 00:36 | And to do this on and be working with
the spotlight.htm file in the 07_04 folder
| | 00:42 | and I just want to mention something
here, you can see, right now I have Live
| | 00:45 | view turn on I am going to turn that off.
| | 00:46 | We will go back to sort of
this non-rendered version.
| | 00:49 | You can see I have a smart object icon
up here and it's got the two green arrows.
| | 00:54 | If you're opening this file up from 07_
05 if you have access to the Exercise
| | 00:58 | Files I am going to bet
that you'll see that same icon.
| | 01:02 | I am going to bet that you are seeing a
little warning symbol there with a red
| | 01:05 | arrow on the bottom of that.
| | 01:07 | Now the reason for this is that
Dreamweaver is really, really picky about where
| | 01:13 | that source file is sitting.
| | 01:15 | So it's going to store this connection
data between the image in a Photoshop
| | 01:19 | file, it stores the information in a little
XML note file that it attaches to the image.
| | 01:24 | And essentially what happens is if you
start to move the directory structure
| | 01:28 | around that path is severed and
Dreamweaver has a hard time maintaining that.
| | 01:33 | So the process of creating these
Exercise Files in terms like duplicating the
| | 01:38 | folders and compressing it up and
zipping up and placing it up online or burning
| | 01:42 | it to a disc and having you as the
subscriber, open that file backup again or
| | 01:47 | open that directory structure
back up again and redefine that site.
| | 01:50 | Sometimes there is a little bit loss in
the translation there and there's just
| | 01:53 | nothing that can be done to make sure
that those paths don't break in some way.
| | 01:57 | So as much care as I took in
structuring these exercise just a journey that
| | 02:03 | these files and folders undertake from this
machine to your machine puts that in jeopardy.
| | 02:08 | So I will say if you want you could
just keep the previous exercise 07_04 open.
| | 02:15 | Because we are really just picking it up
from where we left off from the last exercise.
| | 02:18 | And I would also say that within your
own sites this really won't be that much
| | 02:21 | of a problem because your site
structure is unlikely to undergo any weird
| | 02:25 | transformations or movement
from one location to another.
| | 02:29 | You are likely to keep all of your
assets and exact same folder or not.
| | 02:32 | Continually move them around the
way I have to when I do this files.
| | 02:35 | So if that's happening, I apologize,
just go back to 07_04 the file you are just
| | 02:40 | working, you want to work on that
one again or if you want to you can
| | 02:43 | reestablish the link between the two of
them by clicking on the image and taking
| | 02:47 | this original pointer file and
pointing it to the Photoshop file itself.
| | 02:52 | That will reexport that to JPEG, but
it'll reestablish that relationship for you.
| | 02:56 | Okay, well enough set up let's go
ahead and play around a little bit with the
| | 02:59 | round-trip editing feature from
Dreamweaver to Photoshop so I am going to select
| | 03:02 | the image on the page and then in the
Properties Inspector I am going to click
| | 03:06 | the little Edit Photoshop icon, when I
do that it's going to launch Photoshop
| | 03:10 | and it's going to open the image
directly within Photoshop itself.
| | 03:13 | Now here I am free to
make any edits to it I want.
| | 03:15 | I can increase the contrast, I could
maybe do a color overlay all sorts of things.
| | 03:19 | Well, I notice if I look over in the
Layers panel that I do have a Layer
| | 03:23 | grouping over here called Type and I
am going to turn that layer grouping on.
| | 03:26 | And that turns on some stylized
text that we have just below the image.
| | 03:30 | I like the way that looks so I am
just going to go ahead and save this.
| | 03:33 | And then when I save this you know in a
typical workflow where you're going back
| | 03:37 | into Dreamweaver, you would need to go
ahead and now do another save for the
| | 03:41 | web, browse out of the images directory,
find the old image, overwrite that old
| | 03:45 | image and then flip back to Dreamweaver.
| | 03:47 | But when we are taking advantage of the
Smart object workflow, we don't have to
| | 03:50 | do that, all I have to do is jump back
into Dreamweaver and when I jump back
| | 03:54 | into Dreamweaver, I see again this sort
of green arrow on top, red arrow on the
| | 03:58 | bottom and what that's telling me is
it's telling me that even though the image
| | 04:02 | on the page is fine, the original
file that is linked to has been changed.
| | 04:07 | So I have the option of going over to
the image, right clicking the image and
| | 04:11 | telling it to update from the original.
| | 04:14 | And as soon as I choose that, it's
going to go out grab the newest version of
| | 04:18 | this and place this on the page.
| | 04:20 | Now what it did basically was go out to
the Photoshop file and reoptimize that
| | 04:24 | file and overwrite the JPEG without us
ever having to tell it to do that, it
| | 04:29 | just automatically did that.
| | 04:30 | So now if turn Live view on again, I
can see within the Layout, now I have that
| | 04:34 | text on the page which is really, really nice.
| | 04:37 | Now although we sort of initiated
that Photoshop smart object workflow by
| | 04:42 | originally taking a Photoshop file
and inserting it on the page, you can go
| | 04:46 | about it a different way.
| | 04:48 | If I switch live view back off again I
am going to scroll down and find this
| | 04:52 | first image right here which is feature one.
| | 04:55 | Now you can see this as a JPEG
that's already been exported out from the
| | 04:58 | Photoshop file and then placed on the
page in a very similar fashion to what
| | 05:02 | we're doing a little bit earlier,
there's no link to original file at all.
| | 05:06 | However if I look over in the Assets
panel, I can see that there is indeed a
| | 05:09 | feature1.psd over there, so I
do have the source file for this.
| | 05:13 | If that's the case and I want to
establish this as link I can select the artwork
| | 05:17 | and then I can take the original file
and I can just point right over here to
| | 05:21 | feature1, let go and it's
going to establish that link.
| | 05:25 | Now the first thing it's going to do
because it wants to make sure it has
| | 05:28 | the most recent version is, it's going to go
through that image optimization workflow again.
| | 05:33 | So again, I can sort of preview what the
quality is going to be, I can crank the
| | 05:37 | quality up or down to where
I needed. I can click OK.
| | 05:40 | When I click OK, I'm prompted where
do you want this, well I am going to
| | 05:43 | place it in 07_05_images.
| | 05:46 | It's going to overwrite the old one that was
on the page and there's my new smart object.
| | 05:50 | So again you don't have to start it
from placing a Photoshop image on the page,
| | 05:55 | you can also go ahead and take an
existing image and link it back to an original
| | 05:58 | image if you want to.
| | 06:00 | You will go through the Optimization process
again and you start a smart object workflow.
| | 06:04 | Now I want to point something else out
about this too, because there's another
| | 06:08 | benefit to using smart objects
that you have to be careful about.
| | 06:11 | One of the benefits to using a smart
object is now any time on whatever page, I
| | 06:15 | was to use this image it would link
back automatically to feature1.psd, that's
| | 06:20 | actually good thing.
| | 06:21 | Let's say we had a banner ad for
example that we've used on 20 pages.
| | 06:26 | So if I changed the original banner ad,
having to comeback in to Dreamweaver
| | 06:30 | file and replace 20 of those
doesn't sound like a whole lot of fun.
| | 06:34 | Well, if I have linked that back to the
original Photoshop file I can just tell
| | 06:37 | to update from the
original and it's going to update.
| | 06:40 | But there are some downsides to this
as well, let me show you one of those.
| | 06:43 | If I come in to this file and then
decide that the file needs to be a little
| | 06:47 | bit larger or a little bit smaller in this
case I am going to make it a little bit smaller.
| | 06:50 | If I hold the Shift key down and I grab
one of these handles and I just resize
| | 06:54 | this, the image is going to resize
and I get a little warning that hey this
| | 06:57 | doesn't match the dimension of the original
Photoshop file, what do you want to do about this?
| | 07:01 | Now in the past, in Dreamweaver, what
this has done is it's merely changed the
| | 07:05 | width and height
attribute of the image tag itself.
| | 07:07 | And this basically leaves it up to the
browser to do the image resizing, that's
| | 07:12 | a pretty bad practice because it
impacts the performance of your website,
| | 07:15 | especially on mobile devices.
| | 07:17 | So they have changed it in Dreamweaver CS6,
and they have given us a couple of options.
| | 07:21 | So down here on the Properties
Inspector, I can see that the width and height
| | 07:25 | are now bolded, indicating that they're not
the width and height of the original image.
| | 07:29 | I have two choices out beside it, I
can reset it to the original size which
| | 07:33 | would be basically say,
okay thanks but no thanks.
| | 07:35 | And I could commit the image size itself.
| | 07:38 | I actually do you have a third option
which is to leave it just the way it is
| | 07:41 | and leave it up to the browser or
to the device to resize the image.
| | 07:44 | But I commit the image size, what this
is doing is, it's going back out of the
| | 07:48 | Photoshop file, re-optimizing that
JPEG and placing that into the images
| | 07:53 | directory at a different size,
so it's changing the size.
| | 07:56 | Now it didn't actually change the size
of the Photoshop file, it just basically
| | 08:00 | optimized it at a scaled-down version.
| | 08:02 | So this is what I got from the image.
| | 08:04 | Now sometimes, this can damage image
quality, sometimes you don't notice it
| | 08:08 | as much, but you do have to remember the fact
that now the optimize JPEG is a smaller size.
| | 08:13 | That means if I was using this image
anywhere else throughout my site, the image
| | 08:17 | is resized on every single page.
| | 08:19 | So that's something I need to be aware of.
| | 08:22 | Now at any point with this workflow,
one of the nice things about linking back
| | 08:25 | to an original Photoshop file is that
even after committing this change you will
| | 08:29 | notice down here in the Properties, I'm
not being prompted anymore to resize the
| | 08:33 | image or even being warned that I have
changed the size because for Dreamweaver,
| | 08:37 | for all intents and purposes that's the
size of image because we reoptimized it.
| | 08:41 | Well, because we're linking back to
original Photoshop file and because the
| | 08:45 | original Photoshop file hasn't been
resized, if I go back to my image and I
| | 08:49 | right-click it, I do have the
option to reset the size to the original.
| | 08:54 | So that's another nice thing about the
smart object workflow and I just commit
| | 08:57 | to that again it reoptimizes the image,
exports it back out and overwrites that.
| | 09:02 | And it does it all within two clicks.
| | 09:03 | It's a really, really powerful workflow.
| | 09:06 | You know from a strictly timesaving
standpoint, the Dreamweaver Photoshop Smart
| | 09:09 | object integration does make
for a very compelling workflow.
| | 09:13 | When you add in the functionality
of creating graphics on-the-fly upon
| | 09:16 | insertion, for many users this workflow
will quickly become the standard in the
| | 09:21 | way that they really like to work.
| | 09:23 | You are going to need to keep in mind
however that one size does not fit all.
| | 09:26 | And you need to really carefully
consider whether you won't adopt this workflow
| | 09:31 | for all the images on your site,
for some of them or do it at all.
| | 09:34 | In the end it simply one of the many
options that you have available when
| | 09:39 | creating and editing images within your site.
| | Collapse this transcript |
| Modifying image properties | 00:00 | One of the constant challenges in
working with sites built around clean HTML and
| | 00:04 | CSS is precisely what to control with
CSS and what to control through your HTML.
| | 00:10 | Working with images is a particularly
gray area since there are many properties
| | 00:15 | that you can control either
through CSS or directly through the image
| | 00:18 | properties themselves.
| | 00:20 | In this movie, we're going to discuss
the image properties you can change using
| | 00:23 | Dreamweaver's Properties Inspector
and the benefits of controlling these
| | 00:27 | properties through the image tag or through CSS.
| | 00:30 | So I have the index.htm file open
from the 07_06 directory and I'm going to
| | 00:36 | scroll down and find the image we placed
on the page earlier, which is the image
| | 00:41 | of Professor Stuesse here
and I'm going to select that.
| | 00:44 | And when I click on this, the
Properties Inspector changes to reflect the
| | 00:48 | properties of the image itself.
| | 00:50 | Now again, for those of you that may
be have been using some of the previous
| | 00:53 | versions of Dreamweaver, you're
going to notice that some of the image
| | 00:56 | properties themselves have been removed.
| | 00:58 | The reason for that is that in HTML5, a
lot of the presentational attributes of
| | 01:03 | the image tag have been removed in
favor of doing those through CSS.
| | 01:07 | So in a lot of cases,
that is a moot argument now.
| | 01:10 | You're going to be changing certain
things like alignment and things like that
| | 01:13 | through CSS and not through image properties.
| | 01:16 | But we still have a very fair amount of
properties left that we can choose from.
| | 01:20 | Now I'm just going to start in the
upper left-hand corner and I'm just going
| | 01:22 | to work my way around.
| | 01:24 | On the left-hand side, the first
option I have is giving this image an ID.
| | 01:28 | So if I'm targeting it through
JavaScript for example or if there's a really
| | 01:32 | compelling reason to give it an ID
attribute, I can do that simply by
| | 01:35 | clicking in here and typing.
| | 01:37 | The next thing I have to the right
of that is the source for this file.
| | 01:41 | If I ever want to change this image,
one of the easiest ways to do that is I
| | 01:44 | could open up my images directory, I
could come right back over here and I
| | 01:48 | could just point to a new image, let go,
and it's going to bring that image in instead.
| | 01:54 | Now I want to undo that because, well,
that is the picture of Professor Stuesse,
| | 01:58 | so I don't really need any of those.
| | 01:59 | But it's nice to know that if
something changes or somebody decides maybe
| | 02:03 | you've got like five images that you
want to try in a spot and see how they
| | 02:06 | look, instead of having to delete them
and insert four more, you can just grab
| | 02:10 | the Point to File icon and go right over
here and point to whichever one you want to see.
| | 02:14 | Now below that we have a link.
| | 02:15 | So if I want to make this image a
clickable link, I can point to the file that I
| | 02:19 | want to link to or I can type that in.
| | 02:21 | We're going to talk about creating
links a little bit later on in the title.
| | 02:24 | We also have some alt text.
| | 02:25 | So if you forget for whatever reason, or
just decline to enter alt text when you
| | 02:30 | first place the image on the page, you
can certainly come back at any time and
| | 02:34 | type that information in.
| | 02:35 | Now before we move on to these options
over here on the right-hand side, I want
| | 02:38 | to move down for a moment
and talk about these options.
| | 02:41 | We have the option of making this an image map.
| | 02:43 | Now image maps aren't used that
widely online anymore, but back in the day,
| | 02:48 | image maps were actually quite common.
| | 02:50 | They allow you to make certain areas of
the image a clickable hotspot so that an
| | 02:55 | image can have multiple links on it.
| | 02:56 | Again, that's usually done a different
way now, but that capability certainly
| | 03:00 | still exists within HTML, and
Dreamweaver allows to do that by just drawing
| | 03:04 | them right on the image. It's pretty cool.
| | 03:06 | I also have the ability to
set a target for this image.
| | 03:09 | So if this image is a link, I can
set the browser to target a blank new
| | 03:13 | window if I'd like.
| | 03:14 | I also have the option of
pointing to the original of this file.
| | 03:17 | We did that in the last movie where we
pointed to a Photoshop file, so I do have
| | 03:21 | the option of going in and establishing
that smart object workflow if I want to.
| | 03:25 | Okay, but not everything needs to be a
smart object, and indeed, a lot of the
| | 03:29 | options that we have available to us
with smart objects are still available to
| | 03:32 | us with images that aren't smart objects.
| | 03:34 | For example, this little row of icons
right here would allow me to edit this
| | 03:39 | particular file in Photoshop.
| | 03:41 | So I could click on that, it's going to
launch Photoshop and open up the image.
| | 03:44 | Here I can start making changes to it,
so for example, I could come into my
| | 03:48 | adjustment layers and I could go ahead
and apply an adjustment curve to that.
| | 03:52 | So there are a lot of things that I
could do here to make changes to this image
| | 03:55 | and then save it out and overwrite the original.
| | 03:58 | I'm going to go ahead and close this without
making any changes, jump back into Dreamweaver.
| | 04:03 | I also have the ability to re-optimize
this image, so if it was saved with the
| | 04:06 | image optimization that was a little
too high or even if it was too low, I can
| | 04:10 | come back in here and click on this again.
| | 04:12 | Now the danger in this is that if you
don't have a source file defined for
| | 04:16 | it, you're re-optimizing the JPEG,
and it doesn't really matter if I up to
| | 04:21 | the Quality here, you can't increase the
quality of a JPEG image past its original quality.
| | 04:27 | So really, you don't gain any benefit
from this unless you're just decreasing
| | 04:30 | the quality a little bit to
save a little bit of size.
| | 04:33 | We also have options like cropping
the image, Brightness and Contrast, and
| | 04:37 | sharpening it, and I want to
show these off really quickly.
| | 04:40 | A lot of times, you can definitely go
back into Photoshop or Fireworks, make
| | 04:43 | your edit and then come back into Dreamweaver.
| | 04:45 | But sometimes, for really small things,
it's easy enough just to do it here.
| | 04:49 | So for example, if I click Sharpen, it's
going to bring up a dialog box that tells me hey!
| | 04:53 | What you're about to do is going
to permanently change this image.
| | 04:56 | You're going to permanently change the
image file over in the images directory.
| | 05:00 | Are you sure you want to do that?
| | 05:01 | If I click OK, it brings up the
Sharpen dialog box, and I can either type
| | 05:05 | numbers in or I can grab the slider.
| | 05:07 | Now this gives you a value of 0 which
is no sharpening, all the way to 10 which
| | 05:10 | is maybe a little too much sharpening.
| | 05:13 | So it's not really that precise.
| | 05:15 | You just have a range of
sharpening values that you can do.
| | 05:18 | If I push this up to 1 and turn the
Preview on and off again, I can see that
| | 05:22 | it's doing a rather decent
job of sharpening that image.
| | 05:26 | So I actually kind of like that, I'm
just going to go ahead and click OK.
| | 05:29 | Now what it's going to do is it's going
to go back out to my image, and again,
| | 05:32 | it's going to re-optimize it.
| | 05:33 | And after a while, if you do this
enough, you can actually begin to see right
| | 05:37 | here around him for example, that you're
going to start seeing a loss of image quality.
| | 05:40 | So you want to be really careful
about making too many edits to a JPEG.
| | 05:44 | It's always better to go back to the
original source file if you have it.
| | 05:47 | The other thing that we can do is we
can change things like Width and Height;
| | 05:50 | you can enter in these values
or you can drag the handles out.
| | 05:53 | Honestly, I kind of wish those handles
would go away because a lot of people
| | 05:56 | do this and say, oh! That looks great!
| | 05:57 | It doesn't look great.
| | 05:58 | But again, we're given the option here to
basically reset it to the size or commit.
| | 06:04 | Now if you say Commit, it's going to
bring again this dialog box up and it's
| | 06:07 | going to say, are you
absolutely sure you want to do this?
| | 06:11 | And it's going to permanently alter
the selected image. Are you sure?
| | 06:13 | And again, if you click OK, it
permanently changes it, although you can undo
| | 06:18 | to a certain point.
| | 06:19 | Once you save the file out
and close it though, it's done.
| | 06:22 | So keep that in mind.
| | 06:24 | And remember, of course down here, if
we resize this, you do always have the
| | 06:28 | option of declining the resizing as well.
| | 06:30 | My advice, if you want to resize the
image, find your source file, open it up in
| | 06:34 | the program you created it in, either
Fireworks or Photoshop, and re-export it
| | 06:38 | out at a different size.
| | 06:39 | Don't use the handles here in Dreamweaver;
| | 06:40 | they typically aren't going
to give you the best results.
| | 06:42 | Now the last thing we're going to do
to our image is apply a class to it.
| | 06:46 | So when you have the image selected,
if you want to apply a class attribute
| | 06:49 | to the image tag, you can do that very
quickly by just using the dropdown menu here.
| | 06:53 | Now this is going to pull all of the
classes that are currently in our external
| | 06:56 | CSS file, so if you don't have any,
you're going to basically be able to come
| | 07:00 | down here and say, hey!
| | 07:02 | I want to apply multiple classes
which will allow you to type-in.
| | 07:05 | You can even type it in single class
this way, renaming the existing classes,
| | 07:09 | attach a style sheet to the page if you want to.
| | 07:11 | There are a lot of options here.
| | 07:12 | What I'm going to do is scroll up
and just choose this articleImg class.
| | 07:18 | Now that's not going to do anything for
us at the moment because we're going to
| | 07:20 | style our image in our next movie.
| | 07:22 | But what you'll notice is if I look down
here at the image tag, it did apply the
| | 07:26 | class articleImg to that.
| | 07:28 | So if the selector were already written,
we would see the styling take place.
| | 07:32 | So I'm going to go ahead and save my
file and commit to any of the changes in
| | 07:35 | the image property that I've made.
| | 07:37 | Now as you can see, there are a few
properties that you can change once an image
| | 07:40 | has been placed on the page.
| | 07:41 | However, you do want to be careful when
resizing or editing the image from the
| | 07:45 | Properties Inspector as we
were doing in this exercise.
| | 07:48 | Keep in mind, image quality may
degrade, so you want to test thoroughly
| | 07:51 | before committing to any of those changes,
because once you commit to them, they're done.
| | 07:55 | Also, you're going to want to control
most of the presentational properties of
| | 07:59 | images with CSS, which is exactly what
we're going to cover in our next movie.
| | Collapse this transcript |
| Styling images with CSS | 00:00 | Usually placing the image on the page
is just the beginning of making sure it
| | 00:04 | fits within the design of your site.
| | 00:06 | While there are certain properties
that you can set manually on an image,
| | 00:09 | for the most part you will want to
customize the look and feel of your
| | 00:12 | images through CSS.
| | 00:14 | Using styles allows you to create
different looks and behaviors based on where
| | 00:18 | the image is found, the context in which it
is being used or what type of image it is.
| | 00:23 | The other rather obvious advantage to using
styles for images is the ease of updating them.
| | 00:29 | Rather than having to find dozens or
even hundreds of images and modifying
| | 00:33 | them individually you can update their
specific style and have the change occur site wide.
| | 00:38 | So to experiment with styling our
images, I am going to go back to the Index
| | 00:41 | file this time in the 07_07 folder and
just as a recap from our previous movie
| | 00:47 | if I select the image that we modified,
the image Properties in our last movie I
| | 00:51 | can see that it has the Class,
articleImg applied to it and that's the selector
| | 00:55 | that we are going to work with when
modifying the styling of this image.
| | 00:59 | Another thing I want to do is I really
like to be able to kind of see what's
| | 01:02 | going to happen to this image as we
style it, so I am going to work with
| | 01:06 | Live View turned on.
| | 01:07 | I am going to go ahead and turn Live View on.
| | 01:09 | Live View always jumps you back up to
the top of the page, so I am just going to
| | 01:12 | scroll back down again and I can
see where the image is sitting.
| | 01:15 | Now there are a couple of
things I would like to do here.
| | 01:17 | Number one, I really don't like the
way that the image and the text are
| | 01:20 | interacting with each other, that is
to say they're really not interacting
| | 01:23 | with each other at all.
| | 01:25 | The image is sort of sitting there and
the text is on the same line and that's
| | 01:28 | because to the browser into HTML, this
image and this line of text, they are
| | 01:33 | both objects that occupy
that particular line box.
| | 01:37 | It doesn't really realize that the
image is much taller than the text.
| | 01:40 | So I would really like the text to
wrap around the image and I would like to
| | 01:43 | style the image a little bit to give
it a little bit of distinction, may be a
| | 01:47 | bit of a border on the outside
perhaps even a little fake bevel look to it.
| | 01:51 | Nothing tacky I promise.
| | 01:54 | So what I want to do now is I want to
go over to the CSS Styles Panel and I
| | 01:57 | want to find the selector that we are
going to be modifying, and remember we
| | 02:00 | are looking for the articleImg Class, so I
am going to scroll down through my styles.
| | 02:06 | I am going to collapse my Files Panel
too, that's going to make it a little bit
| | 02:09 | easier for me to find this.
| | 02:10 | And as I scroll down through here,
what I am looking for is right
| | 02:16 | there, img.articleImg.
| | 02:20 | So that means any image with the
class of article image applied to it.
| | 02:24 | I am going to double-click that and
again, that's going to open up the CSS Rule
| | 02:28 | Definition dialog box.
| | 02:29 | I am going to move this just to the
right a little bit so that when I make
| | 02:32 | changes to the styles I can see those changes
reflected over here on my image. All right!
| | 02:38 | The first thing I am going to do is I
am going to give this a Background color.
| | 02:40 | Which may seem a little odd, you may
say, well why would you want to give an
| | 02:43 | image a background color the
image is going to sit on top of it.
| | 02:45 | For the most part, but here we have the
Box model properties like Padding that
| | 02:50 | can cause some of this background to be visible.
| | 02:52 | So what I am going to do is for the Background-color,
I am going to grab just a color chip here.
| | 02:56 | I am going to choose kind of a
neutral gray, maybe this second neutral gray
| | 02:59 | which is the rgb(204,204,204).
| | 03:03 | Now you are probably seeing something
a little different there, am I right?
| | 03:06 | Are you seeing a Pound symbol
followed by letters and numbers?
| | 03:09 | Well, that's hexadecimal notation.
| | 03:11 | If I want I can to right over here to
this little fly-out and I can tell it
| | 03:15 | which Color Format to write the colors in.
| | 03:17 | So I could come down here
and say Three or Six-digit Hex.
| | 03:21 | If I say Three-digit Hex which is the
default, if I scroll down, now I can find
| | 03:25 | the gray I am looking at is #CCC.
| | 03:28 | So it doesn't really matter which
color format you have selected, we are just
| | 03:31 | going to choose that sort of light gray color.
| | 03:34 | Okay the next thing I want to do is
go to my Box Model Properties and for
| | 03:37 | Padding I am going to leave it Same
for all, and I am just going to change to
| | 03:41 | the Padding to 10 pixels.
| | 03:43 | Now as soon as I do that, when I start
making these changes, a lot of times I
| | 03:46 | will have an idea as to what I want
to happen with my image but until I
| | 03:50 | actually see it in the context of the
page, I don't know whether that was what
| | 03:54 | I was going for or not.
| | 03:55 | So Dreamweaver gives us a really nice
little feature of instead of being able to
| | 03:59 | commit and saying okay and then having
to edit the style, I can come over here
| | 04:02 | in the right-hand side and I can say
Apply, and as soon as I do that, Live View
| | 04:06 | is going to update, it's going to show
me exactly what that's doing to my image.
| | 04:09 | You can see that because of the padding,
this 10 pixels worth of padding that we
| | 04:13 | have applied to the image, now that
part of the background shows through and it
| | 04:17 | gives us this kind of thick
border look which is really nice.
| | 04:20 | Now the next thing I want to do is I
want to Float this image because I really
| | 04:23 | want the text to wrap all the way around it.
| | 04:26 | So from the Float pulldown menu, I am
going to choose left because I want the
| | 04:29 | image to be on the left-hand side of the
text and then for Margin, I am going to
| | 04:33 | deselect Same for all, and I am going
to do about a Right margin of say 1em,
| | 04:38 | which is basically equal to
one character size of the text.
| | 04:42 | When I apply that, I can now see that
the text is now wrapping around the image
| | 04:46 | exactly the way I want it to and I can
see that the Right margin that we applied
| | 04:50 | here is pushing the text away from the
image by about one character width, which
| | 04:54 | is kind of exactly what I
was going for. All right!
| | 04:57 | Now I want to enhance this a little
bit further by going over to my Border
| | 05:00 | properties and what I want to do in my
Border Properties, I am going to turn off
| | 05:03 | Same for all, because I only
want to apply a border on two edges.
| | 05:08 | I am going to apply on the
right and the bottom edge.
| | 05:10 | It's going to give it
just kind of fake bevel look.
| | 05:11 | Now before you grown bear with me here,
because if you do it subtly enough, it
| | 05:16 | doesn't look that bad.
| | 05:17 | I am going to take the Style for the
Right one, I am going to do solid, and
| | 05:20 | Style for bottom I am going to do solid
and I am going to do one pixel for each
| | 05:24 | of those and then for the actual color
itself, you can kind of experiment around
| | 05:28 | with this a little bit, but I am
going to go one up on this gray.
| | 05:31 | From CCC I am going to go to 999 and
that's a nice subtle change in color and
| | 05:37 | when I apply that you can see it
just gives it a real nice, subtle almost
| | 05:42 | beveled look to the edge of that.
| | 05:44 | Now in some situations where you have
this on a darker background you might even
| | 05:48 | want to do a highlight color on the Top
and the Left, but since we are against a
| | 05:52 | white background, that really is
not going to do a whole lot for us.
| | 05:55 | So I am going to go ahead and click OK
and I am extremely happy with my image
| | 05:59 | styling, so I am just going to
kind of leave it the way it is.
| | 06:01 | It's one of the benefits of being
able to hit Apply instead of just OK.
| | 06:04 | It allows you to sort of preview your
changes before you commit to them and it
| | 06:08 | saves that sort of editing
time that you would do otherwise.
| | 06:11 | Now by no means is this a limit of
what you can do with images in CSS.
| | 06:16 | It's actually a pretty simple example.
| | 06:17 | Now part of the fun of using CSS is the
creative exploration that it can lead to.
| | 06:22 | So I want to encourage you to just
experiment with your images combining
| | 06:26 | borders, background colors, padding and
margins even try some of the new effects
| | 06:30 | like box shadows and things like
that for maximum creative effect.
| | 06:34 | Now the important thing to remember
is that you can use CSS to control the
| | 06:37 | visual presentation of images, making
sure that they conform to the overall
| | 06:42 | design strategy of your site.
| | Collapse this transcript |
| Using background graphics | 00:00 | An alternate way for you to display
images on your page is through the use of
| | 00:04 | CSS background images.
| | 00:06 | Every element on your page has the
ability to display a background color or
| | 00:10 | image or even both if you prefer.
| | 00:13 | This allows you to display images on the
page without using an image tag in your
| | 00:17 | HTML code and creates the
opportunity for presentation-only images.
| | 00:22 | This allows you to use images for your
design without cluttering up your HTML
| | 00:26 | with unnecessary image tags.
| | 00:28 | In this example, we're going to apply
a background image to the page header
| | 00:32 | region and use a background image to
replace a textual headline with the school logo.
| | 00:37 | So I have the index file open from the
07_08 folder and I can tell even before
| | 00:43 | I hit Live View, but I'm going to go ahead
and hit Live View, that some things are missing.
| | 00:46 | So the image of the very starry-eyed
young girl who is looking forward to
| | 00:50 | her future at Roux Academy is missing
and then the Roux Academy logo itself
| | 00:54 | is missing as well.
| | 00:56 | Now what I want to do, I'm going
to turn the Live View off first.
| | 00:58 | I'm going to right-click and I'm going
to open up my Style Rendering toolbar and
| | 01:02 | I want to toggle the display of styles off.
| | 01:04 | And the reason I'm doing this is I
want to show you a reason why we're using
| | 01:08 | background images here.
| | 01:09 | First off, for the banner area it's
really a presentational image only.
| | 01:14 | There's no reason for me to pass on that
information or the fact that that image
| | 01:19 | is being used to any type of a screen
reader or any type of a |
|
|
