Mapping Your Web Site

An Organization of "Course 1157"

Diagram of Site layout

The image to the right is my diagram of "Course 1157." The boxes represent folders and the ".html" files are individual Web pages.

Below are two more ways to think of the same Web site map.
Course1157

  1. Grading.html
  2. index.html
  3. movies
    1. Movie1.avi
    2. Movie2.mov
  4. pics
    1. Image1.gif
    2. Image2.jpg
  5. Syllabus.html
  6. Units
    1. FirstUnit.html
    2. SecondUnit.html
    3. ThirdUnit.html

Notice the conventions I use (many people don't agree with my conventions - that's ok):

  • Spaces between words do not exist (you may use an underscore to_separate_words). This is to avoid the Web Server substituting a "%20" for the space. In other words "my file.html" would be "my%20file.html" on the Web Server - not a fun file name to type in.
  • I use uppercase for the first letter of each word of a file (I don't like underscores but I do like to indicate a separate word). This can lead to confusion if someone is typing in the url, but I'm designing pages to be linked to from another page or a navigation tool.
  • I use uppercase for the first letter of each word of a folder that has ".html" files in it - otherwise I use lowercase. This really drives some people nuts, but I'm the one who has to manage many Web documents so it has to fit my brain. Once again, the design is to have people follow a link as opposed to typing in a url.

In reality, my organizational scheme has changed over the years. I do not use all the conventions listed above, but I still follow a pattern based upon my needs for managing web sites.

Organizing Your Real Course

Now for your course. Take the course or project you want to do and create a map like any of the three above. If you have a better way of making a map, create one that way.

Did you find what you were looking for? YES NO