Making the leap into publishing some useful web-related article is something I’ve been thinking about a lot lately. For some reason, the use of templates always seems to filter to the top when I’m bandying these crazy ideas about. Call it coincidence, call it divine providence, call it whatever, but Dave Shea’s recent article about templates and the responses to it has inspired me to share my own technique. Without further ado…
In larger sites, templates are a godsend. Trust me, I maintain over 60 E-Commerce domains. Dreamweaver has saved me hours of finding and replacing but it’s quirky. Ever forget to close a tag while you’re editing? I have. Mine freezes up and I end up opening my trusty text editor and correcting the mistake. Here’s a simple PHP technique I’ve implemented on this site.
Each content page consists of a properly formed HTML document, like so:
<!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>Dreamweaver templates giving you nightmares? Try this simple PHP templating technique</title>
<link rel="stylesheet" type="text/css" media="all" href="css.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="here are some keywords" />
</head>
<body id="about">
<?php
require("header.php");
?>
Some content here...
<?php
require("footer.php");
?>
</body>
</html>
I’ve chosen to keep the DOCTYPE, HEAD tags and such in the page with the content. That way I can still open and edit it in a WYSIWYG editor without too much whining and complaining. This also allows me to specifically tailor title, description and keywords to each page, along with specifying a body ID for future styling.
My header will contain the banner image and navigation, the content of header.php looks like this:
<div id="container">
<div id="banner">
<img src="img/banner.jpg" alt=" " />
</div>
<ul id="nav">
<li id="home"><a href="index.php">Home</a></li>
<li id="about"><a href="about.php">About Michael</a></li>
<li id="resources"><a href="resources.php">Web Design Resources</a></li>
<li id="contact"><a href="contact.php">Contact Michael</a></li>
</ul>
<div id="content">
<!—begin content area-->
Since the header and footer files “wrap” around the content area, the container and content DIVs are closed up by footer.php, like so:
<!—end content area-->
</div>
<!—end container-->
</div>
There you have it, Templates for Dummies. If I add another page that should be in the global navigation, I just open header.php and add it to the list, upload, and presto!
So this is it. A double milestone. A first post and a first “How-To”. I’ll be working to constantly improve the writing and technical quality of these posts but please feel free to critique, comment, or make suggestions.
