AIM Class5
esse quam videri
Class Goals
- Introduce more advanced CSS concepts
- Have students experiment in class with advanced CSS
Contents
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
- Make an XHTML and CSS site that intentional overlaps images in an interesting way
- 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)