The purpose of the Web Style Guide is to maintain site consistency and integrity for UTD's main web site. The guide defines "look and feel" elements and should be applied to the top level pages, owned by University Web Services.

Required Software

Dreamweaver or Contribute from Macromedia are required. Pages depend on Dreamweaver templates to control the format.

Template Usage

The header and footer areas are non-editable regions. Body content between the header and footer is editable with the exception of the format of the rows and columns.

Who may use the template

Student service oriented departments, such as Enrollment Services, Financial Aid, and the Office of the Registrar may use the template. It is the responsibility of University Web Services to make sure that the Web Style Guide is being followed by the departments that choose to use the template. If you represent one of these departments, and would like to use the templates, please contact University Web Services by phone at x4995.

Who may not use the template

The template should not be used by individual departments and schools.

Template files

There are currently four template files:

1. default.dwt - This is the master template. It controls the header of all files including the other template files below, which are nested within it.
2. index.dwt - For the index page only - editable regions include body text area and footer.
3. subpages.dwt - for all sub pages - editable regions include body text area and footer.
4. enrollmentServices.dwt - created specifically for Enrollment Services. This file references the default.dwt, so moving this file will require some changes or detaching from the default.dwt because some links may break.

Top

Header and Footer

Header

To maintain branding, identity, and design consistency, all graphic elements in the header should remain unchanged. This area is controlled by default.dwt.

Footer

In order to maintain consistency and usability, it is required that all pages include the provided footer. The subpages include date of update and webmaster contact information. The main page footer contains additional information.

Top

Sitewide Navigation and Links

For usability and consistency, the following guidelines should be followed in all cases across the site:

All links should be green. For usability and to lessen confusion, no other text should be green.

All rollovers should be set to orange.

Left column navigation area should be limited to 20 links.

Top

Width Restrictions

Elements set too wide will push the width of the left column out of alignment, causing the page to look "broken" or poorly designed, and inconsistent with other pages. Therefore, it is critical that tables and other elements in the left column "links or description" area of the subpages not exceed a width of 210 pixels.

Any tables, images and other elements in the right column must not exceed a width of 470 pixels. If additional tables need to be created, it is best to set them to 100%. This allows the table to be adjustable based on user's browser width - (site is designed for a minimum 800x600 screen resolution).

Top

Image Usage

Index page

The main page feature image is randomized and it is recommended that only those images be used. No images should appear on the main page body text area.

Sub Pages

Each audience gateway page has a set of randomized images and it is recommended that only those images be used. No other images should appear within the body text area unless necessary. Images and all other elements should remain borderless. An example of image usage within the body text area is the history page.

All images must follow the width restrictions guideline. They must be high quality images. Most images do need to be treated to increase quality, either by cropping, adjusting levels, adjusting contrast or using other photo enhancement techniques.

The current site is set up to decrease the necessity of more images.

All images on the sub pages are set to 229x137.

CSS Stylesheets

There are 3 stylesheets:

1. default.css - styles shared by all pages.
2. mainBody.css - only for main page body tag styles
3. subBody.css - only for sub-page body tag styles

More CSS class specifications can be found on the following pages.

Main Page | Gateway Pages | Subpages | Department Pages

CSS for Audience Gateway Pages

Heading H1

<h1>Main Heading</h1>

class="bodytext" must be included in each <td> tag in each column:

<td width="50%" valign="top" class="bodytext">

Gateway Category

<h3>Gateway Category</h3>

-Gateway List

CSS class="gatewayList"

<p class="gatewayList">

Additional Heading Styles:

Heading H2

H2 is only used if a page requires the use of three headings. If only two headings are necessary, H1 and H3 are used. The use of H2 can be seen on the Research page as well as on this page.

<h2>Page Sub Heading</h2>

Left column Styles:

Image Size:
229 x 137 pixels

class="subDesc" is used for blurb text:

<td class="subDesc">

class="subNav" is used for links:

<td class="subNav">

class="navCurrent" is used to indicate the current page:

<p><a href="about.html" 
	class="navCurrent">
Introduction</a></p>

Top

Pages with Long Lists and Descriptions

For examples of pages with long lists and descriptions, follow the format on the academic programs, research, research centers and siteindex listing pages.

Meta Tags

The meta tag area is currently set to editable due to the fact that some pages have their own meta keywords. If however a more general list of keywords can be produced to cover all or most pages, this area can be set to non-editable from subpage.dwt file. Setting it to non-editable will also make it easier to make changes for all files at once.