Site Map:

Mapping out a good folder structure is as important as deciding on a navigation system. A simple, clear folder/file structure allows the web master to find files again easily and it establishes the structure for the navigation system.

Basic Structure

• A web site follows basic tree/folder structures.
• If your site is very small, you may keep all files in one folder.
• If your site is larger, you may want to create sub-folders for different sections of your site.
• Some web designers keep all of the site's images in one folder. If you do this, make sure you have the proper relative link (see below).
• If you don't keep an images folder (and it isn't really necessary if your site is small or has few images), just make sure the images are in the same folder with the corresponding html file.

Naming Files

• Always use index.html as the filename for your home page in the main folder.
• Always use index.html as the filename for any main page in a sub-folder.
• Always use lowercase for filenames.
• Always use short and descriptive filenames. Keep names as simple and clear as possible (it creates simple URLs that are easier to remember and follow).
• Never use spaces or weird characters in file and anchor/bookmark names.
• You can use a dash (-) or underscore (_) within file names, but use them sparingly.
• Try not to arbitrarily change the name of your page, other web sites may link to your old file name.

Absolute and Relative Links

• Always use absolute links (full url addresses) instead of relative links (partial url addresses) when linking to a web site that is not under your control or if you are having problems figuring out the relative link.

  Absolute: "http://www.gmu.edu"

• When linking to pages in your own site, use relative links: rather than the entire url you can use only part of the url.

  Relative: "index.html"

• When linking to a page in the same folder, just use the filename: "links.html"
• When linking to a page or image in another folder within your site, make sure you get the proper structure:

  To link to a folder lower in your tree hierarchy, just add the proper folder: "images/button.jpg"

  To link to a folder higher in your tree hierarchy, add ../ before the proper folder: "../images/button.jpg"

Images

There are middle ground options between creating all your own images and stealing images from other pages.

Copying