Web Style Guide (2006-2007 version)

Redesign Instructions

How to Get Started on the Redesign

1. Decide which template(s) you will use for your site. The choices are:
   1. With left navigation and sub-navigation across the top.
   2. With only sub-navigation across the top.

   Note the flyouts of the left and top navigation are optional but special templates may need to be created. Erin created a special template and accompanying style sheets for Clinical Sciences without the sub-navigation flyouts and a special one for the cvmbs directory.

2. Create the file structure for your site.

   Webmasters have access to this location on the web server, www-documents/webmaster/redesign/. More info on location and permissions. There are subfolders named "templates", "css" and "images" containing the needed files to customize your templates for your department.

   We used the Diagnostic Lab in the following example. The file structure would look like this screen shot below:
   

   You will need to populate your department or unit folders with the necessary files and create and populate the /images and /css subfolders before you start customizing the template(s).

   Each css subfolder will contain 3 different style sheets per template, a (1) layout version that points to the (2) screen version when viewed on a screen and a (3) print version for when printed.

3. Create a site in Dreamweaver that points to your department folder. An expanded version of the Diagnostic Lab site in Dreamweaver looks like this screen shot below.
   

How to Reorganize your department "image" and "css" subfolders

(for sites that are already in the process of redesigning)

1. Open your site in Dreamweaver.

Customizing the Templates

Updating the footer

Towards the bottom of the template files, you will find the script tags that help generate the page's footer. It looks like the sample code shown below:

<script language="JavaScript" type="text/javascript"><!--
var emailAddress;
var contactName;
emailAddress="email@colostate.edu";
contactName="Webmaster";
//--></script>
<script src="http://www.cvmbs.colostate.edu/footer.js" language="JavaScript"
type="text/javascript"></script>

There are two variables after equal signs in quotes to replace, the emailAddress and contactName.

For example, on the Clinical Sciences template and pages, emailAddress would be updated from "email@colostate.edu" to "Charlie.Kerlee@colostate.edu" and contactName would be updated from "Webmaster" to "Charlie Kerlee", to look like this:

<script language="JavaScript" type="text/javascript"><!--
var emailAddress;
var contactName;
emailAddress="Charlie.Kerlee@colostate.edu";
contactName="Charlie Kerlee";
//--></script>
<script src="http://www.cvmbs.colostate.edu/footer.js" language="JavaScript"
type="text/javascript"></script>

Best practice would have you change this in the template you customize for your department or unit before you propogate more pages. In the event you need to update the footer after multiple pages are created, you can do this site-wide in Dreamweaver using the Find and Replace command.

The screen shot below, shows an example of finding the necessary Source Code in the Entire Current Local Site for cvmbs and replacing it with the updated code.

Please note that the image in the footer will appear as broken in Dreamweaver's interface, Preview mode and viewing in a browser using W:\www-documents\ in the address. See the screen shot below.

It will display in a browser using the http:// address because the image is called from the root of the web server and doesn't exist in your department sub-directory.

For the history of this JavaScript footer, please refer to the December 14, 2004 minutes.