How to Link Directly to a Line or Section on a Web Page with Dreamweaver

Make Your Links Skip to a Specific Location on a Website


How to Link Directly to a Line or Section on a Web Page with Dreamweaver

by Christopher Heng, thesitewizard.com

Although my main Dreamweaver tutorial series teaches you how to link to other web pages both on your site and other sites, it does not deal with the rarely needed case of linking directly to a specific line, section or paragraph on a page, so that when your visitors click that link, they are taken directly to the portion of the page being linked to.

By way of example, take a look at the Frequently Asked Questions page for the Feedback Form Wizard. At the top of the page are a list of questions that are directly linked to the answers on the page. Clicking any of those questions will cause your browser to immediately go to the part of the page with the answer.

This tutorial shows you how you can create such links for your website.

Requirements

  1. For Dreamweaver Users Only

    This guide is intended for Dreamweaver users only.

    If you are not using Dreamweaver, you may want to take a look at the more general article How to Link to a Specific Line or Paragraph on a Web Page Using HTML. That article deals with the HTML code for such tasks, so if you are familiar with working with the "raw" HTML code, you should be able to follow it easily.

    In addition, this tutorial assumes that you know how to use Dreamweaver. If this is not the case, it's best to start at the beginning with chapter 1 of the Dreamweaver tutorial.

  2. Control Over the Page Being Linked To

    In order to link directly to a specific place on a web page, you need to be able to modify both the page doing the linking as well as the page being linked to. That is, you must have control of both pages. You will not be able to link to a specific spot on some random site on the Internet unless the webmaster of that site has modified their page so that you can link to that section.

Modifying the Target Page

The first thing you will need to do is to modify the page you're linking to so that it contains an invisible marker called a named anchor.

  1. Start up Dreamweaver and load the page that you wish to link to.

    (Again, if you don't know how to do this, you really should start at the beginning: please see the Dreamweaver Tutorial to learn how to use Dreamweaver first before continuing. Otherwise this tutorial may be confusing to you.)

  2. Look for the exact line, paragraph or section that you want to link to. Click your mouse once at the start of that line or section. This will place the blinking text cursor at the spot you want the browser to scroll to.

  3. Click the "Insert" menu, followed by the "Named Anchor" item on the menu that appears.

  4. A dialog box entitled "Named Anchor" appears. You will now need to name the position that you're linking to. The name can be any descriptive name you wish. It is not displayed on your web page. It merely serves as a marker so that you can link to it later on your other web page.

    Rules for the Anchor Names

    • The name you create for the "Named Anchor" must not have any spaces.

    • Each named anchor must be unique. That is, don't create two named anchors that have the same name.

    • You can use any combination of capital (uppercase) letters, small (lowercase) letters and numbers you wish. However, do not create two named anchors that are only different in case. That is, don't create a named anchor called "special" to mark a spot, and then another one for a different spot called "Special".

    • Remember the exact word, spelling and case, that you use for your named anchor. You will need to link to it using that exact spelling and case later. Notice that I said that you have to remember the case as well, so if you called an anchor "Special", you will need to refer to it later as "Special" and not "special". If you're afraid you'll forget which case you used, just stick to using small (lowercase) letters for all your anchors (which is what I normally do).

    Click the OK button when you've entered the name. Dreamweaver will display an icon at the spot you created the named anchor. Don't worry, this anchor will not show in a real browser. Dreamweaver only shows that icon so that you know that there's a named anchor at that spot, and to make it easier for you to change the name later if you wish.

    If you wish to change the name of the anchor later, click the icon for the anchor once to select it. (At this time, it is probably already selected since you just created it.) Look at the Properties panel at the bottom of the Dreamweaver window. Notice that the name you chose is in a text field called "Name". To modify it, click the field and change it to the new name.

If you want different links to point to different parts of a particular page, create multiple named anchors on that page, one for each location where you want the link to land. Make sure that you give each anchor a different name. An example of this can be seen on the FAQ mentioned earlier. Each answer on that page has a different named anchor.

Creating a Link to the Specific Spot on a Web Page

The next thing you will need to do is to create a link that points directly to the marker you have just inserted.

  1. Open the page where you wish to insert the link. This can be a new page, or it can even be the same page where you placed the named anchor.

  2. Select the text that you wish to transform into a link. Click "Insert" from the menu, followed by "Hyperlink" from the menu that appears.

  3. A dialog box called "Hyperlink" will appear.

  4. Normally, when you link to a web page, you will place the web address (URL) in the "Link" field of this dialog box. For example, if you were linking to the article on using Dreamweaver to link directly to a specific line or section, you will normally enter the text http://www.thesitewizard.com/webdesign/link-directly-line-section-dreamweaver.shtml into the field.

    To link directly to the spot where you placed the named anchor, you will need to append a hash, "#", followed by the anchor name you created earlier. For example, I placed an anchor named "specificlocation" at the start of this section. To link directly to that location, the web address has to be modified as follows: http://www.thesitewizard.com/webdesign/link-directly-line-section-dreamweaver.shtml#specificlocation. You can test it by clicking this link, or, if you don't want to lose your place in this article, just hover your mouse over the link and check your browser's status bar to see where it points to.

    If you were linking to a section on the same page you're modifying, you can also omit the full URL and just put "#specificlocation" into the field. When the web browser encounters the hash as the first character of a link, it will automatically know that the web page is linking to another section on that same page.

    Once you've finished entering the URL, click the OK button. The text will be changed into a link.

Once you've finished adding all the named anchors and their corresponding links, publish both sets of pages to your website. That is, remember that you will need to publish both the linking page(s) and the target page(s). The easiest way to make sure of this is to use the "Site | Synchronize Sitewide" facility in Dreamweaver, as taught in the Dreamweaver tutorial series, since it will ensure that all modified pages on your site are updated.

Conclusion

Congratulations. You have successfully created a link that skips directly to a specific location on a web page.

Copyright © 2009-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Link Directly to a Line or Section on a Web Page with Dreamweaver





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.