DESIGN FOR WEB - SH SESSION 03

·      Navigation should always be the same.

-       Consistent

-       Always visible

·      Welcome pages not needed//ideal.

-       Splash screen

·      Follow web standards.

·      Must be able to be used.

-       Design should not prohibit this.

Chose heading font – Helvetica

Chose body font – Georgia

x width – 200px

Logo square – 200px x 200px

Buttons – 200px x 100px

Navigation bar – 200px x 600px or full height

Open from file bar – right hand side.

NAMING CONVENTION:

         Wrapper or container – outside box

Steal codes – forums

Create div id

Name: # followed by name

Must then put a space in

Must specify the unit of measurement – px

-       % can also be used

Semi colon closes it.

Just written in CSS needs to be called in HTML.

Use forward slash to close div.

Background colour

CSS  - Remove 10px boarder

         - Align wherever

Positioning

-       Fixed position                 -        Layer

-       Relative positioning         -        Cannot layer

-       Absolute positioning

HTML & CSS automatically update unless something new is created.

Steps to remove boarder:

-       Aligning to the left//top

Left 50%      -        gets the left edge in the middle

Margin-left: -512px -        Half of overall width

Navigation bar:

Height: 768px;

Width: 200px;

(Colour) Background

Relative: relative float: left

Call to HTML

< div id >     -        open

</div>          -        close

Logo space:

Logo

-       Illustrator

-       Save as file for web

-       Save in root -        Images

-       Do not hide extensions

-       .png

Need to go after navigation

Organizing divs     -        tab them across

 

Save for web        -        hide layer     -        Home 01

Save for web        -        reveal all      -        Home 02

Create button in CSS

HTML: Role over button