Web Standards in Dreamweaver, Part 2 (Page 1 of 5 )
This article walks you through setting the preferences for working with CSS in Dreamweaver, how to work with the CSS style panel, linking to the stylesheet, improvements to the Propert Inspector, how to creat new XHTML documents and more. (From the book
ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, with Rachel Andrew and Kevin Marshall, published by Apress, 2004, ISBN: 1590593480.)
Editor's Note: See this link for part 1 of this chapter.
CSS Tools in Dreamweaver MX 2004
Dreamweaver has a variety of tools that make working with CSS easier.
Setting Preferences
The following preferences will help you get comfortable working with CSS in the Dreamweaver environment.
CSS Styles
Open the Preferences dialog box (shown in Figure 2-7) by selecting Edit -> Preferences and selecting the CSS Styles category.
Figure 2-7. The Preferences dialog box
CSS allows shorthand and longhand syntaxes for either brevity or clarity. A snippet of CSS code in longhand syntax looks like this:
.longhand {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #660066;
text-decoration: underline;
}
In this dialog box, checking the Use shorthand for boxes forces Dreamweaver to use the shorthand syntax. These rules are displayed in exactly the same way in any browser.
.shorthand {
font: small Arial, Helvetica, sans-serif;
color: #660066;
text-decoration: underline;
}
More important are the radio buttons at the bottom. If you created a style-sheet in another editor such as TopStyle and then make edits in Dreamweaver, you should make sure that any rules Dreamweaver adds are consistent with the style you used in the rest of your stylesheet. In this situation, select the If original used shorthand option.
TIP You may find that certain rules work when declared in shorthand but not in longhand in older browsers such as Netscape 4. If you are using the shorthand syntax to handle these problems, it is important to make sure Dreamweaver is set up to assist you with this.
If you check the final check box on this dialog box, Dreamweaver will open the CSS file when it is modified. This means you can keep a close eye on what the software is adding to your stylesheet.
File Types/Editors
To specify another editor as your default CSS editor, go to Preferences -> File Types /Editors, as shown in Figure 2-8.
Figure 2-8. File types/editors
We will discuss integrating an external editor later in this chapter.
The CSS Styles Panel The CSS Styles panel enables you to attach stylesheets to your page, create new styles (either in a new stylesheet, an existing stylesheet, or embedded in your document), and edit styles already created.
Creating a Simple Stylesheet in Dreamweaver
Follow these steps to create a stylesheet.
1. To create a new stylesheet, click the New CSS Style button, which is the second button from the left on the CSS Styles panel, as shown in Figure 2-9.
Figure 2-9. The CSS Styles panel with New CSS Style button highlighted
This displays the New CSS Style dialog box, as shown in Figure 2-10.
Figure 2-10. The New CSS Style dialog box
2. You will need to create a style definition in order to create a new style-sheet, and a good place to start is with the basic font styles for the body text of the page. Select the Tag (redefines the look of a specific tag) radio button. Next, in the drop-down list at the top of the page, select Body. Select the radio button to define a New Style Sheet File and click OK.
3. Because this is a new stylesheet, a Save As dialog box will appear so that you can save your stylesheet. Make sure that you add the .css extension on the end of your stylesheet name (in other words, save as global.css and not just global). Once you have saved your stylesheet, the dialog box shown in Figure 2-11 appears.
Figure 2-11. The CSS Style Definition dialog box
4. In this CSS Style Definition dialog box, you can set the rules for a tag or class. For the body text, select Type in the Category list; choose a font, size, and color; and then click OK. You can redefine the look of any HTML tags that you want by following these steps.
5. To edit a CSS style, select it in the CSS Styles panel and then click the Edit button (second from the right at the bottom of the panel) to open the CSS Style Definition dialog box. Double-clicking the style in the tree view in the CSS Styles panel opens the stylesheet in Dreamweaver so you can make changes to the stylesheet itself.
 This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Creating Classes >>
More Web Standards Articles
More By Apress Publishing
