網頁制作是中職學校計算機專業必不可少的一門課程。中職學生基礎學科知識比較薄弱，他們在剛學會使用Table對網頁排版，又接觸到CSS+DIV的時候，都會提出一個問題，“表格那么簡單，為什么還要再學習復雜的CSS+DIV呢？”

首先我們可以明確一點，目前相當一部分主流網站都逐漸的拋棄了傳統的Table排版，轉而采用CSS+DIV技術進行網站制作。只有讓學生自己動手，有了切身體會，才能更好的理解CSS+DIV和Table排版在網頁制作中的差異。

1、CSS+DIV對基礎薄弱的中職學生并不友好

Table排版首先要在網頁的BODY里面插入一個大的表格，然后這個大表格里面插入的頭部表格、中部表格和尾部表格，接著頭部表格里面再插入LOGO標志表格和內容表格，中部表格和尾部表格做法也是大同小異。

這種做法雖然相對于中職學生來說很簡單，容易理解，但是對于客戶來說，卻是往往意味著災難。訪問打開速度慢是這種網頁的最致命弱點。在教學中，我們可以限制網絡的速度，讓打開瀏覽該網站的時候，瀏覽器首先需要把BODY中大表格里面所有的內容加載完成。換個角度來說，其實就是讓瀏覽器等網站Table里面所有的內容加載完，學生才能看到網頁的內容。在漫長的等待過程中，觀看的學生會產生煩躁不安的情緒。讓他們體會到使用Table制作的網站，會讓用戶對公司產生不信任感。

2、把CSS+DIV形式和內容進行分離

學生在使用傳統Table布局制作網頁的階段，我們可以讓學生自行統計使用Table的數量。一個頁面里有10個以上的Table是非常普遍的事情，有時候內容多的話，一個網頁就能達到30-40KB左右。瀏覽器在打開文件的時候，必然會出現一定的延遲。

而在學習CSS+DIV布局制作網站的過程中，我們可以把學生分成兩個大組。網頁的美工部分交由“CSS組”負責，而“網頁前臺組”只需要顯示內容就可以了。學生不用再使用Table嵌套Table，而只需要用DIV套DIV，就可以實現以往Table嵌套Table的所有美工。這樣做的好處就是使用CSS+DIV技術生成的網頁文件更小更精簡。CSS文都是導入鏈接的另一個文件，和HTML文件大小沒有任何關系，這樣生成的HTML文件充其量也只有10KB左右大小。文件數量比較少的時候，學生可能還看不出來差別在哪里，但是當網站文件達到萬級以上時，學生還是可以看到，容量已經節約出幾十MB。

這就直接導致網頁文件大小比使用Table時減少50%-80%，更節約我們所租用的網站空間，學生打開網頁時更快，在前臺打開看到的全部都是最直接的內容。而且用CSS+DIV時，不像以往使用Table時，必須把頁面內的全部Table讀取完了才開始顯示頁面內容。CSS+DIV布局在BODY里面一個個插入DIV，頭部一個DIV，頸部一個DIV，以此類推。當學生使用瀏覽器打開網站的時候，這幾個DIV會按照網頁加載的速度，依次迅速的顯示出來給，不需要等待就立刻能夠看到網頁頭部的內容，然后是頸部等。瀏覽器讀一個DIV就立刻顯示出一個效果，學生打開網頁幾乎沒有等待時間。

3、在需要對網站進行改版的時候，變得更加簡單和容易了。

科技不斷發展，網站的瀏覽用戶從普通臺式機轉移到今天的各種手機和平板。因此標準化的網頁制作將可以讓網站最大限度的符合客戶體驗需求。注重客戶體驗，這無疑也是很重要的一點。通過標準化的網頁制作，人們可以通過樣式的選擇使網站符合自己的閱讀習慣和閱讀喜好，極大的提升網站的易用性。

在網站制作好以后，我們可以要求學生按照一定的標準，對自己的網站進行改版。

學生會發現使用Table布局的網頁，每一頁都需要重新寫版式代碼。如果需要對整個網站進行修改和維護，那么每一個頁面都等于需要重寫，工作量十分巨大。而使用CSS+DIV布局，學生在制作時要實現比較精確和自適應的層布局，需要設置層的樣式，即用CSS控制層的位置。CSS+DIV布局采用DIV來定位，通過DIV的margin邊界、padding填充、border邊框和Float浮動等屬性來控制模塊和模塊之間的間距。具體做法，是通過創建DIV標簽，并對其應用CSS，通過CSS+DIV，把網頁的模板和代碼進行了分離。

4、減少了網頁中的大量冗余代碼索引擎更友好，搜索引擎排名更容易靠前。

國外一位網頁制作的高手曾經說過：“網頁要小，最小，10K，5K...越少的代碼，決定了越快的速度?！币话銇碚f，使用Table排版網頁，網頁中將充斥著大量的<table>、<tr>和<td>等代碼，這樣會讓整個網頁變得臃腫不已。使用Table架構描述的頁面，樣式結構和內容信息大小比可能達到一比一，有時甚至可能會比這個還要更高。

然而，搜索引擎（如百度爬蟲）不會在意一個頁面的設計或者構成。爬蟲們不會花時間去“欣賞”設計漂亮新穎的頁面，也不會“排斥”顏色搭配丑陋的頁面。它們只是默默地收取它們需要的內容，然后就離開。如果一個頁面中包含了大量的<table>來描述架構，試想搜索引擎要花多大的代價才可以拿到真正有用的信息呢。爬蟲在訪問我們的網站過程中，會讀取得異常艱難，因為這些代碼對于爬蟲來說都是完全沒有作用的。當它需要花費很多時間才能在一大堆對于它來說沒有用的代碼，才能找到我們的網站所要表達信息的時候，網站也就失去了爬蟲的青睞。在這個網站競爭激烈、同質化日趨嚴重、大家都依賴搜索引擎排名的今天，這樣的結果無異于是毀滅性的。

通過以上的教學和對比，學生就能夠充分體會到設計制作網站中使用CSS+DIV和Table的差異，讓他們更加明白在強調用戶體驗，要求網站符合搜索引擎爬蟲需要的今天，要重視網站制作的標準化。它可以提升客戶閱讀網站時候的舒適性，增加用戶對網站好感，便捷易用，同時更符合的搜索引擎的需求。

作者簡介：黃志鵬（1982.10），男，漢，廣東湛江，本科，高級講師，計算機。