A php Template Tutorial
Search Engines
 ♦  Alta Vista
 ♦  Excite
 ♦  Google
 ♦  Lycos
 ♦  Yahoo

php sidebar readme file

This Template and the php scripts are adapted from a Tutorial on the Astahost.com Forum titled "CMS101 - Content Management System Design".

Since the Tutorial's author (vujsa) did such a marvellous job of describing the system in the original Topic posting, I will not attempt to explain it here, rather, I invite you to have a look at his Topic and learn from it.

The Basic tutorial provided coding for developing a Table-based web-site Template which used php includes and embedded information to create a 'menu' section in the Template, which was simply a building a list of anchors inside a table cell. This adapted version takes it a couple of steps further.

notes

  • To begin with, the list is inside a div tag which is more compliant to the standards. The Template used here is 'table based', but, using the 'sidebar' code in a div-structured page would bring it in-line with proper css and (x)html coding, (using div's and embedded css rather than tables). (*see note about validation below*) The focus here is on the 'menu' creation, not the template structure.
  • Secondly, the list is built using dl, dt and dd tags instead of ul's and li's. This allows for a little more control on the styling of the Menu. Where the "ul,li" method is a two level structure, the "dl, dt, dd" method allows for three levels of styling. There are numerous tutorials on the web showing dl menus and I encourage you to read them.
  • Thirdly, the new sidebar version adds class tags to, again, allow for some CSS hooks.
  • Fourthly, be aware that this Model will, NOT pass the w3c validator for the simple reason that the menu includes an "alt=" tooltip feature. The alt= is a deprecated html tag and is not allowed in the most recent Standards, so if you are a 'purist', this code isn't for you unless you remove this portion of the function and data structure. Title tags are included. They are the preferred method to include 'tooltips', but with the large percentage of users still bound to this proprietary Microsoft feature, I have chosen to allow for it here.
  • Fifth, the css forthe index2.php is inside a file named 'sidebar.css'. Only this one file is linked to an external stylesheet. .
The primary purpose for making this template available is to provide a learning experience, not to provide coders with the end product. Admittedly, this Template is very basic and is not meant to be 'cut and pasted' into a web site, but rather, to be used as a learning tool to provide you with the means to build your site using templating concepts which makes the maintenance of a site easier, and the presentation more consistent across pages. Some html/css knowledge would be required to make changes to the files, but very little.

Just a reminder to make any modifications on a 'copy' of the files so if you alter something critical to the function of the code, you will have an un-modified version to resume your work from.

Happy coding.

Jim Haslip
jlhaslip@yahoo.ca

zip file contents

This zip file should include the following :

for the Basic Template use :
index.php
header.php
menu.php
main.php
footer.php

For the Sidebar Version use :
index2.php
header.php
menu2.php
main.php
footer.php

A sample of the original menu code is available in the file named menu.php

To build the menu inside a template using php includes as per vujsa's Tutorial:index.php

To build a 'sidebar menu' : menu2.php

To build the Basic Template with the sidebar menu : index2.php

Using these files on your Local Computer requires a version of php installed and the files resident in your "localhost" path. Instructions for the use or installation of php is beyond the scope of this article. Google on "xammp" or "wamp" to find out more about those two packages.

© 2005 Acme Web Design Inc. - All Right Reserved.