GWPP Templates

The page below is the template page. Click here to return to the Governor's Web Publishing Policy main page.

This page contains the Web page template header, footer, and Cascading Style Sheet code necessary in order to comply with the Governor's Web Publishing Policy. Visual examples of the header and footer appear at the top and bottom of this page. The HTML code for the templates are below. In general, anything that is bolded in the template code below is something that should be customized for your pages.

HEADER

The header consists of
1) A Skip Navigation Link
2) A table that holds the department banner graphic
3) A table for the horizontal navigation bar, a background image for the table
4) A750-pixel wide horiztonal rule
5 ) A few lines of Cascading Style Sheet (CSS) code that must be pasted between the <head> tags.

1) Skip Navigation Link

The "Skip Navigation" is an accessibility feature that allows users with screen readers to skip over repetitive navigation links and go straight to the main content. In this case, users skip the banner graphic and horizontal navigation and go to a target at the start of main content. We use a specifically designed code called "InvisibleLink" (used at Firstgov.gov) which makes the link useful only to screen readers and assistive technology -- virtually invisible to most other browsers. This line for the "Skip Navigation" should be the very first thing after the <body> tag.:

<div style="line-height: 1px"><a href="#skipnav" class="InvisibleLink">Skip to Content.</a></div>

The line above creates a tiny invisible text link on a line that is one pixel high. The target of the link is placed after the horozontal navigation table -- you will see that it is already there in the Horizontal Navigation code section below.

2) Banner Graphic

The banner graphic is provided for you by the Governor's office. The banner graphic should be a link to your department's main page. Banner graphics are the same size, so all you have to do is set the image location/name and link it to the appropriate page. Below is the code for the Banner Graphic table:

3) Horizontal Navigation Table

Each Department's main navigation links should be listed horizontally below the graphical header. This navigation bar should contain a Home link, a Contact Us link, an Online Services link and 3-5 additional links for a total of 6-8 links on the horizontal navigation. The Home link is first and links to the department's banner page. The Contact Us link is last and links to a departmental contact information page, which should include phone number, physical address and email contact(s). The Online Services link leads to a page with a listing of the department's online service, and at the end of the listing there should be a link to the state's Online Services page at http://www.tennesseeanytime.org/online/. If a department has no online services, the link should point to the state's Online Services page. Below the navigation table should be a 750-pixel wide horizontal rule.

Below is the code for the horizontal navigation table. The id="id1" inside the links is a CSS formatting identifier, which is what makes the text white and underlined when the mouse hovers over it. The formatting instructions for id="id1" are already in the code of the Cascading Style Sheets section below.

<table width="750" height="27" cellspacing="0" cellpadding="2" border="1" align="center" >
<tr valign="middle">
<td background="images/bg_dkblue.gif" align="center">
<div class="horiz_nav">
<a id="id1" href="your_home_page.html">Home</a>   |  
<a id="id1" href="link1.html">Link Name 1</a>  |  
<a id="id1" href="link2.html">Link Name 2</a>  |  
<a id="id1" href="link3.html">Link Name 3</a>  |  
<a id="id1" href="link4.html">Link Name 4</a>  |  
<a id="id1" href="link5.html">Link Name 5</a>  |  
<a id="id1" href="http://www.tennesseeanytime.org/online/index.html">Online Services</a>
  |  
<a id="id1" href="your_contact_page.html">Contact Us</a>
</div>
</td>
</tr>
</table>
<hr width="750">
<div style="line-height:1px"><a name="skipnav" class="InvisibleLink">Main content begins below.</a></div>

Below is the background image for the horizontal navigation table. You can right-click on it and save it in your files.

FOOTER

The footer consists of

The same footer should appear on all pages except official forms, publications, PDFs and documents.

The footer contains a 750-pixel wide horizontal rule, text links to "Tennessee.gov home," "Search Tennessee.gov," "A to Z Directory," "Policies" (which are Privacy, Security, Accessibility, Linking), "Survey," "Help," "Site Map," and "Contact Us." The links for "Search Tennessee.gov," "A to Z Directory," "Policies," "Survey," and "Help" will link back to the NIC servers at th URLs shown below. Appearing below the text navigation should be an image of the State Seal and departmental contact information. This image will be provided by the Governor's office and should link to the department's Contact Us page (the same page as it links to from the horizontal navigation bar and the footer).

Below is the code for the footer.

<hr width="750">
<div class="footer">
<a href="http://www.tennessee.gov/index.html">Tennessee.gov Home</a>  |  <a href="http://google.tennesseeanytime.org/search?site=main&output=xml_no_dtd&client=main&proxystylesheet=main&proxycustom=%3CADVANCED/%3E">Search
Tennessee.gov</a>  |  <a href="http://www.tennesseeanytime.org/directory/index.html">A
to Z Directory</a>  |  <a href="http://www.tennesseeanytime.org/tnanytime/policies.html">Policies</a>  |  <a href="http://www.tennesseeanytime.org/tnanytime/survey.html">Survey</a>  |  <a href="http://www.tennesseeanytime.org/help/index.html">Help</a>  |  <a href="your_sitemap.html">Site
Map</a>  |  <a href="your_contact_page.html">Contact</a>
<br>
<br>
<a href="your_contact_page.html"><img src="image_name.jpg" width="211" height="74" border="0" alt="Link to contact information."></a>
</div>

CASCADING STYLE SHEET (CSS) CODE

The CSS code below sets the formatting for the "Skip Navigation" link and its target, the links on the horizontal navigation bar, and the footer. The InvisibleLink lines specify the Skip Navigation link and target. The "A#id" and ".horiz_nav" lines specify how the links in the horizontal navigation bar look and act. The ".footer" lines specify how the footer area is centered and formatted. This code starting at <style> and ending with </style> must be placed in between the <head> and </head> tags (along with the <title> and <meta name="description> tags). If you are linking to a style sheet, you may add this code to the stylesheet instead of placing it in the <head>.
It is not necessary to change or customize any of it.