Adobe 38040334 - Dreamweaver CS3 User Manual page 172

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:
Displays the outlines of all CSS layout blocks on the page.
CSS Layout Outlines
Displays temporarily assigned background colors for individual CSS layout blocks, and
CSS Layout Backgrounds
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.
Displays the box model (that is, padding and margins) of the selected CSS layout block.
CSS Layout Box Model
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
attribute to the appropriate page element.
display:block
Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting
1
CSS in the Basic page column, and clicking Create.
In the new style sheet, create rules that assign the
2
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;
}
Save the file.
3
attribute to the page elements you want to
display:block
September 4, 2007
DREAMWEAVER CS3 165
User Guide