As mentioned at the end of the previous lesson, we're going to now slice up and code the small menu area that is located in the header section of the layout. Just in case you breezed by it:

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!

STEP A. We're going to create a table within the 130 pixel column in our header table that will hold the nav menu system. Let's start off by clicking inside the column so that the cursor is blinking inside and create a new table. We'll need a table with 9 rows (1 header image, 7 buttons and 1 footer image) and 3 columns (the buttons will require 3 columns each).

Fig 7b.1 - Create a new table with the following settings:

.

Fig 7b.2 - The new has been created:

STEP B. We only need 7 rows to have 3 columns, so we'll merge the cells in the top and bottom rows together so both rows only contain a single cell. Start by clicking in the top left cell on our new nav menu table.

Fig 7b.3 - Click the top right cell of the new nav menu table:

Click again, but this time click and hold down the mouse button and start dragging the cursor over the next two cells to the right. This will end up highlighting the 3 top cells of the nav menu table. Once the 3 cells are highlighted, release the mouse button.

Fig 7b.4 - All 3 top cells of the nav menu table are highlighted:

Right-click on any of the 3 highlighted cells and click on Table > Merge Cells to merge the highlighted cells together into a single cell.

Fig 7b.5 - Actions performed to merge the highlighted top row cells:

Fig 7b.6 - Cells have been merged:

Perform the same actions for the bottom row.

Fig 7b.7 - Actions performed to merge the highlighted top row cells:

Fig 7b.8 - Cells have been merged:

Our new header nav menu table is ready for images! Now we'll need to slice up some images from our layout.jpg image.

STEP C. In Photopaint, we will now create some new images for our template. We will start with the buttons themselves. We'll need a left end and right end for the buttons, as well as a background image. Start off by zooming into one of the buttons and masking off the left end of the button. It doesn't matter which button we use because they're all exactly the same image. This masked off portion will become the left side of all our buttons on the nav menu table.

Fig 7b.9 - Masking off the left end of the button:

Now copy/paste that as a new image and save it in your images folder as header_nav_button_left.gif

Fig 7b.10 - Left side of nav menu buttons named header_nav_button_left.gif:

With the image still open in Photopaint, click on Image > Flip > Flip Horizontally and that will flip our menu end over for the right side. Save this flipped version in your images folder as header_nav_button_right.gif

Fig 7b.11 - Right side of nav menu buttons named header_nav_button_right.gif:

Mask off a small portion of the button closer to the middle (Notice the left and right edges of the buttons have a dark gradient). This will be the general button background image.

Fig 7b.12 - Masking off the button background:

Copy/paste that as a new image and save it in your images folder as header_nav_button_bg.gif

Fig 7b.13 - Background image of nav menu buttons named header_nav_button_bg.gif:

And last, but certainly not least, we'll mask off the portion that will make up the footer of our nav menu.

Fig 7b.10 - Left side of nav menu buttons named header_nav_button_bg.gif:

Copy/paste that as a new image and save it in your images folder as header_nav_footer.gif

Fig 7b.13 - Nav menu footer image named header_nav_footer.gif:

STEP D. Change back to Dreamweaver, and let's insert these images we sliced up! Let's start off by inserting the top and bottom of the nav menu. Click on the top row of our nav menu table and insert header_nav_top.gif.

Fig 7b.14 - The header_nav_top.gif image has been inserted into the top row of the nav menu table:

Next up is the footer image. Go ahead and click on the bottom row of the nav menu table and insert the footer image header_nav_footer.gif.

Fig 7b.15 - The header_nav_footer.gif image has been inserted into the bottom row of the nav menu table:

STEP E. Time to get those buttons cooking! Start by clicking on the first blank cell on the top left of the nav menu table and insert the header_nav_button_left.gif image.

Fig 7b.16 - The header_nav_button_left.gif image has been inserted into the empty top left cell of the nav menu table:

Now before we insert the next image, go ahead and press the Right arrow key on your keyboard. This will place the cursor to the right of the image, but still within the same cell.

Fig 7b.17 - Pressing the right arrow key will place the cursor next to the image:

In the properties box, change the cell's width to 10 pixels and this will affect every cell in the column. Don't worry if the cells shift to a width other than 10 pixels. This is normal and won't adhere to the specified width until we assign sizes to the middle and right columns as well.

Fig 7b.18 - Set the cell's width to 10 pixels:

Now repeat the process for the right hand side. Insert the header_nav_button_right.gif image into the empty cell at the top right and then resize the cell to 10 pixels wide.

Fig 7b.19 - The header_nav_button_right.gif image has been inserted into the empty top left cell of the nav menu table:

Fig 7b.20 - Set the cell's width to 10 pixels:

Now we'll need to deal with the middle column. We're not going to insert any images into it because that's where the text will go for the buttons when we add the finishing touches at the end of this tutorial. What we ARE going to do however is assign a width of 110 pixels and assign the background image. Start by highlighting the entire middle column by clicking on the top cell of the middle row and holding the mouse button down. Drag the mouse down the column until all the cells within the middle column are highlighted.

Fig 7b.21 - Highlight all the cells in the middle column:

With the cells highlighted, assign a width of 110 pixels in the properties box and set the cell background to our header_nav_button_bg.gif background image. Hit enter to apply the changes and all the cells will now have the image background applied.

Fig 7b.22 - Middle column once a width and background image are assigned:

Almost there! Click on the header_nav_button_left.gif once to select it and hit Ctrl-C to copy it to your clipboard.

Fig 7b.23 - Click on the header_nav_button_left.gif and hit Ctrl-C:

Now click on the Down arrow on your keyboard and the cursor should move to the right of your image. Hit the down arrow again and it should move down 1 cell. Hit Ctrl-V to paste the image into this cell. Hit the down arrow again to move to the next cell and paste again. Repeat the process until all 7 cells in the left column have the header_nav_button_left.gif inserted into it. If hitting the arrow keys is messing you up, just use your mouse and click in each cell you want to paste in. Either way, your end result should have the header_nav_button_left.gif image in every cell on the left side column.

Fig 7b.24 - The header_nav_button_left.gif image has been pasted into every cell on the left side column of the nav menu table:

Now repeat the process for the right side!

Fig 7b.25 - Click on the header_nav_button_right.gif and hit Ctrl-C:

Fig 7b.26 - The header_nav_button_right.gif image has been pasted into every cell on the right side column of the nav menu table:

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

Fig 7a.11 - Click inside the left column of the new table:

And VOILA! The header nav menu is fully sliced and coded! We'll just need to add text and links at the end of the tutorial!

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.

Our entire header table is coded and ready to go! We should be able to move along fairly quickly at this point because you're simply going to repeat functions you've already accomplished up until now. So time for a bathroom/smoke/snack/sleep break and then we move on to the next lesson!

[ Previous Lesson ] [ Next Lesson ]