Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 137

Figure 4.17
The new Trillium
Home page
navigation with
image links
navigation that is accessible to all, configure a set of plain text navigation links in the
page footer area as follows:
1. Copy the <div> element containing the navigation area to the lower portion of
the page and paste it above the page footer.
2. Modify the style rules in the nav class. Change the font size to .75em .
3. Now, focus on the top navigation area. Replace the text contained between each
pair of anchor tags with an image element. Use home.gif for the link to index.html,
services.gif for the link to services.html, and contact.gif for the link to contact.html.
A sample follows:
<a href="index.html"><img src="home.gif" alt="Home" width="120"
height="40" /></a>
4. Create a new style rule that configures no border for the img selector. The code
follows:
img {border:none}
5. Save your page as index.html. Launch a browser and test your page. It should look
similar to the one shown in Figure 4.17. As you test your page, resize the browser
window—make it smaller—and note how the image links move around. To prevent
this, add a new style rule to the body selector that sets a minimum width for the
page. This will cause the browser to automatically display a horizontal scroll bar if
the Web page visitor resizes the browser window below the size specified:
min-width: 700px;
Save and test your page again.
The student files contain a sample solution in the Chapter4/4.4 folder.