Design for the Web 2

---

49540 SPRING 2008

---

Week 3

ZEN CSS EXAMPLES: 015/028/035/038/041/084/211/ [same as Week 2]

index of all csszen designs: http://www.mezzoblue.com/zengarden/alldesigns/

LAYOUT examples

http://www.glish.com/css/3.asp

http://blog.html.it/layoutgala/ Layout Gala

articles on POSITIONING

http://www.brainjar.com/css/positioning/ CSS positioning summary

http://www.dynamicdrive.com/style/layouts/category/C13/ Liquid layouts [note: these pages mix 'liquid/fluid' layouts which are %-based and 'elastic' layouts which are em-based]

WORKFLOW

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/ Workflow and good practices

SELECTORS

http://css.maxdesign.com.au/selectutorial/Select Tutorial

http://www.eskimo.com/~bloo/indexdot/css/syntax/selectors/element.htm Selectors

Fixed, Fluid, Elastic Layouts

http://green-beast.com/blog/?p=199 Units of calculation in pixels, % and EMs

CSS Positioning in Ten Steps

http://www.barelyfitz.com/screencast/html-training/css/positioning/ Tutorial on positioning

From Week 2

Using Style Sheets

http://www.brainjar.com/css/using/ Overview of CSS Style Sheets; including review of selectors

Block vs. Inline, Part 1

http:/www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1 Block vs. Inline elements [div vs. span]

Block vs. Inline, Part 2

http:/www.autisticcuckoo.net/archive.php?id=2005/01/12/block-vs-inline-2 Block vs. Inline elements: block formatting context, bloxk box dimensions, collapsing margins

Block vs. Inline, Part 3

http://www.autisticcuckoo.net/archive.php?id=2005/01/13/block-vs-inline-3 Block vs. inline boxes, inline box formatting

HTML named colors

http://www.bigbaer.com/reference/colors/named_colors.htm Block vs. inline boxes, inline box formatting

Various HTML and CSS properties: HTML Dog

http://www.htmldog.com/examples/ List of properties for HTML and CSS; look at LAYOUT examples. Also see IMAGE REPLACEMENT

CSS Page Layout Examples

http://www.glish.com/css/3.asp 3-column layouts

http://blog.html.it/layoutgala/LayoutGala07.html 3-column layouts

http://blog.html.it/layoutgala/LayoutGala33.html 2-column layouts

XRAY Tool

Xray tool for CSS analysis: http://www.westciv.com/xray/xray_more.html

FLOATS [for week 4]

http://css.maxdesign.com.au/floatutorial/ Float Tutorial

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ Floats

http://www.quirksmode.org/css/clearing.html Floats and clearing

http://www.complexspiral.com/publications/containing-floats Containing floats

class site: http://www.annetteweintraub.com/courses/49540/49540.html