Using Named Anchors

This tutorial will show you how to use named anchors to link within a web page in Dreamweaver CS5.

Although the links we've looked at so far link to other pages and sites, it's also possible to link to another position on the same web page.

It's usually the case that when visitors first arrive at a page they are positioned somewhere near the top, and from there they navigate their way to the place in the page they want to be. We can make that easier for them by providing hyperlinks to important or useful places on a page so that they don't have to scroll down the page, searching for what they want.

This is done by using named anchors, which are basically tools used for navigation. The HTML tags used for named anchors are the <a> and </a> pair, and when we look at code these appear very frequently.

Let's return to our Sydney page again. Later in the document there is a section on visa information for visitors to Australia.

Place the cursor just before the word Visa in then heading.

Now choose Named Anchor from the Insert menu.

The Named Anchor dialog appears.

It's only necessary to give the anchor a name, although the name must be unique on the page. I've called it VisaInfomation.

Click OK and the anchor is created.

Note the anchor icon that indicates its position. As we saw earlier, this icon will not appear on our published web pages, and is only there to help us as we work on developing and maintaining them.

Now let's go back to the top of the Sydney Page and put a link to the named anchor there.

I've now added some text, and selected a few words that the user will need to click on to go to the anchor.

With those words selected, I can put the name of the named anchor in the Link box in the Properties Panel. Note that then anchor name needs to be preceded by a # sign and must agree exactly with the name of the anchor.

We can now test the link using Preview in Browser. All should be OK!

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Using Named Anchors in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!