How to Hyperlink in Macromedia to Anchor on the Next Page

Anchor links help visitors find information on lengthy pages with lots of content.

Creating an anchor on a Web page and hyperlinking to the anchor from another page automatically opens the page at the correct position when a reader clicks on the link. Anchor links help readers to navigate websites and find relevant information quickly. You can create an anchor on a Web page and link to it from another page with the Macromedia Dreamweaver -- now called Adobe Dreamweaver -- website design program’s link insertion tool.

Instructions

Create the Anchor

1. Launch Adobe Dreamweaver. Open the page on which you want to add the anchor.

2. Scroll to the correct position on the page, and highlight the text heading or subheading that you want to use as the anchor.

3. Click the “Code” button in the display options menu at the top of the page to display the page in HyperText Markup Language code format.

4. Type the following code immediately before the text:

   <a name="example">

   Change “example” to your own memorable anchor name.

5. Type “</a>” (without the quotation marks) immediately after the text. The final code should look like this:

   <a name="example">Example Heading or Subheading</a>

Hyperlink to the Anchor

1. Open the page on which you want to include the hyperlink to the anchor on the original page. Scroll to the hyperlink insertion location on the page.

2. Click “Insert” in the main Dreamweaver navigation menu. Select “Hyperlink” from the drop-down menu.

3. Type the full Uniform Resource Locator Web address of the page into the input field. Immediately after this, type “#example” (without quotation marks.) Change “example” to the name that you assigned to the anchor. Add the link text into the applicable input field. Click “OK” to add the link to the page. The link code should look like this:

   <a href="http://www.yoursite.com/page.html#example">Link text</a>

4. Save both Web pages. Upload them to your website’s hosting server in the usual way.

Tips & Warnings

• You can also link to an anchor on the same page by using the same link code but without the page’s URL address. Format for a same-page anchor link:

• <a href="#example">Link text</a>

References

• Adobe Dreamweaver CS5 and CS5.5: Add a Link Using the Hyperlink Command
• Echo Echo: Link Within A Page

Resources

• Adobe Dreamweaver CS5 and CS5.5: Product Support
• W3Schools.com: HTML Tutorial