Now that we've created the main table that will house our content boxes, we're ready to slice up and code these bad boys. I've broken down this section into two parts, so we'll separate the small content column and the main one into two separate lessons. We'll start with the small one, or as per the Strategy Guide, the Box 6 - Small Content Column area.

Fig 11b.1 - Our main Strategy Guide - This lesson covers the slicing and coding of Box 6:

STEP A. As usual, we start this lesson by slicing up the necessary images In Photopaint. Now I've been building a lot of hype on these content boxes, but it's actually pretty darn easy to code them properly once you get the hang of it. In fact, you're only going to need a few images to do this. The key to slicing is precision... you need to slice each image to the exact required pixel, and that's the real reason this takes practice. If you rush and miss a single image by 1 pixel, your layout will go right down the toilet, then you have to take the thing apart trying to figure out which image you screwed up one.

There I go again! Rambling! Let's get cracking shall we? Before we code anything, we're going to need a footer image for our content boxes, and 3 header images. The author of this layout image used pixel fonts for the headers, so obviously the headers were intended to be full images rather than HTML text like the menu buttons in the header menu back in Lesson 7b.

The first thing we need to do is fix the gradients on this menu... you see, we have a background that files horizontally, so the shadows that go around the content box look nice, but they can be a hindrance. I want the headers to blend into the background, but if I use the current header and keep the shadow, there will be a huge gap between the header and where the content starts. This may be a bit confusing, but once you see the screenshots, it should make sense. Shall we dance?

NOTE: If your content boxes don't have gradients, you can skip this step and move right along to STEP B.

The first thing we're going to do is zoom right into the left column and just below the first box header. Mask off a section of even background and copy/paste it as a new object. We're going to use this to see where the background color starts changing as the shadow under the header starts to form.

Fig 11b.2 - Mask off a section of the even background:

Fig 11b.3 - Paste the masked area as a new object:

Remember the gradient check we did in Lesson 9 when we checked that both ends of the Ad Banner Box would match the background? Well we're basically going to that all over again for our content boxes, but instead of doing it for vertical color tone variances, we'll do it for horizontal differences! So hit Ctrl-R to clear the mask and then use the Up arrow on your keyboard to start moving the object up towards the header. As you start to move the object towards the shadow, a distinct horizontal line will start to develop.

Fig 11b.4 - As you move the object upwards, a distinct change in color tone will show up with a horizontal line (marked by the red circle):

Now in this layout, the line started develop way too low, so if I sliced this header as is and kept the long shadow section, I'd have a really big gap between the header and where the content started below it. Now your layout may not have this issue at all, in which case you can skip right to STEP B. I'm not so lucky and I want to reduce this shadow so that I can slice the header with less shadow area.

I'm going to reduce the area of shadow, so to fix this, I'll move my little area of background almost all the way to the top of the box, just under the header.

Fig 11b.5 - I've moved the background sample to the top of the box just under the header box:

Now take out the Interactive Transparency Tool again and fade your object into the top of the object and reduce the shadow. I cut the shadow area down by half with this trick.

Fig 11b.6 - Using the Interactive Transparency Tool to fade the background sample object and reducing the shadow under the header:

All done! Now just combine the object with the background by right clicking the object in the Object Docker and clicking on Combine > Combine Objects With Background.

Fig 11b.7 - Actions to combine the background sample object to the background:

STEP B. It's slicing time! Let's start by creating our first header image!

Fig 11b.8 - Masking off the first header image:

Save the image to your images folder as l_content_header_ltutorials.gif.

Fig 11b.9 - Save the image as l_content_header_ltutorials.gif to your images folder:

Next up, we'll create the footer image that can be used for each content box we make on the left column.

Fig 11b.8 - Masking off the footer image:

Save the image to your images folder as l_content_footer.gif.

Fig 11b.9 - Save the image as l_content_footer.gif to your images folder:

Now go ahead and mask off the main part of the next header. You don't need to precisely slice this header, because we're just going to paste it over the l_content_header_ltutorials.gif image and save it under a different name. By doing this, you avoid slicing errors and you'll know that all your headers are the same size. Start off by masking off the area around the next header's title. In this case, I'll mask off the area around "WEEKLY".

Fig 11b.10 - Masking off a section of the header:

Go back to your l_content_header_ltutorials.gif in Photopaint and paste the section of "WEEKLY" header over the top of it as a new object.

Fig 11b.11 - Go back to the l_content_header_ltutorials.gif image in Photopaint:

Fig 11b.12 - Paste the section of "WEEKLY" header over top of the image as a new object:

Now just line it up so all the grid lines match and you can save it. I saved this image as l_content_header_weekly.gif in my images folder.

Fig 11b.13 - Line the object up with the gridlines:

Fig 11b.14 - Save the image as l_content_header_weekly.gif in your images folder:

Do the same thing for the affiliates header and save that as l_content_header_affiliates.gif.

Fig 11b.15 - Repeat the process to create the affiliates header file named l_content_header_affiliates.gif:

Fig 11b.16 - Save the image as l_content_header_affiliates.gif in your images folder:

STEP C. Now that our images are ready, let's hop back into Dreamweaver and code our content boxes! First thing you need to do is click the left cell in our new table, because we'll need to create some new tables in there. This is where you will learn how to stack tables to get the layout sliced and expanding the way it's supposed to without screwing everything up.

Fig 11b.17 - Click inside the left cell of our new table:

Now create a new table inside the cell. This table is going to hold the images for the content box, and we'll create a new one for each box. This new table will have 3 rows and 1 column, with a width of 203 pixels.

Fig 11b.18 - Create a new table inside the cell:

Fig 11b.19 - The new table has been created:

Click inside the top cell of the new table and insert the first header image l_content_header_ltutorials.gif.

Fig 11b.20 - Insert the l_content_header_ltutorials.gif header image into the top cell of the new table:

Now skip over the middle cell and insert the l_content_footer.gif footer image into the bottom cell to complete your content box.

Fig 11b.21 - Insert the l_content_footer.gif footer image into the bottom cell of the new table:

Click on the <table> link to highlight the entire table and hit Ctrl-C to copy it to your clipboard. We'll need to paste two more content boxes like this because the layout has 3 content boxes on the left.

Fig 11b.22 - Click <table> (see bold table button in the screenshot) to highlight the table and hit Ctrl-C to copy it to clipboard:

Before we start pasting the new tables, hit the Right arrow key on your keyboard so that the cursor is to the right of the table and the table itself is no longer selected.

Fig 11b.23 - Hit the Right arrow button on your keyboard to set the cursor next to the table:

Hit Ctrl-V to start pasting your new tables!

Fig 11b.24 - Hit Ctrl-V to paste your first copy of the table:

Fig 11b.25 - Hit Ctrl-V once more to create the third content box table:

Now that you have your 3 content boxes ready, we'll just need to change the header images so the correct ones appear rather than having the same one in all 3 boxes. Go ahead and click on the second header and replace it with the l_content_header_weekly.gif image!

Fig 11b.26 - Click on the second header image and delete it:

Fig 11b.27 - Replace the image with l_content_header_weekly.gif:

Repeat the process for the third header and replace it with l_content_header_affiliates.gif.

Fig 11b.28 - Click on the third header image and replace it with l_content_header_affiliates.gif:

We won't need the final footer image or the row that it's located in. Go ahead and click on the footer image and delete it, then click on the cell and choose Table > Delete Row.

Fig 11b.29 - Click on the last footer image in the third table:

Fig 11b.30 - Hit delete to remove the image:

Fig 11b.31 - Right click inside the cell that had the footer image and click on Table > Delete Row to remove the row:

And just like that, your left column content boxes are done! You use the empty cell under the cell holding the header images for your content, and it will expand vertically all you like without ever messing up the rest of the layout!

Fig 11b.32 - The left column content boxes are completely coded:

We're almost done!

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.

[ Previous Lesson ] [ Next Lesson ]