Web page design

There's several things that led me to this perticular page design. First the layout that has become standard throught the WWW. It works for me so why change a good thing. It looks something like this:

Layout

Header
path
Sidebar	Content
footer

Script

The part that fills the standard parts with standard content is the added script. It has a function 'fill()' that does the actual work and it's run as soon as the page completes loading. Here's the script:

function fill() {
  s  = '<h1><a href="http://vanbrug.org">Herco van Brug</a></h1>';
  s += '<p class="NextPage"><a href="#">></a></p>';
  s += '<ul>';
  s += '<li><a href="index.html">Home</a></li>';
  s += '<li><a href="projects.html">Projects</a></li>';
  s += '<li><a href="aboutme.html">About Me</a></li>';
  s += '</ul>';
  document.getElementById("HEADER").innerHTML = s;

  s  = '<h1>Stuff</h1>';
  s += '<p class="Date">Projects</p>';
  s += '<p>This page shows some of the many projects I worked on.</p>';
  s += '<p class="More"><a href="projects.html">Read More</a></p>';

  s += '<p class="Date">Torrent collective Searcher</p>';
  s += '<p>To search through 10 torrentsites can be a pain. .</p>';
  s += '<p class="More"><a href="torrents.html">Search Torrents</a></p>';

  s += '<h1>LINKS</h1>';
  s += '<p><a href="http://vanbrug.org">http://vanbrug.org</a></p>';
  document.getElementById("SIDEBAR").innerHTML = s;

  s  = '<ul>';
  s += '<li><a href="index.html" class="First">Home</a> |</li>';
  s += '<li><a href="projects.html">Projects</a> |</li>';
  s += '<li><a href="aboutme.html">About</a> |</li>';
  s += '</ul>';
  document.getElementById("FOOTER").innerHTML = s;
}

Template

The basic template.html looks like this:

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="fill.js"></script>
</head>

<body onload=fill()>
  <div id="HEADER"></div>
  <div id="PATH">
    <p><a href="index.html">Home</a> <span class="Arrow">»</span> -template-</p>
  </div> <!-- PATH -->
  <div id="SIDEBAR"></div>
  <div id="CONTENT">

  </div>
  <div id="FOOTER"></div>
</body>

Styles

Ofcourse there's a stylesheet that makes everything fall into place. Like all the DIVs have to be positioned correctly, have the right width, etc. It's the thing that makes these pages work. Here's an extract from the total stylesheet. The complete css file can be grabbed from this site.

If you build a new page, just copy this template file and fill in the CONTENT and PATH parts. The script will load the header, footer and sidebar so that'll be consistent throught the site.