Web Template Guidelines

Note to web publishers: validated templates are now available for download. These templates are coded to validate to HTML 4.01 Transitional or XHTML 1.0 Transitional doctypes. Download validated templates (zip format).

Introduction

The templates have been designed to work with most web authoring software packages; they can also be used by those who code by hand.

While every effort has been made to make the creation of web pages as straightforward as possible using these templates, they do assume a basic level of proficiency with the web authoring software that you use. For example, they assume that you know how to insert images, create headings, paragraphs and links (including e-mail address links), and that you know how to add ALT text to images.

If you do not have a basic proficiency with the web authoring software that your department uses, then it is not recommended that you create pages with these templates until you have acquired those necessary skills. Most web authoring software offers detailed instructions in help menus. The University also offers workshops on how to use Microsoft FrontPage and Macromedia Dreamweaver. Tutorials are available for using FrontPage with the USM Web templates specifically. A FrontPage Quick Start tutorial is also available.

Templates are provided to help unify the University's web presence, and must be used as they were originally designed. Anyone who knowingly alters a template in any way will be asked to fix or take down the pages created with that altered template. Similarly, those who try to replicate or create derivations of the University's official online look, for example by changing the colors, altering the graphics, or modifying the navigational links in the standard USM headers or footers, will be asked to remove those derivations from their pages. Templates must be used for all pages created in the new University online look.

Templates and/or official USM headers and footers should not be used on unofficial/personal pages. If you have questions, contact webmaster@usm.maine.edu.

Template Types

There are five main template types:

  1. Four Column Template: See the Division of Information and Technology site for an example.
  2. Three Column Template: See the Office of Research Compliance for an example.
  3. Two Column Template with No Navigation: See the "File Not Found" page for an example.
  4. Two Column Template with Navigation: The Benefits page is an example of this.
  5. Header/Footer Template: This template provides the web publisher with the most flexibility, and includes only a USM header and footer.

After opening a template in your web authoring software, before you begin inserting your content, save it with the filename of the page that you are creating. This way, you will not accidently save over the template file and will not have to download the templates again if you need to create more pages.

You will not see the standard University header and footer as you work on these templates. These elements will appear in their correct places when you upload the page to the USM web server and view it in your browser.

If you copy and paste content from an existing web page into a template using your web authoring software, be aware that you could also copy any HTML code associated with that content. This may cause unexpected results. If you wish to copy only the content and not the extra associated code, copy and paste the content from within the source code of the HTML page (avoiding the html tags), or from a text-only file such as Notepad.

Note: cutting and pasting directly from a Microsoft Word document into Frontpage can result in adding a lot of extra unwanted HTML code that could cause problems. To avoid this, when pasting into Frontpage from a Word document, select Edit > Paste Special from Frontpage's main menu and choose Normal Paragraphs with Line Breaks.

Instructions about what types of content should go in each template column are provided below. Putting types of content in columns that they were not designed to hold will cause unstable and unpredictable results. Altering the width of columns will also produce unpredictable results and cause pages to not display properly. Templates should not be altered. If you would like more flexibility, then use the Header/Footer Template.

Far Left Image Column

Templates 1, 2, and 3 above have a Far Left Image Column. Images that go in this column have to meet certain specifications. Ready to use images for this column are available online at the image bank. If you would like to use your own image in this column, contact webmaster@usm.maine.edu and your image will be produced to specification for you. You must have rights to be able to use this image (that is, by using the image you are not violating any copyright law). The image must also work well when cropped to this quarter circle format.

ALT text (or alternative text) is required for all images and graphics that you include in your pages. It is used by individuals who view your pages with screen readers. ALT text is a textual replacement for the image. You need to be familiar with how to add ALT text using your web authoring software. The software's help files should tell you how - Frontpage uses the term "Alternative Representations - Text" rather than ALT text. The image bank provides captions for each image that can be used as ALT text.

Although not visible in the templates, a border does separate this column from the Main Content Column. Therefore, do not add one.

Main Content Column

Each template (except for the Header/Footer Template) has a Main Content Column. The column is set up so that any textual content you add here will automatically be formatted in the appropriate style (font type, font size, and font color) when the page is uploaded to the server and viewed in a browser. Therefore, do not format textual content for font type, font color, or font size.

It is not recommended that you create any tables in this Main Content Column. This is because the textual styles which are built into this column (font type, font size, font color) will not be picked up by text in the table that you create. If you must use a nested table, and understand and are comfortable working with a page in its HTML source code, then e-mail webmaster@usm.maine.edu for instructions on how to workaround this issue.

At the bottom of this column, you should include a contact e-mail address for people to use to get more information if they need it, and to report problems with the page, such as broken links. This contact should be your department's official web publisher. See the USM Web Publishing Policies for the definition of a web publisher and for more information about the development of official USM web pages.

This column can also include your own images/graphics in the style of your choosing. However, do not use images/graphics that are more than 300 pixels wide. Also, do not use images produced for the Far Left or Far Right Image Columns. If you do use fixed width objects in this column, such as fixed width tables or large images, then test your page at 800 x 600 screen resolution (your screen may already be set to this resolution to make sure that the content to the right of the Main Content Column is not pushed off the page and may require horizontal scrolling to view it. Your operating system's help pages should tell you how to change your screen resolution.

Right Side Navigational Links Column

Templates 1, 2, and 4 have a Right Side Navigational Links Column. Only navigational links should be inserted here. Try to keep the link text as short as possible, as this column will become too wide. Also try to make the link text make sense if it were read alone, out of context.

It is recommended that you keep this set of navigational links consistent across all of your site's pages and present the links in alphabetical order. Don't forget to include a link back to your homepage! Again, it is not necessary to format textual content for font type, font color, or font size.

Far Right Image Column

The Four Column Template has a Far Right Image Column for up to three images. Ideally, this column should not run any longer than the Right Side Navigational Links Column: use one to three images accordingly. Use only images that are provided in the image bank for this column (the selection is quite extensive), otherwise the page will not display correctly. If you have your own images (and the rights to use them) that you would like to use, contact webmaster@usm.maine.edu — your images will be produced to the correct specifications for you. Again, ALT text must be provided for each image. Captions, which can be used for ALT text, are provided for each image in the image bank.

Visit the template download page to get the templates you need to get started.

Tutorials

The USM Computing site is maintained by Robin McGlauflin.