Creating Anchor Links

Objectives: To learn how to create and target anchor links in your web site pages using Dreamweaver MX.
Tools & Techniques: Links, Anchor Links, Property inspector, Point to File
Preview final example (Test the menu links at the top of the page and then the "Back to Top" links on the right hand side of the page to jump back to the top of the page.)

Step 1: Getting Started

Personally, I don't use anchor links a lot since I typically don't design long web pages. That said, they are still very useful and perfect for certain types of web sites. Places I find anchor links frequently used are government sites.

For this lesson, we'll start with an HTML page that already has content and just needs the anchors added. I'm using the printed version of one of our Flash tutorials.

We'll start out by adding some new links at the top of the page and then create anchor links to each corresponding item on the page.

Step 2: Inserting the Anchors

Since we're creating links to each of the steps in this lesson, I'll start by inserting an anchor link to Step 1.

1. Place your cursor in front of the "S" in Step 1. This is where the first link will jump to when clicked
2. Insert > Named Anchor or, click the Named Anchor icon on the Insert Bar
3. Enter a name for the anchor in the "Insert Named Anchor" dialog window
4. Continue adding new anchors for each of the steps or areas in your HTML page

If you don't see the anchor after you inserted it, go up to View > Visual Aids > Invisible Elements to turn on your invisible elements.

Step 3: Targeting the Anchor Links

1. Once you've inserted your anchors, you're ready to create the links
2. Select the text or image to which you want to assign the link. In this case I'm assigning it to my text links.
3. Highlight the first text link by clicking and dragging to select the entire word
4. Click the Point to File button on the Property inspector and drag it to the first anchor you created

That's it! Just continue highlighting the remaining links, select the Point To File button and drag it to the next anchor.

In the Property inspector you'll notice in the Links field the anchor link is specified. The only addition is the pound sign (#) that is in front of the link's name. This is the code used to target the anchor links.

Rather than using the Point to File method to target your anchor links, you could simply click and drag to select the text and then type in the anchor link's name in the Property inspector. Just be sure to type in the pound sign (#) before you type the name.

Anchor links are case sensitive so be careful if you type them in by hand. I typically prefer to type them directly into the Property inspector as it's faster. Again, don't forget the pound sign before the link's name.

source::cbtcafe.com/dreamweaver/anchor/index.html