Difference between revisions of "AIM Class5"
esse quam videri
| Line 40: | Line 40: | ||
===Liquid Layouts=== | ===Liquid Layouts=== | ||
| + | What does it mean to have a "liquid layout"? | ||
| + | Examples | ||
===Three Column Layout=== | ===Three Column Layout=== | ||
| + | A three column layout without tables, just with CSS. | ||
| − | ==Class | + | 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 [http://glish.com/css/7.asp example code]) | ||
==Homework== | ==Homework== | ||
Revision as of 20:34, 23 August 2006
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
Reading
ZEN: Chapter 2 (pages 78-83), Chapter 3 (pages 85-121)
