Stretchy Table Design
A stretchy table design allows your graphic to expand with a browse but it's not actually an image that is expanding. I get letters all the time asking me how to stretch a banner image to fit the browser window. The answer is, you don't. What stretches is either a tiled background image or a background color. Let's get started with adding your graphics to a Dreamweaver layout.

1.  Open Dreamweaver and define a site for your new design. If you need help doing this then select Help>Using Dreamweaver, click on Search, and type in "Defining a local folder."
2.  In the Insert panel, the Common area, click the Insert Table Icon. You can also access this by selecting Insert>Table (see Figure 11).
3.  In the Table dialog box enter 2 Rows, 2 Columns, and a Table Width of 100%. Be sure to type zeros into the Cell Padding and Cell Spacing fields. Blank does not mean zero (see Figure 12).
4.  Click inside the first cell on the left side of the top row.
5.  In the Common panel, click the Insert Image icon (Insert>Image) and navigate to where you have the images you've saved (see Figure 13).
6.  Select the Lft_banner.gif and click Open. Notice the width of the image; it's 164 pixels wide. You can see the width in the Property inspector.
7.  Press the right arrow key on your keyboard to place the cursor in the cell, and off the image.
9.  In the Property inspector change the Width (W) to 164 and press Enter (Return). This sets the width of the cell not the image. In this case the cell will be the same size as the image. Also click on the Vert drop down and select Top (see Figure 14).

Notice, however that the column (dotted lines) has collapsed against the image. This cell is now a fixed width, it won't get any larger. But if you add an image in the cell below it that is larger than 164, the colmun will stretch to fit the content no matter what size you set it to be. If you place a larger image in another cell below the image then you will get a gap in the top row. It's important to note that the Width setting does not force the cell to remain at that size.

10.  Click inside the right top cell and in the Property inspector, in the width field (W) type in 100% (use the percent sign). This cell will stretch to fill up 100% of the available space. As the browser window expands or contracts, so will this column.(see Figure 15).

Note: If you had a third column you could set it to a fixed width; the center would still expand to fill the browser window.

11.  Open the CSS Styles panel in the Design panel group. Select the + sign at the bottom of the panel (New CSS Style).
12.  Select a Selector Type of "Class." Type .topbanner for the name. Click on "This Document Only". Click OK (see Figure 16).
13.  Select the Background category to open it's options. Click in the Background Color well. Click the little right pointing arrow and be sure that Snap to Web Save is not checked, then sample the peach color from the document (see Figure 17).
14.  Click the Browse button and navigate to the folder you have your images in and select Top_banner.gif (see Figure 18).
15.  Choose repeat-x for the Repeat field and click on OK.
16.  Place your cursor in the 100% cell. In the Tag Selector (bottom of your document) the <td> tag should be hightlighted. Right-click and select Set Class and click on the topbanner name to apply the style. Another way to set the style is to click on the <td> tag and in the Property inspector there is a Style drop down menu. Click it and select the desired style.
17.  Place your cursor in the left cell of the second row.
18.  Add another new style but this time name it .sideback. Use the Lft_side.gif file as the background image and set the repeat to repeat-y. (repeat steps 11–15).
19.  Apply the style as you did in step 16.
20.  The background images in the top right cell and the left cell of the second row now contain only background images. This is not considered content. You can type text and/or add images to each area. If you add nothing to either area, you'll need to add a small spacer image so that Netscape 4 browsers can see the background color.
21.  You can now add a header or banner image if you'd like. Remember, the image won't stretch but the background color will fill the available space, so be sure it compliments your image. You can align a graphic in the cell to the right, left, or center by selecting each option from the Horz drop down menu in the Property inspector.
22.  Save your file and preview it in a browser (F12). Make the browser window smaller and larger and see how your design expands.

Note: When you know your design needs to fill a browser window, then design an area that can stretch and still look good. A good example of this is at www.primefocus.com. The header on this page has a texture over the graphic. It's almost impossible to match an uneven texture to an image if the browser expands. The texture would have to tile. Click on any of the site's links to go to an inside page. The solution is to remove the texture, add a gray background, and feather the left edge of the graphic to fade into the background and align the image to the right. This way when the browser expands, the image always remains to the right.

• Figure 19