15 December 2003
Today's Topic: CSS Positioning and Visual Design
In today’s class, we’ll talk about CSS positioning, and CSS-based design as an alternative to tables-based design. We’ll look at a variety of techniques for laying out pages using CSS, and the advantages of pure CSS-based design.
We’ll also talk about visual design principles and guidelines.
At the end of class, I’ll assign you to your project groups, and we’ll discuss the first group project assignment so that you can get a head start on the design document over the winter break.
Readings on CSS Positioning and Visual Design
CSS Positioning
- Bill Merikallio: Why Tables for Layout is Stupid
- Brainjar: CSS Positioning
- a list apart: Flexible Layouts with CSS Positioning
- Webreference.com: Advanced CSS Layouts, Step-by-Step
- The CSS Box Model
- Tantek’s Box Model Hack
- The Noodle Incident: CSS Box Lessons
Visual Design
group assignments
Here are the group assignments:
Group 1 (sake)
Kenichiro Araki
Joseph Carino
Matthew Copeland
Robert Kostin
Aaron Sanders
Group 2 (sushi)
Namgyal Dolker
Vince Falbo
Cher Stanley
Wennie Tao
Chandra Wilson
Keisuke Yamamoto
Group 3 (sashimi)
Christian Crews
Stephanie Chester
Neil Davis
Bakhtiar Dossul
Fuyuko Takegawa
Christopher Lister
Group 4 (sukiyaki)
Anne Buck
David Chelus
Yusuke Kuwahara
Curtiss Markham
Robert Mullen
Matthew Penna
In-Class Exercise: CSS Formatting
Select a poem that you like from the “Verse” section of Bartleby.com.
Use CSS to modify the appearance of the poem.
Use Dean Allen’s Textile tool to generate valid HTML entities for punctuation, as needed.
When you’re done, upload the html file (and external CSS, if you used one) to your Grace account, and add an entry to your class weblog with a link to the page. If you don’t already have a category set up in your weblog for in-class exercises you should add one—that will let me view your in-class work easily at the end of the quarter when I’m assessing participation.