Design for the Web 2

49540 SPRING 2010

Week 2

[also see Week 1]

ZEN CSS EXAMPLES: / 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">

OR

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

OR

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

http://www.quirksmode.org/ Read about Quirks Mode

If you use the lang attribute in an element, you must also add the xml:lang attribute, like this:

<html  xml:lang="en" >

http://webdesign.about.com/od/localization/a/aa043007.htm Read about language declarations

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]. The World Wide Web Consortium (W3C) highly recommends the use of UTF-8 wherever possible. UTF-8 can be used for all languages and is the recommended charset on the Internet.

http://www.webheadstart.org/xhtml/encoding/index.html Explains xhtml encoding in UT-8

PUT IT ALL TOGETHER

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

<html xml:lang="en" >  <!-- declare language[s]--> 

<head> 

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

<title>Page Title Here <!-- add the page title --> 

<meta name="keywords" content="internationalization, language HTML, language XHTML, 
localization of Web pages, language of Web pages"> <!-- use key words for search engines--> 

<meta name="description" content="When you specify the language of your XHTML documents, 
you are making your Web pages more useful to many different applications. 
This article examines the W3C's Internationalization Best Practices, and gives 
suggestions for how to implement them in your HTML and XHTML documents."> <!-- describe content for search engines--> 

</head>

THE SHORT VERSION

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

<head> 

<title>Page Title Here </title> <!-- add the page title --> 

</head>

Quirks mode

http://www.quirksmode.org/css/quirksmode.html Quirks mode: how the browser displays a page if the DOC TYPE is missing

Sample XHTML file structure

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

CSS Starter file

http://green-beast.com/blog/?p=109 Basics for a new CSS file [but we are using the zencss selectors]

The CSS Box model

http://jessey.net/simon/articles/003.html Visual example of the 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/ Guide to CSS positioning

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm The IE box model and Doctype modes

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

Using Style Sheets

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

What Size Browser Window Should You Design For?

http://browsersize.googlelabs.com/ Google tool to analyze optimum browser sizes

HTML named colors

http://www.colorschemer.com/blog/2007/07/24/140-named-colors/ 140 Named colors

http://www.bigbaer.com/reference/colors/named_colors.htm Named colors

http://www.somacon.com/cgi/colorchart.pl/hex colors Chart of hex colors

FOR REFERENCE AND REVIEW: Positioning and Layouts Basics

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

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

View Page in different browsers [pages must be online]

http://browsershots.org/ View your page online in different browsers. Your page must be online.

http://ipinfo.info/netrenderer/ See your page in various IE browsers. Your page must be online.

MORE RESOURCES

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://blog.html.it/layoutgala/ 2 and 3-column layouts

http://www.dynamicdrive.com/style/layouts/category/C10/ various layouts

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm 2-column layouts [uses floats]

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ 2-column layouts [uses floats]