IntroductionWelcome| 00:04 | Hello, and welcome to
Dreamweaver CS5 Managing CSS.
| | 00:08 | My name is James Williamson.
| | 00:09 | I am a senior author at lynda.com
and an Adobe certified instructor.
| | 00:13 | In this course, I want to dive a little
deeper into the creation and management
| | 00:17 | of CSS within Dreamweaver.
| | 00:19 | Dreamweaver is one of the most
powerful Web design and development programs
| | 00:23 | on the market, and has some of the most
complete and compelling CSS tools available.
| | 00:28 | In this course, we'll focus on how to
build an environment in Dreamweaver more
| | 00:31 | conducive to creating CSS, how to
streamline the process of creating styles, and
| | 00:37 | explore using powerful tools like
Snippets to rapidly build external styles.
| | 00:41 | We'll also focus on organizing styles,
with tips on ways to make your stylesheets
| | 00:45 | easier to work with, eliminate style
conflicts, and building style guides to give
| | 00:50 | yourself and your clients a
quick overview of your site's styles.
| | 00:54 | Finally, we'll discuss deploying your
styles, examine creating print stylesheets
| | 00:58 | and discuss how we can deal with browser
compatibility issues without creating a
| | 01:02 | mess of your existing styles.
| | 01:04 | That's a lot to cover,
| | 01:05 | so let's get started with Dreamweaver CS5
| | 01:08 | Managing CSS.
| | Collapse this transcript |
| Who is this course for?| 00:00 | Before we start exploring Dreamweaver's
CSS tools, it's worth taking a moment to
| | 00:05 | discuss who this course is for.
| | 00:07 | This course is for Web designers looking
to take full advantage of Dreamweaver's
| | 00:11 | CSS tools, or for Web developers who
are used to hand-coding their CSS and are
| | 00:15 | curious about Dreamweaver's
capabilities for managing it.
| | 00:18 | This is not a basic CSS course ,and should
not be the first CSS title that you watch.
| | 00:24 | The focus of this title is
on managing and editing CSS.
| | 00:28 | If you're new to stylesheets, I
recommend any of the basic CSS titles in the
| | 00:33 | lynda.com Online Training Library, or
my Dreamweaver with CSS Essential titles
| | 00:38 | as a good starting point.
| | 00:39 | I'll try to give equal time to both the
visual CSS tools in Dreamweaver, as well
| | 00:43 | as its capabilities to code CSS.
| | 00:47 | If you already have experience with CSS,
but are new to hand-coding or haven't
| | 00:51 | used Dreamweaver's visual CSS
tools, then this title is for you.
| | 00:55 | It is designed to give a complete
overview of Dreamweaver's CSS capabilities, as
| | 01:00 | well as ways that you can effectively
manage and organize your site's CSS.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you are a lynda.com premium subscriber,
you have access to the exercise files
| | 00:05 | that accompany this course.
| | 00:07 | To follow along with the exercises, I
recommend setting up a new site for the
| | 00:10 | course, and then modifying the
root directory for each new exercise.
| | 00:15 | To illustrate this, I'll walk
through the process of setting up our first
| | 00:18 | exercise file and then show you
switching to the next exercise.
| | 00:23 | I recommend moving your exercise files
to a central location such as the desktop
| | 00:27 | or somewhere on your hard
drive where they are easy to find.
| | 00:30 | You can see here, I've copied the
Exercise Files folder to the desktop.
| | 00:34 | Back in Dreamweaver, I'm going
to create a new Dreamweaver Site.
| | 00:37 | I'm going to name the site, Manage
CSS, and I'm going to browse for my
| | 00:43 | local root directory.
| | 00:44 | I'm just going to go out to the
desktop and find my Exercise Files, go in
| | 00:49 | Chapter_01 and since we're going
to start on our first movie, I'll
| | 00:52 | double-click the 01_01 folder.
| | 00:56 | Select it, save it, and
now we've defined our site.
| | 00:59 | Now, you can see, in our Files panel, that
there is nothing inside the 01_01 folder.
| | 01:04 | It's empty because no exercise
files accompanied that particular movie.
| | 01:08 | But when I'm done with the 01_01
exercise, I'll move on to the next one.
| | 01:13 | And to do that, I'll go back up to the
Files panel, double-click the Site Manage CSS.
| | 01:18 | That will open up my Edit Site
dialog box, and then I'll just browse to
| | 01:22 | the local Site folder.
| | 01:23 | I'll go to the 01_02 folder,
select that and save. Click OK.
| | 01:29 | Now, the site refreshes, and
I have my new exercise files.
| | 01:34 | So, changing the root directory for
each exercise is going to allow you to work
| | 01:37 | on a clean set of files without
worrying about modifying the wrong files.
| | 01:42 | Just be sure that the root directory you
choose matches the exercise folder for that movie.
| | 01:47 | At the beginning of each movie, an
overlay on the screen will show you the path
| | 01:51 | to the proper exercise folder.
| | 01:53 | Now that we've set our Dreamweaver for
our first exercise, let's get started.
| | Collapse this transcript |
|
|
1. Using Dreamweaver's Tools and PanelsControlling CSS in Dreamweaver| 00:00 | Over the years, I've heard a lot of
things said about Dreamweaver, both
| | 00:03 | positive and negative.
| | 00:05 | I've heard developers say
Dreamweaver is for designers who can't code.
| | 00:09 | I've also heard designers who've
said Dreamweaver is too complex.
| | 00:12 | It's designed for coders, not true
designers, and I've always kind of chuckled
| | 00:17 | at those types of comments because
they reflect the biases that we, as
| | 00:20 | professionals, bring to the tools that we use.
| | 00:23 | Dreamweaver isn't perfect -
| | 00:24 | no tool is - but it does an amazing job
of providing us with both powerful coding
| | 00:29 | tools and powerful design tools.
| | 00:31 | No aspect of Dreamweaver showcases this
better than the creation and management of CSS.
| | 00:38 | Dreamweaver has powerful design
focus CSS tools, such as the Properties
| | 00:42 | Inspector, the CSS Styles panel and
CSS Inspect that allow you to create and
| | 00:48 | modify styles without ever touching the code.
| | 00:51 | For those that prefer to code their CSS
themselves, Dreamweaver has a powerful
| | 00:55 | Code Editor that offers hinting and
code completion, flexible code formatting
| | 01:00 | and highlighting, and syntax checking.
| | 01:03 | This wide range of tools allows you to
create a working environment that best
| | 01:06 | suits your own personal
preference and skill level.
| | 01:09 | Regardless of whether you're
coming to Dreamweaver from a design or
| | 01:13 | development background, I recommend
taking a blended approach to controlling
| | 01:16 | styles in Dreamweaver.
| | 01:18 | Developers should not dismiss, out of hand,
powerful editing tools such as the CSS Styles panel.
| | 01:23 | The Styles panel allows you to make
edits to your styles and chase down style
| | 01:27 | conflicts a lot faster than you can by hand.
| | 01:30 | Now, designers should not dismiss
or be intimidated by Dreamweaver's
| | 01:35 | powerful code features.
| | 01:36 | Once you master CSS, there is no faster
way to create it than by hand-coding it,
| | 01:41 | using Dreamweaver's rapid coding tools.
| | 01:44 | In fact, there are certain CSS
properties that aren't even available through the
| | 01:48 | CSS Rule Definition dialog box.
| | 01:51 | So sticking solely with Dreamweaver's
visual design tools will not only slow you
| | 01:55 | down in certain situations;
| | 01:57 | they can also limit your
effectiveness in writing certain styles.
| | 02:03 | In this title, I'm going to approach
the topic of managing CSS and Dreamweaver
| | 02:07 | by using this blended approach.
| | 02:08 | I will attempt to showcase all of the
tools and capabilities that Dreamweaver
| | 02:12 | provides to help you create
and manage your site's CSS.
| | 02:16 | Along the way, I'm going to suggest
workflows that will allow you to work
| | 02:19 | with CSS in the fastest, most efficient way
possible, based on my own personal experience.
| | 02:24 | Hopefully, you'll find an integrated
solution that works for you and makes
| | 02:28 | the process of planning, creating and
managing CSS within Dreamweaver even
| | 02:32 | easier for you.
| | Collapse this transcript |
| Style formatting options| 00:00 | Everyone, as they say, likes to
work a little bit differently.
| | 00:04 | Although the foundation of how
Dreamweaver manages CSS is fairly static,
| | 00:08 | there are some ways that you can
customize this process to meet your
| | 00:11 | individual preferences.
| | 00:13 | To a degree, Dreamweaver allows you to
customize how your styles are created,
| | 00:17 | presented, and formatted.
| | 00:19 | Before we get too deep into the
multiple ways to create styles in Dreamweaver,
| | 00:23 | let's take a moment to go over
Dreamweaver's CSS Preferences and see how we can
| | 00:27 | customize them to meet our specific workflows.
| | 00:30 | I'm just going to scroll around this a
little bit to look at the formatting.
| | 00:33 | You can see that our styles are
presented with the selector on one line, and
| | 00:38 | then each of our properties is
displayed on a separate line.
| | 00:41 | You'll notice that some of the selectors
have spaces between them and some don't.
| | 00:47 | So when these styles were created, and
there wasn't a whole of thought given to
| | 00:51 | exactly the formatting and spacing
options that we wanted for these.
| | 00:55 | And different people have different
preferences, in terms of how they would like
| | 00:58 | their styles formatted.
| | 00:59 | Well, you can control that.
| | 01:01 | So what I'm going to do is I'm going
to go up to Edit and choose Preferences.
| | 01:05 | Now if you're on the Mac, you're
going to want to go to Dreamweaver and
| | 01:08 | choose Preferences.
| | 01:09 | So there aren't very many differences
between the two interfaces, but that's
| | 01:12 | one of the big ones.
| | 01:13 | So I'm going to open up my Preferences.
| | 01:15 | Now, the first one I want to take a
look at is the Code Coloring category.
| | 01:20 | You can see behind this that our CSS
has certain colors that mean things.
| | 01:24 | So we have sort of magenta for the
selectors, a dark blue for the properties and
| | 01:29 | a lighter blue for the values.
| | 01:30 | Notice that we can edit that scheme.
| | 01:32 | So I'm going to come right
over here to Code Coloring.
| | 01:34 | For Document type, I'm going to go down
and choose CSS, and I'm going to click
| | 01:38 | Edit Coloring Scheme.
| | 01:40 | Now, in the bottom of this dialog
box, I get a preview of what the
| | 01:44 | coloring scheme is.
| | 01:45 | Now, you're free to go ahead and
change this to whatever you want;
| | 01:48 | for example, if I didn't like the
magenta color for the selectors, I could
| | 01:52 | select that and then
choose something else entirely.
| | 01:55 | The problem with that though, if you're
in a team environment, you're more than
| | 01:58 | likely going to get used to
looking at your styles a certain way.
| | 02:01 | When you get on somebody else's
machine, and they have their Code Coloring
| | 02:04 | changed, it can be kind of abrupt.
| | 02:06 | So you might want to be kind of
careful about changing any of these things.
| | 02:09 | One of the things that I've always
found to be a little confusing is the fact
| | 02:12 | that my properties are sort of a dark
blue, and my values are a lighter blue, but
| | 02:18 | there's not a whole lot of
difference between the two of them.
| | 02:20 | So I could grab that, if I wanted to, and
maybe make them just a tad bit lighter.
| | 02:24 | Now, there is a really nice visual
difference between the two of them.
| | 02:28 | There's a nice contrast there and even
though I can still read it, I'm not going
| | 02:31 | to mistake one for the other.
| | 02:33 | So I'm going to go ahead and click OK.
| | 02:35 | Now you can come back and
change those preferences at any time.
| | 02:37 | So if you decide after a while looking
at it, you don't like it that way, it's
| | 02:40 | easy enough to go back and change.
| | 02:42 | Now the next thing I want to do
is go down to my Code Hinting.
| | 02:45 | So in my Categories, I'm going to
choose Code Hinting, and I'm just going to
| | 02:48 | make sure that the check box is
set here for CSS property names.
| | 02:53 | You can see all of the different languages
and elements that Code Hinting is available for.
| | 02:57 | Now, the default is that CSS
property names is going to be turned on.
| | 03:01 | So the only time that's not going to be
available is if somebody purposely came
| | 03:05 | in here and turned it off.
| | 03:06 | So if you're working in Dreamweaver,
but if you don't see them, you can come
| | 03:09 | right back here into Preferences,
and turn them right back on.
| | 03:12 | Let's do one last set of preferences here.
| | 03:13 | I'm going to go to my Code Formatting
category, right there, and although the
| | 03:18 | majority of these preferences are
talking about HTML, I do have a CSS button
| | 03:22 | here that I can select.
| | 03:23 | So I'm going to go ahead and click that.
| | 03:24 | Now this changes how Dreamweaver's
going to format your CSS source code.
| | 03:28 | So one of the things that I'm going to
do is I'm going to turn off each property
| | 03:32 | on a separate line, and then I'm going
to turn on Blank lines between rules.
| | 03:37 | You get a nice preview here of
what this would actually like.
| | 03:40 | Now, that would be a little bit harder
for me to read, so I'm going to turn that
| | 03:43 | back on and keep my Blank line between rules.
| | 03:46 | I'm going to go ahead and click OK.
| | 03:48 | Click OK again, and you see nothing changed.
| | 03:52 | Well, that's OK because nothing is going
to change in your Code Formatting until
| | 03:55 | you actually apply the
source formatting to your code.
| | 03:58 | Now, any new code that we create would
have those properties, but if you want
| | 04:01 | code that you've already created to
look that way, here's all you have to do.
| | 04:04 | I'm going to over to my Coding toolbar,
right over here, and since I don't have
| | 04:08 | enough stream real estate to show this,
I have to click the Show More icon.
| | 04:12 | If you've got a very high screen
resolution, you can probably see this icon
| | 04:16 | without having to do that.
| | 04:17 | But I'm looking for this little paint
bucket with the tags. That is Format Source Code.
| | 04:22 | I'm going to go ahead and click that,
choose Apply Source Formatting, and now
| | 04:26 | even though it jumped me all the way
down to the bottom of the page, I can
| | 04:28 | scroll back up, and we can see that now,
for example, all of these properties
| | 04:34 | are on the same line, but I've got nice
spacing between all of those guys, and
| | 04:39 | that is extremely readable for when
I'm working in, and editing my CSS code.
| | 04:44 | Now I know that not everyone likes to
work with CSS the same way. That's okay.
| | 04:48 | I think it's great that you can
change how Dreamweaver displays your CSS to
| | 04:51 | match your personal preferences, and
as we'll see a little bit later, these
| | 04:55 | properties can greatly assist you in
deploying more efficient styles as well.
| | Collapse this transcript |
| Controlling shorthand notation| 00:00 | One of the most efficient practices
in CSS is the use of shorthand notation
| | 00:05 | for certain properties.
| | 00:06 | Rather than writing four separate
properties for top, right, bottom, and left
| | 00:11 | margin, for example, you can write a
single margin property and cut down the
| | 00:15 | code required throughout your CSS, considerably.
| | 00:18 | If you hand-code, you're likely to handle
the creation of shorthand notation yourself;
| | 00:23 | however, if you use Dreamweaver's
Visual CSS tools, you can control how
| | 00:27 | Dreamweaver handles shorthand notation
by setting some quick CSS preferences.
| | 00:32 | And you can see that we have a rule on
our style sheet, a list item selector.
| | 00:36 | It's written incredibly and efficiently,
as you can see as I scroll through this.
| | 00:41 | So, we have padding all the way around.
| | 00:43 | We have margin all the way around, and
we have font-family and font-size, and we
| | 00:49 | have a lot of borders going on here.
| | 00:50 | We have borders top, right, bottom, and left,
background color, image, position, repeat.
| | 00:56 | Okay, so anybody that would create
code by hand understands that this is
| | 01:00 | incredibly inefficient.
| | 01:01 | This is not the way that you would
probably want to write this code.
| | 01:04 | Well, if you're creating your CSS
through Dreamweaver visually, you'll likely
| | 01:09 | use shorthand notation, so that instead
of say five separate properties, you're
| | 01:13 | really only writing one.
| | 01:14 | Well, if you're going to create styles
through Dreamweaver's Visual tools, you
| | 01:18 | can control how the shorthand
notation is written and when it's written.
| | 01:21 | All you really have to do
is set one simple property.
| | 01:23 | So, what I'm going to do is go up
again to Edit and choose Preferences.
| | 01:29 | Again, if you're on the Mac, you're
going to go to Dreamweaver > Preferences,
| | 01:32 | and I'm going to click on
the CSS Styles Category.
| | 01:36 | Now you can see the main focus of
the CSS Styles Preferences is on
| | 01:40 | shorthand notation.
| | 01:41 | I can see here that I don't
have any of these items selected.
| | 01:44 | Now if you're opening up this dialog
box for the first time, chances are you'd
| | 01:48 | probably see a few of those checked,
because Dreamweaver, by default, will go
| | 01:51 | ahead and try to write the most
efficient styles possible for you, but you are
| | 01:55 | able to go in here and control this yourself.
| | 01:57 | Now what I'm going to do is I'm going
to go ahead and choose using shorthand
| | 02:01 | notation for Background, Margin and
padding, Border and border width, and
| | 02:06 | List-Style, but I'm going to leave Font off.
| | 02:08 | Now the reason I'm going to that is
because if you use the shorthand notation
| | 02:11 | for the Font selector, you generally
have to pass a lot of information into it:
| | 02:15 | font-weight, font-style, font-size,
the font-family that you're looking for.
| | 02:21 | You're free to leave all that off.
| | 02:22 | In fact, for a font shorthand notation,
you really only need to pass in size and
| | 02:26 | the font-family itself, but all the
things that you leave off it goes ahead and
| | 02:30 | defaults to the default value.
| | 02:32 | Now if you have a style in the cascade
above this that has a font-weight bold on
| | 02:38 | a paragraph, and then later on you
write another style for paragraph where you
| | 02:42 | just pass in size and font family, well,
your paragraph is going to reset from
| | 02:46 | bold, because it will
overwrite the earlier style.
| | 02:48 | So I really don't like
Dreamweaver controlling that.
| | 02:51 | If I use shorthand property for the font
notation, I'll go ahead and do that myself.
| | 02:55 | So I've got those four selected, and
you'll notice it has a choice here for
| | 02:59 | when editing CSS rules.
| | 03:00 | So after the rule has been
written, if you edit it, you know when
| | 03:04 | should shorthand be used?
| | 03:05 | Notice that I'm going to go ahead
and leave the default according to
| | 03:08 | the settings above.
| | 03:09 | That means that whenever a rule is
edited, regardless of its current state, it's
| | 03:13 | going to look at these rules above to
determine whether it should convert it to
| | 03:16 | shorthand notation or not.
| | 03:18 | We also have an Open CSS files when modified.
| | 03:20 | That means if you modify a rule, and the
CSS file itself was not already opened,
| | 03:24 | it would go ahead and open that up.
| | 03:26 | Now, since we have related files in
Dreamweaver, that's not as important as it
| | 03:29 | used to be, but it's still
nice to leave that checked.
| | 03:32 | Now, in the CSS Styles panel, which
we're going to be using in just a moment,
| | 03:35 | when you double-click a style to edit it,
it's going to do one of three things.
| | 03:39 | It's either going to edit it using
the Visual CSS dialog box which is the
| | 03:43 | default, it's either going to edit it
through the Properties pane which the
| | 03:46 | Properties Inspector would change to
reflect that particular selector, or edit
| | 03:50 | using Code View which would switch you
over to Code View, jump to that style
| | 03:53 | and let you edit it.
| | 03:54 | So, you could sort of choose your own
personal preference for that ,as well.
| | 03:57 | For the moment, I'm just going to leave
it as Edit using CSS dialog. All right.
| | 04:01 | I'm going to go ahead and click OK,
and now we've reset our Preferences.
| | 04:04 | Now, speaking of the CSS Styles panel, I'm
going to go over to that and then click on All.
| | 04:08 | So even though we are looking at our
CSS in Code View, I can still access and
| | 04:13 | control things through the CSS Styles panel.
| | 04:16 | I'm just going to come right over here
to my shorthand.css, double-click the li
| | 04:20 | and notice that based on our
preferences, it goes ahead and opens up the CSS
| | 04:24 | Rule definition dialog box.
| | 04:26 | Okay, so we're going to
make a couple of changes here.
| | 04:28 | I'm going to click on the Background
Category, and I'm just going to go ahead
| | 04:31 | and change my Background repeat to no-repeat.
| | 04:34 | I'm going to go to my Box Category,
and I'm going to change Padding, Same
| | 04:39 | for all to 20 pixels.
| | 04:42 | I'm going to do Margin.
| | 04:43 | I'll leave everybody the same,
except for, let's see, the Left Padding.
| | 04:48 | We're going to take the Left Padding, and
we're going to change it to 15 pixels as well.
| | 04:52 | Then finally, I'm going to go to
my Border Category, and I'm going to
| | 04:55 | change that to 2 pixels.
| | 04:56 | Now, we do have some font information here, too.
| | 04:59 | So let's make sure that it's not
going to rewrite the font selector as
| | 05:02 | shorthand notation.
| | 05:03 | I'm going to go ahead and change the Font
-size to 0.9 ems, and I'm just going to
| | 05:08 | go ahead and click OK.
| | 05:09 | Now as soon as I do that, look at
how Dreamweaver changed the code.
| | 05:13 | It listened exactly to my
Preferences, and it left the font alone.
| | 05:17 | So I still have a font-
family and a font-size selector.
| | 05:20 | It did not go ahead and
convert that to shorthand notation.
| | 05:24 | Background, Margin, Padding and Border,
on the other hand, now I have shorthand
| | 05:28 | notation for those, and look how
many fewer lines of code we have here.
| | 05:32 | We went from 20 something lines of code, I think,
to around 7 lines of code for the same selector.
| | 05:38 | So, that's really, really impressive.
| | 05:40 | Now, one of the main objections that
I've heard from those that prefer to
| | 05:43 | hand-code over letting Dreamweaver
automate some of that process is they feared
| | 05:47 | giving up control of
exactly how the code is written.
| | 05:50 | They just preferred to do it
the way that they want to do it.
| | 05:52 | However, if you access the CSS Style
Preferences, like we just did, you can
| | 05:56 | control when and how Dreamweaver
handles the creation of shorthand notation.
| | 06:00 | Now, that alone can go a long way
towards making sure your styles remain
| | 06:04 | consistent, whether you or
Dreamweaver is writing them.
| | Collapse this transcript |
| Building a style-focused workspace | 00:00 | Dreamweaver's flexible interface allows
us to create custom workspaces that are
| | 00:04 | tailored specifically for the task at hand.
| | 00:07 | By taking advantage of the preset
workspaces, or in the case of this
| | 00:10 | exercise building your own, you can make it a
lot easier to switch from one task to another.
| | 00:15 | So in this movie, we're going to build
a custom workspace that is focused on
| | 00:18 | working with styles.
| | 00:20 | So you can see I'm currently
working without a document open.
| | 00:23 | One of the things you want to do
when you're customizing the interface with
| | 00:26 | Dreamweaver is make sure
you're seeing everything.
| | 00:29 | So I'm just going to go ahead and use the
Welcome screen here to create a new HTML file.
| | 00:33 | We don't need to save it.
| | 00:34 | We don't need to do really anything with it.
| | 00:35 | It's just there so that we can
see the remainder of our workspace.
| | 00:39 | Okay, one of the first things I want
to make sure we're doing is all starting
| | 00:42 | more or less in the same place.
| | 00:43 | So you can see that I
currently have the Designer Workspace.
| | 00:47 | If I grab the pulldown menu, I can see
that there are a lot of preset workspaces.
| | 00:51 | I'm going to start with the Classic Workspace.
| | 00:53 | Now the reason I like starting with the
Classic Workspace, in sort of using that
| | 00:57 | as a starting point, is it takes the
Insert panel, and it docks it up here above
| | 01:02 | the document itself.
| | 01:03 | I just like it there.
| | 01:04 | It fits there a little bit better.
| | 01:06 | It gives me a nice horizontal menu to
work with, rather than having another
| | 01:09 | panel to worry about.
| | 01:11 | In the case of higher screen
resolutions, it actually saves a little bit
| | 01:13 | of screen real estate.
| | 01:14 | So, I kind of like it being up there.
| | 01:16 | Now at this point, we're really going
to need to do a good bit of modification.
| | 01:20 | The first thing I'm going to do
is start over here in the doc.
| | 01:22 | I'm going to close everything that's not
directly related to working with your site's CSS.
| | 01:27 | Now the browserlab panel, which is new
in CS5, is related to working with CSS;
| | 01:32 | however, if I want to preview using
Adobe's browserlab, I can do that directly
| | 01:37 | here through my Preview icon.
| | 01:39 | You can see there is the option right there.
| | 01:41 | So, devoting an entire panel to that,
if I'm not going to be using the panel,
| | 01:44 | really doesn't make much sense.
| | 01:46 | So I'm going to go ahead and go right
over here to the Panel menu, and I'm just
| | 01:49 | going to close that tab group.
| | 01:51 | That's going to leave the CSS Styles, AP
Element, and Tag Inspector panels together.
| | 01:55 | Now, I don't use the AP Elements panel
that often, but it does allow me to see
| | 02:00 | certain elements on the page, if
I'm using absolute positioning.
| | 02:02 | So I think I'll leave it alone.
| | 02:04 | The Tag Inspector really isn't
hurting anybody by being there either.
| | 02:07 | So I'll just leave the CSS Styles panel.
| | 02:09 | It's kind of the default panel from that group.
| | 02:11 | Well, there is another panel group
directly underneath this, Databases,
| | 02:15 | Bindings, and Server Behaviors.
| | 02:16 | Since I'm focusing on styles and not
dynamic development, I'll go ahead and
| | 02:21 | close that tab group as well. Cool!
| | 02:23 | Now that leaves me with
Files, Assets, and Snippets.
| | 02:26 | Now if you don't see the Snippets panel,
and the reason that we're seeing it is
| | 02:29 | because we're starting with the Classic space,
| | 02:31 | if you don't see that,
you're going to want to open that.
| | 02:33 | You can do that by going up to
Window and choosing Snippets.
| | 02:36 | Ours doesn't have a checkmark
beside it, but it is part of that group.
| | 02:39 | So I don't need to select that, but if
I do, notice that it just focuses on the
| | 02:42 | panel within the group.
| | 02:43 | It doesn't really close anybody else out.
| | 02:45 | So I want to make sure the Files and the
Snippets panel are docked right over there.
| | 02:50 | Now I'm not going to
include anything else in the dock.
| | 02:52 | If you have a high screen resolution
and you have a lot of screen real estate,
| | 02:55 | and you want to put some more panels
over there, nothing wrong with that.
| | 02:58 | This is just going to be our CSS-
focused workspace, so we don't really need any
| | 03:01 | of those other items.
| | 03:02 | Now, one toolbar that I want that
isn't opened, by default, is the
| | 03:06 | Style Rendering toolbar.
| | 03:07 | So, I'm going to go right over here
to my Document toolbar, I'm going to
| | 03:10 | right-click on that, and I'm going to choose
Style Rendering from the menu that comes up.
| | 03:14 | You could Ctrl+click on the Mac if you'd
like, if you don't have a two-button mouse.
| | 03:19 | Now, that's going to bring
up the Style Rendering panel.
| | 03:21 | So I'm just going to undock this and float it
for just a minute, so you guys can see this.
| | 03:25 | Now, that's another big
difference between the Mac and the
| | 03:28 | Dreamweaver interface.
| | 03:29 | For those of you on the Mac, if you
just try to undock the Style Rendering
| | 03:32 | toolbar, you are unsuccessful.
| | 03:34 | It docks in the Document toolbar,
and it just sort of stays there.
| | 03:37 | But on the PC, we're free to kind
of put this anywhere that we want.
| | 03:40 | So, I'm just going to go ahead
and move this to another location.
| | 03:43 | I'll place him me on right here in the
same little line with the Document toolbar.
| | 03:48 | Now you may have noticed that we can't
see the whole thing. Well, that's okay
| | 03:51 | because if I really need to, I can
collapse my panels down the icons, and I'll
| | 03:55 | have full access to that.
| | 03:56 | So I can just sort of toggle those
back and forth when I need to get to
| | 03:59 | these pseudo-selectors.
| | 04:00 | Now, what the Style Rendering toolbar
does for us is it allows us to look at our
| | 04:04 | print styles, or screen styles in sort
of isolation, or turn our Style Rendering
| | 04:09 | on and off within Dreamweaver's Design View.
| | 04:11 | So it's a very, very handy toolbar to have
around when you're working with your styles.
| | 04:15 | Now, there is one last thing I want to do here,
and I'm going to go up to the Windows menu.
| | 04:18 | I'm going to go down to Results, and
I could really choose any of these.
| | 04:22 | It doesn't really matter.
| | 04:22 | So I'll just choose Search,
which is the first one.
| | 04:24 | That's going to bring up
a much larger panel group.
| | 04:27 | This has the Search, Reference,
Validation, and what we're really interested in
| | 04:31 | here is in Browser Compatibility panel.
| | 04:33 | If we do a Browser Compatibility check on our
CSS, the results are going to show up there,
| | 04:38 | so it's a good idea to go
ahead and have this opened.
| | 04:40 | Now obviously, this is not
a very efficient workspace.
| | 04:43 | So, what I'm going to do is take the
Properties tab right here, drag that down
| | 04:47 | so that it groups with these guys, and
then I could even take the Properties tab
| | 04:51 | and move it all the way over here to the left.
| | 04:53 | So, it's the first panel in the group.
| | 04:55 | I just kind of like it having that
sort of default location. So there we go!
| | 04:58 | We've got a workspace now that is going to
work for us while we're working with our CSS.
| | 05:02 | We have our CSS Styles panel.
| | 05:04 | We have Snippets where we can save
snippets and code, if we're working with
| | 05:07 | certain styles that we want to reuse later.
| | 05:09 | We have our Style Rendering toolbar, and
our Results panel group is docked with
| | 05:14 | our Properties Inspector.
| | 05:15 | So, that's perfect!
| | 05:16 | Well, you don't want to have to keep doing
this every single time you work on your styles.
| | 05:20 | So, I'm going to go right up here to
the workspace switcher, and I'm just going
| | 05:23 | to choose New Workspace.
| | 05:24 | I'm going to call this workspace CSS.
| | 05:27 | I'll go ahead and click OK.
| | 05:29 | That's part of my menu structure now.
| | 05:31 | I can switch back to CSS at any time.
| | 05:33 | So, if I go back to Designer, for
example, or if I go to the Coder environment,
| | 05:37 | it's really easy for me to just come
right back up here, choose CSS, and it
| | 05:41 | takes me right back to where we were. Cool!
| | 05:43 | So, we now have a workspace that gives
us quick access to all the tools we need
| | 05:47 | in Dreamweaver when working on our styles.
| | 05:48 | Now, this workspace is going to allow
us to focus on our styles and save us a
| | 05:52 | good bit of time that we would
normally spend opening, closing, and arranging
| | 05:55 | panels for each new task.
| | 05:57 | So, regardless of what you're doing in
Dreamweaver, whether you're working on
| | 05:59 | styles or working in a coding
environment, I'd recommend considering creating a
| | 06:03 | custom workspace for that particular
task, so you don't spend so much time
| | 06:07 | opening and closing panels.
| | Collapse this transcript |
| CSS Styles panel overview| 00:00 | The central location for controlling styles
visually in Dreamweaver is the CSS Styles panel.
| | 00:06 | It's not an exaggeration to say that
almost anything you can or need to do with
| | 00:11 | CSS can be done through this panel.
| | 00:13 | It provides an overview of all external
and embedded styles, and allows you to
| | 00:17 | create and modify and manage styles, and
also allows you to focus on the styling
| | 00:21 | of individual elements.
| | 00:23 | You'll find the CSS Styles panel in
the CSS panel group, usually located at
| | 00:27 | the top of the Panel dock, although you're
free to reposition it anywhere you'd like.
| | 00:30 | Now, at the top of the panel, you'll find
buttons for two different views: All and Current.
| | 00:36 | The All view gives you an overview of
all of the CSS styles applied to the
| | 00:40 | current document, while the Current
view gives you a detailed view of the rules
| | 00:44 | applied to any selected element. All right.
| | 00:46 | Well, let's take a deeper
look at the CSS Styles panel.
| | 00:49 | In order to do that, I'm going to go to
my Files panel, and I'm simply going to
| | 00:53 | double-click the tab, which is
going to collapse that group.
| | 00:56 | That's going to give me much more
screen real estate to work with, and I get to
| | 00:59 | see the entire CSS Styles panel and
not sort of a little cramped view of it.
| | 01:04 | Notice that you can grab any of
these dividers and move them up or down.
| | 01:07 | So, if you need to see more of one
area of the panel versus another, you can
| | 01:11 | always sort of customize that
to seeing exactly what you need.
| | 01:14 | Now, let's take a look at the All
view, and I want to first turn our
| | 01:17 | attention to the top pane.
| | 01:20 | This is where all of our CSS styles are listed.
| | 01:22 | So, here is our main.css.
| | 01:25 | We know it's an external style sheet
that's attached to our page because it
| | 01:28 | has the .CSS extension.
| | 01:30 | I can also see it's been assigned
the screen and projection media types.
| | 01:34 | Then I have a listing of all the
styles that are inside this CSS file.
| | 01:39 | Now, I can collapse that.
| | 01:40 | Now, on Mac you'll see a little arrow
there, but on the PC I'm just going to
| | 01:43 | click on the little minus symbol.
| | 01:44 | I can also see that I have some
embedded styles in this page, one to be
| | 01:47 | specific, and I know it's an embedded style,
because I see this style tag. All right.
| | 01:51 | I'm going to go ahead and open my
main.css back up again, and I'm just going to
| | 01:56 | scroll down and sort of randomly select a rule.
| | 01:59 | Well, #mainContent is already highlighted, so
we'll just go ahead and leave that highlighted.
| | 02:03 | Now, if you don't have #mainContent
highlighted, simply scroll down, and any
| | 02:07 | rule that you click on you're going
to see just below it, in the Properties
| | 02:10 | pane, you're going to see
properties for that rule.
| | 02:12 | So if you select the one that's on there,
you'll see the properties for that rule.
| | 02:15 | Now, you can display these
properties in one of three ways.
| | 02:18 | The first is the Category view, and
you can see these little icons right down
| | 02:21 | here on the bottom left-hand side of this panel.
| | 02:24 | The Category view is going to show you
different categories, such as controlling
| | 02:28 | Font properties, Background
properties, Block, Border, Box.
| | 02:33 | You can see most of the properties
of the #mainContent selector deal with
| | 02:36 | Box model properties.
| | 02:37 | So, we have width, float, margin-bottom.
| | 02:39 | There, you can quickly go through your
categories and find properties you want
| | 02:43 | to apply to it, or look at the
properties that have already been applied to it.
| | 02:46 | We also have a List view.
| | 02:47 | Now the List view is going to show you
all of your applied properties in order.
| | 02:51 | They're going to appear at the top.
| | 02:52 | Then after that, you have a listing of
every single CSS property that you can set.
| | 02:58 | Now, it doesn't mean that you can
set it for that particular element.
| | 03:00 | It's really giving a list of everything.
| | 03:03 | So, it's a nice way to sort of quickly find
any properties that you want to apply to it.
| | 03:07 | Now, the third view is my
favorite, and it's also the default.
| | 03:10 | That is going to show you
only the set properties.
| | 03:13 | What I like about that is it
sort of clears out the clutter.
| | 03:16 | All you get are the properties
that are assigned to this element.
| | 03:18 | If you want to modify it by adding
properties, you can do that by clicking
| | 03:21 | the Add Property link.
| | 03:23 | Now, we're going to take a
look at that in just a moment.
| | 03:24 | I'm going to scroll down over here on my
Index page, and I'm just going to click
| | 03:28 | right here into this paragraph of text.
| | 03:30 | Now, as soon as I do that, I don't
really see any change in my CSS Styles panel,
| | 03:34 | because I'm still looking at all of the styles.
| | 03:36 | But if I click on Current, notice that
now it's focusing on this text, not so
| | 03:42 | much any individual rules.
| | 03:43 | In fact, now I get three panes, and the
top pane is giving me a summary of this
| | 03:48 | rule, meaning all of the properties
from all of the different rules in style
| | 03:51 | sheet that would apply to this element.
| | 03:53 | Then the middle pane
here is giving me a cascade.
| | 03:56 | It's showing me which rules are applied to this.
| | 03:59 | If I click through them, I can even
see which values are being applied, and
| | 04:03 | which are inherited, which are not
inherited, which are being overwritten.
| | 04:06 | This is a really useful view
| | 04:08 | we're going to take a closer
look at a little bit later on.
| | 04:11 | Well, just as in my All view, if I want to add
another property to a rule, I could do that.
| | 04:15 | So, I could click right here to add a
property, and if I wanted to, I could just
| | 04:19 | type in say margin-bottom.
| | 04:22 | Now, if you're not that comfortable with
typing in a value, you're worried about
| | 04:25 | misspelling it or something, you can
also grab the pulldown menu, and you can
| | 04:28 | choose Properties that way, which is pretty cool.
| | 04:30 | Now, just to the right of that,
you're going to be typing in a value.
| | 04:32 | I'm just going to type in 1 em.
| | 04:33 | Now, notice that I can type
in the em value right after it.
| | 04:36 | I don't have to grab it from the pulldown menu.
| | 04:38 | If I hit Return, it would go ahead
and add a 1 em margin-bottom to my
| | 04:42 | paragraph selector.
| | 04:43 | Now, another cool thing that we can do
here is that we can enable and disable
| | 04:47 | specific properties.
| | 04:48 | Let's say we're troubleshooting, and
we're wondering if this spacing is what we
| | 04:52 | really want between these lines.
| | 04:53 | Well, I could come right over here to my
Properties and disable that line-height
| | 04:57 | property to see what it would look
like without the line property applied.
| | 05:01 | I could peruse the whole page and
kind of see if it affected my page
| | 05:05 | negatively in other areas.
| | 05:07 | Then I could enable it again simply by clicking.
| | 05:09 | Now, this is called Enable, Disable CSS
Property, and you can do this just about anywhere.
| | 05:14 | Notice that the icon is right down
here in the lower right-hand corner.
| | 05:17 | Notice that the icon also is showing up
here in your Summary for Selection, and
| | 05:22 | you can go ahead and enable and disable here.
| | 05:24 | Even if you're working in the All
view, you can still enable and disable
| | 05:27 | properties right there.
| | 05:28 | So, it's a really powerful little tool to use.
| | 05:31 | Now, just sort of going over some of
the other options, and I'm going to turn
| | 05:34 | it back on, because often it's horrible,
but some of our other options that we
| | 05:37 | have down here. We can delete properties and
rules. As we've seen, we can enable and disable them.
| | 05:41 | We can edit rules.
| | 05:42 | We can create new ones.
| | 05:43 | These are all things that we're
going to be doing a little bit later on.
| | 05:46 | But I'm interested in one in particular
here, which is to attach a style sheet.
| | 05:49 | I'm going to go over here to All again.
| | 05:51 | I notice that I have one
external style sheet, which is main.css.
| | 05:55 | Well, I'm going to go ahead and click
the Attach Style Sheet icon right here,
| | 05:59 | and now I can attach an
entirely new style sheet to this page.
| | 06:03 | So, I'm just going to hit Browse.
| | 06:04 | I'm going to browse into the 01_05
folder/ _css, going to that folder, and I'll
| | 06:10 | choose our print style sheet, and
also I'll go ahead and click OK.
| | 06:12 | Now, since this is a print style sheet,
you can choose whether to add that
| | 06:15 | through the use of a Link tag or add Import.
| | 06:17 | I'm going to use a Link tag, and
I'm also able to go ahead and assign a
| | 06:20 | Media type to this.
| | 06:21 | So, I can go to the pulldown menu and choose
print, or I could just type it in if I wanted to.
| | 06:25 | I'm going to go ahead and click OK.
| | 06:26 | Notice that we now have a
brand-new style sheet attached.
| | 06:29 | Now, one of the things I'm trying to
show here is how cool some of the Visual
| | 06:32 | tools are in Dreamweaver.
| | 06:33 | But just because they're cool, doesn't mean
that they're going to do everything right.
| | 06:37 | Now the CSS Styles panel
does almost everything right.
| | 06:39 | But this is one of the things that it
gets a little wrong which is really kind
| | 06:42 | of why I wanted to point it out to
you, so that you'll be aware of it.
| | 06:45 | I'm going to switch over to Code view, and I'm
going to make sure I'm looking at my source code.
| | 06:49 | I'm going to scroll up
towards the head of the document.
| | 06:51 | So here, we can see the Link
tag for our main style sheet.
| | 06:55 | Here we see our embedded styles, and
then, right here on line 13, we could see
| | 06:59 | our print style sheets.
| | 07:00 | So, what Dreamweaver does, the order
that you create your styles is the order
| | 07:04 | it's going to assign these.
| | 07:05 | Well, even though it's a print style
sheet, it's still a bad idea to have it
| | 07:09 | below in the embedded styles.
| | 07:10 | So, I'm going to grab that, cut it, so
Ctrl+X or Command+X, and then paste it on
| | 07:16 | the line below our main.css.
| | 07:18 | I'm just going to sort of reorder those guys.
| | 07:21 | Save that. Switch back to Design view.
| | 07:23 | Now, if I look at my CSS Styles panel, I
can see that it's changed order here too.
| | 07:28 | Now, I would love to tell you that you
could drag them out here, but it doesn't
| | 07:30 | quite work that way.
| | 07:31 | But it's nice, because it gives you a
nice visual clue as to whether your styles
| | 07:35 | are out of order or not.
| | 07:36 | So you can see the order that they're being
applied to the page, which is pretty cool.
| | 07:39 | So, I think it's pretty clear that the
CSS Styles panel puts an amazing amount of
| | 07:43 | information at your fingertips.
| | 07:44 | Now, it's often going to give you the
fastest and most efficient way to create
| | 07:47 | and modify rules, and it gives you a
really cool central location to control all
| | 07:51 | of your styles throughout your entire site.
| | 07:53 | Now, I want you to pay attention,
because as we delve a bit deeper into
| | 07:56 | Dreamweaver's ability to control and
manage your styles, we're going to be
| | 07:59 | exploring this panel in a lot more detail.
| | 08:01 | Keep in mind that just like everything
else, you must fully understand how the
| | 08:04 | panel works in order to use it
effectively. Knowing its nuances and quirks, like
| | 08:09 | adding style sheet links to the bottom
of the head tag, as well as the strengths
| | 08:12 | are important for making sure the
panel is used properly throughout the
| | 08:16 | development process.
| | Collapse this transcript |
| The Properties Inspector| 00:00 | The Properties Inspector is the
contextually-sensitive nerve center of Dreamweaver.
| | 00:04 | It allows you to control the HTML and
CSS based properties of any element that
| | 00:09 | you have selected, or that
you're currently focused on.
| | 00:11 | From the CSS point of view,
there is a lot you can do through the
| | 00:14 | Properties Inspector.
| | 00:15 | It can, however, lead to some pretty
unexpected results when editing your CSS,
| | 00:19 | so it's really important to know exactly
how it works, before using it to assist
| | 00:22 | you in managing your CSS.
| | 00:25 | The Properties Inspector is going to be
located at the very bottom of your interface.
| | 00:29 | Now if you don't see it, you can go up
to Window and choose Properties, and that
| | 00:32 | will open it up, and probably
open it up in that location.
| | 00:35 | Now you can see that the
Properties Inspector has two tabs.
| | 00:37 | It has an HTML tab and a CSS tab.
| | 00:41 | The HTML tab controls structural properties,
| | 00:43 | so heading tags, paragraph tag,
strong tags, things like that.
| | 00:47 | The CSS tab controls your style properties.
| | 00:50 | The information that displays is based on
the element you currently have selected.
| | 00:54 | Now we do have this button right down
here in the bottom that says Page Properties.
| | 00:57 | If I click on that, I get a summary of
some of the Appearance settings and some
| | 01:01 | of the data that we can set for our pages.
| | 01:03 | Notice that we have an
Appearance for both CSS and HTML.
| | 01:06 | Now this actually can allow you to do some
things that really isn't done much anymore;
| | 01:11 | for example, setting a Background
image on the body tag as an attribute - we
| | 01:15 | generally control those through style.
| | 01:16 | So you want to be really careful
about setting certain properties here.
| | 01:20 | Now if you do choose to use this,
and you can see that right now mine is
| | 01:23 | populated with a font, some sizing
information, background colors, background
| | 01:27 | images, things like that.
| | 01:28 | It's picking that information
up from my external style sheet.
| | 01:31 | So it can examine your style sheet, and
then let you know exactly what type of
| | 01:35 | general properties you've applied to your page.
| | 01:37 | So it's a nice way to see a summary of that.
| | 01:39 | If I made a change here, it would
actually change my external style sheet.
| | 01:42 | But if I was starting from scratch,
it would write those styles for me.
| | 01:45 | Now you want to be very careful about
doing that, because if you're used to
| | 01:48 | writing your CSS a certain way, there
is no guarantee that Dreamweaver is going
| | 01:51 | to write the styles the same
way that you would write them.
| | 01:53 | So you might want to experiment with it, and
see if it works the same way that you want it.
| | 01:57 | But typically, I use it just a sort of
get an overview of how things are looking.
| | 02:00 | I am going to make Cancel there.
| | 02:01 | Let's take a look at using the
Properties Inspector to actually modify our CSS.
| | 02:06 | I'm going to scroll down a little bit
to Customer notifications, this heading
| | 02:09 | right down here, and click inside of that.
| | 02:11 | Now I can see that this is an h3 tag.
| | 02:13 | I can see that by looking at the
tag selector, but if I look over at my
| | 02:16 | Properties Inspector, it also tells me
that the Targeted Rule is the h3, because
| | 02:20 | I'm inside of an h3 tag.
| | 02:21 | You can also see that if I hover that,
it tells me where that rule is found.
| | 02:25 | It's found in my external style sheet, main.css.
| | 02:27 | Well, there aren't too many
properties within the Properties Inspector.
| | 02:30 | We have Font, Size, Color and a few other ones.
| | 02:33 | Notice that if I hover over Color, it
tells me that it's inherited from the rule h3.
| | 02:38 | If I hover over Size, it tells me
it's inherited from the rule h3.
| | 02:40 | If I hover over Font, it tells me that
font-family is actually inherited from
| | 02:45 | the rule h1, h2, h3.
| | 02:47 | So you don't want to
infer from these properties that
| | 02:49 | they're all coming from the same rule.
| | 02:50 | What we're seeing here is an
aggregate of all of our CSS styles.
| | 02:53 | So if a Font is actually inherited from
a tag or a selector above that, you're
| | 02:56 | going to see that here.
| | 02:57 | Now that might make you a
little nervous about changing that.
| | 03:00 | So let me show you what happens.
| | 03:01 | I'm going to grab the Font pulldown menu,
and I'm going to change that to Arial.
| | 03:04 | Now you'll notice that even though we
were inheriting the Font property from the
| | 03:08 | h1, h2, h3 selector, you'll notice
that my other headings did not change.
| | 03:12 | The reason for that is because the
Targeted Rule over here, it's at h3.
| | 03:16 | So if I hover over Font now, notice
that it's inheriting it from the rule h3.
| | 03:20 | So what Dreamweaver did, it goes
ahead and targets the closest selector to
| | 03:24 | that particular element,
| | 03:25 | by closest selector, I mean
the closest in the cascade.
| | 03:27 | It applies it to that particular selector.
| | 03:29 | So from that standpoint,
it's kind of worry free.
| | 03:32 | You're not going to be changing a
selector that is inheriting the properties from.
| | 03:35 | It's going to go to the very closest
selector within the cascade and apply it there.
| | 03:39 | If I hold the Alt key down, and
that'll be Command+Option key on the Mac, and
| | 03:43 | click on the headline, you
can kind of see the cascade.
| | 03:46 | You can see all the different
selectors that are applying to the h3.
| | 03:48 | The h3 one is the absolute closest
to it, and that's the one where the
| | 03:52 | font-family was applied to.
| | 03:54 | Now, had I wanted to make that change
to all the headings in my site, I could
| | 03:57 | have easily done that by grabbing the
Targeted Rule pulldown menu, scrolling up
| | 04:01 | and finding that h1, h2, h3 selector.
| | 04:03 | So if I select that, and target it
specifically and then tell it Arial, notice
| | 04:08 | that all of my headings changed now.
| | 04:10 | So you can be very specific about which
rule you want to affect, or you can let
| | 04:14 | Dreamweaver go ahead and affect the
rule that's closest to the element that you
| | 04:17 | have selected within the cascade.
| | 04:19 | So it's a very intelligent
interface, from that standpoint.
| | 04:22 | Now we are also free to edit rules.
| | 04:23 | So if you target a rule and hit Edit Rule,
you can bring up the visual dialog box.
| | 04:27 | I'm just going to hit Cancel.
| | 04:28 | You can also target the CSS panel, and
make sure it focuses on that particular
| | 04:32 | rule by clicking that.
| | 04:33 | But the Targeted Rule pulldown menu also has
a couple of other things that are pretty neat.
| | 04:36 | If I grab that pulldown menu, notice that I
have the ability to create a brand New Rule.
| | 04:41 | I also have the ability to
create a New Inline Style.
| | 04:43 | What's neat about that is that's the
only place in Dreamweaver's interface where
| | 04:47 | you can create an inline rule without
actually having to hand code it yourself.
| | 04:51 | You might be saying, who is
going to use inline rules?
| | 04:53 | Well, if you're creating HTML newsletters,
for example, that's a really nice way
| | 04:57 | of ensuring the proper styling.
| | 04:59 | So they're still valid in that instance.
| | 05:01 | It's nice to know that we have a place
in Dreamweaver where we can go ahead and
| | 05:04 | create those visually.
| | 05:05 | So that's pretty cool.
| | 05:05 | Now there are some distinct
differences between the HTML and CSS tabs.
| | 05:10 | I want to showcase those for just one minute.
| | 05:12 | So if we scroll down a little bit
further, we can see that in the first
| | 05:14 | sentence here, it says when you
book a tour with Explore California, you
| | 05:17 | should receive two notifications.
| | 05:19 | I'm going to highlight the
notification tour confirmation right there.
| | 05:23 | If I'm on my CSS properties, and I go
and hit the Bold icon right here, it's
| | 05:27 | going to attempt to create a
new Class selector around that.
| | 05:30 | That's not what I want.
| | 05:31 | I want a strong tag there.
| | 05:32 | So notice that if I click on the HTML
tab and click Bold, I get a brand-new
| | 05:37 | strong tag around this.
| | 05:38 | So even though it's the same icon,
very different results based upon which
| | 05:42 | tab you've selected.
| | 05:44 | So if I go back to CSS and highlight
Explore California, and choose Bold, now
| | 05:48 | it's asking me do I want to create a
class, and maybe in this case I do.
| | 05:51 | Maybe I want to create the company class.
| | 05:54 | Notice that I've created a brand-new
class, applied it, applied a span tag
| | 05:58 | around it with that.
| | 05:59 | I can even go ahead and change
things like Color, for example.
| | 06:03 | So I can go ahead and sample
that color from my navigation.
| | 06:06 | Now it's applied that to company, as well.
| | 06:08 | So now I have a class that I can
use any place that I find Explore
| | 06:11 | California, for example.
| | 06:13 | I can simply highlight, grab the
Targeted Rule pulldown menu and apply
| | 06:18 | that company class.
| | 06:20 | So the Properties Inspector is
actually an incredibly efficient way to manage
| | 06:23 | certain aspects of your site's CSS.
| | 06:26 | You just need to be sure you know
where you're focused, and whether the CSS
| | 06:30 | or HTML tab is active.
| | 06:31 | Also, make sure you understand how
that Targeted Rule feature works.
| | 06:35 | That's going to help you determine
which rule is going to be edited.
| | Collapse this transcript |
| Creating styles visually| 00:00 | Regardless of the method that you
choose to create new rules in Dreamweaver,
| | 00:04 | when creating a new CSS rule visually,
you'll use the New Rule dialog to specify
| | 00:10 | the selector, and the CSS Rule
Definition dialog to set the rule's properties.
| | 00:15 | While this process is fairly straightforward,
| | 00:17 | knowing the ins and outs of it
can really help speed up the creation of
| | 00:20 | CSS in Dreamweaver.
| | 00:22 | As you can see, our page
currently has no styling whatsoever.
| | 00:25 | To get structure on the page, notice
we have a body tag, a div with an id of
| | 00:29 | mainContent, but past that,
really nothing going on, style-wise.
| | 00:34 | So the first thing I'm going to do is go
over to my Files panel and collapse it.
| | 00:37 | Again, that gives me a nice, larger
view of my CSS Styles panel, and I want
| | 00:40 | to create a New Rule.
| | 00:42 | So I'm just going to go right down to
the bottom of CSS Styles panel, and I can
| | 00:45 | see there is an icon right down here.
| | 00:47 | That looks like a page
with the Plus symbol on it.
| | 00:49 | I'm going to go ahead and
click that to create a New Rule.
| | 00:51 | Now this brings up the New CSS Rule dialog box.
| | 00:55 | This is where you're going to tell
Dreamweaver which elements on the page you
| | 00:58 | want to target, so what Selector you want.
| | 01:00 | Notice that we have several different
types of selectors that we can choose
| | 01:03 | from: classes, ID selectors, Tag,
which is also referred to as element
| | 01:08 | selectors, and Compound selectors.
| | 01:10 | The Compound Selectors
pretty much are anything you want.
| | 01:13 | Usually they're descendent selectors,
but that means you can just type in
| | 01:15 | anything you'd like into the dialog box.
| | 01:18 | I'm going to choose Tag.
| | 01:19 | I can go ahead and grab from the
pulldown menu in the Selector Name whichever
| | 01:23 | tag I want, or if I'd like, I can
also highlight it and just type it in.
| | 01:27 | So let's go ahead and do the body tag.
| | 01:29 | So either I grab that to the
pulldown menu or just type in body.
| | 01:33 | Now spelling counts here, so if you're
going to type into this dialog box, make
| | 01:37 | sure you type everything correctly.
| | 01:39 | Now after you tell it which type of
selector you want, and then after you define
| | 01:43 | the selector, the next thing in this
dialog box is to choose where that rule is
| | 01:47 | going to be located.
| | 01:48 | Now in this case, we're going to say,
This document only, but notice we can also
| | 01:52 | attach it within a New Style Sheet File.
| | 01:55 | If our current page had a style
sheet already attached to it, we could
| | 01:58 | also place it in there.
| | 01:59 | So for this one, I just want
to say, This document only.
| | 02:01 | So I'm going to go ahead and click
OK, and now we're presented with a
| | 02:04 | brand-new dialog box.
| | 02:06 | This is the CSS Rule Definition dialog.
| | 02:09 | Now notice that on the left-
hand side we have categories.
| | 02:12 | So we can look at the properties
regarding Type, Background properties, Box
| | 02:17 | model properties, Positioning
properties, all sorts of categories over here.
| | 02:21 | I'm going to stick with Type for the
moment, and what I'm going to do is go to
| | 02:24 | Font, grab the pulldown menu and choose
Georgia, Times New Roman, Times, serif.
| | 02:29 | So you can see that within this
dialog box, there are already a lot of
| | 02:33 | predefined font stacks in here.
| | 02:35 | If you're coding by hand, you'd have to
type in those font stacks yourself, but
| | 02:38 | Dreamweaver has a lot of those already in.
| | 02:41 | You're free to create your own, if you want
to use one that Dreamweaver doesn't have by default.
| | 02:45 | For font size, I'm just going to choose
100, and I'm going to type in percent.
| | 02:49 | Now there are plenty of units
of measurement that you can use.
| | 02:52 | You're free to grab the pulldown
menu here and use whatever you'd like.
| | 02:55 | But if you know the unit of measurement
you want to use, you don't have to do that.
| | 02:59 | You can just go ahead and add it
directly after the number itself, as I did
| | 03:03 | here with percentage.
| | 03:04 | If you hit Tab, notice that it
will go ahead and populate that there.
| | 03:07 | So that works perfectly.
| | 03:08 | Now I'm going to go to the Box Category.
| | 03:10 | In the Box Category, I'm going to
choose 0 for Padding, 0 for Margin.
| | 03:15 | I'm just going to leave Same for all selected.
| | 03:17 | So I'm going to go ahead and click OK.
| | 03:20 | Notice that our font changed, font
size may have shifted on you just a little
| | 03:23 | bit, but also our content is now
budding up right at the edge of the page,
| | 03:27 | because our default
margins and padding are now gone.
| | 03:30 | Notice in the CSS Styles panel it now
shows you that selector, and we get a
| | 03:35 | nice overview of the selector, as well.
| | 03:37 | Let's go ahead and create another rule,
but we're going to have Dreamweaver sort
| | 03:39 | of shorten that process.
| | 03:41 | I'm going to click right here
in the headline, Got questions.
| | 03:44 | You'll notice its right
there inside of an h1 tag.
| | 03:47 | So I'm going to go ahead
and choose New CSS Rule.
| | 03:49 | When I do that, at first it's going to
try to do a Compound Selector because
| | 03:53 | there is some structure involved here.
| | 03:54 | But I'm going to switch that to Tag, and
notice that it automatically puts h1 in
| | 03:58 | there, because that was the
element that we were focused on.
| | 04:01 | Once again, I'm going to say,
This document only, and click OK.
| | 04:03 | For that one, I'm going to
choose a Font-size of 2em.
| | 04:07 | Notice again, all I have to do
is type em directly after that.
| | 04:11 | For Color, now when you choose a Color
using any of Dreamweaver's visual tools,
| | 04:15 | you do get a Swatch panel.
| | 04:16 | Now at first, people get really
excited about that, but the reality of it is
| | 04:20 | you're not going to be able to
save your Custom Colors to this.
| | 04:22 | So this is just the Web safe color palette.
| | 04:24 | You do have a Color Picker, so you
could mix a color together if you'd like.
| | 04:28 | That would work out just fine.
| | 04:29 | You could also type in the
hexadecimal value directly right here.
| | 04:33 | Now there is also another feature here
that I really like about this Color Picker.
| | 04:36 | Notice that if I click the color chip, I
can go right over here to the image and
| | 04:39 | really anywhere within your document
window, and I can just pick a color
| | 04:43 | directly out of that.
| | 04:44 | So if I want to get that
particular blue, I can click that.
| | 04:47 | If I hit Apply, I can preview those changes.
| | 04:50 | You can see I can preview the color here.
| | 04:51 | Now I'm actually going to
type in the hexadecimal value.
| | 04:53 | So I'm going to leave the pound or
octothorpe character there, and right after
| | 04:57 | that I'm going to type in 193742.
| | 05:01 | So unfortunately, it's not going to
remember those colors for you, or store them,
| | 05:05 | so if you have Custom Colors that
you're going to be using, you're probably
| | 05:08 | going to type this in manually each time.
| | 05:09 | Now, I'm going to go to my Box Category.
| | 05:11 | I'm going to deselect Same for all for Margin.
| | 05:14 | I'm going to give it a Top margin of 0,
a Right margin of 0, Bottom margin of
| | 05:18 | 0.4 ems and a Left margin of 0.
| | 05:22 | I certainly could have just gone right down
to the Bottom margin and chosen that, as well.
| | 05:26 | We can go and click OK.
| | 05:27 | Now I can see all of my
summary of my properties there.
| | 05:30 | Now I'm going to scroll down a little bit.
| | 05:31 | So far, we've done two element selectors.
| | 05:33 | Let's take a look at writing
a different type of Selector.
| | 05:36 | So if I scroll down to the Customer
notifications paragraph, I can see in the
| | 05:40 | first line we have right here, When
you book a tour with Explore California.
| | 05:44 | So I'm just going to highlight the
words Explore California. Maybe I want those
| | 05:47 | styled a little bit
differently than the rest of my page.
| | 05:50 | So with that text highlighted,
I'm going to click New CSS Rule.
| | 05:53 | Now interestingly enough, you'll
notice that Dreamweaver went ahead and
| | 05:57 | automatically chose Class for Selector Type.
| | 05:59 | It did that because I had a range of
text selected and not in one specific tag.
| | 06:04 | So I'm just going to go ahead and
choose a Selector Name for this.
| | 06:06 | I'm just going to type in .company.
| | 06:09 | Now the dot is important.
| | 06:11 | It precedes any Class Selector.
| | 06:12 | So I want to make sure it's typed in,
and then the word company right behind it.
| | 06:16 | If you leave that off, Dreamweaver will
place a dot in there for you, but it's a
| | 06:19 | bad practice to get in the habit of doing.
| | 06:21 | So make sure you remember to
place a dot before any class name.
| | 06:24 | Now so far, we've placed these rules in
the current document, but what if you
| | 06:28 | wanted to create a brand-new style sheet?
| | 06:30 | Well, creating a new rule and a new
style sheet all at the same time is a pretty
| | 06:33 | efficient operation, if you're
creating a new style sheet for your site.
| | 06:37 | So I'm just going to choose
New Style Sheet File. Click OK.
| | 06:41 | Now I'm prompted by an entirely new
dialog box to go ahead and name this
| | 06:45 | particular style sheet.
| | 06:46 | I'll go inside the _css folder,
and I'm going to save it as main.css.
| | 06:51 | I'm going to go ahead and Save that.
| | 06:53 | So you'll notice it went ahead and
created the style sheet and attached to the
| | 06:56 | page in one operation, as
we're creating the style.
| | 06:59 | That's pretty efficient.
| | 07:01 | So I'm going to go ahead and
change my Font-weight to bold.
| | 07:04 | I'm going to go ahead and apply that same Color.
| | 07:06 | Now again, it would be really helpful if
you can remember it for us, but it can't.
| | 07:09 | So I'm just going to type in
#193742, and go ahead and click OK.
| | 07:16 | Now you'll notice that
nothing changed on the page.
| | 07:18 | Well, it created the class, but it's not
going to automatically apply it for you.
| | 07:21 | So I can go ahead and go down to my
Properties Inspector, and through the use of
| | 07:26 | this Targeted Rule, I can grab that
pulldown menu and just apply the company
| | 07:29 | class to that range of text. Here we go.
| | 07:32 | Now we have our new styling.
| | 07:33 | Before we finish, let's do one more selector.
| | 07:35 | I'm going to go right up here to my
image, and I'm going to click on that
| | 07:38 | to image to select it.
| | 07:39 | I'm going to go back over to my CSS
Styles panel, and click New CSS Rule.
| | 07:44 | Now as soon as I do that, and notice again,
it keeps trying to do Compound Selector.
| | 07:48 | Compound selectors by and large will
be descendent selectors, meaning you're
| | 07:51 | targeting a specific
element inside of another element.
| | 07:55 | You're really free to type
in any Selector that you want.
| | 07:57 | I do want to point something out though.
| | 07:58 | Let's say that for whatever reason,
you just chose Tag, ID, or Class.
| | 08:03 | And then you decide, well, I
just want to type in a Selector.
| | 08:05 | So, maybe I might type in
#mainContent img.articleImage.
| | 08:14 | So this is a pretty complex Selector.
| | 08:16 | I'm targeting a Class-specific element
selector, img.articleImage, and I'm doing
| | 08:22 | that inside of the mainContent element.
| | 08:24 | Now if I go and click OK,
Dreamweaver says no, you can't do that.
| | 08:28 | Class names must start with
an alphabetical character.
| | 08:31 | To be honest with you, if there is one
thing that annoys me about the New CSS
| | 08:34 | Rule dialog box, it's this.
| | 08:36 | If you're not paying attention to which
Selector Type you're trying, you might
| | 08:39 | just go ahead and start typing.
| | 08:41 | Well, when you click OK, you're going
to start typing all over again, because
| | 08:44 | the really bad thing about this is
that now when I go down to Compound, I
| | 08:48 | lose what I was typing.
| | 08:50 | So you want to always double-check
this first, and make sure you have the
| | 08:54 | Selector Type that you need.
| | 08:56 | Now another nice thing this does is
it tries to write the selector for you.
| | 08:59 | So you can see that we have an image
selected inside here, which is inside of a
| | 09:02 | paragraph, which is inside main content.
| | 09:04 | So that's the descendent
selector that it gives us.
| | 09:06 | I can also tell it to be Less Specific
or More Specific based on its location.
| | 09:10 | Most of the time that can really help
you and can speed up the creation of your
| | 09:13 | selectors, but in this case,
it's not really going to help us.
| | 09:15 | So I'm going to remove the paragraph.
| | 09:17 | I'm going to make sure the space is
still there, and I'm going to add the
| | 09:20 | .articleImage Class
Selector to the image element.
| | 09:27 | So what we have here again is
#mainContent img.articleImage, all one word, okay?
| | 09:34 | So I'm going to make sure Compound Selector
is up here, so I don't have to type that again.
| | 09:38 | Make sure it's doing it in This document only.
| | 09:41 | I'm going to go ahead and click OK.
| | 09:42 | I'm just going to do a couple of choices here.
| | 09:44 | I'm going to go to my Box
Category and Float it to the right.
| | 09:50 | I'm going to go to my Block Category
and change the Display of this to a
| | 09:54 | block-level element.
| | 09:55 | Then finally, to keep the text away
from it, I'm going to go to the Box
| | 09:58 | Category, and set some Padding.
| | 10:00 | So I'm going to turn Padding off.
| | 10:02 | Do 1 em for the Padding for the Top, 0
for the Right, 1 em for the Bottom, I
| | 10:08 | type in 1 em and 1 em for the Left.
| | 10:11 | So if you're used to hand-coding your
styles, one of the things you have to get
| | 10:15 | used to in this dialog
box is where is everything?
| | 10:17 | So you'll notice that I just clicked, and said,
okay, let's go to Box and get my floating.
| | 10:21 | Let's go to Block, and
get the Display properties.
| | 10:24 | So it's going to take a little while
before you're totally comfortable with
| | 10:26 | where all your properties are.
| | 10:28 | Now, you're also not going to
find all of your properties.
| | 10:31 | Notice, for example, if I go to Border, I
don't have the Border Collapse property.
| | 10:35 | It's not here.
| | 10:36 | The CSS3 properties aren't here.
| | 10:39 | So don't expect to find
everything in this dialog box.
| | 10:41 | So if you're used to hand-coding,
there are some properties that you're still
| | 10:44 | going to need to hand-code.
| | 10:46 | If you're not used to hand-coding, and
kind of hoping that you don't have to do that.
| | 10:49 | Notice this dialog box is pretty
thorough, but it doesn't have everything.
| | 10:52 | So I'm going to go ahead and click OK.
| | 10:53 | I will apply that class of the
image by selecting it, and then
| | 10:57 | choosing articleImage.
| | 10:59 | Notice that our text is now
floating around the image.
| | 11:01 | I'm going to click on Live View just to
make sure yeah, okay, so that is doing
| | 11:05 | exactly what I wanted it to do. Cool!
| | 11:07 | So creating styles visually
in Dreamweaver is pretty fast.
| | 11:10 | But it is a process that can be a
little frustrating, if you don't understand
| | 11:13 | why certain things are
happening the way they are.
| | 11:16 | If you prefer to hand-code, I doubt
this process is going to totally replace
| | 11:19 | that method of writing styles for you full time.
| | 11:21 | I would encourage you, however, to
try it and become familiar with it.
| | 11:25 | There are many instances where adding
new rules through the visual dialogs can
| | 11:30 | actually speed up your workflow.
| | Collapse this transcript |
| Hand-coding styles| 00:00 | If you only use the visual tools in
Dreamweaver, you're really only using half the program.
| | 00:04 | Now, I know that some designers are a
bit hesitant to start coding on their own,
| | 00:08 | but in reality CSS is incredibly easy
to learn, and Dreamweaver's coding tools
| | 00:13 | make it the fastest way to create your styles.
| | 00:15 | In this movie, we'll take a brief tour
of Dreamweaver's coding environment and
| | 00:18 | start coding by writing a simple CSS Rule.
| | 00:21 | If you're familiar with coding CSS,
and just want to see how Dreamweaver's
| | 00:24 | coding environment works, stick around.
| | 00:26 | We'll be covering some of that as well.
| | 00:28 | I'm just going to go ahead and create
a brand-new CSS file because we really
| | 00:31 | don't have one attached to the page yet.
| | 00:33 | So I'm just going to go to File and choose New.
| | 00:36 | From the New Document dialog box, I'm
going to go down to Blank Page and choose
| | 00:39 | CSS, and go ahead and create it.
| | 00:41 | So here we just have an empty CSS file.
| | 00:44 | I'll go ahead and save it, and I'm
going to save it in the 01_08 CSS directory,
| | 00:50 | and I'll just save it as main.css.
| | 00:53 | Now, I could go ahead and start coding
here, but I kind of like working with my
| | 00:58 | HTML and my CSS files sort of side-by-side.
| | 01:01 | So I'm going to close this
document and go back to Resources.
| | 01:04 | I'll go over to my CSS Styles panel.
| | 01:06 | The CSS Styles panel is sort of the
central nervous system of working with
| | 01:09 | styles in our sites.
| | 01:11 | I'm just going to go right down here to
the bottom and choose Attach Style Sheet.
| | 01:14 | I'm going to go ahead and browse, and
I'm going to browse to 01_08/_css and find
| | 01:20 | the style sheet that we just created,
click OK and for Media, I'm going to go
| | 01:24 | ahead and type in screen,projection.
| | 01:29 | So you can grab from the pulldown menu,
or you can go ahead and type in comma
| | 01:32 | separated Media types if you
want to apply more than one.
| | 01:35 | We're just going to do Link. Click OK.
| | 01:37 | Now, our main.css is attached, even
though the style sheet is still empty.
| | 01:42 | So why didn't I'd want to just start
hand-coding directly in the CSS Style Sheet?
| | 01:46 | Why did I go through the
process of attaching it to the sheet?
| | 01:48 | Well, inside Dreamweaver we have what's
known as Related Files, and you can see
| | 01:53 | that now that we've attached the CSS
Styles Sheet to this page, I'm just going
| | 01:56 | to go ahead and save my page,
| | 01:58 | you see right below the tab, there is
main.css, and all I have to do to view
| | 02:02 | that is click on that, and
it goes in and opens that up.
| | 02:04 | Now, I'm going to switch to the Code
environment, so that I can see nothing but
| | 02:08 | my CSS, even though I'm
still working on resources.htm.
| | 02:11 | So this allows me to switch back-and-
forth between Design and Code, and I can
| | 02:15 | visualize those changes that I'm making.
| | 02:17 | I can also do a Split Screen view where
I see the Design view on this side and
| | 02:21 | the Code view on this side.
| | 02:21 | It's a very efficient way of working
with both your code and your page. You can
| | 02:25 | sort of see those changes
you're making all at once. Okay.
| | 02:28 | Well, let's take a brief
tour of the coding environment.
| | 02:31 | Now, over here on the left-hand
side, we have a brand-new toolbar.
| | 02:34 | This is a Coding toolbar, and this
has some really interesting things.
| | 02:37 | It allows us to collapse Tags and
expand those Tags, select Parent Tags,
| | 02:42 | and that's all well and good for
working with HTML, but it doesn't do a whole
| | 02:45 | lot of good for us with CSS.
| | 02:47 | Now, we do have Line Numbers that we
can turn on and off, so all these icons
| | 02:51 | refer to something within your code.
| | 02:52 | You can highlight invalid code.
| | 02:54 | You can do word wrap, in case
you have long strings of code.
| | 02:57 | You can wrap your code in a
comment, or you can delete a comment.
| | 03:01 | Notice that I don't have quite enough
screen real estate to show everything,
| | 03:03 | so I click this little Show More section,
and I can do things like Move or Convert CSS.
| | 03:09 | So I can convert inline CSS to an external rule.
| | 03:11 | I can move CSS Rules from one
sheet or one page to another.
| | 03:14 | I can indent code, and I can apply
other formatting which we'll take a look
| | 03:17 | at in just a moment.
| | 03:18 | I'm going to place my cursor right
below the character set encoding option and
| | 03:23 | the comment for CSS Document.
| | 03:25 | By the way, these are all optional.
| | 03:27 | You don't have to use them.
| | 03:28 | You can use your own comments.
| | 03:30 | You don't have to add the encoding
characters here, but that's just something
| | 03:33 | that Dreamweaver puts in by default.
| | 03:34 | So we're going to write our first
selector, and the first thing we want to do is
| | 03:37 | just to control the body tag.
| | 03:38 | Go ahead and set some defaults for our page.
| | 03:41 | So I'm going to type in "body" for the selector.
| | 03:43 | Now, Dreamweaver is not going
to help you write your selectors.
| | 03:45 | You're going to have to know
what selector it is you're writing.
| | 03:48 | In this case, we're writing an element
selector, and we're controlling the body tag.
| | 03:52 | Then I'm going to open up a curly brace.
| | 03:53 | Now, notice that the moment I open up
curly braces, we get something that's
| | 03:56 | known as Code Hinting and Code Completion.
| | 03:58 | We're going to take a closer
look at that a little bit later on.
| | 04:01 | Now, if I hit Enter or Return, it will
return me to the next line, but notice
| | 04:05 | that it indents for me.
| | 04:06 | It's basically following the rules that
I've set up for in my code formatting,
| | 04:10 | and we set that earlier in
the movie on Preferences.
| | 04:13 | I'm going to type in an m and notice
that it jumps right down to Margin.
| | 04:16 | So if that's what I want and in this
case it is what I want, I can just hit
| | 04:19 | Return, and it finishes typing it for me.
| | 04:22 | I'm going to type in a 0 for no
margin and a semicolon, and that property
| | 04:25 | and value are done.
| | 04:26 | You can see how fast that is.
| | 04:27 | Now, I'm going to hit Return to go down to
the next line, and I'm going to type in padding.
| | 04:31 | I want to type in the whole thing because
this is a better way to learn the syntax.
| | 04:34 | So I'm going to type in
padding, then type in a colon.
| | 04:37 | So your properties and your
values are separated by a colon.
| | 04:41 | I'll type in a 0 again and
then a semicolon padding:
| | 04:43 | The semicolon basically ends the line.
| | 04:45 | It says, okay I'm done with this one,
and I want to move on to the next one.
| | 04:50 | Watch what happens when you leave it off.
| | 04:51 | I'm going to remove the semicolon,
hit Return to go down to the next line.
| | 04:53 | Now, in the next line, notice that
we're not getting our code hinting anymore;
| | 04:57 | we're getting values for the previous
property, because we haven't closed it yet.
| | 05:00 | Then I can type in the word
font, but watch what happens.
| | 05:03 | You notice that font has not changed color.
| | 05:05 | It's still that sort of
light blue that I set earlier.
| | 05:08 | Now here, if I type in font:,
| | 05:10 | I'm not getting any code hinting whatsoever.
| | 05:12 | So Dreamweaver is giving us all sorts of
clues that our syntax is currently wrong.
| | 05:16 | I'm going to type in 100% and then a
space, then type in Georgia, "Times New
| | 05:25 | Roman" three words, Times, serif.
| | 05:30 | Now here, I'm going to go ahead and
type in a semicolon, hit Return and finish
| | 05:35 | by closing my curly brace.
| | 05:36 | Now, you might say well, you
know, is this going to work?
| | 05:39 | Actually, a lot of browsers will render
that correctly, but it's a really good
| | 05:42 | idea to go ahead and put the semicolon back in.
| | 05:44 | Notice as soon as I do that,
Dreamweaver tells me okay, yes, that's
| | 05:47 | okay, because it gives me the code coloring
to let me know that that syntax is correct.
| | 05:52 | Now, that's not the only way
that you can write your CSS styles.
| | 05:54 | I have each property on a separate
line because it really helps me read that.
| | 05:58 | But there is nothing saying you have to do that.
| | 06:00 | If I go down to the next line and type
in h1 and open up a curly brace, notice
| | 06:04 | that I could say font-size: 2em for 2 ems,
and I could type in a semicolon, and
| | 06:13 | on the very same line I can just type in
color and then do #193742, another semicolon.
| | 06:22 | So 193742, and I can do margin-bottom:
.4em and then a semicolon.
| | 06:32 | And on that very same line, I can
close my curly brace,
| | 06:35 | so this syntax is exactly
the same as this syntax.
| | 06:39 | It all has to do with readability.
| | 06:41 | The machine doesn't care whether it's on the
same line or whether it's on a separate line.
| | 06:45 | So this is a little bit easier for us to
read, but this rule will work just fine.
| | 06:48 | In fact, it would save you a little
bit of space when you go to deploy your
| | 06:50 | styles, and we'll talk more about
that a little later on in the title.
| | 06:53 | Now, what happens if you get a mixture?
| | 06:55 | Maybe you've written it;
maybe someone else has written it.
| | 06:57 | You have some rules are formatted one way.
Some rules are formatted another way.
| | 07:00 | Well, that's where our Code
Format Preferences come into play.
| | 07:04 | Just to review those really quickly, if
I go up to Edit and choose Preferences,
| | 07:07 | that would be
Dreamweaver Preferences on the Mac,
| | 07:10 | I can go to my Code Formatting, click
on the CSS button, and I get all these
| | 07:14 | different properties that I can set and
a preview of how my styles are going to
| | 07:18 | be written, and that, of course,
is if Dreamweaver writes them for me.
| | 07:21 | But what's nice about that is
Dreamweaver remembers those preferences.
| | 07:24 | So if I come down here to my Coding
toolbar, click on Show More, and I go right
| | 07:28 | here to this little paint bucket
where it says Format Source Code,
| | 07:30 | I can say Apply Source Formatting and
notice it goes ahead and converts the
| | 07:34 | rule that we just created to
being from one line to multiple line.
| | 07:37 | So at any point, if you're coding and
you want to go ahead and change all of
| | 07:41 | your rule formatting all at once,
rather than having to do that all by hand and
| | 07:44 | going there and hit Return or
move everything to one line,
| | 07:47 | you can just change your Preferences,
hit that, and it's going to go ahead and
| | 07:50 | switch it for you, which is really cool.
| | 07:52 | So hand-coding your styles does
require you to understand how to write
| | 07:55 | the desired selector.
| | 07:57 | You have to know which properties you
can set for that particular selector and
| | 08:00 | which values are accepted by those properties.
| | 08:03 | So in short, if you want to
hand-code, you need to know CSS;
| | 08:06 | however, as we'll see in our next movie,
code hinting and code completion make
| | 08:09 | this process much easier and can
assist designers that are new to writing CSS
| | 08:14 | by hand.
| | Collapse this transcript |
| Code hinting and code completion| 00:00 | To some, hand-coding can seem like a real chore.
| | 00:03 | And I could certainly understand that,
especially when you constantly have to
| | 00:06 | make sure you're following proper
syntax and writing your selectors properly.
| | 00:10 | That's why I want to take a moment to
explore Code Hinting and Code Completion
| | 00:14 | for CSS in Dreamweaver.
| | 00:15 | Both can make writing your styles
faster and help ensure your styles are
| | 00:18 | being written correctly.
| | 00:20 | So I have the resources, and we have
our main.css attached to this page.
| | 00:25 | I'm just going to go to Split view so
that I can see the code on one side and
| | 00:28 | the design on the other.
| | 00:29 | Now, if you have a limited amount of
screen real estate, like I do, when you're
| | 00:33 | working in this environment, one of
the things I like to do is collapse these
| | 00:36 | panels down to icons.
| | 00:37 | So I'm just going to go ahead and do
that, and you can expand those panels at
| | 00:40 | anytime if you want to see the labels
on them and if you want to use one, you
| | 00:44 | can simply click on the panel, and it shows up,
or you can expand the whole dock back again.
| | 00:48 | So that's really kind of nice.
| | 00:49 | It gives you enough room so that you can
see what you're doing in both panes. Okay.
| | 00:52 | So now what I'm going to do is I'm
going to scroll down a little bit, and I'm
| | 00:55 | going to write a new rule
beneath these two existing rules.
| | 00:58 | So I'm just going to hit Return to
go down on line below the last rule.
| | 01:02 | Now, we're going to write
a selector for the h2 tag.
| | 01:04 | So I'm just going to type in h2,
and then open up a curly brace.
| | 01:08 | Now again, we see this list comes up.
| | 01:09 | So where is this list coming from?
| | 01:11 | Well, this is called Code Hinting and
since we're working with the CSS Document,
| | 01:15 | Dreamweaver is giving us our
Cascading Style Sheet Code Hints.
| | 01:18 | So where to get those from?
| | 01:20 | Well, if we go up to our Preferences,
if we go to Edit and choose Preferences,
| | 01:23 | that will be Dreamweaver Preferences on the Mac,
| | 01:25 | I can go to Code Hints, and I can see which
items I can turn Code Hinting on and off for.
| | 01:31 | Notice that CSS Property Names is
on, and I want to leave that on.
| | 01:34 | I don't want to change that.
| | 01:36 | But if, for whatever reason, you go in
to Dreamweaver and start typing, and you
| | 01:40 | don't see these lists come up, this
is where you would go to make sure that
| | 01:43 | check box has been selected. All right!
| | 01:44 | I'm going to go ahead and click OK.
| | 01:45 | Now, notice my code hinting has gone away.
| | 01:48 | If I return to go down to the
next line, it comes back again.
| | 01:50 | But if you lose focus on that for
whatever reason, if you go to a line, and you
| | 01:54 | want code hinting to come up, there is
a couple of different ways that you can
| | 01:57 | force that to happen.
| | 01:58 | Number one, you can right-click, Ctrl+
Click on the Mac, and you can say Code
| | 02:01 | Hinting tools, and there are couple of
things here like the Color Picker, the
| | 02:05 | URL browser, and the Font List that
will bring those particular items up.
| | 02:09 | But if you want all of the list back
like we had a second ago, the way to force
| | 02:12 | that is to do Ctrl+Spacebar.
| | 02:15 | Now, that's the same shortcut key on
the PC and the Mac: Ctrl+Spacebar.
| | 02:18 | So it's not Command+Spacebar on the Mac.
| | 02:20 | It's Ctrl+Spacebar.
| | 02:21 | So that list comes right back up,
and we can just begin typing.
| | 02:24 | Now, if I type in F, notice that it
goes right down the list into the Fs.
| | 02:29 | I'm also free to scroll through the scroll-
bar if I want, or I can just continue to type.
| | 02:32 | It will start narrowing down the
properties that are available to me.
| | 02:36 | I'm actually going to go down and
choose font-family from the list.
| | 02:38 | So rather than continuing to type, I
can just use my arrow keys to go up and
| | 02:41 | down to the list, and at this place,
I want to go to the font-family.
| | 02:43 | I'm going to hit Return or Enter.
| | 02:46 | What's going to happen is it not only
types out the property for me, but notice
| | 02:49 | that it adds the colon at
the end of the property.
| | 02:51 | So I get proper syntax out of that as well,
and I don't have to remember that colon.
| | 02:56 | Now, here's another really nice thing
that Dreamweaver does for me, and this is
| | 02:59 | one of the reasons why I
really like this Code Hinting tools.
| | 03:02 | Because I chose font-family, it's not
bringing up a list of available font stacks.
| | 03:06 | Now, these font-stacks are customizable.
| | 03:08 | You can make your own.
| | 03:09 | Notice if you scroll down through
the list, you can see right down at the
| | 03:12 | bottom, it says Edit Font List.
| | 03:13 | So if you don't see a font stack that
you want to use, you can just go ahead
| | 03:17 | and create your own.
| | 03:18 | So in this case, I could say Arial,
Helvetica, sans-serif, hit Return or Enter.
| | 03:22 | It's going to finish typing all that for me.
| | 03:24 | So I don't have to worry about
remembering the font-stack, spelling all of the
| | 03:27 | fonts correctly, which I am
really bad at, that sort of thing.
| | 03:29 | I'll type in a semicolon and go down to the
next line, and here I'm going to do color.
| | 03:32 | So I'm going to type in co. Let Color show up.
| | 03:35 | I always take just a moment to make sure
that the property that I want is indeed
| | 03:38 | the property that's selecting, and
then I'm going to hit Enter or Return.
| | 03:41 | Now, as soon as I do that, notice that
it finishes that for me, and it brings up
| | 03:46 | this menu of properties.
| | 03:48 | One of those properties is Color.
| | 03:49 | It's this nice little color palette.
| | 03:51 | If I double-click that, it's
going to bring up the Color Picker.
| | 03:54 | Notice that it brings me a Swatch panel
with all of the Web safe colors on it.
| | 03:57 | It also brings me a RGB Color Picker,
so I could click on that and just mix
| | 04:02 | together any RGB color that I want.
| | 04:04 | Again, anytime this stuff goes
away, remember I can right-click or
| | 04:07 | Ctrl+click, go to my Code Hint tools, and say
I want the Color Picker back and bring it back.
| | 04:11 | That's really nice.
| | 04:13 | But what if one of these colors
is not the one you want to use?
| | 04:16 | Well, that's fine too.
| | 04:17 | You're free to just go ahead and type
in any hexadecimal value that you want.
| | 04:20 | So I'll type in the hex value here,
and then I'm going to type in 51341a, and
| | 04:27 | then type in a semicolon color.
| | 04:28 | Now, I'm going to go down to the next
line, and I'm going to type font-weight.
| | 04:33 | As soon as I do that, notice that I get
a brand-new list that comes up, and here
| | 04:37 | I have all of the different
settings that I can choose for font-weight.
| | 04:40 | If I type in n, it goes down to normal.
| | 04:42 | I can hit Return and have that finish for me.
| | 04:44 | So not only does it help you with the
properties, it helps you with the values
| | 04:47 | for those properties, as well.
| | 04:48 | Let's do margin-top. Again, I can
scroll through that list if I'd like.
| | 04:53 | Here I'll do 1.2ems.
Then I'm going to do margin-bottom.
| | 04:58 | Notice that I don't have
to type out the whole thing.
| | 05:00 | I can just go right to margin-b.
| | 05:02 | It will isolate it, and I
hit Return and finish it.
| | 05:05 | So a lot of times I'll type just to a
certain point where I know everything else
| | 05:08 | is isolated, and then I'll finish that.
| | 05:10 | We'll do 1em, and we'll finish that up. Cool!
| | 05:13 | So there is our h2 rule.
| | 05:14 | We've used almost all of our Code Hinting tools.
| | 05:16 | There is one more property I want to show you.
| | 05:18 | So to do that, I'm going to scroll
up, and modify our body selector.
| | 05:22 | So just after the font I'm going to hit
Return to create a brand-new line, and
| | 05:25 | I'm going to type in b, for background.
| | 05:27 | Now, notice what happens when I hit
Return or Enter if I'm isolated on background.
| | 05:31 | A couple of things come up.
| | 05:33 | The background property can
have colors applied to it.
| | 05:35 | It can have background
images, all sorts of things.
| | 05:38 | So the first thing I'm going to do is a color.
| | 05:39 | Now, I could choose the Color Picker like
we've just seen, or I can just type in a hex value.
| | 05:43 | So I'm just going to do that.
| | 05:44 | So I'm going to type in
#e1d8b9, then I'll hit Space.
| | 05:49 | Now, Dreamweaver again is very intelligent.
| | 05:51 | It says, okay, I know what you can do next.
| | 05:53 | You could put a URL or whatever you want.
| | 05:55 | If I type in u, notice that it goes
right to URL, and it allows me to choose
| | 06:00 | a background image.
| | 06:01 | Now, what I really like about this is
if I hit Return right now, or Enter, or
| | 06:04 | click on this, it's going to allow
me to browse for my background image.
| | 06:08 | So I'm not going to have
to type out the path for it.
| | 06:10 | I'm not going to have to remember all of that.
| | 06:12 | So I'm just going to go in the
01_09 folder/Images directory.
| | 06:16 | I'm going to switch to Details view, so
I can see this a little bit better, and
| | 06:20 | I'm just going to move this up a little bit.
| | 06:21 | I'm going to scroll down and
find my page background right there.
| | 06:26 | I will click OK, and notice it goes
ahead and finishes typing out that for me.
| | 06:30 | So that URL, all that stuff,
I did not have to type that.
| | 06:33 | I did not have to know the path to that.
| | 06:35 | I can just let Dreamweaver finish that for me.
| | 06:37 | Then I'm going to type in repeat-x,
so it will repeat along the x axis.
| | 06:41 | And I'll do a Save All, and I'm
going to switch over to Design view now.
| | 06:45 | Now, I can see that background
image showing up behind my page. Cool!
| | 06:50 | Now, hand-coding can be a
little tedious at times.
| | 06:52 | But if you take advantage of Code
Hinting, Code Completion and many of the
| | 06:56 | shortcuts that we have available to us,
it can really dramatically speed up that
| | 07:00 | code writing process.
| | 07:01 | Once you're familiar with those
techniques and begin to use them like they are
| | 07:04 | just second nature to you, you're going
to find that hand-coding is the quickest
| | 07:07 | and easiest way to create
styles within Dreamweaver.
| | Collapse this transcript |
| Modifying styles visually| 00:00 | When working with CSS, you're likely to
spend a good deal of time modifying the
| | 00:04 | styles that you've already written.
| | 00:06 | In this movie, we are going to explore
some of the many techniques available in
| | 00:09 | Dreamweaver to edit your styles
visually using the CSS Styles panel.
| | 00:13 | Just so I can see a little bit more
of my CSS Styles panel, number one, I am
| | 00:17 | going to make sure I can see
it, and I am focused on it.
| | 00:18 | Then I am going to go to the Files panel,
and I am going to double-click the tab
| | 00:21 | of the Files panel which will collapse it,
and that gives me a lot more room for
| | 00:25 | my CSS Styles panel.
| | 00:27 | Now, one of the things I notice,
right off the bat, is that we are supposed
| | 00:30 | to have a little bit of separation between
our page content and the top of the page.
| | 00:34 | So I should be seeing a little
bit of blue up here, and I am not.
| | 00:36 | So I am going to go right over to my
CSS Styles panel, I am going to find the
| | 00:39 | body tag, and I am going to
go ahead and double-click that.
| | 00:42 | Now, when I double-click the body tag,
notice that the CSS Rule Definition
| | 00:46 | dialog box comes up.
| | 00:47 | This is the default, but you can change
it through the Preferences so that that
| | 00:51 | might open up in Code view, or it might
focus down on the Properties Inspector.
| | 00:56 | So I am just going to go to my Box
properties here, deselect Same for all for
| | 01:00 | Margin, and I am just going to
give it a Top Margin of 25 pixels.
| | 01:03 | When I click OK, notice that that is
added right here to my list of properties,
| | 01:07 | and now I see the proper spacing at the top.
| | 01:09 | So that's a very quick and
easy way to make an edit.
| | 01:12 | The next thing I am going to do is in
my CSS Styles panel, I am going to find
| | 01:15 | the h1 tag, which is right here.
| | 01:17 | I am going to click on the h1 tag
and when I select that, it shows me the
| | 01:21 | properties for that in this pane below it.
| | 01:23 | Now, notice that we are in All View right now.
| | 01:25 | So if you don't see this, make
sure you are not in Current View.
| | 01:27 | You want to be in All View.
| | 01:28 | Again, you just want to click
once on the h1 tag to select that.
| | 01:31 | Now, this is my favorite way of editing styles,
| | 01:34 | the way I am about to show you.
| | 01:34 | This is just so quick and so easy,
and it's a lot like hand-coding.
| | 01:38 | If I select, and highlight h1, I can
come right down here to this little link
| | 01:42 | that says, Add Property.
| | 01:43 | Now, if I click that, I can go ahead
and choose from the pulldown menu any
| | 01:47 | property I want to add, or if you know
what you want to do, you can just type in
| | 01:50 | something like color, for example.
| | 01:52 | Then if you hit Tab, you get the Color
Picker that you can choose from, or you
| | 01:57 | can just go ahead and
type in a value yourself.
| | 01:59 | So in this case, I want to do #193742,
although that green is pretty nice.
| | 02:07 | Now, as soon as I type that in and hit
Return, it goes ahead and changes it.
| | 02:09 | So you can see the Adding Properties to
existing rules is amazingly simple using this.
| | 02:13 | You just click Add Property,
type in what you want to do.
| | 02:16 | It goes in, adds it to your
code, and you are good to go.
| | 02:19 | Now, I am going to click
right here inside the body copy.
| | 02:21 | So I am inside our paragraph here.
| | 02:24 | Instead of looking at the All view, I am
going to switch it over to the Current view.
| | 02:27 | Now, when I do that, I get
three sections for my Styles panel.
| | 02:32 | One is a Summary, and it's giving me
all of the properties that are applying to
| | 02:35 | this particular element,
in this case the paragraph.
| | 02:38 | Then I get all the Rules that are
applying, and these rules are applying
| | 02:41 | within the cascade.
| | 02:42 | There are two views here.
| | 02:43 | There is the cascade of rules, and then
there is information about a selected property.
| | 02:47 | So here, if I selected a property, it would
tell me where that property could be found.
| | 02:50 | But if I hit Cascade, it just shows
me all of the different rules that are
| | 02:54 | applying to this one, the bottom
rule being the closest one to it.
| | 02:57 | Now, if I look in the Cascade section
here and scroll down and choose this P
| | 03:01 | selector, now the properties for
the Paragraph Selector are coming up.
| | 03:05 | Notice that every time I click on one of
these, I get a different set of properties.
| | 03:08 | So that allows you to highlight an
element and then sort of go up or down the
| | 03:12 | cascade as you need to to find the
property that you want to modify or change.
| | 03:15 | I am going to select the Paragraph
Selector, and I'll add another property right
| | 03:19 | down here using the same method
that we just did a minute ago.
| | 03:21 | I am going to do line-height.
| | 03:23 | So again, you can just type that in if
you like typing it in, or if you can't
| | 03:27 | type like me, you want
to grab the pulldown menu.
| | 03:28 | I'll hit tab to move over,
and I am just going to do 1.8.
| | 03:31 | I am not going to set it again to
measurement. I will let it default
| | 03:33 | to Multiple, and now we have a
line height that is what we wanted for
| | 03:38 | that particular element.
| | 03:39 | There are also some things that you
can do with the CSS Styles panel that you
| | 03:42 | pretty much can't do any
other way except for hand-coding.
| | 03:45 | I am going to switch back to All, for
example, and I am going to click right
| | 03:48 | up here in this headline Tours, because it
does not look the way it's supposed to look.
| | 03:51 | It's supposed to have a border underneath
it. It's supposed to be a little bit smaller.
| | 03:54 | Well, if I look at this, I can see
using the Tag Selector that this is an h1
| | 03:58 | with an ID of pageID, in
lowercase p, uppercase ID.
| | 04:03 | If I look over at my styles, and I
scroll down little bit, I can see that within
| | 04:07 | my Styles, and you know I have to scroll a
little bit to get down here, there it is,
| | 04:11 | that's what I am looking for,
| | 04:12 | you'll notice that right here
we have a selector that says
| | 04:14 | #mainContent h1#pageid.
| | 04:18 | But notice that the id is lowercase,
but the actual ID itself is uppercase.
| | 04:22 | So the selector is wrong.
| | 04:24 | Instead of just being able to edit
properties, one of the things that the CSS
| | 04:27 | Styles panel allows us to do
is edit the rules themselves.
| | 04:29 | So if I click on that rule once to
select it and then click one more time,
| | 04:33 | notice that it highlights the rule,
and I can change the selector right here
| | 04:36 | without having to go into the code.
| | 04:38 | That is a really powerful feature so
I am going to change that to ID, hit
| | 04:41 | Return, and now notice the styling is correct.
| | 04:44 | So if you write a selector, and it's
not giving you the correct styling, you
| | 04:47 | can check it, make sure it's the
selector that you need and if you need to
| | 04:50 | rename it, you can go ahead and rename it
right here without having to go back in your code.
| | 04:54 | That's pretty cool.
| | 04:55 | So I think even if you're like me, and
you rely on hand coding for the creation
| | 04:58 | of most of your styles, Dreamweaver has
some truly impressive methods for making
| | 05:02 | quick edits to your CSS without
having to go back into the code.
| | 05:05 | Keep in mind you can also edit your styles
through the Properties Inspector, as well.
| | 05:09 | By giving you so many different ways to
work with your CSS, Dreamweaver allows
| | 05:12 | you to find the methods that
suit your own personal preferences.
| | 05:16 | My advice is to become comfortable with
all the editing methods so that you can
| | 05:19 | use the one that best suits the current
situation and your personal preferences.
| | Collapse this transcript |
| Using the Code Navigator| 00:00 | Although we've explored editing
styles through the CSS Styles panel and the
| | 00:04 | Properties Inspector, we haven't
talked about the Code Navigator yet.
| | 00:07 | The Code Navigator is an invaluable
tool that gives you an easy way to access
| | 00:11 | and modify your styles from anywhere
in your document, even if you're not 100%
| | 00:16 | sure which rule contains the
styling that you need to change.
| | 00:19 | So let's take a closer look
at using the Code Navigator.
| | 00:22 | I am going to scroll down a little bit, and
looking at my tour descriptions down here,
| | 00:26 | this formatting is not
exactly the way that I want it.
| | 00:29 | I want the text wrapping this image.
| | 00:31 | I mean, I like a little bit better
spacing here for our rating text.
| | 00:34 | So the first thing I am going to do
is just click on this Big Sur image.
| | 00:37 | I want to click on that.
| | 00:38 | If I pause for a couple of seconds or so,
this icon shows up, and it looks like
| | 00:42 | a little steering wheel, or paddle wheel.
| | 00:44 | That is the Code Navigator.
| | 00:46 | If I hover over that and click it, it
will bring up the Code Navigator itself.
| | 00:50 | Now, that's one of the main reasons that a
lot of people don't like the Code Navigator.
| | 00:54 | Every time they click somewhere, a
couple of seconds later up comes this little
| | 00:57 | icon, and it can get to be a bit annoying.
| | 01:00 | So if you click on that icon to bring
up the Code Navigator, one of the things
| | 01:03 | that you can do is disable it.
| | 01:04 | So by clicking that check box, you are
turning that off, and you're not going to
| | 01:08 | be bothered by that icon every
single time that you click somewhere.
| | 01:11 | You'll see that now when I click
somewhere and just sort of hang out for a second.
| | 01:13 | It doesn't come back up.
| | 01:15 | So now that you have sort of gotten
rid of the annoying factor of the Code
| | 01:18 | Navigator, what happens if you need it?
| | 01:19 | How you get it to come back up again?
| | 01:21 | Go ahead and select your image.
| | 01:23 | On the PC, you want to hold down the Alt key;
| | 01:25 | on the Mac, you are going to hold down
the Command+Option key, and then with
| | 01:28 | those keys being held down, just simply
click on the element that you want to
| | 01:31 | bring up the Code Navigator for.
| | 01:33 | So all I have to do is click, up
comes the Code Navigator, and there we go.
| | 01:36 | So what is the Code
Navigator actually showing us?
| | 01:38 | Well, it's showing us the cascade of
rules, showing us all of the rules that are
| | 01:43 | applying formatting to this element or
this particular item, in this case the
| | 01:46 | image that we just clicked on.
| | 01:48 | You can see that the selector on the
bottom is the one closest to the rule.
| | 01:52 | Then the selectors above it are sort
of receding in the order of importance
| | 01:55 | through the cascade.
| | 01:56 | So by hovering over these, we get to
see the actual properties being set and
| | 02:00 | their values, which is really cool.
| | 02:02 | It's a nice way to sort of get a
summary as to what's happening here.
| | 02:04 | So we can see that right now, this
#mainContent .tourDescription img rule really
| | 02:08 | is just applying some padding.
| | 02:10 | So if I want to change that, all I have
to do is click that particular rule, and
| | 02:14 | it's going to focus on that.
| | 02:15 | It's going to focus on it in two places;
| | 02:17 | one is within the code.
| | 02:18 | You'll notice that it switches right to
a split screen view, goes right to the
| | 02:21 | CSS file, and jumps right
down to the rule that I need.
| | 02:24 | That is amazingly efficient. Rather
than having to switch over to the code
| | 02:28 | myself and scroll through all the
rules and try to figure out which one's
| | 02:31 | applying the formatting,
| | 02:32 | I can do a single click, use the Code
Navigator and go right to that rule.
| | 02:36 | So that's really nice.
| | 02:36 | So what I am going to do here is I am
going to go to the last property which
| | 02:40 | is padding, hit Return, or Enter, and
I am going to type in Float, and I am
| | 02:44 | going to float that to the left, once
again, using code hinting to help me
| | 02:47 | finish my coding here. So float:left;.
| | 02:50 | I am going to do a Save All, and if I
switch back to Design View, I can see now
| | 02:55 | the text is wrapping that. Perfect!
| | 02:57 | Now, I mentioned that it was going to
focus on that selector in two places.
| | 03:01 | We just saw how it focused on it in the
Code view, but it also focuses on it in
| | 03:05 | the CSS Styles panel as well.
| | 03:07 | Let me show you that.
| | 03:08 | So I am going to go over to CSS Styles
panel, double-click that tab to sort of
| | 03:11 | expand that, and I might double-
click the Files tab to collapse it.
| | 03:15 | So I just want to focus on the CSS Styles panel.
| | 03:17 | So you can see this text right here:
Optional 4 day tour available Rating: Medium.
| | 03:20 | That's sort of still in this paragraph,
and I'd like it to be on its own line
| | 03:24 | and have proper spacing here.
| | 03:25 | So what I am going to do is, once again,
click inside that, and remember, if I am
| | 03:29 | on the PC, I am going to hold my Alt key down;
| | 03:30 | if I am on the Mac, I am
going to hold Command+Option.
| | 03:33 | I'll click to bring up the Code
Navigator and again, notice here I am getting an
| | 03:36 | entirely different list of rules
based on the element that I have selected.
| | 03:39 | So the #mainContent .tourDescription span.option
is the selector that I want to choose.
| | 03:45 | Now, I could go above this.
| | 03:46 | If I wanted to affect all
paragraphs, I could click here.
| | 03:49 | So I want to affect just the selected
text, so I am going to click right there.
| | 03:52 | Now, it still goes into Code view, but
notice that also in the CSS Styles panel,
| | 03:56 | it scrolls down, finds that
particular selector and highlights it.
| | 04:00 | So now, I am able to go ahead
and set properties here, as well.
| | 04:03 | So I am going to go ahead and add
another property here, and I am going to add
| | 04:05 | the Display property.
| | 04:06 | I will hit Tab, and I'll do a display of block.
| | 04:09 | As soon as I hit Return, I can
once again go back to Design view.
| | 04:12 | Now, we can see that it
is indeed on its own line.
| | 04:15 | It's displaying as a block-level element,
and that is exactly what we want it to do.
| | 04:19 | So if you're working with really
complex code, and especially if you have
| | 04:22 | elements that are being formatted
through various rules, the Code Navigator can
| | 04:26 | help you really cut through that
clutter, showing you exactly which rule you
| | 04:29 | need to edit and making finding that
rule in your Styles, or your CSS Styles
| | 04:33 | panel as simple as just a single click.
| | 04:36 | Now, if you've never used the Code
Navigator, or if you've just been annoyed by
| | 04:39 | the icon that keeps coming up, my
advice is to take control over this really
| | 04:44 | powerful feature and go ahead
and add it to your workflow.
| | Collapse this transcript |
| Using CSS Inspect| 00:00 | If you've ever used Firebug or WebKit's
Web Inspector, you're probably used to
| | 00:05 | visually inspecting your
page to check your layout.
| | 00:07 | In Dreamweaver, you can use CSS Inspect
to examine the Margin, Padding and other
| | 00:13 | Box model Properties of elements on your page.
| | 00:15 | CSS Inspect is part of Dreamweaver's
WebKit Integration, and as we'll see, it
| | 00:20 | gives you the ability to accurately
preview and troubleshoot your designs
| | 00:23 | from within Dreamweaver.
| | 00:24 | And one of the things I want to do is
fix some spacing issues that I've got, so
| | 00:28 | I'm going to turn Live View on.
| | 00:29 | Now Live View shows us the page as it's
rendered in the WebKit space, not Design
| | 00:35 | View, and gives us a more accurate preview.
| | 00:37 | So I'm going to scroll down a little
bit, and in my Tour Descriptions, I can see
| | 00:40 | that I have some spacing
issues here that I want to fix.
| | 00:42 | Number one, I have had too much
above these headlines, and I really would
| | 00:46 | like the spacing to be a little but
more equal between this area and the
| | 00:49 | headlines themselves.
| | 00:50 | Also this Rating area, I would like
that to float a little bit more in the
| | 00:54 | middle and not be as close to the
top paragraph as it currently is.
| | 00:59 | Okay, so those are some
spacing options I want to change.
| | 01:02 | So I'm going to use CSS Inspect to
show me which elements I need to modify to
| | 01:06 | get the proper spacing.
| | 01:07 | So to turn Inspect on, I just go right up
here beside Live View and turn Inspect mode on.
| | 01:11 | And as soon as I do that,
Dreamweaver says, hey Inspect mode is most useful
| | 01:15 | with certain workspace setting.
| | 01:16 | I'm like, oh really. Tell me more.
| | 01:18 | So I click on More Info, and it tells
me that, hey your CSS Styles panel should
| | 01:22 | be open in Current mode. Mine's
currently in all, so that's not right.
| | 01:25 | And you should be viewing your screen
is Split Code View so that you have Code
| | 01:28 | View on one side, Live View on the
other, and you can also enable Live Code.
| | 01:31 | What Live Code will do for you is show you,
if you're interacting with any JavaScript
| | 01:35 | base elements, for example, it will show
you the code that gets generated.
| | 01:37 | And now I can automatically switch
these settings if I like, or I can
| | 01:40 | choose them myself.
| | 01:41 | I'm just going to have Dreamweaver do it for me.
| | 01:43 | So I am like, yeah sure, go ahead
and Switch to that. That's fine.
| | 01:44 | Now I like turning Live Code off because unless
I am working with some type of an AJAX Widget,
| | 01:50 | I don't really need that on.
| | 01:52 | It is helpful to have my CSS Styles panel
Open to current and have at Code View open.
| | 01:56 | It's going to help me out.
| | 01:56 | But I'm going to change over to my main.css,
so that I can change my code really easily.
| | 02:01 | Now I'm also going to double-click on
the Files panel tab to collapse that, so
| | 02:04 | that I can see my CSS Styles Properties.
| | 02:07 | Okay, one last thing to do.
| | 02:09 | I'm going to bring this a little bit
over so that I have a little bit more room
| | 02:13 | in looking at my elements on the page.
| | 02:15 | Now you might have noticed if I start
hovering over elements, I get to see some
| | 02:20 | highlight colors, so what's going on there?
| | 02:21 | Well essentially, I'm looking at the
Box model properties for those elements.
| | 02:24 | The sort of a translucent blue color
that we're seeing, that's the width and the
| | 02:28 | height of the element.
| | 02:29 | Any yellow is a margin, and any time you see
that sort of magenta color, those are padding.
| | 02:33 | So you can see padding,
margins, your content regions.
| | 02:37 | You can really kind of
see what's going on there.
| | 02:38 | You'll also notice that that right
down here, on the Tag Selector, as we hover
| | 02:42 | over an element, we get to see
which element we're selecting.
| | 02:45 | If we were in Code View, it would be
highlighting code as well, and over here
| | 02:47 | in the CSS Styles panel as I move
through this, you'll notice that the CSS
| | 02:52 | Styles panel in the current section
is showing me the selector that I'm
| | 02:55 | working on as well.
| | 02:56 | Okay, well let's start using this to
tackle the spacing issues that we're having.
| | 02:59 | One of the things that I'm most
interested in finding out is how much space I
| | 03:03 | need above my headings and
then going ahead and setting that.
| | 03:06 | Well if I hover over the
Div Tour Description right here,
| | 03:09 | I can see looking over at my CSS Styles
panel that the margin on the bottom is
| | 03:13 | 15 pixels and my padding 10 pixels.
| | 03:17 | So I've got 10 pixels worth of padding
on the top and the bottom, but I have 15
| | 03:20 | pixels worth of margin between them, as well.
| | 03:22 | So if I hover over at my heading here, I
get to see a really large margin above that.
| | 03:25 | But if I look over at my properties, I don't
see any margin top so what's the deal there?
| | 03:29 | Well, just because it's showing you that
property, doesn't mean that it's being set
| | 03:33 | with that particular selector.
| | 03:33 | Let me show you what I mean.
| | 03:35 | If I click on the heading, Big Sur
Retreat, it actually turns Inspect mode off.
| | 03:39 | It sort of freezes it in that location.
| | 03:41 | So if I go up through my list, h1,
h2, h3, I don't see any top margin.
| | 03:44 | At h2, however, I see a margin top of 1.2 ems.
| | 03:49 | Okay, well that's setting now for
every single heading in my site.
| | 03:53 | This particular one needs to be a
little different, so I'm actually going to
| | 03:55 | use this bottom selector, which is #
mainContent, and I've got another divider
| | 04:00 | here that I can change.
| | 04:01 | You know, you really start to run out
of screen real estate pretty fast, so let
| | 04:04 | me explain that a little bit so I can
see this selector a little bit better.
| | 04:08 | So #mainContent.tourDiscription h2, cool.
| | 04:11 | So if I change the top margin on that
one, that should adjust the spacing, so
| | 04:15 | I'm going to say, Add Property >
margin-top and since we know that our
| | 04:19 | tourDiscription div tag has that 15
pixels worth of margin on the bottom, and
| | 04:23 | we want to equal that,
| | 04:24 | we're just going to say 15
pixels worth for margin-top.
| | 04:27 | As soon as I do that, notice that we
get lot more equal spacing between these
| | 04:31 | elements on the page.
| | 04:32 | Now anytime you select a specific
element to work on it, Inspect mode is just
| | 04:36 | sort of going to turn itself off.
Notice that I can turn it right back on and
| | 04:40 | start inspecting again.
| | 04:41 | Now you don't really need to be in the
Split Screen View if you're not going to
| | 04:44 | be doing hand coding.
| | 04:45 | So if you're going to continually
work with CSS Styles panel, you can just
| | 04:48 | switch back to Design View and kind of see
everything without having to worry about that.
| | 04:51 | Dreamweaver keeps giving you this
little message that says, are you sure about
| | 04:54 | that? But you can just ignore that if you like.
| | 04:56 | Okay now, what we need to do next is
focus on the spacing of this span text
| | 05:01 | right here, Span.option.
| | 05:03 | Now its set to display as a block-level
element, but we're not getting spacing above it.
| | 05:07 | We'd really like to add an equal
amount of spacing above and below it.
| | 05:10 | Now in order to do that, we have got to
navigate some pretty complicated waters.
| | 05:14 | This text is filed in this Span tag
with a class or option applied to it, but
| | 05:17 | it's inside of a parent paragraph.
| | 05:19 | It's being told to display
as a block-level element.
| | 05:22 | Below the parent paragraph, we have
another paragraph that contains these two items.
| | 05:26 | These are links, one with A with a class
of book, another link with a class of more.
| | 05:32 | Now as we hover over those elements, we
can see that some of those elements have
| | 05:35 | margins applied to them, and some of them don't.
| | 05:37 | Notice that the book has a
top margin applied to it.
| | 05:40 | More has a top margin applied to it.
| | 05:42 | The parent paragraph has a
bottom margin applied to it.
| | 05:45 | But our span text doesn't
have a margin applied to it.
| | 05:48 | Okay, well there's a little
bit of a mystery here, too.
| | 05:50 | Notice that what CSS Inspect can show me.
| | 05:52 | If I hover over of the parent paragraph,
take a look at where the bottom of that
| | 05:56 | margin ends, that yellow
border that you're seeing there.
| | 05:59 | The very bottom of that is
the bottom of that margin.
| | 06:01 | Okay, kind of stare at that space for a moment.
| | 06:03 | Now if I hover over this link, notice that
its top margin goes up to that spot and ends.
| | 06:08 | So those two margins, the top margin and
the bottom margin of this paragraph are
| | 06:12 | touching each other.
| | 06:13 | Well that's kind of weird, because in CSS
vertical margins are supposed to collapse.
| | 06:19 | So if you think about it, if those
two elements are touching each other,
| | 06:23 | they really should be collapsing down
into one singular margin, but they're
| | 06:26 | not, and why is that?
| | 06:28 | Well let's use CSS Inspect to find out.
| | 06:30 | Notice that if I hover over
one of these links, book now!,
| | 06:33 | I actually have another way of
going through elements on the page.
| | 06:36 | Certain elements, due to say collapsing
elements or things like that, you may not
| | 06:40 | be able to hover over them.
| | 06:41 | But if I hit the left arrow key on
my keyboard, notice that it goes right
| | 06:45 | through the Tag Selector, in the Tag
Selector right down here, this area, and
| | 06:49 | watch right down here while I do this.
| | 06:51 | Notice it just goes back up to the
paragraph that's inside of that, then to the
| | 06:54 | div tourDescriptions. I can just keep going up.
| | 06:57 | The right arrow will move me back down.
| | 06:58 | So you can actually click to the left
and to the right on your arrows to sort of
| | 07:01 | browse through those areas.
| | 07:03 | So you can look at some
pretty detailed structure that way.
| | 07:05 | Now what we've learned is that the
parent paragraph, it's holding those two
| | 07:08 | links, has collapsed because they're
floated outside of it, but the top margin is
| | 07:13 | still being applied.
| | 07:14 | So what's happening is the bottom
two's top margin is collapsing with
| | 07:17 | that one, but because of that parent
paragraph, the paragraph just above that one
| | 07:22 | isn't collapsing with those guys, so
essentially that paragraph that they're
| | 07:25 | inside of it is acting as a buffer so
that we don't get margin collapse there.
| | 07:28 | So we need to make a few
changes to make sure that all works.
| | 07:31 | Number one, we know now that we really
don't need the top margin only, so I'm
| | 07:34 | going to get rid of them.
| | 07:35 | So with CSS Inspect turned on ,
I'm going to click on the book now!
| | 07:38 | link, and I can see that just above
that here's, this #mainContent a.book.
| | 07:42 | I'm going to click on that, and I'm
going to get rid of that top-margin.
| | 07:45 | So I'm going to click on the margin
section right here. Type in zero. Here we go.
| | 07:50 | And now I'm going to do
the same thing to learn more.
| | 07:52 | I'll click on that.
| | 07:54 | Click on its particular
selector, which is just above it.
| | 07:56 | If you're wondering what the bottom selector is,
| | 07:58 | that's the hover selector,
so that's the roll-over.
| | 08:00 | So let's click on #mainContent.
tourDescription a.more, and I'll change that one,
| | 08:04 | as well, to 0 pixels.
| | 08:06 | So now we're not getting that extra margin.
| | 08:08 | We're getting the collapse occurring.
| | 08:10 | I can turn Inspect back on, and you
can see that as we hover over those we
| | 08:13 | don't get that margin, and the parent paragraph
still has that margin, but it's collapsing now.
| | 08:18 | So now those guys are looking
the way that I want them to.
| | 08:21 | I still would like to push my Optional
4 day tour available down a little bit so
| | 08:25 | that sort hovers in between those.
| | 08:27 | And if I look at its parent paragraph, I can
see this particular margin on the bottom is 1em.
| | 08:32 | So I've got 1em's worth of margin on the bottom.
| | 08:34 | So I'm just going to split the
difference there, turn Inspect back on, find
| | 08:38 | the Span tag and click, and then on its
selector I'm just going to add a property there.
| | 08:43 | I'm going to add margin-top, and we'll do
.5em, so we'll do half of that, and there we go.
| | 08:49 | That's going to push it down by about
half of its available margin, and now the
| | 08:53 | spacing is nice and equal.
| | 08:56 | That was exactly what we wanted.
| | 08:57 | And again, you can turn Inspect on and
off any time you want. Anytime you focus
| | 09:01 | on an element, Inspect is
going to turn itself off.
| | 09:03 | So you just have to remember to turn it back on.
| | 09:05 | So it's going to take you a little
practice getting used to using it.
| | 09:08 | Make sure, for example, that if you're
over an element, and you're not looking
| | 09:11 | at exactly what you think you should be
looking at, use your arrows to either go
| | 09:15 | to the left to go up through the source
code, or you can use your right arrow to
| | 09:19 | go down through the source code.
| | 09:20 | Now it might take a little practice to
get used to it, but the CSS Inspect gives
| | 09:24 | you an incredibly powerful way
to preview and refine your design.
| | 09:27 | Keep in mind that CSS Inspect uses WebKit,
so you'll still need to test it in other browsers.
| | 09:33 | So the spacing you're getting here is
the WebKit rendering with CSS Inspect
| | 09:36 | might not be exactly what
you see in other browsers.
| | 09:38 | So you definitely want to just keep testing it.
| | 09:40 | However, it is a great way to
visualize how elements are affecting each other
| | 09:44 | and for tracking down the correct rule
to edit, if you need to make changes to
| | 09:47 | especially where spacing and
different box model properties are involved.
| | Collapse this transcript |
|
|
2. Organizing Style SheetsStructuring style sheets| 00:00 | In this chapter, we will talk about
best practices for structuring your styles
| | 00:04 | and how Dreamweaver can assist you in
making sure your styles are organized
| | 00:08 | properly and are well-commented.
| | 00:10 | Having a strategy for structuring the
styles in your site is crucial to ensuring
| | 00:14 | that your styles work properly,
and are easy to maintain and update.
| | 00:17 | In this movie, we're going to examine
the Explore California style sheet and
| | 00:21 | discuss the theory behind
its organizational structure.
| | 00:24 | So I have the main.css file open.
| | 00:27 | This is our finished style sheet, all
organized and structured, and I just
| | 00:31 | wanted to take a moment before we
start working on the style sheet and
| | 00:34 | structuring it to explain this strategy
behind the structure that we've got here.
| | 00:37 | At the very top of the
style sheet, we have a header,
| | 00:40 | where basically we explain
what this style sheet is.
| | 00:42 | We explain the copyright data, if you want
to put that in there, that sort of thing.
| | 00:46 | If you're working in a team environment,
you know, within this header, you might
| | 00:48 | put a version number, when it was
last modified, things like that.
| | 00:52 | Now the thing I like doing in all
my style sheets, just below that,
| | 00:54 | we have a Color Guide.
| | 00:55 | This Color Guide is telling myself and
other people what colors are used and
| | 01:00 | what those colors are typically used for.
| | 01:02 | So now when I want to write that, if
I forget exactly the hexadecimal value
| | 01:06 | for that, I can come up and copy and
paste it, and I can also say, okay I'm
| | 01:10 | doing a heading. What colors should I use?
And I can read through this to help me with that.
| | 01:13 | Just below, that we have a table of
contents and in the table of contents, it
| | 01:17 | gives me an overview of how
my styles have been structured.
| | 01:20 | I have some constants which
are global to the entire site.
| | 01:23 | I have a CSS Reset, which sort
of is in the middle of those.
| | 01:26 | I have Global Classes that
work throughout the entire site.
| | 01:30 | And then from there, I have some styles that
are specific to the Index Page or Home page.
| | 01:34 | I have a Top Level Layout Styles which
are sort of Global Layout Styles, and
| | 01:38 | then I get into the individual regions
themselves: Headers, Navigation, Main
| | 01:42 | Content. all the way through.
| | 01:44 | Now, that's the way that I like to
organize a style sheet. That doesn't mean that
| | 01:47 | it's the way that you're going to organize it.
| | 01:49 | I know a lot of people that will
organize the layout in one section, typography
| | 01:52 | in another, color in another.
| | 01:54 | It's really what works for you.
| | 01:55 | The thing is you want to be consistent
with it, and you want to make sure you're
| | 01:58 | following that structure so that if
you write new navigation selectors, for
| | 02:02 | example, they go in the proper section.
| | 02:04 | Now you'll notice I've done
something here to the table of contents.
| | 02:07 | I have sort of these special
characters, sort of the ^4, ^5.
| | 02:10 | Well, that actually helps
me jump to that section.
| | 02:13 | You'll notice that I've even added a
little comment here that says, hey if you
| | 02:17 | want to jump to that section, you can
highlight it, hit a specific keyboard
| | 02:19 | combination or do a Find/Replace, and
you'll jump right down to that section.
| | 02:23 | Now if we scroll down into the styles
themselves, we can see that I have a nice
| | 02:27 | little comment here, identifying the section.
| | 02:29 | There is that ^ again that will allow
me to jump down to that, and then the
| | 02:32 | selectors themselves are
written in a very human, readable way.
| | 02:36 | Each selector is on its separate line,
even when they are grouped together.
| | 02:39 | Each property is on a separate line, and
then I have a space between each selector.
| | 02:43 | So very open. Very readable. Its not
necessarily the most efficient way to deploy
| | 02:48 | this particular style sheet, and we'll
talk about that in the last chapter in
| | 02:51 | our movie about maybe
optimizing this code a little bit more.
| | 02:54 | Now I want you to notice
something about these properties, too.
| | 02:56 | Notice that every time I go to a
selector, the properties are in
| | 02:59 | alphabetical order.
| | 03:00 | So color, font-size, margin-top,
every time we go to one they are in
| | 03:04 | nice alphabetical order.
| | 03:05 | The reason behind that is if you go
some place and you know, I need to adjust
| | 03:09 | wrapper, for example, and
I want to adjust the width,
| | 03:12 | I don't have to worry about where to find it.
| | 03:13 | Its really easy to find because it starts
with the W, so it's the very last property.
| | 03:18 | Now that could be a little overkill for
lot of people, and you might not want to
| | 03:22 | go to that little bit in detail, but
you can add that amount of organization to
| | 03:26 | your style sheets if you want to.
| | 03:27 | It's not hurting anything, and it
might help you find and replace values a
| | 03:31 | little bit quicker if you're going
to be doing a lot of hand-coding.
| | 03:34 | Notice that the selectors
themselves are grouped by content.
| | 03:38 | So, for example, if I go down to the
mainContent section, and we're still on
| | 03:41 | our layout right now.
| | 03:42 | Let's go into our actual selectors.
| | 03:45 | So here's the Headers section,
notice they're all grouped together.
| | 03:48 | All those selectors inside the header
and the same thing with our navigation;
| | 03:52 | they're all grouped together. And I get
more and more specific as I go through.
| | 03:55 | When I get to the top of the
section, let me find mainContent area,
| | 03:59 | I have some pretty global styles,
but as I get deeper into it,
| | 04:02 | it gets more and more specific and
I go from one element to the next.
| | 04:06 | So if I'm working on images,
I'll work on images for a while.
| | 04:10 | If I'm working on headings, I'll work on
headings for a while, that sort of thing.
| | 04:12 | And so as I need to get more
specific with selectors, I do that as I go
| | 04:16 | through this section.
| | 04:17 | So that's a quick overview of the
structure and organization of the style sheet
| | 04:22 | for the Explore California Web site.
| | 04:23 | Now every project is unique, and as a
designer, you're sure to have your own
| | 04:27 | personal preferences for how you
want to organize your site CSS.
| | 04:30 | I'm not saying your style sheet
has to be organized like this one.
| | 04:33 | The most important things is to have a
strategy for your organization that's
| | 04:36 | going to serve your site
over its entire lifespan.
| | 04:38 | You want to be sure to plan for how
the site might grow, or change and evolve
| | 04:42 | over time and whether or not a team
will be involved in the site's development.
| | 04:45 | That's really important.
| | 04:46 | All these factors play a huge role in
how your styles can be organized and how
| | 04:50 | they're going to be structured.
| | Collapse this transcript |
| Writing a style header| 00:00 | Style sheets can be incredibly complex
documents, featuring thousands of lines of code.
| | 00:05 | One of the first things you can do to
your style sheets to assist you in giving
| | 00:09 | it structure and organization
is to write a good style header.
| | 00:12 | Style headers can be as robust as
you need them to be, and usually contain
| | 00:16 | information such as copyright data,
style reference information and version
| | 00:20 | numbers for team members.
| | 00:22 | We're going to start the
organization of the Explore California styles by
| | 00:25 | writing our own style header.
| | 00:27 | So I'm just going to go ahead and
create a brand-new CSS document.
| | 00:30 | Now, I've defined the 02_02 as my root directory,
| | 00:35 | but I'm just going to go ahead
and create a CSS file from scratch.
| | 00:38 | And I'll use the starter screen to do.
| | 00:39 | So create new CSS file. There we go.
| | 00:42 | I'm just going to save this in the 02_02_css
folder, and I'm going to save it as main.css.
| | 00:50 | Here we go. So the first thing I'm going to
do is just up here I'm just going to write:
| | 00:53 | style sheet for Explore California.
| | 00:57 | Now on the next line, I'm going to
type in version 1.2, modified on 04/05/10.
| | 01:10 | Now that level of organization you
don't need, but if you're working in a team
| | 01:12 | environment, that's really handy,
because if a team member comes in and makes a
| | 01:16 | change to the site, they can change
that one line and everybody knows, okay,
| | 01:20 | this has been modified last week or
this hasn't been modified in the month,
| | 01:22 | that sort of thing.
| | 01:23 | I'm going to go down and on the next line,
| | 01:26 | I'm just going to type in
copyright 2010 lynda.com for personal
| | 01:33 | educational use only.
| | 01:35 | So if you want to put some
restrictions on how your style should be used if
| | 01:39 | people want to repurpose them,
that's a good place to put it, as well.
| | 01:41 | Now this needs to be inside of a comment.
| | 01:43 | This would really mess my CSS
up if I didn't have it that way.
| | 01:46 | So let me go ahead and highlight
all of this text and when the text is
| | 01:49 | highlighted, I'm just going to come
right here to my Code toolbar, click on
| | 01:52 | the Apply Comment, and I'm going to apply the
second comment here, which is the /**/Comment.
| | 01:57 | That is a multiline comment in
CSS, and I want to choose that.
| | 02:00 | Now you can see that it's grayed, and you can
put those comment indicators on either side.
| | 02:03 | You can leave them inline.
| | 02:04 | It's really up to your personal preferences.
| | 02:06 | You can put them wherever you would like.
| | 02:07 | And I'm going to go ahead and save
that file again, and there we go.
| | 02:11 | There is our style header.
| | 02:11 | Now these things can be as
robust as you need them to be.
| | 02:14 | Remember, they're entirely optional.
| | 02:16 | You don't even really have to have them.
| | 02:17 | They are a great way to communicate
with yourself. If you're like
| | 02:21 | me and you forget why you are doing a
certain thing, they are a great way to
| | 02:23 | sort of add a little note to yourself,
as well as any team members, what's going
| | 02:27 | on with your styles.
| | 02:28 | And they are also a great way to pass
on information to people who might be
| | 02:31 | visiting your site, opening
your styles to take a look at them.
| | 02:34 | If you do plan on using them, keep in
mind that they should convey information
| | 02:37 | inside of them very clearly and very concisely.
| | Collapse this transcript |
| Building a color guide| 00:00 | The style header can be useful for
many things, not the least of which is to
| | 00:05 | explain your site's color
and typographic strategy.
| | 00:08 | In this movie, we'll explore adding a
style color guide to our header, and
| | 00:12 | discuss how this can be extremely
useful when creating your styles.
| | 00:16 | So, I have the main.css.
| | 00:19 | As you can see, currently, it just has
our sort of generic style header that we
| | 00:23 | created in the previous movie.
| | 00:24 | Well, right down below that,
I'm going to add our color guide.
| | 00:28 | So, I want to put my cursor on the
line just below the existing header.
| | 00:32 | I'm just going to type a few hyphens
intact as a separator, and then type in
| | 00:37 | color guide, and then finish out
those hyphens, just so it's really easy to
| | 00:42 | break that up in a section. And this is
a structure that we're going to follow
| | 00:46 | really for the rest of our CSS file. Okay!
| | 00:48 | On the line below that, I'm
going to type in my first color.
| | 00:51 | I'm going type in #193742, and then
just after that, I'm going type in a space
| | 01:00 | and a colon, just to act as another separator.
| | 01:03 | Then after that, I'm going to type in dark blue.
| | 01:07 | Right after dark blue, I'm going to type
in a pipe character, and you could find
| | 01:10 | that just to the right of your bracket keys.
| | 01:13 | Then I'm going to type in a little bit of a
description here, a little brief description.
| | 01:15 | I'm going to type in use for main headers
and most paragraph level headings. Okay!
| | 01:26 | Now, let's take a moment to review
the structure that we're setting up for
| | 01:30 | our color guide here.
| | 01:31 | So, we start, obviously, with a
hexadecimal notation, and after that, we have
| | 01:36 | sort of a name for the color.
| | 01:37 | Here, it's dark blue.
| | 01:38 | Really, it could be anything that you
want it to be, anything that's going to
| | 01:41 | sort of identify who this color
is: dark blue, light blue, steel.
| | 01:45 | After that, we have a brief
description of the color itself.
| | 01:50 | That again, is to sort of trigger your
own memory as to when you're going to
| | 01:53 | be using this color.
| | 01:54 | Now, you are free to really
structure this anyway that you want.
| | 01:57 | When you're working in a team
environment, it's a really good idea to put sort
| | 02:00 | of a description about this color, when
it should be used and any sort of rules
| | 02:05 | you have around governing usage of that color.
| | 02:08 | If you're just making yourself a
color guide, so that you could go back and
| | 02:11 | remind yourself what a
hexadecimal value is for a specific color,
| | 02:15 | you probably don't need this.
| | 02:16 | Anytime that you're working in a team
environment, or if you just want to remind
| | 02:20 | yourself of the rules in your site,
this is a really good practice to do.
| | 02:24 | Now, above and beyond just giving us
something to remember, the really cool
| | 02:28 | thing about this is that if I'm
creating a rule, I can come in, simply
| | 02:32 | highlight the hexadecimal value,
copy it, and then paste it into the rule
| | 02:36 | further down the page.
| | 02:37 | So, it becomes sort of a way of me
almost having my own little set of swatches
| | 02:41 | right here when I'm going to
be hand-coding. All right!
| | 02:43 | I'm going to go down the next line, and
we just have a few more colors that we
| | 02:47 | want to go ahead and throw in here.
| | 02:49 | Keep in mind we're going to follow
this structure every single time, so
| | 02:52 | that we're consistent.
| | 02:53 | So, down below that is #e1d8b9.
| | 03:00 | So we type in a colon, and after that
we're going to type in sand accent, and
| | 03:06 | then another pipe character, and we're going
to say use for most area background colors.
| | 03:14 | On the line after that, we're going to
type in #cb7d20, again, a space and a colon.
| | 03:23 | Limit the space there, so that if
you're highlighting this text to copy and
| | 03:27 | paste it, you don't have to worry
about selecting a colon, also by mistake,
| | 03:30 | which would be a problem in most rules.
| | 03:32 | Then we're going to do orange accent.
Again, we're going to do another separator
| | 03:38 | here, which is reusing our
pipe, use for links & rollovers.
| | 03:44 | Right after that, we're
going to type in #51341a.
| | 03:52 | We'll type in our colon.
| | 03:53 | After that, we're going to type in brown,
a little pipe character there, and then
| | 03:57 | we're going to say use for secondary headers.
| | 04:01 | Then after that, we're going to type in #952.
| | 04:04 | So, again, here, we're using a little bit of
shorthand notation - more on that in just a moment.
| | 04:09 | We're going to type in a
colon there and say dark orange.
| | 04:13 | Then we're going to type in use
for links or high contrast accents.
| | 04:21 | Create another line, and two more colors to go.
| | 04:23 | So, #3c6b92. That's going to be a
main blue, and again, type in your pipe
| | 04:33 | separator, use for page
background, footer background.
| | 04:41 | Then finally, our last color, #333,
our colon separator and neutral gray, and
| | 04:47 | then finally, use for body copy. All right!
| | 04:53 | Now, I need to go ahead and make
sure that this is commented out.
| | 04:56 | So, what I'm going to do is highlight
all of the text that we just typed in,
| | 04:59 | go to my Coding toolbar here and choose to
apply the CSS multiline comment, right there.
| | 05:05 | When I click off of it,
| | 05:06 | I can see that it's gray, so that lets me
know that, indeed, it is now commented out.
| | 05:11 | Browsers will ignore this
code when we render it. Okay!
| | 05:13 | So, did we use all the colors on our site?
| | 05:15 | Well, yeah, for the most part, we did.
| | 05:17 | But how many colors you put in your color guide,
| | 05:20 | How they're structured and what order
they come into is entirely up to you.
| | 05:24 | You just want to make sure that
you're passing along information clearly to
| | 05:28 | yourself for a later date, and any
team members, and perhaps freelancers in the
| | 05:32 | future that might be
working on this site, as well.
| | 05:35 | So, a color guide is going to
be extremely useful for us.
| | 05:37 | It's going to allow us to quickly, say, copy
and paste hex values when we create new styles.
| | 05:42 | It's serving as a basic color
usage guide for other team members, and
| | 05:46 | that's very important.
| | 05:47 | Now, as with any information you add to
your styles, you are free to add as much
| | 05:51 | or as little information as you want.
| | 05:54 | Think about ways you can use creatively
use a color guide within your style sheets.
| | 05:58 | I think you'll find it speeds up the
creation of your styles, and serves as a
| | 06:01 | handy reference within your code.
| | Collapse this transcript |
| Writing a style sheet table of contents| 00:01 | For smaller style sheets, finding the
style you need, or the section you need,
| | 00:04 | isn't that much of a problem.
| | 00:06 | As your sites get larger, and your
style sheets grow, finding your way around
| | 00:10 | begins to become a bit of a problem.
| | 00:12 | Creating a Table of Contents for your
style sheets gives you a quick and easy
| | 00:16 | way to review your sheet's structure,
and allows others to quickly locate
| | 00:20 | sections they need to work on. What's more,
| | 00:23 | as we'll see, they can be used to give
yourself quick access to specific regions.
| | 00:28 | So, here I have the main.css
from the 02_04 _css folder opened.
| | 00:35 | What I'm going to do is just scroll down
below the color guide that we've created.
| | 00:40 | I'm just going to hit Enter to go
down to create a brand-new line.
| | 00:43 | Now, I'm going to keep that
separator structure consistent,
| | 00:45 | so I'm just going to type in a few
hyphens here, and type in a space.
| | 00:49 | Then I'm going to type in Style sheet
TOC to let people know what we've got here.
| | 00:55 | Again, I'm just going to finish
that with a few other hyphens.
| | 00:58 | Now, I'm going to go down the next
line, and I'm going to type in Global
| | 01:02 | constants, because that is the first
item, Global constants, in our style sheet.
| | 01:08 | Now, I'm going to hit Enter to go
down the next line, and then type in CSS
| | 01:11 | reset, because that comes next.
| | 01:13 | Now, if you remember from earlier,
when we looked at our finished style sheet
| | 01:17 | guide, we saw the sections that
we were creating our styles in.
| | 01:21 | So, what you're really doing here is
just sort of listing the style sections in
| | 01:25 | the order that they come.
| | 01:27 | Some people prefer to do this at the
very beginning of their style sheets.
| | 01:30 | If you're that organized, and you know
exactly how you're going to write your
| | 01:33 | styles, exactly where each of your
sections are going to go, and you have
| | 01:36 | that really well planned out, then you can
go ahead and create your TOC at the beginning.
| | 01:40 | Now, if you're like me, you
might want to do it at the end.
| | 01:43 | I usually do mine at the end, because,
invariably, I'll have something come up,
| | 01:47 | and I'll say, okay, well, I guess,
these little groupings of styles should
| | 01:50 | really be in their own section.
| | 01:51 | And I might change my mind.
| | 01:52 | So, rather than having to redo the TOC,
just because I reorganized my style
| | 01:56 | sheet, I prefer to wait until the very, very
end and go ahead and put it in at that point.
| | 02:00 | That saves me a little bit of work that
I would normally require to update that.
| | 02:05 | Now, let me give myself a little bit room.
| | 02:07 | We'll go down the next line.
| | 02:08 | I'm going to type in Global classes;
on the next line, Home page layout.
| | 02:14 | On line below that, we're going to do
Top-level layout. On a line below that,
| | 02:22 | Region detail styles. All right!
| | 02:25 | Now, here, after Region detail styles, we're
going to have a few subsections of Region detail.
| | 02:30 | So, each of the regions, like header
and footer and sidebar, they're going to
| | 02:33 | have their own styles sectioned off as well.
| | 02:36 | So, we're going to indicate that
through the use of indentation.
| | 02:39 | So, what I'm going to do is go down
the next line, and I'm going to hit
| | 02:41 | Tab about three times.
| | 02:42 | I'd like to have a really nice indent here
to let me know that these are subsections.
| | 02:47 | We'll start with Header. On the next
line, Navigation, as those styles, of
| | 02:51 | course, come next, and then Main Content.
| | 02:54 | On the next line from there, I'm going
to hit Tab twice, because Main Content
| | 02:58 | has its own subsections.
| | 03:00 | Here, I'm going to do Data tables,
Spotlight region, and then Forms.
| | 03:07 | Now, next I'm going to sort of go
back to those Region subsections.
| | 03:11 | So, I need to outdent my CSS. How do I do that?
| | 03:15 | Well, if you look in your Coding toolbar,
right here on the left-hand side -- I
| | 03:20 | don't have enough room to display all
these icons, so I'm going to click on this
| | 03:23 | Show More button here.
| | 03:24 | If you have a higher screen resolution
than me, you probably see all these already.
| | 03:28 | I'm going to go right here to the,
either Indent or Outdent Code.
| | 03:32 | I'm going to choose Outdent.
| | 03:33 | That's going to take me right
back out to the next tab stop.
| | 03:37 | So, here, I'm going to type in Sidebar,
and then finally Footer. There we go.
| | 03:42 | I'm going to highlight all of this code,
and go ahead and wrap that in a CSS
| | 03:47 | comment, a multiline comment.
| | 03:49 | Again, you can do that by
using this icon right there.
| | 03:52 | Now, of course, you
could type in those yourself.
| | 03:54 | They are just /**/.
| | 03:58 | But the beauty of this is that you can
just sort of type away and highlight all
| | 04:02 | of it when you're done
and apply a comment to it.
| | 04:05 | So, it's really, really simple and easy to do.
| | 04:07 | You just want to make sure that
everything changes color, that you don't leave
| | 04:10 | anything off at very end of that.
| | 04:12 | Now, we could be finished with our TOC,
but as I mentioned earlier, you can also
| | 04:15 | use the TOC as a means of sort of
finding those styles very quickly.
| | 04:19 | That's especially helpful if you
have hundreds of lines of CSS, or even
| | 04:22 | thousands of lines of CSS.
| | 04:24 | So, just above the Style sheet TOC area,
I'm going to type in another comment.
| | 04:28 | I'm going to type in some
instructions on how to use this.
| | 04:31 | I'm going to type in: to jump to a
specific section, search for the unique
| | 04:40 | character pair at the front of each TOC section.
| | 04:49 | I'm even going to pass in a little
tip on how to this in Dreamweaver:
| | 04:53 | highlight the special character and use
the shortcut for Find Selection, which
| | 05:03 | is Command+Shift+G (Mac).
| | 05:09 | Then I'm just going to do a little /
there and then do Shift+F3 (PC), just so
| | 05:17 | people know different
keyboard shortcuts they can use.
| | 05:20 | Again, how much information you give
when you're are doing this type of a
| | 05:23 | comment is totally up to you.
| | 05:24 | But that will be pretty easy for anyone
visiting our site, or working on a site,
| | 05:29 | to know how to jump down to a specific section.
| | 05:31 | Once again, I'm going to apply the comment here.
| | 05:32 | Okay, now what does this all mean?
| | 05:33 | What do I mean by special characters?
| | 05:35 | So, what we're going to do is we're
going to put a character pair in front of
| | 05:39 | each one of these sections.
| | 05:40 | It's going to be a character pair that you
would find in no other place in your CSS.
| | 05:44 | So, you're going to use unique
characters and sort of a sequential numbering
| | 05:48 | system to let people know that this is
the unique character you're going to put
| | 05:51 | at the front end of the section,
when you comment out your CSS later on.
| | 05:55 | So, right before the Header section,
for example, you'll do the little
| | 05:59 | section separator that we have here,
but in front of the name, you'll put the
| | 06:03 | special characters.
| | 06:04 | Let me show you what I mean.
| | 06:05 | So, click in front of Global
constants, and here I'm going to type in ^1.
| | 06:10 | So, the ^ is that sort of up-arrow-
looking character right above the 6, if
| | 06:14 | you hold the Shift key.
| | 06:15 | So, ^1. Now, I'm probably not going
to have ^1, ^2, ^3 anywhere in my CSS.
| | 06:21 | Some people like to use the tilde
character; some people like to use other
| | 06:24 | characters like the pipe.
| | 06:25 | It's totally up to you.
| | 06:27 | Then we're just going to keep going,
and we'll do ^2 right in front of CSS
| | 06:31 | reset. Notice that I'm being very
careful to put a space in between those.
| | 06:35 | ^3 for Global classes, ^4 for Home page
layout, ^5 for Top-level layout, ^6 for
| | 06:44 | Region detail styles.
| | 06:46 | Then in front of the subsections, I'm just
going to start subsectioning these off as well:
| | 06:50 | so ^6a for Header, ^6b for
Navigation, ^6c for Main Content.
| | 06:58 | I suppose I could keep going with that,
but sometimes you can go a little too far.
| | 07:02 | So, I'll just use ^6d for Data tables,
^6e for Spotlight region, ^6f for Forms,
| | 07:11 | ^6g for Sidebar, and
then finally ^6h for Footer.
| | 07:17 | Now, how does this work?
| | 07:18 | Well, later on, if we were going to do
our first section for Global constants,
| | 07:22 | for example, I could come down here,
type in a separator, and then do ^1 Global
| | 07:31 | constants, just like that, okay.
| | 07:35 | So, that might be our
separator. A little later on,
| | 07:37 | I could go ahead and comment
that out, that sort of thing.
| | 07:40 | So, to jump down to that section,
all I would need to do is highlight
| | 07:44 | that special character.
| | 07:45 | Then in Dreamweaver, I can go up to Edit,
and we can use the Find and Replace feature.
| | 07:50 | So, Find and Replace, what that can do
for you is, as a Find Next, that will
| | 07:53 | just cycle through all of the elements.
| | 07:56 | We don't have to bring up the Find
and Replace dialog box to do that.
| | 07:59 | As I mention in the keyboard
shortcut, we can do Find Selection.
| | 08:04 | So, I'm going to highlight that again, and
I'm going to go up to Edit > Find Selection.
| | 08:12 | Again, the keyboard shortcut for
me on the PC would be Shift+F3.
| | 08:15 | So, if I hit that, notice it
jumps right down to that section.
| | 08:18 | Now, that's not that impressive,
because that wouldn't be a hard scroll, but
| | 08:21 | imagine you have thousands of lines of
code, and you can instantly jump down to
| | 08:25 | that section and start working.
| | 08:26 | So, that's a really, really handy feature.
| | 08:27 | Now, again, for smaller, simpler sites,
you probably won't need anything as
| | 08:31 | complex as a TOC,
especially this particular TOC;
| | 08:34 | however, for larger sites, or more
complex style sheets, having a TOC gives you
| | 08:40 | a nice resource for exploring the
organization of your styles, and a way to
| | 08:44 | quickly navigate through the code.
| | Collapse this transcript |
| Creating sections for styles| 00:00 | One of most important things you can
do for organizing your styles is to
| | 00:04 | create sections within your style
sheets that group specific content, regions
| | 00:09 | or even types of styles.
| | 00:10 | In this movie, we'll continue to
organize our style sheet by creating
| | 00:14 | sections for our styles.
| | 00:15 | So I'm going to over to my Files panel,
| | 00:18 | open up the _css folder,
| | 00:20 | and I'm going to open up the main.
css file that we've been working on.
| | 00:23 | I'll scroll down a little bit beneath
the TOC that we've created a little bit
| | 00:27 | earlier, and just hit Enter to
give myself a little bit space.
| | 00:31 | Now here I'm going to start using
that sort of consistent structure that we
| | 00:34 | have for separators.
| | 00:36 | I'm going to start our first one by doing ^1.
| | 00:39 | Remember, we're using these special
characters that we created in our TOC to
| | 00:44 | allow us to easily jump down to that
section by using the Find Selection
| | 00:48 | feature inside Dreamweaver.
| | 00:49 | It allows us to jump right down to that.
| | 00:51 | Now after that I'm going
to type in a few hyphens.
| | 00:53 | Now how many you type in is up to you.
| | 00:55 | I just held the Hyphen key down
until I was like that's far enough.
| | 00:58 | What you're looking to do is when you
scroll through your styles, you want to be
| | 01:02 | able to find these separators really
easy by having them sort of stand out.
| | 01:07 | So after that I'm going to type in global
constants, and then we'll finish that up.
| | 01:14 | And at this point, it's a lot faster, when
doing some of these, to go ahead and add
| | 01:18 | the comments as you type.
| | 01:20 | Notice that now I have to highlight this,
go over to my Coding toolbar and apply
| | 01:24 | the CSS multiline comment.
| | 01:26 | Now that was okay, and it wasn't that
difficult, but frankly it's easier for me
| | 01:30 | to do it myself, and I don't have to
worry about whether or not I have any type
| | 01:34 | of separation between any special characters.
| | 01:37 | Okay, now what I'm going to do is from
here on out, I'm going to go down and hit
| | 01:40 | Enter twice and start typing on a new line.
| | 01:43 | Now I could go ahead and type all of
this out again, and go ahead and type in the
| | 01:47 | number of hyphens that I need, or I
could just go ahead and copy and paste.
| | 01:51 | Copy and paste is pretty nice, but as we're
going to see, it's not always going to work.
| | 01:54 | So our next separator, I'm going to
type in the comment first, so /* and then
| | 01:59 | space, and I'm going to do ^2, and
then again, I'm just going to start doing
| | 02:03 | those hyphens in, and then I'm going
to type in limited scale reset.
| | 02:09 | Again, type in my hyphens
and then end in about same spot */.
| | 02:16 | Now how organized you get this is up
to you, but notice that I'm using pretty
| | 02:19 | much the same width for each one of
these guys. Because some of the titles are
| | 02:23 | longer or shorter than others, some of
them need more hyphens or less hyphens.
| | 02:27 | It's really a personal call,
how you want to do this.
| | 02:30 | There's no set way to do this.
| | 02:32 | So you could certainly copy and paste.
| | 02:34 | You could just do one from scratch.
| | 02:35 | Now later on in this title, we'll
just talk about something called a code
| | 02:39 | snippet. And so if you're going to
always structure your CSS in this manner, it
| | 02:43 | would make sense to create sort of the
sectional marker like this as a snippet
| | 02:46 | so that you don't have to keep typing it.
| | 02:47 | Now let's go down to the next line,
and I'm going to do /* again and ^3.
| | 02:53 | Let me go ahead and type in my hyphens here,
and then I'm going to type in global classes.
| | 02:59 | Finish that out by mimicking the
structure again, hyphens and the */.
| | 03:04 | Now, if you're going to be typing in
these comments by hand, /* */, make sure that
| | 03:10 | you see the color change
to gray as you finish it up.
| | 03:14 | You don't want to leave this open
because notice that I could go down to the
| | 03:16 | next line and start typing, and I
could do /* ^4 and just keep going.
| | 03:22 | Everything remains gray. It's no big deal.
| | 03:24 | But eventually I have to close this.
| | 03:26 | If I don't, the CSS underneath this would still
be considered commented out. Let me show you.
| | 03:32 | If I go down here and I type in an h1
selector, notice that it's grayed out.
| | 03:35 | That would not be rendered.
| | 03:37 | So if you're going to type those by hand,
make sure you close them properly, */.
| | 03:43 | After global classes, we're going to
do home page specific layout styles, and
| | 03:50 | then we'll finish that up.
| | 03:52 | So I think you can see what I mean here.
| | 03:54 | Obviously, there were too many hyphens on
the front end and not enough on the backend.
| | 03:58 | So you can sort of adjust
those if you would like.
| | 04:00 | And again, how strict you
are with this is up to you.
| | 04:04 | Remember, these sectional markers are going
to be separated by dozens of lines of code.
| | 04:08 | You will very rarely see them
on one screen at same time.
| | 04:11 | They're really for your benefit as
you're scrolling to sort of catch your eye.
| | 04:14 | Again, hit Return twice, */ and here
we're going to do ^5, and this section is
| | 04:22 | going to be the top level region layout styles.
| | 04:28 | I'll finish that up by
doing some hyphens and then */.
| | 04:33 | Notice that I'm giving two lines
of space between these guys, as well.
| | 04:37 | I want enough space in there to make it
really easier for me to go in and start
| | 04:40 | typing within that section without
having to hit Return or Enter all the time.
| | 04:44 | Next up, we're going to do region detail styles.
| | 04:48 | Again, I'm going to finish that up, as well.
| | 04:50 | Now you can put additional comments here
if you'd like, to sort of identify things.
| | 04:54 | For example, let's go back here to
the top level region layout styles.
| | 04:58 | Maybe you want somebody to know what
you're referring to there, and you could
| | 05:02 | really do this for any of
these sectional headers.
| | 05:03 | I'm going to go down to the next line
here, and below that I'm just going to type
| | 05:06 | in: /* top level regions are header,
mainNav, mainContent, sidebar and footer.
| | 05:20 | Then I'm going to finish that with */.
| | 05:23 | So these are the actual ids of the
div tags that are going to be used for
| | 05:28 | sectional content in our site.
| | 05:30 | So we're basically just letting people know
what we consider to be a top level region:
| | 05:34 | any div within the id of
mainNav, mainContent, sidebar, footer.
| | 05:38 | Those are the top level regions in our file.
| | 05:41 | You can be as instructive with these
sections as you want, or you could just
| | 05:45 | not type them in at all.
| | 05:46 | That's either for your benefit or
the benefit of anybody on your team.
| | 05:50 | All right, now I want to go ahead
and finish this off by doing all of our
| | 05:54 | region detail styles.
| | 05:56 | Remember, our TOC is indicating
that these guys are subsections.
| | 05:59 | Instead of using a main section
indicator like we have here, we'll do a smaller
| | 06:03 | version of that, sort of to denote its
level of importance within the code.
| | 06:07 | In fact, that it is a subsection.
| | 06:09 | So I'm going to hit Return to go
down to the next line a little bit.
| | 06:11 | And here, I'm going to do /* and then no hyphens.
| | 06:16 | I'm just going to
immediately type in the word "header."
| | 06:18 | After that, I'm going to do ^6a.
| | 06:22 | So here we're putting the indicator
on the back end and not in front of it.
| | 06:26 | That's really a personal choice.
| | 06:28 | If I don't have sort of long dividing
line, I like to have the name of the
| | 06:32 | section at the very first so that
people can read it very clearly. So */.
| | 06:37 | And we're just going to
follow that from here on out.
| | 06:39 | So after that we're going to do
navigation, and we're following the following
| | 06:43 | the exact same order that our TOC is in.
| | 06:45 | That's going to be ^6b and finally
*/ and on the next line /* mainContent
| | 06:56 | region, and that, again, is going to
be ^6c, and that's going to be */.
| | 07:04 | Next, we're going to start a comment
agai,n and underneath that it's going to be
| | 07:07 | the mainContent specific regions.
| | 07:13 | We're actually not going
to put an indicator here.
| | 07:15 | Now the reason for that is we're just
sort letting people know that okay within
| | 07:19 | the mainContent there are further
regions that need to be identified.
| | 07:23 | So if you'd like, you can go just on
the next line to let yourself know that
| | 07:26 | these are grouped, not even give any
spacing here, and then we're going to do
| | 07:30 | /* data tables, and we'll pick back
up with our indicators, so ^6d */ below
| | 07:42 | that, and I'm just going to go back
to having that sort of double-spacing
| | 07:45 | between those areas.
| | 07:46 | Here, we're going to do spotlight region.
| | 07:50 | Now again that's going to be ^6e */.
| | 07:56 | And then again go ahead and do
multiline comment here, and I'm going to type in
| | 07:59 | form styling. That's going to be ^6f */,
and we're almost done, */ sidebar, which
| | 08:11 | is going to be ^6g */, and then our last one.
| | 08:17 | So write your comment, and we're going to do
footer region, which is ^6h */. Well, there we go.
| | 08:25 | Now we have all of our sections ready
to go, and we can just put as much CSS
| | 08:29 | between these guys as we need.
| | 08:31 | So the structure of our CSS is built.
| | 08:34 | Now honestly, the strategies for
grouping styles and these sections is
| | 08:38 | entirely up to you.
| | 08:39 | I recommend taking some time to think
about how your site is structured, whether
| | 08:43 | you want to separate properties such
as layout typography and color, so you
| | 08:47 | can sort of do that -
| | 08:47 | we've got some layout styles I have
put in here, but we don't have typography
| | 08:50 | and color pulled out -
| | 08:51 | and then equally important, what the
needs of your site will be in the future.
| | 08:55 | The proper organization of your
styles will create a much more manageable
| | 08:59 | site, and it's going to make updating and
scaling it easier for you and any of your team members.
| | 09:04 | If planned properly, that organization
should start right here as your styles
| | 09:08 | are being created.
| | Collapse this transcript |
| Using the CSS Styles panel to organize styles| 00:00 | While properly planning and
organizing your styles before you begin
| | 00:03 | creating them is essential,
| | 00:05 | it is inevitable that you'll have to
do some reorganization as your site
| | 00:09 | changes, or even during the development process.
| | 00:12 | The CSS Styles panel features some
pretty powerful organizational capabilities,
| | 00:17 | and in this movie we are going to explore
using them to restore order to your styles.
| | 00:21 | Now we are going to focus on our CSS
Styles panel in this movie, so I am going to
| | 00:25 | go over to my Files panel.
| | 00:27 | Double-click that tab to collapse
that so that I get more room for my CSS styles.
| | 00:31 | Now you may have noticed our
style sheet now has styles in it.
| | 00:34 | So if I flip over to main.css here in
my resources and look at the Code View,
| | 00:39 | we can see that all those sections
and everything that we created earlier now are
| | 00:43 | populated with Styles.
| | 00:44 | So this is a little further in the
development process after I created all those
| | 00:48 | sections, and now the styles have been added.
| | 00:50 | But the styles aren't exactly
the way they are supposed to be.
| | 00:53 | So we could go ahead and go back into
our code, start copying and pasting and
| | 00:59 | renaming things, and doing things like that.
| | 01:01 | Or we can take advantage of the CSS
Styles panel, which is going to allow us to
| | 01:05 | organize our styles in a much
faster and more efficient manner.
| | 01:09 | Now let me show you what I mean.
| | 01:10 | Over here in you CSS Styles panel, make
sure you're looking at the All view, so
| | 01:15 | click the all button.
| | 01:16 | And then if I collapse the main.css
and collapse the print.css, so here is my
| | 01:21 | external main and my external print
style sheet, I can see that I have a style
| | 01:25 | tag here, which indicates
embedded styles for this page,
| | 01:29 | and I have a rule for the h2 and h3 selector.
| | 01:32 | Now sometimes you might
just test out a style locally -
| | 01:35 | see how it looks on this page
before you commit it to your entire site.
| | 01:38 | Or you might create a couple of rules thinking,
well I only going to really need them for this page.
| | 01:43 | And then as you keep working on your
site you realize, oh, well I really did
| | 01:46 | need that for everybody,
| | 01:47 | so I probably should have put it in my
external style sheet rather than just
| | 01:50 | trying to have it here locally.
| | 01:52 | Now to fix that by hand you'd have to do
a lot of copying and pasting and moving
| | 01:55 | back and forth between one document and another.
| | 01:57 | By using the CSS Styles panel, we can
just move them in one efficient operation.
| | 02:01 | So what I am going to do is
highlight the h2, hold down the Shift key and
| | 02:04 | click on the h3 selector.
| | 02:06 | I want both of those guys selected.
| | 02:08 | Now after that, I'm going to right
-click, or on the Mac Ctrl+click.
| | 02:11 | And you'll notice that we have a
command listed as Move CSSRules.
| | 02:17 | Now you can also find that
in the CSS Styles panel menu.
| | 02:20 | So if I go to CSS Styles, right over
here, top right-hand icon is the menu.
| | 02:25 | I can also find it there.
| | 02:26 | So really either any of those places
you can right-click or you can do that.
| | 02:29 | So I am going to choose a Move
CSSRules and take a look at our options.
| | 02:33 | We can move them to any existing
style sheet that is attached to the page,
| | 02:37 | or we can even move them to a new style sheet.
| | 02:39 | So if you had a page where you had
tons of embedded styles that were
| | 02:42 | driving just that page,
| | 02:44 | and you are like you know what,
those could drive my entire site,
| | 02:46 | you can go ahead and export them out to
an external style sheet, which will be
| | 02:49 | automatically attached to this page.
| | 02:51 | That's pretty cool.
| | 02:52 | Well we just need this placed in
the existing main.css style sheet.
| | 02:57 | So we are going to go ahead
and make sure that's selected.
| | 02:58 | We are going to go ahead and click OK.
| | 03:00 | And if I scroll down to our style tag
down here, you can see that that is now empty.
| | 03:05 | I also notice that in my main.css,
which has been expanded for me again.
| | 03:09 | The h1 and h2 selector are
added at the very bottom.
| | 03:13 | Well it was cool that it moved them for
me, but it really totally destroyed my
| | 03:17 | organization because they are
not supposed to be down there.
| | 03:20 | Well let's get rid of our
embedded style tag first.
| | 03:22 | We don't need that anymore.
| | 03:23 | It's cluttering up our codes.
| | 03:24 | So I am going to highlight that
embedded style tag right there.
| | 03:27 | Then go down to the Trashcan icon and click.
| | 03:30 | Now be very careful. Anytime you click that
Trashcan icon you only want to do it one time,
| | 03:34 | and you want to be very, very certain of
what you have highlighted before you click it.
| | 03:38 | Now I'll close the prints style
sheet just to avoid confusion with any of
| | 03:41 | those types of styles.
| | 03:42 | And again, on the Mac that's going to be a
little arrow; on the PC here, it's a minus symbol.
| | 03:46 | That'll go ahead and collapse that down.
| | 03:47 | Now I need this h2 and h3 these are
global constants, so they need to be up in
| | 03:52 | this area where their grouping of styles are.
| | 03:55 | And again, with the CSS Styles
panel that's pretty easy, as well.
| | 03:58 | I am going to go ahead and
highlight both of those again.
| | 04:00 | With them highlighted, I am going
to click and hold the mouse down.
| | 04:02 | And I am going to keep the
mouse held down the whole time.
| | 04:05 | And I am just going to move up.
| | 04:06 | And you can see I get a little dividing line.
| | 04:08 | And if I keep up, it'll scroll for me.
| | 04:10 | And I am just going to keep
scrolling up and up and up and up and up.
| | 04:13 | And it's kind of a slow scroll, but
that's a good thing because that allows you
| | 04:17 | to precisely place them where you want.
| | 04:19 | And where I need these guys is right
here, just below the h1, h2, h3 group
| | 04:25 | selector, just below that.
| | 04:27 | So I'm going to see a blue
dividing line between those.
| | 04:29 | Let go, and it's moved those back.
| | 04:32 | Now I want to switch over to Code View
in main.css for just a moment because I
| | 04:36 | want to point something out about this.
| | 04:38 | You want to be pretty careful about
these guys, and if you have a section marker,
| | 04:43 | like right here we have our global classes,
| | 04:45 | if you are moving your styles to a
location that's at the very end or the very
| | 04:48 | beginning of one of those sections.
| | 04:50 | you want to go over to Code View real
quick and just make sure that it hasn't
| | 04:53 | placed them in the wrong section.
| | 04:55 | Coming back to Design View,
I am going to do a Save All.
| | 04:58 | So we see now we can move styles
from one style sheet to another, from
| | 05:02 | embedded to external.
| | 05:03 | We can drag styles around, that sort of thing.
| | 05:05 | Well that Move Styles command was
helpful, but the problem with it is that we
| | 05:10 | don't control where in the
style sheet it placed our files.
| | 05:12 | We had to do that by simply clicking
them and dragging them and rearranging them
| | 05:15 | within the style sheet.
| | 05:16 | Well we can use the drag and drop
method to actually move styles from one sheet
| | 05:20 | to the other, as well.
| | 05:21 | In your main.css, scroll down a
little bit until you get to these classes.
| | 05:25 | And I have a .pb before and a .pb after.
| | 05:29 | Okay, well that actually refers to
page breaks, which means that those classes
| | 05:33 | belong in the print style sheet, not
in our main screen style sheet here.
| | 05:38 | So I'm to highlight both of
those guys: pb before pb after.
| | 05:42 | And with those highlighted, again I am
just going to click and hold the mouse
| | 05:45 | down on them and drag down this time.
| | 05:47 | Again, we are going to get our scrolling down.
| | 05:49 | And notice that of course we can
reorganize them within this style sheet,
| | 05:54 | but as we get down into our print style
sheet one of things that you are going
| | 05:58 | to find is that we can move them
for one style sheet into the other.
| | 06:01 | So just hovering over the print
style sheet will cause it to open up.
| | 06:04 | And I want to place this at the very,
very top of the print style sheet.
| | 06:08 | I am going to let go the mouse.
| | 06:10 | And it just moved them right there.
| | 06:13 | I can actually verify that by going
into my print.css, scrolling up, and there
| | 06:17 | they are at the very top.
| | 06:18 | I am going to go ahead and do a Save
All and switch back to Design View.
| | 06:22 | So reorganizing our style sheet is pretty easy.
| | 06:25 | We can use the Move Styles command, or
we can just take matters into her own
| | 06:28 | hands and drag and drop them.
| | 06:30 | But there are other things that the
CSS Styles panel can do to help us
| | 06:33 | reorganize our styles, as well.
| | 06:35 | I'm going to scroll back up into
this main content section here.
| | 06:39 | And there is one thing I want to revisit.
| | 06:41 | When we were naming our classes,
there was a class named artImg.
| | 06:46 | And actually, if you highlight the
picture that's on the page, you can see that
| | 06:50 | it has class applied to it, artimg,
and that stands for article image, but
| | 06:54 | that's kind of misleading.
| | 06:56 | Art might mean something to one person
and something to somebody else, so you
| | 07:00 | wouldn't naturally denote article from that.
| | 07:02 | You might draw another meaning from it.
| | 07:04 | So we really need to rename that class.
| | 07:07 | And now if you've ever done that by hand,
you know how much of a pain that can be.
| | 07:10 | You rename the class in the CSS, and
then you got to go into the HTML, find
| | 07:14 | every single element that has a class
applied to it, and rename it there, as well.
| | 07:19 | And if you don't, then your styling is messed up.
| | 07:21 | So that can be a real hassle.
| | 07:23 | Using the CSS Styles panel, we
can do that in one single operation.
| | 07:27 | Let me show you what I mean.
| | 07:28 | I am going to come right over
here to the #mainContentimg.artImg.
| | 07:32 | So go ahead and highlight the rule, right-
click it, and you want to choose Rename Class.
| | 07:36 | Now if you don't see this
let me show you something.
| | 07:38 | If you click on your selector and
then you just sort of hover there for a
| | 07:41 | moment, or click once and then click
again really briefly after that, it'll
| | 07:44 | highlight the text.
| | 07:45 | If the text is highlighted like
this, it allows you to rename that,
| | 07:49 | but if you right-click
you don't get the same menu.
| | 07:51 | So instead of highlighting the text that
we've got here, make sure you just click
| | 07:55 | once on the selector very briefly.
| | 07:57 | Then I am going to right-
click and choose Rename Class.
| | 08:00 | It's going to say okay you
want to rename which class?
| | 08:02 | So you can actually grab from the
pulldown menu choose any class you want.
| | 08:05 | So you don't even really have to
make sure you are focused on that
| | 08:08 | particular selector.
| | 08:09 | Here we are going to do art image, and
then we are going to rename this articleImage,
| | 08:14 | all one word, lowercase a uppercase I, and we
don't have to put a period in the front of it.
| | 08:19 | You don't have to do that for this.
| | 08:20 | I am going to go ahead and click OK.
| | 08:23 | What's really cool about
this is now look in our CSS.
| | 08:25 | ArticleImage is the class name on that selector.
| | 08:29 | And then if we click on the image
itself, we can see that it had also
| | 08:32 | changed that as well.
| | 08:33 | That is really cool.
| | 08:34 | It's going to find everything in this page
and go ahead and rename that class for me.
| | 08:38 | So that's a really neat future.
| | 08:39 | One brief little problem with that:
| | 08:42 | It doesn't help the rest
of the pages in my site.
| | 08:44 | It only helps the page that I have opened.
| | 08:46 | So of course, that's going to cause us a
lot of tedious work, right? Well, not really.
| | 08:51 | Take a look down here in the Search panel.
| | 08:53 | In the Search panel, I can see that it just
did a Find and Replace in the Current document.
| | 08:57 | So really, what Dreamweaver is doing is
it's running a Find and Replace command
| | 09:01 | to find anything with the old
name and replace it with the new name.
| | 09:04 | Well that'll be really helpful if
we can do that site-wide, wouldn't it?
| | 09:07 | Well if you go right over here to the
Search panel and you click the Play button,
| | 09:11 | the Find and Replace
dialog box is going to open up.
| | 09:14 | What's really cool about this is
it remembers what you just did.
| | 09:18 | So the Find and Replace dialog box, every
single time you open it up, for the most
| | 09:22 | part, it's going to show you
the previous Find and Replace.
| | 09:24 | And in case, it was
Dreamweaver running that own command.
| | 09:27 | So now I can change it from Current document,
| | 09:30 | I will grab the pulldown menu here,
| | 09:32 | and I am going to choose
Entire Current Local Site.
| | 09:35 | So now I'm saying hey go ahead
and make this change site-wide.
| | 09:39 | Anywhere in my manage.css, anytime you
find any tag with a class of art image,
| | 09:45 | go ahead and set it.
| | 09:45 | Set the class attribute to article image.
| | 09:47 | Now you may notice these weird
special characters in front of that.
| | 09:51 | Those are what we call regular expressions.
| | 09:52 | And they sort of help protect some
of any of the other classes that you
| | 09:55 | might have going on.
| | 09:56 | And I'm just going to go ahead
and make that change is done cleanly
| | 09:59 | throughout the site.
| | 10:00 | We already know this works.
| | 10:02 | I am just going to hit Replace All.
| | 10:03 | It's going to warn me that hey this
can't be undone in files that aren't open.
| | 10:07 | Are you sure? Hit Yes.
| | 10:08 | And now look at all the change that got
made site-wide that we didn't have to go
| | 10:12 | in, open up and replace that
by hand - really, really cool.
| | 10:16 | Now, you know it's always best to
try to plan ahead, but realistically,
| | 10:19 | you are going to have to make changes, both
large and small, to your styles as you work.
| | 10:23 | Understanding the CSS Styles panel can
make those changes a lot easier and a
| | 10:27 | lot more efficient.
| | Collapse this transcript |
| Resolving conflicts| 00:00 | As your CSS becomes more complex, it's
inevitable that you write a style, look
| | 00:05 | at your design and say, why is that happening?
| | 00:08 | Now, this usually happens after you
write a style and just don't see what you
| | 00:13 | expect. The formatting just isn't there.
| | 00:15 | The culprit is typically a style conflict,
| | 00:17 | a situation where either the cascade
or the specificity of the rules involved
| | 00:22 | thwarts your desired formatting.
| | 00:24 | Searching through hundreds of lines of
code to find these conflicts and resolve
| | 00:28 | them can be time-consuming,
and is really frustrating.
| | 00:32 | Well, that's where the CSS Styles
panel comes to our rescue once again.
| | 00:35 | As we'll see in this exercise, it can
help us quickly and easily resolve any
| | 00:39 | style conflicts we come up against.
| | 00:41 | Now if I scroll down a little bit, I
can see that we have this area down
| | 00:45 | here where we have our current
monthly Tour Spotlight, highlighting the
| | 00:48 | Explorer's Podcast, which is a nice
little Flash video, and a little section
| | 00:50 | on Have questions.
| | 00:52 | So all those headlines are fairly
related, but this one, and we want make it
| | 00:56 | stand out a little bit.
| | 00:57 | It's the Tour Spotlight. We really want
people to take a look at that because
| | 01:00 | we're highlighting that
particular tour for the month.
| | 01:02 | So I think we want to change
the color of that headline.
| | 01:04 | I want to make it red.
| | 01:05 | It is sort of that nice
bright accent color that we have.
| | 01:08 | Now I could do that in number of
different ways, but writing a class seems to be
| | 01:12 | one of the most efficient ways to do that.
| | 01:14 | That also allows me to reuse that on
other pages for pretty much any headline I
| | 01:19 | want. I just apply the
class, and I will have it work.
| | 01:21 | So let's go ahead and do that.
| | 01:22 | So what I'm going to do
is just select my main.css.
| | 01:25 | Make sure I am working with the
external style sheet, right up here.
| | 01:28 | Create a brand-new CSS Rule.
| | 01:30 | I am going to go ahead and choose
Class as the Selector Type, and I am just
| | 01:33 | going to type in .spotlight.
| | 01:36 | That seems to be pretty self-explanatory.
| | 01:38 | So .spotlight, and I want
to define it in main.css.
| | 01:42 | So if you didn't highlight the style
sheet earlier, you can just choose from here.
| | 01:45 | I am going to go ahead and click OK, and this
is going to be a really easy style to write.
| | 01:50 | I am just going to go right over
here to Color, and I am going to type in
| | 01:52 | #cb202a, and if you hit Tab, you'll
see that sort of bright red color that
| | 02:00 | this is going to be.
| | 02:01 | I will go ahead and click OK, and of
course, writing a style is only half of it.
| | 02:06 | We have to apply the style, as well.
| | 02:09 | So I am going to click inside the
headline for Tour Spotlight, and if you really
| | 02:12 | want to make sure you have the
heading, remember you can use the tag
| | 02:15 | selector right here to click on the
h2 tag, and that's going to select the
| | 02:18 | entire heading, not just the text inside of it.
| | 02:21 | So now what we're going to do is we
are going to go ahead and apply our class.
| | 02:24 | So I am going to click on my HTML
properties right here, and you can see the
| | 02:28 | Class pulldown menu. Right now,
no class is associated with that.
| | 02:31 | And I want to find this one right here,
spotlight, the one we just created.
| | 02:34 | I am going to go ahead and click on
that, and now our headline is not red.
| | 02:39 | So we were expecting it to be red, but it's not.
| | 02:42 | So obviously one of our other styles is
conflicting with this, and so we have a
| | 02:46 | style conflict that we need to resolve.
| | 02:48 | Now, if we had to do this by hand, we
would have to flip back over, find any of
| | 02:52 | these styles that were related to this,
try to figure out exactly which selector
| | 02:56 | is overwriting this and why.
| | 02:58 | Is it a problem with the cascade?
| | 02:59 | Is it a problem with inheritance?
| | 03:00 | Is it problem with the specificity?
| | 03:01 | There is all manner of
issues that really could be here.
| | 03:04 | So I think what I want to do is let the
CSS Styles panel let me know what's going on.
| | 03:08 | It can help me with this.
| | 03:09 | So I am going to go over
to my Files panel again.
| | 03:11 | I am going to double-click
the tab of the Files panel.
| | 03:13 | I'm just going to collapse it, just
give me a little more room, because I am
| | 03:16 | working with probably less screen
real estate than a lot of you guys.
| | 03:19 | Now currently I'm looking at my
styles in the All view, and that's not
| | 03:22 | really helping me here.
| | 03:23 | I want to click on the Current view,
and in the Current view, I have got two
| | 03:27 | options, and they are indicated by
these two little icons right here.
| | 03:31 | They look like little stairs.
| | 03:32 | The first icon is just going to
basically show us, in this middle section,
| | 03:37 | information about any property.
| | 03:38 | So if I click text-align, for example,
it will tell me where it's defined, what
| | 03:42 | selector -- in this case, the
wrapper rule is driving this.
| | 03:44 | So it sort of gives you an
overview of where all the issues are.
| | 03:48 | Now if I select Color, notice that
when I select Color, it says hey color is
| | 03:51 | defined in a rule #spotlight h2.
| | 03:54 | And you are like, hey, that's actually
supposed to be coming from the Spotlight
| | 03:57 | class selector that I've
created, so what's the deal?
| | 04:00 | Well the icon just to the right of that is
an icon that will show us the entire cascade.
| | 04:05 | So if I click on that, this
middle section gets a lot larger.
| | 04:08 | As a matter of fact, you may need to
rearrange these panel sections, maybe like
| | 04:12 | leave less room for the summary and
more room for Cascade, so you can see that
| | 04:15 | there is quite a lot going on here.
| | 04:17 | So what we are looking at right now is a
list of rules, a list of rules is showing
| | 04:21 | up from the closest rule, which is
right down here on the bottom, the one that
| | 04:24 | takes precedence over any of the
other rules, and it just goes up.
| | 04:28 | This is going to show you any conflicts
that might be happening due to specificity.
| | 04:31 | It's going to show you any conflicts
that might be happening due to cascade,
| | 04:34 | or due to inheritance.
| | 04:35 | It's going to show these selectors in the
order that they're applying to the element.
| | 04:39 | And one at the very bottom is the last one
applied, and of course the last rule applied wins.
| | 04:44 | In this case, we have this #spotlight
h2, and if I hover over that, it tells me
| | 04:50 | it's defined in main.css, and
has a specificity of 101. Okay.
| | 04:55 | But if I look at spotlight and click
that, I can see color has a strike-through,
| | 04:59 | and that tells me that color is not
being applied and if I hover it, it does not
| | 05:03 | apply to your selection because it's been
overridden by the rule #spotlight h2.
| | 05:07 | So it tells you the exact
rule that's causing you grief.
| | 05:11 | Now it's interesting.
| | 05:12 | If I hover over spotlight over here, it
tells me that this has a specificity of 10.
| | 05:16 | So I am dealing with one
selector that has a specificity of 101.
| | 05:19 | I am dealing with another
selector that has a specificity of 10.
| | 05:22 | So it's pretty clear what's happening here.
| | 05:25 | Specificity of the #spotlight h2 rule,
| | 05:28 | that descendent selector, is
overriding just a single class selector here.
| | 05:32 | It's not specific enough to
override that bottom selector.
| | 05:35 | So all we have to do now is change the
specificity of this selector, and we are in good shape.
| | 05:39 | So I am going to go back to my All CSS styles.
| | 05:41 | I am going to find that spotlight
class selector that we wrote earlier.
| | 05:44 | It's probably at the very bottom of your styles.
| | 05:46 | I am going to go ahead and click on
it once and then click one more time.
| | 05:49 | And when I do that, it highlights.
| | 05:51 | So I am free to go ahead and change
the name here in the CSS Styles panel.
| | 05:55 | I don't have to switch over the code to do that.
| | 05:57 | So I am going to click right in
front of the period, for spotlight there.
| | 06:00 | I am going to type in #spotlight
and spelling counts, so I got to be
| | 06:05 | very careful there.
| | 06:06 | So #spotlight h2 and then no space .spotlight.
| | 06:12 | So what this is, this is an
element-specific class selector.
| | 06:14 | So you're saying an h2, with a class of
spotlight found inside the spotlight region.
| | 06:20 | I am going to hit Enter or
Return. Look what happens.
| | 06:24 | I now have a red headline.
| | 06:25 | So now if I switch back over to Current, I
can see that that is much more specific now.
| | 06:30 | It's 111 as opposed to 101, and
our conflict has been resolved.
| | 06:35 | All that's left for us to do, really, is
just move this up into the proper location,
| | 06:38 | so that our styles are organized properly.
| | 06:40 | Now that was a pretty easy conflict
to resolve, I have to admit, but if you have
| | 06:44 | been writing CSS for any time at all,
you've probably come across at least one
| | 06:49 | instance of style conflicts that took a
long time to resolve. Using the Current
| | 06:53 | view in the CSS Styles panel to display
the cascade and the specificity of your
| | 06:57 | rules makes hunting down and
solving those conflicts remarkably simple.
| | Collapse this transcript |
| Organizing style properties| 00:00 | Just how much organization you add
to your styles is totally up to you.
| | 00:04 | You can keep your organization
strictly to sectioning styles off,
| | 00:08 | splitting layout, typography and
color into their own sections, or you can
| | 00:13 | get really detailed with it.
| | 00:14 | In this movie, I want to talk about
various ways you can organize your style
| | 00:18 | properties and some of the
strategies behind doing so.
| | 00:21 | We really just have a couple of
different categories of style organization that
| | 00:24 | we are going to talk about here.
| | 00:26 | One is organizing the properties
alphabetically, another one is organizing
| | 00:30 | properties by the type of property and
then finally, we have a little section
| | 00:34 | down here where we are going to
experiment a little bit with Dreamweaver's
| | 00:37 | default property organizations and try
to make some sense out of that. Okay.
| | 00:41 | So I am going to go back up in my
styles to the section where we're going to be
| | 00:45 | organizing these properties alphabetically.
| | 00:48 | So here we have all of our properties for our
rule: background, margin, padding, position.
| | 00:52 | Now, why bother to organize these at all?
| | 00:55 | Well, when you're looking through your
code later on to try to help solve the
| | 00:59 | problem, resolve the conflict, that sort
of thing, it's really helpful if you can
| | 01:03 | quickly and easily find a property.
| | 01:05 | Imagine trying to sort through this and
figure out what font you are using, what color;
| | 01:09 | it's really unorganized.
| | 01:10 | Now it probably wouldn't take you that long,
but anytime you can save is very valuable.
| | 01:16 | So what we want to do is we
want to rearrange all these
| | 01:18 | properties alphabetically.
| | 01:19 | Now I wish I could tell you
that Dreamweaver had a miraculous
| | 01:23 | alphabetize properties command. It does not.
| | 01:26 | So we are going to have to do this by hand,
but it's not that bad. Let me show you.
| | 01:30 | So what I am going to do is
highlight the property for border.
| | 01:33 | Now be very careful when you do this.
| | 01:35 | Notice that I have got the property
itself, the value and the semicolon.
| | 01:39 | Don't forget that semicolon;
| | 01:40 | it has to highlighted.
| | 01:41 | Now, of course you can cut
and paste. You can do that.
| | 01:43 | But you can also drag
properties around. Watch this.
| | 01:45 | I can just drag this right into that position.
| | 01:48 | So now border is right after that.
| | 01:49 | I can drag color right after that.
| | 01:52 | Now, why am I stacking them on a single line?
| | 01:54 | Don't I want them on separate lines? I do.
| | 01:56 | But what I am doing is I am going to go
ahead and stack them, and then just move
| | 01:58 | them down all at the same time.
| | 01:59 | It's really an interesting technique.
| | 02:01 | We'll just keep going.
| | 02:01 | Let's go ahead and do font, and
I am going to put font up there.
| | 02:05 | Also, notice one other
thing that I am doing here.
| | 02:08 | When I highlight a property, I could, if
I wanted to, highlight all the way over
| | 02:12 | here and get the tab as well. I don't want that.
| | 02:14 | I just want to the very edge of the property.
| | 02:16 | So now I've got background, border,
color, font. Those are all more or less in
| | 02:20 | the order that they need to be in.
| | 02:22 | And the remaining properties: margin,
padding, position, text-align and width,
| | 02:25 | those guys are already in
alphabetical order. So we are good.
| | 02:29 | Now watch what I am going to do here.
| | 02:29 | I am going to start with width.
| | 02:30 | I am going to highlight
all the way up, and get font.
| | 02:32 | Now again, notice how careful I am being here.
| | 02:34 | I've got the closing semicolon on width.
Not touching the semicolon on color.
| | 02:38 | Now, I can grab these and just move
them straight down until I see this little
| | 02:42 | line and look, it
returns font to me. Wow, cool!
| | 02:44 | So all I have to do is do that each time.
| | 02:47 | Just drag that whole block down
one line, and then it just sort of
| | 02:50 | pulls everybody down.
| | 02:51 | One more time, and there we go.
| | 02:53 | So now our properties are
organized alphabetically.
| | 02:56 | Now of course if you are writing your
styles by hand, you can write them in
| | 02:58 | alphabetical order and save
yourself a ton of time, if that is the
| | 03:02 | organizational technique you want to use.
| | 03:04 | Now, for a different organizational strategy,
let's go down and look at our next selector.
| | 03:08 | So same selector, same properties,
but we are going to organize them in
| | 03:11 | dramatically different ways.
| | 03:13 | Here, we're going to split
them by the type of properties.
| | 03:15 | So we are going to have one section
for layout, another section for box
| | 03:19 | model properties, another section
for presentation, like typography and
| | 03:22 | color, that sort of thing.
| | 03:23 | So right above the first property, I am
going to hit Return and create myself a
| | 03:28 | blank line, and I am just
going to type in the word "layout."
| | 03:30 | I am going to highlight that and then apply
a CSS comment to it, sort of to gray that out.
| | 03:36 | Now, I'll go down and create another
section here, and this one is going to
| | 03:40 | be called Box model.
| | 03:41 | I am going to highlight that,
and again apply a comment to it.
| | 03:45 | So you can have comments
directly inside the rules.
| | 03:48 | There is nothing wrong with that.
| | 03:50 | There is nothing to say you can't do that.
| | 03:51 | Then finally, I'll
create another little section.
| | 03:54 | You'll notice I am just kind of
going down a little bit; obviously these
| | 03:57 | properties aren't organized yet.
| | 03:58 | I am just creating these sections.
| | 03:59 | We are going to do Presentation, and
then we'll highlight Presentation and wrap
| | 04:04 | a comment around it, as well. Okay.
| | 04:06 | So now we need to move things where they go.
| | 04:08 | One move that's really
easy to make here is position:
| | 04:10 | relative needs to go up under layout.
| | 04:12 | So I am going to highlight position: relative.
| | 04:14 | Notice that I got the
semicolon as well, and move it up.
| | 04:16 | Now, background on the other hand,
background belongs in the presentation.
| | 04:20 | So I'll move it to presentation.
| | 04:22 | Box model, margin, and padding, how
lucky was that? We got all those.
| | 04:26 | But width is also part of that, and
I am going to go ahead and do width
| | 04:29 | and place it there.
| | 04:30 | And if you need to, you can always hit
Return or Enter to give yourself a line.
| | 04:34 | Now, do you see what I just did there?
| | 04:36 | I hit Return, but the
semicolon came down with me.
| | 04:38 | Actually, syntaxually, there is nothing
really wrong with that, but that is a mess.
| | 04:42 | So I am going to make sure that I
undo that, and I get that so that the
| | 04:45 | semicolon stays right there.
| | 04:47 | Now, the rest of these guys are all
presentation styles, and what I am going
| | 04:51 | to do now is I am going to alphabetize
them as well, because I'm just that organized.
| | 04:56 | Anybody that knows me knows that
I am really not that organized.
| | 04:59 | But I am just going to grab these guys
and start moving them around, and I am
| | 05:03 | going to put color where it goes,
text-align where it goes. There we go.
| | 05:07 | So these guys are now in
alphabetical order as well.
| | 05:09 | So now we have a different structural
model for our properties, and this is
| | 05:14 | something that if I was going to use
this, I would do every single selector,
| | 05:19 | every single CSS rule to get
the same thing in the same order;
| | 05:22 | layout first, box model second, presentation.
| | 05:24 | That way, if I'm going and checking out
the margins on a property, for example,
| | 05:28 | I know exactly where to find those.
| | 05:30 | If I'm looking to see if there's been
any kind of an offset or absolute relative
| | 05:34 | positioning, again, I know
exactly where to find that.
| | 05:37 | So this is another way to organize it,
and again it's totally up to you to decide
| | 05:40 | how you want to do that.
| | 05:41 | Now, I mentioned that we would do one
more, and that's really just to see how
| | 05:44 | Dreamweaver does this.
| | 05:45 | So I am going to go over to my CSS
Styles panel, and since we've been making some
| | 05:49 | manual changes, we're going to have to
have a Refresh there, and what I want to
| | 05:52 | do now is create a brand-new CSS rule.
| | 05:54 | I am just going to do a tag selector,
and we're just going to do h1, although
| | 05:58 | really any selector would
work for what we're doing here.
| | 06:00 | So I am going to do a tag selector
h1, and I am going to define it in
| | 06:03 | this document only.
| | 06:04 | So this is kind of interesting.
| | 06:05 | While you're working in the CSS file, you
are free to still use the same dialog box.
| | 06:09 | That's kind of nice.
I am going to go ahead and click OK.
| | 06:11 | Now I am going to go in a very specific
order here, because I want to prove a point.
| | 06:15 | The first thing I am going to do is
go to my Font-size and Font-size, I am
| | 06:17 | going to type in 2em.
| | 06:19 | So that's the first property.
| | 06:20 | Remember, the number one
property we did was Font-size.
| | 06:23 | Then I'm going to go to my Block category.
| | 06:25 | So notice that I am going to be
jumping around from categories, so just think
| | 06:28 | about the order that we are doing these in.
| | 06:29 | I am going to go to Block category.
| | 06:31 | In the Block category, I am going to choose
Text-align, and I am going to choose Center.
| | 06:34 | Here we go. I am going to click on the Box category.
| | 06:37 | In the Box category, I am going to
deselect Same for all for margin and give it
| | 06:40 | a Bottom margin of 2em, for ems.
| | 06:42 | Notice there's no spacing there.
| | 06:43 | If you hit Tab, it will go
ahead and populate that out.
| | 06:45 | I am going to go back to Type.
| | 06:47 | So again, we went down the list.
Now we are going back to Type.
| | 06:50 | For Color, I am going to type in #333,
and then I am going to go to Border
| | 06:54 | next, deselect Same for all, and I am going
to do a Bottom border, solid, 1 pixel, #333.
| | 07:03 | Let's just do one more rule.
| | 07:04 | Go back to our Box model property.
| | 07:05 | So you can see we are
jumping all over the place.
| | 07:07 | We are not doing these in order at all.
| | 07:09 | I'll deselect Padding, Same for all,
and for Bottom padding we'll do .5em.
| | 07:12 | I am going to go ahead and click OK.
| | 07:15 | Now, think about the order that we did these in.
| | 07:16 | Font-size was first. Text-align was
second. Margin-bottom was third. Color was
| | 07:21 | fourth. Border-bottom was
fifth. Padding-bottom was sixth.
| | 07:24 | Now, if we look at the rule that's
created, font-size was first, oh, but wait!
| | 07:29 | Color wasn't next; text-align was
next. And then after text-align,
| | 07:32 | margin-bottom was next, after that
border-bottom, and that's our border, and
| | 07:36 | then I did padding.
| | 07:37 | So obviously, Dreamweaver didn't use
the order that those properties were done
| | 07:40 | in to determine how to
organize them in the selector.
| | 07:43 | Now, a lot of people infer from that
that is random, but it's not random.
| | 07:47 | Take a look over here at the CSS Styles panel -
| | 07:49 | I am going to go ahead and close the
Files panel by double-clicking the tab -
| | 07:52 | and we can see if we highlight the h1
rule in All view here, we get summary
| | 07:57 | of all the properties.
| | 07:58 | But there are three ways that you can view this.
| | 08:00 | One is the way we are looking at
right now, just those properties;
| | 08:03 | another is a List view, and then the
first icon right down here in the lower
| | 08:06 | left-hand corner of the CSS
Styles panel is Show category view.
| | 08:10 | Take a look at categories: Font,
Background, Block, Border, Box, List.
| | 08:15 | So Font, these are all
things that we can do font with.
| | 08:18 | Block, right there, which would come next,
since we don't have any our background,
| | 08:22 | Box model which is right here, and then Border.
| | 08:24 | Now, I can't figure this out for the
life of me, but for some reason, it
| | 08:28 | switches Border and Box.
| | 08:29 | I have no idea why, but it does.
| | 08:31 | So what Dreamweaver is doing is organizing
these properties in their own categories.
| | 08:36 | So you could almost imagine, above
this, a little comment that says Font
| | 08:39 | properties and then another comment
underneath it that would say background,
| | 08:42 | another comment that would say Block,
and we'd organize them that way.
| | 08:45 | So there is structure there;
it's just not readily apparent.
| | 08:48 | So aside from Dreamweaver's default way
of organizing properties, we've seen two
| | 08:52 | popular strategies for organizing our
style properties, either alphabetically or
| | 08:57 | through categories of properties.
| | 08:59 | So aside from Dreamweaver's default
organizational strategies, we've seen two
| | 09:03 | popular strategies for organizing
style properties: either alphabetically or
| | 09:07 | through the categories of
the properties themselves.
| | 09:10 | Now, it's a personal decision, honestly,
as to whether or not your styles need
| | 09:14 | this kind of organizational structure.
| | 09:16 | Now, I usually organize my
properties alphabetically, and I find that
| | 09:19 | it saves me time when scanning
code for a specific property or value.
| | 09:24 | In the end, however, it's totally up to
you to decide if you need to take the
| | 09:27 | time required, because it does take
extra time, to organize your style properties
| | 09:31 | all the way throughout your site.
| | Collapse this transcript |
| Writing a CSS reset| 00:00 | One of the most common problems that
designers face when writing their styles
| | 00:04 | is failing to account for the default
margins and padding inherent in most browsers.
| | 00:09 | Every browser has a default style
sheet that assigns properties to common
| | 00:12 | elements like paragraphs and headings,
and every browser's style sheet is just a
| | 00:17 | little bit different from the others.
| | 00:19 | It can be extremely frustrating
| | 00:21 | to try to track down why you have
that little bit of extra space between
| | 00:24 | paragraphs in your styles, when in
fact, the problem was with the default
| | 00:28 | styling from a browser, not your style sheet.
| | 00:31 | Now, to deal with this, and to make it
a little bit easier to have pages look
| | 00:34 | consistent across multiple browsers,
many designers use a CSS Reset.
| | 00:40 | A CSS Reset is typically a grouped
selector that simply resets the values
| | 00:45 | like padding and margin to 0, stripping off
all the default values found in most browsers.
| | 00:50 | So let's go ahead and build one.
| | 00:51 | Again, this is a page
with no styling whatsoever.
| | 00:54 | You can see the main.css is empty,
other than all the headers and the
| | 00:58 | sections that we have here.
| | 01:00 | So if I preview this page in my
browser currently, I still see styling.
| | 01:03 | So even though my CSS file doesn't
have a single bit of styling in it, my
| | 01:08 | headings are of certain size.
| | 01:09 | They are of certain color, there is a
certain amount of space between them,
| | 01:12 | and the paragraphs.
| | 01:13 | There is a certain amount of space
between all my lists and the list
| | 01:16 | items, things like that.
| | 01:18 | So we've got a lot of styling going
on here, even though we had absolutely
| | 01:20 | nothing to do with it.
| | 01:21 | So all these properties are currently
being applied from, in this case Firefox
| | 01:26 | default margins and paddings, and styling.
| | 01:29 | If you have another browser open, you will
be seeing that browser's default styling.
| | 01:32 | So I am going to go ahead and close
this, and we're going to go back and
| | 01:35 | write our selector.
| | 01:36 | Now, sometimes it's a little bit easier
just to write certain selectors by hand,
| | 01:39 | and this is one of those.
| | 01:40 | So I'm going to select my
main.css and switch to Code view.
| | 01:45 | What I want to do is I want to scroll
down, and this is another reason why we
| | 01:48 | are doing it by hand,
| | 01:49 | I want to find this limited-scale reset
content feature because that is where this goes.
| | 01:53 | So I am going to place my cursor just
inside that area, and I am just going to
| | 01:58 | start by using some of the elements
that I know I am going to be using in my
| | 02:01 | page and some of the elements that I
know I am going to be using on my page
| | 02:04 | that I am going to want to style myself.
| | 02:07 | So I am going to type in h1, h2, h3, h4, h5, h6.
| | 02:16 | Now, by the way, I am going to
pause here for just a minute.
| | 02:18 | Most of you probably already know this,
but if you don't, the comma is used to
| | 02:22 | group selectors together.
| | 02:24 | So essentially, we're saying apply
the same styling to the h1, the h2, the
| | 02:28 | h3, so forth and so on.
| | 02:30 | They don't all have to be element selectors.
| | 02:32 | You could put descendent
selectors, class selectors,
| | 02:34 | you can group any selector types together.
| | 02:36 | It does not matter.
| | 02:37 | So right after h6 I am going to hit comma again.
| | 02:39 | I'll do p, address, blockquote, div, ul, li.
| | 02:49 | Now, you will note that I am
not using a lot of elements here.
| | 02:52 | I know you're probably tired of typing,
but trust me there is a lot more that
| | 02:56 | you can strip this out of.
| | 02:56 | These are just elements that I know I
am going to be using and I know I am
| | 03:00 | going to style separately in my style sheet.
| | 03:03 | So I am going to go ahead and open up a
curly brace. Hit Return or Enter to get
| | 03:06 | down the next line, and I am
going to type in margin: 0;
| | 03:10 | padding: 0; and note that I am using code
hinting and code completion to help really
| | 03:15 | speed that process up.
| | 03:16 | So when I am done typing
in margin: 0 and padding: 0,
| | 03:20 | I'll just close my curly brace,
and there is my limited-scale reset.
| | 03:23 | Now, you'll note here that I'm only
doing the margin and the padding. I am not
| | 03:27 | doing any typography.
| | 03:29 | I am not doing any line height.
| | 03:30 | I am not doing any color resets here.
| | 03:32 | Some resets are extremely detailed.
| | 03:35 | They will tackle almost every single
element you could possibly use, and they
| | 03:38 | will reset every single property
that you probably set for that.
| | 03:42 | I am not a fan of that.
| | 03:43 | The reason I'm not a fan of that is
because you now have to remember to go back
| | 03:47 | in and change all the stuff.
| | 03:47 | Well, let me show you what I mean.
| | 03:49 | Do a Save All, and preview that in your browser.
| | 03:52 | You see how all the spacing went
away? So the font size is still there
| | 03:58 | obviously; the color is
still there, that sort of thing,
| | 03:59 | but any type of margins, padding, spacing, gone.
| | 04:03 | If I want to make sure that my
spacing has done correctly, now I have to
| | 04:07 | write the styles myself.
| | 04:08 | Well, that's okay because
that's what I wanted to do.
| | 04:10 | But I want to make sure that if I have
some type of esoteric tag that I almost
| | 04:14 | never use but somehow makes it into
my site, I don't want to zero that out,
| | 04:18 | because the answers are, I won't
remember that I zeroed it out, and I'll be left
| | 04:22 | with an element that I am like, hmm,
why isn't that styling incorrectly?
| | 04:24 | So it's a personal decision as to which
elements you want to involve in your reset.
| | 04:30 | It's also a personal decision as to
which properties you want to reset.
| | 04:33 | Do you want to reset font-size? Do you
want to reset color? Do you want to reset
| | 04:37 | margins and padding?
| | 04:38 | Whatever default value you want to
reset, you can go ahead and pass that
| | 04:41 | into your CSS Reset.
| | 04:42 | Not every CSS Reset is just one
selector like ours is, either. Some of them
| | 04:46 | are multiple selectors, because they're
stripping off properties that not all tags share.
| | 04:50 | So your CSS Reset might be a lot more
complex based on what you are trying to do with it.
| | 04:54 | So as I mentioned, the downside to
stripping all of those default margins and
| | 04:57 | padding is that now I am going to have to
remember to write those styles, and put it back.
| | 05:02 | So any elements that I know I am
going to style of the course of my style
| | 05:04 | sheets, I'll go ahead and reset those.
| | 05:06 | Now other elements, I will wait and
write specific values for them, if necessary.
| | 05:09 | But the browser default value will
still be available if the element is used in
| | 05:13 | the page without me realizing it.
| | 05:15 | Like many things in CSS, the use
of the Reset usually comes down to
| | 05:18 | personal preference.
| | Collapse this transcript |
| Writing global classes| 00:00 | For the most part, your style sheets
will consist of specific styles targeting
| | 00:04 | elements on the page;
| | 00:05 | However, it's extremely helpful to have
a global serve classes that can assist
| | 00:09 | when needing to do common tasks, such as
floating elements, clearing floats and
| | 00:14 | basic elements styling.
| | 00:15 | These classes can then be used to
add styling without needing to write
| | 00:18 | extraneous markup all the
way throughout your styles.
| | 00:21 | So here I have the main.css, and I want
to go down to my global classes sections.
| | 00:27 | I am just going to scroll down through my
sections until I find this one, about line 129.
| | 00:32 | Now, these are going to be what I
consider to be utility styles, meaning I'm not
| | 00:36 | going to rely on them to do this
every single time, but if I'm working and
| | 00:40 | maintaining my site later on, and all of
sudden, I am like, hey, I need to float
| | 00:43 | this element to left, or float it to
right, and I don't want to change its parent
| | 00:47 | selector, then I'm going
to apply the class, alright.
| | 00:49 | So the first class I want to do is .floatRight.
| | 00:53 | Notice that's all one word, and the dot is in
the front of it because this is a class selector.
| | 00:57 | I'm going to go ahead and open up my curly brace
and come down and choose floatRight, just like that.
| | 01:04 | So now anytime I need to float an
image, or some text, or an element to the
| | 01:09 | right, and it's not part of my overall
stylessheet, I can simply select it and
| | 01:13 | apply this class to it.
| | 01:14 | So that's why I kind of think of it as
a little utility. I can just go ahead,
| | 01:18 | anytime I need it, go ahead
apply it. Let's keep going.
| | 01:20 | Let's do a .floatLeft, again notice
that I'm preceding that little period,
| | 01:25 | and for that one I want to choose float,
and I want to choose left of the value.
| | 01:29 | There we go. Let's keep going.
| | 01:32 | I'm also going to do a .clearRight, and
its property is indeed going to be clear right.
| | 01:39 | Now this is actually a more common
need, frankly, than the classes above it.
| | 01:44 | Anytime we do in a float-based layout,
a lot of times you have an element that
| | 01:48 | you really don't want to wrap around
another element, or an element that you
| | 01:51 | don't want to float above to affect.
| | 01:52 | Well, if that's the case, then I
can just go ahead and apply this, and
| | 01:55 | again, it's going to eliminate the need for me to
have this property as part of the parent class.
| | 01:58 | Let's go ahead and do .clearLeft, all
one word, while we're at it, and indeed do clear
| | 02:05 | left on this one as well as a property.
| | 02:07 | So you will notice that these are a
single property and very descriptive as to
| | 02:11 | what they do: clearRight, clearLeft
and in case of the next one .clearBoth.
| | 02:15 | Now, did you see how I left that period off?
It's so easy to do when you are hand-coding that.
| | 02:18 | So always get in the habit of putting
those on there. Sometimes, like me, you'll
| | 02:22 | just kind of forget them. clearBoth,
| | 02:25 | and now anything that we don't
want any floating, left or right, we can
| | 02:29 | use that class to apply.
| | 02:30 | We are going to do one more, and here
I'm going to go ahead and do .quote and
| | 02:38 | under that, I'm going to do font style, so
font-style, and we are going to do italic.
| | 02:44 | So those are our global classes, very
simple, very easy: floatLeft, floatRight,
| | 02:48 | clearRight, clearLeft, clearBoth,
and the just a quote so when we want to
| | 02:52 | italicize some text and we don't need
to use the emphasis tag, then we will use
| | 02:56 | a Span tag and apply this class to it.
| | 02:58 | Now, by no means is that all of the
global classes that you can write.
| | 03:02 | I have seen css styles out there
where they have hundreds and hundreds of
| | 03:06 | lines of global classes that
they can apply anytime they need it.
| | 03:10 | You have to be very, very careful about that.
| | 03:12 | Global classes can really speed up
your site development, but you can also
| | 03:16 | become too dependent upon them.
| | 03:18 | Overusing classes is one of the most
common mistakes made when writing css,
| | 03:22 | and it results in a lot of unnecessary code
and harder styles to edit and maintain later on.
| | 03:27 | Imagine that if you want all of yours
headings to be a certain color, instead of
| | 03:30 | just writing a heading
selector, you apply that class.
| | 03:33 | Now, you have got to go in and if you
delete the class, really make them, just
| | 03:37 | really large edits to your
styles. Be careful about that.
| | 03:40 | My advice is to add global classes that
won't conflict with any specific rules,
| | 03:45 | because that's the other thing.
| | 03:46 | You want to avoid style conflicts, and
you can turn to them and use them when
| | 03:50 | you need that particular styling
without having to affect or write a brand-new
| | 03:55 | parent style for it.
| | Collapse this transcript |
| Creating a style guide| 00:00 | Depending upon what type of site you
are building, you may want to consider
| | 00:04 | building a style guide for your site.
| | 00:06 | A style guide can assist anyone
building content for a site by displaying the
| | 00:10 | visual formatting for your site,
explaining how certain styles are executed and
| | 00:15 | even pointing to online resources to
explain how specific techniques work.
| | 00:19 | Style guides come in many shape and
many sizes, and can be customized for your
| | 00:24 | site's specific needs. And you can see
there is a lot of stuff already on the
| | 00:30 | page, and we're going to take a look
at all the stuff in just a moment and
| | 00:33 | explain kind of how this is structured.
| | 00:35 | But we need to finish our style guide out, so
a lot has been done, but we need to finish it.
| | 00:38 | So right here the headline says,
General Page Layout. I'm going to hit Enter or
| | 00:42 | Return to create a blank line above that,
and that's where we are going to enter
| | 00:46 | in our content on this page.
| | 00:48 | So the first thing I'm going to do is
I'm going to type in Heading 1, and then I
| | 00:53 | am going to use my Properties Inspector,
make sure I'm on the HTML tab, and I am
| | 00:57 | going to change the Format
from Heading 3 to Heading 1.
| | 01:00 | I'll hit Return or Enter to go down next line.
| | 01:03 | I'm going to type in: Used once
per page to identify page content.
| | 01:11 | So you can see we are showing
somebody what a Heading 1 looks like, and
| | 01:14 | then we are telling it how Heading 1
should be used on the pages within our
| | 01:18 | Explore California site.
| | 01:20 | I'm going to go down to the next line,
and I'm going to type in Heading 2.
| | 01:23 | I will format that as a Heading 2,
again it changes, and just below that I
| | 01:28 | am going to type in a paragraph:
Used for all top level headings not
| | 01:36 | identifying page content,
| | 01:40 | again, setting some ground rules for
when this should be used. Hit Return to go
| | 01:44 | down to the next line, and
I'm going to type in a Heading 3.
| | 01:47 | Once again, remember I can grab my
pulldown menu here for Formatting and change
| | 01:51 | that to a Heading 3, and below that, I am
going to type in: Used for subheadings
| | 01:58 | and any headings not
categorized as a "main heading".
| | 02:06 | And then finally I'm going to go to the
next line, and I'm going to type in, Not used:
| | 02:12 | and here we are going to follow our own advice.
| | 02:14 | So if I have a subheading and any
heading not categorized as a main heading,
| | 02:18 | which I guess this is not a main heading,
| | 02:19 | that would be a Heading 3.
| | 02:20 | So I am following my own advice
in using the structure of the site.
| | 02:24 | Go down to the next line, and I am
going to type in: Headings 4-6 are not used
| | 02:31 | in the Explore California Web site.
| | 02:36 | So this style guide is not just
showing you how something should look.
| | 02:39 | It's telling you about when you
should use something, how you should use those
| | 02:42 | elements, that sort of thing.
| | 02:43 | So we've just added some headings to the
page, and letting people know how those
| | 02:48 | are supposed to be used and how
they are supposed to look like.
| | 02:50 | You will notice that we also have an
identifier that this is the style guide.
| | 02:53 | This is how our breadcrumb looks, and
if we scroll down we can see that we have
| | 02:58 | some information about the General Page Layout.
| | 03:00 | This is telling it how pages are
typically formatted, what type of accent
| | 03:04 | images should be used, how our
breadcrumb are used, how links should be styled
| | 03:09 | and used, and things like that.
| | 03:10 | We also have further explanations about
Navigation, Sidebar & Extras, Call Outs
| | 03:15 | within our main content, table styling,
which we turn to Live View we get to see
| | 03:19 | that's a little bit clearly,
| | 03:22 | how Lists should be styled: ordered,
unordered, definition list. And we have
| | 03:26 | some information about validation:
how we should validate our code,
| | 03:29 | where our hacks should be placed so that
proper validation occurs, that sort of thing.
| | 03:33 | So there is a lot of information on this
page; however, we've left a lot of stuff off.
| | 03:37 | There is no instructions on how to
style forms, to show how those are done,
| | 03:41 | a comprehensive navigation guide to
tell exactly how the navigation should be
| | 03:44 | done and show it, and things like that.
| | 03:46 | So obviously, some style guides would
be of single page; other style guides
| | 03:50 | are going to be an entire section of the
site, sort of explaining how the site works.
| | 03:54 | Now I want to highlight on my
style guide as an example of this.
| | 03:57 | Here I have the New York Public
Library's online style guide, and you can
| | 04:00 | find this yourself at legacy.www.nypl.org/
styleguide/, so this is their old style guide.
| | 04:07 | They left it up here as a reminder
for people working on their Web site.
| | 04:11 | Now, the benefit to this particular
style guide was that not only can we sort
| | 04:15 | of see how the styling works, but
you will notice they are giving clear
| | 04:17 | guidelines as to how you should use
things, which document types they are going
| | 04:22 | to be using, and the benefits of
working through them, how to make sure your
| | 04:25 | XHTML valid, that sort of thing. We have a CSS:
| | 04:28 | Style Sheet & Tips.
| | 04:30 | They have guidelines on linking to
Style Sheets, Style Sheets that you can use
| | 04:35 | from the Public Library and CSS Validation.
| | 04:37 | So this was really made because there
are lot of developers and freelancers
| | 04:41 | that are all not connected at all doing Web
sites and pages for the New York Public Library.
| | 04:47 | Well they all need to look the same.
| | 04:48 | So this style guide not only gives
them access to the existing style sheets,
| | 04:52 | which they can use for their projects,
but it shows them how the documents
| | 04:55 | should be formatted in terms of this
XHTML, the best practices that they should
| | 05:00 | follow, some places online where they
can go and learn more about validation.
| | 05:03 | It's a very comprehensive style guide,
and it's something that, as a designer, if
| | 05:07 | you are going to work on a
project for them, this is godsend to have.
| | 05:09 | You can come right here and figure
out exactly what you need to do with the
| | 05:13 | content you're creating.
| | 05:14 | So that's really cool.
| | 05:15 | Now not every site is
going to need a style guide -
| | 05:18 | the New York Public Library is huge;
however, their flexibility in providing the
| | 05:22 | exact information needed, makes them
extremely useful and versatile, regardless
| | 05:27 | of the type of site that you are
building. Now, when working on sites that will
| | 05:30 | use a development team, or any sort
of outside vendors, a style guide can
| | 05:34 | provide crucial information that
ensures content is designed and developed
| | 05:38 | according to your standards.
| | 05:40 | Now if you are using a smaller site,
style guides can serve as a single-page
| | 05:44 | overview of your site design, which is
nice, and that makes actually a good way
| | 05:48 | of communicating the design principles
you are working with to your client, as
| | 05:52 | they can just go online
and look at the style guide.
| | 05:54 | Now regardless of how you use them,
style guides give you a living, breathing
| | 05:58 | document that can change as your
site changes, and an effective way of
| | 06:02 | communicating your design
and development strategy.
| | Collapse this transcript |
|
|
3. Reusing StylesPreparing custom starter pages| 00:00 | Once you have gone through the process
of creating your layout and presentation
| | 00:04 | styles, chances are that you won't want
to do it again to achieve the exact same,
| | 00:08 | or even similar, results.
| | 00:10 | As such, finding ways of reusing your
styles, whether it's for other projects
| | 00:14 | for the same client or just a way of
reusing the same layout with a different
| | 00:17 | design, can save you a
considerable amount of time.
| | 00:20 | In this chapter, we are going to focus
on techniques in Dreamweaver that allow
| | 00:24 | you to reuse your CSS and
your code for future projects.
| | 00:28 | We will start by taking a look at how
you can create your own custom starter
| | 00:31 | pages as a way of helping
you jump start future projects.
| | 00:35 | Let's take just a moment to review what
it is that we are going to be building.
| | 00:38 | In Dreamweaver, if you go File and
choose New, you can go to Blank Page HTML,
| | 00:43 | and you have some Preset
Layouts that you can choose from.
| | 00:47 | Notice there are 1 column versions,
2 column versions, 3 column versions,
| | 00:51 | that sort of thing.
| | 00:52 | And these are very solid layouts, but
from time to time you might create a
| | 00:55 | layout that you want to reuse over and
over again for different projects, and
| | 00:59 | you might want to go through the
same process, stripping out all the
| | 01:02 | presentational markup, just having
Layout Only styles, or being able to rapidly
| | 01:06 | build pages based off a certain point.
| | 01:09 | This is a really good way of doing this.
| | 01:10 | So Dreamweaver also allows us to
create our own custom starter pages.
| | 01:14 | This requires a little bit of know-
how in understanding which files within
| | 01:18 | Dreamweaver you have to update.
| | 01:19 | So I am going to hit Cancel and just take a
moment to take a brief tour of our starter page.
| | 01:23 | So what we have done here -
| | 01:25 | now, a good bit of this has already
been done - but the strategy and the theory
| | 01:27 | behind what we are doing here is we are
trying to make everything as neutral as
| | 01:30 | possible, and by that I mean
not related to Explore California.
| | 01:33 | We want a layout that we
could use really for anything.
| | 01:36 | So what I have done here is
stripped out a lot of the Explore
| | 01:40 | California-specific styling.
| | 01:41 | We are going to talk more
about that in just a moment.
| | 01:43 | But we have also given some instructions.
| | 01:45 | So we just opened up one of the
regular Explore California pages, stripped
| | 01:48 | things out, started changing things
around a little bit, so that we could get a
| | 01:51 | more neutral layout.
| | 01:52 | Notice, for example, that we have
some instructions in the body copy on how
| | 01:57 | to do certain things.
| | 01:58 | We have instructions for the
way the header should be treated.
| | 02:01 | We have instructions for the navigation,
instruction for breadcrumbs, footer.
| | 02:06 | So these are all things that we are
basically just passing along to either
| | 02:09 | ourselves, or whoever might be creating
pages based off of starter page in the future.
| | 02:13 | Now, notice also that the
Footer has been changed.
| | 02:16 | It has been neutralized a little bit.
| | 02:18 | We don't have that sort of Explore
California-specific graphic in the background.
| | 02:22 | We have sort of descriptive items
here for where certain content goes.
| | 02:26 | You will also notice that the
navigation has been changed.
| | 02:28 | Instead of those Explore California-
specific navigation links, we just have
| | 02:32 | the sample links there.
| | 02:33 | And if you want to delve in that a
little bit more deeply, if I switch over to
| | 02:36 | the main.css and scroll down to about
line say 320 or so, you are going to find
| | 02:42 | these base navigation selectors, and
they have been modified and commented.
| | 02:47 | So we are telling folks if you are
going to use background images for your
| | 02:50 | navigation instead of text, uncomment that out.
| | 02:53 | We also have comments explaining how to use
the background images, that sort of thing.
| | 02:57 | So the code has been modified and commented
to make things a little bit easier for you.
| | 03:02 | It's a great recommendation.
| | 03:03 | If you are going to work with starter
pages, you want to add more comments to
| | 03:06 | your code rather than less, so that you
kind of leave yourself or other people's
| | 03:10 | instructions on how to
build pages with that. Okay.
| | 03:13 | Now, that being said, a lot has been
done, but we still have more left to do.
| | 03:17 | You will notice, for example,
that the Header is still the Explore
| | 03:20 | California graphic.
| | 03:21 | This image probably will not be
available to us when we create starter pages.
| | 03:25 | Starter pages consist of HTML and CSS.
| | 03:28 | So links to images are going
to show up as broken links.
| | 03:30 | So we certainly don't need that image
there, but we need to be able to represent
| | 03:34 | that image that's supposed to go there.
| | 03:35 | So we are going to use a
placeholder image for that.
| | 03:38 | And even though we can't really see it,
maybe I am going to collapse my panels
| | 03:41 | down, so we can see this a little bit,
| | 03:43 | we still have this
background graphic in the background.
| | 03:44 | It's that sort of gradient that's
going down there, and that's really sort of
| | 03:48 | Explore California-specific.
| | 03:50 | So those three things we want
to go ahead and deal with. Okay.
| | 03:52 | Let's first turn our attention to this
accent image that we have on the page.
| | 03:56 | I am going to go ahead and select that.
| | 03:57 | Just click on it one time to select it.
| | 03:59 | And I am going to Delete it, so
Backspace or the Delete key now.
| | 04:02 | I am going to be very careful about doing this.
| | 04:03 | When I hit Delete, I am not
going to move my cursor at all.
| | 04:06 | I am going to leave my
cursor at exactly where it is.
| | 04:08 | You can see it's blinking right here.
| | 04:10 | Then I am going to go up to my Common Objects.
| | 04:12 | I am going to go to my Insert Images,
and grab that pulldown menu, and I am
| | 04:16 | going to insert an Image Placeholder.
| | 04:18 | An Image Placeholder is a neat
little Dreamweaver device.
| | 04:20 | It's going to give us a square or
rectangle the size of the image that we need
| | 04:24 | in that place, and we can name
it, and even give it alt text.
| | 04:26 | So I am going to say Image Placeholder.
| | 04:27 | I am going to go ahead and
name the one, accent_image.
| | 04:32 | It has to be all one word.
| | 04:34 | I just like being descriptive with it.
| | 04:35 | I am going to go ahead and give it a
Width of 350 pixels, and I am going to
| | 04:39 | give it a Height of 315.
| | 04:41 | I could give it a Color as well.
| | 04:42 | I think I will just stick with sort
of a neutral gray color, like this sort
| | 04:45 | of light gray there.
| | 04:46 | And then I can give it Alt text if I
needed to, but I don't really need to.
| | 04:50 | So I am going to go ahead and click OK, and
now our placeholder image shows up on the page.
| | 04:54 | Well, it's the exact size that our
image is going to be, but we want it to
| | 04:58 | behave like that image as well.
| | 04:59 | So I am going to go ahead and select
this placeholder image, and the cool
| | 05:02 | thing about it is I can do anything to this
placeholder image that I could do to a normal image.
| | 05:06 | I could Add a link to it.
| | 05:08 | I could All Tag it.
| | 05:09 | I could do all sorts of stuff.
| | 05:10 | What's really neat is I also have
this little Fireworks Create button.
| | 05:13 | So when I am ready to go ahead and
build this graphic, I could double-click it,
| | 05:16 | or hit the Create button and go out to
Fireworks or Photoshop, build the image,
| | 05:19 | and have it brought back in.
| | 05:20 | I am going to select this class.
| | 05:22 | Grab the pulldown menu, and I
am going to choose articleImage.
| | 05:24 | You will notice that it goes ahead and
floats, just like the image was doing
| | 05:28 | before that. Text wraps around it.
| | 05:30 | And the only thing that's really kind
of weird about doing this is notice the
| | 05:33 | padding actually displays as a gray background.
| | 05:36 | So you might be tempted to think that the
image is really close to the text, but it's not.
| | 05:40 | Make sure you select it, and double-check
that padding to make sure that that is okay.
| | 05:45 | So that takes care of the actual image
tag that was on the page, but it doesn't
| | 05:49 | help us with these
background images that we still have.
| | 05:51 | So we need to identify the rule that's
driving these, and go ahead and make that
| | 05:55 | rule a little bit more neutral
in regards to any type of image.
| | 05:58 | So we will replace the image with color.
| | 06:01 | So what I am going to do now is
just click inside Explore California.
| | 06:04 | This way I don't have to
hunt down where that rule is.
| | 06:06 | I am going to go ahead and hold down
the Alt key and click on that image.
| | 06:09 | And on the Mac, you would hold down the
Command+Option key to bring up the Code Navigator.
| | 06:12 | Now, when I bring up the Code Navigator,
I notice something really weird here.
| | 06:16 | I have starter_page, and I have main.css,
and they have the exact same cascade.
| | 06:21 | What is going on here?
| | 06:23 | Well, this is something very
important about starter pages.
| | 06:26 | The CSS for a starter page must be
located in the head of the document.
| | 06:30 | So it must be using embedded styles only.
| | 06:32 | Well, all of our styles were moved to
an embedded style, but it's still linked
| | 06:36 | to the external style sheet, as well.
| | 06:38 | So during the process of creating a
starter page, the CSS styles were moved to an
| | 06:42 | embedded style, but the link to the
external style sheet wasn't broken.
| | 06:45 | As you can see, this could
cause a lot of confusion.
| | 06:47 | What if I edit this instead of this?
| | 06:49 | That would be a problem.
| | 06:50 | So before we do any of this, what we
are going to do is go right over here to
| | 06:54 | the CSS Styles panel, highlight the
main.css, and then just click the Trashcan icon.
| | 06:59 | Now remember, don't have an individual
rule selected, have the actual CSS selected.
| | 07:04 | Click the Trashcan icon one time.
| | 07:06 | Clicking it repeatedly will result
in other things being taken away, and
| | 07:10 | you don't need that.
| | 07:11 | We also don't need the link to the print
style sheet, so we are going to Delete that, too.
| | 07:14 | Don't have any links to external style
sheets in your starter pages, because
| | 07:18 | it's going to be document-relative,
and you might not use the same naming
| | 07:21 | conventions or even locations for
styles in the next project. All right.
| | 07:25 | So now all we have are embedded styles.
| | 07:27 | That's going to make life a little easier.
| | 07:28 | Let's come back to our header graphic here.
| | 07:30 | Again, I am going to Alt+click this or
Command+Option click, depending upon my platform.
| | 07:35 | And we have two header selectors.
| | 07:37 | The first one gives positioning,
height, that sort of thing.
| | 07:40 | The second one is giving the background image.
| | 07:42 | That's the one we need to edit.
| | 07:44 | So I am going to go ahead and click on
that, and that's going to give me the
| | 07:47 | sort of Split Screen View.
| | 07:48 | I am going widen that up just a little bit.
| | 07:50 | And sometimes when you widen it, you have to
scroll back up a little bit, but that's okay.
| | 07:54 | So about line 238, I see
the #header background URL.
| | 07:57 | I am going to change that.
| | 07:58 | I am going to highlight the entire
property, which is the link to the external
| | 08:02 | graphic, and I am just going to go
ahead and change that to a color.
| | 08:06 | So I am going to type in #193742, and
now if I click back in Design View, the
| | 08:14 | graphic goes away, and the color just shows up.
| | 08:17 | So that's replacing the graphic with
sort of a relatively neutral color, that
| | 08:21 | dark blue color, and when I create a
brand-new page off of this, I will know to
| | 08:24 | go in there and edit that and
switch that out with the graphic.
| | 08:28 | Now, how would I know that?
| | 08:29 | Well, I would know it because I
created this page, but somebody else
| | 08:31 | wouldn't, would they?
| | 08:32 | So one of the things that you can do
for people, if you really feel like being
| | 08:35 | nice to them, and I am going to use the
Code Navigator to navigate back up into
| | 08:38 | my styles, is it's not a bad idea to
go ahead and add a comment to this.
| | 08:42 | And you can comment things out
any number of different ways.
| | 08:45 | I like commenting them out like
this, right beside the property.
| | 08:47 | So I can just hit space and type in:
replace color with background image.
| | 08:57 | And it wouldn't hurt to let somebody know
what size that image needed to be, as well.
| | 09:01 | So I can go up here in the header and find
that the height is 237px. The width is 192.
| | 09:08 | So we are 192 x 237.
| | 09:11 | I found my other header, and I am going
to say 237px x 192px, and I am going to
| | 09:20 | highlight that, wrap it with a CSS
comment, and now anybody building a page off
| | 09:25 | of this will at least have some
instructions on how to deal with that.
| | 09:27 | Now finally, we need to do the body tag.
| | 09:29 | I am going to move up to the body tag.
| | 09:31 | You will notice that the body tag is
also using a background color and an image.
| | 09:35 | I think color is a little too
specific for this site, so I am going to go
| | 09:38 | ahead and highlight that.
| | 09:39 | Make it a little bit more neutral by
doing #333, which is a gray, almost black,
| | 09:44 | and as soon as I do that, if I switch
back to Design View, I can really see that
| | 09:47 | all the way around the edge,
just that sort of dark color.
| | 09:50 | So I am going to go ahead and save that,
preview that in my browser, and now I
| | 09:54 | can see there is really no Explore
California-specific stuff anywhere. Neutral colors.
| | 09:58 | We have our Image Placeholder going on.
| | 10:01 | We have sort of the Header area, right here,
| | 10:03 | that doesn't have an image in it.
| | 10:04 | This page is ready to go.
| | 10:05 | So the last thing that we need to do to
this page in order to make it a starter
| | 10:08 | page is to give it a descriptive name.
| | 10:10 | So I am going to go to File and choose
Save As, and save in the 03_01 folder,
| | 10:15 | and I am going to save it as
2ColExplore.htm, so 2ColExplore.
| | 10:26 | So this would tell
somebody it's a 2 column layout.
| | 10:27 | It's based off of the Explore California
Web site, or theme, or whatever you were doing.
| | 10:31 | You just want to be really descriptive
with the name, or at least as descriptive
| | 10:34 | as you can be within that.
| | 10:35 | So I am going to go ahead and Save that, and
we are ready to move on to our next exercise.
| | 10:40 | Now, in this case, our page had to
undergo really extensive changes before we
| | 10:45 | could use it as our started page.
| | 10:46 | You could tell by all of the
stuff that was already done.
| | 10:48 | The goal of saving a starter page is
to have a neutral page layout that's not
| | 10:52 | dependent upon any specific images or content.
| | 10:55 | Now, in the case of the Explore
California site, the one that we have been
| | 10:57 | working on, this required us to pay
attention to the page navigation, background
| | 11:02 | images, and element styling to make
sure we stripped away enough specific
| | 11:05 | content to create an effective starter page.
| | 11:08 | I would really recommend going and
checking out a version of the Explore
| | 11:11 | California page in one of the other
Exercise Files, and comparing it to the
| | 11:15 | starter page and looking at the
changes that have been made, so that you can
| | 11:18 | sort of understand some of the
decisions that were made as well. Okay.
| | 11:21 | So now we have got a neutral page,
with the desired layout and structure.
| | 11:25 | Now, we need to let Dreamweaver know
that we want to use this as a starter page,
| | 11:29 | and we are going to do that in our next movie.
| | Collapse this transcript |
| Building custom starter pages| 00:00 | Now that we have built a custom starter
page, the only thing left for us to do
| | 00:03 | is to let Dreamweaver know that
our new page is the starter page.
| | 00:07 | To do that, we will need to
copy our page into Dreamweaver's
| | 00:10 | directory structure.
| | 00:11 | Although we could stop there and still
have the functionality we want, we are
| | 00:15 | going to take our starter page a
little bit further by adding a preview image
| | 00:18 | for it, and passing along some
descriptive information for our page in
| | 00:22 | Dreamweaver's New Page dialog box.
| | 00:25 | Now, I have Dreamweaver open right
now, but no individual file open.
| | 00:28 | And for what I need to show you guys now,
we are going to have to go exploring
| | 00:31 | through our hard drive.
| | 00:32 | So I am on a PC. The location of the
files for me is going to be a little
| | 00:35 | different than for any of you guys that
are on the Mac, but once we get into the
| | 00:38 | folder, the location is exactly the same.
| | 00:40 | So what I am going to do is go down to my Start
menu, and I am just going to go to My Computer.
| | 00:44 | I am going to go to my Local Disk.
| | 00:47 | Now, I am going to go into my
Program Files (x86). I'm on my Windows 7 here.
| | 00:52 | Any version of Windows you
are going into Program Files.
| | 00:53 | Now on the Mac, you are going to
go into your Application Directory.
| | 00:56 | From there, we are going to go into Adobe,
and we want to go to Dreamweaver CS5.
| | 01:02 | Inside Dreamweaver CS5, we want to
go into configuration. All right.
| | 01:07 | So once again, you want to find the
Adobe folder inside either Program Files or
| | 01:11 | your Application's
Directory, if you are on the Mac.
| | 01:13 | Go in the Dreamweaver CS5 folder/configuration.
| | 01:17 | Now, once you are in
configuration, it's the same for all of us.
| | 01:20 | We want to go into BuiltIn and
Layouts, BuiltIn and Layouts.
| | 01:25 | So let's examine what is here.
| | 01:27 | So we see oneColFixCtr.htm, oneColFixCtr.png.
| | 01:34 | We see that sort of pattern
repeated over and over again.
| | 01:37 | As a matter of fact, if you go to
Dreamweaver and choose File > New > HTML, you
| | 01:42 | can quickly and easily see what those files are:
| | 01:45 | 2 column fixed, left sidebar,
1 column fixed, centered.
| | 01:49 | So again, returning to our folder.
| | 01:51 | That's exactly the structure we are seeing here.
| | 01:52 | So these are the actual layout
files: an HTML file followed by a PNG.
| | 01:56 | Now, the PNG is the actual preview file.
| | 01:58 | You can see here, for example, that we
see a preview for each one of these guys.
| | 02:02 | That's sort of descriptive as to
what the page is all about. Okay.
| | 02:06 | So in order to make ours work, we need
to have a preview file, and more on that
| | 02:10 | in just a moment, and then the HTML
file that we created in the previous
| | 02:14 | exercise, and they all
need to go in this folder.
| | 02:17 | Now, that would be all well and good,
and it would still work, but all of this
| | 02:21 | information that I am getting in the
dialog box here, where I have a description of
| | 02:25 | it, and that sort of thing, I wouldn't
be able to get that unless we somehow let
| | 02:29 | Dreamweaver know that we have a new
starter page, and this is the description
| | 02:32 | for it, and this is the preview that we
use for it, that sort of thing.
| | 02:35 | So how do we do that?
| | 02:35 | Well, let's go back into either
our Finder or Explorer window here.
| | 02:40 | I notice that there is also
another folder here called _notes.
| | 02:44 | When I open that up, I see that we
have some text files that also follow that
| | 02:49 | same naming convention.
| | 02:50 | Notice that it says oneColFixCtr.htm.mno.
| | 02:56 | MNO is a Macromedia notation file.
| | 02:59 | It takes you a little bit further
back before Adobe and Macromedia merged.
| | 03:04 | But this is basically an XML file.
| | 03:06 | It's an XML file that describes to
Dreamweaver where the starter page is, what
| | 03:10 | its name is, what preview image to use for it.
| | 03:13 | So if you want to pass along that same
information, you are going to need to
| | 03:16 | pass that information on to Dreamweaver.
| | 03:19 | The best way to do this, honestly, is
instead of trying to write your own, take
| | 03:23 | one of the existing ones and just change it.
| | 03:25 | So I am going to click on any of these.
| | 03:27 | I will just take this twoColFixLt.htm.mno.
| | 03:30 | Anyone of these would
work for what we are doing.
| | 03:33 | Now, what I am going to do is I am
going to right-click this or Ctrl+Click it,
| | 03:36 | and I want to Edit it
with Adobe Dreamweaver CS5.
| | 03:39 | So even if that's not your default,
based on your installation, like mine, you
| | 03:42 | want to edit this with Adobe Dreamweaver CS5.
| | 03:45 | You can open this up in Notepad, or
WordPad, or TextEdit; any Text Editor would work.
| | 03:49 | We might as well open it up in
Dreamweaver as well, so that you edit with
| | 03:52 | Adobe Dreamweaver CS5.
| | 03:54 | There is our file open.
| | 03:55 | Now, I don't want to close this window just yet.
| | 03:57 | I am just going to minimize it,
because we are definitely going to be
| | 03:59 | coming back to that. All right.
| | 04:00 | So this is an XML file.
| | 04:03 | It's pretty easy to determine
exactly what's going on here.
| | 04:05 | Notice that we have a tag called
infoitem, so information about the item.
| | 04:08 | We have a key attribute that
basically tells Dreamweaver what type of
| | 04:12 | information is being passed.
| | 04:14 | So document type, it's a layout document,
what the name of the document is, the
| | 04:18 | description of the document, and preview.
| | 04:20 | Now, currently it's pulling all these
information sort of dynamically from a function.
| | 04:24 | It's running a function, and it's passing in
these literal string values to the description.
| | 04:28 | And that's going to basically take
script that is writing the descriptions and
| | 04:33 | populate them with what we see here.
| | 04:35 | Now, what's really nice about this
is you don't have to know all this.
| | 04:39 | You can just type in a
literal value for all of these.
| | 04:41 | So what we are going to do is we
are going to go ahead and save this.
| | 04:43 | Let me go to File and choose Save As.
| | 04:46 | We definitely don't want to overwrite this.
| | 04:49 | So we just want to do Save As.
| | 04:50 | We also want to make sure we are
saving it in the same directory.
| | 04:52 | So again, notice that you are going
to go either in Program Files or your
| | 04:55 | Application Directory, depending
upon which platform you are on,
| | 04:58 | into Adobe > Dreamweaver CS5 >
configuration > BuiltIn > Layouts, and _notes.
| | 05:03 | I know it's long, but you want
to double-check that, okay? Okay.
| | 05:07 | Now, what we are going to do is we are
going to name this the exact same thing
| | 05:10 | that our starter page is named.
| | 05:12 | That's helpful for a lot of reasons.
| | 05:14 | It looks for this document to be
named the same as the starter page itself.
| | 05:17 | So you want to make sure
they are exactly the same.
| | 05:19 | I am going to type in 2ColExplore.htm.mno.
| | 05:28 | So again, the exact same
name that we named our document
| | 05:31 | earlier, 2ColExplore.htm,
| | 05:34 | you want to follow that.
| | 05:34 | So you want to make sure it's case-sensitive.
| | 05:36 | And at the very end of it,
there is going to be mno.
| | 05:37 | So I am going to go ahead and save that.
| | 05:39 | So now we have our own note object
inside of that folder, and now we can pass
| | 05:43 | the values that we want for it.
| | 05:45 | So, for example, right here, the
new document name, I am going to take
| | 05:49 | the literal string that they have here, and I
am going to replace it with 2ColExplore_theme.
| | 05:58 | Now, you can pass in spaces
and punctuation here. It's okay.
| | 06:03 | I just kind of like that
nice, compact explanation.
| | 06:05 | It's a 2-column Explore theme layout.
| | 06:08 | Now, we need to give it a description.
| | 06:10 | The description can be a lot more descriptive.
| | 06:12 | So again, I am going to highlight the
literal string value, and inside this, I
| | 06:15 | am going to type in Explore theme - to
let them know it's from the Explore theme -
| | 06:19 | fixed width, 2 column,
badge header, large footer.
| | 06:34 | So we are being a little
bit more descriptive there.
| | 06:36 | Now, the preview is something that we
need to change as well, and I want to talk
| | 06:39 | about that for just a moment.
| | 06:41 | You can look over in the Files panel, and I
will expand this a little bit so you can see it.
| | 06:45 | We have a PNG file that's
already been saved, 2ColExplore.png.
| | 06:49 | Now, how did we get that?
| | 06:50 | What I did was I took one of the
Explore California pages, previewed it in the
| | 06:53 | browser, and took a screenshot,
| | 06:55 | took it back into Photoshop, or
Firework,s or whatever image editing program you
| | 06:58 | like, and cropped it down.
| | 07:00 | It has to be a specific size.
| | 07:02 | It has to be 227 pixels wide, 193 pixels tall.
| | 07:08 | As soon as you have that, you can save
it as a PNG file, as a JPEG, as a GIF;
| | 07:12 | any of those will work, but I
saved this one as a PNG file.
| | 07:15 | So I am going to highlight the value for
the PNG file here and change that, as well.
| | 07:18 | I want it to be exactly the same as this.
| | 07:20 | So here I am going to type
in 2ColExplore.png. Okay.
| | 07:27 | So it's case-sensitive.
| | 07:29 | You want to check your spelling
there. Make sure that's right.
| | 07:31 | Make sure everything is the
way that you need it to be.
| | 07:34 | So our note file is finished.
| | 07:35 | I am going to go ahead
and Save that and Close it.
| | 07:39 | You want to go ahead and
exit out of Dreamweaver.
| | 07:41 | I am just going to go to File and choose Exit.
| | 07:43 | Whenever you are adding a new starter page,
Dreamweaver needs to refresh that cache.
| | 07:48 | One way to force it to do that is to
close out the program and then open the
| | 07:52 | program back up again. Okay.
| | 07:53 | I want to go and open up my _notes folder.
| | 07:57 | I am just going to hit my Back button,
so that I am back into the Layouts folder.
| | 08:01 | So you want to be in the configuration
folder of Dreamweaver, in the BuiltIn
| | 08:04 | directory, and in Layouts.
| | 08:06 | Then in another window, I am
going to open up my Exercise Files.
| | 08:09 | This is the folder you can find on the Desktop.
| | 08:11 | I am going to open up Chapter_03, got
into 03_02, and find those two files.
| | 08:17 | That's the 2ColExplore.htm file that
we created in the previous exercise, and
| | 08:21 | this is the preview.
| | 08:22 | So I am going to grab both of those
guys, and I am just going to Copy them.
| | 08:25 | I like doing copying instead of moving.
| | 08:28 | That way I have got the originals if I
ever need to make changes to them, or if
| | 08:31 | something doesn't work, I can kind of
open them up and see what's going on.
| | 08:33 | I am going to go ahead and copy them
to layouts folder. There they are.
| | 08:36 | I will close that. Close the other window.
| | 08:39 | Now I can launch Dreamweaver again.
| | 08:43 | All we need to do to check to see if
this works is go up to File and choose New.
| | 08:48 | Now when we go to Blank Page > HTML,
you can see right here, we have our
| | 08:51 | new 2ColExplore_theme.
| | 08:52 | When I select that, we see the
preview image of the page design.
| | 08:58 | So you can make this a little bit more
descriptive than sort of their generic layouts.
| | 09:02 | So there is that.
| | 09:03 | Notice that here is our description:
Explore theme, fixed width, 2 column, badge
| | 09:06 | header, large footer.
| | 09:07 | So again, you could be as
descriptive as you want.
| | 09:10 | We get the option of Adding the CSS to
the Head of the document, Creating a New
| | 09:14 | External CSS File, Linking to an Existing File.
| | 09:17 | We can use any Document Type we want.
| | 09:19 | This is a really cool way to reuse
your code and extend the life of these
| | 09:23 | layouts that you are creating.
| | 09:24 | I will go ahead and create my
page, and here is my starter page.
| | 09:28 | So if I go over to Design View, there
is the starter page that we worked on.
| | 09:32 | All the CSS is in the head of
the document, as we asked it to.
| | 09:34 | Although, we certainly could have
placed it an external style sheet.
| | 09:37 | So one of the main attractions to
using these starter pages is they aren't
| | 09:41 | tied to a specific site.
| | 09:42 | We have a natural starting point now for
working on new projects based on this layout.
| | 09:46 | They can be extremely detailed, with a
lot of content styling already completed,
| | 09:50 | or if you would like, they can also
be really, really basic, with just a
| | 09:53 | rudimentary layout, no
presentational styling at all.
| | 09:56 | How you use them is totally up to you,
but by creating a series of starter pages
| | 10:01 | with pre-built layouts for your projects,
you can extend Dreamweaver's power and
| | 10:05 | functionality even further.
| | Collapse this transcript |
| Working with code snippets| 00:00 | Another extremely effective way of
reusing code in Dreamweaver is through the
| | 00:04 | use of Code Snippets.
| | 00:06 | Code Snippets allow you to store any
code, whether it's CSS or HTML, in your
| | 00:10 | Snippets library, and then
reuse that code at any time.
| | 00:13 | For CSS, this allows us to build
libraries of formatting, layout and
| | 00:18 | presentation styles
| | 00:19 | that can speed up the process
of building complex style sheets.
| | 00:23 | In this movie, we're going to examine
how Snippets work as a way of sort of
| | 00:26 | preparing ourselves for
using them with our CSS later on.
| | 00:30 | Before we build any snippets, we need to
take a brief tour of the Snippets panel.
| | 00:34 | So in our CSS workspace, we have the
Snippets panel docked with the Files panel.
| | 00:37 | That's typically where it's found.
| | 00:39 | If you don't see the Snippets panel,
you can go to Window and choose Snippets,
| | 00:44 | right there, and it'll
activate the Snippets panel.
| | 00:46 | Now I'm going to double-click the CSS
Styles panel to collapse that, so I have a
| | 00:50 | little bit more room for the Snippets panel.
| | 00:52 | Okay, so the Snippets panel
comes with some pre-built snippets
| | 00:55 | already built-into it.
| | 00:57 | You can see that those are categorized.
| | 00:58 | We have some Comments.
| | 01:00 | We have Footers, Form Elements,
JavaScript, so area conclusions, browser functions.
| | 01:06 | So this is not just for HTML and CSS.
| | 01:07 | This is also for JavaScript and
really any code that you write.
| | 01:11 | Well, you're free to make your own
Snippet folders, and you're free to save your
| | 01:15 | own Snippets inside of them.
| | 01:16 | So I'm going to go down to the bottom
right-hand corner of the Snippets panel.
| | 01:20 | I see a little folder icon there.
| | 01:22 | I'm going to go ahead and click on that.
| | 01:23 | That's going to create a New Snippet Folder.
| | 01:25 | Now one of the things I've always be
kind of frustrated about with Snippets
| | 01:27 | folder is I always forget where I'm focusing.
| | 01:30 | You can see what this did.
| | 01:31 | As soon as I click this, because I
have the Comments folder highlighted, it
| | 01:35 | placed it inside of this.
| | 01:36 | So I'm just going to go ahead
and name this snippet Structure.
| | 01:39 | Don't worry if yours is not in this.
| | 01:42 | Frankly, mine is not supposed to be.
| | 01:43 | But the good thing is about this is it
shows you that you can nest these folders
| | 01:47 | inside of each other.
| | 01:48 | So you can create some pretty
complex structures out of this.
| | 01:51 | Okay, I'm going to go ahead and move that
out, so that it is a top-level folder itself.
| | 01:56 | What am I going to do next,
| | 01:57 | now after creating Structure,
I'm going to go ahead and create a
| | 01:59 | brand-new Snippets folder.
| | 02:01 | Here, I'm going to call this one CSS.
| | 02:04 | So we have one for HTML Structure tags,
and then we have another one for CSS.
| | 02:08 | Now you can create snippets in one of two ways.
| | 02:10 | One is you can create a Snippet from
scratch yourself using the Snippets panel,
| | 02:14 | or a option two, which is probably the
more likely option, is you're going to
| | 02:18 | take existing code that you already
have in your styles, or your HTML, and then
| | 02:22 | save that as a Snippet.
| | 02:23 | Well, let's examine option number one.
| | 02:25 | I'm going to go and click on the
Structure folder, so that it's our active folder.
| | 02:29 | That insures that any snippet that we
create is going to be placed inside that.
| | 02:33 | As you can see, it allows
you to rename folders, as well.
| | 02:35 | Snippets panel is really sensitive.
| | 02:37 | So be careful about
clicking in and around it a lot.
| | 02:39 | So I'm going to go and
create a brand-new Snippet.
| | 02:41 | I'm just going to go ahead and
name this Snippet,wrapper div.
| | 02:45 | Now in almost every single Web site I
create, I create a wrapper div tag that
| | 02:50 | sits inside the body tag.
| | 02:52 | That helps me center the content on
the page, if that's what I'm wanting to
| | 02:54 | do, and give definition to the page.
Use a position attribute of relative on
| | 02:59 | that, so that anything positioned will
position inside the wrapper and not the body tag.
| | 03:03 | So it's something that I'm going
to do almost every single time.
| | 03:05 | So what I'm going to do now in the Description,
| | 03:07 | I'm just going to type in description
of what this snippet is going to do, sort
| | 03:10 | of describe its functionality.
| | 03:11 | I want to say, Inserts a wrapper
div tag around selected elements.
| | 03:19 | So I'm very clearly stating that this
is going to insert a wrapper div tag
| | 03:23 | around selected elements.
| | 03:25 | Notice that that directly plays into
the type of snippet that we can create.
| | 03:29 | We can do a Wrap selection or Insert block.
| | 03:31 | Wrap selection will go ahead and wrap
an opening and a closing section of code,
| | 03:36 | and it can be a little code or it can be a lot
of code, around whatever code you have selected.
| | 03:41 | Insert block is just going to take
that block of code and insert it into the
| | 03:44 | location where you are on the page.
| | 03:46 | So it's not going to do any wrap.
| | 03:47 | So we want this going to wrap the selection.
| | 03:49 | In the Insert before, I'm
just going to write a div tag.
| | 03:52 | I'm going to say <div id = "wrapper">,
and then I am going to close my opening tag.
| | 03:58 | Then Insert after, I'm just going
to go ahead and close the div tag.
| | 04:01 | Now you'll notice we're not getting
any code hinting or code completion here.
| | 04:03 | So you've got to be
certain of what you want to do.
| | 04:06 | Syntax matters. Spelling
matters. Whitespace matters.
| | 04:08 | You want to be very, very careful
when entering code into these panes.
| | 04:12 | So again, I would say Wrap
selection and Insert block in.
| | 04:14 | Notice that the Preview type
can either be Code or Design.
| | 04:18 | Now when you click on a Snippet in this area of
the Snippets panel, you'll see a preview of it.
| | 04:22 | I really like just seeing the Code,
so I can read the Code and know what
| | 04:25 | I've got going on there.
| | 04:25 | I'm going to go ahead and click OK.
| | 04:27 | There is our wrapper div.
| | 04:29 | As soon as I click on that, it says
div id= wrapper and then close the div.
| | 04:33 | So it's giving me a little summary
of what this Snippet is all about.
| | 04:35 | If I expand my CSS Styles panel by
clicking right there on a divider, I can also
| | 04:40 | see that right over here
is the Description for that.
| | 04:42 | So anytime I have a Description for a
Snippet, when I select it, I'll be able to
| | 04:45 | see that in the Description area. Okay.
| | 04:47 | Let's take a look at how
we can use these Snippets.
| | 04:50 | So now what I'm going to do is click
anywhere inside my page, and notice that
| | 04:54 | I'm not even in Code view, so you can
use Snippets in Design view. It's okay.
| | 04:57 | Going over here to the Tag Selector,
I'm going to click the body tag.
| | 05:00 | That's going to highlight everything inside
the body tag, so all the content on the page.
| | 05:05 | It's a very easy way to do a select all.
| | 05:06 | I'm going to go over to my wrapper div
tag, and using a snippet is as easy as
| | 05:10 | double-clicking on it.
| | 05:11 | I'm going to go ahead and double-click that.
| | 05:13 | Notice as soon as I do that, I
have the div with an id of wrapper.
| | 05:16 | If I do switch to Code view, notice
that there is the opening wrapper div tag,
| | 05:20 | and there is the closing wrapper div tag.
| | 05:22 | So it went ahead and wrapped all of
the code on the page, so a very quick and
| | 05:25 | easy way to do that.
| | 05:26 | Now what about CSS?
| | 05:28 | How does working with Snippets
benefit us when we're working with our
| | 05:31 | cascading style sheets?
| | 05:32 | Well, I'm going to go back to the Files
panel, and in the _css folder, I'm going
| | 05:36 | to open up main.css, of course.
| | 05:38 | Notice that this is the style sheet
for the Explore California Web site
| | 05:42 | that we've been using.
| | 05:42 | What I'm going to do now is when I scroll
down to my line 80, and find the h1 tag.
| | 05:47 | I am going to go ahead
and highlight the whole tag.
| | 05:49 | Make sure that you get the opening curly
brace, the closing curly brace, the selector.
| | 05:52 | You want to make sure you have all of
this selected, because when you create a
| | 05:55 | snippet based off of your selected code,
what's going to happen is everything
| | 05:58 | inside the highlighted area
will be converted to a snippet.
| | 06:00 | If you leave something off, then that
snippet is going to cause you so many
| | 06:03 | problems a little bit later on down the line.
| | 06:04 | All right, so I have that selected.
| | 06:06 | There are so many
different ways to create a snippet.
| | 06:08 | I can go back over to the Snippets
panel and click the New Snippet icon.
| | 06:11 | That'll be the one way to do it.
| | 06:12 | Another way would be to go ahead and
right-click, and you can also Ctrl+click if
| | 06:17 | you're on a Mac, and I'm going to
choose Create New Snippet, right there.
| | 06:20 | Now as soon as I do that, I get the
dialog box that we were just looking at when
| | 06:23 | we created our wrapper div tag snippet.
| | 06:25 | But notice that this one is pre-populated
with the h1 selector that we had highlighted.
| | 06:30 | So that's really cool.
| | 06:31 | The Name of this one, I'm going
to go ahead and call this one h1.
| | 06:35 | That's fairly descriptive right.
| | 06:37 | In the Description section, I'm going to
type in Explore California h1 selector.
| | 06:46 | This time, instead of having the Snippet type
be Wrap Selection, I want it to be Insert Block.
| | 06:50 | Notice that we lose our double pane down
there, and we just get the one section of code.
| | 06:54 | Now here is the other thing.
| | 06:56 | I can modify this. If whatever
reason I've left off that curly brace,
| | 06:59 | I'm free to go ahead and type that now.
| | 07:00 | I'm going to keep the Preview type
as Code, and I'm going to click OK.
| | 07:04 | Right now, we didn't
really see anything happened.
| | 07:05 | But if I switch over to my Snippets
panel, I can see right there that the h1
| | 07:10 | showed up in the Structure.
| | 07:11 | Now why did it show up in the Structure folder?
| | 07:12 | Oh, that's why I had highlighted, because
that's what we were using just a minute ago.
| | 07:15 | So if for whatever reason,a snippet
goes in the wrong folder - and trust me
| | 07:19 | it will happen to you,
| | 07:20 | the Snippets panel is really sensitive -
| | 07:22 | it's okay because you can simply grab
your snippet, and then just drag it into
| | 07:26 | the folder you want.
| | 07:27 | So you can do that anytime.
| | 07:28 | You're going to rearrange entire folders,
individual snippets within folders or
| | 07:32 | whatever you'd like to do.
| | 07:33 | It just does not matter.
| | 07:34 | Now I want to show you one last thing
before we move on to discussing strategy
| | 07:38 | for using Snippets within your CSS.
| | 07:40 | You can assign keyboard shortcuts to
Snippets that you need to use all the time.
| | 07:44 | So if you're rapidly building pages,
it'll be really nice to go ahead and have
| | 07:47 | keyboard shortcuts assigned for these.
| | 07:49 | So I'm going to go to the h1 snippet,
which is right here, right-click or
| | 07:52 | Ctrl+click that, and I'm going
to choose Edit Keyboard Shortcuts.
| | 07:55 | Now you can also go up to Edit and
choose Keyboard Shortcuts, as well.
| | 07:58 | If you're on the Mac, you can go to
Dreamweaver Keyboard Shortcuts, and you will
| | 08:01 | see the exact same panel.
| | 08:03 | Now you don't want to modify the
Dreamweaver Standard keyboard shortcuts.
| | 08:06 | So I'm going to go ahead and make a new one.
| | 08:08 | I'll just say Duplicate Set, and this comes up.
| | 08:11 | I'm just going to call these my shortcuts.
| | 08:14 | You can call them whatever you want.
| | 08:15 | You're free to create as
many of these as you would like.
| | 08:17 | So you might create a set of keyboard
shortcuts to use only when you're doing Snippets.
| | 08:21 | So it's totally up to you.
| | 08:23 | All right, now we want to
modify our Keyboard Shortcuts.
| | 08:26 | What's really interesting about this is
notice that we've got our commands for Snippets.
| | 08:30 | We can go to menu commands or all of
those, but Snippets has their own category.
| | 08:33 | Inside Snippets, I'm going to
open up the CSS and choose the h1.
| | 08:36 | Now I'm going to go ahead and give this a
keyboard shortcut by clicking in the Press key.
| | 08:41 | I'm just going to do Ctrl+Shift+1.
| | 08:44 | Now you'll notice that the keyboard
shortcut is already assigned to Align Left.
| | 08:48 | You know what? I never use that keyboard
shortcut for Align Left. So don't panic.
| | 08:52 | If you see something that you want to do,
and Ctrl+Shift+1 is the easy one to hit.
| | 08:55 | If you see something like that, and
then Dreamweaver says, oh, I'm sorry.
| | 08:58 | This is already taken by
Align Left or Align Right.
| | 09:01 | Well, if you're never going
to use it, what do you care?
| | 09:03 | So I'm just going to hit Change and
Dreamweaver further scolds me about it. I'm like no, no.
| | 09:08 | I'm really serious about that.
| | 09:09 | Then I am going to go ahead and click OK.
| | 09:11 | Now anytime I wanted to, I could
add the selector again just by using
| | 09:16 | the keyboard shortcut.
| | 09:17 | Let me show you what I mean.
| | 09:17 | I'm just going to
highlight my h1 selector again.
| | 09:20 | Make sure you're in the Code view. Delete that.
| | 09:22 | Then I'm just going to do Ctrl+Shift+1.
| | 09:24 | There is my h1 selector.
| | 09:26 | So if you have a lot of those in your
library, or even whole sections of styles,
| | 09:30 | you can really rapidly build pages.
| | 09:32 | It doesn't matter whether you're working with
HTML CSS or be even something like JavaScript.
| | 09:37 | If you write a lot of code, I think
it's pretty easy for you to see how much
| | 09:40 | Code Snippets can help speed up your workflow.
| | 09:43 | Now that we know that working with
Code Snippets can help us reuse our CSS,
| | 09:46 | we need to discuss strategies for
working with CSS and Code Snippets.
| | 09:51 | That is going to be the focus of the next movie.
| | Collapse this transcript |
| Writing snippets| 00:00 | Using snippets to reuse CSS code
requires a good deal of planning to build a
| | 00:04 | strategy around how your code will be
reused and how much of your layout and
| | 00:09 | presentation will be
saved in your Snippet library.
| | 00:12 | In this movie, we'll begin to build a
small-scale CSS Snippet library that can
| | 00:17 | be used over and over again for other projects.
| | 00:20 | To do this we'll need to examine
our current site, evaluate elements or
| | 00:24 | structures that we could reuse in other
projects, and then modify existing CSS
| | 00:29 | rules to create a more
neutral snippet version of them.
| | 00:32 | And if you were to really take a
look at this layout, you would call it a
| | 00:36 | two-column layout. The header, instead
of panning the entire width of the page,
| | 00:39 | is really just a small little area.
| | 00:41 | It could be a badge, or a
banner, or something of that nature.
| | 00:45 | The main content fills up the entire
right side of the page, and we have a
| | 00:49 | footer at the bottom.
| | 00:51 | Everything else, in terms of the colors
being used, the graphics being used to
| | 00:56 | the way that the navigation is
structured, is really designed specifically for
| | 00:59 | the Explore California Web site.
| | 01:01 | So unless we were going to have to
reuse these snippets in order to build more
| | 01:05 | pages for the Explore California Web
site, it really wouldn't make a whole lot
| | 01:08 | of sense to use the
existing CSS to build snippets.
| | 01:11 | We need to modify them a little bit
more, and make them a bit more neutral.
| | 01:16 | Now that way any time I wanted this
particular layout or even color schemes and
| | 01:19 | things like that, if I want to keep those,
and typography, I could save those as snippets.
| | 01:23 | So what I'm going to do is I'm
going to go over to my Files panel.
| | 01:28 | I'm going to go into the 03_04,
which is my root directory here.
| | 01:32 | Open up the _css folder and open up main.css.
| | 01:36 | Now yes, we can access the code
from here, but we need to do something
| | 01:38 | very special with this.
| | 01:39 | I'm going to go to File and choose Save As.
| | 01:42 | I'm going to save this in the same
folder, the _css, and I'm just going to call
| | 01:47 | this one snippet_source.css.
| | 01:51 | So, snippet_source.css.
| | 01:53 | Now why are we doing this?
| | 01:54 | Well, as I mentioned before, we're going
to have to modify some of these styles,
| | 01:57 | some of them quite extensively.
| | 01:59 | The last thing in the world you want
to do is make changes to your site's CSS
| | 02:03 | file when you're building your snippets.
| | 02:05 | You want to leave that alone.
| | 02:06 | So we're just creating a copy of this.
| | 02:08 | I'm going to close the main.css
that we had opened and focus on my
| | 02:11 | snippet_source file.
| | 02:12 | Now the next thing I'm going to do is
go to my panels and click on my Snippets
| | 02:16 | panel to activate that, and sort of
expand that out a little bit more.
| | 02:19 | I really like being able to see this
panel, read some of the descriptions and
| | 02:22 | tell what's going on here.
| | 02:24 | Okay, so the first thing that we're going
to take a look at is our global constants.
| | 02:28 | As I scroll down a little bit, I
get down to about line 43 in my code,
| | 02:31 | I can see some constants that are going
to be used kind of over and over again.
| | 02:35 | To be honest with you, this is one of
the selectors that I have at the top of
| | 02:38 | almost every single one of my style sheets.
| | 02:40 | It takes a default margin and the
padding for documents in different browsers,
| | 02:44 | and just sort of zeros them out, so
that you can do with them what you want.
| | 02:47 | So we've other ones like the body tag
that we could reuse, our limited-scale
| | 02:51 | reset, so we've got some pretty
generic global classes and constants in here
| | 02:55 | anyway, so we could go ahead and
start our CSS Library based on those.
| | 03:00 | Now I'm going to go over to our
Snippets panel and clean up some of the stuff
| | 03:03 | that we've been working with before.
| | 03:04 | I'm going to go inside that CSS folder,
| | 03:07 | click on the h1 selector
that's currently sitting in there
| | 03:09 | and I'm just going to delete
that by clicking the Trash Can.
| | 03:11 | So anytime you want to delete
a snippet, just highlight it.
| | 03:14 | Click the Trash Can.
| | 03:15 | It says, Are you sure you want to delete it?
| | 03:16 | I'm going to go and say, Yes, and
now my CSS folder is empty again.
| | 03:20 | It's empty because I want to give it a
little bit more structure than what they've got.
| | 03:24 | So I'm going to click on the CSS
folder to activate that folder, create a
| | 03:27 | brand-new snippets folder, and I'm going to
go ahead and call this one Global Constants.
| | 03:33 | Now sometimes you could have snippets
that relate to a specific layout, so we
| | 03:38 | can create an Explore California theme,
for example, and have snippets related
| | 03:41 | just to this particular layout.
| | 03:42 | You can also have snippets that could
be used for really any site, and Global
| | 03:46 | Constants really fits that bill.
| | 03:47 | You could have snippets that you
use anytime you create a project.
| | 03:50 | You can just create and start
putting some of these things in here.
| | 03:52 | Okay, so I'm going to go back
over to my snippets_source.css.
| | 03:55 | Highlight the html in the body selector.
| | 03:57 | Once again, make sure you get the
opening and the closing curly brace, as well as
| | 04:01 | the selectors itself.
| | 04:02 | I'm going to go ahead and either right
-click or Ctrl+Click that and choose
| | 04:05 | Create New Snippet, and I'm just going to go
ahead and call this snippet html & body reset.
| | 04:15 | You can name snippets anything you want.
| | 04:17 | You want to be a little descriptive,
but you don't want to be the overly long.
| | 04:19 | And for the Description, I'm going to type
in: Resets the default browser page margins.
| | 04:29 | Again, the Snippet type is
going to be Insert block.
| | 04:31 | Whenever you're dealing with CSS-based
snippets, you're always just going to
| | 04:34 | insert the block of code.
| | 04:36 | CSS doesn't work that way.
| | 04:37 | You are not going to wrap code with it.
| | 04:38 | I'm going to have my Preview Type be
Code and again, I'm going to double-check
| | 04:42 | the style, make sure everything is in its
right place - it is - and go ahead and click OK.
| | 04:46 | So now over in my Global Constants,
I've my html & my body reset. Excellent!
| | 04:50 | Now I'm going to go down to the body tag,
and here I'm going to create a couple
| | 04:54 | of different versions of this body tag.
| | 04:55 | So I'm going to go ahead and copy this
and then paste it on a line below it.
| | 04:59 | So now we've two body selectors, two
body element selectors, and we're going to
| | 05:04 | change up a few things in it.
| | 05:05 | First off, we're going to take
the margin top and get rid of that.
| | 05:08 | That margin top is very specific
for the Explore California Web site.
| | 05:11 | If we were creating just some generic body
tags that we can use on any site that we want,
| | 05:15 | we're going to go ahead and
take things like that away.
| | 05:17 | Now the next thing I want to do is the
top body tag is using Georgia, Times New
| | 05:21 | Roman, Times, and serif.
| | 05:22 | It's a font stack I use a good bit, but
it's not always the font stack I want to use.
| | 05:26 | So what I'm going to do is on the body
selector below that, I am going to go
| | 05:30 | ahead and replace that Georgia,
Times New Roman, Times, serif.
| | 05:32 | So I'm going to go ahead and delete that,
and then I'm going to type in ar, and
| | 05:36 | it actually gives me,
Arial, Helvetica, sans-serif.
| | 05:37 | Now remember you want a space
between the % for size, and Arial,
| | 05:42 | Helvetica, sans-serif.
| | 05:43 | Okay, so now we've two body tags,
one using Georgia and one using Arial.
| | 05:48 | We're going to go ahead and
add them to our CSS Library.
| | 05:51 | So I'm going to highlight the first one.
| | 05:52 | Now, we want to do these individually.
| | 05:54 | So I'm going to highlight the first
one, I'm going to right-click that and
| | 05:57 | choose Create New Snippet, and I'm
just going to go ahead and call this
| | 06:01 | one, body 100% Georgia.
| | 06:06 | And that way I can scan these body tags here.
| | 06:09 | So I have got some body tag
selectors, 100% font size and Georgia.
| | 06:12 | And for description, again, I can be
a little bit more descriptive here.
| | 06:14 | I'm going to say, Neutral body tag,
meaning no margins associated with it
| | 06:19 | or anything like that,
| | 06:20 | 100% font size, Georgia stack. For me
that short for Georgia font stack, you
| | 06:29 | could be a little bit more descriptive
there if you'd like. And that's good.
| | 06:32 | Now I'm going to look at everything
here to make sure everything is okay, and
| | 06:35 | everything is not okay.
| | 06:37 | What I left in there that I didn't mean to
leave in there was the background.
| | 06:41 | So here's the beauty of the Snippet dialog box.
| | 06:42 | I'm going to click on the Insert block
and then this background part, I'm just
| | 06:46 | going to go head and get rid of it.
| | 06:47 | I can even adjust my
spacing by moving those guys up.
| | 06:49 | So you can edit in your Insert Code
dialog box the same way that you could code
| | 06:54 | within the CSS Style panel.
| | 06:56 | So that's pretty cool.
| | 06:56 | So I'm going to go ahead and
click okay, and it creates that.
| | 06:59 | Now notice how it doesn't
affect the style in your CSS.
| | 07:02 | So if you do have a selector that you
need to make slight modifications for, but
| | 07:05 | you don't want to disturb
it in the native style sheet,
| | 07:08 | you can go ahead and create a snippet
and just make your edits in that little
| | 07:11 | window, and you'll be okay.
| | 07:12 | All right. Now, I definitely don't need it
for my next one, so I'm going to remember
| | 07:15 | go ahead and get rid of that.
| | 07:16 | I'm going to highlight it, create a
new snippet out of this, and I'm going to
| | 07:20 | call this one body 100% Arial, since
we're using Arial as a font stack, and
| | 07:27 | for the Description, I'm going to type in:
Neutral body tag, 100% font size, Arial stack.
| | 07:42 | And you always have to remember to do
Insert block, the default is Wrap selection.
| | 07:45 | So if you keep doing CSS snippets over
and over and over again, keep in mind
| | 07:49 | that you're going to have to
continually insert that block.
| | 07:51 | I am going to go ahead and click OK.
| | 07:53 | Now you'll notice that the way that these guys
are stacked up, it's really easy to scan this.
| | 07:56 | It says, body 100% Arial, body 100% Georgia.
| | 07:59 | You might be wondering, why don't I
just name it body1 and body2 and let the
| | 08:03 | Description tell me what it's doing?
| | 08:04 | Well, you can see I've got my
Snippet panel really extended to see
| | 08:08 | the description at all.
| | 08:09 | More than likely, you're going to
view your Snippets panel like this.
| | 08:11 | So you want those names to be
descriptive enough to where you know which one
| | 08:15 | you're going to use for a given situation.
| | 08:17 | Now let's do one more.
| | 08:19 | I am going to go down to the limited-
scale reset, and I'm going to go ahead
| | 08:22 | and highlight that.
| | 08:24 | Remember, you can choose to add
the comment as part of this, as well,
| | 08:28 | if you think you'd always want to put a
comment above that, which I think is a
| | 08:30 | pretty good idea, actually.
| | 08:31 | I'm just going to go ahead and
highlight that as well, and Dreamweaver can be
| | 08:34 | really tricky sometimes when
we're highlighting this code.
| | 08:36 | So double-check that you've got the
comment before it and the closing curly brace.
| | 08:40 | We're good there, and then I'm going
to go ahead and create a new snippet.
| | 08:43 | Now you can also simply highlight your text,
instead of right-clicking, you can go right over to
| | 08:47 | the Snippets panel and click right
there on New Snippet, and as soon as you get
| | 08:51 | that, the Name comes up, and we're just going
to call this one limited reset, limited reset.
| | 08:57 | Now I don't like the way that these
guys are all on separate lines, so I'm just
| | 09:00 | going to take just a brief moment
to bring them all back on one line.
| | 09:04 | I probably could have done that in the
code using my AutoFormat Options, but this
| | 09:08 | is not that strenuous.
| | 09:10 | So we're going to go ahead and do that
for each one of these guys, get them all
| | 09:12 | up in the same line.
| | 09:13 | And I noticed when doing this
that we're leaving somebody out here.
| | 09:16 | We have got an ul, which
stands for unordered list.
| | 09:18 | We have the list item, but we don't have
ordered list, and that's because we're
| | 09:21 | not using ordered list in the
Explore California Web site.
| | 09:24 | It doesn't mean that for our limited-
scale resets on other sites that we
| | 09:27 | shouldn't have that.
| | 09:28 | So I'm just going to add an ol in the
mix there, and make sure I have a comma, so
| | 09:32 | that the ol and li tag are separated.
| | 09:35 | Now this is a limited reset.
| | 09:37 | I'm just going to give it
a brief Description here.
| | 09:38 | I'm just going to do a brief, little
title here that says CSS margin and padding
| | 09:45 | reset for basic HTML elements.
| | 09:51 | And then I'm going to click Insert block.
| | 09:53 | Always remember to do that.
| | 09:54 | That's so easy to forget.
| | 09:55 | So just force yourself, every single time
you do this, to remember to click Insert block.
| | 09:59 | Go ahead and click OK.
| | 10:00 | Now here is the nice thing about this,
because I can preview which elements are
| | 10:03 | added to the limited
reset by looking above that.
| | 10:06 | I probably don't need that
identifier in there either.
| | 10:08 | So if you want you can edit your snippets,
you can right-click a snippet and choose Edit.
| | 10:12 | It brings up this dialog box, again,
you can make any edit you wanted and click
| | 10:16 | OK, and you are in good shape.
| | 10:18 | Now this looking pretty good, but more
than likely, for any type of library, I'm
| | 10:21 | going to have more than one resets.
| | 10:22 | This is a limited reset.
| | 10:23 | What if on one site I want to do a full
reset, or use the Yahoo user interface reset?
| | 10:28 | Well, if I go up to my CSS folder
right here and click on that, I can create
| | 10:32 | a brand-new folder.
| | 10:33 | I can call this CSS Resets, and just
like that, I can take my limited reset
| | 10:40 | and drag it in there.
| | 10:41 | So if you don't get the organization
that you want at the beginning of it, you
| | 10:45 | can add it at the end. Okay, cool.
| | 10:46 | We're now well on our way towards
having a library of CSS snippets that we can
| | 10:51 | call on whenever we're
building a CSS file for our projects.
| | 10:54 | Now as you can imagine, you can go on
from here and add more CSS resets, add
| | 10:59 | global classes and other site-neutral styles.
| | 11:01 | The limits on what type and how many
snippets you have are entirely up to you.
| | 11:06 | Now when creating snippets, try to
imagine how often you'll use certain rules and
| | 11:11 | how you might need to modify
them for other sites or projects.
| | 11:14 | It's going to go a long way to telling
you what type of snippets you need and
| | 11:17 | really how ought to be structuring them.
| | 11:19 | So as we continue to explore snippets
in more detail, we're going to move on to
| | 11:24 | discuss the topic of creating
CSS-specific libraries of snippets.
| | Collapse this transcript |
| Importing snippets| 00:00 | At this point, I hope you are
getting an understanding of how helpful
| | 00:03 | snippets can be in reusing code and speeding
up the page creation and CSS writing process.
| | 00:08 | In a larger team environment, or
working with other developers, they can be a
| | 00:13 | great way to share code from one team
member to another, or just to make sure
| | 00:17 | that everybody is using
the most up-to-date code.
| | 00:20 | Well, that's true, but there's just one problem.
| | 00:23 | The Snippets panel, as you can see right
here from going to the menu and looking
| | 00:27 | at that, does not allow you to
export, import or share snippets.
| | 00:31 | They are local to your
machine, and your machine only.
| | 00:34 | But hey, all is not lost.
| | 00:36 | In this movie, I'm going to show you
how to locate your snippets and share
| | 00:39 | them with other users.
| | 00:41 | Then in the process, we are going to
load some snippets that we'll need for the
| | 00:44 | rest of the chapter.
| | 00:45 | So I'm in Dreamweaver, but
Dreamweaver cannot help me here.
| | 00:49 | I need to browse outside into my hard drive.
| | 00:51 | So of course, you guys on the
Mac are going to go to a slightly
| | 00:54 | different location than I am.
| | 00:56 | I'm going to open up an
Explorer window here in Windows 7.
| | 01:00 | If you are on Mac, you can open up a
Finder window, and what you're looking for,
| | 01:03 | there's snippets located in actually
two locations, and I want to show you
| | 01:07 | where you can find them.
| | 01:08 | Now, the first place you can find
them is in Program Files, or your
| | 01:11 | Application Folder.
| | 01:12 | So, for example, if I open up Program
Files here, go into Adobe, and let me
| | 01:16 | stretch this out a little bit, because
I don't have quite enough room just yet,
| | 01:20 | Dreamweaver CS5 and look under
configuration, inside that, I'll find Snippets.
| | 01:27 | Now, these are the snippets
that come with Dreamweaver.
| | 01:29 | You're certainly welcome to
go ahead and change them here;
| | 01:33 | however, a better location for your
snippets is in your local application data.
| | 01:38 | That way, if you ever have to reinstall
Dreamweaver or have to wipe clean some
| | 01:42 | files, those will still be there.
| | 01:44 | So what I'm going to do is close my
Program Files, and I'm going into the Users.
| | 01:48 | Now, on the Mac, of course, you are
going to go into your Users, and you are
| | 01:51 | going to go into your Library.
| | 01:53 | On the PC, I'm going to go into my
Local User, which is me, James Williamson >
| | 01:56 | application data (AppData),
and I want to find Roaming.
| | 01:59 | When I open up Roaming, I want to
open up Adobe and browse down and
| | 02:03 | find Dreamweaver CS5.
| | 02:05 | So this is not in the
most intuitive of locations.
| | 02:08 | I'm going to open up Dreamweaver CS5,
English US (en_US) > Configuration, and
| | 02:13 | there are my Snippets.
| | 02:14 | Now, these are my local snippets.
| | 02:16 | You will notice that we have CSS, Structure.
| | 02:18 | So these are the snippets that
we've added in our past movies.
| | 02:21 | Now, if you're on the Mac, you are
going to go to your User Data, and you are
| | 02:25 | going to go into your Local Library,
find your Application Data inside that,
| | 02:29 | find Dreamweaver CS5,
| | 02:32 | and you want a look in your
Configuration folder, and you'll find Snippets.
| | 02:36 | So they are in roughly the same location.
| | 02:37 | You need to basically, no matter what
system you're on, go into your Users Data,
| | 02:42 | find your Local Application Data,
and you should be able to find these.
| | 02:46 | Sometimes they are little harder to find than
others, but you should be able to find them.
| | 02:49 | Okay! Now what I'm going to do now is keep
this window open, and I'm going to open up
| | 02:53 | another window that's pointed at my desktop.
| | 02:57 | Looking at my desktop, I'm going to find
the Exercise Files folder. Open that up.
| | 03:01 | I'm go inside the Chapter_03 directory,
and what I'm looking for is 03_05.
| | 03:05 | There is a folder in there called snippets.
| | 03:09 | Now, inside my snippets folder, I have
a folder that's called Explore_Theme.
| | 03:14 | So what I've done here is
created a much larger theme here.
| | 03:18 | In the past, in our snippet movies,
we've created one or two snippets and
| | 03:22 | kind of done a little bit from organization,
but here, this is on a much larger scale.
| | 03:25 | So what I want to do now is I want to take
this Explore_Theme, and I want to copy it.
| | 03:29 | I am going to copy this directly into
the CSS folder that we created earlier,
| | 03:33 | because that makes sense for the organization.
| | 03:35 | These are full CSS snippets.
| | 03:36 | So I'm going to drag it over to
CSS. Make sure I'm copying it,
| | 03:40 | in case I ever need to go back in,
and work with it again, and then it just
| | 03:43 | should copy right over.
| | 03:44 | Now if I go into CSS,
there is the Explore_Theme.
| | 03:46 | So now inside my CSS folder, I have
the Explore_Theme snippets. Okay!
| | 03:50 | So we know that they've copied there.
| | 03:51 | Now, let's take a closer look at them,
but in order to do that, I need to go
| | 03:55 | back in the Dreamweaver.
| | 03:56 | So I'm going to go ahead and close both
of these windows, and you will notice we
| | 03:59 | don't really see a change over CSS folders.
| | 04:01 | We don't see any Explore_Theme.
| | 04:02 | That's because in order to refresh
that, we are going to need to close
| | 04:07 | Dreamweaver and then open it back up again.
| | 04:08 | So let me do that really quick.
| | 04:09 | I'm just going up to
Dreamweaver File and choose, Exit.
| | 04:13 | Now when I go into my Snippets panel and
open up CSS, there is the Explore_Theme.
| | 04:17 | Now I mentioned that we are going to
examine this in a little bit more detail.
| | 04:20 | So, if I open up the Explore_Theme,
you can see this is a lot larger.
| | 04:23 | We have folders for CSS Resets
that we can use within this theme.
| | 04:27 | We have place for our form styling,
Global Classes, Global Constants, Layout
| | 04:32 | Styles, Navigation,
Presentation Styles, Tables, and Utilities.
| | 04:36 | So we've got all these different categories of
styles that we can sort of build this off of.
| | 04:40 | Now what you're seeing here
is what I like to call a theme.
| | 04:43 | The Explore California Web site has that
sort of a two-column layout with a small header.
| | 04:47 | It's more like a badge header. It has
the footer at the bottom of that.
| | 04:51 | I might want to reuse that from time-to-time.
| | 04:54 | So in order for me to reuse that,
building a theme is really nice.
| | 04:57 | Notice that if I open up Layout
Styles, for example, that I have even
| | 05:00 | styles inside that.
| | 05:02 | I have one design to target a 1020
screen resolution and other one designed to
| | 05:05 | target a 930 screen resolution.
| | 05:07 | So you create different layout
styles for targeted resolution, sizes.
| | 05:11 | Notice that I've got different headers.
| | 05:13 | I've got a larger header and a smaller
header based on the same layout, and with
| | 05:17 | enough proper planning, you can really
create a structure that's going to be
| | 05:20 | extremely flexible, that will allow you
build any project you want to build that
| | 05:23 | the Explore California
theme would be appropriate for.
| | 05:26 | Now, I'm not going to
sugarcoat what we just did here.
| | 05:29 | Sharing and moving snippets
is a pain, no doubt about it.
| | 05:33 | Instead of being able to export and
import snippets, or even accessing them from
| | 05:37 | a shared directory, you have to
manually copy and paste them into local
| | 05:41 | directories on each individual machine.
| | 05:44 | Now, that may seem like a deal breaker,
but don't let this little bit of manual
| | 05:48 | labor dissuade you from utilizing snippets.
| | 05:51 | While needlessly complex, the ability
to distribute snippets to team members, or
| | 05:56 | even simply moving them from one
machine to another, gives you an extremely
| | 06:00 | powerful way to distribute and reuse code.
| | Collapse this transcript |
| Understanding snippets libraries| 00:00 | Saving individual blocks of code as a
snippet is a wonderful way to speed up
| | 00:04 | coding in development.
| | 00:06 | You can take the organization and
scope of snippets even further by
| | 00:09 | building Snippet libraries.
| | 00:11 | Snippet libraries are organized
collections of snippets built around a specific
| | 00:15 | layout or element structure.
| | 00:17 | While they take a little bit of work on
the front end to build them, the ability
| | 00:20 | that they give you to put together pages,
or even entire sites, in minutes is well
| | 00:25 | worth the time required to build them.
| | 00:26 | Now in this movie we're going to
examine the Explore Theme Snippet library that
| | 00:31 | we imported in our last movie,
and add some additional snippets.
| | 00:35 | Now it's important that you have the
starting library in place, so if you
| | 00:39 | have not completed the previous exercise,
please do so now before continuing with this movie.
| | 00:46 | And I just want to switch over to my
Snippets panel, and I can expand that out a
| | 00:51 | little bit, so I can read these a little
bit more and open up my Explore Theme.
| | 00:54 | Now in the previous movie, we went over
the structure of this in a little bit
| | 00:58 | more detail, but I just want you to
notice that there is a certain strategy
| | 01:01 | behind how these styles are being separated out.
| | 01:04 | And every single theme, or library, or
project that you work on is going to be a
| | 01:08 | little bit different.
| | 01:09 | Don't anticipate that you're going to be
using the same structure every single time.
| | 01:12 | What you should think about is if
you're really trying to reuse your code,
| | 01:16 | look at the project you're working on
and imagine the pieces of that you can
| | 01:19 | use in other projects.
| | 01:21 | That will give you a good idea as to what
organizational structure it needs to take.
| | 01:24 | For example, inside the Explore Theme
you'll notice we have several CSS Resets.
| | 01:28 | We have Eric Meyer's famous Reset,
| | 01:30 | we have own limited reset that we've
used, and we have Yahoo's YUI 3.0 Reset.
| | 01:35 | If you're going to Google search on CSS
Resets, you're going to find pages and
| | 01:38 | pages and pages of these guys that
you can use, and you can build your own.
| | 01:41 | So I find it kind of handy, even
within a theme, to have all those resets
| | 01:45 | available so that when I create any
project, I can just start using them.
| | 01:48 | Our Forms is empty.
| | 01:49 | We're going to take care of that in
just a moment, but we have these Global
| | 01:52 | Classes that we can use, our
Global Constants that we can use.
| | 01:56 | Notice that we have various Body tags,
some that use Ariel, Tahoma
| | 01:59 | the Georgia Font Stack.
| | 02:00 | So we've got a lot of different
things going on here. And outside of just
| | 02:04 | the global things, we have specific Layout
Styles targeting different screen resolution.
| | 02:09 | We have different styles for the Home page.
| | 02:11 | You'll notice that Navigation, we have
some Base navigation styles, Home page
| | 02:15 | navigation, Sub navigation, so if
we're working a project, for example, that
| | 02:18 | isn't going to use this Sub navigation styles,
| | 02:21 | they're separated from the rest of them.
| | 02:22 | We don't have to worry about
using those snippets to get started.
| | 02:24 | That's the other thing that I want to point out.
| | 02:26 | Please don't anticipate that you're
going to be able to deliver a fully-realized
| | 02:31 | CSS file from using snippets.
| | 02:33 | What they really forced to speed the
process up, just sort to get the base and
| | 02:36 | the foundation in place,
| | 02:37 | so that after you're done with that,
you can go and style individual elements.
| | 02:40 | Okay, well we're going to go ahead
and continue to add some snippets to our
| | 02:44 | libraries, and we're going to do that
first by adding the Form styling that the
| | 02:49 | Explore California Website uses.
| | 02:51 | So we're going to add the form
styling as part of our theme. So go over to
| | 02:54 | your snippetSource.css.
| | 02:56 | This of course is a copy of the main.
css file, and I'm going to scroll down a
| | 03:01 | little bit to line 785.
| | 03:05 | You'll find that on 785 our form styling begins.
| | 03:10 | So what I'm going to do is I'm going to
start, even with this comment on line 785.
| | 03:12 | I'm going to select that, and I'm
going to drag down and select all the
| | 03:18 | way through line 852.
| | 03:20 | You'll notice that is all
of our global form styles.
| | 03:24 | Directly underneath that,
we have the individual form.
| | 03:26 | So first we're just going to take care
of sort of the generic, sort of global
| | 03:30 | form styles that any Explore
California theme page is going to use.
| | 03:34 | So with that selected, and notice we
have a wide range of text selected,
| | 03:38 | we're going to go ahead and right-
click that and choose Create New Snippet.
| | 03:43 | Now I've also highlighted the Forms
folder, so if you haven't done that yet, just
| | 03:46 | cancel out of that and go highlight that.
| | 03:48 | So Create New Snippet. I'm going to
go ahead and call this Global Form
| | 03:56 | Styles, and my Description for this is going
to be Global form styling for Explore Theme.
| | 04:05 | I also want to make sure it says Insert block,
| | 04:07 | scroll through to make sure that
everything has the closing curly brace, the
| | 04:10 | proper opening curly brace and click OK.
| | 04:13 | So it goes ahead and adds that over
there and again I can preview that by
| | 04:17 | highlighting the snippet
and taking a look at it.
| | 04:18 | Now I'm going to scroll down a
little bit further to line 855.
| | 04:24 | which is where our individual forms
start, and I'm going to start with the
| | 04:27 | support form so I'm just going to go
ahead and take every single one of these
| | 04:29 | guys out of here now.
| | 04:31 | If I'm building another project, I now
have three very distinct form looks: one
| | 04:35 | that's using a multicolumn approach to
forms, one that's using the more narrow
| | 04:38 | form, one that's using
sort of a basic, generic form.
| | 04:41 | So I'm going to have
some options for these guys.
| | 04:43 | So I'm going to start with the
support form and highlight from 855 all the
| | 04:47 | way down to line 902.
| | 04:49 | You ought to be kind of careful about this.
This thing will absolutely take off on you, if you let it.
| | 04:53 | Make sure you get that closing color brace,
and this should end right above the contact form.
| | 04:57 | I'm going to go ahead and create
a new snippet out of that.
| | 04:59 | Notice that I just love right-clicking,
and I think that's the easiest way to do
| | 05:02 | it, so either right-click or Ctrl+click >
Create New Snippet and we're going to go
| | 05:06 | ahead and call this one Support Form
Styles and the Description for this is
| | 05:15 | Style for the support form in the Explore Theme.
| | 05:24 | Once again, we're going to Insert this as a
block of code. Make sure you always do that.
| | 05:28 | Preview is going to be set to Code.
| | 05:30 | I'm going to make sure I got
everything, and then we'll click OK.
| | 05:33 | There is our next one.
| | 05:34 | And next we're going to our
contact form, so from line 904 to 940.
| | 05:40 | Again, you may have to scroll back up
a little bit. If you are like me, this
| | 05:44 | thing it will absolutely take off on you.
| | 05:44 | You want to make sure that it is just
above the joint form, and you want to make
| | 05:47 | sure you have everybody selected.
| | 05:49 | So this is our contact form.
| | 05:51 | We're going to go ahead and
create a new snippet out of that.
| | 05:53 | I'm going to call this Contact Form Styles.
| | 05:57 | The Descriptions that I'm going to give
this one is Styling for the contact form
| | 06:04 | in the Explore Theme.
| | 06:06 | You can be a little bit more
descriptive, if you would like.
| | 06:08 | So we've going to make that Insert block.
| | 06:10 | We're going to preview in
Code and go ahead and click OK.
| | 06:12 | And we have one last form to do.
| | 06:15 | And this one is going to be the join
form, so it starts at line 942. That's going
| | 06:20 | to go all the way down to a 1002, so
a good bit more going on here.
| | 06:25 | And again, you can see it's just above
the Sidebar, so line 1002, make sure you
| | 06:28 | get that closing curly brace.
| | 06:30 | I'm going to convert that to a
snippet as well, so I'll Create New Snippet.
| | 06:33 | We're going to call this one Join Form
Styles, and the Description for this one
| | 06:41 | is going to be Styling for the
join form in the Explore Theme.
| | 06:51 | Once again, make sure this is Insert
block, preview it in Code View and click OK.
| | 06:55 | All right. So now we have all of our
form styles over there. We have our Global
| | 06:59 | Form Styles so we can use
for pretty much everything.
| | 07:01 | Then we have the individual
forms: Contact, Join and Support.
| | 07:04 | Now you may have noticed that we
didn't have to modify any of the styling of
| | 07:08 | these styles. We just went and highlighted
them and converted them and converted them.
| | 07:11 | Depending upon the strategy of your
library, you may want to strip out items, like
| | 07:15 | background images or
other presentational markup.
| | 07:18 | Thankfully, we don't have
any in our form styling,
| | 07:20 | but in other places we did have
to strip that information out.
| | 07:23 | So in the case of our library, we would
strip out any background images, but we
| | 07:27 | would allow Color and Typography
to remain as part of our theme.
| | 07:30 | So you sort of set those
ground rules very early on.
| | 07:32 | What is it that I want to be part of theme?
| | 07:34 | What is it that I'm stripping out?
| | 07:36 | What am I making neutral, and what am I keeping?
| | 07:37 | And that's earlier strategy you
need to take very early in the process.
| | 07:41 | Now obviously this takes time, okay, but
building an organized library around a
| | 07:45 | specific design or a theme
isn't only that hard to do.
| | 07:49 | You'll obviously you want to take a good
deal of time to think about how you're
| | 07:53 | going to use this library.
| | 07:54 | This will help you determine
how it should be structured,
| | 07:57 | when to provide snippet variations and how
much detail your snippet code should have.
| | 08:02 | Now that degree of planning will make
you Snippet libraries easier to use and
| | 08:07 | certainly make them more
flexible in the long run.
| | Collapse this transcript |
| Building a CSS framework using snippets libraries| 00:00 | When you're working with Snippet libraries,
building them is really the hardest part.
| | 00:05 | Using it to create site content is
actually quite easy, and it should be,
| | 00:09 | because those are the
benefits of using snippets;
| | 00:11 | they make building things a little bit easier.
| | 00:13 | Now, how you build your site content
with your Snippet libraries is going to
| | 00:17 | depend on how you organized and
structure your library and the amount of options
| | 00:23 | that your specific library gives you.
| | 00:25 | In this exercise, we are going to use
our explore theme in CSS Snippet library
| | 00:29 | that we've been building in the
previous exercises to build the initial global
| | 00:33 | styles and layout for the new site.
| | 00:35 | So we are going to be working on a new
project here, and all we really want is
| | 00:38 | sort of a jumpstart to the project,
| | 00:40 | do all of our global styles written,
the layout specific styles written, then
| | 00:45 | after that, we can go in and sort
of style everything for the project.
| | 00:48 | So it's going to be sort
of a leg-up, if you will.
| | 00:50 | So what we want to do is
start with a brand-new CSS file.
| | 00:54 | So I've defined the 03_07 folder
as my root directory, but we need a
| | 00:59 | brand-new CSS file.
| | 01:01 | So I am going to say
Create New, right here, CSS.
| | 01:04 | I am going to go to File and choose Save.
| | 01:06 | I am going to go to the 03_07 CSS
folder, and inside that I want to go ahead
| | 01:12 | and name this main.css.
| | 01:15 | Now, at this point, I'm just going to
start structuring the CSS Styles document
| | 01:19 | the same way that we
would normally structure one.
| | 01:21 | I am going to let the Snippets
library assist me in doing that.
| | 01:24 | So I am going to switch over to the
Snippets panel, open the CSS folder, and
| | 01:28 | again, I am looking for the Explore
Theme that we were working on earlier.
| | 01:32 | Now again, if you don't have this,
please refer back to the earlier movies in
| | 01:35 | this title where we were sharing snippets and
importing the snippet library into Dreamweaver.
| | 01:40 | Okay, so the first thing I want to do is
I want to go down to the Utilities, and
| | 01:44 | I am going to go ahead and
placethe header in our file.
| | 01:45 | So I can get rid of this comment, we
know it's a CSS file, and I am going to go
| | 01:50 | to the Utilities > CSS Header and
double-click that, and it's going to insert
| | 01:53 | that into our document.
| | 01:54 | I am just going to change a few things
here, and make it specific for the new project.
| | 01:58 | So I am going to say
style sheet for Hansel & Petal,
| | 02:03 | that's our new client, and I
am just going to do version 1.0.
| | 02:06 | I am not going to put a modify date
on there, and I'll leave the copyright
| | 02:09 | the way it was before.
| | 02:10 | I'll go down to the next section, and
I am going to use a section indicator.
| | 02:14 | That is something that's going to
tell people that we are moving from one
| | 02:16 | section to the other.
| | 02:17 | Notice we have just got a generic
section name here, and we are going to change
| | 02:21 | that to global constants, and we'll
just leave that indicator at ^1, because it
| | 02:26 | is our first option.
| | 02:28 | So your global constants are going
to be the styles like your basic page
| | 02:31 | elements, your headings, your paragraphs,
your HTML items, things like that, and
| | 02:35 | we have an entire
directory for our Global Constants.
| | 02:38 | So I am going to go ahead and open that
up, and the first thing I am going to do
| | 02:41 | is place my html and body reset.
| | 02:43 | I use that a lot, and again, that
just sort of clears out the default page
| | 02:47 | margins and paddings that
certain browsers might place.
| | 02:50 | So we all start from the same spot.
| | 02:52 | Next thing I am going to do is go down
to the next line and just hit Return, and
| | 02:55 | I am going to open up my <body>tags.
| | 02:56 | Now here, I have some choices.
| | 02:57 | I could use Arial, Tahoma, or a Georgia
font stack, whichever one that I want.
| | 03:02 | For the design, we're doing for the
Hansel & Petal site, the Tahoma makes
| | 03:06 | a little more sense.
| | 03:07 | So I am just going to double-click that,
and that's going to import my body.
| | 03:10 | Now notice that I've got sort of a
default background color. It's just white.
| | 03:14 | So that's a perfect setup for importing
a graphic to edit that style later on.
| | 03:18 | So don't assume that your
snippets are going to come in finished.
| | 03:21 | In this case, we just have a couple of
options here that we could go ahead and
| | 03:24 | change anytime that we want.
| | 03:25 | Also, notice that this one has a top
margin of 25 pixels, which is going to sort
| | 03:29 | of push everything down the page a little bit.
| | 03:32 | We're doing that because it's specific
to the Explore layout, which is why it's
| | 03:35 | in the Explore theme.
| | 03:36 | I'm going to go down the next line,
and I am going to go back to my utilities
| | 03:39 | and add another section indicator,
and here we are going to do a CSS reset.
| | 03:44 | So I am just going to type in css reset,
change my indicator to 2 instead of 1,
| | 03:49 | and then below that I am
going to go into my CSS Resets.
| | 03:53 | Now, I am going to close some of these folders.
| | 03:55 | I don't like having a lot of folders
open when working with this, because it's
| | 03:58 | really easy to get confused.
| | 04:00 | In my CSS Reset, I noticed I have three of them:
| | 04:02 | Eric Meyer's, the limited reset that we did,
and Yahoo Interface 3.0 Reset (YUI 3.0 Reset).
| | 04:07 | If you go out on Google and search for
CSS resets, you are going to find version
| | 04:11 | after version after version of these things.
| | 04:12 | But I am just going to use the limited
reset that we've done, here we go, and we
| | 04:16 | get that on the page.
| | 04:18 | Below that, I am going to return to my
Global Constants, and inside my Global
| | 04:22 | Constants, I am going to follow up with
basic elements, and then directly after
| | 04:26 | that, notice I whenever I have to link,
I can double-click link globals and get
| | 04:29 | those in there as well.
| | 04:30 | So 81 lines of CSS already written,
right on the page, doing what we need it to do,
| | 04:35 | and we really haven't had
to code a single thing yet.
| | 04:39 | Now, if I'll scroll up a little bit,
you are going to notice that the css reset
| | 04:42 | kind of interrupts our global constants.
| | 04:45 | It just sort of inserts itself in there.
| | 04:47 | The reason for that is the cascade.
| | 04:49 | We want to go ahead and clear those
values out for elements, and then the
| | 04:53 | selectors below that are sort
of reestablishing those values.
| | 04:56 | So the order that those styles
come in is really, really important.
| | 04:58 | So remember that when you are
building your libraries, you still have to
| | 05:02 | understand the structure of your pages.
| | 05:05 | You have to understand the order that
the styles need to appear in, or you are
| | 05:09 | going to be causing more harm than good.
| | 05:10 | So really approach snippets from the
standpoint of I really know what I am doing with this.
| | 05:14 | I know the order that I need to
assemble these in, and I am just going to give
| | 05:17 | myself as many options as I
need for this particular topic.
| | 05:21 | Okay, we are almost done.
| | 05:21 | What I am going to do now is after the
last item, I am going to go ahead and add
| | 05:25 | another separator, and this particular
section is going to be global classes.
| | 05:30 | We'll go ahead and do 3 for indicator there.
| | 05:34 | Below that, we are going to go into our
Global Classes folder, and I am going to
| | 05:38 | add the global classes and the Call Out Classes.
| | 05:41 | I am just going to sort of not
put in the IE Globals. There we go.
| | 05:45 | So, all those are looking good.
| | 05:46 | We have all of our individual global
classes and we have our callouts. Now,
| | 05:51 | notice what happened here.
| | 05:53 | The callout is added to the
same line as the closing one.
| | 05:56 | Now actually, syntaxually,
that's not going to hurt anything, but
| | 05:58 | readability suffers there.
| | 05:59 | So I am going to hit Return to take
that down to this next line, and remember,
| | 06:03 | the period must remain in front of that.
| | 06:05 | So you want to be really careful.
| | 06:07 | If you ever have to go in and edit
where the CSS was placed, you want to be
| | 06:10 | really, really, really careful with that.
| | 06:12 | Okay, just below that, we are going
to go ahead and add another section
| | 06:15 | indicator, and this is
going to change to number 4.
| | 06:19 | The section name here is going to be
top-level layout styles. Here we go.
| | 06:26 | Now, I can close this Global Classes
and Global Constants, and I am going to
| | 06:30 | open up the Layout Styles, so
I can see what's going on here.
| | 06:32 | Now, here I have two different screen
resolutions that we can target: 1020 and 930.
| | 06:37 | Hansel & Petal is going to use the 1020.
| | 06:39 | So I am going to go ahead
and open up my 1020 styles.
| | 06:42 | The first thing I am going to do is add
the wrapper for a 1020 width, so notice
| | 06:46 | that, again, neutral background can be
changed to another color or a background
| | 06:50 | image, centers it on the page,
and the width is targeting 1020.
| | 06:54 | I am going to hit Return to go down the
next line, and I am going to open up my
| | 06:58 | headers, and I am going
to do a header for 100x600.
| | 07:02 | So instead of the Explore California
site, where we had just that really, tall
| | 07:07 | thin header, we're going to have a
really wide, short header, more of a banner
| | 07:11 | type header in this particular layout.
| | 07:12 | Directly after that, I am going to
go over to my Layout Styles and add
| | 07:15 | my top-level layout.
| | 07:17 | So these are all of the individual
settings for sidebar, mainContent, mainNav,
| | 07:21 | so all of their layout.
| | 07:22 | Notice that this code is extremely stripped out.
| | 07:25 | It's not presentation at all. It's just layout.
| | 07:28 | That is all that's there.
| | 07:29 | So I am going to go ahead and save this,
and we are only going to need to make a
| | 07:32 | couple of minor modifications to our
styles in order for it to give us a
| | 07:37 | starting point for the Hansel & Petal.
| | 07:40 | So the first thing we want to do is I
am going to go up to the very top of the
| | 07:43 | page, find the <body> tag here, and I
am going to change the background color.
| | 07:46 | So again, it's one of the nice
things about it. Fff is neutral.
| | 07:49 | You'll never notice it, but it does give
us a property that we can go ahead and edit.
| | 07:53 | So what I am going to do here is
edit this to a5bf94. So a5bf94.
| | 08:02 | So now we have a solid background
color that we are going to be using for our
| | 08:06 | <body> tag, and it relates a little bit
more with the color scheme and the theme
| | 08:10 | of the Hansel & Petal Web site.
| | 08:11 | I am going to scroll down a little bit
and find the header selector, which is
| | 08:15 | going to be found right at about Line
138 in mine; yours might be in a little
| | 08:20 | bit different location, but
it's in those main layout styles.
| | 08:22 | So in order to keep these now in
alphabetical order, I am going to go up to the
| | 08:25 | first property and hit Return.
| | 08:26 | It gives me a blank line here,
and then I am just going to type in
| | 08:29 | background, and after that, type in a u, and I
am going to let code hinting do the rest for me.
| | 08:34 | When it goes down to the link,
I'll hit Return, and I get to browse.
| | 08:38 | Now, I am going to go up to the 03_
07 folder, I'll go up to the _images
| | 08:41 | directory, and the only image I've got
in there is this Hansel & Petal banner
| | 08:45 | graphic, and that's what I want to use.
| | 08:47 | I am going to go ahead and click OK,
and I only want it to show one time, and
| | 08:50 | I'll type in a semicolon. There we go.
| | 08:52 | So I'll go ahead and save that, as well.
| | 08:55 | Finally, we have one more thing to do
here. Because we are using the sort of
| | 08:59 | longer, skinnier background image, the
main page content and things like that need
| | 09:03 | to sort of move down a little bit.
| | 09:04 | So I am going to find this mainNav, and I
am going to change a couple of things here.
| | 09:09 | I am going to change top
margin to 133, rather than 233.
| | 09:13 | Then I am going to scroll
down and find mainContent.
| | 09:15 | It should be right below that.
| | 09:17 | I am going to add a margin-top
property to that and give that 100 pixels.
| | 09:22 | So that's going to push the
mainContent down just a little bit.
| | 09:24 | Now I am going to go ahead and save
this, and I want to go to my Files panel
| | 09:28 | and open up start.htm.
| | 09:30 | Start page already has link to the
main.CSS in it, and you can see, there's
| | 09:34 | not much going on here.
| | 09:35 | It's just some place holder content.
| | 09:37 | Now I want to Save All, and I
want to preview that in my browser.
| | 09:41 | Let's take a look at it.
| | 09:45 | To be honest, this page
looks terrible. But that's okay.
| | 09:49 | It's because we still need to do
things like hide this header text up here.
| | 09:52 | We're going to hide that.
| | 09:53 | We've got to add padding and margins to
page elements, control navigation style.
| | 09:57 | You can see over here, we still have
bullets showing up, and all those other
| | 10:00 | presentation styles.
| | 10:01 | We still have a lot of them in our library.
| | 10:03 | That, however, is not the point.
| | 10:05 | The point is look how fast we created a
two-column layout with a CSS Reset using
| | 10:10 | our snippets library.
| | 10:11 | If our Explore theme library had
extensive presentation styles snippets, the
| | 10:15 | rest of our job would be even easier.
| | 10:18 | Having organized, well-structured
snippet libraries enable you to rapidly build
| | 10:22 | complex style sheets.
| | 10:24 | Properly planned, snippet libraries can
be an amazing time saver, helping you to
| | 10:28 | get the foundation of your site out of
the way quickly so you can have more time
| | 10:32 | to focus on specific design elements.
| | Collapse this transcript |
|
|
4. Deploying StylesWriting a print style sheet| 00:00 | As Web designers, we are likely to
get caught up and writing styles for the
| | 00:04 | screen without taking into
consideration that there are many other devices such
| | 00:08 | as printers that are
likely to consume your content.
| | 00:11 | If your site is not equipped with
printer styles, pages will be printed as
| | 00:15 | unstyled content, or by using
your site's default styles.
| | 00:18 | Now, the good news is that writing
print style sheets is incredibly easy to do
| | 00:22 | and gives us the ability to create an
entirely new look and feel for our site,
| | 00:26 | designed specifically for the printed page.
| | 00:30 | So I have the resources.htm file
open in the 04_01, and I'm just going to
| | 00:35 | preview this really quickly in our browser.
| | 00:38 | So I'm going to preview that in Firefox,
and I'm going to go up and do a Print Preview.
| | 00:43 | So on the Mac, you could go ahead and do
Print and then click the Preview button.
| | 00:47 | And now we get to see what
this page would look printed out.
| | 00:49 | So we have a nice, big headline that
shouts Welcome to Explore California, an
| | 00:53 | unordered list that doesn't mean anything on
the printed pages, an image, boy, that looks horrible.
| | 00:58 | Look at that.
| | 00:59 | The page breaks are happening poorly.
| | 01:01 | There's some really bad stuff going on here.
| | 01:03 | Our sidebar information is printed.
| | 01:05 | Now, some of the things that people
might want such as the address here is
| | 01:09 | printing out just all by itself.
| | 01:11 | So not really what you would want in
terms of user experience, or in terms of
| | 01:16 | passing brand from one medium to the other.
| | 01:19 | So I'm going to close that, close my browser.
| | 01:21 | Let's go back into our Resources page
and begin to create our print style sheet.
| | 01:27 | So what I'm going to do is open up my
CSS Styles panel, and with that open, I'm
| | 01:31 | going to go over to the New CSS Rule,
that little icon right there. Click on that.
| | 01:37 | And the first thing we're
going to do is a compound selector.
| | 01:40 | We're just going to go ahead and
basically tell certain elements not to print.
| | 01:43 | There are certain things we don't need to print.
| | 01:45 | The navigation doesn't need to print.
| | 01:47 | You cann't navigate using the print document.
| | 01:49 | The sidebar information
probably doesn't need to print.
| | 01:52 | The footer information doesn't
need to print, the header information.
| | 01:55 | So we're just going to go ahead,
and do the following selectors.
| | 01:57 | So type in #header, #mainNav, #sidebar, #footer.
| | 02:07 | Okay, so we're going to define that, not in
main.css, but in a brand-new style sheet file.
| | 02:12 | So this is kind of an interesting
technique because here, we're going to create
| | 02:16 | a brand-new CSS rule, put it in an
external style sheet and link the external
| | 02:20 | style sheet to this page, all in one step.
| | 02:22 | So that's pretty cool.
| | 02:23 | I'm going to go ahead and click OK,
and I'm going to save our brand-new
| | 02:27 | external style sheet in the _css
directory, and I'm just going to call it
| | 02:31 | print.css, perfect.
| | 02:33 | I'm going to go ahead and save that.
| | 02:34 | Now our CSS Rule Definition dialog box comes up.
| | 02:37 | So it went ahead and created the style
sheet for us, linked it to the page, and
| | 02:41 | now we're free to go ahead and place
styles inside of it, which is really cool.
| | 02:45 | Now, I'm going to go to the Block
category, and the first thing that I want to
| | 02:48 | tell this is to display none.
| | 02:50 | I don't want these to print out at all.
| | 02:52 | So display none, I'm going to go
ahead and click OK and do a Save All.
| | 02:57 | Now, I wasn't going to say well, look,
nothing on the page changed, but nothing
| | 03:00 | could be further from the
truth; a lot of stuff changed.
| | 03:03 | So what happened here?
| | 03:04 | Well, if I look over at my CSS Styles
panel, and I'm just going to roll the
| | 03:07 | Files panel down a little bit here, you
can see that the print.css style sheet
| | 03:12 | looks very different up here from the main.css.
| | 03:14 | Let me collapse those so
you can see them together.
| | 03:16 | Notice main.css says hey, I'm only
affecting screen of projection but print,
| | 03:21 | it's mum on that issue entirely.
| | 03:24 | So if a style sheet does not have a
media type assigned to it, it goes ahead
| | 03:28 | and applies to all media types, which
in this case is causing us some big
| | 03:32 | problems here onscreen.
| | 03:34 | So we need to tell the print style sheet
that indeed it only affects the printed page.
| | 03:38 | You'll notice we didn't get that prompt
| | 03:40 | when we created the style sheet that
way. That's for me one of the drawbacks of
| | 03:44 | using that, but it's easy enough to put
in ourselves, and we'll just switch over
| | 03:46 | to code and do it very quickly.
| | 03:48 | So I'm going to switch over to Code
View and in Code View, I want to find Line
| | 03:51 | #7, that's where my print
style sheet has attached itself.
| | 03:55 | At the very end of that, I'm going to
add media="print", and you can just go
| | 04:00 | ahead and let code
hinting help you out with that.
| | 04:02 | Just make sure that you have the self
closing tag done right, space forward
| | 04:05 | slash and that there'll be end of the tag.
| | 04:07 | So I'll go ahead and save that
and switch back into Design View.
| | 04:11 | Now what's really interesting here
in Design View, we get our page back,
| | 04:14 | yay, right?
| | 04:15 | Everything is showing up again. And over here,
it says print.css, and this says print.
| | 04:19 | Now, I want to introduce you to
a toolbar that you may have seen.
| | 04:22 | I know we've talked about a little bit
earlier, but you may have never used it,
| | 04:25 | and it's this toolbar right here.
| | 04:27 | This is the Style Rendering toolbar.
| | 04:29 | If you don't see it, you can go up to
View, choose toolbars, and you want the
| | 04:33 | Style Rendering toolbar.
| | 04:34 | You can also right-click the
Document toolbar and choose it that way.
| | 04:37 | Now, this toolbar can float unless
you are on a Mac, in which case it's always
| | 04:42 | going to remain docked
with the Document toolbar.
| | 04:45 | I like it being there as well, and so
I'm using to have it docked somewhere on
| | 04:49 | the Document toolbar, usually on the
right-hand side, but left-hand is fine, too.
| | 04:52 | It's not really hurting anything.
| | 04:53 | And what I'm going to do now is going
to make designing our print style sheet
| | 04:57 | a lot easier for us.
| | 04:58 | So what I'm going to do is go over to
the Style Rendering toolbar, and I'm going
| | 05:01 | to tell it to render the Print Media Type.
| | 05:03 | As soon as I do that, notice that the
page entirely changes, and now we're
| | 05:07 | seeing a preview of what the
printed page is going to look like.
| | 05:11 | This is really cool.
| | 05:13 | This means that we can start
designing inside of our print style sheet,
| | 05:16 | adding selectors to it, and we'll see
the changes here directly in our screen,
| | 05:19 | which is really neat.
| | 05:20 | Now let's add a few more
selectors to our print style sheet.
| | 05:23 | So I'm going to go over to my CSS
Styles panel and click on the selector that
| | 05:27 | I have here already.
| | 05:29 | And I'm going to go ahead and
create a brand-new CSS Rule.
| | 05:32 | Now for this one, again, I'm going to
go down to Compound because I'm going to
| | 05:34 | be grouping some selectors together.
| | 05:36 | I'm going to type in a.breadcrumb, that's
the links at the top of the page, comma
| | 05:42 | a.top,ul.faqNav so faqNav.
| | 05:52 | So three other elements:
| | 05:53 | breadcrumbs, links at the top of the
page and any unordered list that is part of
| | 05:58 | the faq.navigation, so those were
actually links that you could click on to jump
| | 06:02 | further down the page.
| | 06:03 | I'm going to make sure that
they're being defined in the print.css.
| | 06:07 | I'm going to go ahead and click OK,
and I'm going to go to the Block category
| | 06:10 | and once again, I'm going
to tell it to display none.
| | 06:13 | So while I think they are great,
| | 06:15 | I certainly don't need to
see them in the printed page.
| | 06:17 | So I'm going to go ahead and Save All.
| | 06:20 | If you're working on your print styles,
you don't have to create all of them
| | 06:24 | within the CSS Styles panel.
| | 06:25 | I'm going to go ahead and collapse the
CSS Styles panel down to Icons, switch to
| | 06:29 | a Split View and click on the print.css.
| | 06:33 | So I'm actually working
on the print style sheet.
| | 06:35 | So again, I can see the
Design View to the right of me.
| | 06:37 | It's showing my print styles, and on
the left-hand side, I get my code. Cool!
| | 06:41 | Let's do a couple of more styles here.
| | 06:42 | Let's type in #wrapper and put up curly
brace, hit Return to go down to the next
| | 06:47 | line, and here we're going to just
type in width and then 6.5in, for inches.
| | 06:54 | Now that, my friends, is interesting, is it not?
| | 06:57 | Let's go ahead and close our curly brace.
| | 06:59 | Now every single medium you design
for is different, and I've had plenty of
| | 07:03 | students asked me before, why in
the world you can use inches in CSS?
| | 07:08 | It doesn't translate to the screen at all.
| | 07:10 | No, but it translates to the printed page.
| | 07:12 | So when you're doing a print style sheet,
it's really handy to be able to use inches.
| | 07:15 | I'll go down to the next line.
| | 07:17 | I'll type in body, and in the body tag
selector, I'm going to do a font-family,
| | 07:23 | and I want to do a font-
stack that I don't see here.
| | 07:26 | So this is one of the cool
things about working in Dreamweaver.
| | 07:28 | If you want to do a font-stack that
you don't already see, you can click Edit
| | 07:32 | Font List, and that comes right up.
| | 07:34 | I'm actually going to check for
Chaparral Pro, and after Chaparral Pro, I'm
| | 07:39 | going to do Cambria.
| | 07:40 | So I'm going to find Cambria. There we go.
| | 07:44 | After that, I'm going to do
Georgia and then a San Serif.
| | 07:48 | Now, if you're wondering, these are
fonts, at least the first couple of them, that
| | 07:52 | are more likely to be installed on your machine.
| | 07:55 | Because these styles are for the
printed page, I have a little bit more freedom
| | 07:59 | in working with specific types of fonts.
| | 08:01 | In this case, Chaparral Pro comes
with a lot of programs these days.
| | 08:04 | It's installed on a lot
of machines. So is Cambria.
| | 08:07 | And then finally, I have
a Georgia fallback font.
| | 08:08 | So these are more print friendly fonts and
at the very end, I'm going to add the Serif.
| | 08:12 | There we go.
| | 08:13 | So if you don't like the font stacks
that are in there, you can build your own.
| | 08:15 | I'm going to go ahead and choose that
one and click OK, and then I can scroll
| | 08:19 | down and grab it, hit Return,
and it finishes it for me.
| | 08:22 | You don't have to do that every single time.
| | 08:24 | You only have to do at once,
and it will remain in there.
| | 08:26 | After that, I'm going to do font-size and my
font-size is going to be 12 points. Points, ya!
| | 08:35 | So again, all of our graphic designers,
when I tell them only when you're doing
| | 08:38 | the style, print styles sheets can use points.
| | 08:40 | They get so excited because they know exactly
what 12-point text is supposed to look like, right?
| | 08:43 | All right, now I'm going
to do a line-height here.
| | 08:46 | So I'm going to do a line-height of 16 points.
| | 08:48 | So now we're just going to go ahead and
continue using points for the units of
| | 08:52 | measurement when we deal with the print page.
| | 08:54 | Let's do one more selector.
| | 08:55 | Hit Enter, go down and do an h1 selector
and here, we're going to do a font-size
| | 09:01 | of 20 points, font-weight of normal -
| | 09:07 | so I don't want it bold - and
a margin-bottom of 20 points.
| | 09:15 | Again, we're working in points is quite
extensively here, so there is our h1 selector.
| | 09:18 | All right, so now, let's see
if this looks any different.
| | 09:21 | We're going to do a Save All.
| | 09:22 | We're going to preview this in our browser.
| | 09:24 | Now once again, we're going to do a Print Preview,
and that looks a lot better. Notice the font.
| | 09:30 | Again, there's Chaparral Pro font in here.
| | 09:32 | Everything is looking pretty decent
at least, or at least it's moving in
| | 09:35 | the right direction.
| | 09:36 | Let's put it that way.
| | 09:38 | Now if we were satisfied with just
changing the look of the printed pages, all
| | 09:42 | we would really need to do is continue
to style a couple of these individual
| | 09:45 | elements here and there;
| | 09:46 | however, there are some styles that are
specific to print styles, and they can
| | 09:50 | only be used with the printer, and they
give us a pretty powerful functionality.
| | 09:54 | In our next movie, we're going to
explore some of those print-specific
| | 09:57 | styles and a few other techniques
that can make our print style sheets even
| | 10:01 | more powerful.
| | Collapse this transcript |
| Creating print-specific styles| 00:00 | One of the really cool things that
CSS allows us to do is design for a
| | 00:04 | specific environment.
| | 00:06 | In our previous movie, we wrote some
basic styles that control how our site
| | 00:11 | looks when it prints.
| | 00:12 | We can take that even further by
writing styles that are specific to the
| | 00:16 | printed environment itself.
| | 00:18 | CSS properties like page-break allow
us to write styles that target that
| | 00:23 | environment and give us even more
control over how our style prints.
| | 00:27 | So, I have the resources.htm
file open from the 04_02 folder.
| | 00:34 | Now, if I take a look at our print
style sheet, I can see that the style sheet
| | 00:37 | that we started in the previous movie,
really the only thing that's been done is
| | 00:42 | some of the additional elements on the
page have been styled, just so that we
| | 00:44 | have more of a finished
product to work with here.
| | 00:47 | All right, so I'm going to preview this
page in our browser, and I'm going to go
| | 00:51 | to my print preview, so that I can
kind of see how the printed page looks.
| | 00:55 | It's looking pretty good, but there's a problem.
| | 00:59 | It might be a minor problem, but it
still looks like a problem for me.
| | 01:02 | Trip planning is fine, but look at
Tour checklist. Look how that's breaking.
| | 01:06 | It's always kind of annoyed me when I
print out some of these Web sites, and I
| | 01:10 | get half of the information on one page,
and half of it on another page, and it
| | 01:14 | really kind of gets jumbled up.
| | 01:16 | So, I want to force page-breaks, and
that's really easy to do by using the
| | 01:21 | page-break-before or the
page-break-after property.
| | 01:25 | So let's go ahead and write a couple
of styles that we can use to control
| | 01:28 | specific elements and whether they
need a page-break-before or after them.
| | 01:33 | It's probably easier just to do this
in code, so I'm going to select the
| | 01:36 | print.css, switch over to code view, and
I'm going to go all the way down to the
| | 01:40 | bottom, and at the bottom of the
page, I'm going to type in .pb.
| | 01:44 | Now, because it's a class, it has to
start with a period, dash before, and I'm
| | 01:49 | going to go ahead and open up a curly
brace and in the line below that, I'm
| | 01:52 | going to type, page-break.
| | 01:55 | Now, notice that we have page-
break-after, page-break-before,
| | 01:59 | and page-break-inside.
| | 02:00 | I'm going to go ahead and do page-break-
before, which would insert a page-break
| | 02:04 | directly before the affected element.
| | 02:06 | And I'm just going to go
ahead and type in always.
| | 02:08 | Notice that we can also have avoid,
auto, all those types of things.
| | 02:12 | That actually leads some
very interesting settings.
| | 02:15 | You could take a heading, for example,
and do a page-break-auto, and if the
| | 02:19 | heading was a little long, and was
forcing page-break, your browser would go
| | 02:23 | ahead and insert the page-break itself.
| | 02:25 | I've had mixed results
with doing that sort of thing.
| | 02:28 | Sometimes, it works really well.
| | 02:29 | Sometimes browsers don't pick up on it.
| | 02:30 | So, I actually prefer to control mine manually.
| | 02:34 | Now, I am going to go down the next
page. I'm going to type in .pb-after,
| | 02:39 | and once again, I'm going to do page-
break, and this time, we're going to do
| | 02:44 | a page-break-after.
| | 02:46 | In this case, I'm going to do always as well.
| | 02:49 | So, I'm going to do always for both of them.
| | 02:51 | Now the reason I like controlling
these manually is it's just a little bit
| | 02:53 | easier for me to do a print preview, find a
page and say, yeah, that needs a page-break.
| | 02:57 | Now, on larger sites, or sites where
you have a lot of dynamic content being
| | 03:00 | generated, that's not always possible.
| | 03:02 | So, sometimes you can set up these guys to
automatically do a page-break if they need it.
| | 03:07 | So, you could maybe make that
part of your paragraph style;
| | 03:10 | A page-break-before:
| | 03:11 | auto, and it would just go ahead
and assign one wherever needed.
| | 03:14 | I'm going to do a Save All.
| | 03:16 | Now, we need to go apply these classes.
| | 03:18 | I'm going to go back to my design environment.
| | 03:20 | I'm going to scroll down a little bit,
and remember, Trip planning was okay, but
| | 03:24 | Tour checklist was the one
that really needed the page-break.
| | 03:26 | So, I'm going to select Tour
checklist, click on the h3, and in my HTML
| | 03:30 | properties, I'm going to go ahead and
go pulldown menu, and I'm going to choose
| | 03:33 | pb-before, so that there's a page-
break before the Tour checklist.
| | 03:38 | Now, that class only applies to your print
style sheet, but it is part of your HTML now.
| | 03:42 | I can do a Save All.
| | 03:44 | Notice that if I go back, right here, and
render my screen media type - so this is
| | 03:47 | my Style Rendering toolbar,
| | 03:49 | notice that still visually no
different whatsoever. So this is only going to
| | 03:53 | affect the printed environment.
| | 03:54 | We're going to go ahead and
preview that in the browser again.
| | 03:57 | I'm going to go ahead and do a print preview.
| | 04:00 | Now, sure enough, notice that Trip
planning is right there, but Tour checklist
| | 04:04 | is now breaking down to the next page.
| | 04:06 | So, that is a much nicer presentation of that.
| | 04:09 | We get to control that within the printed
environment, which is really, really cool.
| | 04:12 | All right. Let's go ahead and take a look at
some of the other things that we can do
| | 04:15 | for the printed page that
isn't necessarily a print-only property.
| | 04:19 | CSS can do a lot of things.
| | 04:21 | One of really cool things it
can do is it can generate content.
| | 04:24 | You can basically tell a browser, or any
type of device that when you experience
| | 04:28 | this particular element, go ahead
and generate this content after it.
| | 04:31 | As you can imagine, there are
some incredible usage for that.
| | 04:35 | Now, you'll notice that on the page, I
have a sentence here that says, for more
| | 04:38 | information on traveling
to California, check here.
| | 04:41 | Now, on the printed page,
what is check here referring to?
| | 04:43 | That doesn't make any sense, and if I
look at that with the screen styles turned
| | 04:47 | on, well, that's pretty obvious; it's a link.
| | 04:49 | So, checking here would click to take
you to a Web site, but when you're looking
| | 04:53 | at your print style sheet,
not only is that not obvious;
| | 04:56 | you have no idea where to check.
| | 04:58 | So, what we're going to do is we're
going to write a pretty advanced selector
| | 05:01 | that allows you to generate content
after any external link, so that people that
| | 05:05 | print your page out will
have that Web address later on.
| | 05:08 | All right, so let's take a
look at how we can do that.
| | 05:10 | I'm going to switch back to code view,
again, focusing on the print.css
| | 05:14 | Scroll all the way down to the bottom,
and I'm going to add a selector right
| | 05:17 | down here at the bottom.
| | 05:18 | Now, this is going to be an attribute selector.
| | 05:20 | Now, I'm sure some of you have done
attribute selectors before, but for those of
| | 05:23 | you that have not, attribute selectors
allow you to basically say, okay, I want
| | 05:28 | to style this particular
element when it has this attribute.
| | 05:31 | You can be as specific as you want.
| | 05:33 | You can just say if it has the attribute,
you can say, if its attribute is this
| | 05:38 | value, or you can do what we're
going to do, which is to say, if it has an
| | 05:41 | attribute that contains at least
this particular string of characters.
| | 05:45 | So, what I'm going to do is I'm going to
type in a, for link, and then open up a bracket.
| | 05:48 | That bracket indicates that
this is an attribute selector.
| | 05:51 | Now, for that, I'm going to type
in href, and then close my bracket.
| | 05:55 | We're going to add more to this, but
I want to explain this piece-by-piece
| | 05:58 | for those of you that maybe haven't dealt
with attribute selectors before in the past.
| | 06:02 | This selector would target
any link with an HREF attribute.
| | 06:06 | So, any link that actually goes
someplace, to a local page or to a remote page,
| | 06:11 | whatever, this would apply to that.
| | 06:13 | Now, let's get a little
bit more specific with this.
| | 06:15 | After the HREF, what I
want you to do is type in ^=.
| | 06:20 | That's a special character, obviously.
| | 06:22 | It's basically saying if
it contains the following.
| | 06:25 | Now, after the equals, type in a
quotation mark, type in http://, and then close
| | 06:33 | your quotation mark.
| | 06:34 | Okay, so what is that saying?
| | 06:35 | Well, it's now saying, find any link with
an HREF attribute that contains http://.
| | 06:44 | The only time that condition is going
to be met is when we're dealing with an
| | 06:47 | external link, a link
that goes away from our site.
| | 06:50 | If you think about it, that makes sense.
| | 06:51 | What we're going to be doing here is
displaying the link, so that people that
| | 06:55 | print this out know where to go later on.
| | 06:57 | Well, they don't need to know that
you're going to click to go on the Contact
| | 07:00 | page, or you're going to
click to go to the Index page.
| | 07:02 | That really doesn't make a whole
lot of sense to show them that.
| | 07:04 | But if you're navigating away from
the site, that's going to be a resource
| | 07:07 | they're going to want to know about.
| | 07:09 | Okay, now let's go write
the rest of the selector.
| | 07:10 | Right after the bracket, type in :after.
| | 07:15 | So now, what we're doing is
we're using a pseudo-selector.
| | 07:17 | Now, most you are probably familiar
with pseudo-selectors, at least the Link,
| | 07:21 | Hover, Visited, Active, maybe even the
Focus one, that sort of thing, but after
| | 07:25 | is one that you may or
may not have used before.
| | 07:28 | After is essentially saying, once you find
this, directly after it is what I want you to do.
| | 07:34 | So, this pseudo-selector is
basically saying, after the element that you
| | 07:37 | find, let's do something.
| | 07:38 | Okay, I'm going to go ahead and open
up my curly brace, hit Enter and go
| | 07:41 | down the next line.
| | 07:42 | Here, I'm going to type in the property content.
| | 07:45 | The content property allows you
to generate content on the page.
| | 07:48 | So, essentially, what we're saying is
after you find the absolute link, we want
| | 07:51 | to generate some content.
| | 07:52 | Let's take a look at the
content that we want to generate.
| | 07:54 | I'm going to type in space, and
then a quotation mark, and then another
| | 07:59 | space, and that's going to give us a little
bit of space between the link and this content.
| | 08:03 | Now, I'm going to type in a parenthesis.
| | 08:04 | I'm going to type in
online at, and then a colon.
| | 08:08 | What's interesting about this is
because we opened up a quotation mark, this
| | 08:11 | is a literal string.
| | 08:12 | That means that this content is
going to be displayed on the page.
| | 08:16 | So, these strings of characters, such
as a literal string, Dreamweaver doesn't
| | 08:19 | really care what it is.
| | 08:20 | The browsers don't really care what it is.
| | 08:22 | They're going to place that directly
after any link that's an absolute link.
| | 08:25 | Now, I'm going to go ahead and close
my quotation marks, because here I need
| | 08:29 | to go grab a value. Check this out.
| | 08:31 | I'm going to type in attr, and then in
parentheses, href, close my parenthesis,
| | 08:39 | close quotations marks.
| | 08:40 | Now, what is that doing?
| | 08:41 | Well, essentially, we're doing concatenation.
| | 08:43 | Concatenation is just another way of saying
we're joining a couple of things together.
| | 08:46 | So, what we're doing is we're taking
these literal strings, the text "online at,"
| | 08:51 | and then directly after that,
we're going to place an attribute.
| | 08:55 | We're going to place the HREF attribute.
| | 08:56 | So, it's basically saying, hey, go get
the contents of this HREF attribute and
| | 09:01 | place it right here.
| | 09:03 | So, it's going to say, online at,
then whatever the link would be.
| | 09:06 | Now, we still need to finish something here.
| | 09:07 | Remember, we have parentheses around
this, so I'm going to go ahead and close
| | 09:12 | the parentheses and close the quotation marks.
| | 09:14 | Type in a semicolon, and
then we're done with that rule.
| | 09:17 | That is a really complex selector.
| | 09:19 | Let's take a small second
to go over it one more time.
| | 09:21 | So, we're saying anytime you find a
link with an HREF attribute that contains
| | 09:26 | http://, so any external link, after
that selector, we want you to generate some
| | 09:33 | content, and we want you to generate
the text saying, online at, and then go
| | 09:39 | grab that HREF attribute, place that
there, and close your parenthesis out.
| | 09:44 | Let's Save this, and we'll just see if it works.
| | 09:47 | I want to preview this in our browser.
| | 09:51 | I'll do another print preview.
| | 09:52 | If I scroll down, you can see, right
here, for more information on traveling to
| | 09:59 | California, check here (online at:
http://www.visitcalifornia.com). Cool!
| | 10:04 | So, it's pulling the information we want,
it's formatting it the way we asked it
| | 10:08 | to, and our print style
sheet is a lot more robust now.
| | 10:11 | It's allowing us to control exactly how
our content is presented on the printed page.
| | 10:15 | We can determine which elements print,
how they look, and even have a granular
| | 10:20 | level of control over how our pages behave.
| | 10:22 | Now, the best part about all of this
is that print style sheets really don't
| | 10:26 | take that long to create.
| | 10:27 | They add an amazing amount of
value for your site's users.
| | 10:31 | My advice is to go ahead and create
your print style sheets at the same time
| | 10:35 | you're writing your other styles.
| | 10:37 | This is going to ensure they get
finished along with the rest of the site, as
| | 10:40 | well as making it easier to apply print
-specific styling to individual pages.
| | Collapse this transcript |
| Preparing modular styles| 00:01 | Earlier in this title, we discussed
the advantage of separating the styles in
| | 00:04 | your style sheets into sections.
| | 00:07 | By creating separate sections for
items such as layout, typography, or page
| | 00:11 | regions, you create more organized files
and make editing and maintaining them easier.
| | 00:16 | You can take that concept a step
further by creating what's known as
| | 00:19 | modular style sheets.
| | 00:20 | The modular style sheets are created by
separating the site's CSS into individual
| | 00:26 | style sheets and then
reassembling them at run time.
| | 00:30 | Before we discuss how to assemble
style sheets at run time, let's focus on
| | 00:33 | preparing our modular stylesheets by
separating our styles into separate files.
| | 00:38 | So, I have the main.css
open from the 04_03 folder.
| | 00:42 | What we're going to do is we're going
to separate out a couple of sections of
| | 00:46 | styles that not every
single page is going to need.
| | 00:49 | We have a full set of styles for table design,
and we have a full set of styles for forms.
| | 00:54 | But not every page is going to be using tables,
and not every page is going to be using forms.
| | 00:59 | So, if that's the case, then
really loading up those styles is pretty
| | 01:02 | much wasted content.
| | 01:04 | So, we're going to go ahead and
separate that out, and then just let the site
| | 01:06 | call for those styles when it needs them.
| | 01:08 | So, the first thing I'm going to do is I'm
going to go up to File and choose Save As.
| | 01:13 | And I'm going to save this
in the 04_03/_css directory.
| | 01:18 | And I'm just going to call this one global.css.
| | 01:22 | So, this is going to contain
the majority of our global styles.
| | 01:24 | Now, before we go too far down this road,
I want to talk a little bit about strategy.
| | 01:29 | The reason I'm separating out the table
styles and the form styles is they are
| | 01:33 | pretty easy to separate.
| | 01:35 | In a lot of cases, when people are
creating modular styles, they'll put their
| | 01:38 | layout styles in one file.
| | 01:40 | They'll put their typography in another
file, their color treatment in other file.
| | 01:43 | It's really up to you in terms of how
you want to separate these styles out.
| | 01:48 | You can separate them out like content,
or you can separate them out by the type
| | 01:51 | of selectors you're dealing with. Okay.
| | 01:54 | So now what I'm going to do is
go down and find my table styles.
| | 01:56 | I'm going to scroll down all the way
to around 600 -- line 698. All right!
| | 02:00 | So, 683. Here we go.
| | 02:04 | So, there is our data tables.
| | 02:05 | We're going to go ahead and take that.
| | 02:06 | so, I'm going to highlight all the way
down to about line 738. There we go -
| | 02:12 | just above this spotlight region.
You want to make sure you'll getting that last
| | 02:15 | curly brace there, too.
| | 02:16 | I'm going to go ahead and cut those.
| | 02:17 | So, Command+X or Ctrl+X, so there we go.
| | 02:21 | I'm going to go ahead and cut that out.
| | 02:23 | Now, create a new file, and we're
looking for a new CSS file. Create that.
| | 02:28 | And then go ahead and paste the
table styles that you just cut from
| | 02:33 | your previous CSS file.
| | 02:35 | We're going to go ahead and do a save on that.
| | 02:37 | We want to save that in the 04_03/_css.
| | 02:42 | And we're going to save this one as table
_styles.css, tables underscore styles.
| | 02:49 | I am going to close that.
| | 02:50 | Next, I'm going to go back into my global.css.
| | 02:54 | I'm going to strip out some more styles.
| | 02:55 | I'm going to go down to around line 705.
| | 02:56 | I can found my form styling here.
| | 02:59 | I'm just going to go ahead and
highlight that all the way down, and there is
| | 03:02 | a lot of form styles.
| | 03:04 | Pass 900 to about 919.
| | 03:07 | You can see right there the sidebar is the
next divider that you have to worry about.
| | 03:11 | Make sure, again, you're getting the closing
curly brace, and cut that so Ctrl+X. There we go.
| | 03:17 | We'll remove some of the extra space there.
| | 03:19 | And then we're going to go ahead
and create a brand-new file, CSS again.
| | 03:23 | We're going to paste the code
that we just cut into that file.
| | 03:27 | And we're going to save this as form_
styles.css and go ahead and save that, as well.
| | 03:38 | Close that.
| | 03:39 | Our global CSS is considerably shorter.
Where it was past 1,000 lines of code before,
| | 03:43 | now, it only goes out to 130, so we're
saving a little bit of weight there.
| | 03:47 | I do want to go back up, however,
and modify table of contents.
| | 03:51 | I'm just going to go ahead and get rid of
data tables, and I'm going to get rid of forms.
| | 03:57 | Now, if we were doing this for real,
we'd probably want to update the
| | 04:00 | identifiers too, but as it is,
they are fine where they are.
| | 04:03 | Now, obviously we could have chosen
from a variety of organizational strategies
| | 04:07 | for these modular styles.
| | 04:09 | By separating forms and tables, we
remove hundreds of lines of code.
| | 04:12 | The most were pages we don't even need.
| | 04:15 | Now, we could have just as easily
separated layout, typography color,
| | 04:18 | any of those other groups that I
was talking about, the exact same way.
| | 04:20 | Well, now that we've our styles
separated, we need to make sure each page in our
| | 04:25 | site is getting exactly the styles that needs.
| | 04:28 | We'll do that in our next movie, as
we learned to build modular styles.
| | Collapse this transcript |
| Creating modular style sheets| 00:01 | Now that we have separate style sheets
for our tables and forms, we have a few
| | 00:04 | options for how to apply them
to the pages that need them.
| | 00:08 | The first option would be to add another
link on the page to the necessary page.
| | 00:11 | So, let me switch over to Code View
real quick, and you can see right there is
| | 00:16 | the link to our main style sheet.
| | 00:17 | So, if we needed to, we could add on
the link tag below this that would link to,
| | 00:20 | say, the table styles or the form
styles, whatever we would need.
| | 00:24 | Now, we do have a title attribute.
| | 00:26 | Notice this title attribute right there.
| | 00:28 | Now, that lets the browser know
that this is the default style sheet.
| | 00:32 | If you've got more than one link tag,
it's really hard to blend all those guys
| | 00:36 | together and let them know that
those are the default style sheets.
| | 00:39 | That can become an accessibility problem.
| | 00:42 | So, we want to try to avoid
that a little bit. All right!
| | 00:45 | So, I want to switch over to our main.
css, right up here in our related files.
| | 00:50 | Honestly, it's going to take you forever to
highlight this thing. There so many styles in it.
| | 00:53 | So, here is my advice.
| | 00:55 | Go ahead and highlight the
character encoding and cut it.
| | 00:58 | Then do a Select All, hit
Delete, paste it back. Easy!
| | 01:02 | Everything is gone.
| | 01:03 | I'm going to go ahead and save the file,
| | 01:05 | switch back over to Design View, and oh,
no, all the hard work, all the months
| | 01:10 | of labor in getting our styles written shot.
| | 01:12 | Well, don't worry about it.
| | 01:14 | Let's go back into our main.css.
| | 01:16 | In the main.css, go down the next
line, and we're going to do an @import.
| | 01:21 | Now, if you've never seen the
@import, this is how it looks.
| | 01:23 | A couple of lines below the encoding
character, you're going to type in @import.
| | 01:27 | Now, as soon as you do that, notice that
Dreamweaver recognizes it and changes the color.
| | 01:31 | So, I'm going to type in a space, and then url.
| | 01:34 | So, we need to indicate
where these styles are located.
| | 01:37 | What we're going to do is inside the
parentheses here, I'm going to type in
| | 01:40 | global.css, and then a semicolon.
| | 01:44 | Okay, so if you remember, we pared
down our main styles as global.css in
| | 01:50 | the previous exercise.
| | 01:51 | So now, using @import, we're basically
telling this external style sheet, bring
| | 01:55 | in those styles at run time and
display them on the page. How cool is that!
| | 02:00 | I'm going to do a Save All, and
switch back over to Design View, and our
| | 02:04 | styling is right back. Cool!
| | 02:06 | So, our external sheet, main.css, is now
actually bringing in global.css at run time.
| | 02:12 | Notice that in the related files, global
is showing up here, which is really cool!
| | 02:16 | Now, you want to be careful
about trying to daisy-chain these.
| | 02:19 | You wouldn't want to do an @import
in the global style sheet as well.
| | 02:23 | The problem with that is a lot of
browsers don't recognize any type of an
| | 02:27 | @import that is more than one layer nested deep.
| | 02:30 | So, you want to keep those on the
top-level style sheets. All right!
| | 02:33 | I'm going to go ahead and
close all of our open files.
| | 02:36 | After I've closed all my open files, I'm
going to scroll up and open up the _css
| | 02:41 | folder, and I'm going to
open up main.css from there.
| | 02:45 | Now, I know this is the file that we
were just looking at, but it's now opened
| | 02:48 | without being a related file, and I'm a
little freer to do extra things with it,
| | 02:52 | such as do a Save As.
| | 02:54 | Okay, so here in our main.css, really,
what we're bringing in is the global styles.
| | 02:59 | We're going to need a version of this
that's going to bring in the Table styles,
| | 03:02 | and we need a version of this
that's going to bring in the Form styles.
| | 03:05 | So, let's go ahead and take a look at
maybe the possibility of doing that.
| | 03:09 | Let's do a Save As. Save
it in the same directory.
| | 03:13 | This time what I want you to do is
save it as main_forms.css. There we go!
| | 03:22 | In the main_forms.css, we're going to do
another @import right below the first one.
| | 03:27 | We're going to do @import url, and
here we're going to do form_styles.css.
| | 03:36 | So, we're going to just look right over
here, and bring in the one we need. Cool!
| | 03:40 | So now, this main_forms.css is saying,
okay, I've got all the global styles
| | 03:44 | inside me, as well as the form styles.
| | 03:46 | So, if you have a page that's using
forms, go ahead and link media rather
| | 03:49 | than the other one.
| | 03:50 | Now, I want to talk about
something else here, too.
| | 03:52 | You'll notice that both of these @
imports are importing a singular file that's
| | 03:57 | found in this directory.
| | 03:58 | One of the things you want to avoid
is trying to do any type of importing
| | 04:02 | past one level deep.
| | 04:03 | What I mean by that is I wouldn't go
under the global.css and put an @import
| | 04:08 | in that one, because most browsers won't be
able to drill down that deep and retrieve it.
| | 04:12 | The other thing you want to be
careful about here is the cascade.
| | 04:15 | The order in which these styles are
defined are the order they appear in the cascade.
| | 04:18 | So, anything in these form styles that
had a conflict would actually overwrite
| | 04:22 | anything in the global styles.
| | 04:23 | So, that's a very real concern when
you're planning out how you're going
| | 04:26 | to strip these styles apart and how you're
going to work with them within the cascade.
| | 04:30 | I'm going to go ahead and save
that, and let's do one more Save As.
| | 04:34 | Now, this time in the same directory,
save it as main_tables.css, as well.
| | 04:43 | Here, we're going to replace the form_styles.
| | 04:44 | So, I'm going to delete that.
| | 04:45 | Now, the reason I deleted it is
because I wanted to show you an alternate
| | 04:48 | method of using @import.
| | 04:50 | I'm going to go my CSS Styles panel, and
I'm going to click to attach a style sheet.
| | 04:54 | I'm just going to hit Browse, and I'm
going to browse to the 04_04/_css directory.
| | 05:01 | Here, what I'm looking for is this table_styles.
| | 05:04 | So, just like our forms, table_
styles has all of our table styling.
| | 05:07 | Let me go ahead and click OK.
| | 05:09 | Notice that Link is grayed out.
| | 05:10 | The only thing available to us here is Import.
| | 05:12 | So, when I click OK, I can see
directly underneath that top one now, @import
| | 05:16 | url("table_styles.css");. All right.
| | 05:19 | We're going to go ahead and save that,
and now we have our modular styles.
| | 05:23 | We have one that's just
bringing in all of our global styles.
| | 05:25 | We have one that's bringing in the
global plus the forms, and another one that's
| | 05:28 | bringing in the global plus the tables.
| | 05:30 | Now, as you could imagine, this
is an incredibly simple example.
| | 05:33 | You could go ahead and import
multiple style sheets on this. All right!
| | 05:37 | Now, let's show this in action.
| | 05:39 | So, I'm going to go
ahead and close all of these.
| | 05:42 | I'm going to go over to my Files panel,
and I want to scroll down and open
| | 05:46 | up the Contact page.
| | 05:47 | Now, currently the Contact
page has a lot of forms on it.
| | 05:50 | But if I scroll down, the forms look
horrible, or at least they don't look the
| | 05:55 | way that I want them to. Now, why is that?
| | 05:57 | Well, remember, main.css doesn't have
those in it anymore; it just has the global.
| | 06:01 | So, what we're going to do is we're going
to change the page that's being linked here.
| | 06:05 | So, I'm going to switch over to Code View.
| | 06:07 | I'm going to go up to the
very top of the document.
| | 06:09 | There is link href here.
| | 06:10 | I'm going to change main.css to
main_forms.css, just like that.
| | 06:17 | I'll do a Save All.
| | 06:20 | If I preview that in my browser, I now
see that this one has the form styling,
| | 06:25 | although the rest of the site
doesn't need the extra code.
| | 06:29 | So, we just sort of leave it off.
| | 06:30 | Now, this approach is not going to work for
everyone, nor is it appropriate for everyone.
| | 06:35 | But for certain sites, you can
certainly save bandwidth, increase organization,
| | 06:38 | and that might be the most important
part, and make modifying and maintaining
| | 06:42 | styles easier by using modular
style sheets throughout the site.
| | 06:45 | So, one team member could be working
on the layout while another team member
| | 06:49 | could be working on color, and
| | 06:50 | you don't have to be worry
about overwriting anything.
| | 06:51 | Now, as with many things, proper
planning is required in order for styles to
| | 06:55 | render properly and not conflict
with other modular styles at run time.
| | 07:00 | As a matter of fact, that
could be an absolute nightmare!
| | 07:02 | Now, be sure to think through the
execution of modular styles carefully, before
| | 07:06 | attempting to implement them into your site.
| | Collapse this transcript |
| Checking browser compatibility| 00:00 | Before deploying your styles, you need
to make sure that they work properly
| | 00:04 | across multiple browsers. Although
there is no substitute for actually testing
| | 00:08 | your pages in the browsers themselves,
| | 00:10 | Dreamweaver has a browser
Compatibility Check feature that can often find
| | 00:14 | problems in your CSS that
you might otherwise miss.
| | 00:17 | This feature also allows you to target
specific browsers, allowing you to check
| | 00:22 | your pages against browsers you
might not have installed on your system.
| | 00:25 | So here I have the index
file open from the 04_05.
| | 00:30 | And I am just going to go ahead and
run a browser compatibility check.
| | 00:33 | You can find that right up
here in your Document toolbar.
| | 00:35 | And before I run it, I am
going to check on my settings.
| | 00:38 | Now your settings allow you to determine
which browsers you want to check against.
| | 00:42 | I am not going to worry about
Internet Explorer for Macintosh.
| | 00:45 | And I am not going to worry
about Netscape too much either.
| | 00:48 | And notice for other browsers, you
determine which version you want to start
| | 00:51 | checking with and then
kind of go out from there.
| | 00:53 | So I am going to go ahead and click OK.
| | 00:54 | As soon as I do this it's going to
go ahead and run the check for me.
| | 00:58 | And I get to see the results down
here in the Browser Compatibility panel.
| | 01:02 | Now I could also just go ahead
and go over here and say, Check
| | 01:05 | browser Compatibility.
| | 01:07 | And I could just hit the play button in this
panel, as well; it would give me the same results.
| | 01:11 | Okay, so problems here.
| | 01:13 | It found one error in main.css.
| | 01:16 | Before I move on, I really want to
figure out what's going on there.
| | 01:19 | So I am going to switch over, up here in
my related files, to main.css, and I'll
| | 01:24 | just switch to Code View, so I can
really see what's happening here.
| | 01:26 | Now you can check for browser
Compatibility if you're on a HTML file, or if
| | 01:30 | you are on a CSS file.
| | 01:31 | And sometimes you are going to find more
information by checking just the styles.
| | 01:35 | So this really isn't a bad idea.
| | 01:37 | I am going to come in and run
another browser Compatibility check.
| | 01:41 | Here I find some specific issues. On line 459,
| | 01:45 | I have an unsupported value called transparent.
| | 01:47 | I don't know about that. Let's go and see.
| | 01:49 | So I am go down to line 459, and sure
enough, right there is color transparent.
| | 01:56 | Now transparent is not a
proper value for the color property.
| | 02:00 | It is, for background color,
but not foreground color.
| | 02:02 | So this particular property actually
won't do anything in any of the browsers,
| | 02:06 | so I am just going to go and get rid of
that, so I can avoid causing any type of
| | 02:09 | confusion in certain browsers.
| | 02:11 | Now it's also telling me that on line
1,045, it had trouble parsing the styles.
| | 02:16 | Now that could be a real trouble.
| | 02:17 | So I am going to scroll
down to line 1,045. Here we go.
| | 02:24 | And that really looks - hey, look at that.
| | 02:27 | We have got two semicolons in a row here.
| | 02:29 | That's really weird.
| | 02:30 | So I am going to get rid of the extra semicolon.
| | 02:33 | And then I need a semicolon here, so I
am going to go ahead and add one here.
| | 02:36 | All right, so that was just a syntax error.
| | 02:39 | It happens when you're typing your CSS.
| | 02:41 | You are going to leave things off, and
it's nice to know that Dreamweaver can
| | 02:44 | catch that for you so easily.
| | 02:46 | I am going to go ahead and save this file.
| | 02:48 | And I'm just going to run the
browser Compatibility check one more time.
| | 02:51 | And now no errors come up, good.
| | 02:53 | So we know that at least the
external style sheet, from that standpoint, is
| | 02:56 | looking pretty good.
| | 02:58 | I am going to go back to my source
code for index.css, and it really doesn't
| | 03:02 | matter whether you're in Code View or
Design View, to be quite honest with you.
| | 03:05 | I am going to go right back up and do
a Browser Compatibility check again.
| | 03:10 | Okay, so I am not seeing those issues
with my external style sheet anymore,
| | 03:14 | but I am seeing something
called a Float Drop Problem.
| | 03:17 | Now what's really cool about this panel
is if you notice on the right-hand side
| | 03:19 | it says if a container, including the
browser window itself, is not wide enough to
| | 03:24 | accommodate both a float with a
specified width and any content with a specific
| | 03:28 | width that follows it, the content
after the float will drop below the float
| | 03:32 | rather than wrapping around it.
| | 03:33 | Essentially what's that's trying to
say is if the content inside of a float
| | 03:37 | is going to be wider than the float itself,
then it's going to cause column drop, or
| | 03:41 | it's going to cause some
elements to drop underneath it.
| | 03:43 | That could be a real problem.
| | 03:45 | But I want to know who
Dreamweaver thinks it's a problem for?
| | 03:49 | So I am going to look on line 93.
| | 03:50 | I am going to switch to Source Code.
| | 03:52 | And I am going to scroll down to line 93.
| | 03:53 | And by the way, you can double-click on these.
| | 03:56 | It will take you right to that spot.
| | 03:57 | So it's thinking that my footer is the problem.
| | 04:00 | Well, you know, really, honestly, the
footer, it's got these 3 columns 1, 2 and 3.
| | 04:05 | Their width is equal to the
width of the footer itself.
| | 04:08 | So what the Dreamweaver is trying to
tell me is like, hey, you know, if you put
| | 04:10 | something inside here, this
is going to be wider than that.
| | 04:12 | It's going to drop the columns.
| | 04:13 | You didn't know that, right?
| | 04:15 | So it's not always an emergency;
sometimes it's just saying, hey, you might want
| | 04:19 | to take a look at this.
| | 04:20 | Now if you do have a real bug, you can
click on this View solutions right here,
| | 04:24 | and it's going to take you to Adobe's
Web site, to the CSS Advisor, which is
| | 04:29 | sort of an aggregate of all
these bugs and issues that come up.
| | 04:33 | So it's a really nice place to kind of
go just check out and read about some
| | 04:37 | browser compatibility issues, and
try to find some solutions for it.
| | 04:41 | Now this particular problem doesn't
have any type of hacks or solutions that we
| | 04:44 | can use other than the just-don't-do-
it solution, but to be honest with you, I
| | 04:49 | know that my footer is going
to stay exactly the way it is.
| | 04:51 | I am not going to put any
extraneous content in there.
| | 04:53 | And so in this case, it's nice for
Dreamweaver to give me a warning about it,
| | 04:57 | but it's really not something
I need to be concerned with.
| | 05:00 | So if you're tired of getting messages
like this, and I am just going to go back
| | 05:03 | into Dreamweaver here,
| | 05:05 | I can go right over here to the Float
Drop problem and right-click and say, you
| | 05:09 | know what, go ahead and
ignore that particular issue.
| | 05:12 | And what it will do is whenever you run
a browser Compatibility check, from that
| | 05:16 | moment forward, it will not
report back on that problem.
| | 05:19 | It just ignores it.
| | 05:20 | Now from time to time, if you move from
one site to another, you might want to
| | 05:24 | turn it back on, because you might
want to really see if that is an issue.
| | 05:27 | So I can go right back here
to my Browser Compatibility.
| | 05:30 | I can click on this little play button
and I can say, Edit Ignored Issues List.
| | 05:35 | When I click on that, it's actually
going to open up an Excel Spreadsheet, and
| | 05:39 | it's going to show me any of the
conditions that I told it to ignore.
| | 05:43 | If I wanted to go back to actually
reporting on those, all I have to do is
| | 05:46 | delete the issue tag, save the file,
and now the next time I check, it will
| | 05:53 | actually go in and check
for that specific issue.
| | 05:56 | Now I do want to mention that the
Browser Commendably check is not going to pick
| | 06:00 | up on every single error or
browser rendering error on your page.
| | 06:04 | And it sometimes is not really going to
offer you the specific advice you need
| | 06:09 | in order to fix the problems that it does find.
| | 06:12 | It does, however, do a really great
job of picking up on errors and problems
| | 06:16 | within your code that you might have
missed, especially when targeting older
| | 06:20 | browsers, or browsers on systems
other than the ones installed on your own.
| | Collapse this transcript |
| Using conditional comments for Internet Explorer| 00:01 | One of the most annoying aspects of
running CSS is the annoyance of having
| | 00:05 | to deal with browser incompatibility
in writing hacks or alternate styles
| | 00:09 | for various browsers.
| | 00:10 | Although all browsers have their
individual quirks, by far the worst offender
| | 00:14 | is Internet Explorer.
| | 00:17 | Entire Web sites are dedicated
to dealing with errors in that
| | 00:20 | particular browser.
| | 00:22 | Now one way to deal with IE Errors are
to place hacks and browser workarounds
| | 00:27 | directly within your CSS.
| | 00:29 | This creates messy code, makes your IE-
specific workarounds harder to find and
| | 00:35 | makes editing your styles even more difficult.
| | 00:37 | A better way of dealing with Internet
Explorer is to place those specific styles
| | 00:40 | in external style sheets, and then pass
them to Explore through the use of what
| | 00:45 | we call conditional comments.
| | 00:46 | So here I have the tours.htm file open.
| | 00:50 | And what I want to do is go ahead
and just preview this page in Internet
| | 00:54 | Explorer, so we can see what the issue is.
| | 00:58 | So here we are in Internet Explorer, and
right now everything looks fairly okay.
| | 01:02 | But if I scroll down, ooh, there is a
problem. Right after my tour descriptions,
| | 01:07 | things just start falling apart,
and they go from bad to worse.
| | 01:10 | Okay, so that's obviously not the
user experience we are going for within
| | 01:14 | Internet Explorer 6.
| | 01:16 | So let's go see how we can fix this.
| | 01:18 | So here we are, back in Dreamweaver.
| | 01:21 | And I want to show you that
inside the _CSS directory,
| | 01:26 | I have a style sheet already written, ie6.css, and what
that's doing is it's fixing a few float
| | 01:33 | problems that Internet Explorer had in
dealing with those tour descriptions.
| | 01:37 | So a lot of times, it's trial and error.
| | 01:39 | Sometimes you are going to know
specific issues to Internet Explorer and kind
| | 01:42 | of how to fix them.
| | 01:43 | But you notice that we are going ahead
and placing them in its own style sheet,
| | 01:47 | called ie6, and we are
commenting those guys out.
| | 01:50 | So we really don't want to pass these
styles to anybody but Internet Explorer 6. Okay.
| | 01:55 | I am going to go ahead and close this
and go back in tours really quickly.
| | 01:59 | Now what I am going to do is I
am going to switch to Code View.
| | 02:01 | And I am going to highlight the link tag
for my main styles, and I'm a copy that.
| | 02:07 | And then on this blank line just below my
print style sheet, I am going to paste it.
| | 02:10 | Now the reason I am doing that is
because I want to import my Internet Explorer
| | 02:13 | 6 styles in, and I just don't
feel like typing all that out.
| | 02:16 | I am going to highlight main
.css and change it to ie6.
| | 02:21 | And then for media screen projection is fine.
| | 02:24 | But I want to replace the title.
| | 02:25 | I don't want any browser to
think that these are the main styles.
| | 02:28 | So I am going to get rid
of that title attribute.
| | 02:30 | So this is what it should
read: link href _css ie6 css.
| | 02:35 | And the rest of it I am just going to
sort of leave from before, except for the
| | 02:39 | title attribute, and we are moving that.
| | 02:41 | Now I am going to save this, and if I
preview this in another browser, let's say
| | 02:45 | Firefox, for example, we are going
to end up with some real problems.
| | 02:48 | As you can see, we started having some
issues as we scroll down and these guys
| | 02:53 | -- the spacing is just going all crazy.
| | 02:55 | The reason that spacing is going
crazy is because of the fixes that we did
| | 02:58 | for Internet Explore 6.
| | 02:59 | What works for ie6 is not
going to work for everybody.
| | 03:03 | So we only want these styles
to be passed to that browser.
| | 03:07 | So one of the ways to do that with
Internet Explorer is through the use of
| | 03:10 | conditional comments.
| | 03:11 | Let me show you what I mean.
| | 03:12 | Go ahead and highlight that link tag.
| | 03:14 | You want the whole thing
highlighted, from sort of finish.
| | 03:16 | And this of course is the link tag
that's dealing with ie6.
| | 03:19 | And then go over to your Snippets panel.
| | 03:21 | Now this is one of the pre-built Snippets.
| | 03:23 | It has nothing to do with what the
snippets we created earlier in our title.
| | 03:26 | I am going to go ahead and open
up the Comments Snippets region.
| | 03:30 | Now these are really neat.
| | 03:31 | These have HTML Comments.
| | 03:33 | They have CSS Comments.
| | 03:34 | They have all sorts of cool stuff.
| | 03:35 | I just want to expand that a little
bit more so I can read these better.
| | 03:38 | So notice that we have all sorts of
interesting comments here, Greater Than or
| | 03:41 | Equal to IE7 Conditional, IE5 Mac Comment,
If IE6 Conditional, If Less Than IE8.
| | 03:49 | So this is really cool.
| | 03:50 | I am going to do Less Than or Equal to IE6.
| | 03:52 | So with that highlighted, I am just going
to double-click Less than or Equal to IE6.
| | 03:56 | You'll notice what it does is it
surrounds that link tag with this, If Less Than
| | 04:02 | or Equal to IE6 Conditional statement.
| | 04:04 | Now every single browser in the
world is going to ignore that, except
| | 04:08 | for Internet Explorer.
| | 04:09 | It's going to look at those
conditional statements and say, ooh, you are
| | 04:12 | talking to me, are you?
| | 04:13 | And then it says, okay, I need to add this link.
| | 04:15 | So what's going to happen now is when I
save this file, if I preview that in my
| | 04:20 | browser in Firefox, I notice that
it don't really have any issues.
| | 04:26 | However, if I go back to Internet
Explore, I am just going to scroll down a
| | 04:29 | little bit, and sure
enough, everything looks fine.
| | 04:32 | All the spacing looks the way I
needed to; everything looks really great.
| | 04:35 | All right, cool. So now I am
going to go back into Dreamweaver.
| | 04:38 | And what I'd really like to do is
go ahead and change this site-wide.
| | 04:43 | It works on this page, but
it doesn't work on the rest of them.
| | 04:45 | And there really isn't an attached
style sheet sitewide, and there is certainly
| | 04:49 | not a use conditional comment sitewide.
| | 04:51 | So we are going to use Find and
Replace to kind of help us out with this.
| | 04:53 | What I am going to do is I am going to
highlight all of my link tags, starting
| | 04:57 | with main.css, and going to the
conditional comment, I am just going to copy
| | 05:00 | them, so Ctrl+C or Command+C copy.
| | 05:03 | Then I am going to take the conditional
comment and just strip it out and save my file.
| | 05:08 | Now why am I doing that?
| | 05:10 | Well, because I don't want it to appear on
this page twice when I do my find and replace.
| | 05:14 | That's why. So I am going to go up to
Edit and choose Find and Replace.
| | 05:16 | Here I am going to choose Entire
Current Local Site, and for Replace, I am going
| | 05:22 | to go ahead and paste the
code that we copied earlier.
| | 05:25 | So it should have both link tags and
the conditional comment, and then for the
| | 05:29 | Find I am going to paste it again, but
this time, I am just going to delete the
| | 05:34 | conditional comment.
| | 05:35 | And be sure not to hit
Return or Enter with that.
| | 05:39 | You want to just hit Delete or
Backspace to get rid of that stuff.
| | 05:42 | So now double-check what's going on here.
| | 05:44 | I am looking in the Source Code.
| | 05:45 | I want to replace the entire current local site.
| | 05:47 | I am going to find those two link
tags to the main.css and the print.css.
| | 05:52 | And I am going to replace them with both of
those titles, plus the ie6 down there, okay.
| | 05:57 | So I'm going to go ahead and hit Replace All.
| | 05:59 | It's going to warn me.
| | 06:01 | It's going to say I can't
undo this, are you sure?
| | 06:03 | I am going to say Yes.
| | 06:04 | And now it's going to go add it to this file.
| | 06:06 | You can actually see it added to the
code, but look at the Search dialog box.
| | 06:09 | Look how many it's added to.
| | 06:10 | It's added to a bunch of them right there.
| | 06:12 | That's really cool.
| | 06:13 | Now I would also need to repeat this
procedure by going into the subdirectories,
| | 06:17 | like explorers and resources, and doing
the same thing, because they are going
| | 06:21 | to have a slightly
different document-relative link.
| | 06:23 | So they weren't found in this Find and Replace.
| | 06:24 | We would need to do a specific Find
and Replace for each subdirectory level.
| | 06:28 | And it works just to be fine, and be
a lot faster than doing it by hand.
| | 06:32 | Okay, well conditional
comments, these things are great.
| | 06:35 | Using them for Internet Explorer-
specific style sheets is going to allow you
| | 06:38 | to pass all the ultimate styles
necessary for Internet Explorer to function
| | 06:42 | properly without having to clutter up
your existing code, or worrying about other
| | 06:46 | browsers being affected by the styles.
| | 06:48 | I mean, that's the best part to me is
that the other browsers just ignore them.
| | 06:51 | It's also a nice way of getting all of
the Internet Explorer-specific styles in
| | 06:54 | one place to make updating
and editing them even easier.
| | Collapse this transcript |
| Optimizing CSS with Dreamweaver| 00:01 | Throughout this title, we've talked
about writing clean, organized styles that
| | 00:04 | make it easier to maintain
and troubleshoot your code.
| | 00:07 | While this makes our styles easier for
us to read, it also tends to make them a
| | 00:11 | little larger than they need to be.
| | 00:13 | To save file size, many designers
optimize their CSS before deploying it by
| | 00:17 | stripping out comments and removing white space.
| | 00:20 | This can cut your styles
and file size almost in half.
| | 00:23 | And it can produce serious
savings in bandwidth for larger sites.
| | 00:27 | Let's take a look at some of the
options that we have for optimizing our CSS
| | 00:30 | before deploying it on our site.
| | 00:32 | So I have the main.css, and if I take a
look over in the Files panel I can see
| | 00:37 | that our main.css is 20K, which you
know that's not that big, but if enough
| | 00:42 | requests are made over the course of
a day, that can take up some bandwidth.
| | 00:47 | So what I want to do is change some of my
formatting settings here in Dreamweaver.
| | 00:51 | Now we will notice that we got over
1,000 lines of code, over 1,100 be exact.
| | 00:56 | And if I go up to Edit, I go to me Preferences,
| | 01:00 | or if you are on a Mac you are
going to go to Dreamweaver and
| | 01:02 | choose Preferences,
| | 01:03 | I can go to the code formatting category.
| | 01:05 | So I switch over to code
formatting category and click on the
| | 01:08 | Advanced Formatting CSS. There we go.
| | 01:10 | Now currently I've got Each property
no a separate line, and I've got All
| | 01:14 | selectors for a rule on same line.
| | 01:16 | So I am going to deselect
Each property on a separate line.
| | 01:18 | That's going to go ahead and place it up there.
| | 01:20 | I like the All selectors
for a rule on same line.
| | 01:22 | That's going to save me some space.
| | 01:23 | And then I am going to strip out the
Blank line between the rules. Okay cool!
| | 01:26 | So again, looking at the preview that's
going to be a lot harder to read, but,
| | 01:30 | and it's okay because I'm trying to
compress it for a deployment, knowing that I
| | 01:35 | could go back and change the
formatting setting anytime I want.
| | 01:38 | I can go ahead and click OK. Click OK again.
| | 01:40 | And now if I look at my code, I notice
that, we really don't have any change.
| | 01:44 | Well, that's because you
have to apply the formatting.
| | 01:46 | So I am going to go right
over here to my Code toolbar,
| | 01:49 | click on my Show More so I
can see my Format Source Code.
| | 01:53 | And I am going to apply my Source Formatting.
| | 01:55 | Now when I do that now, I
am down to 246 lines of code.
| | 01:59 | Now that's a significant
savings from ,say, 1100 lines of codes.
| | 02:02 | So I'll do a Save All.
| | 02:05 | And now if click over to my _css
folder and hit Refresh, I notice that I've
| | 02:09 | saved a whopping 1K.
| | 02:11 | It went down from 20 to 19.
| | 02:13 | Now honestly this is going to help you
more for larger CSS files, files that
| | 02:17 | really are thousands of lines of code.
| | 02:19 | And honestly, we saw some waste here.
| | 02:21 | We have a lot of comments up top
| | 02:23 | that it's going to help you and I when
we are working on our styles, but really
| | 02:26 | doesn't help a browser at all.
| | 02:28 | So those could afford to be stripped out.
| | 02:30 | Now that leads me to
another strategy that we could do.
| | 02:34 | You could have one CSS file that you use for
writing and then another one for deploying.
| | 02:38 | So you would have a non-
compressed version of your style sheet
| | 02:40 | that you would work day-to-day on, and then
every time you needed to go ahead and
| | 02:44 | upload it you could compress it down, and
then upload it to the to a number of sites.
| | 02:47 | A lot of people work that way.
| | 02:49 | But really, it only depends on
how much savings you need to do.
| | 02:52 | Now in addition to Dreamweaver helping
you out by sort of formatting the code
| | 02:56 | for you, you can also run it
through a compressor service online.
| | 03:00 | And there are a ton of these online.
| | 03:02 | If you just go up and search, or do a
Google search for optimizing CSS, you are
| | 03:06 | going to find a bunch of these.
| | 03:07 | I'll show the one that I use.
| | 03:08 | I am going to go ahead and
select and copy the code.
| | 03:12 | And then I am going to open up a browser.
| | 03:15 | And I am going to cssdrive.com/
index.php/main/csscompressor.
| | 03:24 | Now if you really want, you can go to
just CSS drive and do a search on that
| | 03:28 | site or look around.
| | 03:29 | Now this is a nice little
free service that you can use.
| | 03:33 | And I'm going to say I want Super Compact.
| | 03:36 | I am going to strip all comments out.
| | 03:39 | And then I just insert the CSS code.
| | 03:41 | You can also point to CSS that
might already be on a Web site.
| | 03:45 | So I am just going to go ahead and
paste my code that I copied earlier there.
| | 03:49 | And I am going to tell it
to go ahead and compress it.
| | 03:51 | Now it's going to take it a second, and
as soon as I do, it gives me this result.
| | 03:55 | Now what's really cool about this is
notice that it's telling hey your original
| | 03:59 | size was around 19K. We knew that.
| | 04:01 | Your compressed size is now around 14K.
| | 04:03 | We saved 23% of our space.
| | 04:05 | Well just that's not too terribly bad.
| | 04:07 | And now you can see that
this is incredibly hard to read.
| | 04:09 | Okay so I am going to go ahead and
copy this, so Command+A or Ctrl+A and
| | 04:15 | Command+C or Ctrl+C. I am going to
leave this window open in case we need
| | 04:17 | to come back to it.
| | 04:18 | Then I am going to go to my main.css.
| | 04:21 | Now ion this one I am going to
change my Source Formatting back to where
| | 04:24 | something that I can actually read.
| | 04:26 | So I am going to go back to my
Preferences and bring up my Code Formatting.
| | 04:31 | And again, Each property on a separate line,
Blank line between rules, we want that.
| | 04:35 | Click OK.
| | 04:36 | And apply the Source Formatting.
| | 04:38 | Now the reason we did that is to get
sort of this human readability back to this.
| | 04:42 | I am going to do a Save As, actually.
| | 04:45 | I am going to do a Save As.
| | 04:47 | And in my _css folder in the 04_08, I am
going to say this is main_noncompressed.
| | 04:56 | All right, there we go. Close that.
| | 05:03 | And I am going to go back and refresh that.
| | 05:06 | I'm going to open up main.css again, and
I'll select everything on the page here,
| | 05:11 | so Ctrl+A, and then just replace it with the
code that we got from our CSS compression.
| | 05:17 | And notice that everything
here is on the same line.
| | 05:19 | So technically we really
only have one line of code.
| | 05:22 | All right I am going to save this, go back
over to my Local Files panel and do a refresh.
| | 05:29 | So notice that now we have a main_
noncompressed that we could write into our corrections.
| | 05:34 | And then we have the main.css,
which could be uploaded in its 14K.
| | 05:37 | So yes, it's not that huge of a savings,
it's only 6K, but on some sites that can
| | 05:42 | be a deciding factor.
| | 05:44 | And this is really useful when your style
sheets are a lot larger and a lot more complex.
| | 05:48 | But honestly, the question you have to ask
yourself is is this process worth the effort?
| | 05:53 | Well the real key to this technique is
keeping a human readable version of your
| | 05:57 | styles, comments and all, for development work,
| | 06:00 | and then recompressing it each
time you need to upload your styles.
| | 06:03 | Now this can be time-consuming.
| | 06:05 | And in a team environment it offers just
one more thing that could potentially be
| | 06:09 | forgotten about during an update.
| | 06:11 | So in the end, the decision to
optimize your styles is totally up to you.
| | 06:14 | But it's good to know that Dreamweaver
offers you a quick and easy way to add a
| | 06:18 | degree of optimization, without
having to jump through any hoops at all.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thanks for watching
Dreamweaver CS5 Managing CSS.
| | 00:05 | I hope you've enjoyed going through
these exercises, and have a better idea of
| | 00:08 | how Dreamweaver can help you create,
organize and deploy your site's styles.
| | 00:13 | If you are new to coding, I hope you
felt a little bit more comfortable in
| | 00:16 | utilizing Dreamweaver's powerful coding tools.
| | 00:19 | If you mainly rely on code, I hope you
found several tools in Dreamweaver that
| | 00:23 | can speed up your CSS workflow.
| | 00:26 | For more on Dreamweaver, Web Design
and CSS, be sure to check out the rest of
| | 00:31 | the Dreamweaver and CSS-based titles in
the lynda.com Online Training Library.
| | 00:36 | Thanks for watching.
| | Collapse this transcript |
|
|
