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

1. The Listings Page. Use the Financing page as the starting point for the Listings
page. Launch Notepad and open the financing.html file in the prime folder that
you previously created. Save the file as listings.html. Modify your file to look sim-
ilar to the Listings page, as shown in Figure 4.47.

Change the title to an appropriate phrase.

●

Replace the Prime Properties heading with the primelogo.gif, Figure 4.48. Be
sure to include the alt , height , and width attributes on the <img /> tag for
the graphic.
Move the div with the navigation links to the bottom of the page right above
the copyright information (see Figure 4.47).

●

See Figure 4.47 and add a div with image links under the logo area. The navi-
gation buttons use color as a visual cue for visitors. The navigation button
links use a green background. The button for the current page is not a link and
uses a blue background. To configure this area for the Listings page, use
primehomenav.gif (link to index.html), primelistingsbtn.gif (no link),
primefinancingnav.gif (link to financing.html), and primecontactnav.gif (link to
contact.html). Use appropriate attributes on the <img /> tag: alt , height ,
and width .

●

Replace the heading Financing with the heading Listings.

●

Delete the text between the Listings heading and the text navigation near the
footer section of the Web page.

●

The section describing each listing consists of an <h3> element, a paragraph,
an image link, and an unordered list.

●

Schaumburg Colonial Listing

Configure an <h3> with the following text: Schaumburg Colonial

●

Configure a paragraph with the following text:
This single family home is a two-story colonial on a large lot.

●

Configure the schaumburgthumb.jpg as an image link to schaumburg.jpg.
Assign the <img /> element to a class named property. Code appropriate
attributes on the <img /> element, including align="left" . Note : In
Chapter 6 you'll learn to use CSS to configure this alignment.

●

Configure an unordered list with the following text:
Four bedrooms
Two and 1/2 baths
Finished family room
Two car garage
Listing #3432535

●

Code a line break between the two listings.

●

Libertyville Condo Listing

Configure an <h3> with the following text:
Libertyville Condo

●

Configure a paragraph with the following text:
New construction condo in downtown Libertyville.

●