O'Reilly logo

Dreamweaver 8: The Missing Manual by David Sawyer McFarland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Linking Within a Web Page

Clicking a link usually loads a Web page into the browser window. But what if you want to link not only to a Web page, but to a specific spot on the page? See Figure 4-8 for an example.

Introducing the named-anchor link, a special link type that's designed to autoscroll to a particular spot on a particular page.

Phase 1: Creating a Named Anchor

Creating a named-anchor link is a two-step process: First add and name an anchor on the page that you're linking to, thus identifying the destination for the link; then, add a link that goes to that named anchor. For instance, in the Table of Contents page example shown in Figure 4-8, you would place a named anchor at the beginning of each chapter section.

Some pages may have a lot of information that you'd prefer not to break up into several different Web pages. To make it easy for visitors to jump to a location farther down on the page, you might have a list of contents for that page, which, when clicked (left), jumps down the page to the appropriate section (right).

Figure 4-8. Some pages may have a lot of information that you'd prefer not to break up into several different Web pages. To make it easy for visitors to jump to a location farther down on the page, you might have a list of contents for that page, which, when clicked (left), jumps down the page to the appropriate section (right).

To create a named anchor:

  1. In the document window, click where you want to insert the named anchor.

    The named anchor is the place where you want the link to jump to.

  2. Insert a named anchor.

    You can do so using any of three methods: Choose Insert Named Anchor; press Ctrl+Alt+A (

    image with no caption

    -Option-A); or from the Insert bar, select the Common tab and click the Named Anchor icon (see Figure 4-6).

  3. Type the name of the anchor in the Insert Named Anchor dialog box.

    Each anchor on a page should have a unique name, something short and easy to remember. No spaces or punctuation marks are allowed. If you violate any of these rules, Dreamweaver will remind you with an error message and strip out any of the offending characters.

  4. Click OK to insert the named anchor.

    You'll see a gold shield with an anchor on it at the point where you created the anchor. Click this icon to show the name of the anchor in the Property inspector. (If you don't see it, see Section 4.4.3 for details on hiding and showing anchors.)

The Named Anchor icon (the gold shield) is the key to removing or editing the anchor later: just click the icon and press Delete to get rid of it, or click it and change its name in the Property inspector. (Deleting the name in the Property inspector deletes the anchor from the page.)

Phase 2: Linking to an Anchor

Creating a link to a named anchor isn't all that different from linking to a Web page. Once you've created and named an anchor, you can link to it from within the same Web page, or from a different page.

To link to an anchor on the same page:

  1. In the document window, select the text or image you want to make into a link.

    For example, drag across some text, or highlight a graphic.

  2. In the Property inspector's Link field, type #, followed by the anchor name. (Alternatively, use the Point-to-File icon, as shown in Figure 4-9.)

    The # sign indicates that the link goes to a named anchor. In other words, if you wish to link to an anchor named directions, the link would be #directions.

You can use the Property inspector's Point-to-File icon to link to a named anchor on a page. Simply select some text or an image in an open page. Then drag the Point-to-File icon to an anchor on any other open document to set the link. If you can't see the shield icons that mark anchors, see Section 4.4.3 for instructions on how to make them visible.

Figure 4-9. You can use the Property inspector's Point-to-File icon to link to a named anchor on a page. Simply select some text or an image in an open page. Then drag the Point-to-File icon to an anchor on any other open document to set the link. If you can't see the shield icons that mark anchors, see Section 4.4.3 for instructions on how to make them visible.

You can also link from one Web page to a particular location on another Web page in your site. The process is the same as linking to an anchor on the same page, except that you have to specify both the path to the Web page and the name of the anchor:

  1. In the document window, select the text or image you want to turn into a link. In the Link field of the Property inspector, type or choose the URL or path of the page you wish to link to.

    You can use any of the methods described above: browsing, point-to-file, or typing the path. Unfortunately, if you browse to select the linked file, Dreamweaver doesn't display any anchors on that page, so you need to perform one extra step.

  2. Click at the end of the URL or path. Type #, followed by the anchor name.

    The Link field should look something like this: contact.html#directions.

Viewing and Hiding Anchors

A named anchor isn't visible in a Web browser; it appears in Dreamweaver as an anchor-on-a-gold-shield icon. Like other invisible elements—line breaks, for instance—you can hide named anchors in Dreamweaver by choosing View Visual Aids Invisible Elements, or choosing Visual Aids Invisible Elements from the Visual Aids menu in the toolbar (see Figure 8-8 on Section 8.5). (If anchors still don't appear, visit the Preferences window, pictured in Figure 1-8, and in the Invisible Elements category, make sure the Anchor box is turned on.)

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required