Week Three: The CSS Box Model

Class Notes

1. The CSS Box Model: Positioning Part 1
2. Week 3 lab, Part 1: Change a layout
3. - - - - -
4. The CSS Box Model: Positioning Part II
5. Week 3 lab, Part 2: Change a layout further

Homework

1. Homework 1: Using float
2. Read: CSS positioning tutorial - the box model explained by Mike Hall at Brainjar.com
3. 2-Col Tableless Layout by Petr Stanícek at wellstyled.com

Readings for Next Week

1. Zeldman: Introduction, Chapters 2-3
2. Shea/Holzschlag: Chapter 1
3. Multi-Column Layouts Climb Out of the Box by Alan Pearce at A List Apart
4. CSS Design: Going to Print by Eric Meyer at A List Apart

References

1. CSS Tips and Tricks at W3C
2. Box Model W3C specifications
3. Visual formatting model W3C specifications

Week Four: Layout examples

Class Notes

1. Using CSS to control layout
2. Exercise 04 Part 1:
3. - - - - -

Readings for Next Week

1. Zeldman: Introduction, Chapters 11,12
2. Shea/Holzschlag: Chapter 2

References

• Read: CSS positioning tutorial - the box model explained by Mike Hall at Brainjar.com
• Faux Columns by Dan Cederholm at A List Apart
• 2-Col Tableless Layout by Petr Stanícek at wellstyled.com
• Multi-Column Layouts Climb Out of the Box by Alan Pearce at A List Apart

Week Five: Designing Menus

Class Notes

1. Lists and Menus
2. Practice Exercise 05: Make some menus (Due 02/26)
3. - - - - -
4. Homework 2: CSS Layout (Due 02/28)

Week Six: Typography & Frames

Class Notes

1. Typography
2. - - - - -
3. Frames

Homework

Readings

1. Zeldman: Chapter 13
2. Shea/Holzschlag: Chapter 5
3. Read: The Anatomy of Web Fonts - by Andy Hume at sitepoint.com
4. The Trouble With EM 'n EN (and Other Shady Characters) by Peter K Sheerin at A List Apart
5. Choosing & Using Type by Daniel Will-Harris at will-harris.com

References & Resources

1. CSS 2.1 Specifications: Text at W3C
2. Typetester - Interactively compare fonts for the screen
3. Font Tester - Interactively test different CSS font settings for your text
4. Broswer-safe fonts - Common fonts to all versions of Windows & Mac equivalents

Week Seven: Tables

Class Notes

1. Tables in XHTML
   
2. - - - - -
3. Reproduce a paper form in XHTML using tables: See Blackboard for details.

Week Eight: Forms

Class Notes

1. Forms in XHTML
2. Lab/homework: Create an online form

Readings

• A Brief History of the Internet: Honey, our little Internet's all grown up and gone GUI on us by Marnie Webb at techsoup.org. (A brief survey of WAIS, Archie, gopher, and others.)
• Sensible Forms: A Form Usability Checklist by Brian Crescimanno at A List Apart
• Accessible HTML/XHTML Forms by Ian Lloyd at The Web Standards Project
• Prettier Accessible Forms by Nick Rigby at A List Apart

Week Nine: Web Programming, part I

Class Notes

1. Dynamically generated web pages
2. - - - - -
3. Unix Shell Scripts and CGI
4. Lab Exercise 8: Create a shell script

Week Ten: Introduction to PHP

Class Notes

1. Dynamic pages with PHP - part 1
2. Exercise 9: Create a PHP document
3. - - - - -
4. Dynamic pages with PHP - part 2
5. Exercise 10: Create a multi-page site

Week Eleven: More Web Programming

Class Notes

1. Processing forms with PHP
2. Exercise 11: Create a PHP form application
3. - - - - -
4. Another way to cut up documents
5. Homework 3: Create a kids site (due Tuesday, April 22)

Week Twelve: PHP Applications

Class Notes

1. Sending email with PHP
2. Storing form data in files