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.
A. Get back into
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:
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
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
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:
D. You will now need to set the column
widths to reflect the measurements we took from the
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
Fig 6a.6 - Note the cursor position. The properties box will
display the settings for that selected cell:
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
Fig 6a.7 - Set the first column to 22 pixels wide in the
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!
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:
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:
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
Previous Lesson ]
Next Lesson ]