About Layout mode

In Layout mode, you use layout cells and tables to lay out your page before adding content. For example, you could draw a cell along the top of your page to hold a header graphic, another cell on the left side of the page to hold a navigation bar, and a third cell on the right to hold content. As you add content, you can move cells around as necessary to adjust your layout.

Layout tables appear outlined in green on your page; layout cells appear outlined in blue on your page. (To change the default outline colors, see Setting preferences for Layout mode.) When you move the pointer over a table cell, Dreamweaver highlights the cell. (To enable or disable highlighting or to change the highlight color, see Drawing layout cells and tables.)

You can lay out your page using several layout cells within one layout table, which is the most common approach to web-page layout, or you can use multiple, separate layout tables for more complex layouts. Using multiple layout tables isolates sections of your layout, so that they aren’t affected by changes in other sections.

You can also nest layout tables, by placing a new layout table inside an existing layout table (see Drawing a nested layout table). This structure enables you to simplify the table structure when the rows or column in one part of the layout don’t line up with the rows or columns in another part of the layout. For example, using nested layout tables you could easily create a two-column layout with four rows in the left column and three rows in the right column.

This section covers the following conceptual topics:

• About viewing table and cell widths in Layout mode
• Layout table and cells grid lines
• Fixed column width and autostretch columns
• Spacer images

Related topics

• Switching from Standard to Layout mode
• Drawing in Layout mode