Dreamweaver MX: 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.
- Place your cursor in front of the "S" in Step 1. This is
where the first link will jump to when clicked
- Insert > Named Anchor or, click the Named
Anchor icon on the Insert Bar
- Enter a name for the anchor in the "Insert Named
Anchor" dialog window
- 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
- Once you've inserted your anchors, you're ready to create
the links
- Select the text or image to which you want to assign the
link. In this case I'm assigning it to my text links.
- Highlight the first text link by clicking and dragging to
select the entire word
- 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.
|
