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!
8.1 - Our main Strategy Guide:
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!
8.2 - Each button masked off and then saved as individual
8.3 - The individual button images we created:
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.
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%.
8.4 - Create a new table with the following settings:
8.5 - Our new table:
now want to insert the images into that new table, so
just click anywhere inside the new table
8.6 - Click inside the new table (See red circle):
8.7 - Actions performed to insert an image:
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.
8.8 - Cells have been merged:
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.
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.
8.9 - Select the image you want to assign a link to:
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
8.10 - Assigning a URL to a button (See red circle):
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
up, we'll create our first ad banner box!
Previous Lesson ]
[ Next Lesson ]