DREAMWEAVER CS3
User Guide
165
Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines,
backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display
properties for a selected CSS layout block when you float the mouse pointer over the layout block.
The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each:
CSS Layout
O
utlines
Displays the outlines of all CSS layout blocks on the page.
CSS Layout Backgrounds
Displays temporarily assigned background colors for individual CSS layout blocks, and
hides any other background colors or images that normally appear on the page.
Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each
CSS layout block a distinct background color. (Dreamweaver selects the colors using an algorithmic process—there
is no way for you to assign the colors yourself.) The assigned colors are visually distinctive, and are designed to help
you differentiate between CSS layout blocks.
CSS Layout Box Model
Displays the box model (that is, padding and margins) of the selected CSS layout block.
View CSS layout blocks
You can enable or disable CSS layout block visual aids as necessary.
View CSS layout block outlines
❖
Select View > Visual Aids > CSS Layout Outlines.
View CSS layout block backgrounds
❖
Select View > Visual Aids > CSS Layout Backgrounds.
View CSS layout block box models
❖
Select View > Visual Aids > CSS Layout Box Model.
You can also access CSS layout block visual aid options by clicking the Visual Aids button on the Document toolbar.
Use visual aids with non-CSS layout block elements
You can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t
normally considered CSS layout blocks. To do so, you must first create a Design-time style sheet that assigns the
display:block
attribute to the appropriate page element.
1
Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting
CSS in the Basic page column, and clicking Create.
2
In the new style sheet, create rules that assign the
display:block
attribute to the page elements you want to
display as CSS layout blocks.
For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet
with the following rules:
p{
display:block;
}
li{
display:block;
}
3
Save the file.
September 4, 2007
