This page is completely stripped down. It only uses HTML v 4.0 code, no graphics, no JavaScript and no sneeky code

You might ask why do it?

The answer is size

This page is only 10k in size in total (that'll take abou 3 seconds for a 28.8k modem to download). Although our page in HTML terms is the same size as many on this site by the time you've added in all the graphics even just for navigation things bloat up to 3 times that size

And this page appears little different from our usual pages.

Okay our logo and standing graphics are gone and the layout resembles our older site design with a menu border. However the layout and functionality are little changed. There's a cool Logo at the top which seems to over lay the page. At the bottom there's navigation buttons just like any page in the website

How do we do it?

Well the bones of the page are made up of 2 tables (you should be familar with tables we've tutorials on this for HTML, composer and Frontpage Express

We use a 1 X 1 table to make the outline of the page (it is set at awidth of 600 pixels and has a 2 pixel border)

Inside this we have a another table set with the following attributes


The column is this table are set at 130, 10 and 460 pixels respectively and the first column has a background colour setting of 9898FF RGB code.

This gives the following appearence




This provided the coloured menu background and a 10 pixel gutter to seperate it from the main body of text

Our Logo is created by a 1 x1 cell table. It appears layered ove the underlying page by using style sheets (see our HTML tutorial on style sheets). Here we use an inline style sheet affecting a division tag. It is placed at the bottom of the HTML document

<div style="position:absolute;
width:250px; height:100px;
z-index:1; left: 25px; top: 30px">
<table border="1" width="100%" bgcolor="#FF6666">
<td><h2>Basic Web Resource site</h2></td>

The <div> tag (lines 1-3) define the position and size of the division. It is placed absoulutely on the page 25 pixels from the left side and 30 pixels down and in a size defined as 250 x 100 pixels

The next 3 lines just define the table and text used before the division is closed on on line 7 (</div>)

Our buttons on the side & below are created as described in our link button without graphics cool tip

The rest is just routine text and links

page tweaked 2003 © BWRS A. Duncan


terms & conditions copyright © 1999-2003 legal notices
contact us link to us