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.

Fig 12.1 - Our main Strategy Guide - This lesson covers the slicing and coding of Box 8:

STEP 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!

Fig 12.2 - Masking off the top of the header:

Fig 12.3 - Save the image as footer_top.gif (Click for the actual image):

Now 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

Fig 12.4 - Masking off the left edge of the footer:

Fig 12.5 - Save the image as footer_left.gif:

Now 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.

Fig 12.6 - Masking off the area we want to use for the footer background image:

Fig 12.7 - Save the image as footer_bg.gif:

We'll 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.

Fig 12.8 - Masking off the area we want to use for the right edge of the footer content image:

Fig 12.9 - Save the image as footer_box_right.gif:

Don't 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.

Fig 12.10 - Use the Crop Tool to crop off the gray background area:

Fig 12.11 - Crop settings applied:

We 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.

Fig 12.12 - Flip the image using a horizontal flip:

Fig 12.13 - Save the image as footer_box_left.gif:

And 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!

Fig 12.14- Masking off the small footer content box background:

Fig 12.15 - Save the image as footer_box_bg.gif:

STEP 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 ;)

Let's 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 6c.

Fig 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:

Our 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.

Fig 12.17 - Create a new table inside the cell:

Fig 12.18 - The new table has been created:

Not 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.

Fig 12.19 - Highlight the top 3 cells of the top row with your mouse:

Fig 12.20 - Merge the 3 cells together by right clicking in any of the highlighted cells and clicking on Table > Merge Cells:

Insert 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.

Fig 12.21 - Insert the footer_top.gif image into the new cell we just merged together:

We'll now get ready to add the left side of the footer! Select the two left cells under the merged row and merge those two together.

Fig 12.22 - Highlight the two cells under the first row of the table:

Fig 12.23 - The two cells have been merged together:

Now go ahead and insert the footer_left.gif image into the new merged cell. Make a note that the image is 5 pixels wide.

Fig 12.24 - Insert footer_left.gif into the merged cell:

Once 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.

Fig 12.25 - Change the cell's width to 5 pixels and change the background to point to footer_left.gif in the properties box:

Go ahead and highlight the two other cells in the middle row and merge those two together.

Fig 12.26 - Highlight the 2 other cells in the middle row:

Fig 12.27 - The two cells have been merged:

Next 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 wide.

Fig 12.28 - Click on the right cell of the bottom row:

Fig 12.29 - Set the cell's width to 450 pixels:

Now 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.

Fig 12.30 - Hit the Left arrow key on your keyboard to move one cell over to the left:

Set 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.

Fig 12.31 - Set the cell's width to 292 pixels:

Now 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.

Fig 12.32 - Click the <Table> tag at the bottom of the design view window to select the table:

Fig 12.32 - Set the table's background image to footer_bg.gif:

That 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).

Fig 12.33 - Click inside the right cell of the bottom row:

We'll 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.

Fig 12.34 - Create a new table inside the cell:

Fig 12.35 - The new table has been created:

Insert 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.

Fig 12.36 - Insert footer_box_left.gif into the left cell of the new table:

Fig 12.37 - Set the cell's width to 18 pixels (The same width as the image):

Now 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.

Fig 12.38 - Insert footer_box_right.gif into the right cell of the new table:

Fig 12.39 - Set the cell's width to 74 pixels (The same width as the image):

Click on the middle cell of the content box table and set the background to the footer_box_bg.gif image and you're done!

Fig 12.40 - Set the middle cell's background to footer_box_bg.gif:

DONE!!! 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 source code.

So you can quit here or keep going to the next lesson to see how I set up the content areas!

[ Previous Lesson ] [ Next Lesson ]