Web Style Guidelines

Averett Web Style Guidelines
These brief guidelines are designed to help authors easily conform their pages to Averett’s new web style and should be used in conjunction with the graphical examples.

Required Elements
Averett’s site-wide navigation bars should be located at the top and bottom of each page. These elements are provided via the Templates discussed below. Our target browser size is
800 X 600 pixels. The header and footer are 745 pixels wide and a page height that will require little vertical scrolling is 400 pixels, including the header and footer.

April 8, 2005 4:17 PMtt web page are arranged according to the grid depicted in the online materials referenced above. These grids are also defined in our templates.

Page Dimensions: Overall page width is 745 pixels (px) and consists of (from left to right) the following layout areas:

• Left margin (10 px.)
• Side navigation column (128 px)
• Gutter (35 px.)
• Main text/image region (522 px)
• Right margin (50 px)

The main region for placing text and images is composed of these sub-areas:

• Column 1 (Height: 212 px, Width: 160px)
• Gutter (10 px)
• Column 2 (Height: 212 px, Width: 160px)
• Gutter (10 px)
• Column 3 (Height: 212 px, Width: 160px)
• Gutter (10 px)

The balance of the page, excluding the footer, is generally not filled.

Templates
There are three basic templates and multiple variations on these three basic templates. All require Macromedia Dreamweaver MX 2004 and are located on the server www.averett.edu; the ftp location on this server is /Public/Web/Templates. Most authors will find the template “site_temp2_1.dwt” helpful; this spans columns 1 and 2 for a wide area in which text may be entered while leaving column 3 available for portrait-style images.

Formatting links
After making a bit of text a hyperlink, one of Averett’s link styles should be applied; the major uses of links and their associated CSS style names are given below.

Formatting headlines
Section headings should have the style class “headline” or “chapter” applied.

Formatting text
Avoid the use of <FONT> tags as these interfere with CSS style tags. You may use compatible <STYLE> tags of your own, if necessary.

Images
Images containing large areas of flat color should be rendered in “web-safe” colors and saved as .gif files. Images containing many shades of colors
(e. g. faces) should be saved as .jpg images.

Always size images as you want them and then insert the image into a page. Never use table height and width tags to reduce or enlarge the size of graphics. Image sizes that work well with this design include: 161W X 212H, 161 X 161 and 320W X 212 H. Remember that out-sized images will distort the layout grid by expanding table cells beyond their intended size.

Site Colors

Becoming an author
Please contact webmaster@averett.edu to make the necessary arrangements. Please review Averett’s Web Policy.