Designing Your Dreamweaver MX Page Layout Using Tables
This chapter is from the book
This chapter is from the book
This chapter is from the book
In the last hour, "Displaying Data with Tables," you explored some of the properties of tables and table cells. You used tables in Web pages in the same way you might use tables in a spreadsheet or a word processing application— to present data in an organized way. In this hour, you will apply more properties and new commands, using tables to aid Web page layout.
NOTE
Page layout refers to designing the way the page will look when viewed in the browser. You position text, menus, and other page elements in an efficient and attractive way.
Tables give Web developers the ability to make page elements appear in a specific place on the screen. Dreamweaver enables you to work in Layout view so you can draw table elements directly onto the Document window. This makes it easy to create tables for page layout.
In this hour, you will learn
-
How to use Dreamweaver's Layout view
-
How to merge and split table cells
-
How to align the contents of table cells
-
How to nest a table within a table cell
-
How to turn a table into a group of layers
Using Layout View
Traditionally, designing tables for page layout has been a complicated task. Making changes or creating the perfect number of cells required Web developers to merge, split, and span various rows and columns to get pages to look the way they wanted them to. Dreamweaver MX includes a Layout view, enabling you to easily draw, move, and edit table cells.
To turn on Layout view, select the Layout View button on the Layout view tab of the Insert bar, shown in Figure 12.1. When you turn on Layout view, the two layout buttons on the Insert bar become active. One of these buttons draws a layout table; the other button draws an individual layout cell (a table cell).
){kind=link}
Figure 12.1 You select Layout view in the Layout tab of the Insert bar. You can go back and forth between the Layout and Standard views.
Adding a Layout Table and Layout Cells
Dreamweaver's Layout view enables you to draw your design in table cells directly onto the Document window. Create areas for content, menus, and other elements of a Web page by selecting the Draw Layout Cell command and drawing cells for each page element.
TIP
Design for a specific screen resolution by first selecting a resolution from the Window Size drop-down menu in Dreamweaver's status bar.
To create a page layout
Select the Layout View button in the Insert bar.
Select the Draw Layout Cell button in the Insert bar.
-
Draw cells in the Document window for page elements, as shown in Figure 12.2. A layout table is automatically created to hold the layout cells.
When you place your cursor over the edges of a layout table cell, the outline of the cell changes from dotted blue to solid red. This is when you can click the cell to select it. A selected cell appears as solid blue with resize handles visible. Move cells by selecting and dragging them.
Resize cells by dragging the resize handles at the corners and sides of the cells.
Resize the table that contains the cells by dragging the resize handles at the corners and sides of the table.
){kind=link}
Figure 12.2 In Layout View, you can draw table cells in the Document window. The cells are contained within a layout table.
TIP
To create multiple layout cells without having to click on the Draw Layout Cell button every time, hold down the Ctrl key in Windows and the Command key on the Mac.
To quickly select a cell to edit its properties, Ctrl-click (Command-click on the Mac) on the cell. The Property inspector, shown in Figure 12.3, presents the width, height, background color, horizontal and vertical alignment, and wrapping properties. These properties are exactly the same table cell properties that you learned about last hour. There's one additional property, Autostretch, which is unique to layout tables.
){kind=link}
Figure 12.3 In Layout mode, the Property inspector displays layout cell properties.
Stretching Your Content to Fit the Page
Autostretch enables a column to stretch to fill all of the available space in the browser window. No matter what size the browser window is, the table will span the entire window. When you turn on Autostretch for a specific cell, all of the cells in that column will be stretched. This setting is particularly useful for cells that contain the main content of the page. The menus can stay the same width, but the content can stretch to take up all the available space.
Dreamweaver will automatically add spacer images to your table cells to make sure they remain the size that you intend in all browsers. The spacer image trick is an old trick used by Web developers to ensure that table cells don't collapse. A transparent one-pixel GIF is stretched to a specific width. This image is not visible in the browser. The GIF maintains the width of all the cells that are not in the autostretched column. If you do not add a spacer image, any columns without an image to hold their size will collapse.
To turn on Autostretch
Select a cell by Ctrl-clicking it.
Select the Autostretch radio button in the Property inspector.
-
The Choose Spacer Image dialog box appears, as shown in Figure 12.4. You have three choices:
Create a spacer image file: Dreamweaver creates an invisible one-pixel GIF image, adds it to the top cell of each column, and stretches it to the column width. When you select this option, Dreamweaver asks you where you'd like to store the spacer.gif image that Dreamweaver creates.
Use an existing spacer image file: If you've already created a spacer image, select this option. Dreamweaver asks you to navigate to where the image is stored.
Don't use spacer images for Autostretch tables: If you select this option, -Dreamweaver warns you that your cells may collapse and not maintain the widths that you have set.
){kind=link}
Figure 12.4 The Choose Spacer Image dialog box enables you to choose what spacer you use when you turn on Autostretch.
You can also apply the Autostretch command for an entire column by selecting the drop-down menu in the column heading, shown in Figure 12.5. Each column heading displays the width of the column in pixels. You can also simply add a spacer image to the column (or remove it from the column) by selecting the appropriate commands from this menu. When a column has a spacer image added, the line at the top of the column appears thicker. When a column is set to autostretch, a squiggly line appears instead of the column width.
){kind=link}
Figure 12.5 Use the drop-down menu at the top of a layout table column to turn on Autostretch for a table column.
You can set a spacer image for a site in Dreamweaver preferences. After you have set a spacer image for the site, Dreamweaver no longer prompts you to create or choose a spacer image; the image is simply added. Create or select a spacer image for an entire site by opening the Layout View category of Dreamweaver preferences, as shown in Figure 12.6. Note that you can also change the colors in which layout objects appear in Dreamweaver and whether or not spacer images are automatically inserted in this preferences category.
){kind=link}
Figure 12.6 Set a spacer image for an entire site in the Layout View category of Dreamweaver preferences.
CAUTION
Dreamweaver adds an additional row at the bottom of your table for the spacer images. Do not remove this row.