Web Design, SIGDS 2011

{June 28, 2011

W 

% Jacqui completed

W 

% Jenny completed

W 

% Sehee completed

W 

% Peter completed

W 

% zack completed

W 

% fernando completed

W 

% Divya completed

W 

% Stephen : ) completed

W 

% Amy completed

W 

% Sue completed

W 

% Elspeth completed

W 

% Marco completed

W 

% Robert completed

W 

% Jessie completed

Lesson 4: CSS Positioning

Outline

  1. The natural flow of a page
  2. Historically through tables
  3. Floats and Clear
  4. Grids
  5. Absolute, Relative and Fixed Positioning
  6. Display (block, inline, inline-block, none)

Examples

  1. Exercise solution with Float
  2. Exercise solution with absolute positioning
  3. Example of display
  4. Recap of html/css basics
  5. Updated recap of html/css basics and boxing

Exercise

Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to exercise 4. The size of the flag is up to you.

Links

f
4 Lessons    { June 28, 2011    J   b 0   
W 

% Sehee completed

W 

% Amy completed

W 

% fernando completed

W 

% Jenny completed

W 

% Aary completed

W 

% Sue completed

W 

% Aary completed

W 

% Jessie completed

W 

% zack completed

W 

% Stephen : ) completed

W 

% Peter completed

W 

% Divya completed

W 

% Jacqui completed

W 

% Robert completed

W 

% Aary completed

W 

% Marco completed

W 

% Elspeth completed

Lesson 3: Box Model

Outline

  1. Everything is in a box whether you know it or not
  2. Turn border to 1px
  3. Border applied to p tag. Inheritance.
  4. div, span
  5. display inline and block
  6. float for wrapping
  7. Widths

Example

  1. The example we coded up in class
  2. Horizontal centering
  3. Vertical centering

Exercise

Using Frank Stella, Josef Albers and Karel Martens as inspiration, create a page of web box art. Keep the principles of classes, inheritance and float in top of mind. Experiment wildly in code (not in your sketchbook), starting a new html file if one breaks or seems at a stopping point. Add a post with the category exercise 3 that links to 1 or 2 finished pieces. We’ll look at aesthetics and your style sheets as a class first thing tomorrow morning.

Links

f
4 Lessons    { June 28, 2011    J   b 0   
W 

% Jenny completed

W 

% Marco completed

W 

% Amy completed

W 

% Stephen : ) completed

W 

% Sue completed

W 

% Peter completed

W 

% Jacqui completed

W 

% Aary completed

W 

% Robert completed

W 

% Divya completed

W 

% Elspeth completed

W 

% Jessie completed

W 

% Nic completed

W 

% zack completed

W 

% fernando completed

W 

Y June 28, 2011: Change your nickname to your first name

W 

% Robert completed