49540 Class Links, Week 2

ZEN CSS EXAMPLES: 015/028 /035/038/041/084/211/

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

DOCTYPE example [use XHTML strict or transitional]

http://www.alistapart.com/articles/doctype/ Explanation of doctypes

USE ONE OF THESE DOCTYPES

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Add this to the HTML declaration:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

Add this to the META head to DECLARE THE ENCODING

<meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />

This specifies the encoding of symbols and special characters [UTF-8 is the default]

Initial XHTML File Example for review

http://www.synergycons.com/Tutorials/xhtml2.asp This is an XHTML file template

CSS Starter file

http://green-beast.com/blog/?p=109 Basics for a new CSS file

See the combined starter file in class handouts on the server, "shellfile.html"

The CSS Box model

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ CSS box model and differences between W3 and Internet Explorer box models

The CSS Box model, some other examples

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

http://jessey.net/simon/articles/003.html

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

The COLORED BOX METHOD for building layouts

http://www.maxdesign.com.au/presentation/process/index.htm This is the CSS page-building technique we will use this semester

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

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

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

Design for the Web 2

49540 FALL 2008

Week 2

ZEN CSS EXAMPLES: 015/028 /035/038/041/084/211/

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

DOCTYPE example [use XHTML strict or transitional]

USE ONE OF THESE DOCTYPES

Add this to the HTML declaration:

Add this to the META head to DECLARE THE ENCODING

Initial XHTML File Example for review

CSS Starter file

See the combined starter file in class handouts on the server, "shellfile.html"

The CSS Box model

The CSS Box model, some other examples

The COLORED BOX METHOD for building layouts

Fixed, Fluid, Elastic Layouts

CSS Positioning in Ten Steps

Using Style Sheets

Block vs. Inline, Part 1

Block vs. Inline, Part 2

Block vs. Inline, Part 3

HTML named colors

Various HTML and CSS properties: HTML Dog

CSS Page Layout Examples

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

Design for the Web 2

49540 FALL 2008

Week 2

ZEN CSS EXAMPLES: 015/028/035/038/041/084/211/

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

DOCTYPE example [use XHTML strict or transitional]

USE ONE OF THESE DOCTYPES

Add this to the HTML declaration:

Add this to the META head to DECLARE THE ENCODING

Initial XHTML File Example for review

CSS Starter file

See the combined starter file in class handouts on the server, "shellfile.html"

The CSS Box model

The CSS Box model, some other examples

The COLORED BOX METHOD for building layouts

Fixed, Fluid, Elastic Layouts

CSS Positioning in Ten Steps

Using Style Sheets

Block vs. Inline, Part 1

Block vs. Inline, Part 2

Block vs. Inline, Part 3

HTML named colors

Various HTML and CSS properties: HTML Dog

CSS Page Layout Examples

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

ZEN CSS EXAMPLES: 015/028 /035/038/041/084/211/