PC Plus
Index

1 pixel GIFs

Buttons

Style Sheets

More tables

More pictures

History

Source files

Site Map
About the author

Web Workshop 159

elcome to this month's Web Workshop. Last month we looked at the use of tables to constrain the layout of a web page so that you can make it look more attractive to the reader. This month we're going to build on that knowledge of tables and see how you can use pictures to both improve the look and layout of a page.

The layout? Yes, as we showed last month, web developers will use and abuse all the features of HTML and browsers to bully the pages into doing what they want. Just as last month we looked at how tables can be used to do much more than display rows and columns of data in their traditional role, this month we'll show you how images can be used in conjunction with tables to create pixel accurate pages that work even in pre-version 4 browsers.

Much like special effects in the best Hollywood films, the best picture usage can sometimes be when the reader doesn't even know that they are there. Unless you're exceptionally good, or unless you've already looked at the source code, you won't know, for example, that there are in fact six pictures on this page. That's six distinct files, yet with a total file size of only 8,921 bytes - just under three seconds of download time for most users with a 56K modem. Of that 5,990 bytes are contained in the banner at the top and 1,879 bytes in the IE icon in the bottom right - the actual page furniture for the buttons and everything down the left only amounts to 611 bytes! (The remaining 441 bytes, fact fans, belongs to the picture of the letter "W" at the start of this text.)

It's impossible to calculate how many times the files are repeated as backgrounds on this page (see last month's Web Workshop for information on tiling backgrounds). On top of that there is one single file which is stretched to different dimensions and repeated in several places to fix the layout as we want it.That's the transparent clear.gif file which is referred to in the tutorial in the magazine.

Want a free copy of Macromedia DreamWeaver? As sold for £290.

The world's best Web page editor is only available with Issue 66 of .net magazine.
On sale in the UK 30th November 1999