Website Design Skeleton

June 1st, 2007 @

You don’t want to re-invent the wheel every new website you begin coding on. Instead maximize your productivity with a template or skeleton if you will of a basic site design.

Your implementation may vary. I’ve tried to keep mine terse for the utmost configuration.

We’ll start with a basic header:

head.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Change Me Later</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="/style.css" rel="stylesheet" type="text/css">
</head>
<body>

I’ve choose HTML 4.01 strict for various reasons. You will need to remember to fill in your title.

As you may have noticed, I’ve included a style sheet in this header, so let’s go over that.

style.css

* {margin:0;padding:0;}

Not much to see here, we reset our margin and padding to 0 to eliminate cross browser quirks and general madness while designing. Some people prefer more in their default CSS.

Let’s continue on to the main page.

index.php

require('head.php');
<!-- Do stuff here -->
require('foot.php');

Not much to see nor explain. Now onwards to our footer.

foot.php

</body>
</html>

And there you have your skeleton. It’s up to you to add the muscle.

A few ideas:

  • Include your name, version and other information in comments in the header and stylesheet.
  • Include your statistics code in the footer.
  • Include any javascript you might use.
  • Instead write a php library to generate your header/footer bassed on doctype/chartype.
  • Set default text styles, colors etc to your liking in your CSS

One Response to “Website Design Skeleton”

  1. smaxor Says:

    One other thing to consider that I always use and like in a seperate file is menu.php. You’re always going to want a menubar in some respect and it’s nice to have the piece external as well.

Leave a Reply