We're just about ready to start adding the meat of the layout, but before we can do that, we need to establish some borders on our main table because we know for a fact that no content will ever appear over the layout borders. So it's safe to say those borders don't need to be included in our slicing and layout schemes. We'll fix up the table so that we don't have to worry about compensating for those layout borders every time we slice an image.

This might sound a bit confusing, but it's really a simple concept. Bear with me through the next few steps and it will all fall into place. Let's get some general measurements so we can set up these borders I'm rambling about.

STEP A. Get back into Photopaint and zoom into the left border. Mask off a chunk of the border and copy/paste it into a new document like we did for the background image. We won't use the image, we just want to see how wide it is, so take a note of the width and then close the image without saving it.

Fig 6aa.1 - Mask off a section of the border and copy/paste to a new document to take a width measurement:

STEP B. After doing the previous step for the left border, the middle content area and the right border, I have the following measurements (See Fig 6aa.2):

• Left Border (Green Area): 22 Pixels
• Middle Content Area (Yellow Tinted Area): 747 Pixels
• Right Border (Green Area): 21 Pixels

Fig 6aa.2 - How I measured the 3 vital areas (Click on image for full size sample):

The next few steps require full screen shots, which I have taken and circled areas of importance or labeled specific areas you should pay attention to. Please click on the thumbnails below as you complete each step for a full screen view.

STEP C. Back to Dreamweaver and click in the middle of your table just to make sure your cursor is active inside that area. Now right-click inside the table and click on Table > Split Cell.

Fig 6a.3 - Splitting a cell:

Fig 6a.4 - Split the table into 3 columns. 2 columns for the outside borders, and 1 column for the center content area. Click ok to proceed:

Fig 6a.5 - The Primary Table has now been split into 3 columns:

STEP D. You will now need to set the column widths to reflect the measurements we took from the image sample.

Click your mouse inside the first column on the left and you should see your cursor blinking inside. Note the faint dotted lines that are showing you where the edges of each table cell are.

Fig 6a.6 - Note the cursor position. The properties box will display the settings for that selected cell:

In the properties box at the bottom of the screen (or wherever you have the properties box located in your workspace), set the width to the border size to 22 pixels and hit enter.

Fig 6a.7 - Set the first column to 22 pixels wide in the properties box:

Now do the same thing for the center and right columns and set them to 747 and 21 pixels respectively.

Fig 6a.8 - Your Primary Table is split into 3 columns with proper width sizes set:

So now you have a column for each border that we won't be touching, and one middle column where all our content will go. We now have one little problem... the header and the rest of the content will all be aligned to the top of the site, but the footer will be aligned to the bottom. We obviously can't set two alignments for one cell, so we'll now need to split our Primary Table into two rows!

STEP E. Once again we will right-click anywhere in the table and then click on Table > Insert Rows or Columns.

Fig 6a.9 - Actions to insert a new row or column:

Be sure to select 1 Row and you want to insert it below the current selection. Once you've selected the desired settings, click OK to apply them.

Fig 6a.10 - Insert Row settings:

Fig 6a.11 - The Primary Table is now split into 3 columns and 2 rows:

Phew! We've done quite a bit in this lesson! We've almost completed the splitting of the Primary Table to suit the layout, but we have a few more steps to go. Before we move on though, let's do a basic recap of everything we've done so far in Lesson 6a! Move on to Lesson 6b for the quick recap (If you are confused on what we just did, you should REALLY read this section) or if you're completely clear on what we've done so far, you can move on to Lesson 6c!

[ Previous Lesson ] [ Next Lesson ]