U48 318 - Advanced Web Site Design and Development
Washington University University College

Spring 2005
Saturdays 9:00 a.m. - noon
22 January - 7 May 2005
Eads 14

Instructor: Scott Granneman
   Instructor, Washington University in St. Louis and St. Louis Community College
   Senior Consultant in Internet Services, Bryan Consulting
   Columnist for SecurityFocus & Linux Magazine, and author of Don't Click on the Blue E! for O'Reilly Media
scott@granneman.com
www.granneman.com

Course Description

This course focuses on one of the most important advanced areas of Web development: Cascading Style Sheets (CSS), which allow developers to set the formatting and positioning of Web pages in a standards-based and robust way. Through understanding CSS, Web developers can proceed to the next level of Web development.

Required Texts

Readings will consist of articles, analyses, & ephemera from the Internet. While I'm not requiring any books, I recommend the following as particularly worthy of your attention:

• Eric Meyer: Eric Meyer on CSS
• Eric Meyer: More Eric Meyer on CSS
• Christopher Schmitt: CSS Cookbook
• Jeffrey Zeldman: Designing with Web Standards

In addition, students will need to sign up with the following listservs:

• GranneClass, the class listserv, hosted by Yahoo Groups. To subscribe, send a blank email to granneclass-subscribe@yahoogroups.com. To review the home page and look at archived messages, go to http://groups.yahoo.com/group/granneclass; note, though, that you must be a Yahoo member (which is free and relatively painless) to use the group on the Web. To send and receive email, you do NOT need to be a Yahoo member.
• GranneNotes, an irregularly-published newsletter about interesting & important stuff in technology and on the Internet. To subscribe, send a blank email to grannenotes-subscribe@yahoogroups.com. To review the home page and look at archived messages, go to http://groups.yahoo.com/group/grannenotes.

Grading

Your grade will be based on the following factors:

• Class attendance and participation (25%): You are expected to attend class prepared to learn and discuss the topics with your fellow classmates. We may also work on in-class exercises, and you are expected to take an active part in those exercises.
• 3 take-home mini-projects (25% each): We will practice CSS in class. At scheduled times, you will have one week to complete an assigned mini-project involving the use of these technologies. Think of it as an open-book test, since you will be allowed to use your class notes and any other resources you can access.

Grades will be based on an average of the above as follows:

100 A+
94-99 A
89-93 A-
86-88 B+
83-85 B
79-82 B-
76-78 C+
73-75 C
69-72 C-
66-68 D+
63-65 D
59-62 D-
0-58 F

Policy regarding academic dishonesty: This course will follow Washington University's policies concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question and/or referral to the college's Academic Integrity Office, which has discretion to impose a stricter penalty. While academic dishonesty includes cheating on exams and quizzes, it also includes plagiarism in written assignments. Plagiarism is not only passing off someone else's work as your own, but also giving your work to someone else to pass off as their own. It also includes submitting work from another course. While I strongly encourage you to discuss your work with each other in and out of class, and while you may research issues together, your writing should be your own. The papers you submit must be your work alone, and must include citations to all references in your work. Please include the URL, or Web address, for articles and resources found on the Internet.

Accommodation of disabilities: If you have a disability that might affect your ability to complete the required assignments, please contact me during the first week of class to discuss an accommodation.

Netiquette

It is paramount that we respect each other online in our email listserv. Follow this simple rule: disagree with the idea, but not the person. In other words, it's OK to say "That's a bad idea, because ...", and it's not OK to say "You're a bad/stupid/inconsiderate person, because ...". If you have an issue with a classmate's behavior online, please bring it to me privately by emailing me at scott@granneman.com. If you'd like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

Background Materials

Following are materials that you should use to brush up on the knowledge you'll need to participate and succeed in this course.

Tentative Schedule

Topic: Selectors
Date: Saturday, 22 January 2005
Software: TextPad, Firefox
Book: Chuck Musciano & Bill Kennedy's HTML & XHMTL: The Definitive Guide, 4th Edition.
In class:

• Selectors: the basis for CSS
  • Selectutorial - CSS selectors ~ http://css.maxdesign.com.au/selectutorial/index.htm ~ "Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses" (you do not need to look through "Selectors in action - a step by step tutorial", but it wouldn't hurt)
  • Complete CSS Guide: Selectors ~ http://www.westciv.com/style_master/academy/css_tutorial/selectors/index.html ~ A tutorial on selectors
  • Will the browser apply the rule(s)? ~ http://centricle.com/ref/css/filters/ ~ A grid showing what browsers support what selectors, including hiding tricks & hacks
  • Advanced: Selectoracle ~ http://gallery.theopalgroup.com/selectoracle/ ~ Find out what some complicated selectors mean

Topic: Fonts & formatting
Date: Saturday, 29 January 2005
Software: TextPad, Firefox
Book: More Eric Meyer on CSS
In class:

• General information about fonts & CSS
  • UsableType ~ http://usabletype.com ~ "This guide covers the basics of good typography on the web, explaining theory behind font choices, and the details of providing accessible and good looking text."
• font-family
  • Finding Fonts for Unix ~ http://www.realworldstyle.com/fonts.html ~ How to pick font-family in a way that gets all operating systems
  • CSS Font Specs ~ http://www.wpdfd.com/editorial/wpd0402.htm#toptip ~ Some suggestions for font-family
  • Code Style font sampler ~ http://www.codestyle.org/css/font-family/ ~ A survey detailing the most common fonts on Linux, Mac, & Windows computers
  • Advanced: CSS font-family glossary ~ http://www.codestyle.org/css/font-family/Glossary.shtml ~ An excellent overview of terms
  • Advanced: Anchor Points: Fonts & font foundries ~ http://www.codestyle.org/css/font-family/AnchorPoints.shtml ~ Popular fonts & the companies who make them
• font-size
  • Relative font sizes and inheritance ~ http://www.maxdesign.com.au/presentation/relative/ ~ A look at relative font sizes
  • Specifying small type sizes ~ http://www.wpdfd.com/editorial/wpd0303.htm#toptip ~ When to use pixels & when to use ems
  • Sane CSS Sizes ~ http://www.thenoodleincident.com/tutorials/typography/index.html ~ An interesting solution to the problem of font size
  • Ideal line length for content ~ http://www.maxdesign.com.au/presentation/em/ ~ Using ems to set the perfect line length for reading
  • Advanced: The Trouble With EM & EN (and Other Shady Characters) ~ http://www.alistapart.com/articles/emen/ ~ A couple of years old, so it's now safer to use named entities instead of decimals, but it's an excellent overview
  • Advanced: CSS Design: Size Matters ~ http://www.alistapart.com/articles/sizematters/ ~ Old & focusing on versions 4 & 5 of browsers, but still useful
• fonts & browsers
  • Really Undoing html.css ~ http://www.meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/ ~ Eric Meyer explains how & why your Web browsers display HTML markup the way they do
  • Fractionally Restoring html.css ~ http://www.meyerweb.com/eric/thoughts/2004/09/20/fractionally-restoring-htmlcss/ ~ After removing the built-in styles used by your web browser, Eric Meyer tells you how to restore the ones you need
• font tricks
  • Hanging Punctuation ~ http://www.realworldstyle.com/hang_punct.html ~ Line up the left margin of blockquote text
• <a>
  • CSS Design: Custom Underlines ~ http://www.alistapart.com/articles/customunderlines/ ~ Change that boring underline to something more interesting & useful
• MozIE
  • MozIE ~ http://www.zeit.ca/mozie/ ~ Look at the same page using IE & Mozilla, at the same time, in the same window.
  • View a Web Site with IE and Mozilla at the Same Time Using MOZiE ~ Instructions

Topic: Fonts & formatting
Date: Saturday, 5 February 2005
Software: TextPad, Firefox
Book:
In class:

• Abbreviations, Acronyms, & Definitions
  • Styling abbreviations, acronyms and definitions ~ http://www.maxdesign.com.au/presentation/abbreviations.cfm ~ A really good idea that immediately improves the usability of your site
  • <ABBR> vs <ACRONYM> in the HTML 4 Specification ~ http://www.benmeadowcroft.com/webdev/articles/abbr-vs-acronym.shtml ~ What's the difference between an abbreviation & an acronym?
  • HTML is not an acronym ... ~ http://www.saila.com/usage/acronym/ ~ More on the difference between abbreviations & acronyms
  • Defining acronyms ~ http://diveintoaccessibility.org/day_17_defining_acronyms.html ~ Good advice, especially the last bit about printing
• Headers
  • Heading alignment blues ~ http://www.maxdesign.com.au/presentation/headings/ ~ How do you get headings in different browsers to line up correctly?
  • Headings as images - The Lindsay method ~ http://www.maxdesign.com.au/presentation/headings-as-images/index.cfm ~ Instead of text, use images ... cleverly
• Cleaning up CSS
  • Writing Efficient CSS ~ http://www.positioniseverything.net/articles/efficientcss.html ~ Tips for shrinking the sizes of your CSS files, including shorthand properties, multiple declarations, default values, inheritance, and white space

Topic: In-class practice with fonts & formatting
Date: Saturday, 12 February 2005
Software: TextPad, Firefox
Book: Eric Meyer on CSS
In class:

Topic: Floating
Date: Saturday, 19 February 2005
Software: TextPad, Firefox
Book:
In class:

• Floating
  • Float like a butterfly ... ~ http://www.maxdesign.com.au/presentation/butterfly/index.htm ~ A really nice tutorial, with lots of examples, on the float property
  • Splitting the Difference ~ http://www.realworldstyle.com/split.html ~ A very cool use of the float property that makes it easy to understand
  • Floating Thumbnails ~ http://www.realworldstyle.com/thumb_float.html ~ Rows of thumbnail images in a liquid design
  • Floatutorial ~ http://css.maxdesign.com.au/floatutorial/index.htm ~ "... the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts."
  • Floated items inside containers ~ http://www.maxdesign.com.au/presentation/floatsample.htm ~ Some details on the behavior of floated items in containers
• Cool things to do with floats
  • Definition lists - misused or misunderstood? ~ http://www.maxdesign.com.au/presentation/definition/ & Definition lists: Table display ~ http://www.maxdesign.com.au/presentation/definition/dl-table-display.htm ~ Styling a definition list to look like a table
  • Boxpunch ~ http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html ~ Eric Meyer shows how to punch out the corner of a box for a very cool effect

Topic: In-class practice with floats
Date: Saturday, 26 February 2005
Software: TextPad, Firefox
Book:
In class:

• Boxpunch, Formatting, Floats, Alternative Style Sheets

Topic: Media-specific styles & switching
Date: Saturday, 5 March 2005
Software: TextPad, Firefox
Book:
In class:

• Media-specific Styles
  • Print Different ~ http://www.meyerweb.com/eric/articles/webrev/200001.html ~ An introduction to media-specific CSS, by Eric Meyer
  • CSS Design: Going to Print ~ http://www.alistapart.com/articles/goingtoprint/ ~ Eric Meyer on printer-friendly CSS
  • Kissing Print Versions of Pages Goodbye ~ http://evolt.org/article/Kissing_Print_Versions_of_Pages_Goodbye/20/22225/index.html ~ Advice on using print-friendly CSS
• Switching CSS
  • Some examples: Eric Meyer's old site, Mozilla 1.0's start page, css Zen Garden
  • Alternative Style: Working With Alternate Style Sheets ~ http://www.alistapart.com/articles/alternate/ ~ A short how-to about how to switch between style sheets
  • Invasion of the Body Switchers ~ http://www.alistapart.com/articles/bodyswitchers/ ~ The followup to Alternative Style extends & improves it even further
  • A Backward Compatible Style Switcher ~ http://www.alistapart.com/articles/n4switch/ ~ Making the switch work with Netscape 4
  • Adactio ~ http://www.adactio.com/articles/display.php/CSS_based_design/1 ~ An interesting example of on-the-fly CSS switching
  • Advanced: Build a PHP Switcher ~ http://www.alistapart.com/articles/phpswitch/ ~ Switch between style sheets using PHP
  • Advanced: Daemon Skins: Separating Presentation from Content ~ http://www.alistapart.com/articles/daemonskin/ ~ The article as a whole ain't great, but 1/3 down he links to several sites who provide different looks through CSS
  • Advanced: Big, Stark & Chunky ~ http://www.alistapart.com/articles/lowvision/ ~ Advice on designing your site for low vision users

No class: SPRING BREAK!
Date: Saturday, 12 March 2005

Topic: In-class practice with switching media-specific styles
Date: Saturday, 19 March 2005
Software: TextPad, Firefox
Book:
In class:

Topic: Lists for navigation
Date: Saturday, 26 March 2005
Software: TextPad, Firefox
Book:
In class:

• IE Conditional Comments
• Lists for navigation
  • List inheritance and Descendant Selectors ~ http://www.maxdesign.com.au/presentation/list_cascade/ ~ A short & simple illustration of an important concept
  • Listutorial ~ http://css.maxdesign.com.au/listutorial/index.htm ~ "... the basics of building background image lists, rollover lists, nested lists and horizontal lists."
  • CSS Design: Taming Lists ~ http://www.alistapart.com/articles/taminglists/ ~ Using CSS to do cool things with lists
  • Taming the "Taming lists" model ~ http://www.maxdesign.com.au/presentation/tame/ ~ Improving Taming Lists to be even better
  • pure CSS menus ~ http://www.meyerweb.com/eric/css/edge/menus/demo.html ~ Eric Meyer on turning lists into navigation menus
  • Listamatic ~ http://css.maxdesign.com.au/listamatic/index.htm ~ Take one list coded in HTML, change the CSS, & get many different options
  • Listamatic 2 ~ http://css.maxdesign.com.au/listamatic2/index.htm ~ Nested lists
  • Advanced: Suckerfish Dropdowns ~ http://www.htmldog.com/articles/suckerfish/bones/ ~ Turn lists into cool dropdown menus with some CSS & some JavaScript
  • Advanced: CSS Menus ~ http://www.s7u.co.uk/menus/index.html ~ 14 examples, and even though lists aren't used, they easily could be

Topic: Navigation
Date: Saturday, 2 April 2005
Software: TextPad, Firefox
Book:
In class:

• Tabs
  • Rounding Tab Corners ~ http://www.complexspiral.com/publications/rounding-tabs/ ~ Eric Meyer shows us how to create tabs with rounded corners
  • An example at mozilla.org ~ http://www.mozilla.org/releases/mozilla1.8a1/README.html ~ A very cool use of the <fieldset> element & CSS
  • Sliding Doors of CSS ~ http://www.alistapart.com/articles/slidingdoors/ ~ Creating CSS-based tabs
  • Sliding Doors of CSS, Part II ~ http://www.alistapart.com/articles/slidingdoors2/ ~ Sliding doors & CSS-based tabs, taken further
  • Advanced: Tabs ~ http://www.brainjar.com/css/tabs/ ~ Build tabs with CSS
• Drop-down menus
  • CSS on mouseover Drop-down Menu ~ http://www.theimposter.org/examples/onhovermenu/ ~ Drop-down menus with CSS only
  • MOSe Menus ~ http://www.mezzoblue.com/archives/2003/10/27/mose_menus/index.php ~ Transparent CSS dropdowns ... with absolutely no JavaScript
• Turning Lists Into Navigation

Topic: In-class practice with navigation
Date: Saturday, 9 April 2005
Software: TextPad, Firefox
Book:
In class:

Topic: Positioning
Date: Saturday, 16 April 2005
Software: TextPad, Firefox
Book:
In class:

• Postioning: The Box Model
  • CSS Box Model - in laymans terms! ~ http://www.tanfa.co.uk/css/articles/css-box-model.asp ~ A super-simple explanation. It don't get much easier than this!
  • Thinking inside the box ~ http://www.wpdfd.com/editorial/wpd1002.htm#feature ~ A nice introduction to the CSS box model
• Intro to Positioning
  • An introduction to CSS-Positioning ~ http://www.webreference.com/programming/css_utopia/chap5/2.html ~ Covers: basic box model, padding, margins, borders, display property, absolute & relative ositioning, multiple columns/li>
  • CSS Positioning ~ http://www.brainjar.com/css/positioning/default.asp ~ An excellent introduction to CSS-P
  • Complete CSS Guide: Page Layout Properties ~ http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html ~ A very good overview of CSS-P, from WestCiv
• Uses for Positioning
  • Practical CSS Layout Tips, Tricks, & Techniques ~ http://www.alistapart.com/articles/practicalcss/ ~ How to layout images, forms, & more ... without tables!
• Intro to Positioning Layouts
  • Flexible Layouts with CSS Positioning ~ http://www.alistapart.com/articles/flexiblelayouts/ ~ Absolute & relative positioning of divs
  • Liquid layouts the easy way ~ http://www.maxdesign.com.au/presentation/liquid/ ~ A comprehensive walk through a liquid layout
• Positioning Layouts
  • 2 columns
    • 2 columns - left menu ~ http://bluerobot.com/web/layouts/layout1.html ~ 2 columns with the menu on the left
    • 2 columns - right menu ~ http://bluerobot.com/web/layouts/layout2.html ~ 2 columns with the menu on the right
    • Two columns with color ~ http://nemesis1.f2o.org/articles ~ Just your basic 2-column layout with liquid width
    • LAYOUT TECHNIQUES: nested float ~ http://glish.com/css/1.asp ~ Nested, floating menu in the upper right (or left) - not really 2 columns, but close enough
    • Faux Columns ~ http://www.alistapart.com/articles/fauxcolumns/ ~ Using background property to create the illusion of columns
  • 3 columns
    • Flanking Menus ~ http://bluerobot.com/web/layouts/layout3.html ~ Three columns, and no tables
    • LAYOUT TECHNIQUES: 3 columns, the holy grail ~ http://glish.com/css/7.asp ~ Three columns, with the center fluid
    • LAYOUT TECHNIQUES: 3 columns, all fluid ~ http://glish.com/css/2.asp ~ Three columns that readjust width as the window changes
    • LAYOUT TECHNIQUES: static width and centered ~ http://glish.com/css/3.asp ~ Three columns, all static width & centered
    • The compulsory three columns ~ http://www.s7u.co.uk/layouts/threecol.html ~ A three-column layout from Cutting edge CSS
  • 4 columns
    • LAYOUT TECHNIQUES: 4 columns, all fluid ~ http://glish.com/css/8.asp ~ Four columns that readjust width as the window changes
  • Collections
    • Little Boxes ~ http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html ~ Pick your layout, & grab the CSS it makes for you
    • Sample CSS Page Layouts ~ http://www.maxdesign.com.au/presentation/page_layouts/index.cfm ~ Single column, two column, three column ... it's all here
    • Layout-o-matic ~ http://www.inknoise.com/experimental/layoutomatic.php ~ Pick a layout, click a button, & you've got your code

Topic: Centering
Date: Saturday, 23 April 2005
Software: TextPad, Firefox
Book:
In class:

• Centering
  • CSS Centering - fun for all! ~ http://www.maxdesign.com.au/presentation/center/ ~ How to horizontally center in CSS
  • Vertical Centering with CSS ~ http://www.wpdfd.com/editorial/wpd0103.htm#toptip ~ A trick that allows you to center <div>'s both horizontally AND vertically
  • Advanced: Centering a site ~ http://www.quirksmode.org/css/centering.html ~ Center a block, horizontally & vertically, in a window
  • Advanced: Centering: Auto-width Margins ~ http://bluerobot.com/web/css/center1.html ~ A method for centering, with a workaround for IE
• In-class assignment: pick a site to redesign
  • css Zen Garden ~ http://www.csszengarden.com/ ~ An awesome collection: use the same HTML, but with different CSS, change the look of the site
  • For practice: University City Public Library Youth Services Department ~ http://www.ucpl.lib.mo.us/childrens/

Topic: In-class practice with positioning
Date: Saturday, 30 April 2005
Software: TextPad, Firefox
Book:
In class:

Topic: Goodbye
Date: Saturday, 7 May 2005
Software: TextPad, Firefox
Book:
In class: