HOW TO CREATE TARGETS AND ANCHORS ON YOUR WEBSITES

Using A Simple Method with Dreamweaver 2015

For Dr. Pastore's Classes
Bloomsburg University
Bloomsburg, PA

 

Target - Points to a place on your page that you want to jump to (anchor). Created by making a hyperlink beginning with a # followed by a name.

Anchor - A specific place somewhere on your page that you want to jump to. Created by creating an ID in the Properties window.

 

Targets and anchors are used when you want to keep all of your information on one web page and end up with a long list of items on your page. Targets and anchors make it more manageable to navigate your page by jumping from the top or the page to a section and back. Please note that sometimes it is better design to create separate pages rather that having a page with a long list of items. You will have to be the judge!

 

Here are the steps. Before you start them, please note that I created 3 sections on this page to jump to: CATS, DOGS, AND BIRDS . Each of the sections has a significant amount of space between them that would be filled with future information. I also added extra spaces below in the BIRD section with the return key to enable the BIRD name to jump to the top of the window when one navigates there.

 

CREATING TARGETS

1. At the TOP of the page, type in all of the names of the sections you want to jump to. On this page, it would be:

CATS

DOGS

BIRDS

 

2. Next you should make each of these a hyperlink that begins with #. You can use letters or numbers to make the hyperlink. In this example, I am going to use the following terms.

#cat1

#cat2

#cat3

I chose the word cat to represent "categories". It has nothing to do with kitties! So my next action is to make CATS, DOGS, AND BIRDS hyperlinks as follows:

CATS

DOGS

BIRDS

Please note that each of these hyperlinks begins with a #.

 

CREATING ANCHORS

Next, you are going to create anchors. These are the sections on your page that the user will jump to and this is a very easy process. I have created 3 sections below to jump to: CATS, DOGS, AND BIRDS. For each of these categories, I did the following:

3. Highlighting the category as if you were doing a hyperlink.

4. Go to the property window and in the ID box, type in the name of the category that you used in the hyperlink. For example, type #cat1 for the CATS name. Remember that the name in the ID box must be the "exact" name used in the hyperlink in both uppercase and lowercase.

See the following figure:

 

5. Test your page by save it and FTP it to your site. Please note that you should not test it in "live" mode because my experience is that it does no work there.

6. To make a "Return to Top", highlight the highest words at the top of your page where you want to return to and insert an ID. In this case, it would be the sentence above my links.. Assuming you used the word "top" as your ID, your hyperlink for "Return to Top" would be #top

7. Go back to the hyperlink above and try them out!

 

 

 

 

 

 

 

 

 

 

CATS

Return to Top

 

 

 

 

 

 

 

 

 

 

DOGS

Return to Top

 

 

 

 

 

 

 

 

 

 

BIRDS

Return to Top

 

 

 

 

 

 

 

 

 

 

©Raymond S. Pastore, Ph.D.
Professor of Education
Teacherworld.com
1148 McCormick Center
Bloomsburg University
Bloomsburg, PA 17815-1301
570-389-4236/4025