CHAPTER 3 PAGE LAYOUT

Laying Out Pages in Layout View

Dreamweaver gives you several different ways to lay out web pages.

One common method for creating a page layout is to use HTML tables to position elements. Tables can be difficult to use for layout, however, because they were originally created for displaying tabular data, not for laying out web pages.

To streamline the process of using tables for page layout, Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure, while avoiding some of the problems that often occur when creating table-based designs using traditional means. For example, in Layout view you can easily draw layout cells on your page, then move the cells where you want them. You can also easily create both fixed-width layouts and layouts that automatically stretch to the full width of the browser window (see Setting column width).

You can still lay out your pages using tables in the traditional way (see Presenting Content with Tables), or lay out pages using layers and then convert them to tables (see Using tables and layers for layout). However, Layout view is the easiest way to set up your page layout.

Note: In Layout view, you can’t use the Insert Table and Draw Layer tools that you can use in Standard view. To use those tools, you must first switch to Standard view.

This chapter contains these sections:

• About layout cells and tables
• Switching into and out of Layout view
• Drawing layout cells and tables
• Adding content to a layout cell
• Moving and resizing layout cells and tables
• Formatting layout cells and tables
• Setting column width
• Setting Layout view preferences
• Reference

LESSON About layout cells and tables

In Layout view, you can lay out your page before adding any 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.

(Another approach is to draw each cell only when you’re ready to put content into it. This approach allows you maximum flexibility; it leaves more blank space in the layout table for a longer time, which allows you to move or resize cells more easily.)

When you draw a layout cell that isn’t inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table.

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 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. This structure allows 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. For more information, see Drawing a nested layout table.

LESSON Switching into and out of Layout view

Before you can draw layout tables or layout cells, you must switch from Standard view into Layout view.

Tip: If you create a table in Standard view, then switch into Layout view, the resulting layout table may contain empty layout cells. You may need to delete these empty layout cells before you can create new layout cells or move layout cells around. When you create a new layout that you’re going to edit in Layout view, it’s easier to create the table in Layout view than to create it in Standard view.

To switch into Layout view:

1. If Design view isn’t visible, choose View > Design or View > Code and Design.

Layout view cannot be enabled or disabled in Code view.

2. Choose View > Table View > Layout View or click the Layout View button in the Insert bar’s Layout category. (In the Dreamweaver 4-style floating workspace, with a vertical Insert bar, the layout-related items appear at the bottom of the panel, rather than in a separate category.)

A gray bar labeled Layout View appears across the top of Design view, to indicate that you’re in Layout view. If there are tables on your page, they appear as layout tables.

To switch out of Layout view:

1. If Design view isn’t visible, choose View > Design or View > Code and Design.

Layout view cannot be enabled or disabled in Code view.

2. Choose View > Table View > Standard View or click the Standard View button in the Insert bar’s Layout category.

LESSON Drawing layout cells and tables

You can draw layout cells and tables on your page in Layout view. When you draw a layout cell that isn’t inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table.

Note: When Dreamweaver automatically creates a layout table, the table initially appears to fill the entire Design view, even if you change the size of your Document window. This full-window default layout table allows you to draw layout cells anywhere in Design view. You can set the table to a specific size by clicking the table border and then dragging the table’s resize handles.

To draw a layout cell:

1. Make sure you are in Layout view (see Switching into and out of Layout view), then click the Draw Layout Cell button
   
   in the Layout category of the Insert bar. (In the Dreamweaver 4-style floating workspace, with a vertical Insert bar, the layout-related items appear at the bottom of the panel, rather than in a separate category.)

The pointer changes to a plus sign (+).

2. Position the pointer where you want to start the cell on the page, then drag to create the layout cell. To create multiple cells without having to click the Draw Layout Cell button each time, create each layout cell by Control-dragging (Windows) or Command-dragging (Macintosh).

The cell appears outlined in blue on your page. (Blue is the default outline color for layout cells. To change the outline color, see Setting Layout view preferences.) The width of each cell is displayed in the column header area at the top of the column, if layout table tabs are showing (see Setting Layout view preferences). For more information on column widths, see Setting column width.

A light grid of lines appears, extending from the edges of the new layout cell out to the edges of the layout table that contains it. These lines help you align new cells with old cells, and help you visualize the underlying HTML table’s structure.

Dreamweaver automatically snaps the edges of new cells into alignment with nearby edges of existing cells. (Layout cells cannot overlap.) Cell edges also automatically snap to the edges of the containing layout table if you draw a cell close to the edge of a table. To temporarily disable snapping, hold down Alt (Windows) or Option (Macintosh) while drawing the cell.

To draw a layout table:

1. Make sure you are in Layout view. Then do one of the following:
• To draw one layout table, click the Draw Layout Table button
  
  in the Layout category of the Insert bar. The pointer changes to a plus sign (+).
• To draw more than one layout table without having to repeatedly click the Draw Layout Table button, Control-click (Windows) or Command-click (Macintosh) the Draw Layout Table button. When you finish drawing a layout table, you can immediately draw another one.
2. Position the pointer on the page, then drag to create the layout table.

If there’s no other content on the page, the new table is automatically positioned at the upper left corner of the page.

The table appears outlined in green on your page. (Green is the default outline color for layout tables. To change the outline color, see Setting Layout view preferences.) A tab labeled Layout Table appears at the top of each table you draw, to help you select the table and distinguish it from other elements of your page.

The width of the table (in pixels, or as a percentage of the page width) is displayed in the column header area along the top of the table, if layout table tabs are showing (see Setting Layout view preferences). For more information on table and column width, see Setting column width.

You can create a layout table in an empty area of your page layout, or around existing layout cells and tables, or nested inside an existing layout table. Tables cannot overlap each other, but a table can be completely contained inside another table. For more information, see Drawing a nested layout table.

Tip: You can’t draw a layout table next to existing content. If your page already contains any content, you can draw a new layout table only below the bottom of the existing content. If you try to draw a layout table below existing content but the no-draw pointer appears, try resizing the Document window to create more blank space between the bottom of the existing content and the bottom of the window.

LESSON Drawing a nested layout table

You can draw a layout table inside another layout table, to create a nested table. The cells inside a nested table are isolated from changes made to the outer table; for example, when you change the size of a row or column in the outer table, the cells in the inner table don’t change size.

You can insert multiple levels of nested tables. A nested layout table cannot be larger than the table that contains it.

Note: If you draw a layout table in the middle of your page before drawing a layout cell, the table you draw is automatically nested inside a larger table.

To draw a nested layout table:

1. Make sure you are in Layout view, then click the Draw Layout Table button
   
   in the Layout category of the Insert bar.

The pointer changes to a plus sign (+).

2. Point to an empty (gray) area in an existing layout table, then drag to create the nested layout table.

Note: You can’t create a layout table inside a layout cell. You can create a nested layout table only in an empty area of an existing layout table, or around existing cells.

To draw a layout table around existing layout cells or tables:

1. Make sure you are in Layout view, then click the Draw Layout Table button in the Layout category of the Insert bar.

The pointer changes to a plus sign (+).

2. Drag to draw a rectangle around a set of existing layout cells or tables.

A new nested layout table appears, enclosing the existing cells or tables.

Tip: To make an existing layout cell fit snugly into one corner of the new nested table, start dragging near the corner of the cell; the new table’s corner snaps to the cell’s corner. You can’t start dragging in the middle of a layout cell, because you can’t create a layout table entirely inside a layout cell.

LESSON Snapping layout cells to the grid

You can turn on the Dreamweaver grid to use as a visual guide while you draw your layout. You can make page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible.

To show or hide the grid:

Choose View > Grid > Show Grid.

To enable or disable snapping:

Choose View > Grid > Snap to Grid.

To change grid settings:

1. Choose View > Grid > Grid Settings.

The Grid Settings dialog box appears.

2. Set options as desired.

For more information, see Setting the Grid Settings dialog box options.

3. Click OK.

LESSON Adding content to a layout cell

You can add text, images, and other content to layout cells in Layout view just as you would add content to table cells in Standard view. Click in the cell where you want to add content, then type text or insert other content.

You can insert content only into a layout cell, not into an empty (gray) area of a layout table, so before you can add content, you must first create layout cells (see Drawing layout cells and tables).

A layout cell expands automatically when you add content that is wider than the cell. As the cell expands, the column that the cell is in also expands, which might change the sizes of surrounding cells. The column header area for that column changes to show the width that appears in the code, followed by the visual width of the column (the width as it appears on your screen) in parentheses. (For more information about column widths, see Setting column width.)

To add text to a layout cell:

Place the insertion point in the layout cell where you want to add text and do one of the following:

• Type text into the cell. The cell automatically expands as you type, if necessary.
• Paste text copied from another document. Use the Paste command. For more information, see Inserting and formatting HTML text.

To add an image to a layout cell:

1. Place the insertion point in the layout cell where you want to add the image.
2. Do one of the following:
• Click the Insert Image button in the Insert bar’s Common category.
• Choose Insert > Image.
3. In the Select Image dialog box, select an image file.

For more information, see Inserting an image.

LESSON Clearing automatically set cell heights

When you create a layout cell, Dreamweaver automatically specifies a height for the cell, to make the cell display at the height you drew even though the cell is empty. After you insert content into the cell, you may no longer need the height to be specified, so you can remove the explicit cell heights from the table.

To clear cell heights, do one of the following:

• Select Clear Cell Heights from the column-header menu.

Dreamweaver clears all the heights specified in the table. Some of the table cells may shrink vertically.

• Select a layout table by clicking the tab at the top of the table, then click the Clear Row Heights button in the Property inspector.

Dreamweaver clears all the heights specified in the table.

LESSON Moving and resizing layout cells and tables

To adjust your page layout, you can move and resize layout cells and nested layout tables. (The outermost layout table can only be resized.)

Layout cells cannot overlap. You cannot move or resize a cell to make it cross the boundaries of the layout table that contains it. A layout cell cannot be made smaller than its contents.

A layout table cannot be resized to be smaller than the smallest rectangle containing all of its cells. A layout table also cannot be resized so that it overlaps other tables or cells.

To resize a layout cell:

1. Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell.

Selection handles appear around the cell.

2. Drag a selection handle to resize the cell.
   

The cell edges automatically snap to align with other cells’ edges.

To move a layout cell:

1. Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell.

Selection handles appear around the cell.

2. Do one of the following:
• Drag the cell to another location within its layout table.
• Press the arrow keys to move the cell 1 pixel at a time. Hold down Shift while pressing an arrow key to move the cell 10 pixels at a time.

To resize a layout table:

1. Select a table by clicking the tab at the top of the table.

Selection handles appear around the table.

2. Drag the selection handles to resize the table.

The table edges automatically snap to align with the edges of other cells and tables.

To move a layout table:

1. Select a table by clicking the tab at the top of the table.

Selection handles appear around the table.

2. Do one of the following:
• Drag the table to another location on the page.

Note: You can move a layout table only if it’s nested inside another layout table.

• Press the arrow keys to move the table 1 pixel at a time. Hold down Shift while pressing an arrow key to move the table 10 pixels at a time.

Related topic

To use the Dreamweaver grid as a guide while you move or resize your cells and tables, see Snapping layout cells to the grid.

Formatting layout cells and tables

You can change the appearance of any layout cell or table by using the Property inspector.

LESSON Formatting layout cells

You can set various attributes of a layout cell in the Property inspector, including width and height, background color, and alignment of the cell’s contents.

To format a layout cell in the Property inspector:

1. Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell.
2. Open the Property inspector by choosing Window > Properties.
3. Change the cell’s formatting by setting properties.

For more information, see Setting layout cell properties.

Formatting layout tables

You can set various attributes of a layout table in the Property inspector, including width, height, padding, and spacing.

To format a layout table:

1. Select a table by clicking the tab at the top of the table, or by clicking the <table> tag in the tag selector.
2. Open the Property inspector by choosing Window > Properties.
3. Change the table’s formatting by setting properties.

For more information, see Setting layout table properties.

LESSON Setting column width

A column in Layout view can have either a fixed width or a width that automatically expands to fill as much of the browser window as possible (“autostretch”). Information about the width appears in the column header area at the top of each column of the selected table, if layout table tabs are showing (see Setting Layout view preferences).

A fixed-width column has a specific numeric width, such as 300 pixels; the width appears in the column header area (unless the column is too narrow for the numbers to be displayed). An autostretch column’s width changes automatically depending on the browser window’s width; the column header area for an autostretch column shows a wavy line instead of a number. If your layout includes an autostretch column, the layout always fills the entire width of the visitor’s browser window.

Note: The width you specify for a column applies to all the cells in that column.

You can make only one column in a given layout table autostretch. A common layout is to make the column containing the main content of the page autostretch, which automatically sets all the other columns to fixed width.

For example, suppose your layout has a wide image on the left side of the page and a column of text on the right. You might set the left column to a fixed width and make the sidebar area autostretch.

When you make a column autostretch, Dreamweaver inserts spacer images in the fixed width columns to ensure that those columns stay as wide as they should be, unless you specify that no spacer image should be used. A spacer image is a transparent image, used to control spacing, that is not visible in the browser window. For more information, see Using spacer images.

Note: Making a column autostretch before your layout is complete may have unexpected effects on table layout. To prevent columns from growing unexpectedly wider or narrower, create your complete layout before making a column autostretch, and use spacer images when making a column autostretch. (However, if each column contains other content that will keep the column at the desired width, you don’t need spacer images.)

Sometimes the visual width of a column as it appears in Layout view doesn’t match the width specified in the HTML code. In that case, two numbers appear in the column header area. (For more information on inconsistent widths, see Setting layout table properties.)

To make a column autostretch, do one of the following:

• In the column header area at the top of a fixed width column, select Make Column Autostretch from the column header menu. You can make only one column in a given table autostretch.
  
• Select a cell in the column by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell. Then, in the Property inspector, click Autostretch.

To set a column to a fixed width, do one of the following:

• In the column header area at the top of an autostretch column, select Make Column Fixed Width from the column header menu.

Make Column Fixed Width specifies a width for the column (in the code) that matches the current visual width of the column.

• Select a cell in the column by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell. Then, in the Property inspector, click Fixed and type a numeric value.

If you enter a numeric value that is less than the width of the column’s content, Dreamweaver automatically sets the width to match the width of the content.

To set the width of cells as specified in the HTML code to match the cells’ visual width:

Select Make Cell Widths Consistent from the column header menu for any column.

Related topics

Setting Layout view preferences

Setting layout table properties

LESSON Using spacer images

A spacer image (also known as a spacer GIF) is a transparent image that’s used to control spacing in autostretch tables. A spacer image consists of a single-pixel transparent GIF image, stretched out to be a specified number of pixels wide. A browser can’t draw a table column narrower than the widest image contained in a cell in that column, so placing a spacer image in a table column requires browsers to keep the column at least as wide as the image.

Dreamweaver automatically adds spacer images when you set a column to autostretch, unless you specify that no spacer image should be used. You can manually insert and remove spacer images in each column if you prefer. Columns that contain spacer images have a double bar in the column header area.

Note: If you choose not to use spacer images in autostretch tables, fixed-width columns may change size or even disappear completely from Design view when they do not contain content. (The columns still exist in the code, even if they don’t appear in Design view.)

When you insert a spacer image in a column or set a column to autostretch, a dialog box appears, asking how you want to set up your spacer image file. If you have already set a spacer image for the site in the Dreamweaver preferences, the dialog box does not appear (see Setting Layout view preferences).

You can manually insert and remove spacer images in specific columns or remove all spacer images in the page.

To set up a spacer image:

1. Make a column autostretch, or choose Add Spacer Image from the column header menu.
   

The Choose Spacer Image dialog box appears.

2. Choose one of the options.

For more information, see Setting the Choose Spacer Image dialog box options.

3. Click OK.

To insert a spacer image into a column:

Select Add Spacer Image from the column header menu.

The spacer image is inserted into the column. The image is not visible, but the column may shift slightly and a double bar appears at the top to indicate that it contains a spacer image.

To remove a spacer image from a column:

Select Remove Spacer Image from the column header menu.

The spacer image is removed. The column may shift.

To remove all spacer images from a table:

Do one of the following:

• Select Remove All Spacer Images from the column header menu of any column in the table.
• Click the Remove All Spacers button in the layout table Property inspector.
  

The layout of your whole table may shift. If there is no content in some columns, the columns may disappear completely from the Design view.

LESSON Setting Layout view preferences

Use the Layout View category in the Preferences dialog box to specify information about spacer image files and about the colors that Dreamweaver uses to draw layout tables and layout cells.

By default, a tab labeled Layout Table appears at the top of each layout table in Layout view, and a set of column-width controls appears at the top of the currently selected layout table. You can prevent the tabs and controls from appearing if you prefer.

Note: Even when tabs are showing, the layout table at the top of the page doesn’t have a tab when it’s selected. The tab for a layout table at the top of the page appears only when the table is not selected.

To set Layout view preferences:

1. Choose Edit > Preferences.
2. Select Layout View from the Category list.
3. Make changes as necessary.

For more information, see Setting the Layout View Preferences dialog box options.

4. Click OK to close the dialog box.

To turn off the layout table tabs and column-width controls in Layout view:

Choose View > Table View > Show Layout Table Tabs.