With the small set of left content boxes out of the way, we're ready to move on to the Strategy Guide's Box 7- Main Content Column area! We'll slice up a few images and basically repeat everything we did in Lesson 11b but on a slightly wider scale.

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

Before we start, do you remember that shadow decrease edit I did in Lesson 11b on STEP A? Well I didn't show this part here, but I did the same thing for the headers on the main content column. I really don't think we need to repeat that process again, so I'm just letting you know what I did in case things look slightly different. Now that we have that out of the way, let's proceed.

Fig 11c.2 - The two circled areas were edited so the header's shadow was not so long:

STEP A. In good ol' Photopaint, we'll slice up the next set of images! SPECIAL NOTE! I found this out as I was making the tutorial - the first content box (The one without the header) is 1 pixel less wide than the other two below it with the headers. When I say one pixel less wide, I mean the content area is 1 pixel smaller in width... this is because the left border of the box is 1 pixel wider, so it makes the dark gray text area seem 1 pixel smaller in width than the two boxes below it. So for this one, we'll need to assign that particular content box a background image. Let's get cracking! Let's start by masking off the first header and saving that image as r_content_header_blank.gif!

Fig 11c.3 - Masking off the first header:

Fig 11c.4 - Save the image as r_content_header_blank.gif:

Next we'll slice a section of background from the first content box because it's 1 pixel wider than the default background image. We'll save that image as r_content_bg.gif!

Fig 11c.5 - Masking off the first header background area:

Fig 11c.6 - Make sure you zoom right in and mask off an area that will tile properly:

Fig 11c.7 - Save the image as r_content_bg.gif:

Along with creating a separate background image for this content box because it's 1 pixel smaller in width, we'll need to create it's own footer as well. We'll then create a second footer image that can be used for the other normal content boxes. So mask this one off, and name it r_content_footer.gif!

Fig 11c.8 - Masking off the first footer:

Fig 11c.9 - Save the image as r_content_footer.gif:

Next up is the first full header image. Lets mask that off and save it as r_content_header_news.gif!

Fig 11c.10 - Masking off the first full header:

Fig 11c.11 - Save the image as r_content_header_news.gif:

Now before you close the r_content_header_news.gif image in Photopaint, switch over to the layout.jpg you're slicing up and just mask off a small area of the next header. You don't need the whole thing. Then pop back over to r_content_header_news.gif and simply paste the section of the next header over top. Line up the images so it blends in and save this one as r_content_header_top5.gif.

Fig 11c.12 - Masking off the second full header:

Fig 11c.13 - Switch back to the r_content_header_news.gif image:

Fig 11c.14 - Paste the masked off area of the next header as a new object:

Fig 11c.15 - Line up the new object so it blends in properly:

Fig 11c.16 - Save the image as r_content_header_top5.gif:

Last but certainly not least, let's mask off the second footer image and save it as r_content_footer2.gif!

Fig 11c.17 - Masking off the second footer image:

Fig 11c.18 - Save the image as r_content_footer2.gif:

And that completes the image slicing portion of the lesson! Time for some coding!

STEP B. We're all set for some coding, and we're once again just going to repeat the process from the previous lesson. Let's create our content box tables!

Fig 11c.19 - Click inside the right cell of the table that we're coding the content boxes into. We'll need to stack some tables in here too:

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 544 pixels.

Fig 11c.20 - Create a new table inside the cell:

Fig 11c.21 - The new table has been created:

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

Fig 11c.22 - Insert the r_content_header_blank.gif header image into the top cell of the new table:

Now click inside the middle cell and set the cell's background image to r_content_bg.gif to apply the special background image we created.

Fig 11c.23 - Set the background image of the middle cell to r_content_bg.gif:

Next, insert the r_content_footer.gif footer image into the bottom cell to complete your content box.

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

We won't be able to use this table for the other content boxes because we'll just need to replace all the images anyway. Create a new 544 pixels wide table with 3 rows and 1 column below the last table you created.

Fig 11c.25 - Create a new table under the first content box table you created:

Fig 11c.26 - Our next content box table is created:

Now insert the r_content_header_news.gif header image into the top cell of the new table and insert r_content_footer2.gif into the bottom row. Leave the middle cell empty. Once you have that all set, we'll create a new table again but with 2 rows instead of 3.

Fig 11c.27 - After inserting the proper images in your second table, insert a third with these settings:

Fig 11c.28 - Here you can see the second content box done with the proper images and our new table created below it:

Insert the r_content_header_top5.gif image into the top cell of the table and you're done! You've coded 3 fully expanding content boxes!

Fig 11c.29 - Insert r_content_header_top5.gif into the top cell:

Have a look at the live sample and then it's time to play with the footer!

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.

Footer time!

[ Previous Lesson ] [ Next Lesson ]