General

Create a folder for the site

• Everything for the site must be enclosed in this one folder.
  
• Be careful with filing.

Make a subsidiary folder called images

• Every page must have the suffix ".htm".
  
• Every folder must contain a file page called index.htm.
  
• Do not put any spaces in file names because unix cannot deal with this.

Title the web page

• The title is not the file name, just what is displayed in the title bar of the browser. To not do so is very unprofessional.

<go to top>

Text

Decide on a type face:

• If people do not have the type face specified on their computer then the default "Times New Roman" will be displayed.
  
• Times New Roman is not beautiful, it was designed for newspapers and is very condensed to maximise space.
  
• The recommended type faces are Verdana and Fruitiger because they maximise the white space on a page.
  
• Do not use Arial.
  

Formatting:

• 10 pt or 12 pt are pleasant sizes.
• Use indentation to stop the user being uncomfortable because they are used to margins on printed pages.
  
• The fundamental concept is to create space on the page.

<go to top>

Images

Finding Images:

• Go to www.google.com and select the images option.
  
• Search by keyword for the required image.
  
• Google will display thumbnails which are links to the original pages on which you can find the images.
  
• Right click on the image and select save as and save into the image folder.

Economising file sizes:

• File size economy: the bigger the file the longer it will take to transfer.
  
• A user will not wait long for a site to load before they "grasshop" to another site.
  
• Therefore the file sizes should be as small as possible while still maintaining a reasonable level of quality.
  
• The standard resolution on a modern monitor is 72dpi.
  
• An image the size of an A4 page at 72dpi will be approx. 1.5 - 2 MB, which is too big.
  
• Therefore images must be compressed either as a jpeg. or a gif.
  

When deciding which to use:

• A jpeg preserves colour information but loses detail.
  
• A gif preserves detail but loses colour.
  
• A jpeg is better for photos whereas text and simple geometric images are better as gif.
• The idea is that the file size is reduced but the picture is essentially the same for the user.

Using Adobe photoshop to optimise for the web:

• This shows a preview of the compressed version alongside the original and allows you to tweak it to an appropriate level of compression.

<go to top>

Links

• You will need two web pages to create a link .

In DreamWeaver:

• Select the linker - either the text or the image.
  
• Click on the folder icon in the Property inspector. This will allow you to select the page to be linked to.
  
• To test the link hold down the Ctrl key and double click it and it will show the link.
  
• Alternatively F12 will display the page in a browser so you can test the links and see the layout.

<go to top>

Tables

• Users changing the size of their browser window creates problems for your layout.
• To avoid this you can place whole pages inside a table and specify in pixels the width and height of the page.

<go to top>