About Web Design Book Chapter 14 - Example 14-4
Here is the code for example 14-4 in the About Web Design book.
The Page | The HTML | The Stylesheet | The JavaScript
The HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dogs and Their Toys</title>
<meta name="description" content="Dog leashes restraint devices dog leashes" />
<meta name="keywords" content="dog leashes, dogs, dog toys, canines, information about dogs, dog help" />
<link type="text/css" href="../../awdchapter5/l/zexample5-5.css" rel="stylesheet" />
</head>
<body onload="document.contactus.name.focus();">
<div id="main">
<h1 id="branding">Dogs and Their Toys</h1>
<ul id="navigation">
<li><a href="../index.html">Home</a></li>
<li><a href="../products/index.html">Dog Toys for Sale</a></li>
<li><a href="../articles/index.html">Dog Information</a></li>
<li><a href="../about/index.html">About this Site</a></li>
</ul>
<div id="body">
<h2>Validate on the Fly</h2>
<p>
All fields are required.
</p>
<form action="mailto:webdesign.guide@about.com" method="get" enctype="text/plain" id="contactus" name="contactus">
<label accesskey="n" for="name">Name:
<input type="text" name="name" id="name" value="" size="40" /></label><br />
<label accesskey="e" for="email">Email:
<input type="text" name="email" id="email" value="" size="40" /></label><br />
Do you want a reply?
<label accesskey="y"><input type="radio" name="reply" id="reply" value="yes" /> Yes</label>
<label accesskey="n"><input type="radio" name="reply" id="reply" value="no" /> No</label><br />
What is your message?<br />
<textarea name="message" id="message" rows="10" cols="35"></textarea><br />
<input type="submit" value="Send Message" />
<input type="reset" value="Clear Form" />
</form>
</div>
<div id="information">
<p>
Copyright © 2006 <a href="http://webdesign.about.com/mpremail.htm">Jennifer Kyrnin</a>
</p>
</div>
</div>
</body>
</html>
Replace the title and meta tags with your own site content.
The Stylesheet (CSS)
html, body { margin: 0px 20px; }
html { background-color : #3c6; }
body {
font: normal 1em Geneva, Arial, Helvetica;
text-align: center;
}
div#main {
width : 700px;
margin: 0 auto;
background-color:#fff;
text-align: left;
}
#body { padding: 0 10px; }
#information { font-size: .7em; text-align: center; }
#branding {
height: 200px;
background: #fff url(http://z.about.com/d/webdesign/1/0/S/2/1/dogs_and_toys_logo.jpg) no-repeat;
margin: 0;
padding: 0 0 0 100px;
font-size: 3em;
color: #3c6;
}
#navigation {
margin: -30px 0 30px 180px;
background-color: #3c6;
}
#navigation li { display: inline; }
#navigation li a {
font-size: .9em;
padding: .25em .5em;
background-color: #3c6;
color: #fff;
text-decoration: none;
float: left;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
}
#navigation li a:link, #navigation li a:visited { color: #fff; }
ul#navigation li a:hover {
color: #000;
background-color: #fff;
}
The JavaScript
<body onload="document.contactus.name.focus();">
Here's what the page looks like.
Jennifer Kyrnin