Search | Directories | Reference Tools
UW Home > Discover UW > Site Information > Guidelines 

Using Templates and Page Elements

By using centralized templates, stylesheets, and standards, the UW Home Page presents a coordinated look and feel. Pages on www.washington.edu have the following standard elements above and below the content of the page (for illustration purposes, the graphics have been colored, instead of displaying white, and we are using the Administrative Gateway and Parking as an example):

Included on this page:

The complete page

The pages on the University of Washington Web Site should all have a coordinated look and feel. This look includes:

Image of Complete Page

The page header

Files should begin with breadcrumb code:

<!--chtml include "//admin/incs/breadcrumb.inc"-->
<!--chtml use crumb(c1;c2)-->

The code above should be customized to specify your breadcrumb file, and the crumbs that you would like to use. For more information, please see Creating and Using Breadcrumbs.

Next, your code should include:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

which identifies the version of HTML. This is followed by:

<html>
<head>
<title>Your Page Title</title>

Next, the following line specifies the Cascading Style Sheet (CSS) that governs some of the appearance of the page:

<link rel="stylesheet" href="/home/home.css" type="text/css">

The use of the common style sheet results in the page having a white background and particular fonts for headings and navigation text. As such, in order to maintain the common look and feel, you should not specify a background or fonts.

Then the heading portion of the page is completed by including the following lines:

</head>
<body>
<!--chtml include "//home/incs/emheader.inc"-->
Image of Header

Note that each content area has a different header file for you to use, so you should replace the italic text above with the correct header file for your page. The following headers can be added to your page:

Administrative Gateway "//home/incs/emheader.inc"
Student Guide "//home/incs/stuheader.inc"
Researcher's Guide "//home/incs/rheader.inc"
Computing and Networking "//home/incs/cheader.inc"

Note: Conditional HTML (chtml) uses the // to find the file to be included. The "chtml include" line causes the Web server to copy in the current contents of /home/incs/emheader.inc when the page is displayed. This file includes all the HTML to build the standard page header.

Formatting your content

Content begins with an <h1> or appropriate graphic followed by the <h1>. The <h1> text matches the page <TITLE>. It is strongly recommended that you do not center the <h1> or make it right-aligned.

<h1>Your Page Title</h1>

Give "long" pages an internal table of contents so readers can get an idea of the page content without scrolling through the page. The standard internal table of contents follows the <h1> and is formatted like this:

<ul>
 <li><a href="#UWPOLICE">UW Police and Parking Enforcement</a>
 <li><a href="#CITATION">Settling or Appealing a Citation</a>
</ul>

which will display:

Page with TOC

This is followed by your content. If your page consists of several sections, use the headings in order: <h1>, <h2>, <H3>, etc. This hierarchical use of heading elements facilitates future browsers which may permit heading-based outline views, and may facilitate searching and indexing of your pages.

Creating links on your pages

Below are guidelines for creating links:

The page footer

Follow your content with the following three lines:

<!--chtml include "//home/incs/footer.inc"-->
</body>
</html>

This include file generates the bottom of your pages:

Image of Bottom

Note the optional link to the department's home page from the department name.

The /home/incs/footer.inc file in turn refers to a file called address.inc that contains your office address information and needs to be created by you in every directory and subdirectory containing your .html files. Your office name in address.inc should not include "University of Washington" since the address is displayed next to a "University of Washington" graphic. The address.inc included in this page provides a typical example of the content of the file:

<address>
 <a href="/webinfo/">WWW Management</a><br>
 www-mgmt@cac.washington.edu<br>
 Modified: <!--chtml date="%B %d, %Y"-->
</address>

Include the "chtml date" line in your address.inc, formatted exactly as shown, to show the date the file was last changed.

To display two addresses on the bottom of a page, use an additional include file called address-right.inc. Complete this include file with the complete address and code as shown above. You will now have two files in your directory: one called address.inc and one called address-right.inc. With these two files, the footer looks like this:

Templates and code samples to use

The following samples provide code you can use to create your pages, and samples of what those pages will look like if you use that code. Ask your Webguide for help if you have questions, or any difficulty using these templates.

You can save the sample code pages into your own directory, and rename them with an appropriate name and .html extension for future use.

This example uses bogus breadcrumb files. You need to specify the location of your breadcrumb file, and specify the crumbs that you wish to use. Additionally, each of these examples is using the code for the Administrative Gateway heading. Replace "//home/incs/emheader.inc" with the appropriate header.inc file for the area page you are working with.

View as Web Page View source code Description
template View Source Basic content page with no internal table of contents
templateTOC1 View Source Content page with simple internal page table of contents
templateTOC2 View Source Content page with external navigation occupying a left-side column
address.inc View Source Example address.inc file that must exist in each subdirectory

Additional Templates using Banners and Logos

View as Web Page View as Source Code Description
SimplewithBanner View Code
Simple Template with banner logo, no navigation
Leftnavlogo View Code
Template with left navigation and small logo
Leftnavbanner View Code
Template with left navigation and banner logo
Alternative View Code
Template with alternative navigation format
Navigationwithinclude View Code
Template with alternative navigation using an "include" file
IncludeFile View Code
Navigation "include" file for above template