Difference between revisions of "AIM Class5"
esse quam videri
| (6 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| − | [[Category: | + | [[Category:Authoring Interactive Media]] |
------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ||
'''Class Goals''' | '''Class Goals''' | ||
| Line 10: | Line 10: | ||
==Introduction to positioning, float and clear in CSS== | ==Introduction to positioning, float and clear in CSS== | ||
| − | ==Class | + | Questions about reading from chapters 10 and 11? |
| + | |||
| + | Review of the box model | ||
| + | |||
| + | ===Relative Positioning=== | ||
| + | Review of document flow | ||
| + | |||
| + | Examples | ||
| + | |||
| + | Example code walkthrough | ||
| + | |||
| + | ===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 [http://glish.com/css/7.asp example code]) | ||
==Homework== | ==Homework== | ||
| + | Complete and improve upon the in-class assignments and link them to your class portfolio | ||
| + | |||
| + | Assignment 4: Positioning | ||
| + | |||
| + | Quiz 3 | ||
===Reading=== | ===Reading=== | ||
ZEN: Chapter 2 (pages 78-83), Chapter 3 (pages 85-121) | ZEN: Chapter 2 (pages 78-83), Chapter 3 (pages 85-121) | ||
Latest revision as of 16:05, 5 August 2008
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
Examples
Example code walkthrough
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
Assignment 4: Positioning
Quiz 3
Reading
ZEN: Chapter 2 (pages 78-83), Chapter 3 (pages 85-121)
