Web templates & requirements

Web templates & requirements > University of Louisville

Templates for use in developing U of L Web pages are now available. However, if you choose not to use the official university templates, you must adhere to the guidelines spelled out in the Web Style Guide.

Type of templates available

We currently have one type of layout available: the left-navigation template, with 2- and 3-column versions, already in use on many U of L Web sites (example of a site using the left-navigation template currently).

We are currently developing an accessible version of a top-navigation scheme, with subnavigation available (a tab-like navigation system), that a few Web sites have already employed (example of a site using the top-navigation system in development).

Download the templates

Left-navigation template (.zip archive) - includes 2- and 3-column versions and a localresources/ folder, where all dependent files (images, server-side includes, style sheets, etc.)

How to use the left-navigation template

NOTE: The following instructions assume a basic understanding of HTML and transferring files to U of L servers. If you have any questions, please contact Neil Gibbs at 852-8857 or by e-mail.

2-column template
3-column template

2-column template line-by-line instructions

Open the 2column.html file in your editor. The first line will look like this:
```
<!--#include virtual="/_resources/includes/header1.html"–->
```
Leave this line of code at the top. This must be the first line of the page. This server-side include defines the document type and includes the official university style sheet.
The next line is for specifying the layout. Since the left navigation layout is the only option currently, leave this line unchanged.
The next line specifies the 2- or 3-column choice. Since you are modifying the 2column.html file, leave this line unchanged.
The next line allows you to specify the style sheet for your department or unit. It will be located in localresources/css/[name].css. By default, the file is called department.css. Change the filename to that of your department or unit, and change this line to reflect the filename change. For example, Admissions would change their style sheet file name to admissions.css and change the line in 2column.html to look like the following:
```
<link rel="stylesheet" type="text/css" href="localresources/css/admissions.css" media="screen" />
```
The next line allows you to choose the color of the department title bar (see the title bar on this page, just below the U of L logo, as an example). You have five color choices based on the official U of L color palette: green, gold, blue, purple and yellow (default). For example, if you wanted to choose gold as the color of your department bar, you would change the line to the following:
```
<link rel="stylesheet" type="text/css" href="/_resources/css/leftnav/gold.css" media="screen" />
```
The next line includes the official university header. Leave this line unchanged.
On the next line, specify the title of the page. For example, Admissions' Campus Visit program would want this title:
```
<title>Campus Visits &gt; University of Louisville</title>
```
Notice the "> University of Louisville" added at the end of the page title. All U of L pages must have this piece of code at the end of their page titles.
You can add custom CSS styles using the <style> element, javascripts using the <script> element, <meta> elements such as the description, and other HTML that would normally be nested in the <head></head> elements right after the page title. For example, if you wanted to add a custom javascript file that is needed by elements in the content area of the page, you can add just below the page title:
```

<title>My Title &gt; University of Louisville</title>
<script type="text/javascript" src="custom.js">
```

The next line specifies the department or unit left navigation file, which also includes the department title. This file is located in localresources/includes/leftnav.html. Change this file, using the existing placeholder HTML as a guide, to include your navigation links and department title. For example, the leftnav.html file for this site looks like this (changed elements in bold):

<div id="department">
  <a href="/web/"><h1 id="departmenttitle">Web Development at U of L</h1></a>
</div>
<div id="navigation">
  <ul id="categorynav">
    <li><a href="/web/accessibility/">Accessibility</a></li>
    <li><a href="/web/cms/">Content Management System (Plone)</a></li>
    <li><a href="/web/styleguide/">Style Guide</a> </li>
    <li><a href="/web/documentation/">Technical Documentation</a></li>
    <li><a href="/web/templates/">Templates</a></li>
    <li><a href="/web/webguides/">WebGuides Mailing List</a> </li>
  </ul>
</div>

Back in 2column.html, make sure this line points to localresources/includes/leftnav.html.

The next line labeled "Content" defines the content area. Do not change this line.

The next line defines the "breadcrumb" navigation. Separate each entry by using the ">" code and a space before and after it. For example:

<div id="breadcrumbs">
  <a href="http://www.louisville.edu/">U of L Home</a> &gt;
  <a href="http://www.louisville.edu/web/">Web Development at U of L</a>
</div>

The next line specifies the page title. The page title must be enclosed by an <h2> element. For example, a page titled "Leave Policy" would have the following:
```
<h2>Leave Policy</h2>
```
Everything above the last </div> element is for your content. Be sure to leave the last </div> element unchanged. Enter your content using appropriate HTML tags for each type of content you are creating (<h3> - <h6> for headings, <ul> for bulleted lists, <ol> for numbered lists, etc.). Also, per the Style Guide, use XHTML 1.0 elements.
It is recommended that the following code be included at the end of your content area, just before the line labeled "University footer:"
```
<hr />
<p class="topofpage"><a href="#header">Top of Page</a></p>
```
This is a useful feature for those using assistive technologies and the keyboard to navigate Web pages.
Leave the line labeled "University footer" and everything below it. This must be the last item on the page.
Save the file using a sensible filename (example: the leave policy page would be named leavepolicy.html) and upload it to your area on the U of L server.
Validate the file for HTML errors at validator.w3.org.

Top of Page

3-column template line-by-line instructions

Open the 3column.html file in your editor. The first line will look like this:
```
<!--#include virtual="/_resources/includes/header1.html"–->
```
Leave this line of code at the top. This must be the first line of the page. This server-side include defines the document type and includes the official university style sheet.
The next line is for specifying the layout. Since the left navigation layout is the only option currently, leave this line unchanged.
The next line specifies the 2- or 3-column choice. Since you are modifying the 3column.html file, leave this line unchanged.
The next line allows you to specify the style sheet for your department or unit. It will be located in localresources/css/[name].css. By default, the file is called department.css. Change the filename to that of your department or unit, and change this line to reflect the filename change. For example, Admissions would change their style sheet file name to admissions.css and change the line in 2column.html to look like the following:
```
<link rel="stylesheet" type="text/css" href="localresources/css/admissions.css" media="screen" />
```
The next line allows you to choose the color of the department title bar (see the title bar on this page, just below the U of L logo, as an example). You have five color choices based on the official U of L color palette: green, gold, blue, purple and yellow (default). For example, if you wanted to choose gold as the color of your department bar, you would change the line to the following:
```
<link rel="stylesheet" type="text/css" href="/_resources/css/leftnav/gold.css" media="screen" />
```
The next line includes the official university header. Leave this line unchanged.
On the next line, specify the title of the page. For example, Admissions' Campus Visit program would want this title:
```
<title>Campus Visits &gt; University of Louisville</title>
```
Notice the "> University of Louisville" added at the end of the page title. All U of L pages must have this piece of code at the end of their page titles.
You can add custom CSS styles using the <style> element, javascripts using the <script> element, <meta> elements such as the description, and other HTML that would normally be nested in the <head></head> elements right after the page title. For example, if you wanted to add a custom javascript file that is needed by elements in the content area of the page, you can add just below the page title:
```

<title>My Title &gt; University of Louisville</title>
<script type="text/javascript" src="custom.js">
```

<div id="department">
  <a href="/web/"><h1 id="departmenttitle">Web Development at U of L</h1></a>
</div>
<div id="navigation">
  <ul id="categorynav">
    <li><a href="/web/accessibility/">Accessibility</a></li>
    <li><a href="/web/cms/">Content Management System (Plone)</a></li>
    <li><a href="/web/styleguide/">Style Guide</a> </li>
    <li><a href="/web/documentation/">Technical Documentation</a></li>
    <li><a href="/web/templates/">Templates</a></li>
    <li><a href="/web/webguides/">WebGuides Mailing List</a> </li>
  </ul>
</div>

Back in 3column.html, make sure this line points to localresources/includes/leftnav.html.

The next line labeled "Right column here" defines the content in the right column. Everything in the <promo></promo> elements will show up in the right column.
The next line labeled "Content" defines the content area. Do not change this line.