Page Layout with CSS - Web Development and Design Foundations with XHTML - page 265

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. In this case study you will implement a new two-column CSS page layout for
Prime Properties. You will modify the external style sheet and the Home, Listings, and
Financing pages. Unless your instructor directs you otherwise, use the Chapter 4 Prime
Properties Web site as a starting point for this case study.

Figure 6.32 displays a wireframe for the two-column page layout with a page wrapper,
logo, left column, right column, and footer areas.

Figure 6.32
Prime Properties
two-column page
layout

Hands-On Practice Case
1. Create a Folder. Create a folder called primecss. Copy all the files from your
Chapter 4 prime folder into the primecss folder. You will modify the prime.css file
and each Web page file (index.html, listings.html, and financing.html) to imple-
ment the two-column page layout shown in Figure 6.32. See the new Prime
Properties Home page, as shown in Figure 6.33 (shown also in the color insert
section).
2. Configure the CSS. Open prime.css in Notepad. Edit the style rules as follows:

Configure the page background. Modify the style rules for the body selector.
Set the background-color property to #003366 . Configure the background
image to be the primevertical.png image from the student files (see
Chapter6/primevertical.png).

●