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

● Configure the footer area. Configure the footer id to display centered text
( text-align: center; ). Remove the nav id.
Save the fishcreek.css file.
3. Modify the index.html File. Add <div> elements and modify the code as follows:
● Configure the logo area. Assign the <h1> to the id logo .
● Configure the left column. The navigation image links are the only content in
the left column. Change <d iv id="imgnav" > to < div id="leftcolumn" >.
Remove other code, including any &nbsp; characters that may be present.
● Configure the right column. This area contains the definition list and the para-
graph with the contact information. Code a <div> that surrounds this area.
Assign the <div> to the id rightcolumn .
● Configure the page footer area. You need to adjust the starting location of the
footer id. Locate < div id="footer" > in the code and remove it. Next,
change < div id="nav" > to < div id="footer" >. The area assigned to the
footer id now includes the text navigation, copyright information, and e-mail
link. Replace the closing div tag between the text navigation and the copyright
information with a line break tag.
Save the index.html file. It should look similar to the Web page shown in Figure
6.28. Remember that validating your XHTML and CSS can help you find syntax
errors. Test and correct this page before you continue.
4. Modify the services.html and askvet.html Files. Modify these Web page files in a
similar manner as you did in Step 3. Save and test your pages in a browser. As
you test your pages, use the CSS and XHTML validators to help you find syntax
errors.
In this case study you changed the page layout of the Fish Creek Web site pages. Notice
that with just a few changes in the CSS and XHTML code, you configured a two-
column page layout.
Pasha the Painter
See Chapter 2 for an introduction to the Pasha the Painter Case Study. Figure 2.34
shows a site map for the Pasha the Painter Web site. The pages were created in earlier
chapters. In this case study you will implement a new two column CSS page layout for
Pasha the Painter. You will modify the external style sheet and of the Home, Services,
and Testimonials pages. Unless your instructor directs you otherwise, use the Chapter 4
Pasha the Painter Web site as a starting point for this case study.
Figure 6.29 displays a wireframe for the two-column page layout with a page container,
logo, left column, right column, and footer areas.