TODAY'S LESSON: Templatizing Your Site
 

Have you ever woken up one day and decided that it was time to revamp the entire layout and navigation of your site? The change may have sounded like a good thing when the flapjacks, OJ, and coffee were coursing through your veins. But 11 hours later, your fingers are covered with cutting-and-pasting blisters, your eyes are blurry from picking through oceans of <TD>s and <TR>s, and you're more than ready to throw in the towel.

You've probably experienced a similar situation if you've ever tried to maintain multiple versions of your site: Say a text-driven, "low bandwidth" site (for people with slow modems and/or older browsers); and a graphics-crazy, "high bandwidth" site (for folks blessed with screaming T3 connections and the very latest browsers). Each new addition to the site means dropping the same content into two different layouts. Every change needs to be made to two different files. Talk about doubling your displeasure!

It doesn't have to be that way. Not when there's such a glorious thing as templates to help make this world a better place.

On a template-driven site, a change to the look and feel can mean updating a handful of documents, not a hundred. Templates also eliminate the need to duplicate your content — so no more double trouble. Sound tempting?

Here's how it works: Most sites feature a limited number of "looks." First, there's the homepage. Then there are the "inside" pages, which are usually pretty similar to each other, but might feature a different color scheme or header art (to indicate the many areas of a site, like "About Company," "Product Information," "Job Listings," and so on).

The template theory involves creating a master or prototype page, called a template, for every look that is used on more than one page. Then that template is used to create all the pages with the same look (versus building each and every page on your site from the ground up). The ways templates are used to generate these pages, however, vary in sophistication.

The old-school way of using templates is simply to create multiple copies of them, then drop in the content of each new page. The key to this kind of template work is to make sure that the original template is perfect: The last thing you want is to discover your template is missing a </TD>, and now all the pages you've created have to be fixed. When you're dealing with templates in this fashion, it's a good idea to make liberal use of comment tags (<!-- and -->), easy-to-spot tags (which don't show up in browsers, just your code) like: <!--COPY GOES HERE--> or <!--NAVIGATION BAR BEGINS HERE--> and <!--NAVIGATION BAR ENDS HERE-->. Comment tags make it easy and fast to locate the exact place in the HTML page that needs your attention.

The problem with this yesteryear approach is this: Say you want to update your copyright line, which appears at the bottom of every single page on your site. You will still have to go into each individual page to make the change. Wouldn't it be swell if that copyright line were just one, unique file, and you could simply point to it like it was a graphic? In other words, your company logo may appear on every page, but there's still only one graphic sitting on your server, which you call into the page with an <IMG SRC> tag.

Well, you can actually do the very same thing with text.

What you do is pull out anything that will appear on a large number of pages (like a copyright, or a table that contains your main site navigation) and put it into its own file, called a "fragment file." This file is just like an HTML file, but it doesn't have HTML or BODY tags, and it usually has (but doesn't have to have) an .htmlf extension versus an .html one.

Say your copyright file, which we'll save as "copyright.htmlf," looks like this:

Copyright 1997-1999.<br>
<i>All rights reserved.</i>

The way to pull this fragment into your Web page would be with a "virtual include," which looks like this: (Note that there can be no hard returns in a virtual include — all of it has to be on one line.)

<!--#include virtual="copyright.htmlf"-->

This piece of code would go right where the copyright line currently resides in the HTML. Now, if you change the copyright information in the "copyright.htmlf" file, all of the places where you used this include will pull in the revised version of the copyright.

That's not all. Remember the dual life we were leading with our multiple-version site? Well, that problem can also be eliminated by making a fragment file of the content that needs to appear in more than one place, and then dropping virtual includes into the two different versions of the site.

If you build your templates using as many includes as you logically can, you'll eliminate a lot of the pain and suffering that comes with site maintenance. You will save a lot of time and energy with the template way of life you've learned today. Once you try it, you'll never go back to those cruel cutting and pasting ways.

HINTS, POINTERS, and TIPS o' the TRADE

Use your templates to create templates: Once you've perfected your first inside page template, duplicate it and then tweak it to create the template for a different section. It'll mean the difference between building each template from scratch, and just changing some of the graphics.

Say you're backing your car up in a parking lot, and suddenly your car won't go any further. You may be tempted — because you're late for a movie and it's a little hot out and you're frustrated — to put it into drive and slam your foot on the gas. Don't. Your bumper may have just snagged on a pole, which would mean putting the pedal to the metal would rip the entire bumper off your car. Then you'd really have something to be frustrated about.

RESOURCES:

Templates Save You Time, Headaches, and RSI

Fun with Comment Tags

Virtual Includes Equal Less Work

Anatomy of a Redesign