The second level navigation is accomplished with a series of graphics that utilize image maps. In the case of the second level navigation it was found that a single graphic allowed for a more consistent look and feel as well as facilitated easier creation of the images.

The Adobe Photoshop graphic template for creating your own second level navigation is level2nav.psd [Click here for the .psd file]

The font used is Interstate and the web colors used are #000033 and #666699

In our example here the HTML code for the image map is:

<td height="17" bgcolor="#ffffff" background="../imgs/navLevel2_back.gif"
><img src="../imgs/secondLevelNavigation/default_level2.gif" width="750" height="17" alt="" border="0" usemap="#level2"
><map name="level2"
><area alt="Link One" coords="10,2,40,15" href="link1.html"
><area alt="Link Two" coords="56,2,88,15" href="link2.html"
></map></td>

The "cords" numbers that correspond to each link are easy to determine in Photoshop. For example when looking at the link for link2.html you see the values 56,2,88,15. These numbers define the left, top, right, and bottom of a rectangle that will be the link for the desired page. Using the provided template the top and bottom will always be the same. Therefore the only numbers that need to be determined are the first and third. Using the info window in Photoshop these numbers can be determined by placing your cursor over the start and end of your link and recording the X: value.