History - or how did we end up here?

PC Plus
Index

1 pixel GIFs

Buttons

History

Site Map
About the author

Web Workshop 159 - History

here's no point pretending. Even we can't get it right first time. Whenever you build a web page template, you'll inevitably go through several attempts at the layout, until you get one that you are happy with.

Because we were basing this template on a mixture of several site designs we knew largely what we wanted, but some elements - like the right hand column - were added in later, and indeed we lost some elements as we went along. It's useful though to look at the previous versions, because you can see not only what we ditched, but also subtle differences on the same basic theme, which you might decide you prefer.

As always, you are free to use the source code from these HTML or to load the pages into your web editor to adjust for your own pages - the content, of course, remains Copyright © Future Publishing 1999, so don't go nicking that. As well as these early templates, don't forget that we've included easy access to the picture files in the Source files section, so you can use those too.

Index_01.htm	The first attempt. The right hand navigation bar wasn't implemented immediately but we added it in later. The large buttons on the left were too big, although we had originally designed them large deliberately so they would be visible when printed in the magazine. The button picture file, should you want it is called button16.gif. We had two additional images in the left hand nav bar, including an animated one at the bottom. Looked nice, but wasn't justifiable.
Index_02.htm	Similar to the final version. We experimented with the blue border acros the top as well as down teh side and had the graduated tint image in a cell on teh top right to fade it away there too. The blue graduated background from the top middle cell was replaced with the plain blue bakground so that the fade didn't appear between the left bar and the top bar. We also hadn't changed the Cell Padding on the yellow table yet, so the text ran to the edges. Have failed to set the Cell Width to 10 on the graduated tint, so only the start of it is visible.
Index_03.htm	Very close to the final version. Experimented with blue background to the embedded table on the top right. The hyperlink colour was too lost and it made the page just a little bit too blue. Tweaked the colour of bits of text in the right column to get the right attention grabbing/not too overwhelming balance right. Haven't yet put the 10 pixel wide holding image into the graduated tint cell, so if you reduce the size of the browser window you will see the tint disappear as you do so.
Index_04.htm	This was to have been the final version, but testing this with Netscape showed that Netscape displayed the buttons on the left incorrectly. This is because Navigator interprets tables differently. The solution was to re-work the embedded table and use Cell Padding and just a single transparent GIF to hold the text in place - as described in the magazine tutorial. In the end it's neater because it uses fewer cells and fewer GIFs.