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.


As you can see from Figure 1.2, the panel displays classes, IDs, and more for a specific style sheet as it did in previous versions of Dreamweaver. The difference is that properties can now be added intuitively by simply clicking the Add Property link. Although you still have the option of using the Style Definition dialog for property modification, more advanced users will appreciate the fact that being forced to shift focus from the CSS Styles panel to another dialog or panel has been eliminated.

The Current Selection mode, shown in Figure 1.3, displays properties that a particular selected element currently uses.

Figure 1.3. The Current Selection mode displays properties that a currently selected element employs.


As you can see from Figure 1.3, the CSS Styles panel in Current Selection mode displays a property list for a selected element within the Document window. Beyond that however, lies the ability to either edit or add to the currently selected element's properties from within the Properties for <rule> pane shown in Figure 1.4.

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.


Lastly, the About/Cascade panes display either the rule the currently selected property is contained within or displays cascading information (the hierarchy of rules) for a particular property. These two views can be switched by clicking the About/Cascade buttons located on the right side of the About/Cascade title bar.

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.

Figure 1.5. DIV tags are now much easier to distinguish from other elements on the page.


Furthermore, hovering the mouse pointer over the element contained within the DIV tag also displays the DIV tag's applied CSS properties, including positioning, width and height, and more.




Macromedia Dreamweaver 8 Unleashed
Macromedia Dreamweaver 8 Unleashed
ISBN: 0672327600
EAN: 2147483647
Year: 2005
Pages: 237
Authors: Zak Ruvalcaba

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net