轉帖自： http://www.lenvo.cn/post/235.html
[雜談一]剛剛起步的學習——
最初接觸網站製作是2002年學校開的一門Frontpage2000的課程，幾乎已經忘記當時是怎麼去做的一個主頁。大概是先用word畫了一個很簡單的圖，然後再Frontpage裏面通過鼠標點擊插入圖片、插入按鈕、然後寫上字。簡單的幾個頁面就完成了。除了輸入幾乎全是鼠標作業。佈局似乎也很簡單，就是想畫圖一樣，上面一塊左面一塊右面一塊。根本沒有了解什麼是代碼，只知道html、head、body幾個標籤似乎是必不可少的。當然，這個存在1.44M軟盤的作品不久以後就消失得無影無蹤了。
第二次接觸網頁製作是04年底，那個時候我從一家國內最大的網站被解僱出來。想做一個校友錄，最初是用Photoshop畫圖照着教程在Dreamwaver裏面插入圖片，開始複雜的鼠標點擊操作。最終不了了之，不過隨即發現了幾個好網站，織夢的Firewoks教程吸引了我，隨後在其友情鏈接裏面發現了一個零點論壇和經典論壇。學習的全部是Fireworks特效，比如水印文字、88*31pxLogo製作等。
第三次就是在05年4月了，在崑山幫朋友組建起一個五個人設計製作團隊，辦公地點租賃、設備採購、人員招聘。並且從事很大一部份的美工工作。發現了很多不足，美工本身的活做得粗。但是發現我們的一個員工他做網站很少在設計界面，而是在代碼界面刪除、複製粘貼。然後便跟他學習到了table的嵌套。頁面分幾部分，幾行幾列先寫一個大的table然後用rowspan和colspan合併單元格，也能通過對單元格添加width和height控制大小。大約三個月後，基本上熟悉了表格的屬性，這個時候因爲業務來源中斷不得已解散團隊，其間完成了崑山幾個企業網站的單子，錢沒賺到多少。但算是第一次創業吧。
憑着在崑山學習到的table多少有些自信的來到現在的公司。開始無窮盡table嵌套，而且基本上拋棄設計界面全部手寫代碼了。這個時候發現一個最大的問題，那就是如果要改動佈局整個外層的table需要重新寫，單元格需要重新組合改變。勞動量太大了。最先接觸到標準化大約是2月份，論壇關於《網站重構》的討論吸引了我的注意。隨後第一個全是
第二次接觸網頁製作是04年底，那個時候我從一家國內最大的網站被解僱出來。想做一個校友錄，最初是用Photoshop畫圖照着教程在Dreamwaver裏面插入圖片，開始複雜的鼠標點擊操作。最終不了了之，不過隨即發現了幾個好網站，織夢的Firewoks教程吸引了我，隨後在其友情鏈接裏面發現了一個零點論壇和經典論壇。學習的全部是Fireworks特效，比如水印文字、88*31pxLogo製作等。
第三次就是在05年4月了，在崑山幫朋友組建起一個五個人設計製作團隊，辦公地點租賃、設備採購、人員招聘。並且從事很大一部份的美工工作。發現了很多不足，美工本身的活做得粗。但是發現我們的一個員工他做網站很少在設計界面，而是在代碼界面刪除、複製粘貼。然後便跟他學習到了table的嵌套。頁面分幾部分，幾行幾列先寫一個大的table然後用rowspan和colspan合併單元格，也能通過對單元格添加width和height控制大小。大約三個月後，基本上熟悉了表格的屬性，這個時候因爲業務來源中斷不得已解散團隊，其間完成了崑山幾個企業網站的單子，錢沒賺到多少。但算是第一次創業吧。
憑着在崑山學習到的table多少有些自信的來到現在的公司。開始無窮盡table嵌套，而且基本上拋棄設計界面全部手寫代碼了。這個時候發現一個最大的問題，那就是如果要改動佈局整個外層的table需要重新寫，單元格需要重新組合改變。勞動量太大了。最先接觸到標準化大約是2月份，論壇關於《網站重構》的討論吸引了我的注意。隨後第一個全是
的頁面得到了老闆的鼓勵，然後開始買書、學習、翻標準化版的老貼（原網站設計綜合版）。
[雜談二]我理解的標準化——
首先說明，這些只是我個人的理解，用一些通俗並且零亂的文字表述出來。層次很低，錯誤是肯定存在的。請看到的朋友不要拿來當學習教材，並請指出錯誤共同進步。
我理解的標準化有三個要點
1、改變傳統的佈局
《html和xhtml權威指南》第“636頁 div.../div 在文檔內創建一個部分”，第656頁 “table.../table定義一個表格”table 英文解釋爲桌子, 餐桌, 工作臺, 平地層, 石板, 表格。很明顯在html裏面我們取的是表格這個含義,顯示tabluar data表格數據的。div(即dvisition)英文解釋爲分（開），分裂，區域，選區，部分，部門。我們要的是區域、部分這個含義。從英文單詞本身div(division)正是我們去描述一個頁面佈局裏所說的這部分，那部分。在我的理解，傳統的佈局特點就是整個網頁是一個大的table,然後這個table的td裏面又嵌入N多層table，除了table、tr、td似乎很難找出其他的標籤來。而標準化推薦用div來佈局。即把頁面用div來劃分幾個部分。div除了默認的塊狀元素換行，沒有定位和佈局信息包含在div本身。而table不同，tr和td本身就有着行和列的定義，瀏覽器能接受的。而div只是定義一個部分，它需要css來協助定位，這部分float:left,那部分position:obsevl;top:200px;right:10px;一個簡單的示例:
用table實現上圖的佈局
2、頁面代碼結構化、語義化
我所理解的結構化就是把所有內容部分拿掉，只剩下所有的html或者xhtml標籤時，能清晰地看到頁面結構。上面的簡單示例也說明了這一點。
關於語義：不用去看代碼的顯示效果，我們能讀懂這個頁面有些什麼內容。一個人都能容易讀懂的東西機器是不是更容易接受呢？我們閱讀的過程模擬了瀏覽器的解析過程。語義化的意義就是能讓瀏覽器能準確的瞭解頁面認知頁面,有利於搜索引擎分析頁面結構。語義話不是對用戶來說的，他們不會去看代碼的。而是對瀏覽器而言的。瀏覽器對代碼的認識是已經定義好了的，我們儘可能的去用它能認知的標籤。比如對聽覺障礙的朋友，我們儘可能去用手語和肢體語言表達，當然前提是他學習過手語。一個沒有學習過手語的朋友，就如老版本的瀏覽器不得不被我們拋棄，當然是在做過一些努力（Csshack）之後了。用合適的表達方式面對表達的對象。用合適的標籤向瀏覽器表達合適的內容。
3、表現與結構分離
這是標準化的重點所在。css和xhtml（注意是xhtml而不是div）分別擔當了表現和結構兩個同一層次的角色。標準化中還有一個和表現、結構並列的元素行爲。我們能看到的分離就是儘可能不要把style寫在xhtml裏面，而是獨立寫在css文件或者style中間。舉個通俗似乎並不恰當的例子，人體的結構是已經固定了的（當然你可以做個手術把腳丫子接到腦袋上，嘿嘿），扒掉全部衣服人都一樣，腦袋、軀幹、四肢。頭髮拔了不好先留着。膚色、髮型、臉型、身高等等這些可以理解爲瀏覽器默認那些表現的東西，你可以通過手術、護膚、理髮師這些（CSS）去改變這些默認的表現。而穿上衣服（CSS）看上去人和人就很不同了。我想沒有誰願意把衣服（表現/CSS）用哥倆好粘在身上（結構/xhtml）吧，於是衣服（表現/css）的設計必須能脫下來能換能改，今天穿綠色的戴紅帽子明天穿紅衣服戴綠帽子（哈哈），這就是頁面的換膚技術。僅僅是換衣服換帽子當然很方便了，但是如果衣服粘在身上，那就得用畫筆描衣服顏色，肯定了很麻煩，弄不好還傷身體。不恰當例子說完了。事實上我就是這樣理解表現與結構分離的。
4、div+css是什麼東西？
我覺得這個說法最初的意圖是表達標準化佈局的，用div和css來進行網頁佈局。論壇裏很多朋友用這個來描述和理解標準化是一個誤區。而且在《CSS網站佈局實錄》裏也出現過這樣的問題。這是一個誤區。首先div和css不是一個層次上的東西不能夠相提並論。div只是xhtml衆多表淺中的一個，而css是和xhtml同一層次分別實現表現和結構的。簡單的說div代表不了xhtml。在這個問題上容易產生誤解，尤其是對新接觸標準化的朋友來說，最常見的錯誤就是整個頁面全是div而忽略和冷落了xhtml那麼多其他的標籤，違背了標準化關於語義化的定義。
當然說div+css來進行網頁佈局就沒問題了。
5其他
這些都是我個人站在一個最低層次對標準化的理解，遠遠不到標準化和網站重構真正的意圖。至於可訪問性基礎、向後兼容、多種平臺兼容以及向xml過渡這些都屬於高層次的理解。就不敢寫出來讓人笑話，其實更怕是誤導看到這些零亂文字的朋友了。
我理解的標準化有三個要點
1、改變傳統的佈局
《html和xhtml權威指南》第“636頁 div.../div 在文檔內創建一個部分”，第656頁 “table.../table定義一個表格”table 英文解釋爲桌子, 餐桌, 工作臺, 平地層, 石板, 表格。很明顯在html裏面我們取的是表格這個含義,顯示tabluar data表格數據的。div(即dvisition)英文解釋爲分（開），分裂，區域，選區，部分，部門。我們要的是區域、部分這個含義。從英文單詞本身div(division)正是我們去描述一個頁面佈局裏所說的這部分，那部分。在我的理解，傳統的佈局特點就是整個網頁是一個大的table,然後這個table的td裏面又嵌入N多層table，除了table、tr、td似乎很難找出其他的標籤來。而標準化推薦用div來佈局。即把頁面用div來劃分幾個部分。div除了默認的塊狀元素換行，沒有定位和佈局信息包含在div本身。而table不同，tr和td本身就有着行和列的定義，瀏覽器能接受的。而div只是定義一個部分，它需要css來協助定位，這部分float:left,那部分position:obsevl;top:200px;right:10px;一個簡單的示例:
用table實現上圖的佈局
<table>
<tr>
<td id="head" colspan="2"></td>
</tr>
<tr>
<td id="side"></td>
<td id="main"></td>
</tr>
<tr>
<td id="foot" colspan="2"></td>
</tr>
</table>
<div id="head"></div>
<div id="side"></div>
<div id="main"></div>
<div id="foot"></div>
2、頁面代碼結構化、語義化
我所理解的結構化就是把所有內容部分拿掉，只剩下所有的html或者xhtml標籤時，能清晰地看到頁面結構。上面的簡單示例也說明了這一點。
<div>
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h3><h3>
<table>
<th>
<td></td>
<td></td>
</th>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
<div>
<h3></h3>
<p></p>
</div>
關於語義：不用去看代碼的顯示效果，我們能讀懂這個頁面有些什麼內容。一個人都能容易讀懂的東西機器是不是更容易接受呢？我們閱讀的過程模擬了瀏覽器的解析過程。語義化的意義就是能讓瀏覽器能準確的瞭解頁面認知頁面,有利於搜索引擎分析頁面結構。語義話不是對用戶來說的，他們不會去看代碼的。而是對瀏覽器而言的。瀏覽器對代碼的認識是已經定義好了的，我們儘可能的去用它能認知的標籤。比如對聽覺障礙的朋友，我們儘可能去用手語和肢體語言表達，當然前提是他學習過手語。一個沒有學習過手語的朋友，就如老版本的瀏覽器不得不被我們拋棄，當然是在做過一些努力（Csshack）之後了。用合適的表達方式面對表達的對象。用合適的標籤向瀏覽器表達合適的內容。
3、表現與結構分離
這是標準化的重點所在。css和xhtml（注意是xhtml而不是div）分別擔當了表現和結構兩個同一層次的角色。標準化中還有一個和表現、結構並列的元素行爲。我們能看到的分離就是儘可能不要把style寫在xhtml裏面，而是獨立寫在css文件或者style中間。舉個通俗似乎並不恰當的例子，人體的結構是已經固定了的（當然你可以做個手術把腳丫子接到腦袋上，嘿嘿），扒掉全部衣服人都一樣，腦袋、軀幹、四肢。頭髮拔了不好先留着。膚色、髮型、臉型、身高等等這些可以理解爲瀏覽器默認那些表現的東西，你可以通過手術、護膚、理髮師這些（CSS）去改變這些默認的表現。而穿上衣服（CSS）看上去人和人就很不同了。我想沒有誰願意把衣服（表現/CSS）用哥倆好粘在身上（結構/xhtml）吧，於是衣服（表現/css）的設計必須能脫下來能換能改，今天穿綠色的戴紅帽子明天穿紅衣服戴綠帽子（哈哈），這就是頁面的換膚技術。僅僅是換衣服換帽子當然很方便了，但是如果衣服粘在身上，那就得用畫筆描衣服顏色，肯定了很麻煩，弄不好還傷身體。不恰當例子說完了。事實上我就是這樣理解表現與結構分離的。
4、div+css是什麼東西？
我覺得這個說法最初的意圖是表達標準化佈局的，用div和css來進行網頁佈局。論壇裏很多朋友用這個來描述和理解標準化是一個誤區。而且在《CSS網站佈局實錄》裏也出現過這樣的問題。這是一個誤區。首先div和css不是一個層次上的東西不能夠相提並論。div只是xhtml衆多表淺中的一個，而css是和xhtml同一層次分別實現表現和結構的。簡單的說div代表不了xhtml。在這個問題上容易產生誤解，尤其是對新接觸標準化的朋友來說，最常見的錯誤就是整個頁面全是div而忽略和冷落了xhtml那麼多其他的標籤，違背了標準化關於語義化的定義。
當然說div+css來進行網頁佈局就沒問題了。
5其他
這些都是我個人站在一個最低層次對標準化的理解，遠遠不到標準化和網站重構真正的意圖。至於可訪問性基礎、向後兼容、多種平臺兼容以及向xml過渡這些都屬於高層次的理解。就不敢寫出來讓人笑話，其實更怕是誤導看到這些零亂文字的朋友了。
[雜談三]如何學習標準化——
二、如何學習標準化
1、幾本書、幾個網站、幾篇貼子、幾個blog
《網站重構》掀起國內web標準熱潮的第一本相關著作。理論性質多一些，全書涉及到具體操作和代碼的部分很少。新手初次閱讀很可能覺得沒有實際用途。建議在閱讀學習《CSS網站佈局實錄》有了一定的技術基礎了再回頭學習，反思自己之前學習和設計過程中的問題，這樣纔能有效地提高。
《樣式表中文手冊》必備的工具，我一般放在桌面隨時查詢。裏面提供了詳細的使用說明和實例。
《CSS網站佈局實錄》較新的一本標準化著作。告訴你怎麼去寫符合標準的xhtml和css代碼，告訴你一些常見佈局和頁面效果的代碼是什麼樣子。這本書很適合初學者，基本上都是針對實例的佈局、效果的實際操作，比較系統的講述瞭如何進行標準化網站製作。這本書只是在講具體的實現，關於標準化的概念、網站重構的目標這些指導實際操作的理念性東西幾乎沒有。可以在學習這本書之後讀一下《網站重構》，二者結合起來學習效果不錯。目前的版本可能因爲時間問題，校對很倉促，有不少錯別字和有問題的句子沒，但涉及到代碼到沒有發現錯誤。
《CSS權威指南》詳細闡述CSS1.0每個屬性的規則和定義，並且展望了CSS2.0許多誘人的東西。對實現web標準化有着重要的意義。通過本書的學習可以深入理解瀏覽器如何解析屬性的規則和定義，爲準確實現設計意圖提供保障。
《html和xhtml權威指南》應該是一本權威的工具書，沒有必要通讀，可以在實際設計製作過程中參考。詳細的講述了html和xhtml的規則定義使用技巧。
《javascript權威指南》作爲行爲層的主要技術，不學習javascript就不能完整地學習web標準。
網站設計師 最初接觸web標準化學習必須訪問並且認真閱讀的網站。包含教程、資訊、參考資料等重要信息。
藍色理想標準化專版 這個不用說吧，對幾位版主熱心勤勞在此致敬。不少牛人潛水與此。但近期的學習氛圍略顯浮躁，沒有深入理解停留在css表現層次的朋友較多。
CSSer.org 這個網站不知道怎麼關掉了……有段時間不去看了，等待站長再次開放吧。
網易 作爲門戶網站裏較早採用web標準的站點之一，其最新版本很值得研究。
CSS入門教程http://bbs.blueidea.com/thread-2525023-1-1.html
新手入門http://bbs.blueidea.com/thread-2304671-1-1.html
下面是一些web標準屆牛人朋友的blog，跟着他們能學習很多，而且通過blog這樣親切的形式學習效果應該很好。建議靜心閱讀他們的系列教程。
http://www.realazy.org/blog/
http://www.andymao.com/andy/
http://old9.blogsome.com/
http://www.greengnn.com/
http://blog.pr1984.com/
http://www.loaoao.com/
2、如何學習
1、讀寫 讀書讀上面我推薦的貼子、網站和blog。互聯網的宗旨在於共享和傳播，那些接觸技術比較早的理解和實踐比較深入的朋友給我們提供經驗和教程。要靜下心來，不能僅僅爲了一個效果或者一個佈局的實現去找答案。而是去理解教程給我們帶來的實現思路。要系統地讀書也要針對性的蒐集某個問題的方法去總結提取。讀到的時候就要寫，寫一些代碼片斷，一些佈局結構，一些效果的實現。哪怕是照着書敲出代碼來，加深記憶和理解，效果要比單純的度過效果要好得多。
2、改動 改，不是抄襲。把別人的網站另存下來，改動其中的部分內容，看看頁面顯示有什麼變化，在這些變化中去理解你所改動部分代碼再實現頁面效果中起到了什麼作用。這是一個很重要的學習方法。你看到的效果變化來源於你的改動，這本身就是一個加深記憶和理解的過程。另外一種改法就是把複雜的頁面簡單化，簡單到能演示效果爲主，代碼少了看起來清晰有利於學習。或者把簡單的佈局填充內容之後看頁面怎麼顯示，會不會影響到佈局，自適應的還是固定大小的，超出固定大小的內容hidden了還是流向了結構之外？有沒有什麼Bug？青蛙用永遠逮不到一個安安靜靜站在那裏的蜻蜓，只有蜻蜓飛起來了青蛙才能判斷才能捕食。
3、睡覺 睡覺前的思考。在顯示器之外去思考之前學習到的東西，要有一定的距離和空間高度去看待去思考，比如今天寫的佈局是不是合理，有沒有必要這樣複雜，如果把浮動改成絕對定位呢。等等，就像作平面設計一樣，有時候椅子往後一仰，稍稍的遠離屏幕，對之前的細節處理就能有一個全新的認識。
4、收藏 好記性不如爛筆頭，總去發帖提問也不是辦法。把看到的有用的教程收集起來分類整理，比如佈局代碼、導航特效、瀏覽器兼容hack寫法等等。建立自己的文檔庫，時間久了整理整理，如果有合適的條件不要忘記和朋友們分享。
5、實踐 作一個完整的網站/網頁項目，未必要複雜或者龐大。但至少要有一個完整的頁面，儘可能用熟悉的技術去實現。檢驗自己、發現問題給自己繼續學習的動力。
1、幾本書、幾個網站、幾篇貼子、幾個blog
《網站重構》掀起國內web標準熱潮的第一本相關著作。理論性質多一些，全書涉及到具體操作和代碼的部分很少。新手初次閱讀很可能覺得沒有實際用途。建議在閱讀學習《CSS網站佈局實錄》有了一定的技術基礎了再回頭學習，反思自己之前學習和設計過程中的問題，這樣纔能有效地提高。
《樣式表中文手冊》必備的工具，我一般放在桌面隨時查詢。裏面提供了詳細的使用說明和實例。
《CSS網站佈局實錄》較新的一本標準化著作。告訴你怎麼去寫符合標準的xhtml和css代碼，告訴你一些常見佈局和頁面效果的代碼是什麼樣子。這本書很適合初學者，基本上都是針對實例的佈局、效果的實際操作，比較系統的講述瞭如何進行標準化網站製作。這本書只是在講具體的實現，關於標準化的概念、網站重構的目標這些指導實際操作的理念性東西幾乎沒有。可以在學習這本書之後讀一下《網站重構》，二者結合起來學習效果不錯。目前的版本可能因爲時間問題，校對很倉促，有不少錯別字和有問題的句子沒，但涉及到代碼到沒有發現錯誤。
《CSS權威指南》詳細闡述CSS1.0每個屬性的規則和定義，並且展望了CSS2.0許多誘人的東西。對實現web標準化有着重要的意義。通過本書的學習可以深入理解瀏覽器如何解析屬性的規則和定義，爲準確實現設計意圖提供保障。
《html和xhtml權威指南》應該是一本權威的工具書，沒有必要通讀，可以在實際設計製作過程中參考。詳細的講述了html和xhtml的規則定義使用技巧。
《javascript權威指南》作爲行爲層的主要技術，不學習javascript就不能完整地學習web標準。
網站設計師 最初接觸web標準化學習必須訪問並且認真閱讀的網站。包含教程、資訊、參考資料等重要信息。
藍色理想標準化專版 這個不用說吧，對幾位版主熱心勤勞在此致敬。不少牛人潛水與此。但近期的學習氛圍略顯浮躁，沒有深入理解停留在css表現層次的朋友較多。
CSSer.org 這個網站不知道怎麼關掉了……有段時間不去看了，等待站長再次開放吧。
網易 作爲門戶網站裏較早採用web標準的站點之一，其最新版本很值得研究。
CSS入門教程http://bbs.blueidea.com/thread-2525023-1-1.html
新手入門http://bbs.blueidea.com/thread-2304671-1-1.html
下面是一些web標準屆牛人朋友的blog，跟着他們能學習很多，而且通過blog這樣親切的形式學習效果應該很好。建議靜心閱讀他們的系列教程。
http://www.realazy.org/blog/
http://www.andymao.com/andy/
http://old9.blogsome.com/
http://www.greengnn.com/
http://blog.pr1984.com/
http://www.loaoao.com/
2、如何學習
1、讀寫 讀書讀上面我推薦的貼子、網站和blog。互聯網的宗旨在於共享和傳播，那些接觸技術比較早的理解和實踐比較深入的朋友給我們提供經驗和教程。要靜下心來，不能僅僅爲了一個效果或者一個佈局的實現去找答案。而是去理解教程給我們帶來的實現思路。要系統地讀書也要針對性的蒐集某個問題的方法去總結提取。讀到的時候就要寫，寫一些代碼片斷，一些佈局結構，一些效果的實現。哪怕是照着書敲出代碼來，加深記憶和理解，效果要比單純的度過效果要好得多。
2、改動 改，不是抄襲。把別人的網站另存下來，改動其中的部分內容，看看頁面顯示有什麼變化，在這些變化中去理解你所改動部分代碼再實現頁面效果中起到了什麼作用。這是一個很重要的學習方法。你看到的效果變化來源於你的改動，這本身就是一個加深記憶和理解的過程。另外一種改法就是把複雜的頁面簡單化，簡單到能演示效果爲主，代碼少了看起來清晰有利於學習。或者把簡單的佈局填充內容之後看頁面怎麼顯示，會不會影響到佈局，自適應的還是固定大小的，超出固定大小的內容hidden了還是流向了結構之外？有沒有什麼Bug？青蛙用永遠逮不到一個安安靜靜站在那裏的蜻蜓，只有蜻蜓飛起來了青蛙才能判斷才能捕食。
3、睡覺 睡覺前的思考。在顯示器之外去思考之前學習到的東西，要有一定的距離和空間高度去看待去思考，比如今天寫的佈局是不是合理，有沒有必要這樣複雜，如果把浮動改成絕對定位呢。等等，就像作平面設計一樣，有時候椅子往後一仰，稍稍的遠離屏幕，對之前的細節處理就能有一個全新的認識。
4、收藏 好記性不如爛筆頭，總去發帖提問也不是辦法。把看到的有用的教程收集起來分類整理，比如佈局代碼、導航特效、瀏覽器兼容hack寫法等等。建立自己的文檔庫，時間久了整理整理，如果有合適的條件不要忘記和朋友們分享。
5、實踐 作一個完整的網站/網頁項目，未必要複雜或者龐大。但至少要有一個完整的頁面，儘可能用熟悉的技術去實現。檢驗自己、發現問題給自己繼續學習的動力。