About CSS layout visualization

About CSS layout visualization

Dreamweaver lets you 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

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 shows you the outlines of all CSS layout blocks on the page.

CSS Layout Backgrounds shows you 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 shows you the box model (that is, padding and margins) of the selected CSS layout block.

Related topics

  • Viewing CSS layout blocks
  • Using Design-time style sheets with CSS layout blocks

Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Laying Out Pages with CSS
Managing Templates
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly