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 pages on the University of Washington Web Site should all have a coordinated look and feel. This look includes:
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"-->
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.
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:
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.
Below are guidelines for creating links:
<a href="/admin/parking/retire.html"> )<a href="/admin/parking/retire.html">, not relative addressing such as <a href="../parking/retire.html"><a href="/admin/parking/">is preferred to either
<a href="/admin/parking">or
<a href="/admin/parking/index.html">
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:
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:
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 |
| 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
|
