How To Use the Template

One of the biggest difference between this template and the previous version is that it is fully web standards compliant, which means that it is constructed from cascading style sheets (CSS) rather than nested tables. Every page in the template calls two style sheets:

  • primary — 07-system.css builds the basic structure of the page and styles the header and footer. You should have no reason to edit this file. This file is centrally stored and is not provided in the template downloads.
  • secondary — a second style sheet (07-system-sub.css) controls the look of the content area. A copy of this file is included in the download packet. A copy is also kept in a centrally stored location. You may modify this file as you wish to customize your pages. You would also then need to modify the code to call your local copy of the file. If you want to use the standard, centralized style sheet you need not make any changes as the files included in the downloads already call it.

What's the point?

There are several advantages to standards-compliant design, including smaller file sizes and improved web accessibility. Another great advantage is that it allows developers to make site-wide changes instantaneously by tweaking a single file. To see this concept at work, look at the template site for UT Knoxville. For more examples of CSS design (and to see whose basic idea we've stolen here), check out CSS Zen Garden.

Getting started with the templates should be pretty easy. You just need to download the generic pages, plug in your content, and upload everything onto your server. Piece of cake, right?

Anyone who has been a web developer for more than a week or two has had the frustrating experience of inheriting someone else's code. There's no way around it, I'm afraid, but we've trimmed it all as much as possible and have commented the heck out of it. Read the code comments carefully. They should address most (if not all) of your questions.

About the download files

The zipped template includes three files: a two-column layout, a three-column layout, and the style sheet.

I want to use the template "as is" . . .

If that's the case, then we've done most of the work for you. When you look in the <head> of the template, you'll see the following:

<link type="text/css" rel="stylesheet" href="http://www.tennessee.edu/styles/07-system.css" />
<link type="text/css" rel="stylesheet" href="http://www.tennessee.edu/styles/07-system-sub.css" />

We're hosting 07-system.css and 07-system-sub.css style sheets on the main UT server, so you should have no reason to even touch the .css file that is included in the download package.

If you want to use the standard template but also need to include additional CSS formatting, we suggest that you create a third sheet and host it on your own server. For example, if you wish to format a table cell or create a style for H4, you should do so in a new .css file. Your <head> would then look something like this:

<link type="text/css" rel="stylesheet" href="http://www.tennessee.edu/styles/07-system.css" />
<link type="text/css" rel="stylesheet" href="http://www.tennessee.edu/styles/07-system-sub.css" />
<link href="http://www.myserveraddress.edu/css/new.css" rel="stylesheet" type="text/css" />

I want to modify a theme or create my own . . .

Great! That's why we've included the secondary style sheets in the download packages. Let's say you want to have a left column menu that extends the full length of the page but you hate the color that is used on the pages we provided. To tweak the template, make edits to 07-system-sub.css and then host it on your own server. Your <head> would then look like this:

<link href="http://www.utk.edu/cs/templates/css/global.css" rel="stylesheet" type="text/css" />
<link href="http://www.myserveraddress.edu/css/my-07-system-sub.css" rel="stylesheet" type="text/css" />

Next: What support is available »


Download Files Icon

Download Files


 

Contact The Web Team

Office of Creative Services
107 Communications
Knoxville, TN 37996
Phone: (865) 974-5920
Fax: (865) 974-6435
Email: webteam@utk.edu