Introduction to Templates
 
Home
Intro to Templates
   SSI
   Template Concepts
Using STT
Obtaining STT
Contact

 

 

 

 

Hosted By
SourceForge.net Logo
  In the course of creating a web site, or a portion of a web site, it is often desirable to have a set of pages that all share a common look. For example, you might like to have the same logo and title across the top of each page, and a common menu of links down the left hand site.

For example, suppose you're making a simple web site for a company called Wizard's Widgets, and you want the site to consist of three pages: a home page (index.html), an ordering page (ordering.html), and a page of contact information (contact.html). You'd like all three pages to have the same basic layout, with a logo in the upper left corner, a title across the top, and a menu down the left-hand side. The pages might look like this:


index.html
ordering.html

contact.html

This has a consistent look across all the pages; the only parts that differ from page to page are the title across the top, and the text in the middle of the page. The HTML for one of these pages, say the home page, might look like this:

index.html:
<html>
<head>
<title>Wizard's Widgets</title>
</head>
<body bgcolor="#cccccc">
<table width=100% border=0 cellpadding=2>
  <tr>
    <td width=20% valign=top><a href="index.html">
      <img border=0 src="wlogo.png"></a></td>
    <td width=80% valign=top align=center>
      <h1>Wizard's Widgets</h1>
    </td>
  </tr>
  <tr><td colspan=2>&nbsp;</td></tr>
  <tr>
    <td valign=top>
      <a href="index.html">Home</a><br>
      <a href="ordering.html">Ordering</a><br>
      <a href="contact.html">Contact</a>
    </td>
    <td valign=top>
      Wizard's offers the world's best widgets at unbeatable
      prices.  Order yours today and receive a free gadget gift
      with your order.
    </td>
  </tr>
</table>
</body>
</html>

You'd probably start creating this site by writing index.html first. Once you've done that, you could create the other two pages by copying index.html and changing the title across the top and the text in the middle of the page. If you later decide to change other than this "main body" of text, or the title, however, for example if you add another page to the site and want to add a link for it to the menu on the left side, you'll need to edit three different pages to make that change. In this simple example it'd be relatively easy because the page design is so simple and the site only has three pages. But in reality most web pages are much more complicated than this, and most web sites have many more than three pages, and making identical changes to a bunch of pages is a pain and is error prone.

So some way to specify the common parts of the pages just once, so that you'll only have to change them in one place if/when they change, would be really helpful.

Next:  Server-Side Includes