University of Wisconsin - Stout

You may customize the template for your department by using custom style sheets to modify the graphic elements and colors. You should also modify the navigation and footer with your department information.

Your page must conform to the University Identity Standard, which governs the use of the logo and fonts. The templates and style sheets ensure compliance with this standard. For more information about Stout's Identity Standards and their web applications, contact Barbara Button.

Graphic elements

We have created a small library of UW-Stout photographs for you to use in your templates. If you wish to use your own image, resize and optimize your image for the web to be 200 pixels wide. The height should be between 100 and 400 pixels. LTS Photography is available to take custom photographs if you desire.

If your image contains text, the text must be one of the university approved typefaces. These fonts are part of the university's identity program and ensure consistency and visual unity in publications produced throughout the university. For this reason, typeface selection in graphics is limited to Franklin Gothic and Weiss. See below.

Illustration of Franklin Gothic and Weiss typfaces.

Web staff will add text to your photograph using official fonts if you do not wish to purchase them. Contact the webmaster for more information.

Instructions for inserting your image

  1. To put the image into your page, open downloaded basic.dwt in Dreamweaver.
  2. Select the image.
  3. In the Property Inspector, type in the location of the image in the "Src" area.

For this page, we used http://www.uwstout.edu/images/corner/43.jpg.

Colors

Colors available for the template are listed below. We suggest choosing your photo first, as the look of you page will be affected by the colors present in the photo combined with the template color. The style sheets other than default apply the header and navigation colors.

Color Palette
Color Sample Style sheet
Default Headline http://www.uwstout.edu/styles/basic.css
Blue Headline http://www.uwstout.edu/styles/blue.css
Green Headline http://www.uwstout.edu/styles/green.css
Blue Green Headline http://www.uwstout.edu/styles/bluegreen.css
Brown Headline http://www.uwstout.edu/styles/brown.css
Maroon Headline http://www.uwstout.edu/styles/maroon.css

Instructions for stylesheet linking

  1. Using the Design tab in Dreamweaver, remove the style sheet that will not be used (default is basic.css).
  2. Select the Attach Style Sheet icon, the first one on the bottom of that side window.
  3. Enter the URL/Link of the color style sheet you want to use and select Import and click OK.

Navigation

Located right after the Image and the Skip navigation link are the navigation lists. Don't remove the Skip navigation link; it is used as a navigation aid to disabled users of the site.

Navigation helps a user navigate your site. Like the stars in the sky they should appear on all pages within your site, and should seldom be changed. News and other links that change frequently should be part of your content area. A long list of links to external sites (pages not a part of your site) should appear on a page called "Links."

Navigation is most effective if it reflects the structure of your site. For example, this site has a site map that looks like this:

Web Developers Process site map

Although the content spans many folders on the server, the navigation is chunked up to match the site map.

Footer information

You can leave the first set of links alone if you want; they go to a contact form and About this site information. You can make your own contact page, but mailto links are highly discouraged because they are easily harvested by spammers.

The next line is the date and copyright information. Normally the date must be updated manually after changes are made. There is an easy way to have our server automatically insert the correct date for you.

In Dreamweaver's code view, find the updated line. It looks something like the code below:

Updated: January 27, 2006 © University of Wisconsin Board of Regents

Copy the following code over the old code. This code will only function correctly if all of the pages in your site end with the .shtml file extension.

Updated: <!--#config timefmt="%B %d, %Y" --><!--#echo var="LAST_MODIFIED" --> © The Board of Regents, University of Wisconsin

Once you've inserted the code, our web server will automatically insert the correct date when you upload the file(s).

Finally, your contact information and department name are important. Type your office information and link the department name.

Save changes

Now go to File » Save As Template.... And select your site from the list (maybe selected by default). And you can give the template a different name if you like (i.e. CAStemplate). And then click Save.