WWW pages of the past (Jan 2001)

It's amazing how much WWW pages change over time. Thus I've decided to take some screen shots. Every month or so I'll take a screen shot, so that the development of the pages can be viewed. Here's a few that I've managed to get a screen shot of. I've also added a basic set of rules for the design of my Home page (although please be warned I've not had any formal training in WWW design, so I may be teaching all the wrong principles).

March 1999 (main) [Expand]

 

March 1999 (research)

---

March 1999.
The earliest one I can find is from March 1999. I used frames for the main page (which now look a little dated, but at the time frames were seen as the best way to design pages). The main page had three main frames (top, right and main). The top frame had five main options which changed the menu options of the right frame. The top frame include the following options:

	Home. This set the page to the Home page [See March 1999 (main)].
	Books. This allowed access to information on my books[See March 1999 (books)].
	CV. This gave a very basic HTML-based CV.
	Pictures. This displayed some of my Web camera pictures.
	Research. This gave some information on my research [See March 1999 (research)].

March 1999 (books)

 

March 1999 (classes)

---

August 2000.
This is my latest WWW page, and I think it is starting to look a little cluttered, as my original design isn't really coping with my new pages. Thus I'll be working on a new WWW design, which is relatively simple, and usable (not an easy thing). The design is based on a table (although it simulate a frame, as all the sub-pages are built with the same table format. Most of the sub-pages have the same menu options on the left hand side column. As these are repeated graphics the sub-page does not have to resend these graphics images, thus, once the page has loaded, it should not take too long to load all the resultant pages.
  I've tried to minimize the usage of Flash on the main page (just in case that the Flash Player is not installed, but I've included a little graphic on the top right-hand side which displays the word Home, which gently appears, one letter at a time.

August 2000 [Expand]

 

---

November 2000.
I need to make more use of colour in the tables on the pages. Thus I need to make the graphic images support alpha transparency. Unfortunately most of my images were saved with a white background, which means that I could not really change the colour of a cell in a table (as it would leave a large area of white around the graphic). If you want to see the effect that it does, look at the two School of Computing logos below.

You can see that the one with the transparent background takes on the background of the background colour, whereas the other one has a fixed white background. This, is of course, one of the great advantages of using GIF images rather than JPEG, as you cannot add transparancy to a JPEG image.

So I'm just covering all my old graphics so that the white background is covered into a transparent background. Once PNG format is fully supported, it will be much easier to define transparency, and also to use proper vector graphics. Until then, we're stuck with GIF. Oh BTW it looks as if there may be a licence fee charged for GIF compression in the future, thus the sooner we use PNG the better.

November 2000 [Expand]

 

---

December 2000
I've discovered a little technique which really enhances the look of a page. It's a smooth corner, which gets rid of the sharp edges that are produced when a column uses a background colour. Here are two of the corners I've produced for left and right columns, respectively (see December 2000 for there usage):

You can see that they are half transparent, and half coloured the same colour as the column (##FFFF99, which is a WWW-safe yellow colour).

The other little trick that I've learnt is to smooth the edges of the end of a row. A good example of this is at the top of my home page. It did this with a curved corner which is white on the top right-hand side, and transparent on the bottom left-hand side:

Thus, as the background is white, it looks as if there is a smooth corner at the end.

Oh I also found out why some pages are so difficult to re-format, it's typically because the were produced from Microsoft Word, which adds lots of <span> and </span> statements. If possible, delete them as the embed formating information, which is difficult to modify. I use the menu option Clean Up HTML (which the span defined as the tag I wish to delete) to get rid of these tags.

 

December 2000 main page[Expand]

December 2000 Macmillan page [Expand]

December 2000 CV page (Part 1) [Expand]

December 2000 CV page (Part 2) [Expand]

 

---

JANUARY 2001.
Well it's now officially the new millenium, so I think it's about time that I made my books page (books.html) a little more consistant, as some books have different format. So I quickly drafted a basic menu system on the right-hand side of the page, and included a Flash animation on the main page (this can take a while to download, so the menu system allows for a remote user to quickly access the book that they want. Anyway the little spinning Napier triangle looks good as its loading.

All of my books pages should now look consistant, and should have important downloads, source code, and so on. Oh, and I've also included forms so that readers can send their comments on the books (hopefully they will be positive comments, so that I can improve their content).

January 2001 Books page [Expand]

 

May 2001
I've decided that CSS files can now properly deal with font layout. In my original WWW page I used transparent GIF files to represent text. For example has been replaced with a text representation, such as books. This is because I can now define the format of the hypertext link in the CSS file. In the new page I've defined three styles (A:link, A:visited and A:hover), which defines the style for a non-visited link, a visited link, and a hover event over the link. These style are initially:

A:link {color: #003333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; font-weight: bold}
A:visited {color: #003333; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold}
A:hover { color: #CC3333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold}

Thus all the hypertext links will have the same colour (#003333 - which is GREEN), and the colour will change when the user hovers over the link (#CC3333 - which is RED). I've also define the standard font of a paragraph as:

P { font: 10pt Verdana, Arial, Helvetica, sans-serif;
color: #000000; margin-right: 6px; margin-left: 6px; left: auto}

which defines the standard text colour as BLACK, with a Verdana font. It also have a six point margin on either side of the text.

There is also a trend in WWW page design to add a distinctive banner to the top of the page, so I've added a very basic banner, to give my pages a better feel. Please refer to the following banners.

 

BEFORE [May 2001]

AFTER [May 2001]

Or perhaps to illustrate the changes, move your mouse cursor over the graphic below:

New Home Page Banner

New Books Page Banner

New CNDS Page Banner

New NOS Page Banner

New Research Page Banner