This web page contacts the following

• Using images on the web
• Tips for web design using tables
• Explanation java script
• Table rule
• Table attributes

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.

Tips

• If you’re got big images for viewers to see, think about using a thumbnail image (smaller version), than they can click on, which will open a new window with the bigger image in. That way they’ve chosen to wait for it to download.
• Use a .gif or .jpg optimiser program to reduce file size. Some allow you to do a group batch, which is good for an image cut up for a table.
• Some photographic images can display well as a .gif, it’s always worth trying both .gif and .jgp if you have the time, with different optimising.
• If you’re page is going to have to have a lot of images on it for various reasons, think about reducing the download time by using less colours, smaller images, bulk optimising and less photographs.
• To keep download time for a web page tolerable, try to keep graphical content under 60kb.

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	1-bit 4-bit 8-bit 16-bit also 16-bit 24-bit or 32-bit

Tips for wed design using ‘image based’ tables.

• Use Photoshop/gimp as your drawing/designing page.
  

· 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.

• Take into account html table rules (see rules) when deciding how to design/cut up your graphics.
  
  

• Note: you may not have to save out all areas of your menu panel or picture. Large blocks of colour on an image can go in a cell on their own so you can just use appropriate background colour in that cell instead of downloading a block of colour graphic. Remember this when cutting up images and using guides.
  
  
• Animated gifs (dynamic gifs) can be used within tables and can look like they’re part of a bigger image if used that way. Use a stationary graphic while designing and make sure the animated gif you use is the same size. The guides will guide you!
  
  
• Gif images often have a ‘speckle’ effect which can cause them to stand out on a web page. You can solve this by making the outside areas of a gif image transparent.

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

accordingly.

Table Rules

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

• Tables can only exist with equal cells in each row and column; you have to specify which to join to get rid of some suing <rowspan> and <colspan> tags.
• You can put tables within the cells of tables.
• You can’t put tables horizontally next to each other. If you want that effect you can always put a new table in an existing cell.
• The <table> and <td> tags, that is the table itself and the cells within it can be influenced individually with pixel width and %age width, colour, spacing, borders and alignment. (See example attributes).
• Images work well in cells above and below each other if they are the same width. Other wise they may need aligning.
• If you’ve specified a width, whether %age or pixel for a cell or table you must remember to follow that in content.
• 1x1 transparent pixel is very handy to have in your image folder. You can stretch it by using the width and height attributes. It’s good for filling an empty cell and keeping it a certain size.

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)

<tr>

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

<a href="about.htm">

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

</a>

</td>

</tr>

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

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

_________________________________________________________________________

rowspan

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)

colspan

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)

cellpadding

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

cellspacing

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.