PDF (adobe.com)

Visualizing CSS layout blocks

You can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element that you can position anywhere on your page. More specifically, a CSS layout block is either a div tag without display:inline, or any other page element that includes the display:block, position:absolute, or position:relative CSS declarations. Following are a few examples of elements that are considered CSS layout blocks in Dreamweaver:

  • A div tag

  • An image with an absolute or relative position assigned to it

  • An a tag with the display:block style assigned to it

  • A paragraph with an absolute or relative position assigned to it

Note: For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code falls within a line of text), or simple block elements like paragraphs.

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 Outlines
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.