Graystatic Tech

When I started out designing web pages a frequent irritation was how to handle a design with several sub pages.

Imagine you’re working with your HTML design. You style it nicely with CSS and then you’re happy. It’s no big deal to copy the content of your one .html file and paste it into, let’s say about.html, contact.html and portfolio.html. You now have your page with its sub pages, nicely styled and with everything working. You call your client and tell them that you have a whooping design ready, and the client quickly responds. They really like it but there’s one thing. They would like the “Author META tag” changed to John Silvergood instead of Robin Hood. Okay, no problem. You’ll just open the four .html’s you have, index.html about.html, contact.html and portfolio.html, and change the META tag one by one. After having done that on all your different pages you call the client again. They are very happy with the change but there’s one more thing. You have named the navigation DIV “Sexy_navigation” . They are concerned that people reading the source code might be disgusted by the name of the tag, so they kindly ask you to change it. Now you have to go through it again. Changing it on index.html. Saving it. Changing it on about.html. Saving it and so on…

You realize this is much too time consuming so you search for “separating content from design” on Google and find this article on attackr.com. Now I’m going to share with you a very smart solution Weiss and Student taught me on another forum.

The structure of a standard design

Most web pages are divided into three parts:

• A. The header which contains everything within the HEAD tags, and a top/side menu.
• B. The content part which is the only part of the page that really separates itself from others.
• C. The footer which is also generic. This taking into consideration means that we would be very far if we could separate the header and the footer and later load it into the different pages that only consist of their unique content.

Using PHP includes

• 1. Rename all your .html documents as .php. Only change that file name ending. Please note that this means you now have to work online, on a server that can handle PHP.
• 2. Consider what generic code should apply to all sub pages in the start of your .php document. This would normally be everything in the HEAD tags and maybe a navigation. Now copy this part of the code and paste into a new document. Call it header.php for convenience.
• 3. Consider what is generic code should apply to all sub pages at the end of your .php document. This might be the DIV containing your footer with copyright information and contact. Also copy this part of the code and paste into a new document. Call it footer.php for convenience.
• 4. Now make sure to delete all the code that we just copied into header.php and footer.php on ALL your pages.
• 5. Now we’ll use a bit PHP to include the header.php on all your pages.
• 6. The code is:  <?php include 'header.php'; ?>
• 7. Paste this into the top of every page.
• 8. Now it’s time to include the footer. Use the same code, just replace header.php with footer.php. Paste the code into the bottom of every page.

The nice thing about this that every time you need doing adjustments to anything in the header.php or footer.php is obviously that you’ll only have to do it once. Of course you can also get around the problem by integrating your design into a CMS, but that is more time consuming and maybe your client won’t do what it takes to get into this CMS. Using PHP includes instead of integrating your design into a CMS like Wordpress or MODx also have other advantages. No updating needed. You’ll have no security flaws to think about either.

PHP includes just made your life a whole lot easier. Thanks PHP!

If some of you can’t get this working please contact me via this link.

This entry was posted on Saturday, July 14th, 2007 at 8:34 am and is filed under Tech. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.