Think about a business, organization, group, etc. that you have an interest in or a passion for. Create an "official site" for that client which will include "news" stories, photos or updates of some sort.
- Copy the three-column template folder (with pages, css file, graphics, etc.) and give it the name of the business/group you are doing.
- Gather materials (pictures, logo, address, business info, news stories, etc.)
- Select a professional color scheme (at least three colors)
- Use the template to build your site with multiple pages.
A three-column web page template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Door County Wildflowers</title>
<meta charset="utf-8">
<link href="wildflowers.css" rel="stylesheet"></link>
</head>
<body>
<div id="container">
<div id="header">
<span><a href="#center">Skip to Content</a></span>
<h1>Door County Wildflowers</h1>
</div> <!-- end of header -->
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="spring.html">Spring</a></li>
<li><a href="summer.html">Summer</a></li>
<li><a href="fall.html">Fall</a></li>
<li><a href="winter.html">Winter</a></li>
</ul>
<img src="plsthumb.jpg" width="100" height="100" alt="Showy Pink Lady Slipper">
</div> <!-- end of nav -->
<div id="sidebar">
<h3>The Ridges</h3>
<p class="news">The Ridges Nature Sanctuary offers wild orchid hikes during the Summer months. For more info, visit <a href="http://www.ridgesanctuary.org">The Ridges</a>.</p>
<h3>Newport State Park</h3>
<p class="news">The <a href="http://www.newportwildernesssociety.org">Newport Wilderness Society</a> sponsors free meadow hikes at 9am every Saturday. Stop by the park office to register.</p>
</div> <!-- end sidebar -->
<div id="center">
<h2>Door County</h2>
<p>Wisconsin's Door County Peninsula is a unique, ecologically diverse place with upland and boreal forest, bogs, swamps, sand and rock beaches, limestone escarpments, and farmlands.</p>
<p>A wide array of wildflowers grow in the county because of this variety of ecosystems.</p>
<img src="trillium.jpg" width="200" height="150" alt="Trillium" id="floatright">
<h3>Explore the beauty <br>of Door County Wildflowers . . .</h3>
<p>With five state parks, tons of county parks, and private nature sanctuaries, Door County is teeming with natural areas for you to stalk your favorite wildflowers.<br>
</div> <!-- end center -->
<div id="footer">Copyright © 2013 Door County Wild Flowers<br></div>
</div> <!-- end container -->
</body>
</html>We will also begin with the following CSS Code as a "skeleton":
body { margin:0;
background-color: #ffffff; }
#container { background-color: #eeeeee;
color: #006600;
min-width: 960px;
font-family: Verdana, Arial, sans-serif; }
#header { color: #cc66cc;
background-color: #636631;
border-bottom: 2px solid #000000;
text-align: right;
height: 120px;
background-image: url(showybg.jpg);
background-position: bottom;
background-repeat: repeat-x;
padding: 0 20px; }
#nav { float: left;
width: 150px; }
#sidebar{ float: right;
width: 200px; }
#center { margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #ffffff;
color: #006600; }
#footer { font-size: .70em;
text-align: center;
color: #006600;
background-color: #ffffff;
padding-top: 10px;
clear: both; }
#header a { font-size: .80em; }
#header a:link, #header a:visited { color: #ffffff; }
#header a:focus, #header a:hover { color: #eeeeee; }
h1 { margin-top: 0;
font-size: 3em;
text-align: left;
text-shadow: 4px 4px 4px #000000;}
#nav ul { margin-top: 20px;
list-style-type: none; }
#nav a { text-decoration: none;
font-size: 1.2em; }
#nav a:link { color:#006600;}
#nav a:visited { color: #003300; }
#nav a:focus, #nav a:hover { color: #cc66cc; }
#nav a:active { color: #000000;}
#nav img { margin: 30px;}
#center p { margin: 20px; }
#center h2, #center h3 { color: #cc66cc;
background-color: #ffffff; }
#floatright { margin: 10px;
float: right; }
#sidebar h3 { padding-bottom: 2px;
border-bottom: 1px solid #000000;
margin: 10px;
font-size: .90em;
color: #cc66cc;
background-color: #eeeeee; }
.news { font-size: .80em;
margin: 10px; }
No comments:
Post a Comment