Dreamweaver CS6: The Missing Manual

Linking Within a Web Page

Clicking a link usually loads a web page into the browser window. However, what if you want to link not only to a web page but to a specific spot on that page? You’ll see this frequently on long web pages, where links at the top of the page let visitors jump down to specific content lower on the page; see Figure 4-10 for an example. You can create in-page links two ways: by using a named-anchor 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. With the ID technique, you give the destination spot a unique ID and then link to that ID. Although this method is newer, it works with all current web browsers. 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 an anchor to a spot on a page and name it, 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 4-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 toolbar, select the Common category and click the Named Anchor icon (see Figure 4-7).

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

   Give each anchor a unique name (something short and easy to remember). HTML doesn’t allow spaces or punctuation marks, and if you include any, Dreamweaver displays an error message and strips out the offending characters.

4. Click OK to insert the anchor.

   Dreamweaver displays a gold shield with an anchor icon in it. Click this icon to see the name of the anchor in the Property Inspector. (If you don’t see it, see Linking to an Anchor or ID 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.)

Figure 4-10. To make it easy for visitors to navigate long web pages, you might list the contents for that page first and add anchor links for each entry so that, when a visitor clicks a link (left), she jumps to the appropriate section of the page (right).

Method 2: Adding an ID

Instead of adding a Named Anchor, you can assign an ID to the destination spot on a page. For example, if you want to link to a subhead way down on a page (a Heading 2, or <h2> tag, for example), you can assign an ID to that heading. For text, you add an ID by clicking anywhere inside a paragraph and, in the Property Inspector’s ID box, type the name you want to use. As with Named Anchors, you can’t use spaces or punctuation marks.

For non-text elements, like images or tables, select the tag (the Tag Selector discussed on The Insert Panel is the best way), and type a name in the ID box on the left side of the Property Inspector.

One other You might use IDs in another context, to identify and style discrete sections of your page by adding an ID to a tag and then styling the page using CSS (see Types of Styles for more on ID styles). The good news is you can use that same ID name for both purposes. You can add an ID to a tag whether you style the tag or not; if you decide to style the tag later, you can use the same ID name in the style sheet.

Linking to an Anchor or ID

Creating a link to a Named Anchor or ID isn’t all that different from linking to a web page. Once you create and name an anchor or add an ID name to a tag, you can link to it from within the same web page or from a different page.

To link to an anchor or ID on the same page:

1. In the document window, select the text or image you want to turn 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 or ID name.

   The # sign indicates that the link goes to an anchor or ID. So, to link to an anchor named directions, you’d type in #directions.

You can also link from one web page to a particular location on another web page in your site. You need to first add a Named Anchor or ID to the destination page. Then the process is the same as linking to an anchor on the same page, except that you have to specify not only the anchor name, but also the path to the web page as well.

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

   You can use any of the methods described above: browsing, point-to-file, or typing in the path name. Unfortunately, if you browse to select the destination file, Dreamweaver doesn’t display any of the anchors or IDs 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 or ID’s name.

   In the end, 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. (If anchors don’t appear, visit the Preferences window and, in the Invisible Elements category, make sure you have the Anchor checkbox turned on.)

Tip

If Dreamweaver displays Named Anchors and you’d prefer to hide them, turn off the Anchor box in the Invisible Elements category. To hide all invisible elements, choose View→Visual Aids→Invisible Elements, or choose Visual Aids→Invisible Elements from the Visual Aids menu in the toolbar (see Figure 9-12).

However, if you link within a page using an ID, Dreamweaver doesn’t display any gold shield at all. That’s because Dreamweaver never displays ID names in Design view, and there’s no way to change that.

FREQUENTLY ASKED QUESTION: Anchors Away

When I click a link to an anchor or ID, the web browser is supposed to go to the page and display the anchor or the tag with the specified ID at the top of the browser window. But sometimes the linked-to spot appears in the middle of the browser. What’s that about?

Web browsers can’t scroll beyond the bottom of a web page, so if you have an anchor or ID near the bottom of a page, the browser can’t pull the page all the way up to the anchor point.

If one of your own web pages exhibits this problem and it really bothers you, the fix is simple: create a style for the <body> tag and add bottom padding (Understanding the Box Model). This adds space after the last bit of content on the page, so browsers can scroll the page all the way to the anchor.