HTML and CSS Reference
In-Depth Information
Case Problem 4
Test your
knowledge of
CSS to design
the layout for the
front page of a
local newspaper.
Data Files needed for this Case Problem: address.txt, blake.jpg, cougar.jpg, links1.txt,
links2.txt, modernizr-1.5.js, papertxt.css, parch.jpg, parch2.jpg, parktxt.htm,
pcglogo.jpg, story1.txt-story4.txt
The Park City Gazette
Park City, Colorado, is a rural mountain community noted for its
ski slopes and fi shing holes. Kevin Webber is the editor of the weekly
Park City Gazette
.
The paper recently redesigned its printed layout, and Kevin wants you to do the same
thing for the online version. He's prepared several fi les containing sample text from
recent articles and a few lists of links that usually appear in the front page of the news-
paper's Web site. He's also provided you with image fi les that can be used for the paper's
logo and background. Your job will be to use all of these pieces to create a sample Web
page for him to evaluate.
Complete the following:
1. Use your text editor to open the
parktxt.htm
and
papertxt.css
fi les from the
tutorial.04\case4 folder. Add
your name
and
the date
in the comment section of
each fi le. Save the fi les as
park.htm
and
paper.css
, respectively.
2. Using the content of the address, links, and story text fi les, create the content and
structure of the
park.htm
fi le. You are free to supplement the material in these text
fi les with additional content of your own if appropriate. Use the # symbol for the
value of the
href
attribute in your hypertext links because you will be linking to
pages that don't actually exist.
3. Link the
park.htm
fi le to the
paper.css
style sheet fi le and then save your changes.
4. Go to the
paper.css
style sheet fi le and create a layout for your
Park City Gazette
sample page. The layout should be based on a fl uid design that will render well on
page widths from 1000 up to 1400 pixels.
5. The specifi cs of the page design are up to your imagination and skill, but must
include the following features:
• use of the
display
property
• application of
width
and
height
style properties
• fl oated elements and cleared elements
• defi ned margin and padding spaces as well as maximum and minimum widths
• border styles
• rounded or elongated corners
• use of progressive enhancement along with one or more browser style extensions
• a tiled or non-tiled background image
• an example of relative or absolute positioning
6. Test your layout and design on a variety of devices, browsers, and screen resolutions
to ensure that your sample page is readable under different conditions.
7. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.
