Building a template file.
By Jorge Blanco
STEP 7: Final Product
Here's the final result and its
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JBSWARD</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#surround_div{
position:absolute;
top: 0px;
left: 0px;
}
#banner{
margin: 5px;
width: 750px;
display: inline;
}
#columns{
margin: 5px;
margin-top: 0px;
margin-bottom 0px;
width: 750px;
clear:both;
}
#left{
background-color:#E6E6FF;
border: solid #505096 1px;
width: 120px;
float: left;
}
#content{
background-color:#FFFFFF;
border: dashed #505096 1px;
margin:0px 5px;
float: left;
width: 500px;
padding: 5px;
}
#right{
background-color:#505096;
border: solid #505096 1px;
width: 120px;
float: right;
color: #FFFFFF;
}
#footer{
margin: 5px;
background-color: #FFFFFF;
border: solid #505096 1px;
clear:both;
}
.title{
font: bold 1.8em Arial;
}
.subtitle{
font: bold 1.3em Arial;
}
.monospace{
font: normal 1.0em "Courier New";
}
.gray {
color: #AAAAAA;
}
.tiny{
font: 0.55em Arial;
}
p{
font: normal 1.0em Arial;
color: #1E1E64;
}
</style>
</head>
<body>
<div id="surround_div"> <!-- This is the layer that surrounds
the whole document, it has many uses that we will see soon -->
<div id="banner"><img src="images/site/jbsward.jpg"
width="750" height="100"><!-- The top banner layer,
you can put your title here, either as text or as an image --></div><!--
This closes the banner layer -->
<div id="columns"> <!-- This layer surrounds the columns
so that they stick together -->
<div id="left"> <!-- The left column layer -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sections</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!-- This closes the left column layer -->
<div id="content"> <!-- The middle column content layer
-->
<p class="title">Put Your content here:</p>
<p class="subtitle">Classes:</p>
<p>Title: <span class="title">JBSWARD</span><br>
Subtitle: <span class="subtitle">JBSWARD</span><br>
Monospace: <span class="monospace">JBSWARD</span><br>
Gray: <span class="gray">JBSWARD</span><br>
Tiny: <span class="tiny">JBSWARD</span></p>
</div> <!-- This closes the middle column layer -->
<div id="right"><!-- The right column layer -->
<script type="text/javascript"><!--
google_ad_client = "foobar-123456789"; <!-- Garbled for security
reasons-->
google_alternate_color = "505096";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text_image";
google_ad_channel ="123456789"; <!-- Garbled for security reasons-->
google_color_border = "505096";
google_color_bg = "6060AA";
google_color_link = "E6E6FF";
google_color_url = "FFFFFF";
google_color_text = "FFFFFF";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/ show_ads.js">
</script>
</div> <!-- This closes the right column layer -->
</div> <!-- This closes the columns layer -->
<div id="footer" class="gray tiny"> <!-- The
footer layer, at the bottom of the document -->
<center>
Jorge Blanco 2005© All Rights Reserved.<br>
All content is property of its respective authors. Partial or total reproduction
without the author's written permission is strictly forbidden under any circumstances.
</center>
</div> <!-- This closes the footer layer -->
</div> <!-- This closes the surround_div layer and puts an end to
the document -->
</body>
</html>
Well that's about it, the above example should be enough
to get you started on your road to building great templates for complex websites.
If some extra help is needed be sure to check the Related Links on the left.
Remember that this is just a basic template, it lacks many things that are
still important for a website, here's a list of some stuff you can add on
your own:
<meta> tags for Keywords,
Description and Author
CSS styles for links in the left menu
JavaScript for the status bar
JavaScript to select proper formatting according to the user's computer or
preferences
Sound, Animation and other media
And much more...
Good Luck!
<Previous Index
Next>
