This web page contacts the following



Images on the web


You only really need to concern yourselves with 2 image types when it comes to placing graphics on web pages.


.gif (Graphics Interchange Format)

.jpg (jpeg, Joint Photographic Experts Group format)


Few colours (icons, buttons, line art)

Greater colour density (photos)


Filters unnecessary info, compression good, file size small


High compression format

Max amount of colours 256

16.7 million colours


Can be ‘interlaced’ at saving stage, to download onto web in stages.

Can be ‘interlaced’ at saving stage, to download onto web in stages.

Gif images can be animated together into one file



Areas can be made transparent



File size


Amounts to the number of colours used (colour depth) and the physical size (horizontal and vertical dimensions).


Image download time


Remember, the more images, the longer the download time.  It’s generally a good idea to make sure larger images on web sites aren’t bigger than 30kb but this of course varies.



Another way of describing colour depth is in terms of bits.  The table below illustrates how colours and bit-depth are related.


Number of colours:

Is referred to as:

2 colours

16 colours

256 colours

32,768 colours

65,536 colours

16,777,216 colours





also 16-bit

24-bit or 32-bit



Tips for wed design using ‘image based’ tables.


·         Make document 600 pixels across by 480 down (think in pixels), resolution at 72dpi, in the RGB colour mode.  This enables you to design to the same specifications as the web.

·         Use guidelines to line things up accurately and for cutting up graphics precisely.

·         Use layers to have an on/off (rollover) version of a button.  Using the guides will enable you to cut them out in the same place so they are the same size and don’t ‘jump’ when rolled over. Save you’re designing pages in a separate folder, keeping the layers if you have them, .psd format (for layered images) or tiff are good for quality.

·         When cutting and saving images for web use put them in a folder called ‘images’ that you can copy to your website folder. 

·         Name images appropriately e.g. cont_off.gif and cont_on.gif for the contact button rollovers.  Underscore is allowed to be used in file names and can be quite handy and clear.


Java script


Is loosely related to java but is apparently easier to learn.  It can be added to the <head> of html code using the <script> tag to produce rollover buttons (buttons that change when the mouse is placed, not clicked, on top). 

Rollovers are good for highlighting to the viewer, that a graphic button has a link and can look really nice.  They are particularly good for main site buttons.

You can write your own script or use a web authoring tools such as Dreamweaver to generate it for you.  Alternatively, you can download pre-designed components and change them



Table Rules


All will become clear the more you work with tables, but here are a few things to start taking into account.



Example Attributes


These are examples of the attributes you’d find within the table tags, <table>, and the cell tags, <td> from the example ‘image based’ menu table.


<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">

(Note vspace="something" hspace="something" bgcolour=”something”, could also be added)



<td width="135" bgcolor="#C0C0C0">

<a href="about.htm">

<img src="images/about_off.gif" vspace="5" hspace="0" border="0" alt="About Us">





the <td>’s that uses rowspan in the example exercise


<td width="465" rowspan="6" align="left" valign="top" bgcolor="#FFFFFF">text</td>



this attribute used in a <td> would command the cell data spans a certain amount of rows

e.g. rowspan="6"

(in the case of the <td> tag the cell data will span 6 rows)



this attribute used in a <td> would command the cell data spans a certain amount of columns

e.g. colspan="2"

(in the case of the <td> tag the cell data will span 2 columns)



the amount of pixel space between a cell’s content and its border, e.g. text from the edges of the cells.



the amount of space between cells (default is 2 pixels v &h in <td>)  Can bump it up by using it in the <table> tag


width of table/cell

can be measured in pixels e.g. width =”600” or in percentage e.g. width=40%

e.g. width=” 100%”

(in the case of the <tables> tag the %age the table fills the browser)

(in the case of the <td> tag the %age the cell took up in the table)

e.g. width=”600”

(in the case of the <tables> tag this refers to the amount of pixels in width the table will be in any browser)

(in the case of the <td> tag this refers to the amount of pixels in width of the cell


align (left, center or right)

this attribute commands the alignment of the particular cell or table

e.g. align="left"

(in the case of the <tables> tag, the table will appear towards the left margin of the browser window)

(in the case of the <td> tag the cell data will appear on the left of the cell unless it fills the cell)


valign (top, middle or bottom)

can be used in the <td> tag to align text/graphic to start from one of 3 areas of the cell, unless it fills the cell)

e.g. valign="top"

(in this case text or an image will appear or start from the top of the cell)

Note: default alignment  is middle.