Skip Navigation
Jack Baskin School of EngineeringUC Santa Cruz

Guidelines for the editing Web pages on SOE sites

Posting Documents

  1. All pages need to include the standard header and footer. Email for information about templates.
  2. Map page titles to URL structure. For example, this page is <title>'d:

    SOE Web page guidelines - SOE Web site - Jack Baskin School of Engineering, UC Santa Cruz

    ...to match the URL /site/guidelines.html. Separate each title section with two spaces around a dash (" - ").
  3. Include a short descriptive document title that describes the contents of each page. The document title appears directly below the blue global navigation bar. This should appear in <h1> or <h2> tags and have a class of "main_title" (see title above).
  4. Set the "Section Title" to the title of this section of the Web site (usually the title of the index.html page), or the directory above it if it is the index.html page. Then link this Section Title to the index.html page, or the directory above.
  5. Group pages on the same topic within their own directory. The main page within each directory should have the file name "index.html". This file is served by default when the URL ends with a directory. For example, http://www.soe.ucsc.edu/advising/undergraduate/ and http://www.soe.ucsc.edu/advising/undergraduate/index.html reach the same page.
  6. Include an email link for the person responsible for the page at the bottom of each page.
  7. When possible, post HTML instead of PDF documents. Not all browsers support displaying PDF documents, or don't do so consistently.
  8. Clean up "Microsoft HTML". When posting documents exported from any Microsoft product, use the "Clean up Word HTML..." command in Dreamweaver to remove proprietary formatting (in "Commands" menu).
  9. Use consistent, short, and immediately identifiable labels for links .
  10. The publish script provides warnings about the issues described on this page. To see the publish script output, visit the page to be published on the development site (add "-dev" to the "www") and append "//update", or use this "SOE Web Publish" JavaScript bookmarklet. Pages may be automatically published if a ".autopublish" file is in the same folder, with a pattern that matches the filename.

Formatting HTML

  1. Use headings (<h1> through <h6>) and indentation to establish a hierarchy of content.
  2. Place links around immediately identifiable, descriptive content. Avoid using "click here" or similar links.
  3. Do not use <font> tags; use the predefined CSS styles, or ask to have a new one created.
  4. Set table widths with relative rather than absolute values. Use a percentage value.
  5. Do not set heights in tables or table cells. Browsers do not format these predictably.
  6. Always use relative links. Do not include the server (http://some.server.com/) in a link unless linking to another site.
  7. Always include alternative text ("alt" attributes) for images and other non-text content. If a image is not part of the content, include an empty alt attribute (alt="").
  8. Always re-size images to their display size, and include "height" and "width" attributes. In other words, do not constrain the size of an image by setting its height and width.

Using Dreamweaver

  1. Be sure to set line endings to "LF (Unix)". CR line endings aren't handled well under UNIX, and the "make live" script breaks pages with them. Change your preferences: "Edit menu" > "Preferences" > "Code Format" > "Line Breaks" to LF (Unix).

The following links provide further usability guidelines: