Anchor Creation and Linking in Adobe CS5 Dreamweaver - dummies

Anchor Creation and Linking in Adobe CS5 Dreamweaver

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver supports creating anchors on your web page. Anchors are a link to a specific section of a page, on either the same page as the link or another page entirely. You’ve probably seen and used anchors, for example, when clicking a Back to Top button. Anchors are extremely helpful to viewers and should be implemented whenever possible.

To create a simple anchor in Dreamweaver, follow these steps:

  1. Insert the cursor in a location on the page that you want to link to.

    The anchor may be placed before a line of text or on its own line.

  2. Click the Named Anchor button in the Common category of the Insert panel.

    You can avoid clicking the Anchor button by using the keyboard shortcut Ctrl+Alt+A (Windows) or Command+Option+A (Mac).

  3. Type a short name that’s relevant to the content or location on the page (for example, TopOfPage).

    Anchors are case sensitive, so keep this in mind when deciding on a name.

  4. Click OK.

    The new anchor appears in your page.

    Top: Create a simple anchor name in the Named Anchor dialog box. Bottom: The completed anchor.
    Top: Create a simple anchor name in the Named Anchor dialog box. Bottom: The completed anchor.

You’ve created the anchor but have no links directed to it yet. You can define an anchor as a link manually, via Property inspector or by using the Point to File tool

Manual anchor linking

By manually linking to an anchor, you can link within the page you’re working on or direct the link to an anchor on a completely different page.

  1. Select the text that will become the link.

  2. If the Property inspector isn’t open, choose Window→Properties.

  3. Select the text that you want to link to your new named anchor and click the Hyperlink button located on the Insert panel.

  4. In the Hyperlink dialog box, locate the Link field and click the drop-down list directly next to it.

    Your named anchor appears as a selection.

  5. Select your anchor to apply it and then click OK.

    Select the anchor name in the Hyperlink dialog box.
    Select the anchor name in the Hyperlink dialog box.

Property inspector anchor linking

You can also link to a page and add an anchor reference to it from the Property inspector. For example, if you want to link to this spot from another page, you select an element on that page and in the Link text box (in HTML view) type the name of the page, a pound sign (#), and the name of the anchor — for example, birds.html#canary.

This action directs the browser to the birds page and then to the canary anchor within that page.

Frequently, you see anchors separated by the pipe sign (|). You can create this type character by pressing Shift+. The backslash key is directly above the Enter (Windows) or Return (Mac) key.

Point to File anchor linking

You can use the same cool Point to File icon you used earlier to create hyperlinks for creating anchors. The Point to File icon in the Property inspector can also target anchors you’ve created on your page.

  1. Select the text you want to use as a link on your page.

  2. In the Property inspector, find the Point to File icon located next to the Link field, click and drag over the icon, and release the arrow directly over an anchor icon on your page.

    The text is now linked to the anchor, and the anchor’s name appears in the Property inspector’s Link text field preceded by a pound sign (such as #canary).