[ 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.
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 .
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.
To create a named anchor in Dreamweaver, follow these steps:
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.
![]() | 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. |
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.
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.
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.
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.
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):
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. |
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.
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).
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.
![]() | 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. |
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).
![]() | 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.
Dreamweaver makes creating jump menus simple. Just follow these steps (see Figure 6.19):
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).
![]() | 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. |
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.
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.
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.
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.
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.
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:
![]() | 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:
<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.
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.
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):
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.
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).
![]() | To learn more about Swap Image and how behaviors work, see Chapter 13, "Interactivity with Behaviors." |
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):
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):
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.
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):
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).
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).
![]() | 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. |
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.
In this exercise, you'll place the navbar you created in Exercise 6.2 on three other pages.
[ LiB ] |