Web Session 2

After looking around the groups scamps a lot of people had put the navigation bar at the bottom of the page

But... the navigation at the bottom can be problematic as you could set up your screen size on one screen and it might not appear on a different screen

and if the navigation is different on each page it is deemed, bad practice as it isn't followable

a splash screen- like a welcome page, clicking enter , impacting the user experience, only have access to one page


1024x768 pixels
(going to make this as a fixed size)
This ratio works for 94% of screens in the world. 
Only one it doesn't is screens 800x600 pixels

only open sites from local files menu
as the css file was already linked we can just open it from the tab 

building a site is modular and you can do it it different areas/steps

firstly is the outside box that everything goes inside , is known as the
wrapper or container (div id)

a note- doesn't effect the coding

anything put into this will be public

Must specify the  measurement

semi colon to close it

Now need to call it up in html

In the body section
open angular bracket 
div
then id and then any div id that you have created will be listed
press return to add this 
close with close angular bracket

As you wont be able to see if this has worked you can add a colour in the CSS file

Save this 

Refresh your preview in safari and you will be able to see the area

 Working in html means you can't get rid of the 10pixel border, but you can on CSS

Ways you can position things using CSS:
fixed position (fixe x,y,z coordinates)
relative positioning- float things (everything bumps up and it can't go over the top)
absolute positioning

right up to the sides

If you want something centrally aligned, you have to make 50%

So it is central but the margin needs to go back half of the width (1024= 512)

the navigation bar

(call it to html) (in the body section)

Logo

only time you save a colour is if you are working with a gradient.
work with a transparent a background , you can specify this on CSS and it doesn't take up any size

save for web
chose png 24- crisp and transparent
check transparency for transparent background

do not hide the file extension when saving

to add to the CSS file

 You can see it properly o the web browser preview

Dreamweaver can't work with a fixed position

roll over button

save for web twice

This coding specifies the area for the button

to insert the rollover button function 

alternate text - little yellow box that tells you what it is - mainly for partially sighted ect