Navigation Bar

Home - Guide Search Table of Contents

Technical Guide

Introduction

Site Structure

Navigation

Page Layout

Color

Formatting Text

Images

Multimedia

HTML Code

Bibliography

Navigation

One of the most important features of web documents and perhaps one of the most demanding in terms of site design, is the ability to link from one document or page to another. While providing a guide through the site, the Web site designer must allow users to make their own decisions about navigation and prevent them from becoming lost or disoriented. To accommodate both the "sightseer" and the user seeking a specific piece of information, the designer must make site structure, or organization of information, clear and easy to access.

Because a provincial/territorial heritage site will be a large, complex site with a deep structure, a local search tool should be provided to aid users in finding specific heritage related information. At any location within the site users should be provided access to the following key pages:

  • the home page
  • a detailed table of contents, site outline or index
  • a site map
  • a search tool

Hyperlinks within a web document may link to another location within the same document or to another document. These links are made in one of three ways:

  1. hypertext link—one or more words are linked
  2. hyperlinked image—a picture, icon or other graphic is linked; the button metaphor is a commonly used hyperlink
  3. an image map—a single image containing several "hotzones" each linked to a different URL

Navigation aids should be obvious to the user. A graphic of binoculars may be an obvious link to the local search tool however, not so obvious images, such as a globe for example, may require a textual cue as well. All navigation aids should be consistent in both their placement and their visual design or style. Predictable navigation will increase speed and ease of use. Aids should be placed at both the top and bottom of the pages. Once having scrolled to the bottom of a page, users should not have to scroll up to the top to navigate further. A good rule of thumb is to ensure users can navigate from one desired piece of information to another, anywhere within the site, in no more than three mouse clicks.

Remember that users may access a page independent of any other page and therefore page content should be complete and stand-alone. Documents divided into more than one Web page to reduce page length, or documents of linear content, that is, pages that must be read in sequence, should use "previous" and "next" navigation.

The Newfoundland and Labrador Heritage site uses an image map that acts as a navigation bar at both the top and bottom of every page. The navigation bar provides access to the home page, search tool, site map and a more detailed section map. The colored vertical bar on the left side of the page contains hypertext links to information related to the contents of the currently loaded document.

Hyperlinks are created by using the anchor element which requires both a start and end tag. To make a link to another document in the same directory only the file name is required.

<a href="1870-1900.html">Government from 1870-1900</a>

To link to another document in the parent directory, precede the file name with ../

<a href="../british.html">British Rule</a>

The complete URL (the fully qualified domain name) is required to link to a Web document outside the current site:

<a href="http://www.heritage.ca/welcome.html"> Canadian Heritage</a>

Anchors and targets are used to link to a specific location within a document. The target or desired location must be indicated using the <a name="…"> tag. To make the hyperlink to that location, in the <a href="…"> tag, use the pound symbol (#) followed by the name exactly as you specified.

hyperlinks

<a href="#cabot">John Cabot</a>
<a href="http://www.heritage.ca/nf/
discovery.html#cabot">John Cabot</a>

target

<a name="cabot">John Cabot</a> discovered Newfoundland in 1497.

To hyperlink an image, surround the image element with the <a href="…"> tag:

<a href="discovery.html"><img src="cabot.gif" height="150" width="80" alt="John Cabot" ></a>

When you create a client-side image map, an image source and its accompanying "map" is placed in the HTML document. The image source tag must include the following reference to the map: usemap=#title, where "title" is the name given to the map element. The map element is followed by a series of "area" tags that define the shape, coordinates and hyperlink of each hotzone of the image. The map element requires both a start and end tag. Figure 4 is an example of the client-side image map used to create the main navigational bar at the top and bottom of the Newfoundland and Labrador Heritage site pages.

Figure 4: Newfoundland and Labrador Heritage Site Image Map


<img src="society_navbar.gif" width="585" height="20" border="0" alt="Navigation Bar" usemap=#soc_navbar>

<map name="soc_navbar">
<area shape=rect coords="0,0,85,20" alt="Home Page" href="../home.html">
<area shape=rect coords="86,0,187,20" alt="Search" href="../search.html">
<area shape=rect coords="188,0,309,20" alt="Site Map" href="../sitemap.html">
<area shape=rect coords="310,0,480,20" nohref>
<area shape=rect coords="481,0,585,20" alt="Society Map" href="soc_map.html">
</map>

Top of Page

Navigation Bar
Site Logo