Planning and Organizing Websites

Authored by: Lida L. Larsen
Office of Information Technology
University of Maryland, College Park
www.oit.umd.edu/webdeveloper/planning

What They See

Templates
- A template is a pattern used as a guide in making something accurately.
  <html>
  <head>
  <tittle>Planning and Organizing Websites - Insert Current Page Title</title>
  </head>
  <body bgcolor="white">
  <a href="http://www.oit.umd.edu/webdeveloper/planning/index.html">
  <h3 align="center">Planning and Organizing Websites</h3>
  <h2 align="center">Current Page Heading</h2>
  <hr>
  <ul>
  <li>
  <li>
  </ul>
  <hr>
  <a href="Insert URL for the spawning page">back</a>
  <b>LLLarsen,12/98 Change date accordingly</b>
  </body>
  </html>
- This template is an example of one that could be used for the tertiary pages of this Planning and Organizing Websites training page. The idea is to reduce as much redundant typing as possible and provide consistency between pages of a website. Identify the common elements between a set of pages, provide yourself with cues when an element requires completion (the title tag in this example), choose a descriptive name, and save the template in the directory where it will be used most often. Websites often require more than one template.
Navigation
- Provide the user with an easily identifiable means of navigating a page, backtracking, or moving forward if the page is sequential in nature. The back link located at the bottom of this page represents the minimum with regard to a site's navigational features. How you provide for site navigation depends on the nature and depth of the page. Some examples are listed here, but by no means is intended as an exhaustive list
  - Buttons linking to sub-sections
  - Bulleted lists at the top of long pages that link to page sections
  - Back to the top links on long pages
  - A "Home" button on all pages
  - Site Maps
Help
- Provide a help page for any interactive features you include on your website. If you want to incorporate sound you should provide links to the plug in as well as a help page for your users. A simple rule of thumb: If you can't install it don't use it!

back

What They Don't See

Directory Structure

This method uses only one directory and all files are stored there. Sufficient for small sites, but quickly becomes unwieldy.

This method uses one main direcory and a multiple sub-directories. Sub-directories can contain more sub-directories. A little initimdating, but if thought is given to the structure the system proves superior to the Flat approach
.
Naming Conventions
- Choose names that describe the page when saving files.
- Keep the file name as short as possible without sacrificing description.
- No spaces or unusual punctuation (e.g., apostrophe, ampersand, exclamation point) in file name.
- Include image size in image file name (e.g., redrose168x192.gif).

back

Planning and Organizing Websites

What They See

What They Don't See

LLLarsen, VLWarnick, First published December 1994. Last revision July 2003.