Continuing from the Inserting Cells/Content page.

Selecting Cells

The Logo Table

Select the cell containing the tag.gif and in the Properties Inspector set the Horizontal to "right" and Vertical to "bottom". This places the tag.gif to the right side of the page. While the cell is still selected, set the Bg to #996666 or simply click the Bg box in the Properties Inspector and move the eyedropper to the logo and click.

Setting the Logo Tables Dimensions

We want the logo table to span the top of the page. There are 2 ways to do this. Selecting the table and checking Autostretch in the Properties Inspector, or accessing the menu from the Column Header and selecting the Autostretch option.

Using one of these methods make the table autostretch.

A dialog box will appear asking if you want to insert a spacer image. Although we don't want spacer images here in our final page, Click ok on create a spacer image file and save it in your images folder. (It's ok to overwrite the existing spacer.gif when prompted) This is a learning exercise and it will benefit you to know how to remove them later.

<- Column Header

If you notice, the number in the right column has turned into a wavy line. This indicates the table is autostretched. Look above the logo to see if there are two numbers in the table header. (This was explained on the last page). If so, correct this now. (Make cell widths consistent)

* Bear with me on this explanation, it's a little long but very important!

This table is realistically 1row 1column. However, the very nature of the Layout View is to make creating pages simple and therefore Dreamweaver is doing some work behind the scenes for you. Sometimes when you make a table autostretch Dreamweaver creates additional rows and inserts spacer gifs in them to control the layout. I like to have a little more control of what is going into my pages so I recommend removing them and let your content dictate the dimensions.

The double green line in the table header indicates that a spacer image resides in that column. Example:

Before we remove these I want you to see something that will help you in the future. Select the Logo table, then in the Objects Pallette switch over to Normal View and look in the Properties Inspector. It displays this table as 3 rows 2 column. You can simply remove these uneeded rows right here by changing the 3 to a 1. This is the easiest way to do this.

The second method, suggested in the help files, is to access the dropdown menu from the table header and selecting "Remove all Spacer Images". Then you need to access the menu again and select "Clear Cell Heights". I don't recommend doing it this way all of the time because it can become somewhat problematic. Even though you removed everything, the HTML still reveals this table as 2 rows 2 column and a gap will appear below this table.

Here is the unwanted/uneeded code for this table that is not deleted from the code by using this method..

<tr>
<td></td>
<td></td>
</tr>

* The rule of thumb here is if you know absolutely how many rows your selected table is and there are spacer gifs in this tables columns, by all means go over to Normal View and change the rows. Dreamweaver always removes this unwanted code there. If your not sure, then use the second method.

* If you already know how to create pages that allow the content to dictate the tables dimensions You can eliminate the auto insertion of these spacer gifs alltogether by going into the Edit>Preferences>LayoutView and set Autoinsert Spacers to "never". For learning purposes, we have left this feature at the default settings.

After doing this switch back to Layout View.

Aligning the Nav bar cells

Select the uppermost cell in the nav bar. Grab the handle on the bottom and push it upward until it won't resize anymore. Remember, we put a transparent spacer gif in there 40 pixels high. * To drag a cell, move the mouse over any side until it is outlined in red, then click and drag the cell where you want it.

Drag the next cell (home button) flush with the upper cell, then resize it from the bottom to hug the gif. Do the same for the last four buttons. They should snap in place when you are within 8pixels of a neighboring cell. You may move the cells by selecting them and using the arrow keys if you wish. Lastly, Select the small nested table that the cells were drawn into and resize it upward flush with the bottom button.

Now, we need to stretch the content area to fill the rest of the screen. Select the table header in the right "column" of the big table , click the number and select "Make Column Autostretch". With this table still selected, switch over to Normal View to make sure this table is still 1 row 1 col. If there are more than one rows, change it to a 1 here. ..Switch back to Layout View..

So far...

* Click here for a larger screenshot

Final Steps