Macromedia® DreamWeaver® MX Unleashed By Matthew Pizzi, Zak Ruvalcaba
Table of Contents
Chapter 4. Dreamweaver MX Essentials
With named anchors, you can link to specific areas of a document. A named anchor is an invisible element you can insert into an HTML document. You can then hyperlink something in your document to that specific anchor, moving the document to display the area around the anchor.
Linking to a Named Anchor
Follow these steps to link elements on a Web page to a named anchor. You can download the file used in this exercise from this book's companion Web site located at http://www.dreamweavermxunleashed.com.
Open the anchor.html file you downloaded from the companion Web site. Notice the different headings and paragraphs. Toward the bottom of the page, you'll notice I set up a simple text navigation bar, as shown in Figure 4.32.
Figure 4.32. This document has a navigation bar set up toward the bottom of the page.
Place a blinking cursor next to the Introduction subheading. The blinking cursor represents the location where the named anchor will be placed. Click the Insert Named Anchor button under the Common object in the Insert Panel, or choose Insert, Named Anchor. This launches the Named Anchor dialog box, as shown in Figure 4.33.
Figure 4.33. The Name Anchor dialog box offers the capability to name your named anchors.
Type in the name of the anchor. Avoid spacing and special characters in your naming conventions. Additionally, named anchors are case sensitive, so you must remain consistent when naming. Click OK when you've completed typing in the name. You'll notice a small anchor shield appear on your document. This symbol represents an invisible element. This icon will not appear in a browser. You can move this element wherever you think it will cater to the functionality of the link. Do not place an anchor within a layer; the anchor will fail in Netscape browsers.
WARNING
If you do not see the named anchor appear, choose View, Visual Aids, Invisible Elements; this will make the icon appear in the document.
Move to the bottom of the page. Highlight the Intro text in the navigation bar. You want to link this Intro text to the named anchor toward the top of the page. With the text selected, notice there is the link text field in the Properties Inspector. Click and drag the Point-to-File icon on the right side of the link text field. Drag until the icon is about a quarter of an inch from the top of the document window and the document will begin to autoscroll. When the top of the page is visible, move the Point-to-File icon on top of the named anchor. Notice the link is automatically filled out in the Properties Inspector, as shown in Figure 4.34.
Figure 4.34. You can drag the Point-to-File icon over the named anchor and Dreamweaver will complete all the hyperlink information in the Properties Inspector.
You can also just type the name of the anchor into the link text field, as long as you place the pound sign (#) in front of the named anchor's name. The pound sign converts an item in a Dreamweaver document into a hyperlink.
You can even link to a named anchor from another page. Simply add #anchorname to any normal hyperlink.
TIP
Visit the companion Web site at http://www.dreamweavermxunleashed.com for a QuickTime movie tutorial on how to use named anchors.
