Website Design Skeleton

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

Dare to Dream

I had this dream last night
Where everything seemed right
As I walked upon the field
I looked at flowers stopped and kneeled
and smelled the pretty fragrance
breathed in their calming incense
I wish I could have shared
If only you had dared

I had this dream last night
With blue-green neon lights
Music pure within the air
into the reaches sat and stared
and basked in all the glory
I heard the joyful story
I wish I could have shared
If only you had dared

In Technicolor red
and pink and blue and white
I had this dream last night

I had this dream last night!
a brilliant perfect sight
of fantasy so unreal
Yet seemingly made of steel
Wrought red upon my mind
Quenched but just in time
I wish I could have shared
If only you had dared

If only you had dared.