Building a template file.
By Jorge Blanco
STEP 5: Basic Elements
Next you need to start adding the basic content that will
be repeated throughout your pages, this content goes in between the layer
tags.
<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">Place here your ads, polls, affiliates, news,
etc.<!-- The right column layer -->
</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 -->
As you can see, I've included an image banner (Download)
on top, then some basic links on the left column. In the content (middle)
columns, I've put some examples of the available classes in the CSS. This
is useful to setup titles, subtitles, highlighting text, etc. In the right
columns there is a reserved space for any extra content you see fit, I will
put there some advertisement. Finally, in the footer layer I've put the legal
stuff.
<Previous Index Next>
