Difference between revisions of "AIM Class5"

Revision as of 20:35, 23 August 2006

Class Goals

1. Introduce more advanced CSS concepts
2. Have students experiment in class with advanced CSS

Introduction to positioning, float and clear in CSS

Questions about reading from chapters 10 and 11?

Review of the box model

Relative Positioning

Review of document flow

Absolute Positioning

Absolute vs. relative: the pros and cons

Examples

Example code walkthrough

Fixed Positioning

Definition and example

Pros and cons

Example code walkthrough

Z-index

Overlapping elements (intentional and accidental)

Examples

Example code walkthrough

Liquid Layouts

What does it mean to have a "liquid layout"?

Examples

Three Column Layout

A three column layout without tables, just with CSS.

Examples

Example code walkthrough

Class Assignments

1. Make an XHTML and CSS site that intentional overlaps images in an interesting way
2. Make your own version of a three column layout (using example code)

Homework

Complete and improve upon the in-class assignments and link them to your class portfolio

Reading

ZEN: Chapter 2 (pages 78-83), Chapter 3 (pages 85-121)