- Displaying Link States and Other Style Rendering
- Finding CSS Layouts with Background Colors
- Revealing Coding with Inspect
- Disabling CSS Properties
- Previewing in Adobe BrowserLab
- New CSS Starter Pages
- Final Notes
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Finding CSS Layouts with Background Colors
In my live and online classes and my YouTube Dreamweaver tutorials, I have often invoked a cheap trick to help designers keep different CSS style containers identifiable: The students temporarily assign a different background color to each CSS container. I can drop that bit from my act now, though, because Dreamweaver CS5 includes a feature that automatically applies temporary color backgrounds to CSS design boxes for identification.
Here's how it works: On a page with CSS containers that define a page layout, choose View > Visual Aids > CSS Layout Backgrounds. With CSS Layout Backgrounds turned on, every CSS style that is being used as a content container is shown with a unique background color. These colors are for preview purposes only; they won't show up when the page is opened in a browser. But the color coding makes it easy to identify which CSS code is governing which parts of a page layout. In Figure 3, I've clicked the border of one of these CSS containers to reveal relevant CSS attributes in the CSS Styles panel. (I selected the Current tab in the CSS Styles panel to make it easy to isolate the CSS code applied to this particular container.)
)
Figure 3 Identifying a CSS container by turning on CSS layout coloring.
With the appropriate CSS container identified, you can easily edit style rules (attributes) such as box width, background color, padding, and so on in the bottom of the CSS Styles panel. Another technique works just as well: Double-click the applicable CSS rule in the top of the panel to open the CSS Rule Definition dialog.
When you no longer need simulated layout background colors, and you want to see the real background colors on your page, choose View > Visual Aids and deselect CSS Layout Backgrounds.