Let's get ourselves ready for creating some content boxes! Later on in this tutorial, we'll create some expanding boxes, but for now we're going to create a fixed height box. Why a fixed height you ask? Well we're going to be coding the Ad Banner area, otherwise known as Box 4 - Secondary Banner Area on our infamous Strategy Guide, and this box uses a vertical gradient. This means that the color at the top part of the box is not the same color as the bottom, so if the box expands, the background won't tile properly.

I'll be perfectly honest with you... you probably COULD slice this to expand using 3 separate rows to have a "middle section", but seeing as you're reading this to learn how to slice a complicated layout, there's no sense going off on a tangent and confusing you more than I probably already have. So let's just stick to business ;)

So as I was saying, we're going to start off by creating a static banner box, meaning that this can't stretch in height without getting all mucked up. Shall we begin?

Fig 9.1 - Our main Strategy Guide - This lesson covers Box 4:

STEP A. Once again, we start this lesson in Photopaint! This type of content box is very easy to make, and chances are you already know how to do it. For those of you that aren't too sure what to do next, we're going to make 3 images - a right and left box image and the background image. Refreshing isn't it? Well don't be fooled because this layout has a little irritating surprise in store and we're going to have to do some patching up to fix it!

Let's start off by masking off the area for the left side of the content box.

Fig 9.2 - Masked area for the left side of the content box:

Fig 9.2 - Save the image in your image folder as bannerbox_left.gif:

Next we'll mask off the area for the right side of the content box, but DON'T paste it as a new image and save it yet! We'll need to do a little check to make sure it will match our background image. For now, just mask it off and copy it to your clipboard by hitting Ctrl-C.

Fig 9.3 - Masked area for the right side of the content box:

Now we're going to perform a little check before we get ourselves into trouble. In the past, I've learned to verify that the content background area is the same color tone on the left as it is on the right. I've sliced a lot of layouts, and I got caught on some images where it wasn't the same. So now hit Ctrl-V to paste the masked off area as a new object on your layout image and move it to the left so that it's near the left side of the content box and aligned properly at the top.

AH HA! It's DOESN'T match! See that faint vertical line in the red circle in Fig 9.4? If I hadn't checked that and just gone ahead and made my background image, my coded template would have a line like that in it. We'll need to fix this small issue before we keep going.

Now bear in mind if you did this check and the backgrounds blended perfectly and you saw no line, you can bypass this little fixing issue and go ahead to STEP C. Otherwise, let's move on to the next step and fix this up.

Fig 9.4 - The red circle shows the area where the blending requires correction:

STEP B. It's a pain, but we need to fix this blending problem or our end product isn't going to look too hot. It's probably minor, but you should always do your best when you slice to avoid headaches later on. First thing you need to do it click on the main layout object on your object docker (at this point your image has two objects or layers... the object that has your entire layout image, and the object that has the right side piece of the content box.)

Now mask off a small piece of background. We'll use this to repair the image so that it blends properly. Once you have it masked off, hit Ctrl-C then Ctrl-V to copy/paste this area as a new object.

Fig 9.5 - Masked area for the right side of the content box:

Fig 9.6 - Section of background now pasted as a new object:

Hit Ctrl-R to clear the mask and then move the new object (we'll call it the Background Sample Object) so that it's now on top of the Content Box Object. The left edge of the Background Sample Object (marked in GREEN in Fig 9.7) should be aligned with the left edge of the Content Box Object (marked in YELLOW). I added these little borders so you can see the objects better and they are not part of the actual image I'm working with.

Fig 9.7 - Move the background object over top of the content box object:

Fig 9.8 - Here you can see the objects as they appear on the object docker (For you Photoshop folks, Object = Layer) Object 3 is the Background Sample Object, Object 2 is the Content Box Object, and Background is the actual complete layout.jpg image that we are slicing:

Click on the Background Sample Object and then hit 1 to activate my favorite Photopaint tool, the Interactive Transparency Tool. Now using this tool, create a transparent gradient that goes from left to right, and spans the entire width of the Background Sample Object. Apply it and POOF! No more vertical line!

Fig 9.9 - Applying the transparency gradient using the Interactive Transparency Tool:

Fig 9.10 - NO MORE LINE! *Does a little dance*:

Now we'll need to combine the two objects together to form a single object that we can use to create our left side of the content box. On your Object Docker, click on Object 3 and Object 2 while holding down your Shift key and that will select both Objects for you. Next right click on one of the highlighted objects and click Combine > Combine Objects Together.

Fig 9.11 - Combining Objects 2 and 3 together into a single object:

All done! Now just select the single object and copy/paste it as a new image!

STEP C. Now then, whether you plodded along with me throughout STEP B, or you just skipped ahead to here from the end of STEP A, you should now have the right side of your content box ready to go. I've gone ahead and saved mine as bannerbox_right.gif. Next we'll create our background image and quickly code this thing!

Fig 9.12 - Save the image in your image folder as bannerbox_right.gif:

Let's clean things up a bit! You no longer need the extra object (or objects if you've been playing around) so delete any extra objects in the Object Docker so that all you have left is the original layout.jpg image. Now zoom back in and cut out a piece for your background.

WHOA TIGER! Before you get too far ahead of yourself, you'll notice that this layout is LOADED with diagonal scanlines, so make sure you mask off an area that will tile properly!

Fig 9.13 - Masked area for the background of the content box:

Fig 9.14 - Be sure to select an area that will tile properly!!:

Fig 9.15 - Save the image in your image folder as bannerbox_bg.gif:

Fig 9.16 - As you can see, bannerbox_bg.gif is tiling properly (Same image 18 times side by side):

And we're finally ready to slice this box!

STEP D. We now have our 3 images needed to code this content box, so let's change over to Dreamweaver and we'll start out by creating a new table under the Main Navigation Menu table with 1 row and 3 columns. 2 columns for each side of the box, and 1 in the middle for the content itself.

Fig 9.17 - Create a new table under the main menu with the following settings:

Fig 9.18 - The new table is created:

Click on the left cell of the table and insert the bannerbox_left.gif image.

Fig 9.19 - Insert bannerbox_left.gif into the left cell of the table:

Next we'll set the size of that cell to the same pixel width as the bannerbox_left.gif image. In this case, it's 29 pixels.

Fig 9.20 - Set the cell to the same pixel width as the image:

We can now set the background image so that our content box is filled out properly. Click on the middle cell of the table, then set the cell's background image to bannerbox_bg.gif.

Fig 9.21 - Set bannerbox_bg.gif as the middle cell's background image:

Click on the right cell of the table and insert the bannerbox_right.gif image.

Fig 9.22 - Insert bannerbox_right.gif into the right cell of the table:

Next we'll set the size of that cell to the same pixel width as the bannerbox_right.gif image. In this case, it's 36 pixels.

Fig 9.23 - Set the cell to the same pixel width as the image:

TA DA! Man, who would have thought that something so easy would take so long?! Truthfully, this is normally a very fast thing to do and normally you don't get an issue with the right side not matching the left like we saw in STEP B, but you never know. At least now you know to check for it! There are other ways to solve that issue, like simply flipping the left image over and using that as the right side, but in this case it still didn't quite match. I'll let you figure that out... this is already quite long enough as it is!

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.

Time to make our little member login bar!

[ Previous Lesson ] [ Next Lesson ]