With our content
boxes done, we can move on to coding the footer of the
website, or Box 8
- Footer Area as per the Strategy
Guide. At first it may appear that
the content boxes were the most complicated areas to
slice and code, but in fact it's going to be the footer.
The footer section will require quite a few fancy table
stacks and merges that we haven't done too much of so
far. Not only is this one of the final lessons, but
it's also the longest. The good news is once the footer
is done, the rest is a breeze! This lesson is loaded
with screenshots, and if you've been sweating your way
through this tutorial, pay very close attention once
we start coding the footer in Dreamweaver.
12.1 - Our main Strategy Guide
- This lesson covers the slicing and coding of Box 8:
A. Back into Photopaint
we go for the last time! We're going to slice a top
section of the footer that will join the content boxes
to the bottom of the site, then slice up the little
mini box that we see inside the footer. Here we go!
Let's start off by masking off the top section of the
footer. We'll name this image footer_top.gif!
12.2 - Masking off the top of the header:
12.3 - Save the image as footer_top.gif (Click for the
we'll mask off a small section of the left hand side
of the footer. For some reason this layout didn't have
this same small vertical gradient effect on the right,
so we'll only need an image for the left side. I named
this image footer_left.gif
12.4 - Masking off the left edge of the footer:
12.5 - Save the image as footer_left.gif:
let's mask off the area we want to use as the background.
Make sure it's a single solid color so that it tiles
smoothly. Name the image footer_bg.gif.
12.6 - Masking off the area we want to use for the footer
12.7 - Save the image as footer_bg.gif:
also need some images for the small content box that
resides inside the footer. Mask off the right edge of
the content box and save it as footer_box_right.gif.
12.8 - Masking off the area we want to use for the right
edge of the footer content image:
12.9 - Save the image as footer_box_right.gif:
close footer_box_right.gif yet! Hit D and use the crop
tool to crop off the gray background area like in Fig
12.10 - Use the Crop Tool to crop off the gray background
12.11 - Crop settings applied:
can now use this cropped image for the left side of
the small content box. First you need to flip it using
Photopaint by clicking on Image > Flip > Flip
Horizontally. You can then save the image as footer_box_left.gif.
12.12 - Flip the image using a horizontal flip:
12.13 - Save the image as footer_box_left.gif:
finally we need to slice our very last image, the background
image for the small content box, which we'll name footer_box_bg.gif!
12.14- Masking off the small footer content box background:
12.15 - Save the image as footer_box_bg.gif:
B. All our images
are sliced and ready to go, so it's time to battle it
out in Dreamweaver.
We're going to do some serious table stacking here so
be sure to follow closely as we complete each step.
Once you've completed this portion, you're pretty much
ready to master this slicing business ;)
start this session by clicking inside the very bottom
cell of our layout. This is actually the bottom row
of the very first table we created - the Primary Table.
This is the same cell that we set to a bottom vertical
alignment back in Lesson
12.16 - Click inside the last row of the layout - this
is the bottom cell of the Primary Table we created back
in Lesson 5:
footer area will actually need 3 rows, so let's create
a new table to hold all the content of the footer. We'll
need 3 rows and 3 columns, and the table needs to use
the entire 747 pixel width.
12.17 - Create a new table inside the cell:
12.18 - The new table has been created:
all the rows in our new table actually need 3 columns,
so we can merge some cells together to eliminate extra
ones that could cause us some confusion. Select the
3 top cells of the first row and merge them together.
12.19 - Highlight the top 3 cells of the top row with
12.20 - Merge the 3 cells together by right clicking
in any of the highlighted cells and clicking on Table
> Merge Cells:
the footer_top.gif image into the new cell we merged
together. You'll see that your left and main content
boxes will suddenly tie in perfectly into the bottom
of the layout because this image has the footer sections
of those boxes.
12.21 - Insert the footer_top.gif image into the new
cell we just merged together:
now get ready to add the left side of the footer! Select
the two left cells under the merged row and merge those
12.22 - Highlight the two cells under the first row
of the table:
12.23 - The two cells have been merged together:
go ahead and insert the footer_left.gif image into the
new merged cell. Make a note that the image is 5 pixels
12.24 - Insert footer_left.gif into the merged cell:
you've inserted the image, hit the right arrow key on
your keyboard and then set the cell's width to 5 pixels
wide and then set the cell's background to footer_left.gif.
Don't worry if the cell's width goes all weird on you...
it'll be corrected when we size the rest of the cells
in the table.
12.25 - Change the cell's width to 5 pixels and change
the background to point to footer_left.gif in the properties
ahead and highlight the two other cells in the middle
row and merge those two together.
12.26 - Highlight the 2 other cells in the middle row:
12.27 - The two cells have been merged:
we'll click on the right cell of the bottom row. This
is the cell that will hold the small content box and
I'm going to guess that this box needs to be 450 pixels
12.28 - Click on the right cell of the bottom row:
12.29 - Set the cell's width to 450 pixels:
as you can see in Fig
12.29, the cell suddenly expanded all
the way to the left and the middle cell that was in
this row almost disappeared! It's still there, but it
got squished down by Dreamweaver so it's hard to see.
Just hit the Left arrow button on your keyboard and
the cursor will jump to the cell for you. If you compare
the screenshots in Fig
12.29 and 12.30,
you'll notice the cursor is SLIGHTLY
more left in Fig 12.30.
You can zoom in on the image to see it a bit better.
12.30 - Hit the Left arrow key on your keyboard to move
one cell over to the left:
the width of the cell to 292 pixels and hit enter. Poof!
You can see the cell again and all the cells on the
bottom row are the proper sizes.
12.31 - Set the cell's width to 292 pixels:
we need to select the entire table and apply our background
image to it. You can click the <Table> button
at the bottom of the design screen to select the table,
then set the background to footer_bg.gif.
12.32 - Click the <Table> tag at the bottom of
the design view window to select the table:
12.32 - Set the table's background image to footer_bg.gif:
footer is really starting to come together now! It's
time to add the small content box to the footer, so
click inside the right cell on the bottom row (the cell
we set to 450 pixels wide).
12.33 - Click inside the right cell of the bottom row:
need to create a new table in this row for the content
box. Create a new table with 1 row and 3 columns, with
a total width of 450 pixels.
12.34 - Create a new table inside the cell:
12.35 - The new table has been created:
the footer_box_left.gif into the left cell of the new
content box table and then set the cell to the same
width as the image, which is 18 pixels.
12.36 - Insert footer_box_left.gif into the left cell
of the new table:
12.37 - Set the cell's width to 18 pixels (The same
width as the image):
insert the footer_box_right.gif into the right cell
of the new content box table and then set the cell to
the same width as the image, which is 74 pixels.
12.38 - Insert footer_box_right.gif into the right cell
of the new table:
12.39 - Set the cell's width to 74 pixels (The same
width as the image):
on the middle cell of the content box table and set
the background to the footer_box_bg.gif image and you're
12.40 - Set the middle cell's background to footer_box_bg.gif:
Well, that's it for the images in terms of slicing them
up and coding them. You've now completely and properly
sliced this layout into expanding content boxes and
you can easily add content to the content areas. You
can continue to the next lesson to see how I use a few
more tables to get my content into the tables so it
looks clean, and it's easy to change!
LIVE SAMPLE - You can see
a live sample of what our index.html page looks like
so far HERE!
Feel free to compare your work by viewing my example's
you can quit here or keep going to the next lesson to
see how I set up the content areas!
Previous Lesson ]
[ Next Lesson ]