browser interpreting the values as 0. Setting a Background Color or Background Image In Chapter 3, we discussed adding a background image to the page. The drawback to this method was twofold. First, if the text on the page exceeded the background image's height, the background image ended up tiling. To prevent the image from tiling, we could increase the height of the image using an image editing program. The tradeoff to this approach, however, is that the image size increases, causing the size of the page and ultimately the download time to go up as well. Fortunately we can fix this dilemma with the use of tables. Up to this point, we've added a table to the page that is 100% wide by 177 pixels high. By simply adding the image we would normally use as the page background (header_bg.gif) as the background of the table instead, we can keep the horizontal tiling while eliminating the vertical tiling. This is possible thanks in part to the fixed 177 pixel height. Even better, because we're working with a fixed height of 177 pixels, we can crop the background image (header_bg.gif) using an image editing program from 2000 pixels down to 177 pixels, sparing us the bandwidth-hogging excess. Before we add our background image however, let's quickly add a background color so that you can see how that process works. To set the background color for the table, select the table and choose a background color from the Bg Color Picker in the Properties Inspector similar to Figure 6.12. Figure 6.12. Set the background color for the table by choosing a color from the Bg Color Picker in the Properties Inspector. [View full size image] As you can see, adding a background color is fairly simple. Now to add a background image, I'll undo the addition of the background color, then use the point-to-file icon located just to the right of the Bg Image text box to select the header_bg.gif image from the Images directory, as shown in Figure 6.13. Figure 6.13. Use the point-to-file icon to select the header_bg.gif image from the Images directory. [View full size image] With our background image now firmly in place, we can insert our header image in the cell to finish off this portion of the design. You can do this by simply dragging the header_withnav.gif image into the table's only cell, as shown in Figure 6.14. Figure 6.14. Drag the header image into the table's only cell. [View full size image] Modifying Cell Padding and Cell Spacing Now that you have the header of the page squared away, it's time to build the bottom portion of the site. We could insert the contents of welcome.txt (located in the Assets folder) directly underneath the existing table; unfortunately, doing this causes the text to align flush right against the edge of the Document window and, ultimately, the browser window (see Figure 6.15). Figure 6.15. Inserting text below the existing table causes the text to align flush against the Document window and, ultimately, the browser window. [View full size image] This happens because the page has its margin widths set to 0. Although we could fix this by adding a margin width, unfortunately, doing that would cause our