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

Prime Properties
See Chapter 2 for an introduction to the Prime Properties Case Study. Figure 2.38
shows a site map for the Prime Properties Web site. The pages were created in earlier
chapters. You will use the existing Web site as in the primecss 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.2 CSS Pseudo-classes and Links and Section 7.3 CSS Navigation
Layout using Lists.
2. Modify the prime.css file as needed to configure the main navigation links and
footer navigation links in an unordered list without “bullets”. Also remove the
image buttons and, instead, configure CSS buttons with text that changes color
when the 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, financing.html, and listings.html Web pages to display the
main navigation links in an unordered list.
4. Modify the index.html, financing.html, and listings.html Web pages to display the
footer navigation links in an unordered list.
5. Launch a browser and test the pages in the primecss folder. Modify your prime.css
file as needed to configure your pages. Be sure to test in more than one browser.
Web Project
See Chapters 5 and 6 for an introduction to the Web Project case. You will modify the
main navigation and footer navigation to use an unordered list. If appropriate, also add
interactivity to the main navigation area with CSS pseudo-classes.
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 your project's external CSS file and Web page files as needed to configure
the main navigation and footer navigation in an unordered list.
3. Optional: Modify your project's external style sheet to configure CSS link and
hover pseudo-classes for your main navigation hyperlinks.
4. Launch a browser and test the Web pages. Modify your files as needed to
configure your pages. Be sure to test in more than one browser.