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 that page? See Figure 5-10 for an example. You can do so two ways: by using HTML’s named-anchor property or by adding an ID to the target section. The named-anchor method has been around since the earliest days of the Web; it uses a special type of link designed to auto-scroll to a particular spot on a page. The ID technique, while newer, works with all current web browsers; here, you give the destination spot on the page a unique ID. You’ll learn about both methods below.

Method 1: Creating a Named Anchor

Creating a named-anchor link is a two-step process: First you add and name an anchor to the page you want to link to, thus identifying the destination for the link; then you add a link that goes to that named anchor. For instance, in the Table of Contents example shown in Figure 5-10, you’d add a named anchor at the beginning of each chapter section.

To create a named anchor:

  1. In the document window, click the spot where you want your visitors to end up.

    You want to add a named anchor here.

  2. Insert a named anchor.

    You can do so using any of three methods: Choose Insert→Named Anchor; press Ctrl+Alt+A (⌘-Option-A); or, from the Insert bar, select the Common category and click the Named Anchor icon (see Figure 5-7).

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

    Give each anchor a unique name (something ...

Get Dreamweaver CS5: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.