學慣用Xhtml+CSS2構建網頁

第一篇：喜新厭舊，逐步習慣Xhtml+CSS2的布局方式

近來有很多網站用Xhtml1.0標準將網站重構，其中包括yahoo，163，CSDN等這些大站。近來一段時間Xhtml+CSS2的熱潮更是一浪高過一浪，所以偶也開始學起了，慢慢的就愛上她們了，頁面構建技術就是若干MM，我們也要來個喜新厭舊。

一、為什麼要學Xhtml+CSS2

  首先，標準的代碼便於網頁在各種瀏覽器中的順利顯示。
  一些不規範代碼的網頁在IE下能正常顯示的，在Firefox和Opera上可能就無法正常顯示。在這一點上我們不得不說IE相比之下更有包容之心，雖然現在瀏覽器的主流是IE以及以IE為核心的各種瀏覽器，但我們同樣無法忽視Firefox、Opera等瀏覽器在逐漸增大的使用者群，而這些人群多是對電腦較為精通的老鳥，被他們罵自己網站太垃圾的話我想滋味應該不好受，呵呵。
  當然這也不是說使用table等做的網頁就不符合標準（使用table帶來的一些弊端下面也要談到），只是當前不少人習慣用先用Photoshop（以下簡寫為PS）設計平面圖，之後用Fireworks（以下簡寫為FW）或Imageready（以下簡寫為IR）做切割，之後在Dreamweaver（以下簡寫為DW）或是Forntpage（以下簡寫為FP）來產生html，這些可視化的軟體固然方便，但由此帶來的問題也是多多，這些軟體多多少少會自動增減一些代碼，如果沒有查看代碼的習慣，很容易導致一些不規範代碼的產生。，由於使用FW或IR做出的切片一般對圖片的特徵無法做出直觀的描述，所以這樣做出的html給以後的維護也帶來了麻煩。

  其次，Xhtml + CSS2使頁面配置更加簡單
  假如之前對頁面進行布局或設定了一些相對複雜效果的話，通常的做法是採用大量的表格嵌套對一個頁面進行布局，用儲存格來描述地區，這樣在WYSIWYG等軟體中倒是比較直觀，但這樣影響的有幾個方面，首先影響下載速度，因為table的顯示不像DIV一樣，table在瀏覽器中的顯示是需要全部下載之後才能顯示，所以會影響下載速度；其次對於手寫代碼來講，這樣的結構非常不直觀，大堆的表格嵌套可能讓習慣手寫代碼的設計師感覺頭暈；另外，還可能牽扯到一個地方就是儲存格的合并，假如你不小心搞錯了一個colspan=”？”，那麼整個頁面的布局將面目全非。
  而用CSS做布局，就像是在PS中對圖層進行操作一樣，利用CSS中相對和絕對的概念，整個頁面的布局就輕鬆和方便多了

  此外，Xhtml可以減小網頁檔案體積
  使用Xhtml+CSS2構建網頁其實一個很重要的目的就是提高瀏覽速度，雖說現在網速越來越大了，但誰不想自己的網站速度更快呢，有人還曾經說“世上最遠的距離不是地球到太陽，而是中國電信到中國網通”，如果你在電信伺服器上的網站被網通線路的使用者瀏覽，網頁檔案大小勢必也會影響瀏覽者的感受。而採用Xhtml來構建網頁則利於你解決這個問題，經過筆者測試，實現同樣的，使用Xhtml構建的網頁比使用傳統table方式構建的頁面體積減小1/2左右。相信很多人會喜歡身材苗條的MM，呵呵

  二、不同層次的學習者如何快速入門

  感受了以上幾點，我開始逐漸習慣使用Xhtml+CSS2來構建網站，那麼談了這麼多，究竟從哪裡入門呢？這裡，對於不同的人群，我建議以下幾種方法快速入門：

  對於html及css完全不瞭解的新手：首先建議你還是學習以下html，因為它當對簡單一些，更易於入門，熟悉了一些html的基本文法之後，開始學習Xhtml的一些規範寫法，這裡推薦一些學習資料：
  Xhtml中文參考：
  http://www.standme.com/Xhtml.htm
  HTML和XHTML常見問答：
  http://www.transwiki.org/cn/xhtmlfaq.htm
  有英文基礎的可以查看這些頁面：
  XHTML basic：
  http://www.w3.org/TR/xhtml-basic/
  XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)：
  http://www.w3.org/TR/xhtml1/
  XHTML 1.1 - Module-based XHTML：
  http://www.w3.org/TR/xhtml11/
  XHTML 2.0：
  http://www.w3.org/TR/xhtml2/

  對於有html基礎的朋友，推薦這篇阿捷寫的文章：
  循序漸進學習Xhtml+CSS2：
  http://www.w3cn.org/article/step/index.html
  通過一步步的逐漸由不夠規範的html轉變到Xhtml

  對於有html及PHP語言基礎的朋友，這裡推薦一個快速搞定Xhtml的方法：
  安裝一個Wordpress，官方網站：www.wordpress.org，當前最新版本是1.5.2，之後用最短的時間熟悉wordpress的模板系統，改動以下wordpress的模板算是熟悉一下DIV和CSS2的感覺，之後找一個不錯的頁面，將wordpress的模板改成與之相同的。最後一步則是按照自己所學到的Xhtml+CSS2的知識做一套wordpress的模板出來，經過這三步，我想你的Xhtml+CSS2算是真正入門了。