More on Links, Lists, and Layout - Web Development and Design Foundations with XHTML - page 308

Fish Creek Animal Hospital
See Chapter 2 for an introduction to the Fish Creek Animal Hospital Case Study. Figure
2.30 shows a site map for the Fish Creek Web site. The pages were created in earlier
chapters. You will use the existing Web site in the fishcreekcss folder (unless your
instructor specifies otherwise) as a start and create a new version that configures the
main navigation and footer navigation using an unordered list.
Hands-On Practice Case
1. Review Section 7.3 CSS Navigation Layout using Lists.
2. Modify the fishcreek.css file as needed to configure the main navigation links and
footer navigation links in an unordered list without “bullets”. Hint : To eliminate
the extra space on the left side of the fish navigation links, use CSS to configure
the unordered list to have 0 margin and padding on the left side.
3. Configure the anchor selector's link, visited, and hover pseudo-classes to have
light-colored text (for example, #CCCCCC , #CCFFCC , or #FFFFFF ).
4. Modify the index.html, services.html, and askvet.html Web pages to display the
main navigation links in an unordered list.
5. Modify the index.html, services.html, and askvet.html Web pages to display the
footer navigation links in an unordered list.
6. Launch a browser and test the pages in the fishcreekcss folder. Modify your
fishcreek.css file as needed to configure your pages. Be sure to test in more than
one browser.
Pasha the Painter
See Chapter 2 for an introduction to the Pasha the Painter Case Study. Figure 2.34
shows a site map for the Pasha the Painter Web site. The pages were created in earlier
chapters. You will use the existing Web site in the paintercss folder (unless your instruc-
tor specifies otherwise) as a start and create a new version that configures the main nav-
igation using an unordered list.
Hands-On Practice Case
1. Review Section 7.2 CSS Pseudo-classes and Links and Section 7.3 CSS Navigation
Layout using Lists.
2. Modify the painter.css file as needed to configure the main navigation links in an
unordered list without “bullets”. Also configure the main navigation links to
change color when a mouse hovers over them. Hint : To eliminate the extra space
on the left side of the main navigation links, use CSS to configure the unordered
list to have 0 margin and padding on the left side.
3. Modify the index.html, services.html, and testimonials.html Web pages to display
the main navigation links in an unordered list.
4. Launch a browser and test the pages in the paintercss folder. Modify your
painter.css file as needed to configure your pages. Be sure to test in more than
one browser.