Template Themes
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 -- global.css builds the basic structure of the page and styles the header, department area, and footer. You should have no reason to edit this file.
- secondary -- instead of calling a single secondary style sheet, we've created five different ones: formal.css, traditional.css, blue.css, different.css, and simple.css. Each creates a distinct visual "theme" for the main content area.
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. For example, see how this page would look if, instead of simple.css, it called one of the other secondary style sheets.
- "formal"
- "traditional"
- "blue"
- "different"
- return to "simple"
Keep in mind that the five pages you just looked at have identical HTML. The only difference is that they are calling different secondary style sheets. Imagine now that you are responsible for maintaining 1000 pages, each of which calls simple.css. By tweaking just that one file -- by changing a font size, a background image, a border color -- your entire site could be instantly transformed into something completely "different." For more examples of CSS design (and to see whose basic idea we've stolen here), check out CSS Zen Garden.
The Five Themes
We conceived of the themes as a kind of tool box. So, for example, if you want to use a serif font for your main text, take a look at "formal". (All links to themes will open in a new window or tab.) If you prefer a sans-serif, you can choose between Verdana ("traditional" or "blue") and Arial/Helvetica ("simple").
Likewise, we've provided a variety of page layouts, with one-, two-, and three-column designs for each theme. There are also five different styles of menus. If you want the left column to extend to the bottom of the page, or if you want to use background colors or images, you should consider using "blue". Each menu includes Major and Minor link styles for those of you who will be using hierarchical navigation.
If you want to modify a theme or mix and match elements of different themes, you will need to create a custom secondary style sheet (see How To).
Note: The "different" theme was created to demonstrate the power of CSS design and the flexibility of the new templates. However, it is not especially practical for real world use. We wouldn't recommend that you use it -- not "as is" at least.
Next: A brief how-to lesson »
