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

● The content of the definition list is as follows:
Question: Our dog, Sparky, likes to eat whatever the kids are snacking on.
Is it OK for the dog to eat chocolate?”
Answer: Chocolate is toxic to dogs. Please do not feed your dog chocolate.
Try playing a game with your children—when you feed them people treats
they can feed Sparky dog treats.
2. Configure the CSS. Open fishcreek.css in Notepad. Edit the style rules as follows:
● The fish navigation image area is quite wide. Modify the style rules and change
the width of the page content container id from 80 percent to 700 pixels.
● Modify the style rules for the h1 selector. Delete the existing style rules. Add a
new style rule to center the image (use text-align:center ).
● Configure the id named imgnav to be centered (use text-align:center ).
● Configure the img selector not to display a border.
Save the fishcreek.css file.
3. Save and Test. Save your page and test it in a browser. If your images do not
appear or your image links do not work, examine your work carefully. Use
Windows Explorer to verify that the images are saved in your fishcreek folder.
Examine the src attribute on the image tags to be sure you spelled the image
names correctly. Another useful troubleshooting technique is to validate the
XHTML and CSS code. See Chapters 2 and 3 for Hands-On Practice exercises
that describe how to use these validators.
4. The Home and Services Pages. Modify the Home page (index.html) and Services
page (services.html) to look similar to the Ask the Vet page you just created. Save
and test your pages. Notice how the use of coordinating logo and navigation
images helped to unite the Web site visually. To provide accessibility, the original
text navigation links were not deleted. Instead, they were moved to the bottom of
the page. It is common for sites that use images for main navigation to provide
simple text links at the lower portion of each Web page.

Focus on Accessibility

WWW

Pasha the Painter
See Chapter 2 for an introduction to the Pasha the Painter Case Study. Figure 2.34
shows a site map for Pasha the Painter. The Home page and Services page were created
in earlier chapters. You will continue to work with this Web site in this case study and
create the Testimonials page, as shown in Figure 4.41 (shown also in the color insert
section). You will then modify the other pages so they are consistent with the new
design.

Hands-On Practice Case

Obtain the images used in this case study from the student files. The images are located
in the Chapter4/CaseStudyStarters/Painter folder. The images are: painterlogo.gif (Figure
4.42), paintroom.jpg (Figure 4.43), paintroom_small.jpg (Figure 4.44), undecorated.jpg
(Figure 4.45), and undecorated_small.jpg (Figure 4.46). Save the files in your painter
folder.

1. The Testimonials Page. Use the Services page as the starting point for the
Testimonials page. Launch Notepad and open the services.html file in the painter