About Web Design Book Chapter 14 - Example 14-3
Here is the code for example 14-3 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>
<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>Playing with the Date</h2>
<p>
Today is <script type="text/javascript">
var date = new Date();
var month = new Array(7);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var year = date.getYear();
if (year < 2000) { year+=1900; }
document.write(month[date.getMonth()] + " " + date.getDate() + ", " + year);
</script>.
Shasta's birthday is April 14th.
<script type="text/javascript">
var today = new Date();
var shastaBd = new Date();
shastaBd.setDate(14);
shastaBd.setMonth(3);
if (shastaBd > today)
document.write("You haven't missed Shasta's Birthday yet!");
else if (shastaBd < today)
document.write("You missed Shasta's Birthday this year!");
else document.write("Today is Shasta's Birthday!");
</script>
</p>
</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
var date = new Date();
var month = new Array(7);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var year = date.getYear();
if (year < 2000) { year+=1900; }
document.write(month[date.getMonth()] + " " + date.getDate() + ", " + year);
and
var today = new Date();
var shastaBd = new Date();
shastaBd.setDate(14);
shastaBd.setMonth(3);
if (shastaBd > today)
document.write("You haven't missed Shasta's Birthday yet!");
else if (shastaBd < today)
document.write("You missed Shasta's Birthday this year!");
else document.write("Today is Shasta's Birthday!");
Here's what the page looks like.
Jennifer Kyrnin