The Modular Web Page - The Code, Cont'd
(Page 4 of 5 )
top.inc
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>
</p>
</td>
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.
sidebar.inc
<!--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 />
</td>
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.
bottom.inc
<td class="sidebar"> <a href="#top">Return to Top</a>
</td>
<td class=”main ”align="center" colspan = "2">
Copyright
</td>
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.
Next: Conclusion >>
More PHP Articles
More By Peter Lavin
