Websites and the world wide web have changed out of all recognition over the past 10 years. Originally a ‘web site’ was a single page of contact information, where presentation was something over which you had little control. As HTML evolved then content could be presented in a way that was more visually appealing, although maintaining this appeal was still cumbersome and required a major effort if a website comprised many pages. This began to change as the Worldwide Web Consortium laid down standards for what came to be called Cascading Style Sheets (CSS). This description denotes the way in which styles can ‘cascade’ from a stylesheet applied to an entire website, through a single webpage to a single sentence, word or even a single letter.
But the biggest single change in website development came with the advent of Dynamic HTML. This means that instead of being ‘hard-coded’ and therefore static, the content of a webpage is dynamically generated. This usually implies some sort of database behind the website (we use MySQL), and some application to retrieve the relevant information and convert it into the HTML that the webpage needs in order to display correctly (we use Coldfusion). This combination of CSS and DHTML makes a website exceptionally easy to maintain, since the look-and-feel of tens or even hundreds of webpages can be dramatically changed at a stroke by modifying the stylesheet, and content can be changed by tweaking the underlying data.
Another feature that web developers can employ for an easier life is ‘includes’. These are exactly as their name implies, repetitive pieces of code that can be ‘included’ in a webpage, much like a sub-routine in a old computer program (BASIC anyone?). Thus this page, as uploaded to our website, looks like this:
[include TOP] [include MIDDLE] page content goes here [include BOTTOM]
TOP initialises a load of under-the-bonnet stuff, and builds the masthead (from an image, a logo and a title). MIDDLE builds the navigation bar (navbar) down the left-hand side (by reading from the sitemap table) and a formatted receptacle for the body content, while BOTTOM sets up the footer. So to create a new webpage called sports we need only do the following:
and that’s about it! All the cleverness is already in place, including user authentication to restrict access to certain pages of the site.
One design aspect of this website is that webpages are ‘fluid-width’ ie, irrespective of the size of your screen, or if you resize the width of you browser window, webpages resize to fit the screen (subject to a minimum and maximum width for readability).