ASP “Templating”
This is a follow-up to an earlier post about creating an easy-to-implement “templating” system in PHP that can be found at http://www.letsgomurphys.com/dailies/wp-trackback.php/4. At the time that was written, I promised an ASP version and here it is.
Over the last year or so, I’ve been using this successfully on over 30 domains as an alternative to Dreamweaver’s template system. I’m kind of eh about Dreamweaver. I think it’s file management system is handy. I like that I can rename a file and it’s dummy alert tells me other files are linked to that file, should it change the name in those files as well? Yes. Good, that was easy. To me, it beats manual find and replace. DW’s templates are useful when trying to maintain a consistent look and feel throughout a web site but if you want to change something you’ve got to have all the files that use that template, make the change, and reupload every file affected. Some of my sites have dozens and dozens and dozens of pages. Modifying and reuploading every file is time consuming and unnecessary. Enter the include.
I use includes to, well, include all consistent elements of a site. Using this technique, a sample page would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>World’s Greatest Web Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<!––#include virtual="/templates/hdr.asp"––>
<p>Welcome to the World’s Greatest Web Page!</p>
<!––#include virtual="/templates/ftr.asp"––>
</body>
</html>
In the above example, the contents of the hdr.asp and ftr.asp files are included in the page before the HTML parser sends everything to the browser window. They’ll contain all the design elements that appear on every page such as logo, global navigation, etc. The only contents of each page are it’s customized title and meta tags and its copy.
Now let’s take a look at the contents of hdr.asp:
<h1 id="logo">World’s Greatest Domain</h1>
<div id="nav">
<ul>
<li>Home</li>
<li>etc.</li>
<li>etc.</li>
</ul>
</div>
<div id="content">
This basically displays the logo (I usually use an image replacement technique here) and the navigation. Then I open the div that will contain all the content in the actual page.
The footer file is going to wrap up any open tags, such as the content div opened by hdr.asp, and contain any elements that semantically come after the content area such as sidebars and/or footers. Here’s what that looks like in this case:
</div><!–– close the content div ––>
<div id="bottomNav">
<ul>
<li>Home</li>
<li>etc.</li>
<li>etc.</li>
</ul>
</div>
That’s all there is to it. When the source of the page is displayed in a browser, everything gets put together and looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>World’s Greatest Web Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1 id="logo">World’s Greatest Domain</h1>
<div id="nav">
<ul>
<li>Home</li>
<li>etc.</li>
<li>etc.</li>
</ul>
</div>
<div id="content">
<p>Welcome to the World’s Greatest Web Page!</p>
</div><!–– close the content div ––>
<div id="bottomNav">
<ul>
<li>Home</li>
<li>etc.</li>
<li>etc.</li>
</ul>
</div>
</body>
</html>
This example is obviously extremely simplisitc but this technique can accomodate virtually any layout and is guaranteed to make updating a snap.
