Fitchburg State College
Your Location: FSC Home > Offices & Services > Web Guidebook

Web Guidebook: Style Guidelines for Academic Department Websites


Navigation Elements | Images | Colors | Web Editors | Maintenance


Navigation Elements

Academic departments may choose to use the FSC navigation bar at the top of each web page. The navigation bar is available in four colors.

*Note that the navigation bars should never be "Saved" from the web using a web browser and then used to create a web page.

screen shot

screen shot

screen shot

screen shot

The navigation bar can be obtained using one of two methods:

  1. Download one of the below blank web pages (note files are .cfm and need to be saved with that extension) that already contains the navigation bar.
    Windows: Right click one of the links and choose "Save Target As..." or "Save Link As...".
    Mac: One-button users should click on the link and hold the button down until a menu appears. The commands are "Download Link to Disk" or "Save this Link as..."

    White Navigation Bar Page
    Black Navigation Bar Page
    Green Navigation Bar Page
    Blue Navigation Bar Page
  2. - or -

  3. Insert two snippets of code into the HTML of each page in your website. Note that the navigation code is written in ColdFusion so web files must be saved with a .cfm extension.
White Navigation Bar
Insert the following between the <head></head> tags:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT" SRC="/community/_scripts/rollovers_nav_strips_wh.js">
</SCRIPT>

Insert the following just after the <body> tag:

<!--TOP NAVIGATION STRIP-WHITE-->
<cfinclude template="/community/_includes/white_nav_strip.txt">
<!--END TOP NAVIGATION STRIP-WHITE-->
Black Navigation Bar
Insert the following between the <head></head> tags:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT" SRC="/community/_scripts/rollovers_nav_strips_blk.js">
</SCRIPT>

Insert the following just after the <body> tag:

<!--TOP NAVIGATION STRIP-BLACK-->
<cfinclude template="/community/_includes/black_nav_strip.txt">
<!--END TOP NAVIGATION STRIP-BLACK-->
Green Navigation Bar
Insert the following between the <head></head> tags:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT" SRC="/community/_scripts/rollovers_nav_strips_gr.js">
</SCRIPT>

Insert the following just after the <body> tag:

<!--TOP NAVIGATION STRIP-GREEN-->
<cfinclude template="/community/_includes/green_nav_strip.txt">
<!--END TOP NAVIGATION STRIP-GREEN-->
Blue Navigation Bar
Insert the following between the <head></head> tags:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT" SRC="/community/_scripts/rollovers_nav_strips_blue.js">
</SCRIPT>

Insert the following just after the <body> tag:

<!--TOP NAVIGATION STRIP-BLUE-->
<cfinclude template="/community/_includes/blue_nav_strip.txt">
<!--END TOP NAVIGATION STRIP-BLUE-->


Images

When saving images use the following general guidelines:
Photos: The web file format for photos is JPEG.
Graphics: Most non-photographic images should be saved as a GIF file (also called CompuServe GIF or Graphics Interchange Format).


Colors

The color values of the navigation bars are as follows:

White: #ffffff (RGB Value = 255/255/255)
Black: #000000 (RGB Value = 0/0/0)
Green: #003300 (RGB Value = 0/51/0)
Blue: #003399 (RGB Value = 0/51/153)

Web Editors

Many web editors will work fine with the navigational bars, however, standard web editors on-campus are FrontPage (Windows) and Dreamweaver (Mac). To get this software installed contact a website support person.


Maintenance

It's important to keep on top of your web updates. More and more, people are using the web as a major information source. Out-dated information can be more detrimental than none at all. List a contact person for visitors to email in the event that there is a broken link, etc. to report.