CSS Improvements

[ LiB ]

It's more than an improvement. The basic Dreamweaver approach to creating code for your pages has changed to include CSS at all levels. Now, that's a good thing.

CSS Integration

The new CSS style rule inspector (the CSS tab in the Tag Inspector) is only the tip of the iceberg when it comes to changes in Dreamweaver's CSS handling. The CSS Styles panel has been streamlined to include an editing mode only (see Figure 1.12). Why? Because the features for applying styles have all been integrated into the Property Inspector! No longer relegated to special interfaces such as the CSS Styles panel, style sheets are now referenced throughout the interface and are used for basic coding tasks instead of older HTML-based formatting. Where will you see more CSS?

Figure 1.12. The new CSS Styles panel, for editing styles only.

The different versions of the Property Inspector now include more CSS information than ever before. The Text Property Inspector no longer lets you switch between "regular" and "CSS" mode; instead, CSS options are front and center (see Figure 1.13). By default, choosing any text formatting from the Property Inspector creates CSS formatting instead of inserting font tags everywhere. And applying classes to tables and other page elements can now be done from their Property Inspectors, although those of you who like right-clicking can still right-click the Tag Selector to apply styles (see Figure 1.13).

Figure 1.13. CSS options throughout the new Property Inspectors.

The Page Properties dialog box also has a nifty new tabbed interface and accomplishes tasks such as setting page background color , tweaking link appearance, and such through automatically generated CSS styles (see Figure 1.14).

Figure 1.14. Setting page properties the new CSS way.

Of course, you can turn off any of these automatic CSS-writing functions (by going to the Preferences > General dialog box and deselecting Use CSS Instead of HTML Tags). But why would you?

Improved CSS2 Support

Yes, you can still draw layers (the Draw Layer tool is in with the Insert bar's Layout objects). But you can also select any page element, wrap it in a div tag, and apply a custom class or ID, thanks to the new Div object (also in with the Layout objects in the Insert bar). Figure 1.15 shows this nifty procedure happening. The old Netscape-specific layer tag is no longer an option for layer coding. Design view display of CSS-styled elements is improved.

Figure 1.15. Wrapping a page element in a div to apply external CSS positioning.

[ LiB ]