November 3rd, 2007 by
Daniel Costalis
(Who am I?)
Everyone wants a site that looks good, loads fast, and is easy to work with. It really isn’t as hard as one might think, as long as you follow some of the basic rules of design that you would with any development project. With this, I’m going to assume you’ll be writing a PHP based site, but the same principles can be applied to another server side language.
If all or most of your pages are going to have the same header or footer, why not separate it out? This way, you only have to update links or other changes once. a simple <? include “header.php”; ?> can save you headaches throughout development. If you decide later on down the road to change it, you only need to edit one file. The best part about this method, is that search engines don’t know that your content is generated on the fly, so it will index the full page. I also like to make a links.php file and a footer.php file. The links file lets you make sure that your link bar up top is always up to date. I’ve seen plenty of (FrontPage) sites where it seems like every single page has a different set of links. The footer file is great for all of your static copyright and privacy policy links. This won’t change much, but it keeps your template nice and clean. a good template could look as simple as this:
<? include "header.php"; ?>
<? include "includes/standard_functions.php"; ?>
<div id = "linkbar">
<? include "links.php"; ?>
</div>
<div id = "content">
<!-- content -->
</div>
<? include "footer.php" ?>
The <html> and <head> and <title> tags can all be housed in your header.php file. All pages should have all the same information in those tags anyways, so it will save you a step. All of your stylesheets can be included from here as well. If you want to have each page with a different browser title, there is a very easy modification you can implement. Make the top of your template file look like this:
$page_title = "This page title
<? include "header.php" ?>
Then in the header.php file, change the <title> tag to this:
<title><? echo $page_title; ?></title>
Nice, easy, simple, clean. I’ve used this or a similar method on many sites.
In the standard_functions.php file, you can pretty much put whatever you want. If you need to connect to a sql database, you can include another file from there, you can use it to declare variables, or use it to define functions that will be used throughout your site (rotating sponsor link on the sidebar for example).
The links and the content div shouldn’t need any styling in the page itself (that’s what stylesheets are for!), so even if you COMPLETELY change the look of your site, you’ll be able to do so with the editing of only the stylesheet file. Keep in mind, that the html code itself is not used to define the look and style of the site; html should be used to create a shell, and to enumerate content.
The footer is where you are going to be including the </body> </html> tags, and thus any javascript that needs to be run site-wide (such as google analytics). It’s always good practice to include javascript code directly before the </body> tag, to reduce perceived loading time. (Browsers will stop loading elements until the script has finished excecuting).
Your template might need some tweaking from the basic outline shown above, and here are some alternate options for you to start playing with:
A more stylized content area:
$page_title = "template";
<? include "header.php"; ?>
<? include "includes/standard_functions.php"; ?>
<div id = "linkbar">
<? include "links.php"; ?>
</div>
<div id = "wrapper">
<div id = "content">
<!-- content -->
</div>
</div>
<? include "footer.php" ?>
A float template:
$page_title = "template";
<? include "header.php"; ?>
<? include "includes/standard_functions.php"; ?>
<div id = "wrapper">
<div id = "linkbar">
<? include "links.php"; ?>
</div>
<div id = "content">
<!-- content -->
</div>
<div style = "clear:both;">
</div>
<? include "footer.php" ?>
More elaborate (keep in mind, having the four divs that are in the sidebar in the main template reduces the ability to change it sitewide later… this is really just to show a possibility:
$page_title = "template";
<? include "header.php"; ?>
<? include "includes/standard_functions.php"; ?>
<div id = "wrapper">
<div id = "sidebar">
<div id = "linkbar">
<? include "links.php"; ?>
</div>
<div id = "categories">
<? include "categories.php"; ?>
</div>
<div id = "sponsors">
<? include "sponsors.php"; ?>
</div>
<div id = "current_charity">
<? include "current_charity.php"; ?>
</div>
</div>
<div id = "content">
<!-- content -->
</div>
<div style = "clear:both;">
</div>
<? include "footer.php" ?>
