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

Hands-On Practice Case

Obtain the images used in this case study from the student files. The images are located
in the Chapter4/CaseStudyStarters/FishCreek folder. The images are: fishcreeklogo.gif
(Figure 4.36), home.gif (Figure 4.37), services.gif (Figure 4.38), askthevet.gif (Figure
4.39), and contact.gif (Figure 4.40). Save the files in your fishcreek folder.

Figure 4.36
Fish Creek logo
(fishcreeklogo.gif)

Figure 4.37
Home button
(home.gif)

Figure 4.38
Services button
(services.gif)

Figure 4.39
Ask the Vet button
(askthevet.gif)

Figure 4.40
Contact button
(contact.gif)

1. The Ask the Vet Page. Use the Services page as the starting point for the Ask the
Vet page. Launch Notepad and open the services.html file in the fishcreek folder
that you previously created. Save the file as askvet.html.
Modify your file to look similar to the Ask the Vet page, as shown in Figure 4.33.

Change the page title to an appropriate phrase.

●

Replace the Fish Creek Animal Hospital heading with the fishcreeklogo.gif, as
shown in Figure 4.36. Be sure to include the alt , height , and width attrib-
utes on the <img /> tag for the graphic.

●

Move the text links to the bottom of the page right above the copyright infor-
mation (see Figure 4.35).

●

See Figure 4.35 and add image links under the logo area. Use a <div> element
to contain this area. Assign the <div> to an id named imgnav . The home.gif
(Figure 4.37) should link to index.html. The services.gif (Figure 4.38) should
link to services.html. The askthevet.gif (Figure 4.39) should link to
askvet.html. The contact.gif (Figure 4.40) should link to contact.html. Use
appropriate attributes on the <img /> tag: alt , height , width .

●

Delete the unordered list that was part of the services.html page.

●

The page content consists of a paragraph of text followed by a definition list
that contains a question and answer.

●

Replace the text in the paragraph as follows:
Contact us if you have a question that you would like answered here.
The word “Contact” should link to the contact.html page.

●

The definition list displays the question and answer. The <dt> element config-
ures the question. Assign the <dt> element to the category class used on the
Services page. The <dd> element configures the answer. See Appendix B Special
Characters for the character code to display the em dash (—).

●