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

Figure 7.13
This three-column
page layout is
designed using CSS
Go to the end of the
book for a full color
version of this figure
HANDS-ON PRACTICE 7.3
In this Hands-On Practice you will develop your first three-column Web page using
CSS. The same techniques that you used to configure the two-column page will apply
here—think of the page as a series of elements or boxes. Assign ids or classes to the
elements as you code the XHTML. Configure the CSS to correspond to the ids and
classes. Recall that a key technique in creating a two-column page with left column nav-
igation was to design the left column to float to the left. A key technique in our three-
column page is to code the left column with float:left and the right column with
float:right . The center column occupies the middle of the browser window. Refer to
Figures 7.12 and 7.13 as you complete this Hands-On Practice.
Getting Started
Locate the showybg.jpg, plsthumb.jpg, and trillium.jpg files in the Chapter 7 folder in
the student files. Create a new folder called wildflowers3. Copy the files to the folder.
Part 1—Code the XHTML
Review Figures 7.12 and 7.13. Notice the page elements: a logo area with both a logo
and a background image that repeats; a left column with a navigation area and an
image; a center column with paragraphs of text, a heading, and an image that floats to
the right; a right column with two news items; and a footer. These will all be coded
to use ids and classes corresponding to CSS, which configures a number of properties
including the float , margin , border , font-family , and so on. The navigation menu