Home arrow PHP arrow Page 2 - 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 - Designing Your Page Layout
(Page 2 of 5 )

We first need a plan of what our page will look like. In this case we will create a “typical” web page with a top, a sidebar a central area and a page bottom. Using a table is a very effective way of achieving this. Find below a graphic of the kind of page I mean:

Setting the border attribute of the “table” tag to “1” is an excellent idea at this stage of development. Having the border visible gives us a clear idea of the layout of our table. Of course, when we’ve finished our page we will likely want to hide the border by setting the value to “0”.

In the example above, you can see that we have a table of three rows and each row has either one or two columns. The first row spans two columns and stretches across the top of the browser. The first column of our second row is the sidebar while the second column of this row is reserved for the changing content presented in the centre of the page. Finally, our last row contains a link to the top of the page and copyright information.

You can see that the table is a powerful tool for controlling the position of elements on a web page. The effort spent on learning to manipulate a table’s attributes is well repaid. Some people will argue that the “div” tag in conjunction with a Cascading Style Sheet (CSS) offers a superior method of control.  I’m not so sure myself but enough of that. Let’s see what the code looks like.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials