Publication Standards: How to use the Web templates
After you've downloaded the 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
- section_2_1.html — another template variation 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
- includes — a folder that contains:
- main.css — the stylesheet that controls the appearance of the templates
- supplemental.css — a blank stylesheet where you can define revised or new styles (see below)
- print.css — the stylesheet that controls the appearance of pages when they are printed
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 CSS file (the style sheet) is central to the appearance of these templates, you should refrain from modifying the main.css file. Instead, use a supplemental style sheet file and import it after the main css file, as in:
<style type="text/css">
@import url(/includes/main.css);
@import url(/includes/supplemental.css);
</style>
This will allow easy updates of the main style sheet, while allowing you to add new styles and modify or override existing styles easily. [Note: The templates already contain a blank supplemental.css style sheet file for your use — just populate it with your new or revised styles.]
Bear in mind that while the style sheet is 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.