*cracks knuckles* We are now ready to slice up and add the header to our template. We're going to have two major parts to the main header - an area for the primary logo banner, and then the menu system that run on the right of the banner.

STEP A. Let's go back into Photopaint and cut out the logo header image first. Here's how I cropped it (Once again, mask off the area you want, and copy/paste it as a new object). You may want to zoom into this shot with your graphics editor to see where exactly I masked it off.

Fig 7.1 - Cropping the main logo header image:

I will now save this image in my images folder as header_logo.gif and I will take a note that this is 606 Pixels wide.

Fig 7.2 - Main header image - I have named it header_logo.gif:

STEP B. Now we will cut out the end of the header section.

Fig 7.3 - Cropping the right side of the header image:

I will now save this image in my images folder as header_logo_right.gif and I will take a note that this is 11 Pixels wide.

Fig 7.4 - Right side of the header image - I have named it header_logo_right.gif:

STEP C. Next we will slice the portion of the header that will appear just above the nav menu buttons (You may want to zoom in to this image and see exactly where I am slicing).

Fig 7.5 - Cropping the header nav top section image:

I will now save this image in my images folder as header_nav_top.gif and I will take a note that this is 130 Pixels wide.

Fig 7.6 - Header Nav top image - I have named it header_nav_top.gif:

We now have our key measurements for the table that will hold the main header area. We will have to create a table 747 pixels wide, with 1 row and 3 columns. The columns will measure 606 Pixels, 130 Pixels and 11 Pixels respectively.

STEP D. Go back to Dreamweaver and click on the top middle row. In this screenshot, I clicked where you see the red circle.

Fig 7.7 - Click anywhere within the top row:

STEP E. Click the Create New Table button and create a table as specific by our measurements in STEP C. Click OK to create the new Table.

Fig 7.8 - Creating a new table:

Fig 7.9 - The new table is inserted into the top row of the Primary Table:

STEP F. As per the sizes we determined in step C, go ahead and size each column in our new table starting with the left column at 606 pixels, the middle column at 130 pixels and the right column at 11 pixels. Here's what you should have at this point (you can see the dark dotted lines showing the cell borders):

Fig 7.10 - The new table with all the proper column sizes:

STEP G. Click on the left column of our new table (see circled area where I clicked) and your cursor should start blinking on the left side of the cell.

Fig 7.11 - Click inside the left column of the new table:

STEP H. Let's insert the first image! Click on Insert > Image from the top menu and that will load the browser. Select the images folder and select the header_logo.gif and click OK, or just double-click on header_logo.gif.

Fig 7.12 - Select the header_logo.gif image:

Fig 7.13 - The header_logo.gif image is now inserted into the cell:

STEP I. For now, ignore the middle column and proceed to click on the right column. Insert into this column the header_logo_right.gif image the same way you did in step H for the header logo image.

Fig 7.14 - The header_logo_right.gif image is now inserted into the cell:

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.

Now things are going to get a tad bit complicated. We're going to slice and code the little nav menu section of the header. Now, there are two ways I can do this:

1. I can leave the nav buttons as images, including the text. The issue with this is if I want to create a rollover effect, I need to create on and off state buttons, but this is definitely the easiest way to do the buttons
2. I can slice the buttons in a manner that the buttons can have HTML text, CSS rollover effect etc... This is a bit tougher at first, but I can easily change the text later on if I want.

For this tutorial, I will go with method #2. This is the more complicated option in terms of slicing, so seeing as this is a slicing tutorial, we might as well go all out! Please proceed to Lesson 7b to slice and code the header nav menu!

[ Previous Lesson ] [ Next Lesson ]