OUGD504: Brief 3 Web workshop

Html is limited and must use CSS  (cascading style sheets) to design the website. 

wysiwyg (what you see is what you get) is how dream weaver works but will use a web browser instead because it is better to view. 

SEO search engine optimisation. 

http: hyper text transfer protocol. 

UI user interface 

UX user experience- must relate to the target audience and be entertaining and useful

limitations:

have to design for the lowest common denominator 

Web safe colours: 

216 web safe colours 

These are from the RGB colour set 

These colours are consistent across the web using html 

a three or six hexadecimal code

eg: red #FF0000 #FF0

When creating your website in dream weaver you must have chosen the colours beforehand in photoshop and illustrator. 

RGB is capable of reproducing and each colour has 256 unique shades of each value

 red: 256 x green 256 x blue 256= 16, 777, 216 

A wider range of colours can be created by using CSS rather than html. You specify the percentage of 256 per RGB. 100% red would be: rgb (256,0,0)

Need to consider who the target audience is in relation to colour. Does it need to be consistent or do you want to use a range of colours? only new computers can use RGB.

Websafe fonts:

Must chose a web safe font for designing. 

rather than choosing a font you chose a font family, if the browser doesn't support the first one it would go for the next one. 

Serif example:

Georgia, Serif

"Palatino Linotype", "Book Antique", Palatino, Serif

"Times New Roman", Times, Serif

Speech marks need to be put around a font which is longer than one word. 

Sans-serif example:

Arial, Helvetica, sans serif

Tahoma, Geneva, sans-serif

"Trebuchet MS", Helvetica, sans-serif

Verdana, Geneva, sans-serif

In CSS @font-face can install fonts to a website. However this can breach copyright laws for specific font foundries. Font Squirrel will show a list of fonts which would work, however need to ensure that the fonts are viable for use as well as distribution. 

Size of the website:

Computers used to be able to produce 640x480 

800 x 600 is also too small for a desktop

Most designers now choose to design at 1024x768- should start with this size

Although modern macs are now capable of 2880x1800(220ppi)

file formats for images

png, gif, pdf & jpeg 

jpeg doesn't use transparency, would have to use a png

moving images would need to be saved as an animated gif

resolution: generally accepted as 72ppi but is an outdated number 

but computers can now be 96ppi 

images can also be used at 220ppi but this would create a large file size

all images/work need to be saved into one file: called test
file needs to be lowercase and have no gaps/punctuation
In college the work needs to be saved into user work, but when leaving re-save the folder onto the desktop so the work is not lost

Setting up a document: 
Tell dream weaver where the root folder is. This folder should contain all of the content for the webpage. Each time you log in you must tell dreamweaver where the content folder is. 
site> new site
file> new> html> save as

homepage must be saved as index.html

html document just simply opened:

Coding in html would mean that each page would have to be coded for how it looks. This is why CSS is really useful as it creates a style sheet which can be applied for all the pages.

To add useful notes which are hidden write  /*wordsblahblah*/

set up CSS document: 

to close any line put ;

Link CSS document into html. CSS designer + attach existing css file

link file do not import. 

font size 10pt is 14px

create a container (size of the frame) in css.

div is created by typing   #container{

width:1024px;

height:768px;

The colour automatically appears to the left with a border. 

Position: absolute     (tells the computer you are commanding)

You must move the square to the left first before centring the imagery. Top 0 means that there is no gap at the top of the page. 

In the next session we will be dividing up the frame of the website and learning how to add particular sections to the format. This session was incredibly helpful and has given me some confidence to think that I am able to create a website as initially the thought of using html and css was quite daunting.