Navigation Methods and Tools

[ LiB ]

Using links involves a lot more than just pointing images and text to other web pages. Named anchors, image maps, and jump menus all provide alternative means of linking. Rollovers and navigation bars make simple graphic links into interactive page elements. And Dreamweaver lets you build them all.

Named Anchors

Isn't it nice when you visit a website 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? You may have seen this on a FAQ page, where you can click a frequently asked question and read only the answer to that particular question. When you make a link to a specific place in a documentrather than just linking to the document itselfyou are creating what's called a named anchor link .

How Named Anchors Work

In HTML, a named anchor is an a tag with no href , but with a name attribute:

 <a name="outerspace"></a>

The named anchor itself is invisible. But other text or image links can link to it by including its name in their href attributes:

 <a href="#outerspace"> <a href="destinations.html#outerspace"> <a href="http://www.rocketlaura.com/destinations.html#  outerspace">

The first of these examples links to a named anchor in the current document (# means "in this document"). The second two link to a named anchor in another document, referenced with a relative or absolute URL. If the outerspace anchor is located halfway down the page in the destinations.html file, all links will open that page and cause the browser window to scroll halfway down.

Creating Named Anchors

To create a named anchor in Dreamweaver, follow these steps:

In the Document window, in Design view, place the insertion point where you want the named anchor.
From the Insert bar (Common category), select the Named Anchor object or choose Insert > Named Anchor (see Figure 6.9).

Figure 6.9. Inserting a named anchor.
In the dialog box that appears, type a one-word name for the anchor and click OK.

If you have invisible elements set to show, the anchor marker appears in Design view at the insertion point (see Figure 6.10). If you don't see the anchor marker, choose View > Visual Aids > Invisible Elements (or the Visual Aids submenu in the Document toolbar's View Options menu). The little gold anchor icon might look as if it has moved 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.

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

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.

Linking to Named Anchors

Dreamweaver gives you several options for linking to named anchors.

Using the Property Inspector: Select the text or image from which you want to create the link. If the anchor is within the current document, just type the pound sign (#) followed by the anchor name into the Link field (see Figure 6.11). If the anchor is in a different file, enter the file path (by typing or browsing for it) and then type # followed by the anchor name.

Figure 6.11. Using the Property Inspector to link to a named anchor.

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, click the Point-to-File icon, and drag it to the anchor marker on the page (see Figure 6.12). You can use Point-to-File to link to an anchor in another document, as long as both documents are open. Just point to the other document (which activates it) and then to the anchor within it.

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

Image Maps

An image map is a graphic image that has various "hotpots" that 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 Dulles International Airport site uses a map of the terminal for navigation.

How Image Maps Work

Two types of image maps exist: 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 the loading of the linked pages considerably. Client-side image maps contain all the mapping information in the same HTML file in which the image resides. Client-side image maps are preferable for several reasons:

Links are resolved more quickly because there is no need for the information to be accessed from a remote server.
The user can be shown the destination URL when mousing over a hotspot.
Image maps can be tested locally.

The code for a client-side image map consists of two parts : the img tag, with a usemap attribute linking it to the map, and a map tag that contains the coordinates. It looks like this:

 <img src="images/library.jpg" width="534" height="120"  border="0" usemap="#libmap"> <map name="libmap">   <area shape="rect" coords="41,23,196,85" href="page1.html">   <area shape="rect" coords="205,25,350,87" href="page2.html"> </map>

The map tag can be anywhere within the document's body section; it doesn't have to sit anywhere near the img tag.

Creating an Image Map

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.

To create an image map in Dreamweaver, follow these steps (see Figure 6.14):

Figure 6.14. The Image Property Inspector showing the Map tools.

In the Document window, select the image you want to make into an image map.
In the Map area of the Image Property Inspector, type a unique, one-word name for the image map.
Define the image map hotspots by using one or more of the Hotspot tools. Notice there are multiple tools to create all kinds of hotspots.

To draw rectangular or circular hotspots, select the relevant hotspot drawing tool and drag the pointer over the image in the Document window to create a rectangular or circular hotspot.

Polygonal hotspots can be fun to create, but don't get carried away. Compared to a square or circle, it takes a lot of code to describe the geometry of a fiddly polygon. That can slow your page display.

Creating polygonal hotspots is a bit trickier. To use the polygon tool, select the tool and, in the Document window, click once over the image for each corner point of the desired polygon-shape hotspot. Finish by returning to the Property Inspector and clicking the Arrow tool (in the Map section) to close the shape. It's crucial to officially finish drawing the polygon hotspot by clicking the arrow tool. If you don't do this, every mouse click that 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.

New to Dreamweaver MX 2004, you can also choose one of the hotspot objects from the Images group in the Common Insert bar.

Working with Hotspots

After you create a hotspot in Dreamweaver, you can select it and 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 button (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 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.

Exercise 6.1. Creating an Image Map in Dreamweaver

In this exercise, you create a simple image map using Dreamweaver. Before you begin, download the chapter_06 folder from the companion website at www.peachpit.com to your hard drive and define a Dreamweaver site named Chapter 6 with the folder chapter_06 as its root directory.

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 .
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.

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.17), and press Enter or Tab (or click anywhere in the Document window) to activate the Property Inspector change.

Figure 6.17. The Hotspot Property Inspector for the Home link, with the link and alt information filled in.

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.

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.

Jump Menus

A jump menu is a form select item that displays as a drop-down list of options. Clicking an option is the equivalent of clicking any other kind of link. 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.18).

Figure 6.18. A jump menu in action.

For more about form objects, see Chapter 9, "Working with Forms."

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 activates the link.

Jump menus are best used in specific applications. 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 (see Figure 6.19):

Figure 6.19. Inserting a jump menu.

Open your document in Design view and position the cursor where you want the jump menu to appear.
In the Insert bar, go to the Forms category and choose the Jump Menu object, or choose Insert > Form > Jump Menu.
When the Insert Jump Menu dialog box opens, 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 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 JavaScriptin the guise of the jump menu or Jump Menu Go behaviorto 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.20).

Figure 6.20. A jump menu as it appears in Design and Code view.

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. Therefore, 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 an associated Go button. A Go button is a form button labeled Go, which activates the jump menu when it's clicked.

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

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.

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.19).

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.21). Whether the jump menu reverts is determined by the Select First Item After URL Change option in the Insert Jump Menu dialog box.

Figure 6.21. 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 the 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.22). 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 want (so that several entries appear at once), you can edit the destinations from here by clicking the List Values button.

Figure 6.22. 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 that the behavior will execute any time the menu selection is changed.) Double-click that behavior, and the Jump Menu behavior dialog box opens. This dialog box is almost identical to the Insert Jump Menu dialog boxit's missing only the Menu Name and Insert Go Button options, which can be defined only when the jump menu is created.

Playing with Go Buttons

If you created your jump menu with a Go button, the button has the Jump Menu Go behavior applied, to be triggered by 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 that you don't want a Go button after all, you can safely select and delete your Go button at any time.

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

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.)
Using the Property Inspector, set the button's label to Go.
Select the button and, from the Behaviors panel, assign the Jump Menu Go behavior to it.

Go buttons don't have to be form buttons. Any page element that can have a link applied to itincluding text links and imagescan 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. However, if you want your menu to activate only if visitors first make a selection and then click the Go button, do this:

Create the jump menu with a Go button, or use the previous instructions to add a Go button later.
Go to Code and Design view. In the Design portion of the Document window, select the jump menu.
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 is 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 anymore, so you won't be able to use the Behaviors panel to edit its behaviors.

Rollovers

With all the new and creative site designs, how does a visitor understand when something is a hyperlink? Typically, a navigation link will change in some way when the cursor is over it. For example, a text link might change color or size or change from normal to bold. By making some sort of visual change in the link, the link is saying "I'm clickable!" This type of feature is known as a rollover and is usually applied to images.

A rollover actually consists of two images: the primary image , or up image, which displays when the page first loads; and the secondary image , or over 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 take on the dimensions of the primary image.

Creating a Rollover in Dreamweaver

Image rollovers can be created easily in Dreamweaver, thanks to the Rollover Image object. If you want to create a rollover, you insert an image that automatically turns into another image when the cursor is placed on it.

To insert a rollover image, just follow these steps (see Figure 6.23):

Figure 6.23. Inserting a rollover image.

With your document open in Design view, place the insertion point where the image should be inserted. In the Insert bar (Common category), from the Images objects, choose the Rollover Image object.
The Insert Rollover Image dialog box opens. 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.
Use the Browse button to browse for the Original (Up) image and Rollover (Over) image, or type the filename and path for each into the field.
Check the Preload Images box if you want this option. (See the next section for more on preloading.)
Provide alternate text in the Alternate Text field. (This becomes the primary image's alt attribute.)
Use the Browse button to browse to and select the URL to send the visitor to when the rollover image is clicked, or enter javascript:; for a null link if the link shouldn't go anywhere.
Click OK to insert the rollover image.

Preloading and Rollovers

Normally, the browser downloads page resourcesincluding imagesthe first time they appear on a page. This means that your Up image is downloaded, but because your Down image is not displayedand possibly will never be displayedit is not downloaded. When someone places the cursor on your up image, the over image is fetched . This can take time, ruining the entire rollover effect. Your user might move the mouse off the up image before the over image ever gets a chance to display! If you preload the over image, that second image is ready and waiting to be displayed. It's possible that it will never be called upon. That doesn't matter. If it is called upon, it will display immediately. When you choose the Preload Images option in the Rollover Image dialog box, Dreamweaver writes 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.24). 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 gives you access to the Swap Image dialog box, from which you can change the secondary image and preloading options (among other things).

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

To learn more about Swap Image and how behaviors work, see Chapter 13, "Interactivity with Behaviors."

Navigation Bars

The term navigation bar can refer to any set of links arranged horizontally or vertically on a web page. Generally, these are a prominent feature of a website 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 that 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. Two states determine the standard rollover functionality (see Figure 6.25):

Figure 6.25. The Up and Over states of an image in a navigation bar.

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.

Two other states determine how the image will appear when the page it links to is currently being displayedfor instance, what should the Home button look like on the home page? They are (see Figure 6.26):

Figure 6.26. The Down and Over While Down states of an image in a navigation bar.
Down When the navbar doesn't actually navigate among multiple pages (usually this occurs when it's 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.
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 create a navigation bar, you first need to oil up your web graphics program and create the graphics you'll need for whatever button states you plan to use. Then come back to Dreamweaver, open a document, place the insertion point where the navigation bar should appear, and do this (see Figure 6.27):

Figure 6.27. Inserting a navigation bar.

In the Common Insert bar, from the Images objects, choose the Navigation Bar object or choose Insert > Image Objects > Navigation Bar from the menu.
The Navigation Bar dialog box appears. 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.
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.
Choose Preload Images if you want. (See the discussion on preloading images in the "Rollovers" section of this chapter.) Choose Show Down Image Initially if you want 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.
At the bottom of the dialog box are two more options. Choose to insert your navigation bar horizontally or vertically, and choose whether you want HTML tables to be used.
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.28).

Figure 6.28. 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.29).

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

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.

Exercise 6.2. 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.3, you'll place the same navbar on other pages so that you can see the Down and Over While Down states in action.

If you haven't yet, download the chapter_06 folder from the companion website to your hard drive, and define a Dreamweaver site named Chapter 6 with the folder chapter_06 as its root directory.
Open a new blank document and name it seasons.html .
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.
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.
Then click the plus (+) button at the top of the dialog box to add another button.
Repeat step 5 to create the Spring button. Continue adding items and filling in fields to create the Summer and Fall buttons.
Select Preload Images and choose Insert Horizontally. Then click OK to insert the navbar into the document.
Save and preview in the browser (see Figure 6.30). 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, "Designing with Dreamweaver," you'll create the linked pages so that you can see the Down and Over While Down states in action.

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

Exercise 6.3. Using a Navbar Across Multiple Pages

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

Open seasons.html .
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.
In Navbar Elements, select winter. At the bottom of the box, select Show "Down Image" Initially and click OK. Save.
Open seasons.html again and repeat steps 2 and 3, naming the new page spring.html and changing its title. In the Modify Navigation Bar dialog box, select Spring and select Show "Down Image" Initially.
Open seasons.html again and repeat steps 2 and 3 again, creating summer.html .
Open seasons.html again and repeat steps 2 and 3 again, creating fall.html .
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.31).

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