- Viewing Aids
- Layout View
- The Convert Layers to Table Command
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Layout View
Dreamweaver Design view includes two separate modes of working: Standard view and Layout view. Layout view is an alternate way of viewing and working with documents containing table-based layouts, where the tables and cells appear more like rectangular boxes full of content than like HTML tables—something like the text boxes and picture boxes that print designers are familiar with from QuarkXPress and InDesign. To create the layout, draw some boxes. To adjust the layout after it's been created, adjust the size and shape of your boxes. Meanwhile, behind the scenes, Dreamweaver is creating and adjusting the HTML table code for you.
NOTE
Unfortunately, the Layout View feature has a bug (a flaw in the way the software functions), which was present in Dreamweaver 4 and was not fixed in Dreamweaver MX. When Dreamweaver writes table code from the design you create in Layout View, it often includes empty table cells, which look like this:
<td></td>
Empty table cells produce serious display problems in some browsers, and might cause your page to look very different than you expect or intend. Netscape 4 browsers, in particular, don't display empty table cells well.
For this reason, we recommend that Layout View be used only when absolutely necessary, and when it is used, that the empty table cells be filled with either a non-breaking space character ( ) or a single-pixel GIF spacer. This can be done by using Dreamweaver's Find and Replace feature, or simply by reviewing the page code and adding the non-breaking spaces or GIFs manually.
There's another problem with the code written by Dreamweaver when pages are designed in Layout View; it often specifies table heights and widths in pixels. As of this writing, the commonly used browsers do not all display table and cell heights and widths as specified in pixels.
If you do use Layout View, these height and width attributes should be removed. See the discussion on "Formatting Layout Tables," later in this chapter for more on removing height values.
About Layout Cells and Layout Tables
Layout view enables you to add layout cells and layout tables to your page, to facilitate placing page elements where you want them. When you draw a layout table, Dreamweaver creates an HTML table. When you draw a layout cell inside a layout table, Dreamweaver creates a cell (<td> tag) inside the table. Just as a table cell can't exist outside a table, a layout cell must always be contained by a layout table. (If you create a layout cell without first creating a layout table, Dreamweaver will automatically create a layout table for you.)
A page could consist of a single layout table with several layout cells. However, just as you might use multiple HTML tables in one page, you might want to use multiple layout tables. Using multiple tables isolates sections of your layout so that one section isn't affected by another; within the same table, the size of a cell often affects the other cells in its row and column.
Just like regular HTML tables, layout tables also can be nested.
Switching Between Layout and Standard View
Layout view and Standard view are two different viewing modes within Design view. Normally, when you're in Design view, you're in Standard view.
NOTE
Just because you're working in Layout view doesn't mean you can't keep an eye on your code. While you're in Layout view you can still switch between Design view and Code view, or even work in Code and Design view.
Accessing Layout View
To switch into Layout view, first be sure you are in Design View by choosing View > Design, and then do one of the following:
Choose View > Table View > Layout View (Ctrl+F6).
-
Click the Layout view button in the Layout tab of the Insert bar (see Figure 10.5).
After you're in Layout view, any tables your document already contains will now display as layout tables. If your document is empty, you can use the objects in the Layout tab of the Insert bar to build your page layout.
){kind=small}
Figure
10.5 Switching views using the Insert bar.
Accessing Standard View
After you're in Layout view, to switch back into Standard view, go to the Layout tab of the Insert bar and click the Standard View button (see Figure 10.9). All layout tables are now displayed as standard HTML tables, and can be edited using the methods covered in the preceding chapter.
NOTE
You can go back and forth between Layout and Standard view as often as you like, in building your pages. You can even start with a page created entirely in Standard view, using the standard HTML table-creation tools, switch to Layout view, and start editing the table as a Layout table.
Creating Tables and Cells in Layout View
Working in Layout view, you can draw both layout cells and layout tables.
NOTE
Layout view is a Dreamweaver-specific tool. Although you're creating HTML tables in Layout view, many of the terms and concepts used don't exist in HTML, but only in the Dreamweaver software.
Drawing Layout Tables
Use the Draw Layout Table button to draw a table on an empty area of the page, or inside another layout table. To draw a layout table, follow these steps:
-
Make sure that you are in Layout view, and then, in the Layout category of the Insert bar, click the Draw Layout Table button (see Figure 10.5). The cursor will change to a crosshair (+).
-
Place the cursor at the point on the page where you want one corner of a layout table and click and drag to draw the table—as if you were drawing a rectangle in a graphics program. Note that if you want the table to be the only table on the page, or the first of several tables, you must draw it so that its upper-left corner is at the upper-left corner of the page.
-
On your page, the new table will appear outlined in green (see Figure 10.6). At its top is the Column Header area, which displays the column's width in pixels. In this case, the table consists of only one column, so this width will also be the table's width. (See below for more on setting up flexible, percent-based, layout tables.)
Figure
10.6 A new layout table, set to a pixel width of 606.
NOTE
If you draw a layout table in the middle of an empty document, Dreamweaver will create it as a table nested inside a larger table. If this happens and you don't want it to, Edit > Undo and draw again, being careful to begin or end in the upper-left corner.
)
Figure
10.6Layout tables can be placed in empty page areas, nested within existing tables, or drawn around existing cells and tables. Like all HTML tables, they cannot overlap each other.
NOTE
To draw a number of layout tables without clicking the Layout Table button each time, hold down Control (Windows) or Command (Mac). This technique also applies to drawing a number of layout cells.
Drawing Layout Cells
To draw a layout cell, follow these steps:
-
Be sure you're in Layout view. In the Layout tab of the Insert bar, click the Draw Layout Cell button (see Figure 10.5). This causes the cursor to change to a plus sign (+) or crosshair (+) in preparation for drawing a cell.
-
Place the cursor within a layout table, at the point where you want to position one corner of your layout cell, and drag to create the cell. To draw more than one cell, you must click the Draw Layout Cell button again for each new cell.
-
The cell will display in the Dreamweaver Document window with a blue outline (see Figure 10.7). Because cells must exist within a row and column grid, the layout table containing your cell might show additional subdivisions—these are other cells in the HTML table that are being created as you work. The layout table's Column Header now shows the widths for all columns.
NOTE
Layout cells can only exist within a layout table. If you draw a layout cell outside the boundaries of a layout table, or without drawing a layout table first, Dreamweaver will create the layout table for you.
)
Figure
10.7 A layout cell inside a layout table.
Cells must stay within a row-and-column grid, but can span several rows or several columns. They cannot overlap, however. Dreamweaver helps you stay within this structure by snapping new cells to existing cells, or to the side of the page, if you draw them within 8 pixels. To temporarily stop snapping of cells, hold down Alt (Windows) or Option (Mac) while drawing the cell.
Cells in the same column can be different widths; cells in the same row can be different heights. Dreamweaver will create additional cells in the HTML table it's building, to create the layout that you specify.
Dreamweaver will draw whatever additional cells are needed to maintain the layout you specify; these cells will be displayed with a gray background.
Creating Nested Layout Tables
Just like HTML tables, layout tables can be placed within existing layout tables; this is referred to as nesting tables. Nested layout tables can only be drawn in the portions of a parent table that don't already contain layout cells (in other words, only in the gray portions of the parent table).
To draw a layout table nested inside another layout table, follow these steps:
-
Draw the parent layout table.
-
Click the Draw Layout Table icon in the Insert bar.
-
Position the cursor within the parent table, as though you were going to draw a new layout cell, and drag to create the table. Dreamweaver will create a cell within the layout table, and draw your new, nested table within that cell (see Figure 10.8).
){kind=small}
Figure
10.8 Creating a nested table by drawing a layout table within an existing
layout table.
NOTE
As noted earlier, if you draw a layout table in an empty document, but don't position it in the upper-left corner, Dreamweaver will automatically create it as a table nested inside another layout table.
As you can see from Figure 10.8, nested layout tables display with a Layout Table tab, in addition to a Column Width header. The header displays only if the nested table is selected; the tab always displays. This is your visual indication that the element is in fact a nested table, and not just another table cell. You can also click on the tab to select the nested table.
Manipulating Table Structure in Layout View
A major attraction of Layout view is that, after you've created your page layout in this way, you can adjust it much more intuitively than you can when working with HTML tables in Standard view. In addition to special Property inspectors for layout tables and cells, you can interactively resize and reposition your layout directly in the Document window.
Interactive Adjustments: Selecting, Moving, Resizing
Layout cells and nested layout tables can be moved and resized interactively, without referring to code or Property inspectors, by click-and-drag methods in the Document window.
Selecting (Tables and Cells)
To select a layout table, click its Column Width header or Layout Table tab (if it has one), or click anywhere inside the table and use the tag selector as you would in Standard view. A selected layout table displays with a green outline and selection handles (see Figure 10.6).
To select a layout cell, click its edge or click anywhere inside the cell and use the tag selector. You also can Control-click (Windows) or Command-click (Mac) anywhere in the cell to select it. A selected layout cell displays with a blue outline and selection handles (see Figure 10.7).
Resizing (Tables and Cells)
To resize a layout table or cell select it, and use the selection handles to drag the edges. Note that resizing a nested layout table will resize the table itself and the cell of the parent table that contains it. When resizing a layout table, remember the following:
Cells and nested tables will automatically snap to existing cells when within 8 pixels of an existing cell.
A layout table cannot be resized so that it would be smaller than the cells it contains.
A layout cell cannot be resized beyond the borders of its containing table.
No overlapping is allowed.
A layout cell is always at least as large as the content it contains.
Moving (Nested Tables and Cells)
You cannot move a layout table that isn't nested inside another table. To move a nested layout table or a layout cell, click-and-drag or use the arrow keys to move it 1 pixel at a time. Hold down Shift while using the arrow keys, to move 10 pixels at a time.
Using the Property Inspector
Layout tables and cells each have their own Property inspector, allowing you to set all the standard table and cell properties—just like in Standard view.
Formatting Layout Tables
When you select a layout table, the Layout Table Property inspector appears (see Figure 10.9). Some properties, such as width and height, cell padding and spacing, and background color, are the same as those you would find in the Property inspector for a standard table. But there are some differences, and items of special note. In particular:
Figure
10.9 The Layout Table Property inspector.
-
Instead of choosing pixels or percent for width, layout tables allow you to choose between a fixed pixel-width and autostretch. For more information on autostretch, see the section on "Creating Flexible Layouts" later in this chapter.
-
The Property inspector specifies a table height attribute, measured in pixels. You can change this attribute, here or by resizing the table in the Document window; but you can't remove the attribute completely. Layout tables must have a height attribute.
-
Layout tables can be assigned background colors, but not background images using the Property inspector.
-
Because most designers prefer to use gutter cells in their tables, rather than assigning cell padding or spacing, the cell padding and spacing attributes are set to 0 by default. (A gutter cell is an empty cell placed between two neighboring cells to separate their contents. The advantage of a gutter cell over cell padding or spacing is that it only adds space to one particular area of a table; cell padding and spacing will add space equally between all cells.)
-
The Clear Row Heights button removes all cell height attributes. If the table does not yet contain any elements, this will cause it to collapse; it is best used after all content has been added. Because not all browsers support the height attribute for table code, doing this will produce more stable code for your layout. You also can clear cell heights by accessing one of the drop-down menus in the table's Column Header area, and choose Clear Cell Heights (see Figure 10.10). Note that clearing row heights will reduce your layout table's height, but won't clear its height attribute.
-
The Make Widths Consistent button resets the HTML width attributes of each cell to match its content. If you are using a fixed-width table, set this attribute after you've added your content, to ensure stable code.
-
Remove Nesting will convert a nested layout table to cells within the parent table. The nested table will disappear, and its cells and their contents will become part of the parent table.
-
Remove All Spacer Images does just that. For more information on spacer images in layout tables, see the section "Using Spacer Images in Autostretch Tables" later in this chapter.
){kind=small}
Figure
10.10 The Layout Table Column Header menu.
Formatting Layout Cells
To edit the properties of a layout cell, select it and the Layout Cell Property inspector will appear (see Figure 10.11). As with layout tables, the properties that appear are generally the same as those you can set for table cells in Standard view. A few items of special note:
){kind=small}
Figure
10.11 The Layout Cell Property inspector.
-
Like layout tables, layout cells can be set to a fixed (pixel) width or to autostretch. See the section "Creating Flexible Layouts" later in this chapter, for more on this.
-
Like layout tables, layout cells can be assigned background colors but not background images using the Property inspector.
-
To set the horizontal or vertical alignment for the cell contents, use the drop-down menus labeled Horz and Vert. Because most designers prefer their layout content to be aligned to the tops of cells, the default vertical alignment is top.
-
Though you can set cell heights here, as mentioned above doing so will produce nonstandard and possibly unstable code.
Adding Content
Text, images, and other media can be added to layout cells just as you would add content to a regular HTML table in Standard view. However, the only place content can be inserted is in a layout cell, so the necessary cells must be drawn first. Just click in the cell where you want to insert content and type or insert the element. A few tips about layout cells and content:
-
When Dreamweaver creates layout cells, it automatically assigns them a vertical alignment of top. Any content you enter will float to the top of the cell.
-
Just like a normal HTML table cell, a layout cell will expand as needed to hold its content. As a cell expands, surrounding cells also might be affected, and the column the cell is in will expand.
-
As you created your layout cells, Dreamweaver might have subdivided the layout table to create other cells, to maintain the grid structure of the table. Those cells appear in the Document window as grayed-out areas marked by outlines. You can't enter content into one of those "placeholder" cells—to add content, you must use the Layout Cell tool to draw a cell in that space.
-
Because you're in Layout view, you can't create a table using the standard Table object. If you want to insert a regular table (for displaying tabular data) into your layout table, you'll have to go to Standard view to do it.
Exercise 10.1 Creating a Page Layout Using Layout View
In this exercise, you use Layout view to build a simple page design based on a fixed-width layout table. Along the way, you'll get a chance to see some of the strengths and limitations of Layout view, and how you can work with it to get the results you want. You'll also experiment with grids as a visual aid in page setup. Figure 10.12 shows the finished layout you'll be creating.
)
Figure
10.12 The desired layout for bumpers.html.
If you haven't yet, copy the folder chapter_10 from the companion CD into a folder named idmx on your hard drive and define a Dreamweaver site named chapter_10 with the folder chapter_10 as its root directory.
-
You'll be creating the layout page from scratch, so start by choosing File > New to create a new blank HTML page. Save it in the chapter_10 folder as bumpers.html.
-
To help you draw accurately, you'll use the grid. Go to View > Grid > Show Grid, to turn the grid on. The default grid setting is too large for the requirements of your layout, so adjust it. Go to View > Grid > Grid Settings, and in the dialog box that appears, enter a grid size of 20 pixels. Finally, so the grid can be of maximum help as you draw, go to View > Grid > Snap to Grid.
-
Your desired layout is 640 pixels wide. To help you gauge widths as you're drawing tables and cells, go to View > Rulers > Show. Make sure the rulers are set to measure pixels, by checking that View > Rulers > Pixels is the selected option.
-
Now switch to Layout view by going to the Insert bar and bringing the Layers tab to the front. Click the Layout View button (refer back to Figure 10.5) to switch to Layout view.
-
Now you're ready to draw. In the Insert bar, select the Draw Layout Table button, and draw a table that starts in the page's upper-left corner and is 640 pixels wide and a few hundred pixels tall. (You'll be removing the height values later, so they're not crucial for now.) The grid snap feature should help you get your measurements accurate.
-
Using the Draw Layout Cell tool, create four cells: one for the banner across the top, and three for the main columns. Make your left-hand and right-hand columns 100 pixels wide each. Leave a 20-pixel gutter between those columns and the center column. Again, the grid snap should help you draw accurately. If necessary, select the cells after drawing and use the Property inspector to correct their widths. Figure 10.15 shows how your layout table should look at this point.
-
You've just created an HTML table, disguised as a layout table. To test this out, go to the Insert bar and click the Standard View button. Your table is revealed! Check it out in Code view; examine it with the Property inspector. It's just a regular table—but you created it in a special way.
-
It's time to add some content. For the banner, click inside the top layout cell and insert the banner.gif image from the chapter_10/images folder. (You can drag-and-drop the image from the Site window or Assets panel, or use the Image object to insert it.)
-
The center column of your layout is for the page's main text. If you've installed one of Macromedia's filler text extensions (as described in Chapter 4, "Working with Text"), use it to fill this area with text. If you haven't, open filler_text.html, in the chapter_10 folder, and copy and paste the text from that file to your layout cell. Add a header, if you like, so the page looks more like the finished layout.
-
The left-hand column is for the five navigation buttons. There are various ways you could structure this stack of buttons, including just inserting them as a series of images. For this exercise, you'll put them in separate table cells—which means you need a nested table to sit in that left-hand column.
-
Create your page's navigation bar by inserting one button image in each of the new layout cells. (The button images are all in the chapter_10/images folder, called button1.gif—button5.gif.)
-
To match the finished layout, your left and right layout cells need colored backgrounds—a light purple or light blue, or any color you think looks good.
-
To make your code more stable and compliant, it's time to get rid of all height values. Start with the nested table: Select it, and from the drop-down menu in its Column Header, choose Clear Cell Heights (refer back to Figure 10.10, if necessary). That shrinks up your navigation bar pretty severely! Next, select the parent table and repeat the process.
-
To make the navigation bar look a little nicer, you don't want the buttons all smashed together. For each button image, use the Property inspector to add a vspace and hspace of 10 pixels. That will force the table, and its enclosing cell, to expand. If you end up with double values in the Column Headers because of this, make your cell widths consistent as you did before.
-
How does your design look? If you haven't done so yet, Preview in Browser to check it out.
Finally, if you want ruler measurements and grid measurements to match each other, you must set the origin point of the rulers to the upper-left corner of the grid. Position the cursor over the zero-point corner of the rulers, and drag down and right until the zero-point crosshair lines up with the top left edge of the grid (see Figure 10.13).
)
Figure
10.13 Resetting the rulers' zero-point to match the grid.
If you draw your table and it isn't 640 pixels wide, you can adjust its width by dragging its edge or by selecting it and using the Layout Table Property inspector to manually enter a width of 640. Figure 10.14 shows how your document should look, with grid, rulers, and layout table in place.
)
Figure
10.14 The bumpers.html file, with grid and rulers showing, and the main
layout table in position.
)
Figure
10.15 The bumpers.html file with layout cells in place.
When you're done examining the table, go to the Layout tab of the Insert bar and click the Layout View button, to return to Layout view.
Depending on how tall you made your layout cell, the image might be too tall for it, and might stretch it out. This won't be a problem for you, because you're going to remove cell heights later—so don't worry about it now.
By default, the image aligns to the upper left of the layout cell. You want the image centered in the cell, and you want the cell background color to match the image. To accomplish this, select the layout cell (using any of the methods outlined earlier), and use the Property inspector to change the horizontal alignment to center and the background color to a purple that matches the image. (Hint: Sample the image color to create the color.) When you're done, the top portion of your page should look just like the finished layout in Figure 10.12.
If you try to draw a layout table inside the layout cell, you'll discover that Dreamweaver doesn't allow that. So, select and delete the left layout cell. In its place, draw an identically sized layout table. After you've drawn the table, draw five layout cells in it, each 60 pixels tall and as wide as the table. Figure 10.16 shows what your layout should look like at this point.
)
Figure
10.16 The bumpers.html page with nested layout table in place.
Hmm. If you're looking carefully, you might notice a problem in your table structure at this point. The Column Header for the nested table, and for the left-most column of the parent table, both show two width figures. This is because the images are all 103 pixels wide, and the table and column are set to 100 pixels wide (see Figure 10.17).
)
Figure
10.17 Double values in the column headers indicate that the left-most
column is set too narrow for its contents.
To fix this problem, use the drop-down menu for each column with a double value, and choose Make Cell Widths Consistent. Problem solved! But this indicates that the grid has outlived its usefulness, so turn it off by choosing View > Grid > Show Grid, to toggle the command off.
NOTE
If your column is narrower than the image, most browsers will ignore the specified column width and display the column wide enough to accommodate the image. If your column is wider than the image, and you are counting on the column maintaining that width, you will probably have a problem when the page displays in the browser; the column will shrink to the size of its widest rigid object, the image.
Colorizing the right cell is easy—select the cell and use the Property inspector to assign a background color.
Colorizing the left cell is not so easy, because it has a nested table in it. You don't want to colorize the background of the nested table because that won't guarantee that the color extends the full length of the layout. You want to colorize the cell containing the table. But if you remember, when you created this nested table, Dreamweaver created an automatic cell to hold it. And you can't use Layout view to set the properties of cells created automatically.
You're stumped, unless you remember that you can always return to Standard View if you need to, and then come back to Layout view. Do that now—in the Layout tab of the Insert bar, click the Standard View button. After you're in Standard view, use the tag selector to select the table cell behind the nested table, and use the Property inspector to colorize its background (see Figure 10.18). When you've made your change, return to Layout view.
)
Figure
10.18 Switching to Standard view to add a background color to a hidden
table cell.
One last touch: For any visitor with a large monitor, your fixed layout hugs the left edge of the browser window. This is a fixed-width layout, but you can make it look nicer in large windows by centering the layout (that's what Figure 10.12 shows). Normally, you would do this by giving the main table an alignment of center. But if you select your layout table and check the Property inspector, you'll see that there is no option for table alignment. Once more, go back to Standard view; select the table, and use the Property inspector to add the center alignment; then return to Layout view. Your page is complete!
Creating Flexible Layouts
Dreamweaver Layout view provides tools for creating "flexible" pages. (See Chapter 8, "Design Issues," for a complete discussion of flexible versus fixed-width pages. Chapter 9, "Building Tables," discusses how percent-based tables are used to create flexible layouts.) In Layout view, the Dreamweaver-specific term autostretch is used to describe a layout table or column that is set to a percentage width so that it expands to fill all available space.
Autostretch Tables and How They Work
When you first create a layout table, it has a fixed width. You turn it into an autostretch table by assigning either the table itself, or one of its columns, to have an autostretch width instead of a fixed width. When you do this, Dreamweaver assigns the table and one of its columns a width of 100%. All other columns in the table retain their fixed widths. An autostretch layout table must have one column, and one column only, designated as autostretch. A few tips on autostretching:
-
Layout tables set to autostretch are always assigned a width of 100%. If you want a flexible layout table set to, say, 90%, you'll have to leave Layout view and change the width using Code view or the Table Property inspector.
-
Autostretch tables do not always display correctly in Dreamweaver. They might look as though they stretch too far, beyond the boundaries of your Document window. This is a quirk of Design view, rather than a problem with the table. Previewing the page in a browser will show that the table does in fact correctly size itself to the window. (Remember, the goal isn't to create pages that display nicely in Dreamweaver, but pages that display nicely in the browser.)
Using Spacer Images in Autostretch Tables
The preceding chapter discussed some of the benefits of using spacer images to stabilize tables. A spacer image is usually a 1x1–pixel transparent GIF inserted into a table cell and given a width attribute in pixels; this "props open" the column containing that cell, preventing it from shrinking any smaller than the dimensions of the spacer. Spacer images are especially important to the workings of Dreamweaver autostretch tables.
As mentioned in the preceding section, autostretch tables include one column set to 100%. That percentage means, "this column should take up 100% of the available space in the browser window." The available space is all space not being taken up by other columns. If you define a column as autostretch, and other columns in the table don't have some sort of content in them propping them open, the stretching column will shrink them down to nothing, regardless of what their fixed pixel widths are. If your table's fixed columns contain content, such as images, this will keep them from shrinking. But in case they don't, this is the time to use a spacer image.
Automatically Adding Spacers (Before Generating Autostretch Tables)
You can tell Dreamweaver that, whenever you define an autostretch table, it should automatically add spacers to the fixed-width columns. Dreamweaver will even create the transparent GIF image for you, if you like. Do it like this:
-
Go to Edit > Preferences, and choose the Layout category (see Figure 10.19). (For Mac users of OS X, choose Dreamweaver, Preferences.)
-
From the options shown, choose to autoinsert spacers when making autostretch tables.
-
If your site already includes a transparent GIF that you could use as a spacer image, click the Browse button to select it. Otherwise, click the Create button and show Dreamweaver where to store your spacer image and what to call it. The default name is spacer.gif. Dreamweaver will remember this choice for all documents in the current site.
)
Figure
10.19 The Dreamweaver Layout View preferences, including options for automatically
generating spacer images.
NOTE
The Layout View Preferences include options for customizing the colors used in layout tables and cells, as well. If you don't find the default colors to your liking, experiment with these settings until you create something you like better.
After doing this, the next time you turn one of your layout tables into an autostretch table, Dreamweaver will add a 1-pixel high row to the bottom of the table, with a spacer image in each fixed-width cell. If your table has two columns, the first set to 100 pixels wide and the second set to autostretch, the following code will be added to the bottom of your table:
<tr>
<td height="1"><img src="images/spacer.gif" alt="" width="100" height="1"></td>
<td></td>
</tr>
In web geek circles, this is known as a control row. Many hand-coders manually add them to the bottoms of their tables to solidify flexible tables.
Manually Adding Spacers (After Generating Autostretch Tables)
You also can add a spacer image to any column at any time by going to the Column Header drop-down menu and selecting Add Spacer Image. This will add a control row, if one doesn't already exist, and will add a spacer image to the relevant cell. Note, however, that the width of the spacer image will be based on the current width of the column—if you have already run into the column-squishing problem described earlier in this section, that might not be the width you want.
Removing Spacers
After Dreamweaver inserts spacer images, you are free to remove some or all of them, but be warned that this might generate some unexpected and undesired results. To remove a spacer image from a particular column, go to the relevant Column Header drop-down menu and select Remove Spacer Image. To remove all spacer images from a table, select Remove All Spacer Images from the column header menu, or select the layout table and click the Remove All Spacers button in the Layout Table Property inspector.
Setting a Table to Autostretch
One way to create a flexible layout is to select the layout table and use the Property inspector to set its width to autostretch (see Figure 10.9). If you do this, the table will be given a 100% width, and all the cells in its rightmost column will also be assigned a width of 100%. All other cells will retain their fixed pixel width. This is a good solution if, for instance, your layout consists of a left-hand navigation column (which shouldn't stretch) and right-hand content column (which should).
NOTE
Whether you set the table or a column to autostretch, Dreamweaver might ask if you want to use a spacer image to create your flexible table. If you choose not to, you'll get a warning about possible instability in your table.
Setting a Column to Autostretch
If you don't want your right-hand column to be the flexible column, instead of setting the layout table to autostretch, you will need to select a particular column and specify it as having an autostretch width. When you do this, the table will automatically be set to autostretch as well. You can set a column to autostretch in one of two ways:
-
Select a cell in the desired column and, in the Property inspector, set the width attribute to autostretch.
-
Go to the layout table's Column Header area, and from the drop-down menu, select Make Column Autostretch (see Figure 10.20).
)
Figure
10.20 Using the Column Header menu to make a column autostretch.
NOTE
Occasionally, a page with table cells set to 100% width won't browse properly—the offending column will cause it to stretch beyond the edges of the window. If this happens to you, go back to Standard view and remove the width from all cells previously set to 100% wide. Leave the table width at 100%.
Setting Columns or Tables Back to Fixed Width
After a table has been set to autostretch, you can set it back to fixed width by doing one of the following:
-
Select the autostretch table, or one of the cells in the autostretch column, and in the Property inspector select the fixed width option.
-
In the table's Column Header, go to the drop-down menu for the autostretch column and select Make Column Fixed Width.
Doing either of these will automatically set the width of the table, and the column, to a pixel value that matches their current width. In some cases, you might see two numbers in the column header menu. One is the actual width of the column, and the other is the width that currently appears in the HTML code. This can happen in situations such as one in which a width was specified, and then content was subsequently added which exceeded that specified width. It is best to have column widths reflect the width of their content. To make this adjustment automatically, go to the Column header drop-down menu and select Make Cell Widths Consistent.
Exercise 10.2 Creating a Flexible Layout in Layout View
In this exercise, you'll use the autostretch feature to refine the bumpers.html file you created in Exercise 10.1, so that it stretches to fill the browser window.
-
Open bumpers.html and save it as bumpers2.html. Go to Layout view, if you're not there already. It should contain the fixed-width layout shown in Figure 10.12.
-
To make this layout flexible, you want the center column to autostretch, and the left and right columns to remain fixed. To make this happen, from the Column Header drop-down menu of the main table, choose Autostretch (see Figure 10.21).
Figure
10.21 Making the center column of bumpers2.html autostretch.NOTE
For purposes of this exercise, if Dreamweaver asks if you want to insert a spacer image, choose not to. Normally, you'll probably want to say yes to this option.
Does something horrible happen? If you haven't told Dreamweaver to use spacer images for autostretch, you'll probably see something like the disaster shown in Figure 10.22. That's not good! Go to Edit > Undo, to get your fixed-width table back.
Figure
10.22 What happens when autostretch is applied, and there's no content
to stabilize the rest of the table. -
To fix this problem, go to Edit > Preferences, and choose the Layout View category. (For Mac OS X users, choose Dreamweaver > Preferences.) From the options there, choose to Autoinsert Spacers When Making Autostretch Tables for the current site. Click the Create button to make Dreamweaver create a single-pixel GIF for you. When the dialog box appears, browse to the chapter_10/images folder to store your spacer image. When you're done, click OK to leave Preferences.
-
Now, try again to set your center column to autostretch. The result looks much better! If it still looks a little odd in Dreamweaver, Preview in Browser. Your layout should be up against the outer edges of the browser window. The center column should stretch, and the two outer columns remain fixed.
-
But what if you want your layout to stretch not to the very edges of the browser window, but just close to it? This is done by setting the table width to 90%—but you can't do this in Layout view. Go to Standard view, select your table, and use the Property inspector to set its width to 90%. Then Preview in Browser again, and see how the layout behaves when you stretch and squash the window.
)
Figure
10.21)
Figure
10.22){kind=link}
There is a chance the browser won't cooperate with you, and your table will stretch beyond the browser window width. If this happens, come back to Dreamweaver, go to Standard view, and select all the cells in the autostretch column. Their width will be set to 100%. Remove the width attribute entirely. The page might now look a little strange in Dreamweaver (see Figure 10.23), but it will browse just fine.
)
Figure
10.23 Removing the 100% width attribute from the autostretch
cells (in Standard view) and the resulting shift in Dreamweaver Design view.
Back in Dreamweaver, go to Standard view or Code view and investigate the structure of your table. The table itself, and the middle cell are both set to 100% width.
NOTE
Chapter 9 has an exercise in building a more complex flexible-tables layout.