NavBar

With the recent proliferation of large web sites, many web administrators have taken to creating "Navigation Bars" at the top of related pages. For example, at the top of this page is a NavBar containing my home page, some Java applets I have written, and my resume.

Each page included in the NavBar displays the NavBar at its top. There are links to each of the other pages, and the name of the current page is displayed as well.

The only problem is that these NavBars can be somewhat tedious to make, either by hand or by writing a perl script. Luckily, there is now a WYSIWYG NavBar editor!

Instructions are below.

Instructions

The first step in creating a NavBar is entering the list of titles and paths. The "title" of a page refers to the name which will be displayed to the user. For example, the title of my home page in the NavBar above is "Home page". Each of the pages in a NavBar is identified by its title and path. The paths for the different pages will be compared to produce relative URLs, which will allow the user to quickly switch between them.

Typing into the text boxes edits the currently selected item. New Item adds a new, untitled page. Up/Down shift the currently selected item up and down within the list. Remove removes the currently selected item.

Warning: Do not use ".." inside the path names. NavBar cannot generate relative URLs for paths which include "..", and it will throw an exception.

Warning: Avoid using "." to refer to the default page for a directory. For example, I refer to my home page as "index.html" and not as ".". This is generally a good policy for relative URLs, since some browsers (as well as NavBar!) might get confused.

Tip: It is not necessary to enter the entire path for each page. Since NavBar generates relative URLs between the pages, it will chop off whatever path the pages have in common. For example, in the Animals example below each page could be typed in without the "/my_www/animals/".

Changing NavBar Appearance

Font: The font used for both the selected and unselected items can be modified using the Bold/Italic checkboxes and the small/medium/large popups to change the font size. Here "selected" refers to the page which the user is currently viewing.
Separator: The html string used to separate the items can be entered into the Separator text field.
Break Point: NavBar currently only supports a single line break inside a NavBar. This break can be moved left or right using the Break Left and Break Right buttons.

Generating HTML

When you have finished editing the page list and have set up the NavBar's appearance, hit the HTML... button to produce the HTML for each of the pages.

The listing includes a small piece of HTML for each of the pages included in the NavBar. Under Windows, select some text and hit Control-C to copy it to the clipboard. Under UNIX, select some text and then use the middle mouse button to paste the text into other applications. On the Mac, you're out of luck!.

An Example

The Doppelt Zoo decided to create a series of pages describing the animals which are currently visiting the premises. Unfortunately, the Zoo is sparsely populated and only contains a wayward flounder and a dog. Both the flounder and the dog have home pages (maintained by the Zoo staff), and there is a general home page for the animal community. These pages are arranged on the server as follows:

The Pages

Title	Path
Animals Home Page	/my_www/animals/index.html
Flounder	/my_www/animals/fish/ugly/flounder.html
Spot	/my_www/animals/dog/index.html

Typing these three pages into NavBar exactly as written produces the following three NavBars:

NavBar to be placed on "Animals Home Page" page
Animals Home Page
Flounder | Spot

NavBar to be placed on "Flounder" page
Animals Home Page
Flounder | Spot

NavBar to be placed on "Spot" page
Animals Home Page
Flounder | Spot

Back to The Old Stuff, or maybe you want to mail Adam.