How to Make and Maintain Simple Site Maps

When I first did my site maps, i was doing them by hand. Because of the necessity of no spaces within each line, it was hard to edit, therefore hard to maintiain. A quick perl script later, and I can maintain a simple text file which will generate the HTML or Javascript for the map.

The resulting HTML is as simple as possible, not requiring frames, tables, or anything special at all. Looks great as long as the font doesn't get bigger than the graphics (you can always design your own graphics too). The same input can also be used to generate javascript expandable trees (tree software stolen from the Netscape website; they've updated it with even newer software that I'm not using).

Input Format

The input format is simple. Each line is one entry in the tree. The first set of spaces (the indent) determines the depth in the tree, and (implicitly, based on position) who the parent is. The line consists of a URL, and text to go with it. Blank lines and lines starting with "#" are skipped.

#this line is optional
INDENT=2

http://www.foo.com/ The top level entry
  http://www.bar.com/ One level down from the top
  http://www.baz.com/ Use a pipe symbol | to make some text appear outside of the link
  http://www.zap.com/ Use ampersand notation (e.g. &#124;) to include a pipe symbol in the link text
  * Use an asterisk for the URL if you want text but no link
    http://www.cow.com/ Two levels down | (parent is asterisk line)
      http://www.dog.com/ Three levels down | (parent is Two levels down)
    http://www.zip.com/ Also two levels down
      http://www.dig.com/ Also three levels down
  http://www.cat.com/ Only one level down
  http://www.too.com/ It is ok to have two identical entries
  http://www.too.com/ It is ok to have two identical entries

That should be mostly self-explanatory. The INDENT=2 tells it how many spaces is a single level. If this line doesn't appear, then the first indented line is used to find the indent. The software can't handle inconsistent indenting, and I haven't even bothered to test it to see how it will fail.

Here is the tree that the above input would make (I invented the web sites for the example, but they might go somewhere anyway...)

The top level entry
One level down from the top
Use a pipe symbol to make some text appear outside of the link
Use ampersand notation (e.g. |) to include a pipe symbol in the link text
Use an asterisk for the URL if you want text but no link
Two levels down (parent is asterisk line)
Three levels down (parent is Two levels down)
Also two levels down
Also three levels down
Only one level down
It is ok to have two identical entries
It is ok to have two identical entries

What you need

Simple Map:
Perl script for making simple tree
(Edit the perl script: change IMGDIR so that it will generate HTML that points to where the images are.)

Javascript map:
Sample output from the above example
Perl script for making javascript tree
Javscript source for javascript tree (hold down shift to download with netscape)
(Edit the javascript: change the references to the images so that they point to where you actually put the images.)
minus symbol
plus symbol
disabled symbol