Building a template file:

Jorge Blanco
Webmaster

Other articles written by this author

Building a template file.
By Jorge Blanco

STEP 3: Layers and Layout

Now we will focus on what happens between the <body>...</body> tags. Here is where the entire page takes place.

The goal is to have a three columns fixed layout with a banner on top. So we start by creating the appropriate layer (div) 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"><!-- 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 -->
</div> <!-- This closes the left column layer -->

<div id="content"> <!-- The middle column content layer -->
 </div> <!-- This closes the middle column layer -->
<div id="right"><!-- The right column layer -->
 </div> <!-- This closes the right column layer -->
</div> <!-- This closes the columns layer -->
<div id="footer"> <!-- The footer layer, at the bottom of the document -->
 </div> <!-- This closes the footer layer -->
</div> <!-- This closes the surround_div layer and puts an end to the document -->

Check out the comments included in the above code, these are very useful as the page starts to grow since sometimes it can be difficult to know which layer is opening / closing each tag and it can cause problems. Also the indentation helps out so that you can know how deeply a tag is nested, so that you know how many closing tags you need.

Here is an image on how will the layers look like (once the correct CSS styles are applied):

Of course the coloring is just for distinguishing between different layers, but it is the distribution what matters

Most of the layers are self explanatory, but there are two that might be confusing, the surround_div and the columns layer. First, the surround_div layer is there to be able to affect the whole document through CSS styling without affecting the body tag. It has also the added value that it can help hide some stuff like forced ads or even some text links that are only visible to the spiders, robots and the like. Both behaviors can be considered against the TOS (Terms Of Service) of some services.

The other layer, the columns layer is there to make sure that the three columns stick together. You might be wondering what does that means exactly, it means that since it is some sort of flexible layout there is the possibility for one of the columns to go under some other column if the space is limited, for example if the resolution is way too small or if the window is downsized. If you want to see how that looks, once you have finished the template, remove both opening and closing tags for the columns layer and play around with the results, you will see what I mean.

<Previous Index Next>
Rating: 4

Affiliates





Spoono

Join Us