University of Rochester
EMERGENCY INFORMATIONCALENDARDIRECTORYA TO Z INDEXCONTACTGIVINGTEXT ONLY

Using The University Templates

To go along with the University homepage redesign of January 2004, templates have been created to continue the look and feel of the design. In an effort to make the templates as flexible as possible, there are three different layouts and four different header graphics to choose from. We encourage central administrative units to use these templates. Any University unit, office, or department may use any of the layouts and headers available.

Templates and Server Side Includes (SSI)


Why Use Templates?
The University Web Group and Information Technology Services (ITS) recommend that you use the University-wide templates. Administrative units are expected to use the templates. College departments can choose to use these templates if they wish, but they are not required to. There are several benefits to using the templates:

  • They reduces the amount of time that webmasters need to spend developing images for an individual look and feel for a site;
  • A consistent place and style for links makes it easier for users to navigate around the entire University Web site;
  • Consistent visual design allows users to always know that they are looking at pages associated with the University of Rochester.
  • If your site is in the University templates, any updates to the templates (new or changed links, color schemes, or graphics) will automatically appear on your site. This keeps your site from getting "out-of-sync" with the University site as a whole.

What are Server Side Includes (SSI) and Why Do We Use Them?
The templates have several lines in them that look like this in HTML:

<!--#include virtual="/templateincludes/narrow_menu_architecture.txt"-->

or in PHP code:

include_once=("/usr/cwis/data/www-data/templateincludes/narrow_menu_architecture.txt");

This is called a Server Side Include (SSI). When a user tries to view the Web page, this line is automatically replaced with all the HTML and content in the narrow_menu_architecture.txt file. These "includes" were designed to make maintenance of the site very simple. For example, if the URL for the "Directory" in the top menu bar changes, the the University webmaster can have that change appear on every site in the University template simply by updating the include files.

These lines of the template should never be changed, and you should never replace these lines with the code from the .txt files themselves. If you open a page in your browser and then go to "View Source," you will see that the lines of code pointing to the includes are gone and have been replaced with the content of each include file. Do NOT copy-and-paste this code directly onto your page; that is often referred to as "hard-coding" your pages and it means you are no longer linking to the Server Side Includes. Any changes to those include files will not be reflected on your site, and your site will become "out-of-sync" with the rest of the sites in the templates.

NOTE: When the templates are used they MUST BE USED INTACT. You may not use parts of the templates or isolated graphics from the templates. Under no circumstances may the graphics be altered. If you have questions regarding this policy, please contact the University Web technical coordinator.

Template Layouts

There are three different template layouts to choose from:

  • Two-column wide menu: These bear the closest resemblance to the pages that link directly off the University homepage (e.g., Alumni, Admissions, etc.).
  • Two-column narrow menu: These have a narrow left-side menu.
  • Three-column: These have a narrow left-side menu and also a right column to use for features, news, events calendars, sidebars, profiles, etc.

Template Header Graphics

There are four "themes" of template header graphics to choose from.

Rush Rhees Library

Library header

Architectural details

Architecture header

Nature

Nature header

Students on campus

Campus scene header

Template Files

Once you have chosen the layout and header theme you want to use, click on the corresponding template file from the list below. Then in your Web browser window, choose "Save As..." from the File menu and save as the file you want to create (e.g., "officehours.html"; the new name you give it should end in .html, not .txt). Windows users can also right-click on these links, then chose "Save target as..."

Then simply add your own content to the areas provided. DO NOT CHANGE OR DELETE THE REST OF THE CODE. Any changes to the template code will cause the template structure to break and your pages to display incorrectly.

Two-column wide menu

Two-column narrow menu

Three-column

What Are Style Sheets?

These templates use style sheets, also known as CSS (Cascading Style Sheets), to control margins, spacing, the side menu font, and the seasonal color scheme. Style sheets are a way of applying design elements across an entire Web site quickly and easily. The style sheets used in the templates ensure that your site will look clean and professional even if you make no other style additions, while still giving you the freedom to apply your own font styles and colors or other design elements should you choose to.

All the template files contain the following piece of code:
<link rel="stylesheet" type="text/css" href="/templatestyles/templates.css"> <style type="text/css" media="all">@import url(/templatestyles/templates_advanced.css); </style>

DO NOT DELETE THIS CODE. You may add a link to your own style sheet, or add an embedded style sheet, but you must also maintain the link to this style sheet for the templates to display correctly. If you do link to or embed additional styles, add them AFTER the style sheets provided in the template.

There is an optional default style sheet available that will apply consistent fonts to your headings and body text. To use the default style sheet, add this line of code to the page(s) AFTER the style sheets provided in the template.

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

To learn more about easy ways you can use styles to improve the look of your pages, visit the Style Sheet Tutorial.

Adding Content

There are four areas of the templated page (each area is labeled in the template files) where you will add your own site content:

  1. Title and meta tags
  2. Side menu navigation
  3. Main body
  4. Right-hand sidebar (three-column layout only

Adding titles and meta tags
Titles are an important part of any Web page; they are displayed in the top navigation bar of Web browsers, and they are used by search engines as they "crawl" the Web. Every page must have a unique title specific to the content. Titles should be concise and descriptive. Remember that this is the text that is displayed by most search services when they list their search results.

The template contains a line of code that reads

<title>Your Site Title Here</title>

Add your site title between the two title tags.

Meta tags are less important to search services, but they also play a role in how a site is indexed and displayed. Some search services use this text for the description given in the results. There are two meta tags of interest here:
<meta name="description" content="Your description goes here">
<meta name="keywords" content="Your keywords go here separated by commas">

Begin by listing all the keywords and phrases that a person might use to search for your page. Then prioritize them, listing the most important first, separating the words with commas. Duplicate the list in uppercase, lowercase, and titlecase because some search services are case sensitive. Then using these keywords and phrases write a description of your site. In the case of University sites, location is important to include in the description. The first 256 characters of the description are the most important part as some search services truncate the description to that limit.

Direct entry
The template contains a line of code that reads:
<!-- SIDE MENU LINKS HERE -->
followed by several lines of links. These lines can be replaced by any number of links you wish to use.

NOTE: In most cases, the side menu navigation should be the same on all the pages of your Web site. This is called "persistent navigation," and it helps users become accustomed to your site and its structure. The only thing that should change from page to page is which link is left unlinked. For example, your links would look like this on a department's "Office Hours" page:

Study Abroad

Office Hours

Services We Offer

Handbook

Using an include directive for navigation
When working on a large site with a lot of pages, it is often helpful to use an include directive for your side menu navigation. Save the site's side menu as a text file named links.txt. Then place a line like this in the template instead of the actual links:

<!--#include virtual="/College/AAH/links.txt"-->

NOTE: Replace the /College/AAH/ with the path to your directory.

Any change made to the links in the links.txt file will then be replicated on all the pages in that site. This can save a great deal of time when updating and maintaining large sites.

Main body
The template contains a line that reads:
<!-- MAIN PAGE HERE -->

Beneath that line of code you can add pretty much anything you want to the main body of the page: Text, images, tables, etc. See the Web Design Tips section of this handbook for advice on Web page design.

Right-hand sidebar
If you are using the three-column layout, you'll find a line of code that reads:
<!-- SIDEBAR HERE -->

Beneath that line of code you can add the content for your right-hand sidebar. You can include images in the sidebar if you wish. The sidebar will expand in size to accommodate the widest element in it.

NOTE: When using the three-column layout, it is not necessary to apply that layout to every page in your site, only to those pages that require a right-hand sidebar. You can mix-and-match between the three-column layout and the two-column narrow layout if you choose to.

Content last modified: Tuesday, 06-Feb-2007 14:20:10 EST
Questions or comments