學習用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中文參考：

  HTML和XHTML常見問答：

  有英文基礎的可以檢視這些頁面：

  XHTML™ basic：

  XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)：

  XHTML™ 1.1 - Module-based XHTML：

  XHTML™ 2.0：

  對于有html基礎的朋友，推薦這篇阿捷寫的文章：

  循序漸進學習Xhtml+CSS2：

  通過一步步的逐漸由不夠規範的html轉變到Xhtml

  對于有html及PHP語言基礎的朋友，這裡推薦一個快速搞定Xhtml的方法：