The Modular Web Page - The Code
(Page 3 of 5 )
First a look at the “skeleton” of the page. This is our template file. Its name will change with the content at the centre of our page. For instance, if this was a welcome page we would put in appropriate content and save the page as “welcome.php”.
template.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Template</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Peter Lavin" />
<link rel="stylesheet" type="text/css" href="style/template.css" title="template" />
<!--local style elements here-->
<style type="text/css">
</style>
</head>
<body style="margin: 0px;">
<a id="top"></a>
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<!--insert column here -->
<?php include 'top.inc'; ?>
</tr>
<tr>
<!--insert column here -->
<?php include 'sidebar.inc'; ?>
<!--setting width to 100% here forces most browsers to fill screen -->
<td class="main" width="100%" align="center">
<font="16pt">Centre Content</font>
</td>
</tr>
<tr>
<!--insert columns here -->
<? include 'bottom.inc' ?>
</tr>
</table>
</body>
</html>
The page contents are exactly what we might expect from the picture above. The entire page is enclosed in a table and there are three separate include files. There are comments to identify the location and the type of inclusion. It is best to make your inclusion a self-contained element. For instance, if you are including a complete column start your include file with the “<td>” tag and end it with the “</td>” tag. Doing this will make your code easier to understand.
A brief note about how our template page displays in different browsers would be in order. As is often the case, not all browsers render this page exactly as pictured in our image above. However, once content has been entered in the centre panel both major browsers show a virtually identical version of this page.
You may notice that some of the HTML tags are not exactly familiar. This page has been created to be XHTML compliant. This is a good habit to get into especially if you plan to go on and learn XML. To find out more about XHTML check out the tutorial offered on the W3C site. This is the World Wide Web Consortium site and if you are not already familiar with it have a good look around. There’s lots to be learned there and many useful resources.
Next: The Code, Cont'd >>
More PHP Articles
More By Peter Lavin
