A Flexible Templating Method
What is Templating?
The idea for templating is that you create a template for your website, and then fill in the contents of your pages into that template. The effect is that you have a consistent look for all your pages. However, if you want to change the template, and hence how your site looks, you will have to change every single page on your site... unless that is, you have the template embedded in all of the pages. Now I will show you how you can do that.
What You Will Need
The basis of this method is you need to have access to server side includes (SSI) or any other mechanism of inserting content dynamically into your pages. SSI can be implemented alone on Apache, and also Active Server Pages (ASP) allow you to include content using SSI calls. PHP also has a function that does exactly the same task as SSI includes. You will also need a template which we will work with.
The Method's Concept in Brief
Briefly, what you do is take your template and divide it into sections. Each section has a specific function, such as 'main content', 'navigation menu', 'latest news' and so on. Once you have those sections, you take the surrounding HTML and put that into different text files. Next you take the contents of the sections and put those into files on their own. The final step is to create a page that has SSI (or PHP) calls to include the various files. Now let us work through the details.
Our Template
Suppose that the following page is our HTML file template. It is simple to maintain clarity, but it will do.
<head>
<title>My Template</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr><td>This is where the navigation menu will go</td><td><h1> This is the page's heading</h1>
<hr>
This is the place for the main content</td></tr>
</table>
<hr>
<table width="100%" cellspacing="0" cellpadding="0">
<tr><td>This is the footer, so that we can have a copyright notice, some links, etc..</td></tr>
</table>
</body></html>
As you can see, we create a simple page. A big one-row, two-cell table positions the navigation and the content on the page (of course we will need to control for widths of the two cells using something like CSS). Then another horizontal rule, followed by a footer table. Notice that the content includes the page's heading. This means that we have to do less work later on.
Sectioning the Page
The next step is to take this HTML and section it. We section based on function. As you can see, the header (the code
between the <head></head>
tags) is constant between all pages, except for the page title. So we place the
title tag at the very end of the header, and insert our first two divisions:
<head>
<title>
<!-- THIS IS THE FIRST DIVISION -->
My Template
<!-- THIS IS THE SECOND DIVISION -->
</title>
</head>
(rest of the page...)
Right from the second division up till the start of the main content is constant for all pages. It includes the navigation menu, and the HTML code up until the main content. The end of this section, right before the start of the main content, is a section that can be taken out. The main content is a section on its own, and so we take it out too; thus we have:
</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr><td>This is where the navigation menu will go</td><td><h1> This is the page's heading</h1>
<hr>
<!-- THIS IS THE THIRD DIVISION -->
This is the place for the main content
<!-- THIS IS THE FOURTH DIVISION -->
(rest of page...)
The remaining code is constant for all pages. This includes everything from the end of the maincontent till the end of the file, including the footer. So we take this part into a section of its own. The final product is as follows:
<head>
<title>
<!-- THIS IS THE FIRST DIVISION -->
My Template
<!-- THIS IS THE SECOND DIVISION -->
</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr><td>This is where the navigation menu will go</td><td><h1> This is the page's heading</h1>
<hr>
<!-- THIS IS THE THIRD DIVISION -->
This is the place for the main content
<!-- THIS IS THE FOURTH DIVISION -->
</td></tr>
</table>
<hr>
<table width="100%" cellspacing="0" cellpadding="0">
<tr><td>This is the footer, so that we can have a copyright notice, some links, etc..</td></tr>
</table>
</body></html>
Creating the Master Template
After sectioning the page, we put each section into a text file of its own. What you will end up with is something like this:
| Code Fragment | File Name |
|
<html> <head> <title> |
start.txt |
|
</title> </head> <body> <table width="100%" cellspacing="0" cellpadding="0"> <tr><td>This is where the navigation menu will go</td><td><h1> This is the page's heading</h1> <hr> |
nav.txt |
|
</td></tr> </table> <hr> <table width="100%" cellspacing="0" cellpadding="0"> <tr><td>This is the footer, so that we can have a copyright notice, some links, etc..</td></tr> </table> </body></html> |
footer.txt |
| (main content) | (unique name) |
Now we create the master template by simply including all of these files in succession. The only thing we need to add is the page's title. So the final HTML file you upload will look something like this:
My Page's Title
<!--#include virtual="/global_directory/nav.txt"-->
<!--#include virtual="/content_directory/my_page_content.txt"-->
<!--#include virtual="/global_directory/footer.txt"-->
Notice some points:
- There is a global directory. It is a good idea to create a directory that contains your template's sections.
- There is a content directory. Again, if you separate your content files from the rest of your site, you make the site more manageable.
- There are very few page-specific details. Each new page you add needs only a title a content file, and the page-specific meta tags. It will fit in perfectly on its own.
- Some servers require that you name all of you SSI files with a specific extension, such as .shtml or .shtm.
Pros and Cons
Firstly the approach is simple. You do not need anything fancy installed. SSI is now becoming standard on many free hosting services. So is PHP, and this makes the approach applicable most of the time if you choose your host right. The approach is also generic. It works with *any* website. However the real power of this site comes in when you want to redesign. Simply create a new template, generate new section files, upload those, and all of your pages would be updated simultaneously. Also, if you want to add any new site-wide feature, such as a search form on every page, then you simply update the relavent files and all of the pages will get updated.
However, if your site is very popular, then several simultaneous SSI calls can burden your server. There are also some security issues to consider (at least be aware of) when using SSI on a server. However, all in all, I have used this approach to successfully implement two websites, one of which is eKstreme.com!
Some Useful Links
- Content vs. Presentation
- Step By Step Site Building
- Website Gadgets (Contains ad-free free hosting services)
