WRK Links

WRK Home
Who Can Help
Site Component Primer
Adding Content Primer
Site Component Library
Tips and Tools Archive

Navigation

Overview
Components
Instructions

1: Navigation
2: Career Opportunities
3: Faculty Expertise
4: Department Information
5: Course Web Pages
6: Undergrad Opportunities
7: Publications & Orgs.
8: K-12 Involvement

Component One: Navigation Header and Footer Bars

Note: Read all of the instructions below before saving any files.

There are two sets of bars:

• Set One consists of transparent .gif files for light-colored backgrounds.
• Set Two consists of maroon .jpg files for dark-colored backgrounds.
• Regent's Copyright information for the Footer bars

Each set contains three bars. Each bar is divided into three or four graphics to facilitate screen-reader usability.

• Header 1 contains an image for the "text-only version" button and consists of four images.
  
• Header 2 has no "text-only version" and consists of three images.
  
• Footer consists of three images.

Utilizing the Navigation Bar sets:

• Save each image to your "images" folder for your Web site. (Browsers and HTML editors vary on instructions. Please refer to your software's help menu.)
  
  
• Do not change the names of the images.
  
  
• Create two table cells or layers 33 pixels high and 600 pixels wide, one at the very top of your page for the header, and one at the very bottom for the footer.
  
  
• Insert the images into the cells or layers in the order they appear here, putting all of the images for each bar into one cell.
  
  
• Link your "text-only version" image to your text page.
  
  
• Link "Twin Cities campus" to http://www1.umn.edu/twincities/.
  
  
• Link "Search" to http://search.umn.edu/.
  
  
• Check your alt tags.
  
  
• Make sure to include the Regent's copyright information that follows the Header and Footer Bar Sets.

Transparent Header and Footer Bar Set

Header One w/ text-only button:

graphics and file names:

navwht.gif (navigation white header text button)

navwhUT.gif (navigation white header U Text)

navwhc.gif (navigation white header campus)

navwhs.gif (navigation white header search)

Header Two w/o text-only button:

graphics and file names:

navwhU.gif (navigation white header U)

navwhc.gif (navigation white header campus)

navwhs.gif (navigation white header search)

graphics and file names:

navwfc.gif (navigation white footer campus)

navwfs.gif (navigation white footer search)

navwfU.gif (navigation white footer U)

Maroon Header and Footer Bar Set

Header One w/ text-only button:

graphics and file names:

navmhT.gif (navigation maroon header Text button)

navmhUT.jpg (navigation maroon header U Text)

navmhc.jpg (navigation maroon header campus)

navwhs.jpg (navigation maroon header search)

Header Two w/o text-only button:

graphics and file names:

navmhU.jpg (navigation maroon header U)

navmhc.jpg (navigation maroon header campus)

navmhs.jpg (navigation maroon header search)

graphics and file names:

navmfc.jpg (navigation maroon footer campus)

navmfs.jpg (navigation maroon footer search)

navmfU.jpg (navigation maroon footer U)

Regent's Copyright Information

Example: