Assignment Task

Purpose

The purpose of assignment 2 is for you to demonstrate your knowledge of CSS learned so far in the course by designing the layout for the front page of a local newspaper. A sample screenshot is below:

Scenario: The Park City Gazette

Park City, Colorado, is a rural mountain community noted for its ski slopes and fishing 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 files containing sample text from recent articles and a few lists of links that usually appear in the front page of the newspaper’s website. He’s also provided you with image files that can be used for the paper logo and background. Your task 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 files from the assignment folder. Add your name and the date in the comment section of each file. Save the files as park.htm and paper.css respectively.

2. Using the content of the address, links, and story text files, create the content and structure of the park.htm file. You are free to supplement the material in these text files 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 file to the paper.css style sheet file and then save your changes.

4. Go to the paper.css style sheet file and create a layout for your Park City Gazette sample page. The layout should be based on a fluid design that will render well on page widths from 1000 up to 1400 pixels.

5. The specifics 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
• Floated elements and cleared elements
• Defined 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 styles to 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.