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

Choose and follow one of the tutorials listed above. Create a Web page that uses this new
technique. The Web page should provide the URL of your tutorial, the name of the Web
site, and a description of the new technique you discovered. Place your name in the e-mail
address at the bottom of the Web page. Print the external style sheet (if you used one), the
Web page source code (from Notepad), and the browser view of your Web page.
Focus On Web Design
Take a few moments and visit the CSS Zen Garden at http://www.csszengarden.com.
Explore the site and note the widely different designs. What thought processes and deci-
sions are needed as a person creates a new design for this site? Visit http://stopdesign.com/
archive/2003/06/02/design-process.html, http://manisheriar.com/blog/anatomy-of-a-
design-process, or http://www.bobbyvandersluis.com/articles/gardenparty.php for a
behind-the-scenes look at how Web developers have approached this task. Reflect on
their stories and suggestions. Write a one page (double-spaced) essay that describes
ideas about the design process you'll be able to use as you begin to design Web sites for
personal or professional use. Be sure to include the URL of the resources you used.
WEB SITE CASE STUDY:
Navigation Links in a List
Each of the following case studies continues throughout most of the text. This chapter
configures the main navigation in your Web sites to utilize an unordered list.
JavaJam Coffee House
See Chapter 2 for an introduction to the JavaJam Coffee House Case Study. Figure 2.26
shows a site map for the JavaJam Web site. The pages were created in earlier chapters.
You will use the existing Web site in the javajamcss folder (unless your instructor speci-
fies otherwise) as a start and create a new version that configures the main 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 javajam.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.
3. Modify the index.html, menu.html, and music.html Web pages to display the
main navigation links in an unordered list.
4. Launch a browser and test the pages in the javajamcss folder. Modify your java.css
file as needed to configure your pages. Be sure to test in more than one browser.