Resources
Web Page Styling
Official pages on the Computer Science website use graphics and styling designed by Godat Design and implemented in 2006. This is the fourth generation of departmental website design. Minor changes were made in January of 2008 to conform to new university requirements developed by the branding office.
Personal pages and project pages are encouraged to use compatible styling. Two methods are provided for this: a lightweight interface that can be easily added to simple web pages, and a set of templates that implement a more complex layout with an illuminated sidebar menu.
All variants use external style sheets, along with server-side includes of HTML code, to separate out the styling and its implementation. This allows the content and styling to change independently.
Lightweight Styling
Lightweight styling supplies standard styling and a departmental banner with minimal effort. New pages can be created by saving this file with a .html extension in your web area on the /cs/www filesystem.
Lightweight styling can be easily added to typical existing pages that do not use frames or style sheets. Only three small changes are needed:
- Begin the file with this doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> - Add the following line immediately after the existing <HEAD> tag:
<link rel="StyleSheet" type="text/css" href="/style/simple.css"> - Add the following line immediately after the existing <BODY> tag:
<!--#include virtual="/style/csbanner.ssi" -->
Those three changes will be sufficient for many pages. Other pages may need editing to improve appearance, to resolve conflicts, or to fix newly revealed problems. If an existing page contains embedded style specifications within the body (font, color, etc.), judicious editing can simplify the HTML code and improve compatibility.
Cell boundaries will be visible on pages that use tables for layout purposes. These boundaries can be hidden (at the cost of mis-styling true tabular data) by adding another line immediately after the above <link> tag:
<style type="text/css"> td {border:0} </style>
Full Styling with Illuminated Menus
This standard style is closer to that of the official pages, but requires more effort to set up. A family of related pages share a common menu where individual items "light up" as the mouse moves over them. There are provisions for displaying custom images in the box under the blue banner.
The style is utilized through a set of file templates that are downloaded and edited. Existing web pages are most easily converted to this format by transferring the body text into the new templates. For full details, see the instructions for Web Page Design Templates.
Official Page Styling
Special styling is reserved for web pages that are published as part of the department's official public face. In addition to the illuminated sidebar menus, this style defines a distinct "masthead" image for each major section of the website.
New pages are created by copying the underlying source code from another page in the same section, then changing the title and body. This is typically done using the Macromedia Contribute web page editor.
Custom Variations
The standard designs provide a unifying theme for the departmental website, and it is usually best (and easiest) to use one of them without modification. However, it is possible, and sometimes necessary, to augment or vary the design for a particular situation. This is not without risk and should be done carefully.
The standard design is defined by CSS style sheets, HTML server-side include files, and graphical elements. While it is possible to inspect these files, and use this knowledge to produce variant styles, you should resist this temptation. The underlying details have changed in the past and are likely to change again. Only the published interfaces should be considered "safe" and relatively immutable.
The best way to create variations on text and table styling is by supplementing the standard style sheet with additional CSS directives, either by specifying an additional style sheet file or by adding style directives within the HTML file. Added styling should be defined in terms of the HTML structure without reference to internal details of the standard style sheets.
If alternate graphics are needed, it is safest to create a self-contained set that does not rely on the system collection, for that can change without warning.
Validating Pages
A well-formed page is more likely to produce a consistent appearance across different browsers and operating systems. Mechanical validators can detect and report many of the errors that cause portability problems.
The standard header provides a hidden link for validating a web page. Clicking the right edge of the blue banner bar calls the W3C validator to produce a report. Fixing the problems it reports will improve the robustness and portability of a page.
Send questions about this page to