<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>[prototype] Weather Channel</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- the style sheets -->
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" title="Default"/>
<!-- compliant style switcher courtesy of Alistapart.org (Paul Sowden, contributor) -->
<script type="text/javascript" src="../styleswitcher.js"></script>
</head>
<body>
<div id="widthAdjuster">
<!-- accessibility panel -->
<div id="accessWrapper">
<div id="access1">
<h1>Weather.com</h1>
<div class="nosee">
<a href="#content">Jump to Content</a> |
<a href="#navigation">Jump to Site Navigation</a> |
<a href="#subpanel">Jump to Section Info</a>
</div>
</div>
<div id="access2">
<a href="#left"><img src="images/t.gif" width="1" height="1" alt="Jump to Left Content"/></a> |
<a href="#right"><img src="images/t.gif" width="1" height="1" alt="Jump to Right Content"/></a>
</div>
</div>
<!-- top row navigation links -->
<div class="rowLinksWrapper">
<div class="rowLinks">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Travel</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Recreation</a>
</li>
<li>
<a href="#">Home & Garden</a>
</li>
<li>
<a href="#">Local</a>
</li>
<li>
<a href="#">World</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Maps</a>
</li>
<li class="last">
<a href="#">Weather Tools</a>
</li>
</ul>
</div>
</div>
<!-- title bar -->
<div id="titleBar">
<a href="./"><img src="images/topBanner.jpg" width="768" height="60" alt="Weather Channel"/></a></div>
<!-- local forecast -->
<div id="localforecast">
<table cellspacing="0" summary="This table contains a search box and a drop-down select menu that allows you to search for your local forecast.">
<caption>Local Forecast</caption>
<tr>
<td style="width: 77px;">
<img src="images/localforecast1.gif" width="77" height="35" alt="Find your local forecast"/>
</td>
<td style="width: 21px;">
<img src="images/localforecast2.gif" width="21" height="35" alt="Step 1"/>
</td>
<td style="padding-right: 15px;"><label for="zip">City or Zip</label><input type="text" id="zip" name="zip" size="15" value="Enter city or US zip"/>
</td>
<td style="width: 21px;">
<img src="images/localforecast3.gif" width="21" height="35" alt="Step 2"/>
</td>
<td><label for="whatprefs">Options</label><select name="whatprefs" id="whatprefs">
<option value="Null" selected>See weather related to ...</option>
<option value="WeatherLocalDriving">Driving</option>
<option value="WeatherLocalSportingEvents">Events</option>
<option value="WeatherLocalGolf">Golf</option>
<option value="WeatherLocalHealth">Health</option>
<option value="WeatherLocalHomeAndGarden">Home & Garden</option>
<option value="WeatherLocalLawn">Lawn & Garden</option>
<option value="WeatherLocalRecreation">Recreation</option>
<option value="WeatherLocalSki">Ski</option>
<option value="WeatherLocalTravel">Travel</option>
</select>
</td>
<td style="width: 37px;"><label for="buttonGo">Submit</label><input type="image" name="buttonGo" id="buttonGo" src="images/localforecast4.gif" value="Go" alt="Go"/>
</td>
<td style="text-align: left; padding-left: 20px;">
<div class="smallText">
<a href="#">Want us to remember your location</a>?
<br/>
(Use this for 1-click access to your local forecast)
</div>
</td>
</tr>
</table>
</div>
<!-- main content pane (left column) -->
<div id="leftColumn">
<a name="left"></a>
<!-- notify network bar -->
<div id="notifyNetwork">
<table cellspacing="0" summary="Information about the Notify Network.">
<caption>Notify Network</caption>
<tr>
<th style="width: 69px;">
<a href="#"><img src="images/notifyNetwork.gif" width="69" height="46" alt="Notify Network Icon"/></a>
</th>
<th style="width: 401px; vertical-align: top; text-align: left; padding-left: 10px;">
<div id="notifyNetworkLinks">
<a href="#">Learn More</a> | <a href="#">Sign In</a>
</div>
<div style="padding-bottom: 6px;">
<strong>NEW! Severe Weather Alert Service</strong>
</div>
<div>
Try <strong>Notify!</strong> by the Weather Channel for <strong>FREE</strong>
</div>
</th>
</tr>
</table>
</div>
<!-- top stories -->
<div class="contentBox">
<h2>Weather Center - Top Stories</h2>
<!-- map -->
<table cellspacing="0" class="insetBox" summary="Today's news and weather map">
<caption>Today's News and Weather Map</caption>
<tr>
<td>
<ul>
<li><a href="#">Lack of Rain: Next 10 days Critical</a></li>
<li><a href="#">Lack of Rain: Farmers are worried</a></li>
<li><a href="#">Middle East Weather</a></li>
</ul>
<div class="text">
<strong>National Forecast</strong>
<br/>
<a href="#">Some amazing contrasts worldwide</a>
<br/>
Winter hangs on over northern sections of the nation.
</div>
<div class="text">
<a href="#">Storm Watch</a>
</div>
</td>
<td>
<img src="images/weatherMap.jpg" width="277" height="187" alt="US Weather Map"/>
<div class="smallText" style="text-align: center;">
<a href="#">click to enlarge</a>
<a href="#">see more maps</a>
</div>
<div class="smallText" style="text-align: center;">
Daily Video:
<br/>
<a href="#">Weekly Planner</a>
<a href="#">Weekend Outlook</a>
</div>
</td>
</tr>
</table>
</div>
<!-- Connect with your weather -->
<div class="contentBox">
<h2>Connect with Your Weather</h2>
<table class="twoCol" cellspacing="0" summary="A set of links to varioius sections of the site.">
<caption>Health and Travel</caption>
<tr>
<th scope="col">
Health
</th>
<th scope="col">
Travel
</th>
</tr>
<tr>
<td>
Help for your seasonal sneezes, sniffles, wheezes, and aches.
<ul>
<li><a href="#">Cold & Flu</a></li>
<li><a href="#">Aches & Pains</a></li>
<li><a href="#">Air Quality Forecast</a></li>
<li><a href="#">Pollen Reports </a></li>
</ul>
</td>
<td>
Stay on schedule with detailed weather for all types of travel.
<ul>
<li><a href="#">Vacation Planner </a></li>
<li><a href="#">Daily Traveler </a></li>
<li><a href="#">Interstate Forecast </a></li>
<li><a href="#">Daily Driving Forecast</a></li>
</ul>
</td>
</tr>
</table>
<table class="twoCol" cellspacing="0" summary="A set of links to varioius sections of the site.">
<caption>Events and Recreation</caption>
<tr>
<th scope="col">
Events
</th>
<th scope="col">
Recreation
</th>
</tr>
<tr>
<td>
Forecasts for local events across the country.
<ul>
<li><a href="#">Find Local Special Events </a></li>
<li><a href="#">Sporting Events Forecast </a></li>
<li><a href="#">Auto Racing Forecast </a></li>
<li><a href="#">Pro Golf Forecast</a></li>
</ul>
</td>
<td>
Take in the forecast before you take to nature.
<ul>
<li><a href="#">Golf </a></li>
<li><a href="#">Boat & Beach </a></li>
<li><a href="#">Boat & Beach Report</a></li>
<li><a href="#">National Parks</a></li>
</ul>
</td>
</tr>
</table>
<table class="twoCol" cellspacing="0" summary="A set of links to varioius sections of the site.">
<caption>Home & Garden and Ski</caption>
<tr>
<th scope="col">
Home & Garden
</th>
<th scope="col">
Ski
</th>
</tr>
<tr>
<td>
Tips for a beautiful garden and weather-wise house.
<ul>
<li><a href="#">Home Maintenance </a></li>
<li><a href="#">Lawn & Garden Care </a></li>
<li><a href="#">Scotts Lawn & Garden Center </a></li>
<li><a href="#">Daily Home & Garden Outlook </a></li>
</ul>
</td>
<td>
Get forecast and detailed resort information for local ski areas.
<ul>
<li><a href="#">Ski Outlook </a></li>
<li><a href="#">Snowfall Forecast Map </a></li>
<li><a href="#">Snow Quality Map </a></li>
</ul>
</td>
</tr>
</table>
<!-- end of Connect with Your weather -->
</div>
<!-- See what's new -->
<div class="contentBox">
<h2>See What's New</h2>
<!-- map -->
<table cellspacing="0" class="insetBox" summary="Special feature">
<caption>See what's new</caption>
<tr>
<td>
<div class="text">
<a href="#">Prepare Your Lawn and Garden for Spring Showers</a>
</div>
<div class="text">
<strong>The Weather Channel and Scotts</strong> want your <a href="#">lawn and garden</a> to look their best this year, and now is the time to start planning.
</div>
<div class="text">
Get year-round lawn and garden <a href="#">care tips</a>, <a href="#">free garden forecasts</a> by e-mail, and local garden weather on your desktop!
</div>
</td>
<td>
<img src="images/featureImage.jpg" width="204" height="178" alt="Girl planting something"/>
</td>
</tr>
</table>
</div>
</div>
<!-- main content pane (right column) -->
<div id="rightColumn">
<a name="right"></a>
<!-- stupid ad -->
<div>
<img src="images/ad1.jpg" width="297" height="232" alt="Some dumb ad"/>
</div>
<!-- another one -->
<div class="contentBox">
<h2>What's On The Weather Channel</h2>
<img src="images/ad2.gif" width="282" height="148" alt="Ad"/>
</div>
<!-- weather tools -->
<div class="contentBox">
<h2>Weather Tools - Stay Connected!</h2>
<div class="text" style="text-align: center;">
Get Current Temperature and Alerts
<br/>
Always on Your Desktop
<br/>
Download <a href="#">Desktop Weather</a> It's Free!
</div>
<ul>
<li>Get custom severe weather warnings. </li>
<li>Receive your local forecast by e-mail. </li>
<li>Watch radar on your mobile phone. </li>
<li>Create a personal weather Web page. </li>
<li>Access current conditions on your PDA. </li>
<li>Include weather on your Web site. </li>
</ul>
</div>
<!-- abous the weather channel -->
<div class="contentBox">
<h2>About Us</h2>
<div class="text">
<strong>New:</strong> The Weather Channel <a href="#">online store </a>
</div>
<ul>
<li>Learn about The Weather Channel </li>
<li>Watch online video forecasts </li>
<li>Submit photos to our photo gallery </li>
<li>Share messages with our community </li>
<li>Work with us - search jobs at TWC </li>
<li>Request assistance with our site </li>
</ul>
</div>
</div>
<!-- bottom info panel -->
<div id="bottomWrapper">
<!-- absurd links -->
<table cellspacing="0" summary="How weather affects your life">
<caption>How weather affects your life</caption>
<tr>
<th colspan="2">
How Weather Affects Your Life
</th>
</tr>
<tr>
<td>
Health
</td>
<td>
<a href="#">Health Forecast</a>, <a href="#">Allergies</a>, <a href="#">Skin Protection</a>, <a href="#">Air Quality</a>, <a href="#">Aches & Pains</a>, <a href="#">Cold & Flu</a>
</td>
</tr>
<tr>
<td>
Travel
</td>
<td>
<a href="#">Travel Forecast</a>, <a href="#">Daily Traveler</a>, <a href="#">Vacation Planner</a>, <a href="#">Driving</a>, <a href="#">Aviation</a>
</td>
</tr>
<tr>
<td>
Events
</td>
<td>
<a href="#">Events Forecast</a>, <a href="#">Sporting Events</a>, <a href="#">Special Events</a>
</td>
</tr>
<tr>
<td>
Recreation
</td>
<td>
<a href="#">Recreation Forecast</a>, <a href="#">Golf</a>, <a href="#">Boat & Beach</a>, <a href="#">National Parks</a>, <a href="#">Ski</a>
</td>
</tr>
<tr>
<td>
Home & Garden
</td>
<td>
<a href="#">Home & Garden Forecast</a>, <a href="#">Home</a>, <a href="#">Lawn & Garden</a>, <a href="#">Scotts Lawn & Garden Center</a>, <a href="#">Schoolday</a>
</td>
</tr>
<tr>
<td>
Local
</td>
<td>
<a href="#">Local Weather Forecasts</a>
</td>
</tr>
<tr>
<td>
World
</td>
<td>
<a href="#">World Weather Forecasts & International Sites</a>
</td>
</tr>
<tr>
<td>
News
</td>
<td>
<a href="#">News Center</a>, <a href="#">Storm Watch</a>, <a href="#">Tropical Update</a>, <a href="#">Storm Stories</a>, <a href="#">Special Reports</a>, <a href="#">Financial Forecast</a>
</td>
</tr>
<tr>
<td>
Weather Tools
</td>
<td>
<a href="#">My Page</a>, <a href="#">Desktop</a>, <a href="#">Email</a>, <a href="#">Phone</a>, <a href="#">PDA</a>, <a href="#">Pager</a>, <a href="#">My Site</a>
</td>
</tr>
</table>
<!-- absurd links -->
<table cellspacing="0" summary="International">
<caption>International</caption>
<tr>
<th>
International
</th>
</tr>
<tr>
<td>
<a href="#">Brazil</a> | <a href="#">France</a> | <a href="#">Germany</a> | <a href="#">Latin America</a> | <a href="#">United Kingdom</a>
</td>
</tr>
</table>
<!-- bottom row navigation links -->
<div class="rowLinksWrapper">
<div class="rowLinks">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Site Map</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">Advertise</a>
</li>
<li class="last">
<a href="#">Weather on Your Site</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>