If your website only has one page, then visitors will come to your site, read the page, and leave. But if your site has many pages, you need to provide some mechanism to assist them in moving from page to page.

For example, on this very page are five navigational buttons (scroll down to the bottom of the page to see them). Clicking on one of these buttons will either take you to another tutorial section, or back to the home page.

For every page you include in your site, you should determine which navigational links to include. You'll probably want to include a link back to the home page and links to the main sections.

Methods of Navigation

Imagemaps
Imagemaps are single images that are "mapped" so that clicking on different regions will take the visitor to different pages. In our Graphics on the Web tutorial, we give instructions on how to make them. Shown below is an example of an imagemap as a navigational bar:

You should note that some browsers don't support client-side imagemaps, and some browsers don't show graphics! Many designers include text links with their imagemaps, like this:

Organization | Navigation | Style | Page Design

The above navigational format should work for everybody, regardless of their browser type.

Buttons

This tutorial uses a set of buttons for navigation. Since each button is its own graphic, we can replace the button of the current page with one that tells the visitor "This is where you currently are." In our case, we just inverted the color of the buttons.

In many cases, single graphics are advantageous over imagemaps. It's easy to change their layout on the page, you can add and remove them at any time, and they are compatible with every browser if you use the ALT parameter in your HTML! This page's buttonbar looks like this in text browsers:

      [Organization]  [Navigation]   [Style]   [Design] 

Note: if you use graphics for navigation, be sure to take steps to reduce their file size as much as possible.

Text
Many sites don't even bother with graphics for navigation... graphics can take a long time to load, and in a lot of cases really don't contribute much to the look of a page. Text links are a clean, and very efficient, way of moving visitors around your site. They are particularly effective when placed in a colored bar on the side of the page, or otherwise offset from the rest of the content.