Home arrow PHP arrow Page 4 - 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, Cont'd
(Page 4 of 5 )


The code here is pretty simple. We want our first column to span the width of the browser and since our table has only a maximum of two columns the “colspan” attribute is set to “2”. The “class” attribute is not strictly necessary but by including it the presentation of our page can be made more flexible. We can quickly reference this particular “td” tag from our style sheet. Setting or changing the style attributes from one central location makes designing and maintenance much easier.

<!--one column spanning the browser window -->
<td class="top" align="center" colspan ="2" height="80px">
<p style="font-size:26pt;">
<i><b>Site Name</b></i>

For the sake of showing something we’ve put some text in this column but it might more typically be a graphic. Notice also that this “top.php” file is made up of one complete column – a set of open and close table data tags - inserted between the open and close tags for a table row. Document your code with internal comments. Web pages can grow into large and unwieldy things. You may think you understand your page thoroughly as you are creating it but try coming back to it after a few days off. You’ll wish you had even more comments.


<!--a column containing links -->
<td class="sidebar" valign="top" width="20%">
<p class="head">Links</p>
<a href="page1.html">Link One</a><br />
<a href="page2.html">Link Two</a><br />
<br />
<br />

Very similar to our “top.php” file. We want our sidebar to occupy twenty percent of the page so have set the width to this value. The advantages of using include files are most evident here. To change the links in any page that includes this file we change it in one and only one place.


<td class="sidebar"> <a href="#top">Return to Top</a>
<td class=”main ”align="center"  colspan = "2">

By now I’m sure you’ve pretty much got the idea but a few comments on this include file are in order. This final file differs in that it contains two columns. We want the first column to contain a hyperlink to the top of the page and we want this hyperlink to always appear at the very bottom of the page. Creating a column in the final row allows us to do this. This column will “inherit” the width of the sidebar column above so its width will be identical to the sidebar. We want it to appear seamlessly as part of the sidebar so this is a desirable effect. We also want it to have the same display characteristics as the sidebar so we have given it the same class name. Because of this, changes to the sidebar class in the CSS file will effect the entire left side of our page. For the moment, the border of this cell is visible but remember we will be removing it when the page is complete.

Similar arguments apply to our last column. Hence its class name.

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