Before we dive headlong into the next part, let's review our strategy guide and see what we've done so far! In Fig 8.1, we can see that Box 1 - Header/Banner Area and Box 2 - Header Menu are now complete, and next up is Box 3 - Main Navigation Menu. At this point, we could either slice the main menu as one single image and use image maps for the links, which is very easy, or we can slice each image separately in case we want to use image rollovers or something later on. Obviously the latter is a bit longer, but as usual, we'll take the longer route for this tutorial. Have a quick peek at the Strategy Guide, and let's get cracking!

Fig 8.1 - Our main Strategy Guide:

STEP A. We'll need to start off by slicing some images, so back into Photopaint we go! We're now going to mask off and copy/paste each section to create a new image for each button. The next few images will show you the area I am working at 400% zoom so you can see exactly where I sliced the images, and finally, what the images are. Don't forget to save your images to our image folder we've been using!

Fig 8.2 - Each button masked off and then saved as individual images:

Fig 8.3 - The individual button images we created:

main_nav_button_forums.gif	main_nav_button_portfolio.gif	main_nav_button_galleries.gif
main_nav_button_tutorials.gif	main_nav_button_downloads.gif	main_nav_button_aboutus.gif
main_nav_button_contact.gif

STEP B. Back into Dreamweaver we go and we'll now want to insert a table for our navigation menu. Simply click just under the main header we just coded and you'll see your cursor start blinking to the right of the header table.

Fig 8.3 - Click just below the header table (See red circle):

Create a new table for our Main Menu navigation buttons! Keep this one simple with just 1 row and 1 column and set the length to 100%.

Fig 8.4 - Create a new table with the following settings:

Fig 8.5 - Our new table:

We'll now want to insert the images into that new table, so just click anywhere inside the new table

Fig 8.6 - Click inside the new table (See red circle):

Fig 8.7 - Actions performed to insert an image:

Continue to insert each image into the table until the last button, and you should then have a complete row of buttons that fits perfectly into the layout. Remember to hit the right arrow button or click inside the table after you insert each image. This will move your cursor just to the right of the image and it tells Dreamweaver you want the next image to be placed next to the other image, not replace it.

Fig 8.8 - Cells have been merged:

You now have a row of images that are buttons, but they don't actually do anything yet! Before we move on, let's assign some pages to the buttons so that we can see them as actual active buttons when you move your mouse over them in a browser.

STEP D. To assign a URL or file link to an image and make it a button, simple start off by clicking on the image you want linked.

Fig 8.9 - Select the image you want to assign a link to:

Once you've clicked on a button, simply type in the URL or page link in the Link field on the properties box. For this tutorial, I will just put a # as a link. This will make the button active, but it won't actually go anywhere when you click on it.

Fig 8.10 - Assigning a URL to a button (See red circle):

That's it! Your main menu navigation bar is ready to go!

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.

Next up, we'll create our first ad banner box!

[ Previous Lesson ] [ Next Lesson ]