Navigation around Pages
What are URLs? Using Anchors to Navigate Pages Graphical Techniques for Navigation Adding an eMail Link


Navigation is movement around a site. This will include a number of aspects which all involve links

  • Movement within a page to a specific point and movement between pages on a site
  • Links to text and graphics files on a page
  • Links to external web pages
  • Email links.

These links can be achieved by using built in routines within Dreamweaver or by inserting the code direct in the relevant place.

The appearance of the link can be simple underlined text or a image/button
You can also use flash buttons or rollovers for links.

What are URLs, Hyperlinks and Anchors?

Some knowledge of addresses and the types of links you can insert in HTML is essential before finding out how to insert the links. Have a look at the text file enclosed.

Adding an Internal Relative Link - if you want to give a relative reference to another page in your site you can achieve this two ways.

  • Firstly have the Property Inspector open
  • Highlight the name of the destination
  • Select the Browse icon next to the Link box. Navigate to the directory where the other page is stored and select the file you want.
    This will insert a relative link, like this one to the Index page in this section of the site.
    You can also highlight the destination and right click to bring up a menu. Select 'MakeLink'

Adding an External Absolute Link

  • Bring up the Property Inspector
  • Place the cursor where you want the link.
  • Go to the Link Box in the Property Inspector and type in the URL.
    This will take you to Computerstarters web site. You do need to put in the Protocol.

 

Using Anchors to Navigate to Parts of a Web Site

  1. See 'Inserting Anchors'
  2. First you add a named anchor to the location on the page where the user will jump. Highlight the location point for the anchor. Select 'Common' from the Insert Bar and 'Insert Named Anchor' . Give your anchor a name.
  3. Select the text that will link to the named anchor.
  4. Enter the name of the anchor in the Link box in the Property Inspector preceeded by a #.

It is quite common to set up anchors to different parts of a long page by listing the anchors at the top of the page. This has been done for this page

Go back to top of page to see this.

  1. You can also link to anchors in other files. You do this by adding the anchor to the other file.
  2. You add the anchor reference to the end of the link (either external or internal)

Adding an eMail Link

This type of link is called a mailto link. This can easily be inserted as follows as long as you know the eMail address!

  1. Select some text to be the link
  2. Go to Objects Menu -Common and select the Insert eMail link.
  3. Type in the eMail address.
  4. Try this one Mail me any Comments

The href in this case is absolute , but is not to a url but to an eMail address.

In this case the html tag is <a href="mailto:admin@learnsouthwest.co.uk.co.uk"Mail me any comments</a>

You could insert this hyperlink directly into the code as above!

Graphical Techniques for Navigation

These can be inserted using the Objects Panel or by clicking on Insert menu, Interactive Images.

It is very common to have images set up so that clicking on them links you to another page/location/site.

You will have noticed this is very common on this tutorial site. It is done by linking an image to the hyperlink.

This can be achieved in a variety of both simple and sophisticated ways.

Simple Linked image

.
  • Insert and select the image.
  • Type a reference to a web page/site/anchorinto the Link box in the Property Inspector or browse for it.
  • You will need some text to make the destination clear unless the graphic does this for you.

Rollover Image Link

A rollover image is an image that swaps to another image when the viewer's cursor is over it.This is created as follows
  • Place insertion point where you want image to appear
  • Select Rolloverimage from Objects Panel
  • A dialogue box appears as below. The image need a name (in top box).
  • You need to select two image files of identical proportions or at least of similar shapes in the image boxes
  • Add the hyperlink in the url box
  • Preview in browser. When you pass over it it changes. When you click on it you go to your destination.

 

Navigation Bar

A routine exists in Dreamweaver to created a graphical navigation bar consisting of Rollovers and Links. They can also incorporate buttons.
  1. Select the Navigation Bar object from the Objects Panel.
  2. A menu appears. First give your first button element a name in the Element Name box
  3. Next select 3 different images of identical size in the boxes below. Add a destination URL.
  4. Click the plus button to add another image and continue process until finished.
  5. Whe table is inserted when you click OK. You can only have one navigation menu per page.


The table created is nested into the existing table. It can be modified at will in standard below.

Try the menu below to see how it works.

 

Add Links using Image Map

An image map is a graphic with regions defined as hyperlinks. These regions are called hotspots and when viewer clicks hotspot it acts as any other hyperlink. You can define a number of these in different shapes, rectangular, circular or iregular.
  1. Import a suitable image.
  2. Look at the Property Inspector and give the image a unique name in the MAP box.
  3. Select one of the drawing tools below to draw the hotspot on the image.
  4. Type a URL in the Link Box
  5. Enter text to descibe the hotspot destination in the Alt Text Box
  6. Select a window target from the Target drop down box in the Property Inspector.

Jump List

This is a list of links that allow viewers to jump to other web site or pages in the current site. The Dreamweaver routine inserts a drop-down menu. To create follow the instructions below

  1. Place insertion point where you want the jump list to go.
  2. Select Jump menu from the Forms tab on the Inser Bar or from the Insert Menu.
  3. Type a descriptive name for the first item in the Text Box
  4. Enter a URL for this first item
  5. Select the + button to add to the list and start again.
  6. Go button just gives you a button to start the item showing. However clicking on the items in the list starts them.
  7. Finish by selecting OK
  8. Edit by selecting the Behavoiurs Panel from Window Menu. Have a look at this working jump list that takes you to web development sites

Web Development Sites to Visit

 

To top of page

To top of page Dreamweaver Index