About this web site

This site was built using FrontPage 2000 and latterly FrontPage 2003, together with PHP, perl, TopStyle Pro 2.5, HTMLkit and Textpad.

I have attempted to separate content from presentation as much as possible: the source of the pages is XHTML (just about), with all layout and appearance controlled by CSS style sheets. I have tried to avoid using explicit css classes in the page source as much as possible, instead using contextual selectors to get the desired effect. This has got to be a 'good thing'. I used ideas from numerous sources on css (see the right side bar).

FrontPage doesn't work too well with PHP & XHTML, so a few work-arounds have been necessary. For example, this site uses FrontPage's page navigation facility to generate the menus on the left, but the code it emits is not XHTML compliant. I've got round this by running a perl script over all the pages once I've uploaded them that removes the non-XHTML tags.

Most irritating of all, FrontPage insists on reformatting the XHTML. Maybe I'll run it through tidy as well.

Part of the exercise was to implement alternate style sheets, which you can select if you are using a Mozilla based browser (try Firefox!). Having got that working I found it mildly annoying that for two styles differing only in the set of colours used, the colour definitions end up being duplicated here and there in the style sheet. If you try and group style definitions based of minimising the number of places that colours are defined, you get don't get a very rational style sheet (in my opinion). Ideally style sheets would allow you to define variables and use them everywhere you want that value. Either you can't do that or I haven't found out how its done - enter php. My style sheet is processed by php to select one of several sets of colours which are then used throughout the sheet. Here's a bit of it:

<?php
  header("Content-type: text/css"); // otherwise gecko doesn't treat as css
  $style = '';
  if (isset($_GET['style'])) {
    $style = $_GET['style'];
  }
  switch($style) {
    case 'spring':
      $pagebkg = "#E9F4D3";
      $headbkg = "#638420";
      $contbkg = "#AED75B";
      $linka   = "#6B8E23";
      $lsbhead = "url(images/lsbgreen.png)";
      break;
    case 'autumn':
    default:
      $pagebkg = "#f3f2eb";
      $headbkg = "#b82619";
      $contbkg = "#e6dfcf";
      $linka   = "#a68c53";
      $lsbhead = "url(images/lsbred.png)";
      break;
  }

  $fontsel = '';
  if (isset($_GET['fontsel'])) {
    $fontsel = $_GET['fontsel'];
  }
  if ($fontsel == 'serif') {
    $serif = 1;
    $rhswidth = 15;
  } else {
    $serif = 0;
    $rhswidth = 20;
  }
?>
/* IWS Font & Colour Style Sheet */
body {
<% if ($serif) { %>
  font-family : Garamond, "MS Serif", "Palatino Linotype", serif;
  font-size: 100%;  /* Enables font size scaling in MSIE */
<% } else { %>
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 73%;  /* Enables font size scaling in MSIE */
<% } %>
  background-color: <% echo $pagebkg; %>;
}

Look at the source of this page to see how its used.

I was initially inspired by the Mozilla Firebird help site. In particular the lack of tables and the separation of content and presentation chimed nicely with all the classic software design principles. Seeing a reference to the Open Source Web Design site as the original inspiration of the design I looked there. That's where I found the designs by haran, and in particular gila. I used gila as an inspiration, but as I mentioned above, I've tried to use as few classes in the page mark-up as possible.

This site is running IIS 5, PHP 4.3.4, ActiveState Perl 5.8.2. on Windows 2000 pro. All on a PII 450 Mhz box.