to return

 

 

Teaching Session

Making a Website

Outline Notes

(see also self-help handout)

 

 

MAKING WEBSITES

 

A website is a body of information held on a server that is accessible to anybody with the right hardware. It is accessed by somebody summoning it up with a URL (Universal resource locator) In structure you should be containing all your html files and images in the one folder, NOT a gathering of inconstently named entities scattered all over your hard disk.

A website then is a folder which contains

1. a number of html pages (hyper-text mark up language)-------- the screens there is a code to indicate say a table, the place for an image

2. folder/s with jpegs at say 300 dpi and the size of the screen or bigger -

the raw material quicktime movies vrml panoramas etc see list in web manuals.

When someone sees a website e.g. http://www.shakercollection.com/ (a recent job I did for a collector of QurÕans) they are viewing html coded pages that summon up the raw material - bear html generated text (quick loading)

 

DESIGN CONSIDERATIONS,

How much of what is on screen is purely decorative ?

is this justified ?

If sections of the screen are animated what justifies this ?

After five sequences does your animation get annoying or tedious ?

Is the rationale of navigation clear ?

What sort of a map am I generating in the readerÕs head ?

How much information is on screen ?

How much is off the monitor (right, down) is this clearly evident ?

Indicate how distinct is your design as a screen based solution rather than a close correspondence to a book solution ?

In what way are you using the medium for its own characteristics rather than using it as a substitute for something else ?

Is letterform approriate to the task, or is it your default editorial solution from the printed page ?

Do I intend the mysterious or encyclopedic or both ?

Have I something to say ?

Think how you use the computer - what is your own image of yourself creating on the thing - the human computer interface?

How best can you build on your own strengths rather than surrender to something completely new ?

When someone off location views your work, what are really intending ?

USING FIREWORKS

This method of assembling a website allows you to position information on screen slice the designed surface into the appropriate discrete sections adjust alignment and interactivity for viewing on a browser.

Each characteristic could have a variable you did not intend - colour palette monitor fixings power of the computer modem phone line / broadband pc/mac.

So as you build websites and connect websites, test every contingency and donÕt be afraid to dictate to the viewer the ideal conditions of viewings -

e.g. close the browser bars and use internal navigation only - this is best viewed at 1024 x 768 monitor size advice to be patient.

GENERALLY ADVICE 1. Plan ahead as much as you can- but also leave space for the accidental and the big discovery. 2. Name your pictures and documents as economically and clearly as possible. 3. Keep a notebook of jpeg sizes, formats and names. Wherever possible develop your own storyboard and diagrams to explore navigation and flow. There is no shame in pre-planning. 4. Draw diagrams of the levels of folders in folders and understand it before embarking on Fireworks.

 

THE MECHANICAL BITS

 

1. OPEN FIREWORKS -

1.1 choose canvas size and colour

1.2 import your raw material and manipulate on screen

1.3 slicing tool, cut up the surface

1.4 go to Export Preview

1.5 adjust jpeg/gif format and check download time and picture quality

1.6 choose any extras - e.g. sharpen colour edges, progressive etc

1.7 export the slices to the image folder, and send the html page (only use three letters in the suffix - htm)

 

2. DREAMWEAVER

drag the htm page to the Dreamweaver application and proceed as required.

eg select all and centre the information

register/enter links go to page properties and

call the screen by a name,

select background image etc replace any one entity (a slice)

with a same size QT movie or whatever.

 

3. BROWSER.

then view the htm page in your Browser and adjust as requqired. end.....

 

This is just to jog your memory.

Also consult the teaching sheet.

to return