網(wǎng)頁(yè)制作CSS+DIV與Table排版的教與學(xué)

網(wǎng)頁(yè)制作是中職學(xué)校計(jì)算機(jī)專業(yè)必不可少的一門課程。中職學(xué)生基礎(chǔ)學(xué)科知識(shí)比較薄弱，他們?cè)趧倢W(xué)會(huì)使用Table對(duì)網(wǎng)頁(yè)排版，又接觸到CSS+DIV的時(shí)候，都會(huì)提出一個(gè)問(wèn)題，“表格那么簡(jiǎn)單，為什么還要再學(xué)習(xí)復(fù)雜的CSS+DIV呢？”

首先我們可以明確一點(diǎn)，目前相當(dāng)一部分主流網(wǎng)站都逐漸的拋棄了傳統(tǒng)的Table排版，轉(zhuǎn)而采用CSS+DIV技術(shù)進(jìn)行網(wǎng)站制作。只有讓學(xué)生自己動(dòng)手，有了切身體會(huì)，才能更好的理解CSS+DIV和Table排版在網(wǎng)頁(yè)制作中的差異。

1、CSS+DIV對(duì)基礎(chǔ)薄弱的中職學(xué)生并不友好

Table排版首先要在網(wǎng)頁(yè)的BODY里面插入一個(gè)大的表格，然后這個(gè)大表格里面插入的頭部表格、中部表格和尾部表格，接著頭部表格里面再插入LOGO標(biāo)志表格和內(nèi)容表格，中部表格和尾部表格做法也是大同小異。

這種做法雖然相對(duì)于中職學(xué)生來(lái)說(shuō)很簡(jiǎn)單，容易理解，但是對(duì)于客戶來(lái)說(shuō)，卻是往往意味著災(zāi)難。訪問(wèn)打開(kāi)速度慢是這種網(wǎng)頁(yè)的最致命弱點(diǎn)。在教學(xué)中，我們可以限制網(wǎng)絡(luò)的速度，讓打開(kāi)瀏覽該網(wǎng)站的時(shí)候，瀏覽器首先需要把BODY中大表格里面所有的內(nèi)容加載完成。換個(gè)角度來(lái)說(shuō)，其實(shí)就是讓瀏覽器等網(wǎng)站Table里面所有的內(nèi)容加載完，學(xué)生才能看到網(wǎng)頁(yè)的內(nèi)容。在漫長(zhǎng)的等待過(guò)程中，觀看的學(xué)生會(huì)產(chǎn)生煩躁不安的情緒。讓他們體會(huì)到使用Table制作的網(wǎng)站，會(huì)讓用戶對(duì)公司產(chǎn)生不信任感。

2、把CSS+DIV形式和內(nèi)容進(jìn)行分離

學(xué)生在使用傳統(tǒng)Table布局制作網(wǎng)頁(yè)的階段，我們可以讓學(xué)生自行統(tǒng)計(jì)使用Table的數(shù)量。一個(gè)頁(yè)面里有10個(gè)以上的Table是非常普遍的事情，有時(shí)候內(nèi)容多的話，一個(gè)網(wǎng)頁(yè)就能達(dá)到30-40KB左右。瀏覽器在打開(kāi)文件的時(shí)候，必然會(huì)出現(xiàn)一定的延遲。

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

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

3、在需要對(duì)網(wǎng)站進(jìn)行改版的時(shí)候，變得更加簡(jiǎn)單和容易了。

科技不斷發(fā)展，網(wǎng)站的瀏覽用戶從普通臺(tái)式機(jī)轉(zhuǎn)移到今天的各種手機(jī)和平板。因此標(biāo)準(zhǔn)化的網(wǎng)頁(yè)制作將可以讓網(wǎng)站最大限度的符合客戶體驗(yàn)需求。注重客戶體驗(yàn)，這無(wú)疑也是很重要的一點(diǎn)。通過(guò)標(biāo)準(zhǔn)化的網(wǎng)頁(yè)制作，人們可以通過(guò)樣式的選擇使網(wǎng)站符合自己的閱讀習(xí)慣和閱讀喜好，極大的提升網(wǎng)站的易用性。

在網(wǎng)站制作好以后，我們可以要求學(xué)生按照一定的標(biāo)準(zhǔn)，對(duì)自己的網(wǎng)站進(jìn)行改版。

學(xué)生會(huì)發(fā)現(xiàn)使用Table布局的網(wǎng)頁(yè)，每一頁(yè)都需要重新寫版式代碼。如果需要對(duì)整個(gè)網(wǎng)站進(jìn)行修改和維護(hù)，那么每一個(gè)頁(yè)面都等于需要重寫，工作量十分巨大。而使用CSS+DIV布局，學(xué)生在制作時(shí)要實(shí)現(xiàn)比較精確和自適應(yīng)的層布局，需要設(shè)置層的樣式，即用CSS控制層的位置。CSS+DIV布局采用DIV來(lái)定位，通過(guò)DIV的margin邊界、padding填充、border邊框和Float浮動(dòng)等屬性來(lái)控制模塊和模塊之間的間距。具體做法，是通過(guò)創(chuàng)建DIV標(biāo)簽，并對(duì)其應(yīng)用CSS，通過(guò)CSS+DIV，把網(wǎng)頁(yè)的模板和代碼進(jìn)行了分離。

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

國(guó)外一位網(wǎng)頁(yè)制作的高手曾經(jīng)說(shuō)過(guò)：“網(wǎng)頁(yè)要小，最小，10K，5K...越少的代碼，決定了越快的速度?！币话銇?lái)說(shuō)，使用Table排版網(wǎng)頁(yè)，網(wǎng)頁(yè)中將充斥著大量的<table>、<tr>和<td>等代碼，這樣會(huì)讓整個(gè)網(wǎng)頁(yè)變得臃腫不已。使用Table架構(gòu)描述的頁(yè)面，樣式結(jié)構(gòu)和內(nèi)容信息大小比可能達(dá)到一比一，有時(shí)甚至可能會(huì)比這個(gè)還要更高。

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

通過(guò)以上的教學(xué)和對(duì)比，學(xué)生就能夠充分體會(huì)到設(shè)計(jì)制作網(wǎng)站中使用CSS+DIV和Table的差異，讓他們更加明白在強(qiáng)調(diào)用戶體驗(yàn)，要求網(wǎng)站符合搜索引擎爬蟲需要的今天，要重視網(wǎng)站制作的標(biāo)準(zhǔn)化。它可以提升客戶閱讀網(wǎng)站時(shí)候的舒適性，增加用戶對(duì)網(wǎng)站好感，便捷易用，同時(shí)更符合的搜索引擎的需求。

作者簡(jiǎn)介：黃志鵬（1982.10），男，漢，廣東湛江，本科，高級(jí)講師，計(jì)算機(jī)。