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.)
Web Standards in Dreamweaver, Part 2 - The Property Inspector (Page 3 of 5 )
In Dreamweaver MX 2004, the old-style Property inspector that allowed you to add <font> tags to your documents is gone. In its place is the new and improved Property inspector, shown in Figure 2-12, which allows you to add classes to page elements far more quickly than before.
Figure 2-12. Property inspector
The Format drop-down list lets you add the structural (X)HTML markup to elements. If you select an element in Design view and then choose Heading 1 from this list, the element will become a level 1 heading (<h1>). Other structural markup that you can add using the Property inspector includes the following:
Click the B button to wrap an element in <strong></strong> tags, making it appear bold in a browser.
Click the I button to wrap an element in <em></em> tags, making it appear italicized in the browser.
Click the Unordered List button to turn an element into an unordered list.
Click the Ordered List button to create an ordered list.
The Text Indent and Text Outdent buttons add and remove <blockquote> elements. You should not use the Text Indent button to indent text; rather, you should use it to mark up a quote. To indent text, you should use a left-padding setting in a CSS class.
The font, size, and color drop-down lists should be used with caution. As already mentioned, the use of <font> tags has been removed from the Property inspector, so if you change the font of an element using this menu, Dreamweaver creates a class in the head of your document and then applies it to the element. You would be better served to create your own classes for text that needs to be specially formatted, or create a special element using these menus and copy the resulting CSS out of the head of your document and into your external stylesheet, where it will be available to any pages that have this stylesheet attached.
The Style drop-down list picks up any classes that you created and gives you an easy way to apply them to page elements. Select an element in Design view and select a class from this drop-down list, and the class will be applied to the element.
The Page Properties Dialog Box
The Page Properties dialog box can be launched from the Property inspector as well as by selecting Modify -> Page Properties. This dialog box gives you a quick way to set CSS properties for your document. Once again, these properties will appear in the head of your document, and because you are usually aiming for a unified look and feel throughout your site, you should copy them to your external stylesheet.
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.