Week Three: The CSS Box Model

Class Notes

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

Readings for Next Week

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

References

1. CSS positioning tutorial - the box model explained by Mike Hall at Brainjar.com
2. CSS Tips and Tricks at W3C
3. Box Model W3C specifications
4. Visual formatting model W3C specifications

Week Four: Layouts & Menus

Class Notes

1. Using CSS to control layout
2. Exercise 04. Redesign your IT 280 TOC Page, Part 1
3. - - - - -
4. Lists and Menus
5. Exercise 04. Redesign your IT 280 TOC Page, Part 2
6. - - - - -
7. Project 1. CSS Layout Due 02/24

Readings for Next Week

1. Zeldman: Introduction, Chapters 11,12

References

• 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
• Perfect multi-column CSS liquid layouts - iPhone compatible by Matthew James Taylor at matthewjamestaylor.com
• Eric Meyer's CSS Tools
• Consistent List Indentation by Eric Meyer at Mozilla Developer Center
• Inline elements and padding by Russ Weakley at Maxdesign

Week five: Frames & Tables

Class Notes

1. Frames
2. - - - - -
3. Tables
4. Some CSS Typography

Readings

• Fix Your Site With the Right DOCTYPE! by Jeffrey Zeldman at A List Apart
• The overflow declaration by Peter-Paul Koch at quirksmode.org
• The Anatomy of Web Fonts - by Andy Hume at sitepoint.com
• The Trouble With EM ’n EN (and Other Shady Characters) by Peter K Sheerin at A List Apart
• Choosing & Using Type by Daniel Will-Harris at will-harris.com

Week Six: 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

References & Resources

1. HTML 4.01 Specifications at the W3C

Week Seven: Web Programming, part I

Class Notes

1. Dynamically generated web pages
2. - - - - -
3. Lecture/Lab 07 Using the Linux Command Line

Week Eight: Web Programming, part II

Class Notes

1. Unix Shell Scripts & CGI
2. Lab 08, Part 1: Create a Shell Script
3. - - - - -
4. PHP Programming, Introduction
5. Lab 08, Part 2: Create a PHP page

Week Nine: Dynamic Pages with PHP

Class Notes

1. Dynamic pages with PHP - part 1
2. Lab 09, Part 1: Create a multi-page site
3. - - - - -
4. Dynamic pages with PHP - part 2
5. Lab 09, Part 2: Process a form with PHP
6. Lab 09, Part 3: Expand your mini-site

Week Ten: More Web Programming

Class Notes

1. Server Side Includes
2. Lab 10, Create a multi-page site using SSI
3. - - - - -
4. Sending email with PHP
5. - - - - -
6. Project 2, Make a kids site

Week Eleven: More PHP; Selected topics

Class Notes

1. Using Files with PHP
2. - - - - -
3. Selected Topics

Week Twelve: Selected topics

Class Notes

1. Practice with menus
2. - - - - -
3. Continue working on the dropdown/popout menu exercise. Move the CSS into an external stylesheet. Also create an alternate stylesheet which implements the navigation as a horizontal menu with dropdowns.

Week Thirteen: Selected topics

Class Notes

1. Image replacement; :before, :after pseudo-elements.
2. - - - - -

Resources

1. Nine Techniques for CSS Image Replacement by Chris Coyier
2. :before and :after pseudo-elements W3C CSS documentation.
3. CSS tips & tricks: Rounded corners and shadowed boxes at W3C

Week Fourteen: Selected topics

Class Notes

1. Lightbox Slideshows
2. - - - - -