The Nav Bar

Nav is short for Navigation.

Having a Navigation Bar makes searching for information easier on those accessing your page.

Here are some common links found on a Nav Bar:

Home, Contacts, About Us, History

Design of a Nav Bar

A traditional Nav Bar is centered across the top of your page, just below a Banner or Header.

Nav bar^

One tool that is almost always used to create Nav Bars is called a Table…

Tables!!!

<TABLE><TR><TD>Content</TD></TR>

</TABLE>

And in English…?

<start a new table><new table row><new table column>stuff you want inside the table cell or box</end the column></end the row>

</end the table>

Examples…

<TABLE><TR><TD>Content</TD><TD>Content</TD></TR>

</TABLE>

This code will show:Content Content

There is one row and two columns with the word content in each cell..

Back to the Nav Bar..

<TABLE><TR><TD>

<a href=www.google.com>Google</a>

</TD></TR>

</TABLE>

…and that’s the Nav Bar

<map name="Map2" id="Map2"> <area shape="rect" coords="0,1,96,22" href="schedule.html" alt="Schedule" /> </map> <map name="Map3" id="Map3"> <area shape="rect" coords="2,1,84,22" href="roster.html" alt="Roster" /> </map> <map name="Map" id="Map"> <area shape="rect" coords="-76,2,-10,23" href="index.html" /> </map>

<div id="nav"> <table width="650" border="0"> <tr> <td><img src="Home1.png" alt="Home" width="75" height="25" border="0" usemap="#Map9" /></td> <td><img src="sched1.png" alt="Schedule" width="100" height="25" border="0" usemap="#Map4" /></td> <td><img src="rost1.png" alt="Roster" width="85" height="25" border="0" usemap="#Map5" /></td> <td><img src="direct1.png" alt="Directions" width="105" height="25" border="0" usemap="#Map6" /></td> <td><img src="cont1.png" alt="Contacts" width="100" height="25" border="0" usemap="#Map7" /></td><td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>