4/08/2007

Anchors Away: Using Name Anchors

When a document is long or has many sections, you might need to create a series of links that will jump the user to specific places within the document. This technique eliminates the need for the viewer to scroll through long passages of text. It is also an easy way to set up subheading navigation in your website.

A named anchor marks the place in the page to which a link jumps. A named anchor is simply an HTML anchor tagged pair (<>.....< / a>) that includes a name attribute. The named anchor serves as a target for links, allowing links to the middle of a page or wherever the named anchor is located within the document.

Resources: (How to Use a Name Anchor)

This is the easiest way to learn to use name anchors via this video tutorial. Please note it does require Quicktime:
Photoshop Support Video

Down and Dirty Notes:

To add an anchor tag to your page:

  1. Place your cursor at the point where you want to add an anchor.
  2. Click the yellow anchor icon or select Insert > Named Anchor from the Dreamweaver menu. (On the "Common" toolbar, click the named anchor icon--it looks like an anchor).
  3. Give the anchor a name (do not use spaces in the name).
  4. Click OK to add the anchor to the page.
  • Note: You'll see a yellow, anchor icon where your cursor was (you can drag it to a different place in your document, later, if you like).
To link to an anchor tag:
  1. Highlight the text or select the image you want to use as the link.
  2. In the Properties panel, locate the text box next to the word Link and do one of the following:
  • Type the pound sign (#) followed by the name of the anchor (ie "#about us")
OR
  • Using the target icon to the right of the Link text box, click-hold and drag to the anchor icon on the page. Once the anchor is highlighted, let go. This will populate the Link text box with the pound sign followed by the anchor name.

No comments: