HTML and CSS Reference
In-Depth Information
4
TUTORIAL
Creating Page
Layouts with CSS
Designing a Web Site for a Cycling Club
OBJECTIVES
Session 4.1
• Set display properties
• Create a reset style sheet
• Defi ne a background image
• Set background image
properties
• Use browser extension styles
• Explore fi xed, fl uid, and elastic
layouts
• Float elements in a Web page
Case |
Cycle Pathology
Dan Atwood is a cyclist who lives and works in Grand Junction,
Colorado. About 30 years ago, he and a few friends started a
cycling group called
Cycle Pathology
. At the beginning, the group's
activities consisted of weekend rides through the western Colorado
countryside. However, with the growth in the popularity of cycling,
the group has expanded to several hundred active members and
now organizes rides and tours for much of western Colorado.
Session 4.2
• Set margin and padding spaces
• Format an element border
• Create rounded corners
• Display an element outline
Session 4.3
• Explore absolute and relative
positioning
• Work with overfl ow content
• Explore clipped objects
• Stack objects in a page
To keep current and potential members informed about future rides
and events, Dan created the Cycle Pathology Web site in the late
1990s. With the growth of the group, he has decided to redesign the
site and has asked you for help in planning a new layout and design.
STARTING DATA FILES
tutorial.04
tutorial
review
case1
case2
cp_resettxt.css
cp_stylestxt.css
cycletxt.htm
+ 5 graphic fi les
modernizr-1.5.js
racetxt.css
rosetxt.htm
+ 10 graphic fi les
modernizr-1.5.js
historytxt.css
lincolntxt.htm
+ 11 graphic fi les
modernizr-1.5.js
pizzatxt.css
redballtxt.htm
+ 5 graphic fi les
modernizr-1.5.js
case3
case4
demo
longstxt.htm
maptxt.css
+ 12 graphic fi les
modernizr-1.5.js
papertxt.css
parktxt.htm
+ 7 text fi les
+ 5 graphic fi les
modernizr-1.5.js
demo_positioning.htm
+ 5 graphic fi les
HTML 221
