Tip:
Highlight text to annotate it
X
If you're like most web designers, you have your own personal preferences for how your
CSS should be created and formatted. Fortunately Dreamweaver has multiple preferences
that allow customization of how styles are created, presented, and formatted.
In this movie, we'll explore these preferences, and customize how Dreamweaver presents your
CSS, formats it, and controls shorthand notation.
If you are following along in the example files with me, I'm going to open up 0103.htm.
I'm going to switch over to Code View and take a look at the existing style for the
paragraph. Now you can see, it's taking up a lot of room,
there's a lot of stuff going on here. There's a font declaration, it's got margins, it's
got padding, it's got a border, and we could really benefit
through the use of some shorthand notation here. So instead of four rules for the margin,
for example, we could only get away with doing one.
Again, thankfully Dreamweaver has a preference that allows us to set when shorthand notation
should be used and how it should be used, so let's take a look at that.
Now on the Mac I'm going to go to Dreamweaver and choose Preferences. On the PC, you'd want
to go to Edit and choose Preferences. And we'll open that up.
So before I get into talking about shorthand notation, I want to just take a moment to
talk about the code coloring itself. If you choose the Code Coloring preference,
you'll notice that the document types are listed on the right-hand side.
If you scroll down you'll find CSS. If you choose Edit Coloring Scheme, you can
bring that up and you can change the coloring scheme, if you don't like
something about it. I, for example, don't like the fact the selectors are in sort of
a fuschia, so I typically change that to being red. So you just highlight the
style you want to change, and then give it another color. I'm going to go ahead and leave
these as the default but just let you know, you can
change that if you want to. Close, Cancel.
Now we'll find the shorthand notation preferences under the CSS Styles category, so I'm going
to go ahead and select that. Now before we get into doing shorthand, I
want to point out that there are some other preferences within the CSS Styles
category. Notice, for example, at the very bottom where it says "When double-clicking
in the CSS panel," we have three choices. This really focuses
on editing your rules, and the first and default option is to edit
using the CSS dialog box. That'll bring up the same dialog box that you use when
you create a style. We also have the Edit using Properties pane,
which will allow you to edit in the Properties pane of the CSS Styles panel, and
Edit using Code View, which would take you directly to that file and the spot within
the code that you need to edit, which is really nice.
Let's turn our attention back to shorthand. I'm going to take the Preferences panel and
move it to the right just a little bit. Now notice that
Dreamweaver can help you write shorthand for either the font rule, background, margin and
padding, and border and border width, and list style. And if you select one of those,
every time you create that type of a rule, if shorthand notation is available
based in your settings, Dreamweaver will go ahead and write it for you. I'm going to select
everything except for Font. Now there's a very good reason for that, and
later on when we're talking about typography, we'll get into why you might not want use
the Font shorthand notation as a default. As a general rule I would leave that turned
off and only use the Font shorthand notation when you're really sure that you
need use it. Now we also have below this, if you're going
to edit a CSS rule, should shorthand be applied. Notice that we had the If original used shorthand,
According to the settings above and we also have a checkbox for opening the
CSS files when modified. That again is the default, and anytime you edit a rule,
if you have an external style sheet, Dreamweaver will go and open that up.
We'll leave those at their default settings and I'll click OK.
And now I'll go ahead and create another rule for our H2 that has some margins and some
padding in it as well, and we'll see our shorthand notation preferences take effect.
I'm going to go over to my CSS Styles panel and say New CSS Rule.
We're going to redefine a tag, and we're going to redefine the H2 tag. The heading that's
below the paragraph in the page is an H2. And click OK.
And we'll go ahead and set a font for it, and grab the pull-down menu, and do Georgia,
Times New Roman, Times, serif. We'll go ahead and size it at 1.2 ems. Feel
free to use any settings you want here, we're really just experimenting with our preferences
and making sure that it's going to use the shorthand
notation. I'll go ahead and give it a red color, so
F00 for color, and then we'll go to our Box category.
And we'll go ahead and assign it some some padding. I'm going to deselect "Same for all"
cause I really want to see it do the shorthand notation, so
I'll do a Top padding of 1em. I'll do our Right padding of half an em, so
.5 ems, I'll do a Bottom padding of 1em,
and I'll do a Left padding of half an em. By the way, you may have noticed that I can
just go ahead and type in the value. I don't have to grab
the measurement from the pull-down menu, I can just go ahead and type in the value, and
Dreamweaver is smart enough to know that I want to use ems there.
We'll do the same thing for margins. We'll just go ahead and this time, you know what,
I will do "Same for all" for margins, because it still does shorthand notation as well,
so we'll leave "Same for all" checked, and I'll just go ahead and give it a margin of
1em all the way around.
And I'll finish it off by going ahead and doing a border, and we'll leave "Same for
all" and do a solid border.
And we'll just do one pixel, and we'll use the same color, that #f00 red
color. OK, so I'll go ahead and click OK.
And now take a look at the difference between the top rule, the paragraph rule,
and our bottom rule, the heading. Notice that now instead of four margin values
and four padding values we really only have the two, so that's our shorthand
notation preferences taking effect. If I switch over to Design View,
I can see that I did better luck with the H2, and my CSS is a lot more efficient. Dreamweaver
recognizes that not everyone likes to work with CSS the same way,
and hopefully you've seen here how easy it is to make Dreamweaver's workflow
match your own preferences. In our next movie, we'll explore how you can customize how Dreamweaver
presents CSS elements in Design View to make CSS-based regions easier
to see, select, and edit.