Section 3 - Site Navigation

Download the XCF, HTML and image files for this section.

Before we start this we need to do a little planning. This page contains primarily navigational aides, with the only real informational content coming in the form of the GIF animation. There are two types of navigation here: external links to pages unrelated to the doctor's services and those specifically linked to the information on services provided.

Services Provided	External links
Gum Cleaning	Office Locations
General teeth cleaning	Insurance plans
Teeth Whitening	Dental Terminology
X-Rays	Clinical Practices
Molds and casts	Dental Hygiene Information
Caps
Extractions	Banner Information
Root Canals	Doctors names and credentials
Orthodontia services	Office Hours

Page layout

The information provided for navigation is sufficient to start work on the page. We're going to make the external links into rollover buttons that change slightly using Javascript. The image map with links to services is just like the one we made in Chapter 11, but this time we need to break the image up into pieces to accommodate a left side full of rollovers. Sounds tricky, but it turns out to be pretty simple using standard Gimp tools.

Following the design most commonly used on the web today, we'll provide the external links on the left side of the page, the image map links to service information in the center and the animation across the top. It's a simple design, and one that is easy to follow and uncluttered. The banner should be no more than 400 pixels across and 50 pixels high. That should make the page fit well on any monitor without requiring the visitor to scroll up or down.

We're going to start with the dental office image we used in Chapter 11 (a photo taken from a royalty-free stock photo collection and run through a few filters to generate the special effects). We want to generate a similar fuzzy edged border to it and then add some space on the left side filled with black. To do this we generate our special effects first (some selective motion blurring along with Curves and Level adjustments) and then apply the Fuzzy Border filter (Script-Fu->Decor->Fuzzy Border).

Rollover design

Rollovers are something new we're adding to your knowledge in Chapter 13, but it turns out they really only require some basic Gimp knowledge. A rollover is nothing more than a set of two images, usually colored differently, that are displayed under different conditions. The first image is the normal image and the second, the active image, is displayed when the mouse is placed over the image. The switch between the two images is handled by fairly simple Javascript code.

In our design we found we needed five rollovers, which means ten total images. Each image is simply a text image generated in the Gimp. The trick to these is to make exact duplicates of the normal and rollover images. Gimp makes this easy by using layers.

Lets start with our first external link - "Office Locations." The steps are as follows for a simple rollover:

1. Open a new canvas the size of the text image you need. In this case, the background layer turned out to be 156 pixels wide, so we'll make the text images a little smaller, say 150 pixels. We can center these in the table cell later.
2. Set the foreground color to the normal state color. We'll use a gray color for this.
3. Create a text layer in the font you desire.
4. Set the foreground color to the active state color. We'll use white for this.
5. Duplicate the text layer.
6. Select all of the duplicate layer. Make sure Keep Transparency is set.
7. Use the Bucket Fill tool to fill the duplicate layer with the new foreground color. This should color just the text.
8. Convert the image to indexed (so we can save them as GIF images).

Now you have all the pieces you need to make the two images for the first rollover. To save the two images, follow these steps:

1. Save the image with the layers intact to an XCF formatted file.
2. Delete the top layer.
3. Flatten the image.
4. Save this as offices-normal.gif.
5. Type Ctrl-Z twice in the Canvas window to undo the flatten and layer delete.
6. Delete the original text layer.
7. Flatten the image.
8. Save this as offices-active.gif.

We won't go into complete details here (the book gives better information) but we can look at the rollover code using Javascript.

The onMouseOver and onMouseOut events call two different JavaScript functions: mouseIn and mouseOut, respectively. These function names were our choice and their JavaScript code looks like this:

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Hide script from older browsers 

numitems=5; 
ActiveImages = new Array(numitems); 
NormalImages = new Array(numitems);

// Initialize two arrays used for the images.
for (i=0; i<numitems; i++) {
	ActiveImages[i] = new Image();
	NormalImages[i] = new Image();
}

// Establish the Active image objects we want to use.
ActiveImages[0].src="images/offices-active.gif";
ActiveImages[1].src="images/insurance-active.gif";
ActiveImages[2].src="images/terms-active.gif";
ActiveImages[3].src="images/practices-active.gif";
ActiveImages[4].src="images/hygiene-active.gif";

// Establish the Normal image objects we want to use.
NormalImages[0].src="images/offices-normal.gif";
NormalImages[1].src="images/insurance-normal.gif";
NormalImages[2].src="images/terms-normal.gif";
NormalImages[3].src="images/practices-normal.gif";
NormalImages[4].src="images/hygiene-normal.gif";

docObj = 'document';

// Event handler called for onMouseOver event
function mouseIn(item_name, index)
{
   docname  = eval(docObj + '.' + item_name);
   docname.src = ActiveImages[index].src;
}

// Event handler called for onMouseOut event
function mouseOut(item_name, index)
{
   docname  = eval(docObj + '.' + item_name);
   docname.src = NormalImages[index].src;
}

// End of hidden script --> 
</SCRIPT>

You can now add this to your HTML code to get a working front page that provides navigation to the rest of the Web site.

Recap

Congratulations! You've made your first fully functional Web page - well, almost. The links still have to be resolved to real pages, so there would still be lots of other work to do. But you can see how quick and easy making pages can be using the many features Gimp has to offer!

---

Prentice Hall PTR home | Essential Series home
© 2001 Prentice Hall PTR