How to Create a Navigation Bar - dummies

By Bud E. Smith

Creating a simple text navigation bar on your Web site is useful. Even a simple navigation bar consisting of text is the difference between a Web site and an unconnected mass of Web pages. Creating a navigation bar forces you to start thinking hard about how your site is going to be organized.

Here’s an example of a simple text navigation bar for a “personal professional” site:

Home | Résumé | Memberships | Publications | Personal | Contact me

When you click the word Résumé on the text menu to go to the Resume page, however, the text navigation bar should change to reflect where you are:

Home | Résumé | Memberships | Publications | Personal | Contact me

Follow these instructions to create a text navigation bar:

1Open a new, empty page in the Visual Editor tab in CoffeeCup.

Adding a navigation bar adds some consistency to your pages.

2Type in a line of text representing the elements of your site, with a word or two for each page or area.

Use the vertical bar to separate the tabs. Examples for a personal/professional site look like this:

Home | Résumé | Memberships | Publications | Personal | Contact me

If the vertical bar character is not accessible from your keyboard, it should be available from the Symbol or similar menu. In Microsoft Word, choose Insert→Symbol to bring up the Symbol dialog box and select the vertical bar character.

3Select the text links and click the Center button.

The text menu will be centered.

4Select the word Home and choose Insert→Link.

The Insert Link dialog box appears.

5Type in the URL and click OK..

The URL is simply the filename of the home page, index.htm. After you enter it, you’re returned to the Visual Editor.

6For the remaining phrases, repeat this process: Select the tab name link it to a Web page by name; click OK.

By doing it this way, you can put your navigation feature in place; the pages don’t even have to exist yet. (When you do create them, however, you must match the names in the text menu exactly.)

7Save the page repeatedly using each of the filenames you’ve defined.

As you proceed, delete the link from the tab representing the page you’re about to save, removing the underline and link color from it.