BPP & Annual Safety Review 2008

Graphic: abstract safety image Back ButtonNext Button

Web Style Guide

Back and Next Buttons

  • The top Back and Next Buttons are images that should be linked to the appropriate pages.
  • The bottom Back and Next buttons are text links.
  • None of the Back and Next buttons in these template pages are linked. They will need to be manually linked. (Note, there is a # in the Link field so simulate a link for the purpose of testing the site. It should be removed when coding the links.)
  • If you wish, you can use javascript to link the "Back" buttons and links so that they always go back to the last page visited without having to link the button to a specific page. If you want to do this, put the following code, exactly as it appears below, in the Link field for the Back text and image:

    "#" onclick="history.go(-1);return false;"

Type Styles

The appearance of all the text and links in this website are controlled by the stylesheet.

Body Text - Arial/Helvetica/sans-serif, 0.85 ems. The size is specified in ems -- a variable size specification that enables users to change the text size if they wish.

Headings - Headings are default HTML styles, except for the color.

Colors - The following colors are specified:

  • The dark blue is: #145F72
  • The light blue is: #278CA5
  • The dark orange is: #E6500E

Link Styles

  • The default unvisited link is orange, underlined. Visited links are light blue.

  • The appearance of the navigation links in the footer is determined by a style class called "footer." These links are always white with no underline.

"Library" files

The site navigation and footer information are in Dreamweaver "Library" files. To change those links, edit the Library files. Everything about the Library files is the same as what you see on the website -- except for the type faces and spacing. Library files do not show the styles in the css stylesheet and appear as plain html. When you save changes to a Library file, you will be asked to update all files that contain that Library. You should do this, then upload all the updated files, including the LIbrary files, to your web server.

  • "main-headline.lbi"
    • This file contains the site title that appears in the heading.
    • It's appearance is determined by the css style "headline."
    • It is linked to the home page of the training, and the link may need to be updated when you place the site on the CPS server.
  • "footer.lbi"
    • This file contains the content in the footer.
    • Contact information has been added. It can be deleted if you do not need it.

About the Source Files (PhotoShop files)

  • CPS_SafetyTraining.psd is the master file for all the site images.

About the Header Image

Note that there are two versions of the header image:

  • home-header-bkgd.jpg
    • includes part of the large illustration on the left. It needed to be sliced this way because of the drop shadow that falls over the image.
    • If you change the large image on the home page, you will probably need to also replace the home-header-bkgd.jpg.
  • photo-page-header-bkgd.jpg
    • is the same as the other heder image except that it does not include any of the home page illustration.

Back    Next


Chemical Safety | Hazardous Waste | PPE | Hearing Protection | Respiratory Protection | BBP
Back Safety | Crane Safety | Lockout/Tagout | Electrical Safety | Welding Safety | Battery Recharger | Pressure Washer
Confined Space | Soldering Safety | Laser Safety | Industrial Truck | LP Gas | Ladder Safety | Fire Extinguisher
Machine Guarding | Grinding Wheels | Compressed Air | Compressed Gases