CSS
One of the biggest and most exciting feature enhancements to Dreamweaver 8 lies in its continuing support for cascading style sheets (CSS). As you'll see, Macromedia has made strides in its CSS integration, migrating CSS property modification into the CSS Styles panel, also known as Unified CSS. Furthermore, page designs structured using CSS have gotten easier. By introducing the concept of layout blocks, Macromedia has made visually interacting with DIV tags easier and more intuitive. Additionally, Macromedia improved on the way CSS is rendered within the Document window, allowing properties such as border-style, overflow, inline box support, pseudo-elements, Mac font sizes, positioning, and more to be viewable within the Document window. Lastly, Macromedia has added a Style Rendering toolbar (see Figure 1.1), which features the ability to turn on and off CSS rendering within the Document window, allowing a developer to see how a page looks with CSS support versus without it. The toolbar also allows you to customize the display of CSS for specific media types including desktop browsers, handheld devices, print, and more.
Figure 1.1. The new Style Rendering toolbar allows CSS to be turned on and off as well as customized for a specific media delivery mechanism.
Unified CSS
In previous versions of Dreamweaver, CSS property modification was handled in one of two ways. First, the user could create a rule using the Style Definition dialog. When an edit needed to be made, the user would right-click the style in the Styles panel, choose Edit, and make the necessary changes in the Style Definition dialog. In the second approach, a user could create a style rule using the Style Definition dialog as just described. When an edit to a CSS property needed to be made, the user could open the Tag Inspector panel to make fine-tuned property modifications to a style rule. Either method required too much effort from the user and would ultimately force the user to shift focus from the CSS Styles panel to either the Style Definition dialog or the Tag Inspector. To rectify this problem, Dreamweaver now features a unified CSS Styles panel, shown in the All Document mode in Figure 1.2.
Figure 1.2. The new unified CSS Styles panel integrates all CSS related functionality into one panel.
Figure 1.3. The Current Selection mode displays properties that a currently selected element employs.
Figure 1.4. Add to or make edits to a currently selected element's properties directly within the new unified CSS Styles panel while in Current Selection mode.
CSS DIV Visualization
One of the hottest trends in web development these days is that of table-less web page structuring using pure CSS positioning and DIV tags. To coincide with this trend, Macromedia improved on its DIV tag support by making DIV tags and their associated CSS properties much easier to visualize. As you can see from Figure 1.5, DIV tags are now highlighted (in blue), making them easier to distinguish from other elements on the page.