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

Code an external style sheet file called rightcolumn.css and a Web page called
rightcolumn.html. The Web page should have two columns. The right column will
be the navigation column and the left column will be the content column. Hand in
printouts of rightcolumn.css, the rightcolumn.html source code (print in Notepad),
and the browser display of your rightcolumn.html to your instructor.

7. Extending Hands-On Practice 6.6. Design a two-column page layout with a logo area
across the top. Review the Hands-On Practice 6.6 twocolumn.html file for some
examples. These files are in the Chapter6/wildflowers2 folder in the student files.
Code an external style sheet file called mydesign.css and a Web page called myde-
sign.html. The Web page should have two columns and a logo area across the top.
Hand in printouts of mydesign.css, the mydesign.html source code (print in
Notepad), and the browser display of your mydesign.html to your instructor.

8. Extending Hands-On Practice 6.6. In Hands-On Practice 6.6 you created two files
for a version of the Door County Wildflowers Web site. The files are available in
the Chapter6/wildflowers2 folder in the student files. You will create two additional
content pages for the Door County Wildflowers site, called spring.html and
summer.html, in this exercise. Be sure that all CSS is placed in an external style
sheet, called mywildflower.css. (Modify pre-existing pages to use this style sheet.)
Here is some content to include on the new pages:

Spring Page (spring.html):

Use the trillium.jpg image (see the Chapter 6 folder in the student files).

●

Trillium facts: 8-18 inches tall, perennial, native plant, grows in rich moist
deciduous woodlands, white flowers turn pink with age, fruit is a single red
berry, protected flower species.

●

Summer Page (summer.html):

● Use the yls.jpg image (see the Chapter 6 folder in the student files).
● Yellow Lady's Slipper facts: 4-24 inches tall, perennial, native plant, grows in
wet shaded deciduous woods, swamps, and bogs, an orchid, official flower of
Door County.
Hand in printouts of mywildflower.css, spring.html source code (print in Notepad),
summer.html source code, the browser display of spring.html, and the browser dis-
play of summer.html to your instructor.

9. Extending Hands-On Practice 6.6. Modify the twocolumn.html page you created in
Hands-On Practice 6.6. This file is in the Chapter6/wildflowers2 folder in the stu-
dent files. Recall from Chapter 5 that a Web page using jello design has content in
the center of the Web page with blank margins on either side. You can code this
using CSS by configuring the margin property of the body tag to use percentages
for the left and right. For example:
body {margin: 0 10%;}
Hand in printouts of the source code (print in Notepad) and browser display for
the Web page to your instructor.

10. Design a splash page called moviesplash.html about your favorite movie. Use
absolute positioning and z-index to create an interesting display. First sketch the
areas for images, text, and link to the first page on the site. Search the Web for