Resources

Web Page Design Templates

These instructions tell how to use a set of template files to create a personal or project web area that is harmonious with the department's standard style.

Sample Pages

Two sample pages illustrate the appearance produced by the page templates. (Although the menu on the sample pages lists several pages, only the Home and Other pages are actually implemented.) These sample pages, and their associated files, function as a skeleton for building your own web area.

Implementation Techniques

These pages use XHTML 1.0 for content and CSS 2.1 (Cascading Style Sheets) for font styling and page layout. These technologies are supported by all modern browsers.

XHTML is the latest version of HTML, and it's a little fussier than the original HTML. Tags must be lower case, values must be quoted, and all tags must be closed: <hr /> or <br clear="all" /> or <p>...text...</p>.

JavaScript is used for menu highlighting. It is not vital, and the menus still function with JavaScript turned off.

Server-side includes are used to incorporate common code from shared files. This is done on the webserver, so it is not browser dependent, but it does mean that the pages are not browsable as local files.

HTML, graphics, style sheets, and JavaScript are loaded from the /style/ directory of the webserver. If you're building pages for use within a virtual host, create a symbolic link to ../../style in the virtual host's root directory.

Directory Structure

These instructions produce a single, flat directory containing images, HTML pages, and an additional file for the common menu. This extra file adds a little initial complexity but makes maintenance easier as the pages evolve.

Process Overview

A new web area using standard templates can be created this way:

Copy the sample files.
Customize the images.
Customize the menu.
Create the actual content.
Install the pages.

Creating the content is the only one of these that takes much time, and the challenges there are creative, not technical.

The process described here creates a new web area from scratch. If you wish to convert an existing set of pages, follow these instructions in a test area and copy prose from the old pages; then install when finished.

Initializing the Files

Don't just copy the HTML source code from pages displayed by a browser; that code has been preprocessed by the webserver. You want the original source with its #include directives unexpanded so that your pages will track any local styling changes and so that you can change a shared page menu by editing a single file.

Download the ZIP archive of sample files. Unpack this to create a directory named sample, then move the files to your allocated web area. Check that the directory and all the files are world readable. You should be able to view the unmodified pages in a web browser if you give the proper URL on the department webserver. They will not display properly as local files.

Photograph

The sample home page includes a photograph that is not your likeness. Either replace the file headshot.jpg with a different 120×150 pixel JPEG photograph, or delete the line in the index.html file that references it.

Banner Image

The standard header provides space for a 468×68 pixel header image to be displayed on all pages. The sample setup includes a blank image. Replace the file banner.gif with another GIF image of the same size if you have a logo or other image to display. You can alternatively use a JPEG or PNG image by editing the definition of BANNER in the .html files.

Page Menu

Every page displays a navigation menu on the right-hand side. The sample menu lists several pages although only two of those actually exist. Decide on an initial set of pages (you can change this later) and use a text editor to modify the list in the file common.inc.

Menu Highlighting

The standard page design calls for the current menu entry to be "highlighted" using JavaScript code. This is accomplished by assigning each menu entry a CSS id value that matches its filename. As you change entries in the menu, change the id values to match the file basenames.

The home page entry is an exception. Its id value must match the name of the containing directory. For a personal page, this is typically your Unix username. For a project page, this is typically the project directory name.

Home Page

The home page, named index.html, has been initialized with data for a fictitious professor. Edit this page and replace the data with your own.

The e-mail entry uses a JavaScript atcs(username) function to produce a valid mail link from an obscured form that is less obvious to web crawlers. To use this, just change the user name of sample in the code to your own username or project mail alias. Alternatively, you can just replace the line with a simple mailto: link if you'd prefer to avoid such trickery.

Other Pages

Now create the additional pages that you added to the menu. For each page, make a copy of the file other.html (not index.html, which is atypical) and replace the dummy text with some actual content.

Page Titles

Be sure to edit the title of each web page you've created. The <title> element is near the front of the file, with the metadata, so it's easy to miss; but it's important, because browsers use it for window and bookmark labels. If you don't change the title, your pages will be inanely labeled My Web Page and My Other Stuff. You might instead use your name for the home page title, and add a suffix like —Research for other pages.

Testing

The easiest and obvious way to test web pages is to open them in your favorite web browser. Because of the use of server-side includes, you will have to install them on the website and reference them by URL, rather than browsing files located on your local disk or in /cs/www.

Your pages have the best chance of looking good in multiple browsers if they are valid XHTML. There are automated checkers that can report errors. One of these, the W3C validator, can be run by selecting a hidden link: Click the far right edge of the blue header bar.

Under Linux, the tidy utility (when run with the --asxhtml option) can be used to clean up XHTML code.