Chapter 6. Links and Navigation

CONTENTS

 

•  How Links Work in the Browser
•  Basic Link Creation in Dreamweaver
•  Dynamic Links
•  Email Links
•  Named Anchors
•  Image Maps
•  Jump Menus
•  Rollovers
•  Navigation Bars
•  Summary

The advent of electronic hyperlinked documents might bring about changes to the way human beings communicate that are almost as profound as the invention of the printing press. The humble hyperlink, enabling the visitor to jump from one document to another or a place within a document, is the foundation for a system of organizing written information that is profoundly different from any other.

It's important to have the skills to place links in a web document and to build navigation bars, image maps, and menus. Even more important, however, is to have an understanding of the way visitors read and navigate web sites and the web at large. Visitors access content on the web for information and to accomplish tasks, and often are surprisingly disinterested in a web site's clever features, especially if those features impede the visitor's quest. A truly effective web site must be built around a well-conceived system of links that enable visitors to find the information they need quickly and easily.

How Links Work in the Browser

Dreamweaver makes it very easy to add links, and even more complex linking systems, to documents; but it's still very important for a web developer to understand what is going on "under the hood" with hyperlinks.

The <a> Tag: Syntax and Usage

Hyperlinks are defined in HTML using the anchor element, <a>. For the purposes of linking, the <a> element requires only one attribute: HREF, for hypertext reference. The HREF attribute is set to the URL of the target resource. The text or image enclosed by the <a> tags becomes a spot that, when clicked with the cursor, activates the link. Here is an example of the HTML code for a simple hyperlink:

<a HREF="http://www.nytimes.com">Read the New York Times on the web</a>

When a web browser is displaying the HTML page containing this code, the text that has been marked as hot (a clickable link) is marked in some way so that it is clearly distinguishable from ordinary text. In most browsers, hypertext is rendered underlined and with a bright blue color; after being visited, the same link usually is rendered in purple (see Figure 6.1). An image with a hyperlink might be displayed with a border in the same link color, although designers frequently set an image border to not display at all. The cursor usually changes to show that it is hovering over a link, and information on the link might show in the browser window's status bar.

Figure 6.1. By default, link text is usually displayed by browsers underlined and colored blue.

Although underlined blue text (and images with blue borders) represented hyperlinks for many years, conventions have been changing gradually but steadily. The appearance of links is discussed in more detail a little later in this section.

Absolute Versus Relative Paths

A URL, or web address, is essentially a pointer to a given document or object located on the Internet, and this pointer is given as a path describing how to get to the document; however, several distinct types of paths exist.

An analogy to a real-world situation might help explain the differences. Imagine that you're a college basketball fan and want to go and see the UNC Tar Heels play tonight at the Dean Dome in Chapel Hill, North Carolina, where you've just relocated. So you send emails to three different friends, asking for directions, hoping that at least one will reply in time for you to get to the game.

To your surprise, all three friends reply right away, and interestingly, they give you three slightly different sets of directions.

Friend number one (who is a little eccentric) gives you directions similar to an absolute path. He says, "On planet Earth, in the United States of America, in North Carolina, in the town of Chapel Hill, on Manning Drive, you'll find the Dean Dome."

Friend number two has been to visit you and knows exactly where you live, and so gives you directions very much like a document-relative path: "Pull out of your driveway and make a right on Weaver Dairy Road, and then make another right onto Erwin. At the stoplight, go right onto 15-501; take it all the way to Manning Drive. Make a right on Manning, and the Dean Dome will be on your left."

Your third friend doesn't know where you live, and so gives you directions from a common point you both know, and her directions are somewhat like a site-relative path. She writes: "From Franklin Street downtown, go south into Carrboro. Make a left on Greensboro, and take it all the way down to 15-501. Get on 15-501 going north, and make a left onto Manning Drive, where you'll find the Dean Dome."

Table 6.1 shows a link to the same document written in three different forms.

Table 6.1. A Link to the Same Document Shown as Each of the Three Types of URL Paths

URL Path Type	Link
Absolute	http://www.acmewidgets.com/retail/products.html
Document-Relative	../products.html
Root-Relative	/retail/products.html

Absolute URLs

An absolute URL is one that spells out the complete information about the document's location on the Internet and how it is to be retrieved, including its protocol, host, directory, and filename. An absolute URL looks like the following:

http://www.carolinawebsolutions.com/portfolio.html

When creating links, you can use an absolute URL even for documents that are part of the local web site, and the requested document will be retrieved. However, using absolute paths forces the visitor through the front door of the web site after clicking each link. To compare with the directions analogy, taking literally the directions provided by your first friend, you would have to first consider where Earth is, then where the United States is, and where North Carolina is, before you could even start navigating your way around Chapel Hill. Using absolute URLs for local documents significantly increases the burden on the server and the time it takes to load the page, and so relative paths are preferable in this situation.

Tip

When creating HTML documents to be sent as email, it is necessary to use absolute URLs for all image references and hyperlinks. The email program on the individual's local computer will display the HTML file that comprises the email message, and the image files will be called from their location on a remote server and displayed along with the email message. Similarly, any hyperlinks must be absolute URLs because they refer to files residing on remote servers. (See Chapter 7, "Utilizing Head Content," for a discussion of using <base> to help specify links in HTML email.)

Relative Paths

A relative path is a shortened form, in which various parts of the address the protocol, site address, and directory might be inferred from other information available. There are two types of relative URLs, discussed in the following sections.

Document-Relative Paths

A document-relative path provides the path from the document where the link is being written to the destination document. Document-relative links must be used between documents located in the same site root. If the two documents are in the same directory, the path can be as simple as this:

portfolio.html

A link to a file in a directory below (within) the current directory would look like this:

webdesign/portfolio.html

A link to a file in a directory above (containing) the current directory would take this form:

../portfolio.html

And a link to a file two directories above the current directory would be written this way:

../../portfolio.html

Note

If you want to preview your pages locally inside a browser and without a web server, you must use document-relative paths. Why? Because web browsers cannot understand what local root folder you are using, so the only paths that can be followed are relative to the document currently being viewed.

Root-Relative URLs

If you are working on a large web site that uses several servers, or your web server hosts several different web sites, you might want to use root-relative paths. You also would use them if you plan on moving files around within your site quite a bit.

Whereas a document-relative path establishes the relationship between two files, a root-relative path establishes the relationship between a file and the root of the site. Continuing the analogy used earlier, it is like establishing the relationship between a defined point (downtown Franklin Street) and the destination (the Dean Dome). In that set of directions, nothing was said about where you live. Therefore, if you wanted to email directions to a friend who lives on the other side of town, you would choose this set of directions, rather than the ones that explain how to proceed from your own driveway. In the same way, files within a site using all root-relative paths can be moved within the site without changing the paths contained within the files, because the paths are described in a way that doesn't even take into consideration the location of the current document.

So, if you have your company newsletter online, and move the monthly articles to a directory called Archive when the new issue goes online, root-relative links will save you the time it would take to change links to reflect the new path structure.

An absolute URL has some of these same advantages, because it doesn't depend on the location of the current document to describe its path either. As discussed earlier, however, there are good reasons not to use absolute paths except when required.

Root-relative links always have a slash in front of the path name, as follows:

/poetry/bookshelf.html

In this example, the path leads to the bookshelf.html file, located in the poetry subfolder of the site's root folder. Once again, root-relative links are defined by your web server, not by the web browser. Therefore, if you open a page from your hard drive that uses root-relative links, the links will not work.

Note

Be warned that not all web servers are configured to handle root-relative paths correctly. Check with your server administrator before employing this kind of link in your site.

Targeting Links

By default, a link will open in the current browser window. HTML enables you to specify that a link be opened in a new browser window, or on a frame-based site, in a particular frame. This is written using the target attribute of the anchor tag, <a>, like this:

<a href="http://www.macromedia.com" target="_new">Click here!</a>

For more information on using this attribute in frame-based sites, see Chapter 12, "Designing Frame-Based Pages."

How Links Appear

To the person who visits a web site, the appearance of links is of great importance. Whether they are text or image, links need to convey their "linkiness." In other words, the visitor needs to be able to recognize links without any effort or thought. Various web design techniques generally are employed to ensure this.

Conventions

Link appearance conventions are used widely on the web, and it is often best to use them. Designers are often tempted to be artistic and even mysterious in their use of links, and although this might greatly impress other web designers, it generally only annoys users.

Conventions do shift gradually, however, and it isn't necessary to restrict oneself to a rigid set of link styles.

For the first few years that the web existed, text links were almost universally displayed by browsers underlined and in a blue color that changed to a purple for visited links. Images were shown with a one-pixel border in the same link colors. Graphics used as links were commonly three-dimensional, mimicking real-life buttons (see Figure 6.2). However, there has been a gradual shift, and to the extent that designers have shifted more or less en masse to new conventions, those conventions have been accepted by the great majority of visitors.

Figure 6.2. Three-dimensional navigation buttons were once ubiquitous but have given way to other two-dimensional button styles.

For example, text links are often shown as some other contrasting color than blue and removing the underlines has become quite common. (See Chapter 13, "Using Cascading Style Sheets," to learn how to accomplish this with Dreamweaver.) In addition, the CSS pseudoclass a: hover has enabled designers to produce a "rollover" effect with plain-text links, so that the link color changes when the visitor passes the cursor over it at least in some browsers.

Image links are often two-dimensional and don't necessarily resemble buttons; their "linkiness" is usually communicated primarily by their placement on the page and labeling. These variations on the display of links pose no problem to most users if they are implemented with care. Links should look the same, or close to it, throughout a site; buttons shouldn't be three-dimensional on one page and flat on another. And sites should always be tested on real users, even if only informally. Few things are as eye opening to a web designer as to watch an ordinary person using her web site; much can be learned from these sessions.

The cursor itself communicates "linkiness" in that, in nearly all browsers, it changes shape, usually to a little pointing hand icon, when the user rolls his mouse over a link. Although this can be altered with CSS, be warned that a differently reacting cursor is usually at best a distraction, and at worst, an impediment to the use of a web site.

Navigation Bars

Some very common conventions have developed around the placement and general appearance of navigation bars. A navigation bar is just a part of a page where a collection of links is presented, usually in a vertical or horizontal pattern. Although links in a navigation bar might not display overt signs of "linkiness," such as underlined text, rollovers, or 3D buttons, the very commonness of their layout arrangement, combined with clear labeling, is often enough to signal their purpose (see Figure 6.3).

Figure 6.3. One example of frequently used types of navigation bars.

Links and Rollovers

As discussed earlier, a convention has evolved for rollovers link text that changes color when the cursor passes over it. This convention also extends to image rollovers. Using JavaScript, one image can be swapped for another when the visitor mouses over it, giving the appearance of the image changing. Common implementations for image rollovers are buttons that appear to light up when the cursor is moved over them.

The important principle here is that users have come to be accustomed to hyperlinks, whether text or images, responding to the cursor hovering over them. If you have the chance to observe users interacting naturally with a web page, you'll notice that most will move the cursor around the page, looking for the signals that certain spots on the page are links; the designer's job is to make this process so easy for the user that he never even has to think about it.

Basic Link Creation in Dreamweaver

Creating links is one of the common tasks that Dreamweaver makes very simple. When the principles of URL paths, as discussed earlier, are understood, adding hyperlinks within Dreamweaver is very straightforward.

Once again, the hard-working Property inspector panel is the tool used to create links. Anytime an image or text element is selected in Design view, the Property inspector includes a set of link fields and controls for specifying link information (see Figure 6.4).

Figure 6.4. The Text Property inspector (top) and Image Property inspector, both showing their link controls.

Assigning Absolute Links

Because you can't browse to the file indicated by an absolute URL, and you can't point to it, all absolute links must be typed into the Link field of the Property inspector. Be sure to type the complete link, including the protocol (usually http:// for links to other HTML pages). Be aware that Dreamweaver will not display images in Design view if they are referenced with an absolute path, unless that absolute path refers to the image's location on the local computer.

Assigning Relative Links

Relative links can be assigned to any image or text element by selecting the element, then either typing the relative URL in the Link input field, or using the Browse or Point-to-File icons. Using either of these methods will cause Dreamweaver to construct a document-relative or root-relative path to the specified location.

Note

If you do not save your file before inserting an image or creating a link, Dreamweaver does not understand where this HTML document is located. Therefore, you will get a message reminding you to save the file. Until you save the file, Dreamweaver creates a link specific to your workstation. This link will not work after you upload your document, so get into the habit of saving your new documents into the proper directory as soon as you create them.

Browsing for Links

Browsing is probably the most common way to assign a relative link. To assign a link by browsing to it, do this:

1. Select the text or image that will become the linked element.

2. In the Property inspector, click the Browse button next to the Link field.

3. In the dialog box that appears, browse to the desired file.

4. At the bottom of the dialog box, choose whether to create a document-relative or root-relative link. The correct URL will appear in the dialog box.

5. Click OK to create the link.

Using Point-to-File

Depending on how much you like dragging things around, as opposed to choosing from dialog boxes, you might prefer to assign your links by pointing to them. Any file whose entry you can see in the Site panel's Site Files or Site Map pane, you can point to; pointing to the file links to it. To assign a link using Point-to-File, do this:

1. Select the text or image that will become the linked element.

2. Make sure your Site panel is open and at least partially visible on your screen. The particular file you're pointing to doesn't have to be visible.

3. In the Property inspector, find the Point-to-File icon (see Figure 6.5). Drag from that icon to the Site panel, which will come to the front if it's partially hidden by another window. Keep dragging over the site map, list of site files, or even the computer icon that allows you to explore your computer's file system. Don't let go until the cursor is on top of your destination file, and that file is highlighted.

   Figure 6.5. Creating a relative link using Point-to-File.

   

4. Let go! A relative link to that file has been created in your document.

Document-Relative and Root-Relative Links in Dreamweaver

Every time you browse to create a relative link, Dreamweaver gives you the option of creating that links as document-relative or root-relative. Note that this setting is sticky if you change it, it will stay that way until you change it again. This is not retroactive (it does not change links that are already set relative using another method).

When you create a relative link using Point-to-File, you aren't given the option of choosing what kind of relative link to create. Instead, whatever default you established the last time you browsed to a relative URL will be used. To change the default, assign at least one link using Browse, choosing the desired kind of link in the Select File dialog box.

Also, as mentioned earlier, root-relative links can't be previewed locally in your browser. Within Dreamweaver, if you preview a page containing root-relative links, Dreamweaver will temporarily convert those URLs into document-relative paths. When you click a link in the previewed page, it will work, but any paths on subsequent pages will not work locally because they are site-root relative. For this reason, you will be able to preview only one page at a time.

Exercise 6.1 Creating Text and Image Links

In this exercise, you'll practice creating both text links and image links.

1. If you haven't yet, copy the chapter_06 folder from the companion CD onto your hard drive, and define a Dreamweaver site named chapter_06 with the folder chapter_06 as its root directory.

2. From the chapter_06 folder, open the document pattys_recipes.html (see Figure 6.6). You'll link this document to three others, providing both button image links and text links.

   Figure 6.6. The file pattys_recipes.html ready to have links inserted.

   

3. First, the text links. At the bottom of the page, select the text Pesto. In the Property inspector, click the Browse button. In the Select File dialog box that appears, link to pesto.html, in the chapter_06 folder. For the type of link, choose document-relative.

4. Repeat step 3 to create a link using the words Tortellini Salad to the file tortellini.html, also in the chapter_06 folder.

5. To create a link to the Chocolate Chip Cookies recipe page, you'll use the Point-to-File icon. You'll need to see and access the Document window, the Property inspector, and the Site panel all at once; depending on which Dreamweaver workspace you're using, this might involve some rearranging of windows. Select the words Chocolate Chip Cookies, and in the Property inspector, click the Point-to-File icon, just to the left of the Browse icon (see Figure 6.4). Drag the icon to the Site panel and drop it on top of the file chocolate_chip.html.

6. Save your file. Now you'll make the buttons into links. Select the Pesto button, and just as before, look for the Browse icon in the Property inspector. Just as before, link to the file pesto.html.

7. In the same way, link the next two buttons to the appropriate files.

8. Save your document, preview in your favorite browser, and test your links.

Changing Default Link Colors

As discussed earlier, by default, text links display with each browser's chosen style, usually underlined and blue (purple for visited links). In HTML, the default color for links can be changed in two ways: by adding attributes to the <body> tag, or by using CSS. The former method is deprecated (discouraged) in the HTML 4 specification, in favor of the latter.

In Dreamweaver, to change default link colors by adding attributes to the <body> tag, choose Modify > Page Properties, which will open the Page Properties dialog box. The dialog box that appears allows you to set an alternative color for regular text, links, active (in the process of being clicked on) links, and visited links .

To change default link colors in Dreamweaver by using CSS, see Chapter 13.

Dynamic Links

 

All or part of a URL can be stored in a database field and put into your page as dynamic content. If the URL is inserted as the href attribute of an <a> tag, it will create a dynamic link, like this:

<a href=<%=(Recordset1.Fields.Item("page").Value)%>>Click here</a>

To insert a URL as a dynamic link:

1. Begin as if you were assigning a normal link, by selecting the text or image you want the <a> tag to surround (see Figure 6.7).

   Figure 6.7. Assigning a dynamic source to a URL and adding a parameter.

   

2. In the Property inspector, find the Link field. Click the Browse icon.

3. In the dialog box that appears, choose Data Source instead of File System. A list of available database fields from the document's recordset(s) will appear.

4. Choose the desired field.

5. If the database contains complete URLs in one of its fields, go to the next step. If the database contains pieces of information that you want to use in a larger URL, edit the entry by adding any extra URL elements needed, like this (added code is in bold):

   http://www.domain.com/<%=(Recordset1.Fields.Item("page").Value)%>

6. If the contents of the requested field contains unacceptable characters for a URL such as spaces or ampersands use the Format pop-up menu, and choose URL Encoding.

Passing Parameters in URLs

Any time you browse to choose a link using the Select File dialog box, you have the opportunity of passing one or more parameters as part of the link's URL. Information passed as a parameter is coded as a name/value pair appended to the end of the URL, separated from it by a question mark (?). Typical parameters might be username = fred, category = rings, color = green, and so forth. Added to a URL, these parameters would look like this:

mypage.html?username=fred&category=rings&color=green

(This is the same kind of URL that occurs when you submit a form using the GET method.)

When working with live data pages, the page you're linking to can use passed parameters to construct its recordset. This is the core of how dynamic search pages work.

To add a parameter to a URL:

1. Create a link, as described above (see Figure 6.7). The link doesn't have to be generated from dynamic information.

2. In the Select File or Dynamic Source dialog box, click the Parameters button.

3. In the Parameters dialog box that opens, enter a name for the parameter (any name will do, as long as it's something you'll remember). Choose a dynamic value for the parameter value.

To retrieve information from a passed parameter:

1. Open a page that has been linked to using a passed parameter.

2. In the Bindings panel, click the plus (+) button and add a new recordset.

3. In the Recordset dialog box, choose URL Parameter from the Filter pop-up menu (see Figure 6.8). Specify the name of the parameter that will be passed and the value it should be compared to.

   Figure 6.8. Collecting a recordset based on a passed URL parameter.

   

Email Links

Email links are coded a little bit differently than links to files, because they use a different protocol: mailto. When an email link in a browser window is clicked, the email program that the user has specified in his browser preferences will open. If the user hasn't specified an email program for the browser to call, he will receive an error message instead. The code for an email link looks like this:

<a HREF="mailto:[e-mail]">Email Fred Smith now!</a>

Note that email links are considered to be absolute URLs (in other words, they must always have a protocol).

Email Links with the Property Inspector

The simplest way to make an email link in Dreamweaver is by using the Property inspector, following these steps:

1. Select the text or image you want to use for the email link.

2. Click your cursor in the Link field of the Property inspector and type in the mailto: code as shown here:

   mailto:[e-mail]

   Note that there is not a space after the colon.

Email Links with the Email Link Object

If you prefer not having to remember and type the mailto: protocol every time you enter an email link, Dreamweaver also provides an Email Link object. To use it, follow these steps:

1. In the Document window, click your cursor at the spot where you want to insert an email link. To create an email link from an image, for instance, click the image to select it. To create an email link from text, either enter the text and select it, or position the cursor where you want the text to go.

2. Choose Insert > Email Link from the Dreamweaver main menu. Or click the Email Link object from the Common tab of the Insert bar (see Figure 6.9).

   Figure 6.9. The Email Link object and its dialog box.

   

3. The Insert Email Link window will appear (see Figure 6.9). Type or edit the link text, if necessary. In the Email field, type the email address to which you want mail to be sent.

4. Click OK. Your email link is inserted!

Tip

Whether you prefer using the Property inspector or Email Link object, pick one method and stick to it. Otherwise, you might get confused and end up accidentally adding the mailto: protocol when you shouldn't (when using the object) or omitting it when you should (when using the Property inspector), and creating a nonfunctional link.

Named Anchors

Don't you appreciate it when you visit a web site where the designers have taken the time to make links that allow you to navigate within a long page, so that you don't have to scroll up and down to find what you're looking for? When you make a link to a specific place in a document rather than just linking to the document itself you are creating what's called a named anchor link.

Creating Named Anchors

To create a named anchor in Dreamweaver:

1. In the Document window, in Design view, place the insertion point where you would like the named anchor.

2. Do one of the following:

   • Choose Insert > Named Anchor.

   • Press Control+Alt+A (Windows) or Cmd+Option+A (Macintosh).

   • Select the Common tab of the Insert bar and click the Named Anchor object (see Figure 6.10).

     Figure 6.10. The Named Anchor object and its dialog box.

     

3. This opens the Named Anchor dialog box. In the Anchor Name field, type a name for the anchor (see Figure 6.10).

4. If you have invisible elements set to show, the anchor marker will appear at the insertion point. If you don't see the anchor marker, choose View > Visual Aids > Invisible Elements. Figure 6.11 shows the inserted anchor.

   Figure 6.11. A named anchor as it appears in Design view if invisible elements are showing.

   

Note

The little gold anchor icon might look as if it's scooting the page contents around it out of position. This is an illusion of Dreamweaver Design view. In the browser, the icon will be invisible and won't take up any space.

Linking to Named Anchors

The HTML code for linking to a named anchor is to call it by name. To link to an anchor named outerspace, located within the current document, the code would be:

<a href="#outerspace">Click to read about outerspace!</a>

This means, "within the current page (#), go to the anchor named outerspace." To link to the same anchor but from another document, the code would be:

<a href="myfile.html#outerspace">Click to read about outerspace!</a>

This means, "within the document myfile.html, go to the anchor named outerspace."

Dreamweaver gives you several options for creating these links.

Link by Entering the Anchor Name

Select the text or image from which you wish to create the link. In the Property inspector, type a number sign (#), followed by the named anchor's name into the Link field. If the anchor is named outerspace, type #outerspace into the box.

To link to a named anchor in a different file, type the file name (and path, if appropriate) followed by the number sign and anchor name: myfile.html#outerspace.

Link Using Point-to-File

The Point-to-File icon also can be used for linking to named anchors. Select the text or image to be made into a link and click the Point-to-File icon and drag it to the anchor marker on the page (see Figure 6.12). If the named anchor is in a separate document, open that document and drag from the Point-to-File icon to the anchor within it.

Figure 6.12. Using Point-to-File to link to an anchor.

Exercise 6.2 Creating Named Anchor Links

In this exercise, you'll create a system of links between a list of page contents at the top of a document and the actual contents further down the page.

1. If you haven't yet, copy the folder chapter_06 from the companion CD to your hard drive, and define a Dreamweaver site named chapter_06 with the folder chapter_06 as its root directory.

2. Open the file lyrics.html. The file contains song names at the top of the page that need to be linked to the appropriate spot inside the text of the page. Because the first song at the top of the page will be visible anyway, and therefore doesn't need a link, start with the second song, "The Ballad of Vicki Smith."

   Scroll down the page until you reach the lyrics to the song "The Ballad of Vicki Smith." Place the cursor just before the song title, and choose Insert > Named Anchor.

3. In the Insert Named Anchor dialog box, type a name for the anchor. The name should not include spaces or special characters, and because they are case-sensitive, it is recommended that you use only lowercase letters in this case, theballad. Click OK.

   Your anchor marker should then appear. If you don't see the anchor marker, choose View > Visual Aids > Invisible Elements.

   Now that you have made the anchor, you need to link to it. Back at the top of the page, select the song title "The Ballad of Vicki Smith."

   Note

   

   When naming your anchors, be careful not to use any spaces or special characters in the name. Also remember that these names are case-sensitive. Finally, make sure you are not putting the anchor itself inside a layer, because this will fail in Netscape 4.

   In the Property inspector, enter #theballad into the Link field. Don't forget to put the pound sign in front of all your anchor links. If you forget the pound sign, the anchor won't work.

4. Save and preview your page to ensure that the link works. If the link doesn't work, check first to make sure that you have spelled it correctly in the link box.

5. To practice making anchors, create anchored links to all the songs in the file lyrics.html, choosing your own anchor names. Preview in a browser as you go, to be sure that you've done them correctly.

Image Maps

An image map is a graphic image that has been given numerous hotspots, which function as links. Coordinates that form rectangles, circles, or polygons within the image determine the hotspots. Figure 6.13 shows a typical example of an image map at work.

Figure 6.13. The Green Library site uses a map of the library for navigation

There are two types of image map: server-side image maps and client-side image maps. With server-side image maps, the coordinate information is stored on the server, which can slow down the loading of the linked pages considerably. Client-side image maps can contain all the mapping information in the same HTML file that contains the image. Client-side image maps are preferable for several reasons, including the following:

• There is no need for a server to be visited to determine the destination, so links are resolved more quickly.

• The user can be shown the destination URL when he mouses over a hotspot.

• Image maps can be tested locally.

Working with Image Maps in Dreamweaver

Dreamweaver has tools for creating, configuring, and editing image maps and their hotspots, without having to worry about the code behind them. The Dreamweaver hotspot tools create client-side image maps.

Creating an Image Map

To create an image map in Dreamweaver, follow these steps:

1. In the Document window in Design view, select the image.

2. In the Property inspector, type a unique name for the image map.

3. Define the image map hotspots by using one or more of the Hotspot tools (see Figure 6.14).

   Figure 6.14. The Image Property inspector showing Dreamweaver's Hotspot tools.

   

   • To use the rectangle or circle tool, click the relevant icon and drag the pointer over the image in the Document window to create a rectangular or circular hotspot.

   • To use the polygon tool, click its icon, and in Document window, click once over the image for each corner point of the desired polygon-shaped hotspot, and then click the arrow tool to close the shape.

Tip

It's crucial to officially finish drawing the polygon hotspot by clicking the arrow tool (in the Property inspector). If you don't do this, every mouse click you make inside the image will continue adding corners to your polygon. If this happens to you, click the arrow tool to leave polygon-drawing mode, select the tangled-up hotspot you've created, and delete it.

The code that Dreamweaver creates for an image map consists of a <map> tag that defines the hotspots and appears below all other <body> content:

<map name="travelmap">      <area shape="rect" coords="163,18,250,90" href="page1.html">      <area shape="rect" coords="56,175,154,244" href="page2.html">      <area shape="rect" coords="365,19,485,95" href="page3.html">  </map>

And a link to the map code in the image's <img> tag:

<img src="planets.gif" width="576" height="360" border="0" usemap="#travelmap">

Working with Hotspots

After you create a hotspot in Dreamweaver, you can set its properties using the Hotspot Property inspector (see Figure 6.15). The inspector's Link, Target, and Alt fields function exactly the same as those you fill in when you create a simple image hyperlink and can be completed in the same way.

Figure 6.15. The Hotspot Property inspector.

To edit the hotspot after you've created it, use the arrow key (found in the Hotspot Property inspector). Click in the hotspot's central area to select it. Drag to move it. To reshape it, click-and-drag on any of the selection points that appear around the selected hotspot's edge (see Figure 6.16).

Figure 6.16. Using the arrow tool to reshape a hotspot.

Strategies for Working with Image Maps

Image maps enable the designer to create navigational controls that are more complex and varied than what is possible with text or grouped single images, including using rectangular, circular, and polygonal shapes for hotspots. Keep in mind a few special considerations when using image maps.

Image Maps and Accessibility

HTML, and Dreamweaver, offer various options to make your image maps more accessible to visitors who might not be able to view the images involved.

Alt Text

Just as with any images used on the web, it is important that the individual hotspots on image maps be labeled with alt (alternate text) attributes, so that users browsing with speech browsers, or with images turned off, can read a text label specifying to what destination each hotspot leads. Most browsers support hotspot alt attributes, displaying them as tool tips when the user mouses over the hotspot. The URL destination also is usually shown in the browser's status bar at the bottom of the browser window.

However, it is a good practice to provide secondary text link navigation mirroring the choices offered by the image map. This makes the site accessible for nongraphical browsers and offers an option for users on slow connections who might not want to wait for the image map to download completely (see Figure 6.17).

Figure 6.17. An image map with secondary text navigation.

In Dreamweaver's Preferences (choose Edit > Preferences in the Accessibility category, you can select an option (check Show Attributes When Inserting Images) that will cause Dreamweaver to prompt you to add attributes to your image map code to make it accessible.

Focus and Tab Order

Most browsers normally display image maps so that, when clicking a hotspot, a dotted-line border is shown around the hotspot area. Also, even before clicking a hotspot, a user can use the Tab key to move through the hotspots and hyperlinks in succession. These focus lines exist mainly for accessibility; many web surfers, especially the visually impaired, but also those who surf with keyboards, rely on these kinds of features as good navigational tools.

However, designers are often unhappy with what they call "those ugly dotted lines" and prefer to remove them. Project Seven Development has an extension called IE Link Scrubber, which removes those focus lines. Project Seven also recently released another version, Scrubber 2, which, for accessibility purposes, removes the focus lines while still enabling the user to Tab through the links in succession; it is available from www.projectseven.com.

Making Friendly Hotspots

Because the Dreamweaver Hotspot tool makes it so easy to create image maps, you might be tempted to try unusual shapes and patterns for image maps. However, it is important to remember that a good web page is always easy for the user to understand and navigate. Hotspots should be more or less uniform in size, if not in shape, and large enough so that they can be easily found by the cursor. A hotspot should always corre-spond with a portion of the graphic that clearly communicates the URL destination; if words aren't used, universally understandable icons (such as a mailbox for an email link) should be employed. Also, be aware that irregular hotspots require a fair amount of code and can quickly add to the page's overall weight.

Limitations of Image Maps

To a large extent, the use of image maps is being replaced by sliced images. Especially when large graphics are used for image maps, download time can be significant; with sliced images, slices download successively, so that some usable content appears much sooner. Image maps also are limited in that they don't allow the text slices that are possible with sliced images. For more about sliced images, see Chapter 5, "Working with Images."

Image rollovers are possible with image maps, but can be done much more simply and with fewer bandwidth issues by using sliced images.

Exercise 6.3 Creating an Image Map in Dreamweaver

In this exercise, you create a simple image map using Dreamweaver.

1. If you haven't yet, copy the chapter_06 folder from the companion CD to your hard drive, and define a Dreamweaver site named chapter_06 with the folder chapter_06 as its root directory.

2. Open the file image_map.html. Click once on the green navigation bar image to select it. In the Property inspector, on the bottom left, click the blue square icon near the word Map.

3. Now hover the cursor over the navbar image; you'll notice that the cursor has turned into a crosshair. Click and drag to form a rectangle around the word Home. The rectangle should show as a shaded turquoise-blue region; if it does not, go to View > Visual Aids and be sure that Image Maps is checked. If you make a mistake, just be sure that the blue hotspot is selected and press the Delete button on your keyboard.

4. When you've drawn a hotspot you're satisfied with, leave it selected, and use the Property inspector to link it to the file home.html. For alternate text, enter Go to Home Page in the Alt field (see Figure 6.18), being sure to click anywhere in the Document window to activate the PI change.

   Figure 6.18. The Property inspector for image_map.html with the link and alt information filled in.

   

   Note

   

   An image map needs a name attribute. You can assign it one of your own choosing using the Property inspector; if you don't, Dreamweaver will name it Map. This is perfectly adequate; but you might find a more descriptive name helpful, especially if you have more than one image map on a page.

5. Create hotspots linking the other words on the navbar image to the corresponding pages in the chapter_06 folder; each link on the navbar has an HTML document with the corresponding name (such as about_us.html). Save and preview in a browser.

Importing Image Maps

Image maps don't have to be built within Dreamweaver; graphics programs such as Fireworks and ImageReady can produce the HTML for image maps, which can then be imported into Dreamweaver by opening the document that contains them in Dreamweaver, by copying and pasting the relevant code into a Dreamweaver document, or (for image maps generated using Fireworks) by using the Fireworks HTML object.

Note

For more on Fireworks/Dreamweaver integration, see Appendix A, "Using Dreamweaver and Fireworks Together."

Jump Menus

A jump menu is a form <select> item which displays as a drop-down (or pop-up) list of options; clicking an option is the equivalent of clicking any other kind of link. (For more about form objects, see Chapter 11, "Working with Forms.") A jump menu can provide links to local or remote documents, email links, or links to any other type of file that can be linked to within HTML (see Figure 6.19).

Figure 6.19. A jump menu in action.

A jump menu often includes a menu selection prompt, such as Country or Choose One, which displays at the top of the list. Clicking a list option will activate the link.

There are specific applications where jump menus are best used. Generally, when saving space is important, when the user does not need to see all the menu options at once, or when there are a great deal of menu items, a jump menu is appropriate.

Creating a Jump Menu in Dreamweaver

Dreamweaver makes creating jump menus simple. Just follow these steps:

1. Open your document in Design view, and position the cursor where you want the jump menu to appear.

2. Do one of the following:

   • In the Insert bar, bring the Form tab to the front, and click the Jump Menu object (see Figure 6.20).

     Figure 6.20. The Jump Menu object and its dialog box.

     

   • Choose Insert > Form Objects > Jump Menu.

3. The Insert Jump Menu dialog box opens (see Figure 6.20). Use this dialog box to specify what entries will appear in the jump menu, and what location to send the browser to, when visitors choose this option. Type the text labels desired into the Text field; click the plus (+) button to add them to the menu. Use the Browse button to choose URLs, or type them in manually. You also can use this dialog box to set your Jump Menu's options, such as whether to include a Go button. (See the following sections for more on this.)

Jump Menu Code

The code for a jump menu consists of a <form> and enclosed <select> tag, and JavaScript in the guise of the jump menu or Jump Menu Go behavior to make it go. After you've inserted the jump menu, if you have invisible elements set to show in your document, you'll see the red rectangle of the form surrounding your jump menu. If you select the jump menu, you'll see the appropriate behavior in the Behaviors panel (see Figure 6.21).

Figure 6.21. A jump menu as it appears in Design and Code views.

Note

Even if the jump menu is not being used in an actual interactive form, some browsers require that any form item be enclosed in <form> tags, and so Dreamweaver inserts them automatically.

To Go, or Not To Go

When you create your jump menu, you have the option of building it as a pop-up menu only, or as a pop-up menu with associated Go button. A Go button is a form button labeled "Go," which will activate the jump menu when it's clicked.

Jump menus don't need Go buttons, because normally the menu activates as soon as a visitor chooses a destination from the menu. But what happens when the visitor's desired destination is already appearing in the menu for instance, the destination might be the default menu choice (the first item in the list of specified destinations); or the visitor might have arrived at the page using the browser's Back button. For such occasions, the Go button provides a means of activating the menu without changing the selected destination.

Tip

To avoid having to use a Go menu to activate your first menu entry, don't make the first entry a destination at all. Give it a text label of "Choose one" or "Destination," and leave the value (URL) field blank.

To include a Go button when defining your jump menu, select the Insert Go Button After Menu option in the Insert Jump Menu dialog box.

Using Jump Menus with Frames and Multiple Windows

Jump menus can be used to load new pages into new windows, or into different windows of a frameset. To specify this, use the Open in Main Window option for each URL when defining the jump menu's destinations (see Figure 6.20).

If the jump menu opens its destination URL in a separate window, you're presented with another decision: After the destination has been loaded, do you want the jump menu to continue displaying the entry for the loaded destination, or do you want it to revert to displaying its default (first) entry? Probably, if you're opening the destination in a new browser window (assigning a target of _blank), you want the menu to revert; if you're opening the destination in a separate frame within the same browser window, you don't (see Figure 6.22). Whether the jump menu reverts or not is determined by the Select First Item After URL Change option, in the Insert Jump Menu dialog box.

Figure 6.22. A jump menu in a frameset opening a new URL in a different frame (the jump menu is not reverting to its initial selection).

Editing a Jump Menu

After a jump menu has been created, you can edit the menu itself, and its "jumping" functionality, using the Property inspector and Behaviors panel. You also can edit, add, or remove Go buttons.

The Jump Menu Property Inspector

Select the jump menu to view the Jump Menu Property inspector (see Figure 6.23). This is actually nothing more than the List/Menu Property inspector, with jump menu entries in place. In addition to changing the jump menu from a pop-up menu to a list, if you like (so several entries appear at once), you can edit the destinations from here by clicking the List Values button. (For more on List/Menu objects, see Chapter 11.)

Figure 6.23. The List/Menu Property inspector for a jump menu.

The Jump Menu Behavior

Select a jump menu, and in the Behaviors panel you'll see that the jump menu behavior has been added to the form element using the onChange event trigger. (This means the behavior will execute any time the menu selection is changed.) Double-click that behavior, and the Jump Menu behavior dialog box will open. This dialog box is almost identical to the Insert Jump Menu dialog box it's only missing the Menu Name and Insert Go Button options, which can only be defined when the jump menu is created.

Playing with Go Buttons

If you created your jump menu with a Go button, the button will have the Jump Menu Go behavior applied, to be triggered onClick. This behavior is really nothing more than an alternate means of calling the Jump Menu function. Double-click to edit the behavior, and you'll see that the only option it allows for is which jump menu clicking the button should trigger.

If you decide you don't want a Go button after all, you can safely select and delete your Go button at any time.

If you decide, after having created your jump menu that you really do want a Go button, you can add one by doing this:

1. Insert a form button within the form that contains your jump menu. (Put the insertion point directly after the jump menu and choose Insert > Form Objects > Button.)

2. Using the Property inspector, set the button's label to "Go."

3. Select the button and, from the Behaviors panel, assign the Jump Menu Go behavior to it.

Tip

Go buttons don't have to be form buttons. Any page element that can have link applied to it including text links and images can be used to trigger the Jump Menu Go behavior.

Most visitors prefer jump menus that jump to their destinations as soon as they choose from the menu. If, however, you want your menu to activate only if visitors first make a selection and then click the Go button, do this:

1. Create the jump menu with a Go button, or use the above instructions to add a Go button later.

2. Go to Code and Design view. In the Design portion of the Document window, select the jump menu.

3. In the Code portion of the window, find and examine the code for the menu (the <select> item). Delete the event handler and function call, as shown here (code to be deleted shown in bold):

   <select name="menu1" onChange="MM_jumpMenu('parent', this, 0)">

Note that, after you've done this, Dreamweaver will not recognize the <select> item as a jump menu any more, so you won't be able to use the Behaviors panel to edit its behaviors.

Exercise 6.4 Creating a Jump Menu

In this exercise, you will create a jump menu that will allow visitors of a home page to jump to various pages within a web site.

1. Open your chapter_06 site in Dreamweaver, and open a new blank page. Save it as jump_menu.html.

2. Choose Insert > Form Object > Jump Menu. The Insert Jump Menu dialog box appears.

3. Type into the Text field the text Choose a Section. This is not actually a menu choice, but will appear in the menu in its non-dropped-down state to prompt the user to pull-down the menu.

4. In the Menu Name field, type a short descriptive name, such as navigation, for the menu.

5. Click the plus (+) button to add a menu item.

6. In the Text field again, type Home. Next to the When Selected, Go to URL field, click the Browse button to choose the file named home.html. (You're linking to the same pages you used in the image map exercise.)

7. Repeat steps 5 and 6 to add and link menu items About Us, Products, Our Staff, and Contact Us.

8. Choose Main Window in the Open URLs In field. (This opens the destination URL in the same browser window that contains the jump menu.)

9. Your jump menu doesn't require a Go button, because your first menu entry isn't a link that will ever need to be activated; and your jump menu won't need to be reset after the URL changes, because you're not working in frames or multiple windows for this exercise. Therefore, you can leave both of these options deselected.

10. Click OK to insert the jump menu. There's your jump menu! Notice that, if you have invisible items showing, your menu appears surrounded by a dotted line (typically red, with default color settings); this indicates that the jump menu has been placed inside of a <form> tag.

11. Save your document and preview in your browser (see Figure 6.24). Try it out and see how the navigation works.

    Figure 6.24. The jump_menu.html file with its completed jump menu in place.

    

12. Try fancying up your jump menu a bit by adding a Go button. In the Document window, place the insertion point immediately after the menu, and choose Insert > Form Objects > Button. In the Button Property inspector, set the Label field to "Go!". With the button selected, open the Behaviors panel (Window > Behaviors) and from the plus (+) menu choose Jump Menu Go. In the dialog box that appears, make sure your jump menu is selected as the menu to control.

13. To give your Go button something to do, you'll need to change the first edit item in your menu to an actual destination. Select the jump menu (the menu itself, not the button), and in the Behaviors panel, double-click the Jump Menu behavior to edit it. When the dialog box opens, replace your first entry with an entry labeled Macromedia, which sends users to the following URL: http://www.macromedia.com

    (You'll need to type in the URL by hand, as you can't browse to it.)

14. Now try your menu in a browser! When the page first loads, the Macromedia entry is visible in the jump menu. Because you can't choose that entry (it's already chosen), click the Go button and be whisked off to Macromedia.

Rollovers

As discussed earlier, one of the conventions that has arisen on the web, and which has come to be easily understood by users, is the concept of a navigation link changing in some way when the cursor rolls over it. This type of feature, when applied to an image, is known as a rollover.

A rollover actually consists of two images: the primary image, which displays when the page first loads; and the secondary image, which the browser substitutes for the primary image when the cursor moves across the primary image. The two images must be the same size. If they are not, the secondary image will be sized by the height and width attributes of the first image.

Creating a Rollover in Dreamweaver

Image rollovers can be created easily in Dreamweaver, thanks to the Rollover Image object (see Figure 6.25). The idea is, instead of inserting a regular image into a document, you insert an image that will automatically turn into another image when rolled over.

Figure 6.25. The Rollover Image object and dialog box.

Follow these steps:

1. Open your document in Design view. In the Common tab of the Insert bar, click the Rollover Image icon, which opens the Insert Rollover Image dialog box (see Figure 6.25).

2. Type a name in the Name field. Images that will be used in a rollover must be named; if you don't name your image, Dreamweaver will assign it a default name.

3. Use the Browse button to browse for the Original image and Rollover image, or type the file name and path for each into the field.

4. Check the Preload Images box if you want this option. (See the next section, for more on preloading.)

5. Provide alternate text in the Alternate Text field. (This will become the primary image's alt attribute.)

6. Use the Browse button to browse to and select the URL to send the visitor to when the rollover image is clicked. If you don't want the rollover to actually send the browser anywhere for instance, if you want the image to trigger a behavior instead of going to a URL enter a number sign (#) in this field.

7. Click OK to insert the rollover image.

Preloading and Rollovers

Normally, the browser downloads page resources including images the first time they appear on a page. Preloading means telling the browser to download an image into its cache before the image will actually be used, so it will be ready and waiting to display promptly when called on.

When a page includes a rollover image, the primary image is downloaded as the page downloads. The secondary image, however, is not needed until a user rolls over the primary image, and so is not downloaded until then. Depending on the user's connection speed, this can cause anything from a brief hiccup to a noticeable delay in the rollover effect happening. The user might move his mouse over an image, and then have to wait several seconds before the secondary image springs into view. Definitely not a good state of affairs.

When you choose the Preload Images option in the Rollover Image dialog box, Dreamweaver writes a JavaScript telling the browser to download the primary and secondary images when the page first loads, thus eliminating that delay. Therefore, it's a good idea to make sure this option is selected when using the Rollover Image object.

Editing Rollover Images

Using the Rollover Image object is actually a shortcut for the more complex Dreamweaver procedure of inserting an image, assigning it a link, and adding a Swap Image and Swap Image Restore behavior to it. After you have inserted a rollover image, it becomes simply an image with a link and a behavior applied (see Figure 6.26). To edit the image and its link, select it and use the Property inspector. To edit the rollover code, select the image and, in the Behaviors panel, double-click the Swap Image behavior. This will give you access to the Swap Image dialog box, from which you can change the secondary image and preloading options (among other things). To learn more about Swap Image, see Chapter 16, "Getting Interactive with Behaviors."

Figure 6.26. A rollover image revealing itself to be a linked image with several behaviors applied.

Exercise 6.5 Create an Image Rollover in Dreamweaver

In this exercise, you'll create a simple rollover button.

1. If you haven't yet, copy the chapter_06 folder from the companion CD into a folder named idmx on your hard drive, and define a Dreamweaver site named chapter_06 with the folder chapter_06 as its root directory.

2. Open a new document and name it rollovers.html. In the Insert bar Common tab, click the Insert Rollover Image icon. The Insert Rollover Image dialog box appears.

3. In the Image Name field, type a name for the rollover image; for this exercise, use news_button.

4. In the Original Image field, click Browse and select from the chapter_06/images directory, the image button_news_up.gif.

5. In the Rollover Image field, click Browse and select button_news_over.gif.

6. Select the Preload Images option so that the images will be preloaded in the browser's cache. This ensures that there is not a delay when the secondary image is called from the server.

7. In the When Clicked, Go to URL field, just type a number sign (#). This is a null link, or a link that goes nowhere but is helpful in situations like this where a link is required; it's used here for simplicity. Any link could be used.

8. Click OK to close the dialog box and insert the code. Save the document and preview in the browser.

9. To see how your rollover image is constructed, select the image. Examine the Image Property inspector and the behaviors in the Behaviors panel.

Navigation Bars

The term navigation bar can refer to any set of links arranged horizontally or vertically on a web page; generally they are a prominent feature of a web site and remain consistent from page to page, providing an easy way for the user to move between pages and files. A navigation bar (or navbar) can be made of text links, linked images, or an image map. A more elaborate type of navigation bar is often made with sets of images which change based on the actions of the user, using JavaScript. Dreamweaver provides the Navigation Bar object to make creating this kind of navbar simple.

Each button or element in a Dreamweaver navigation bar can have up to four states:

• Up. The image shown when the user hasn't yet interacted with the element.

• Over. The image shown when the pointer hovers over the Up image. The element's appearance changes to signal that it is interactive (see Figure 6.27).

  Figure 6.27. The Over image appears when the element is rolled over by the pointer.

  

• Down. When the navbar is in a frameset, this is the image that appears after the user clicks the element. When an element is clicked and a new page loads, the navigation bar, still displayed, shows the clicked element with a changed appearance to signify that it has been selected (see Figure 6.28).

  Figure 6.28. The Down image appears when the element has been selected.

  

• Over While Down. When the pointer is rolled over the Down image, this image appears.

It isn't necessary to include all four states in every navbar. Often just the Up, Over, and Down states are used.

Creating a Navigation Bar

To insert a Navigation Bar with Dreamweaver, follow these steps:

1. Either choose Insert > Interactive Images > Navigation Bar, or select the Navigation Bar object from the Common tab of the Insert bar. The Insert Navigation Bar dialog box appears (see Figure 6.29).

   Figure 6.29. The Navigation Bar object and dialog box.

   

2. Each Element corresponds to a button in the navbar, and each button has up to four states. One by one, name your elements and use the plus (+) button to add them to the navbar. Use the Browse buttons to assign images for the different states.

3. Supply Alternate Text in the field by that name, and use the Browse button to specify the URL to which the user should be sent when the button is clicked in the When Clicked, Go to URL field. Choose the window or frame in which you want the URL to open in the field just to the right of the URL field.

4. Choose Preload Images if you like. (See the discussion on preloading images in the "Rollovers" section of this chapter.) Choose Show Down Image Initially if you would like that particular element to be in its Down state when the page loads. This is appropriate, for instance, on a Home Page, where you would want the Home button to indicate that you are already on the Home page.

5. At the bottom of the dialog box are two more options. Choose to insert your navigation bar horizontally or vertically, and choose whether or not you want HTML tables to be used.

6. Click OK to insert the navigation bar.

Editing a Navigation Bar

After a navigation bar has been inserted, it consists of several images, each of which has several Set Nav Bar Image behaviors applied to it. If you chose to have your navigation bar structured as a table, it will also include a <table> tag (see Figure 6.30).

Figure 6.30. A navigation bar inserted and ready for editing.

You're free to rearrange the images in the navigation bar, adjust the properties of the table that contains them, change the URLs the images link to, and even delete some images, without disturbing the navigation bar.

To edit the entire navigation bar at once, choose Modify > Navigation Bar. This opens the Modify Navigation Bar dialog box, which is very similar to the dialog box you used to create the navigation bar.

To edit the various rollovers that make up the navigation bar, select any image in the group and, in the Behaviors panel, double-click any of the three Set Nav Bar Image behaviors. The dialog box that appears contains two tabs: The Basic tab lets you adjust the rollover settings for the currently selected image; the Advanced tab lets you set some very fancy image changes for the other images in the navigation bar, based on what's happening to the selected image. (See Figure 6.31.)

Figure 6.31. The Basic and Advanced tabs of the Set Nav Bar Image behavior dialog box.

Exercise 6.6 Creating a Navigation Bar with Dreamweaver

Dreamweaver makes building a navbar easy, but you still have to create the images needed. You'll need an image for each element (or button) in each state. In this exercise, you make a navigation bar using all 4 states for each of 4 buttons; the 16 images needed are already in your chapter_06/images folder. In Exercise 6.7, you'll place the same navbar on other pages so that you can see the Down and Over While Down states in action.

1. If you haven't yet, copy the chapter_06 folder from the companion CD to your hard drive, and define a Dreamweaver site named chapter_06 with the folder chapter_06 as its root directory.

2. Open a new blank document and name it seasons.html.

3. From the Dreamweaver main menu, choose Insert > Interactive Images > Navigation Bar. This opens the Insert Navigation Bar dialog box. You'll insert four buttons: Winter, Spring, Summer, and Fall. Each has four states.

4. For the first item in the navigation bar, start with the Element Name field, and type in Winter.

   For Up Image, click Browse and, from the images folder, choose winter_up.gif. For Over Image, click Browse and choose winter_over.gif. For Down Image, click Browse and choose winter_down.gif. For Over While Down Image, choose winter_overdown.gif. For When Clicked, Go to URL, click Browse and choose winter.html.

5. Then click the plus (+) button at the top of the dialog box to add another button.

6. Repeat step 5 to create the Spring button. Continue adding items and filling in fields to create the Summer and Fall buttons.

7. Select Preload Images and choose Insert Horizontally. Then click OK to insert the navbar into the document.

   Tip

   

   In the Insert Navigation Bar dialog box, you can select an element and use the up-pointing and down-pointing triangle icons near the top of the box to change the order of the elements in the navbar.

8. Save and preview in the browser (see Figure 6.32). You can see how the Over state works; however, because the pages you have linked to don't exist yet, you'll get a Page Not Found message when you click the links. Just use your browser's Back button to return to the Seasons page. In Part II, "Design with Dreamweaver," you'll create the linked pages so that you can see the Down and Over While Down states in action.

   Figure 6.32. Previewing the navigation bar in seasons.html.

   

Exercise 6.7 Using a Navbar Across Multiple Pages

In this exercise, you'll place the navbar you created in Exercise 6.6 on three other pages.

1. Open seasons.html.

2. Choose File > Save As, and save the file with a new name, winter.html. Change the page title to Winter. Choose Modify > Navigation Bar to open the Modify Navigation Bar dialog box.

3. In Navbar Elements, select winter. At the bottom of the box, select Show "Down Image" Initially and click OK. Save.

4. Open seasons.html again and repeat steps 2 and 3, naming the new page spring.html, changing its title, and in the Modify Navigation Bar dialog box, select Spring and select Show "Down Image" Initially.

5. Open seasons.html again and repeat steps 2 and 3 again, creating summer.html.

6. Open seasons.html again and repeat steps 2 and 3 again, creating fall.html.

7. Preview seasons.html in the browser.

Each page should show the Over state when the pointer rolls over the image, and the page for each particular season should display the appropriate button in a darkened state. When you're on the Spring page and you roll over the darkened Spring button, you'll see the Over While Down state (see Figure 6.33).

Figure 6.33. The spring.html page as it appears in a browser demonstrating the Down (top) and Over While Down (bottom) states of the navigation bar.

Summary

Hyperlinks are an essential and defining feature of the World Wide Web, and a skillfully designed navigational system is one of the highest priority considerations in the creation of a web site. In this chapter, you learned about linking URLs and about how links appear in the browser and what these appearances say to the user. You looked at email links and named anchors, and tried out several widely used types of navigation controls: image maps, jump menus, linked rollover images, and multistate navigation bars. A web developer familiar with these techniques has some excellent tools to choose from when planning the structure and navigation of a new web site.

CONTENTS