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
the Box 6 - Small
Content Column area.
11b.1 - Our main Strategy
Guide - This lesson covers the slicing and
coding of Box 6:
A. As usual, we
start this lesson by slicing up the necessary images
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?
If your content boxes don't have gradients, you can
skip this step and move right along to STEP
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.
11b.2 - Mask off a section of the even background:
11b.3 - Paste the masked area as a new object:
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.
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):
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.
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.
11b.5 - I've moved the background sample to the top
of the box just under the header box:
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
11b.6 - Using the Interactive Transparency Tool to fade
the background sample object and reducing the shadow
under the header:
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.
11b.7 - Actions to combine the background sample object
to the background:
B. It's slicing
time! Let's start by creating our first header image!
11b.8 - Masking off the first header image:
the image to your images folder as l_content_header_ltutorials.gif.
11b.9 - Save the image as l_content_header_ltutorials.gif
to your images folder:
up, we'll create the footer image that can be used for
each content box we make on the left column.
11b.8 - Masking off the footer image:
the image to your images folder as l_content_footer.gif.
11b.9 - Save the image as l_content_footer.gif to your
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".
11b.10 - Masking off a section of the header:
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.
11b.11 - Go back to the l_content_header_ltutorials.gif
image in Photopaint:
11b.12 - Paste the section of "WEEKLY" header
over top of the image as a new object:
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.
11b.13 - Line the object up with the gridlines:
11b.14 - Save the image as l_content_header_weekly.gif
in your images folder:
the same thing for the affiliates header and save that
11b.15 - Repeat the process to create the affiliates
header file named l_content_header_affiliates.gif:
11b.16 - Save the image as l_content_header_affiliates.gif
in your images folder:
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.
11b.17 - Click inside the left cell of our new table:
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.
11b.18 - Create a new table inside the cell:
11b.19 - The new table has been created:
inside the top cell of the new table and insert the
first header image l_content_header_ltutorials.gif.
11b.20 - Insert the l_content_header_ltutorials.gif
header image into the top cell of the new table:
skip over the middle cell and insert the l_content_footer.gif
footer image into the bottom cell to complete your content
11b.21 - Insert the l_content_footer.gif footer image
into the bottom cell of the new table:
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.
11b.22 - Click <table> (see bold table button
in the screenshot) to highlight the table and hit Ctrl-C
to copy it to clipboard:
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.
11b.23 - Hit the Right arrow button on your keyboard
to set the cursor next to the table:
Ctrl-V to start pasting your new tables!
11b.24 - Hit Ctrl-V to paste your first copy of the
11b.25 - Hit Ctrl-V once more to create the third content
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!
11b.26 - Click on the second header image and delete
11b.27 - Replace the image with l_content_header_weekly.gif:
the process for the third header and replace it with
11b.28 - Click on the third header image and replace
it with l_content_header_affiliates.gif:
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 >
11b.29 - Click on the last footer image in the third
11b.30 - Hit delete to remove the image:
11b.31 - Right click inside the cell that had the footer
image and click on Table > Delete Row to remove the
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
11b.32 - The left column content boxes are completely
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
Previous Lesson ]
[ Next Lesson ]