學習使用XHTML的12天 <script language="javascript" type="text/javascript">document.title="[轉帖]學習使用XHTML的12天 - "+document.title</script>
前言
大家好！這個系列文章是按轉自網友阿捷編寫的。之前阿捷也一直沒有製作過一個真正符合web標準的網站。現在邊參考國外資料邊製作，同時把過程中的心得和經驗記錄下來，希望對大家有點幫助。好了，讓我們開始吧。
第一天
開始製作符合標準的站點，第一件事情就是聲明符合自己需要的DOCTYPE。
查看本站首頁原代碼，可以看到第一行就是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">打開一些符合標準的站點，例如著名web設計軟件開發商Macromedia，設計大師Zeldman的個人網站，會發現同樣的代碼。而另一些符合標準的站點(例如k10k.net)的代碼則如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那麼這些代碼有什麼含義？一定要放置嗎？
什麼是DOCTYPE
上面這些代碼我們稱做DOCTYPE聲明。DOCTYPE是document type(文檔類型)的簡寫，用來說明你用的XHTML或者HTML是什麼版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義，裏面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展現出來。
要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。
XHTML 1.0 提供了三種DTD聲明可供選擇：
- 過渡的(Transitional):要求非常寬鬆的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要採用這種DTD。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我們選擇什麼樣的DOCTYPE
理想情況當然是嚴格的DTD，但對於我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因爲這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。
注：上面說的"表現層的標識、屬性"是指那些純粹用來控制表現的tag，例如用於排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的，而不是用來實現表現形式，我們過渡的目的是最終實現數據和表現相分離。
打個比方：人體模特換衣服。模特就好比數據，衣服則是表現形式，模特和衣服是分離的，這樣你就可以隨意換衣服。而原來HTML4中，數據和表現是混雜在一起的，要一次性換個表現形式非常困難。呵呵，有點抽象了，這個概念需要我們在應用過程中逐步領會。
補充
DOCTYPE聲明必須放在每一個XHTML文檔最頂部，在所有代碼和標識之上。
更多細節可以訪問W3C的網站
第2天:什麼是名字空間
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我們HTML4.0的代碼只是<html>，這裏的"xmlns"是什麼呢？
這個"xmlns"是XHTML namespace的縮寫，叫做"名字空間"聲明。名字空間是什麼作用呢？阿捷自己的理解是：
由於xml允許你自己定義自己的標識，你定義的標識和其他人定義的標識有可能相同，但表示不同的意義。當文件交換或者共享的時候就容易產生錯誤。爲了避免這種錯誤發生，XML採用名字空間聲明，允許你通過一個網址指向來識別你的標識。例如：
小王和小李都定義了一個<book>標識，如果小王的名字空間是"http://www.xiaowang.com"，小李的名字空間是"http://www.xiaoli.com"，那麼當兩個文檔交換數據時，也不會混淆<book>標識，因爲它屬於不同的名字空間。
更通俗的解釋是：名字空間就是給文檔做一個標記，告訴別人，這個文檔是屬於誰的。只不過這個"誰"用了一個網址來代替。
XHTML是HTML向XML過渡的標識語言，它需要符合XML文檔規則，因此也需要定義名字空間。又因爲XHTML1.0不能自定義標識，所以它的名字空間都相同，就是"http://www.w3.org/1999/xhtml"。如果你還不太理解也不要緊，目前階段我們只要照抄代碼就可以了。
後面的lang="gb2312",指定你的文檔用簡體中文。
第3天:定義語言編碼
第三步是定義你的語言編碼，類似這樣：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
爲了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言，我們一般使用gb2312(簡體中文)，製作多國語言頁面也有可能用Unicode、ISO-8859-1等，根據你的需要定義。
通常這樣定義就可以了。但是要補充說明的是，XML文檔並不是這樣定義語言編碼的，XML的定義方式如下：
<?xml version="1.0" encoding="gb2312"?>
你在Macromedia.com的首頁代碼第一行就可以看見類似的語句，這也是W3C推薦使用的定義方法。那爲什麼我們不直接採用這種方法呢？原因是一些瀏覽器對標準的支持不完善，不能正確理解這樣的定義方法，比如IE6/windows。所以在目前過渡方案下，我們依然推薦使用meta方式。當然，你可以兩種方法都寫。
看本站源代碼，你會發現語言編碼定義的地方還多一句：
<meta http-equiv="Content-Language" content="gb2312" />
這是針對老版本瀏覽器寫的，以保證各種瀏覽器都能正確解釋頁面。
注意：在上面聲明語句的最後，你看到有一個斜槓"/"，這和我們以前的HTML4.0的代碼寫法不同。原因是XHTML語法規則要求所有的標識都必須有開始和結束。例如<body>和</body>、<p>和</p>等，對於不成對的標識，要求在標識最後加一個空格，然後跟一個"/"。例如<br>寫成<br />、<img>寫成<img />，加空格的原因是避免代碼連在一起瀏覽器不識別。
第4天:調用樣式表
用web標準設計網站，過渡的方法主要是採用XHTML+CSS，css樣式表是必不可少的。這就要求所有網頁設計師必須熟練掌握CSS，如果你以前不常用，那麼現在就開始學習吧。要製作符合web標準的網站，不懂CSS是設計不出漂亮的頁面的。
事實上，所有表現的地方都需要用CSS來實現。我們以前都習慣用table來定位和佈局，現在要改用DIV來定位和佈局。這是思維方式的變化，一開始有些不習慣。呵呵，任何變革都會有阻力的，爲了享受標準帶來的"益處"，放棄一些老的傳統做法是值得的。
外部調用樣式表
在以前，我們通常採用2種方法使用樣式表：
- 頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。類似這樣：
<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
- 外部調用法：將樣式表寫在一個獨立的.css文件中，然後在頁面head區用類似以下代碼調用。
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
在符合web標準的設計中，我們使用外部調用法，好處不言而喻，你可以不修改頁面只修改.css文件而改變頁面的樣式。如果所有頁面都調用同一個樣式表文件，那麼改一個樣式表文件，可以改變所有文件的樣式。
雙表法調用樣式表
查看某些符合標準站點的原代碼，你可能看到，在調用樣式表的地方有如下2句：
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> <style type="text/css" media="all">@import url( css/style01.css );</style>
爲什麼要寫兩次呢？
實際上一般情況下用外聯法調用(就是第一句)就足夠了。我這裏使用雙表調用只是一種示例。其中的"@import"命令用於輸入樣式表。而"@import"命令在netscape 4.0版本瀏覽器是無效的。也就是說，當你希望某些效果在netscape 4.0瀏覽器中隱藏，在4.0以上或其它瀏覽器中又顯示的時候，你可以採用"@import"命令方法調用樣式表。
第5天:head區的其他設置
這些技巧主要講meta標籤設置的，其實與符合web標準關係不大，只要注意在最後加"/"關閉標籤就可以，但是既然是入門教程，就寫得詳細一點吧。
收藏夾小圖標
如果你將本站加入收藏夾，可以看到在收藏夾網址之前的IE圖標變成了本站特別的圖標
。要實現這樣效果很簡單，首先製作一個16x16的icon圖標，命名爲favicon.ico，放在根目錄下。然後將下面的代碼嵌入head區：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
爲搜索引擎準備的內容
代碼如下，替換成你自己站點的內容就可以：
- 允許搜索機器人搜索站內所有鏈接。如果你想某些頁面不被搜索，推薦採用robots.txt方法
<meta content="all" name="robots" />
- 設置站點作者信息
<meta name="author" content="[email protected],阿捷" />
- 設置站點版權信息
<meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" />
- 站點的簡要介紹(推薦)
<meta name="description" content="新網頁設計師。web標準的教程站點，推動web標準在中國的應用" />
- 站點的關鍵詞(推薦)
<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />
先介紹這麼多。補充說明，前面花了5節都是講head區的代碼，實際頁面內容還一字未提，呵呵，不要急，其實head區是非常重要的，看一個頁面的head的代碼就可以知道設計師是否夠專業。
第6天:XHTML代碼規範
在開始正式內容製作之前，我們必須先了解一下web標準有關代碼的規範。瞭解這些規範可以幫助你少走彎路,儘快通過代碼校驗。
1.所有的標記都必須要有一個相應的結束標記
以前在HTML中，你可以打開許多標籤，例如<p>和<li>而不一定寫對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標籤必須關閉。如果是單獨不成對的標籤，在標籤最後加一個"/"來關閉它。例如:
<br /><img height="80" alt="網頁設計師" src="../images/logo_w3cn_200x80.gif" width="200" />
2.所有標籤的元素和屬性的名字都必須使用小寫
與HTML不一樣，XHTML對大小寫是敏感的，<title>和<TITLE>是不同的標籤。XHTML要求所有的標籤和屬性的名字都必須使用小寫。例如：<BODY>必須寫成<body> 。大小寫夾雜也是不被認可的，通常dreamweaver自動生成的屬性名字"onMouseOver"也必須修改成"onmouseover"。
3.所有的XML標記都必須合理嵌套
同樣因爲XHTML要求有嚴謹的結構，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：
<p><b></p>/b>
必須修改爲：
<p><b></b>/p>
就是說，一層一層的嵌套必須是嚴格對稱。
4.所有的屬性必須用引號""括起來
在HTML中，你可以不需要給屬性值加引號，但是在XHTML中，它們必須被加引號。例如:
<height=80>
必須修改爲：
<height="80">
特殊情況，你需要在屬性值裏使用雙引號，你可以用"，單引號可以使用'，例如：
<alt="say'hello'">
5.把所有<和&特殊符號用編碼表示
- 任何小於號（<），不是標籤的一部分，都必須被編碼爲& l t ;
- 任何大於號（>），不是標籤的一部分，都必須被編碼爲& g t ;
- 任何與號（&），不是實體的一部分的，都必須被編碼爲& a m p;
注：以上字符之間無空格。
6.給所有屬性賦一個值
XHTML規定所有屬性都必須有一個值，沒有值的就重複本身。例如：
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必須修改爲：
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
7.不要在註釋內容中使“--”
“--”只能發生在XHTML註釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的:
<!--這裏是註釋-----------這裏是註釋-->
用等號或者空格替換內部的虛線。
<!--這裏是註釋============這裏是註釋-->
以上這些規範有的看上去比較奇怪，但這一切都是爲了使我們的代碼有一個統一、唯一的標準，便於以後的數據再利用。
第7天:CSS入門
在瞭解XHTML代碼規範後，我們就要進行CSS佈局。首先先介紹一些CSS的入門知識。如果你已經很熟悉了，可以跳過這一節，直接進入下一節。
CSS是Cascading Style Sheets(層疊樣式表)的縮寫。是一種對web文檔添加樣式的簡單機制，屬於表現層的佈局語言。
1.基本語法規範
分析一個典型CSS的語句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
- 其中"p"我們稱爲"選擇器"(selectors)，指明我們要給"p"定義樣式；
- 樣式聲明寫在一對大括號"{}"中；
- COLOR和BACKGROUND稱爲"屬性"(property)，不同屬性之間用分號";"分隔；
- "#FF0000"和"#FFFFFF"是屬性的值(value)。
2.顏色值
顏色值可以用RGB值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子color:#FF0000。如果十六進制值是成對重複的可以簡寫，效果一樣。例如:#FF0000可以寫成#F00。但如果不重複就不可以簡寫，例如#FC1A1B必須寫滿六位。
3.定義字體
web標準推薦如下字體定義方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }
- 字體按照所列出的順序選用。如果用戶的計算機含有Lucida Grande字體，文檔將被指定爲Lucida Grande。沒有的話，就被指定爲Verdana字體，如果也沒有Verdana，就指定爲Lucida字體，依此類推，；
- Lucida Grande字體適合Mac OS X；
- Verdana字體適合所有的Windows系統；
- Lucida適合UNIX用戶
- "宋體"適合中文簡體用戶;
- 如果所列出的字體都不能用，則默認的sans-serif字體能保證調用;
4.羣選擇器
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔，： p, td, li { font-size : 12px ; }
5.派生選擇器
可以使用派生選擇器給一個元素裏的子元素定義樣式，例如這樣：
li strong { font-style : italic; font-weight : normal；}
就是給li下面的子元素strong定義一個斜體不加粗的樣式。
6.id選擇器
用CSS佈局主要用層"div"來實現，而div的樣式通過"id選擇器"來定義。例如我們首先定義一個層
<div id="menubar"></div>
然後在樣式表裏這樣定義：
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。
id選擇器也同樣支持派生，例如：
#menubar p { text-align : right; margin-top : 10px; }
這個方法主要用來定義層和那些比較複雜，有多個派生的元素。
6.類別選擇器
在CSS裏用一個點開頭表示類別選擇器定義，例如：
.14px {color : #f60 ;font-size:14px ;}
在頁面中，用class="類別名"的方法調用：
<span class="14px">14px大小的字體</span>
這個方法比較簡單靈活，可以隨時根據頁面需要新建和刪除。
7.定義鏈接的樣式
CSS中用四個僞類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標停在上方時、點下鼠標時"的樣式。注意，必須按以上順序寫，否則顯示可能和你預想的不一樣。記住它們的順序是“LVHA”。
呵呵，看了這麼多，有點頭暈吧，實際上CSS的語法規範還有很多，這裏列的只是一些常用的，畢竟我們是循序漸進，不可能一口喫成胖子:)
第8天:CSS佈局入門
CSS佈局與傳統表格(table)佈局最大的區別在於：原來的定位都是採用表格，通過表格的間距或者用無色透明的GIF圖片來控制文佈局版塊的間距；而現在則採用層(div)來定位，通過層的margin,padding,border等屬性來控制版塊的間距。
1.定義DIV
分析一個典型的定義div例子：
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
說明如下：
- 層的名稱爲sample，在頁面中用<div id="sample">就可以調用這個樣式。
- MARGIN是指層的邊框以外留的空白，用於頁邊距或者與其它層製造一個間距。"10px 10px 10px 10px"分別代表"上右下左"(順時針方向)四個邊距，如果都一樣，可以縮寫成"MARGIN: 10px;"。如果邊距爲零，要寫成"MARGIN: 0px;"。注意：當值是零時，除了RGB顏色值0%必須跟百分號，其他情況後面可以不跟單位"px"。MARGIN是透明元素，不能定義顏色。
- PADDING是指層的邊框到層的內容之間的空白。和margin一樣，分別指定上右下左邊框到內容的距離。如果都一樣，可以縮寫成"PADDING:0px"。單獨指定左邊可以寫成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定義顏色。
- BORDER是指層的邊框，"BORDER-RIGHT: #CCC 2px solid;"是定義層的右邊框顏色爲"#CCC"，寬度爲"2px"，樣式爲"solid"直線。如果要虛線樣式可以用"dotted"。
- BACKGROUND是定義層的背景。分2級定義，先定義圖片背景，採用"url(../images/bg_logo.gif)"來指定背景圖片路徑；其次定義背景色"#FEFEFE"。"no-repeat"指背景圖片不需要重複，如果需要橫向重複用"repeat-x",縱向重複用"repeat-y",重複鋪滿整個背景用"repeat"。後面的"right bottom;"是指背景圖片從右下角開始。如果沒有背景圖片可以只定義背景色BACKGROUND: #FEFEFE
- COLOR用於定義字體顏色，上一節已經介紹過。
- TEXT-ALIGN用來定義層中的內容排列方式，center居中,left居左,right居右。
- LINE-HEIGHT定義行高，150%是指高度爲標準高度的150%，也可以寫作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一樣的意思。
- WIDTH是定義層的寬度，可以採用固定值，例如500px，也可以採用百分比，象這裏的"60%"。要注意的是:這個寬度僅僅指你內容的寬度，不包含margin,border和padding。但在有些瀏覽器中不是這麼定義的，需要你多試試。
下面是這個層的實際表現:
這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，
這裏是演示內容，這裏是演示內容，
這裏是演示內容，這裏是演示內容，
這裏是演示內容...我們可以看到邊框是2px的灰色，背景圖片在右下沒有重複，內容距離上和左邊框20px，內容居中，一切和預想的一樣。hoho，雖然不好看，但它是最基本的，掌握了它，你就已經學會一半的CSS佈局技術了。就是這樣，不算難吧！(另一半是什麼？另一半是層與層之間的定位。我會在後面逐步講解。)
2.CSS2盒模型
自從1996年CSS1的推出，W3C組織就建議把所有網頁上的對像都放在一個盒(box)中，設計師可以通過創建定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層<div>。盒模型主要定義四個區域：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。上面我們講的sample層就是一個典型的盒。對於初學者，經常會搞不清楚margin，background-color，background-image，padding，content，border之間的層次、關係和相互影響。這裏提供一張盒模型的3D示意圖，希望便於你的理解和記憶。
3.輔助圖片一律用背景處理
用XHTML+CSS佈局，有一個技術一開始讓你不習慣，應該說是一種思維方式與傳統表格佈局不一樣，那就是：所有輔助圖片都用背景來實現。類似這樣：
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
儘管可以用<img>直接插在內容中，但這是不推薦的。這裏的"輔助圖片"是指那些不是作爲頁面要表達的內容的一部分，而僅僅用於修飾、間隔、提醒的圖片。例如：相冊中的圖片、圖片新聞中的圖片，上面的3d盒模型圖片都屬於內容的一部分，它們可以用<img>元素直接插在頁面裏，而其它的類似logo，標題圖片，列表前綴圖片都必須採用背景方式或者其他CSS方式顯示。
這樣做的原因有2點：
- 將表現與結構徹底相分離(參考閱讀另一篇文章：《理解表現與結構相分離》)，用CSS控制所有的外觀表現，便於改版。
- 使頁面更具有易用性，更有親和力。例如：盲人使用屏幕閱讀機，用背景技術實現的圖片就不會被朗讀出來。
第9天:第一個CSS佈局實例
接下來開始要真正設計佈局了。和傳統的方法一樣，你首先要在腦海裏有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素，因爲web標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統表格方法實現的佈局，用DIV也可以實現。技術有一個成熟的過程，把DIV看成和TABLE一樣的工具，如何運用就看你的想象力了。
注：在實際應用過程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取捨在於你的價值判斷。好，不羅嗦了，我們開始：
1.確定佈局
w3cn的最初設計草圖如下：
用表格的設計方法的話，一般都是上中下三行佈局
。用DIV的話，我考慮使用三列來佈局,成爲這樣
。
2.定義body樣式
先定義整個頁面的body的樣式,代碼如下：
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋體','新宋體',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
以上代碼的作用在上一天的教程有詳細說明，大家應該一看就明白。定義了邊框邊距爲0；背景顏色爲#FEFEFE，背景圖片爲bg_logo.gif，圖片位於頁面右下角，不重複；定義了字體尺寸爲12px；字體顏色爲#666;行高150%。
3.定義主要的div
初次使用CSS佈局，我決定採用固定寬度的三列布局(比自適應分辨率的設計簡單,hoho，別說我偷懶，先實現簡單的，增加點信心嘛！)。分別定義左中右的寬度爲200:300:280，在CSS中如下定義:
/*定義頁面左列樣式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定義頁面中列樣式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定義頁面右列樣式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }
注意：定義中列和右列div我都採用了POSITION: absolute;，然後分別定義了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;這是這個佈局的關鍵，我採用了層的絕對定位。定義中間列距離頁面左邊框200px，距離頂部0px；定義右列距離頁面左邊框500px，距離頂部0px；。
這時候整個頁面的代碼是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>歡迎進入新《網頁設計師》:web標準教程及推廣</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿捷" />
<meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" />
<meta name="description" content="新網頁設計師,web標準的教程站點,推動web標準在中國的應用." />
<meta content="web標準,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<body>
<div id="left">頁面左列</div>
<div id="middle">頁面中列</div>
<div id="right">頁面右列</div>
</body>
</html>
這時候頁面的效果僅僅可以看到三個並列的灰色矩形，和一個背景圖。但是我希望高度是滿屏的，怎麼辦呢？
4.100%自適應高度?
爲了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設置"height:100%;"，但發現完全沒有預想的自適應高度效果。經過一番嘗試後，我只好給每個div一個絕對高度:"height:1000px;"，並且隨着內容的增加，需要不斷修正這個值。難道沒有辦法自適應高度了嗎？隨着阿捷自己學習的深入，發現一個變通的解決辦法，實際上根本不需要設置100%，我們已經被table思維禁錮太深了，這個辦法在下一節的學習中詳細介紹。
第10天:自適應高度
如果我們想在3列布局的最後加一行頁腳，放版權之類的信息。就遇到必須對齊3列底部的問題。在table佈局中，我們用大表格嵌套小表格的方法，可以很方便對齊三列；而用div佈局，三列獨立分散，內容高低不同，就很難對齊。其實我們完全可以嵌套div，把三列放進一個DIV中，就做到了底部對齊。下面是實現例子(白色背景框模擬一個頁面)：
這裏是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }，背景顏色用的是#main的背景色
這裏是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}
這裏是主要內容，根據內容自動適應高度
這裏是主要內容，根據內容自動適應高度
這裏是主要內容，根據內容自動適應高度
這個例子的頁面主要代碼如下：
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
具體樣式表都寫在相應版塊裏了。重點在於#mainbox層嵌套了#menu,#sidebar和#content三個層。當#content的內容增加，#content的高度就會增高，同時#mainbox的高度也會撐開，#footer層就自動下移。這樣就實現了高度的自適應。
另外值得注意的是：#menu和#content都是浮動在頁面右面"FLOAT: right;",#sidebar是浮動在#menu層的左面"FLOAT: left;"，這是浮動法定位，還可以採用絕對定位來實現這樣的效果。
這個方法存在另一個問題，就是側列#sidebar的背景無法百分之百。一般的解決辦法就是用body的背景色來填充滿。(不能使用#mainbox的背景色，因爲在Mozilla等瀏覽器中#mainbox的背景色失效。)
第11天:不用表格的菜單
佈局初步搭建起來，我開始填充裏面的內容。首先是定義logo圖片：
樣式表：#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
頁面代碼：<div id="logo"><a title="網頁設計師" href="http://www.w3cn.org/" ><img height="80" alt="鏈接到w3cn.org首頁" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>
以上代碼現在應該容易理解。先在CSS定義了一個logo的層，然後在頁面中調用它。需要說明的是，爲了使網頁有更好的易用性，web標準要求大家給所有的、屬於正式內容的圖片，加一個alt屬性。這個alt屬性是用來說明圖片的作用(當圖片不能顯示的時候就顯示替換文字)，所以不要只寫成無意義的圖片名稱。
接下來是定義菜單。
1.不用表格的菜單(縱向)
我們先來看菜單的最終效果：
通常方法我們至少嵌套2層表格來實現這樣的菜單，間隔線採用在td中設置背景色並插入1px高的透明GIF圖片實現；背景色的交替效果採用td的onmouseover事件實現。但查看本菜單的頁面代碼，你會看到只有如下幾句：
<div id="menu">
<ul>
<li><a title="網站標準" href="http://www.w3cn.org/webstandards.html">什麼是網站標準</a></li>
<li><a title="標準的好處" href="http://www.w3cn.org/benefits.html">使用標準的好處</a></li>
<li><a title="怎樣過渡" href="http://www.w3cn.org/howto.html">怎樣過渡</a></li>
<li><a title="相關教程" href="http://www.w3cn.org/tutorial.html">相關教程</a></li>
<li><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li>
<li><a title="資源及鏈接" href="http://www.w3cn.org/resources.html">資源及鏈接</a></li>
</ul>
</div>
沒有用任何table,而用的是無序列<li>，整個菜單的效果實現的祕密完全在於id="menu"，我們再來看CSS中關於menu的定義：
(1)首先定義了menu層的主要樣式:
#menu {
MARGIN: 15px 20px 0px 15px; /*定義層的外邊框距離*/
PADDING:15px; /*定義層的內邊框爲15px*/
BACKGROUND: #dfdfdf; /*定義背景顏色*/
COLOR: #666; /*定義字體顏色*/
BORDER:#fff 2px solid; /*定義邊框爲2px白色線條*/
WIDTH:160px; /*定義內容的寬度爲160px*/
}
(2)其次定義無序列表的樣式：
#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; /*不顯示邊框*/
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;
}
#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}
說明：這裏用的是id選擇器的派生方法定義(參考第7天：CSS入門的介紹)了在menu層中的子元素<ul>和<li>的樣式。LIST-STYLE-TYPE: none一句表示不採用無序列表的默認樣式，即：不顯示小圓點（我們後面用自己的圖標來代替小圓點）。BORDER-TOP: #FFF 1px solid;則定義了菜單之間的1px間隔線。
(3)定義onmouseover效果
#menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
解釋如下：
- "display:block;"表示將標籤a當作塊級元素來顯示，使得鏈接變成一個按鈕；
- "BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"這一句定義了替代li的小圓點的圖標。"transparent"指背景爲透明，"2px 8px"指定圖標的位置是距左邊2px，距上邊8px。這一句也可以拆分寫成四句："BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"
- "#menu li a:hover"定義了當鼠標移動到鏈接上以後的顏色變化和小圖標變化。
ok，不用表格的菜單就這樣實現了。大家可以明顯感覺到，原來寫在HTML裏的表現樣式全部剝離放到CSS文件裏去了。頁面代碼節約了大半。通過CSS要修改菜單樣式就很簡單了。
2.不用表格的菜單(橫向)
上面是縱向的菜單,如果要顯示橫向菜單，用li也可以嗎？當然是可以的，下面給出代碼，效果就在本頁頂部:
頁面代碼
<div id="submenu">
<ul>
<li id="one"><a title="首頁" href="http://www.w3cn.org/">Home</a></li>
<li id="two"><a title="關於我們" href="http://www.w3cn.org/aboutus.html">關於我們</a></li>
<li id="three"><a title="網站標準" href="http://www.w3cn.org/webstandards.html">網站標準</a></li>
<li id="four"><a title="標準的好處" href="http://www.w3cn.org/benefits.html">標準的好處</a></li>
<li id="five"><a title="怎樣過渡" href="http://www.w3cn.org/howto.html">怎樣過渡</a></li>
<li id="six"><a title="相關教程" href="http://www.w3cn.org/tutorial.html">相關教程</a></li>
<li id="seven"><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li>
<li id="eight"><a title="資源及鏈接" href="http://www.w3cn.org/resources.html">資源及鏈接</a></li>
<li id="nine"><a title="常見問題" href="http://www.w3cn.org/faq.html">常見問題</a></li>
</ul>
</div>
樣式表代碼
#submenu {
MARGIN: 0px 8px 0px 8px;
PADDING: 4px 0px 0px 0px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
HEIGHT:25px; }
#submenu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}
#submenu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}
#submenu li a {
DISPLAY: block;
PADDING:2px 3px 2px 3px;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#submenu li a:hover {
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
#submenu ul li#one A { WIDTH: 60px}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li#three A { WIDTH: 80px}
#submenu ul li#four A { WIDTH: 90px}
#submenu ul li#five A { WIDTH: 80px}
#submenu ul li#six A { WIDTH: 80px}
#submenu ul li#seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}
以上代碼不逐一分析了。橫向菜單的關鍵在於：定義<li>樣式時的"FLOAT: left;"語句。另外注意UL定義中的DISPLAY:inline;一句表示將li強制作爲內聯對象呈遞，從對象中刪除行，通俗講就是li不換行。實現橫向排列。你也可以象例子中定義每個子菜單的寬度，控制菜單的間隔。好了，你也可以動手試試，用li實現各種各樣的菜單樣式。
Tips:如果你子菜單的寬度總和大於層的寬度，菜單會自動折行，利用這個原理可以實現單個無序列表的2列或者3列排版，這是原來HTML很難實現的。
感謝zhuweiwei指出橫向菜單的bug，本文已修正。
第12天:校驗及常見錯誤
辛苦了好多天，我們努力學習使用XHTML+CSS來重新設計我們的網站。那麼我們如何知道自己製作的頁面真的符合web標準？W3C和一些志願者網站提供了在線校驗程序，來幫助我們檢查頁面是否符合標準，並提供了修正錯誤的幫助信息。這些校驗非常有用，是我調試頁面第一步要做的事情。
1.XHTML校驗
- 校驗網址：http://validator.w3.org/
- 校驗方式:網址校驗、文件上傳校驗
校驗成功，會顯示"This Page Is Valid XHTML 1.0 Transitional!",如圖：
校驗失敗，會顯示更多校驗選項和錯誤信息，如圖：
一般選擇"Show Source"和"Verbose Output"可以幫助你找到錯誤代碼所在行和錯誤原因。
XHTML校驗常見錯誤原因對照表
- No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。
- No Character Encoding Found! Falling back to UTF-8.--未定義語言編碼。
- end tag for "img" omitted, but OMITTAG NO was specified--圖片標籤沒有加"/"關閉。
- an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號。
- element "DIV" undefined---DIV標籤不能用大寫，要改成小寫div。
- required attribute "alt" not specified---圖片需要加alt屬性。
- required attribute "type" not specified---JS或者CSS調用的標籤漏了type屬性。
其中最最常見的錯誤就是標籤的大小寫問題了。通常這些錯誤都是關聯的，比如忘記了一個</li>其他<li>標籤都會報錯，所以不要看到一堆的錯誤害怕，通常解決了一個錯誤，其他的錯誤也都沒有了。如果你的頁面通過XHTML1.0校驗，可以在頁面上放置這麼一個圖標： 
代碼如下：
<p> <a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p>
2.CSS2校驗
- 校驗網址：http://jigsaw.w3.org/css-validator/
- 校驗方式:網址校驗、文件上傳校驗、直接貼入代碼校驗
校驗成功，會顯示"恭喜恭喜，此文檔已經通過樣式表校驗! ",hoho,校驗信息支持中文噢。如圖：
校驗失敗，會顯示兩類錯誤：錯誤和警告。錯誤表示一定要修正，否則無法通過校驗；警告表示有代碼不被W3C推薦,建議修改。
CSS2校驗常見錯誤原因對照表
- (錯誤)無效數字 : color909090 不是一個 color 值 : 909090 ---十六進制顏色值必須加"#"號，即#909090
- (錯誤)無效數字 : margin-topUnknown dimension : 6pixels ---pixels不是一個單位值，正確寫法6px
- (錯誤)屬性 scrollbar-face-color 不存在 : #eeeeee --- 定義滾動條顏色是非標準的屬性
- (錯誤)值 cursorhand不存在 : hand是非標準屬性值，修改爲cursor:pointer
- (警告)Line : 0 font-family: 建議你指定一個種類族科作爲最後的選擇 --W3C建議字體定義的時候，最後以一個類別的字體結束，例如"sans-serif"，以保證在不同操作系統下，網頁字體都能被顯示。
- (警告)Line : 0 can't find the warning message for otherprofile --表示在代碼中有非標準屬性或值，校驗程序無法判斷和提供相應的警告信息。
同樣，通過檢驗後，可以放置一個CSS校驗通過圖標，代碼如下：
<p> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p>