Monday, August 25, 2008
Build Your Own Web Gallery
A step-by-step guide with screenshots for building your first website
STEP 5i: Creating Navigation With A Rollover Image
We're ready now to move on to our navigation buttons. We're going to add them to the same cell as our "page" graphic that we just added. Place your cursor immediately after the <img> tag for the "page" graphic in the code on line 28 and go to "Insert > Image Objects > Image Rollover" or select the command from the drop-down in the "Common" tab of the Toolbar. You'll see the following dialog:
Give your rollover a unique name, then browse to your files for the first rollover, in this case, "1.gif" and "1-o.gif". Make sure "Preload rollover image" is checked, add alternate text if you like, and finally enter the link to the page where the button will take your visitors. For button number 1, that page is the home page, or "index.html".
Repeat this step to add the second button immediately after the first rollover in the code, which is now on line 53. In the dialog box for the second rollover, I entered "page2.html" for the button's link, and must remember to save my second page of the gallery with that name.
Here's where everything stands in our Code and Design Views. Now's a good time to sit back a bit and compare the code to the design, review the code we've added so far and how it all relates, and generally get a better grip on HTML overall. Make sure you understand where all of the tags begin and end, and compare the code now to the early screenshots that were basically empty, if you're not totally sure of yourself yet. We're almost done, though, so when you're ready, we'll do a few tweaks to the design to make it look really sharp.
Before we continue on, let's preview our progress in a web browser. Go to "File > Preview In Browser" and select one from the list. Here's our page in Safari. It looks pretty good, but could use some alignment fixes and extra space, or "padding" around some of the objects. We'll make these adjustments by adding attributes to the cell tags.
Page 14 of 19