I\'m struggling to grasp this subject. I would really benefit from a step by ste
ID: 3773269 • Letter: I
Question
I'm struggling to grasp this subject. I would really benefit from a step by step of this problem. I recently purchased a subscription and was dissapointed to find out that there are no step by step solutions for these case problems in this book. Hopefully I can get help through posting a question. Thanks. (I have the data files, but was not able to post them through this format)
BEN
Book: New Perspectives on HTML, CSS, and Dynamic HTML, 5e
Tutorial 4 Creating Page Layouts with CSS | HTML and CSS
HTML 315
Test your knowledge of CSS to design the layout for the front page of a local newspaper.
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 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 news- paper’s Web site. He’s also provided you with image files 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 files from the tutorial.04case4 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 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 files to your instructor, in either printed or electronic form, as requested.
Explanation / Answer
I have written the html code for the same. As per the specification the code will be:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Park City Gazette</title>
<script src="modernizr-1.5.js"></script>
<link href="paper.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="pcglogo.jpg" class="toplogo" />
<nav class="horizontal">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Local</a></li>
<li><a href="#">State</a></li>
<li><a href="#">National</a></li>
<li><a href="#">International</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
</ul>
</nav>
</header>
<nav class="vertical">
<h2 class="moduletitle">Additional Info</h2>
<ul>
<li><a href="#">Classifieds</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="#">Wanted</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Personal</a></li>
</ul>
<ul>
<li><a href="#">Tourism</a></li>
<li><a href="#">Attractions</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Parks</a></li>
<li><a href="#">Camping</a></li>
</ul>
<ul>
<li><a href="#">Subscriptions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<section>
<article>
<h2><a href="#">Local Woman Wins Marathon</a></h2>
<a href="#"><img alt="Laura Blake" align="right" src="marathon.jpg" /></a><p>
Park City native Laura Blake won the 27th Front Range Marathon over an elite field of the best long-distance runners in the country. Laura's time of 2 hr. 28 min. 21 sec. was only 2 minutes off the women's course record set last year by Sarah Rawlings. Kathy Lasker and Lisa Peterson finished second and third, respectively. Laura's victory came on the heels of her performance at the NCAA Track and Field Championships, in which she placed second running for Colorado State.
</p>
<p>
In an exciting race, Peter Teagan of San Antonio, Texas, used a finishing kick to win the men's marathon for the second straight year, in a time of 2 hr. 12 min. 34 sec. Ahead for much of the race, Kyle Wills of Billings, Montana, finished second when he could not match Teagan's finishing pace. Jason Wu of Cutler, Colorado, placed third in a very competitive field.</p><p>This year's race through downtown Boulder boasted the largest field in the marathon's history, with over 9500 men and 6700 women competing. Race conditions were perfect with low humidity and temperatures that never exceeded 85 degrees.
</p>
</article>
<article>
<h2><a href="#">Highway 6 Reopens</a></h2>
<p>
Highway 6 will reopen this Friday, May 3rd, after a final safety inspection. A late blizzard delayed road crews, marking this as one of the latest dates on record for the highway's reopening.
</p>
<p>
Rising to an elevation of 12,351 feet at Grace Pass, Highway 6 is a main link between Park City and Lake Elton. The reopening of the road is one of the annual signs that summer is near and the tourist season will soon be upon us!
</p>
</article>
<article>
<h2><a href="#">Cougar Sightings Increase</a></h2>
<a href="#"><img alt="Mountain Lion" align="right" src="mountainlion.jpg" /></a><p>
Cougar sightings have increased 40% in the Park City area according to a report released yesterday by the state DNR. In the last month alone, there were ten sightings in Park City and the surrounding communities of Riley and Dixon. This compares to only twelve sightings for the entire spring of last year. </p>
<p>
Reasons for the growing number of cougar sightings include increasing encroachment by people into former wildlife habitats and new wildlife regulations that result in decreasing numbers of elk and deer being taken by hunters. Cougars may be wandering into developed areas, following the herds.
</p>
<p>
DNR spokesman Steve Tasker asks residents to call the DNR report line at 555-6981 if they believe they have seen a cougar or any large predatory animal. Two fatalities have already occurred in the west this year from cougar attacks.
</p>
</article>
</section>
<aside>
<h2 class="moduletitle">Stories Inside</h2>
<ul>
<li><a href="#">Complete Marathon Results</a></li>
<li><a href="#">National Park Acquires Land</a></li>
<li><a href="#">School Board Election Results</a></li>
<li><a href="#">Spending Referendum Defeated</a></li>
<li><a href="#">Graduation Awards</a></li>
<li><a href="#">New Highway Proposed</a></li>
<li><a href="#">Camping Tips</a></li>
<li><a href="#">Cougar Sightings Increase</a></li>
<li><a href="#">Editorials</a></li>
<li><a href="#">Park City Profile</a></li>
</ul>
<div id="sidearticle">
<h2 class="moduletitle">If You Encounter a Cougar</h2>
<img alt="Cougar" align="right" src="cougar.jpg" /><p>
Stop, stand tall, and don't run. A cougar's instinct is to chase.
</p>
<p>
Try to appear larger than the cougar by raising your arms.
</p>
<p>
Back away slowly, always keeping eye contact.
</p>
<p>
If the cougar displays aggressive behavior, shout and wave your arms. Convince the cougar that you are not prey, but a potential danger.
</p>
<p>
In case of an attack, stay on your feet and fight back aggressively.
</p>
</div>
</aside>
<footer>
<address>Park City Gazette ♦ 801 Elkhart Avenue Park City, CO 80511 ♦ 1 (800) 555-2918</address>
</footer>
</body>
</html>
style sheet: