Publication Standards: How to use the Web templates
After you've downloaded the templates
Here is some basic information about the structure of the Web templates. For additional information, please see the site for the Staff Development class, Building Websites with the UC Davis Web Templates.
After submitting the template request form, you should have received an e-mail with a link to download the templates. If you haven't received such an e-mail, check your junk mail folder because some e-mail client applications may mistake this e-mail for spam. If there is no message in your junk mail folder, you may have entered an incorrect e-mail address in the form. Return to the form and try again.
The template files are downloaded as a .zip archive. Before you can use them, you may need to extract the archive using Stuffit Expander (Macintosh) or WinZip (PC).
After extracting the archive, you should have the following in the templates folder:
- index.html — the home page template
- section_1_1.html — a template on which to base second-level pages
- images — a folder for images that contains:
- common — a folder for images common to the entire site (e.g., the UC Davis logo in the header)
- photos — a folder for photos and other images that go on individual pages
- css — a folder that contains the CSS style sheets for layout, color and typography
Compatibility
These templates are compatible with all modern browsers. Although their appearance may degrade to varying degrees in older browsers (e.g., Netscape Navigator 4.x), they will still be functional.
Get familiar with the templates
The templates are best edited in a text editor, such as HomeSite (Windows) or BBEdit (Macintosh). If you are going to use a visual HTML editor, we highly recommend that you use the latest version of Dreamweaver (version 8 or above).
If you must use Microsoft FrontPage, you will need to work with these templates in code view. In FrontPage, the pages may not appear quite right when previewed, but they will display fine in a browser (do check your edited pages in a web browser to make sure they are rendering correctly).
Before you modify anything, open the HTML and CSS (Cascading Style Sheet) files in either Dreamweaver's code view or a text editor and look through the code, paying particular attention to the comments (the CSS file, main.css, is found in the includes folder). Start with the HTML files, especially if you are unfamiliar with using CSS for layout. See Components of the Web templates to see how the pages are constructed at the top level.
These templates use an all-CSS layout. That is, they use CSS, and not tables, for all layout tasks. Because the core CSS files (the style sheets) are central to the appearance of these templates, you should refrain from modifying those files. Instead, use the included supplemental.css style sheet. Adhering to this recommendation will allow you to apply updated stylesheets to your templated sites without deleting your own custom styles.
Here is what the stylesheet declaration block look like:
<!-- Static stylesheets -->
<link href="css/layout/common.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/color/common.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/typography.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Custom stylesheets -->
<link href="css/color/default.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/supplemental.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Print stylesheet -->
<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
As you can see, the stylesheets have been split up into files specific to layout, color and typography. The color styles have, in turn, been subdivided into two files: A common.css file that defines colors common to all color schemes and an additional color stylesheet that defines the color scheme of your site and that may be one of the following:
- default.css: Defines the default blue and gold color scheme
- blue.css: Defines a mostly blue color scheme
- gold.css: Defines a mostly gold color scheme
- gold2.css: Defines a mostly gold color scheme but with a page title area that features a while page title on a dark blue background
Bear in mind that while the style sheets are desirable for optimal visual appearance, a site built using the templates will continue to function with styles disabled (a common situation for certain types of users with disabilities).
Make global changes
Before copying the template pages to make individual pages, edit the parts of the template pages that will be common to your entire site, such the site title, navigation lists, page title, ownership information, and footer information.
In most cases, this will involve replacing placeholder text with your actual content and filling in link addresses in the navigation lists.
Build the individual pages
As you build the individual pages and fill them with your content, be sure to properly mark up your documents. Use the comments in the HTML and CSS files for guidance. Be sure to use the ID and CLASS attributes specified in the CSS file.
Pay close attention to proper structural and naming conventions in your files. For example, when you need a subhead, use the H1 through H4 tags (depending on position within the page hierarchy) rather than attempting to style text with the FONT tag to look like a subhead. Please don't use tables or spacer graphics to achieve layout effects.
These templates use a specific document type (DOCTYPE) called XHTML Transitional, that differs in several ways from previous versions of HTML. In a nutshell:
- Element and attribute names must be in lower case.
- All attribute values must be quoted (e.g., width="200").
- Nonempty elements require end tags (e.g., paragraph tags).
- Empty elements require either an end tag or a termination (e.g., image tags and break tags, <br />).
If you are unfamiliar with XHTML, these pages are a good place to start learning:
There are styles specified in the CSS file for various page elements (such as right- and left-aligned photos, and a right sidebar, both in the main content area) that there isn't room to describe here, so do refer to the CSS file often as you build your pages.
If you have questions, please contact for help.
Test your site
If you can, test your site in a variety of browsers (Internet Explorer, Firefox, Mozilla, Safari) and on both the Windows and Macintosh platforms, at least. While the templates "out-of-the-box" are fully compatible with most browsers and will validate to current standards, it is possible to introduce non-compatible and non-compliant elements as you build your pages.
Before publishing your site, check the spelling and grammar of all text on your pages. Nothing will make a site look more unprofessional than typographical errors and poor grammar.