Readings:
Typographic Web Design :
Chapter 13 : helping readers move through the site: navigation p. 207-211
- Navigation and links need to be set apart from other elements through color, style, size, case or weight.
- Consistency in navigation helps readers navigate a site.
- Contrast shows where a reader has been and where they are.
absolute vs relative links
absolute link: http://art556.com/unit2/santee.html
relative link: santee.html
- A relative link is relative to the page it is on. If both are in the same folder, then just the name is used: santee.html.
- If going up one level: ../santee.html
- going up two levels: ../../santee.html
- or going down one level: /images/santee.jpg
Your css will contain code that defines links in different states:
a:link {
color: #333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
Navigation treatments:
html links, rollovers and dropdowns
html links
- <a href=”escape.html”>Learn More..</a>
Learn More will appear as a link and take the user to the escape.html page. - <a href=”http://art556.com/unit2/santee.html”><img src=”images/santeeSm.png” width=”231” height=”95” alt=”small santee 116”></a>
Clicking on the image of the boat will take the user to the santee.html page. - <a href=”references.html”><div class=”footer”></div> </a>
Clicking on the footer will take the user to the references.html page.
exercise :
Create the rest of your pages and add navigation. Click here for a sample site with multiple pages and navigation.
Resources: