Home arrow PHP arrow Page 3 - The Modular Web Page

The Modular Web Page

Peter's latest article shows us how taking a modular approach to design websites can save us time, maintenance, and insanity.

Author Info:
By: Peter Lavin
Rating: 3 stars3 stars3 stars3 stars3 stars / 99
September 30, 2003
  1. · The Modular Web Page
  2. · Designing Your Page Layout
  3. · The Code
  4. · The Code, Cont'd
  5. · Conclusion

print this article

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”.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
<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">
<body style="margin: 0px;">
<a id="top"></a>
<table cellpadding="5" cellspacing="0" border="1">
<!--insert column here -->
<?php include 'top.inc'; ?>
<!--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>
<!--insert columns here -->
<? include 'bottom.inc' ?>

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.

blog comments powered by Disqus

- Removing Singletons in PHP
- Singletons in PHP
- Implement Facebook Javascript SDK with PHP
- Making Usage Statistics in PHP
- Installing PHP under Windows: Further Config...
- File Version Management in PHP
- Statistical View of Data in a Clustered Bar ...
- Creating a Multi-File Upload Script in PHP
- Executing Microsoft SQL Server Stored Proced...
- Code 10x More Efficiently Using Data Access ...
- A Few Tips for Speeding Up PHP Code
- The Modular Web Page
- Quick E-Commerce with PHP and PayPal
- Regression Testing With JMeter
- Building an Iterator with PHP

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials