巧用CSS+ Div與CSS+Table 布局頁(yè)面提高學(xué)生開(kāi)發(fā)網(wǎng)站能力

摘要：本文探討了《網(wǎng)頁(yè)設(shè)計(jì)制作》這門(mén)課程教學(xué)中如何進(jìn)行頁(yè)面布局的相關(guān)內(nèi)容，指出在教學(xué)中教師應(yīng)該合理巧用CSS+ Div與CSS+Table 布局頁(yè)面提高學(xué)生開(kāi)發(fā)網(wǎng)站能力。

關(guān)鍵詞：CSS+Table；CSS+Div；頁(yè)面布局

一、CSS+Table方式布局頁(yè)面

Table的排版方式最初是由一位負(fù)責(zé)給報(bào)紙排版的人使用的，他的“發(fā)明”對(duì)于互聯(lián)網(wǎng)可以說(shuō)是起到了極大的推動(dòng)作用：讓傳統(tǒng)的網(wǎng)頁(yè)實(shí)現(xiàn)了豐富多彩的色彩和布局結(jié)構(gòu)。在互聯(lián)網(wǎng)發(fā)展的初期使用較多的瀏覽器其實(shí)并非IE，而是美國(guó)的數(shù)家瀏覽器共存的局面，后來(lái)微軟通過(guò)將IE與windows的捆綁才得到迅速的發(fā)展。直到最后又w3c組織對(duì)代碼進(jìn)行了規(guī)范之后Table也才得到了快速的發(fā)展，并用CSS樣式對(duì)頁(yè)面式進(jìn)行修飾(CSS是英語(yǔ)Cascading Style Sheets的縮寫(xiě)，它是一種用來(lái)表現(xiàn) HTML 或 XML 等文件式樣的計(jì)算機(jī)語(yǔ)言)。

二、CSS+Div 方式布局頁(yè)面

CSS+Div是網(wǎng)站標(biāo)準(zhǔn)（或稱(chēng)“WEB標(biāo)準(zhǔn)”）中常用的術(shù)語(yǔ)之一，通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（Ｔable）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用CSS+Div的方式實(shí)現(xiàn)各種定位。

Div元素是用來(lái)為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。Div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由Div標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表的格式化這個(gè)塊來(lái)進(jìn)行控制。那么 CSS+Div頁(yè)面布局方式具有那些優(yōu)勢(shì)和存在什么問(wèn)題呢。現(xiàn)將CSS+Div網(wǎng)頁(yè)布局的優(yōu)勢(shì)和問(wèn)題歸納如下：

（一）CSS+Div網(wǎng)頁(yè)布局的優(yōu)勢(shì)。

（1）CSS的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼，對(duì)于一個(gè)大型網(wǎng)站來(lái)說(shuō)，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼（其真正意義在于，增加了有效關(guān)鍵詞占網(wǎng)頁(yè)總代碼的比重），因此使用CSS+Div的web標(biāo)準(zhǔn)制作的網(wǎng)站具有搜索引擎友好的一定優(yōu)勢(shì)。

（2）CSS+Div網(wǎng)頁(yè)布局的網(wǎng)頁(yè)使得網(wǎng)站改版相對(duì)簡(jiǎn)單，很多問(wèn)題只需要改變CSS而不需要改動(dòng)程序，從而降低了網(wǎng)站改版的成本。

（二） CSS+Div方式網(wǎng)頁(yè)布局存在的問(wèn)題。

盡管CSS+Div方式網(wǎng)頁(yè)布局具有一定的優(yōu)勢(shì)，不過(guò)現(xiàn)階段CSS+Div網(wǎng)頁(yè)布局存在的問(wèn)題也比較明顯，主要表現(xiàn)在：

（1）對(duì)于CSS的高度依賴使得網(wǎng)頁(yè)設(shè)計(jì)變得比較復(fù)雜。相對(duì)于CSS+Table方式布局頁(yè)面，CSS+Div方式布局頁(yè)面盡管不是高不可及，但至少要比表格定位復(fù)雜的多，即使對(duì)于網(wǎng)站設(shè)計(jì)高手也很容易出錯(cuò)，更不要說(shuō)初學(xué)的學(xué)生了，這在一定程度上影響了一部分接受能力較差的學(xué)生的學(xué)習(xí)積極性。

（2）CSS文件異常將影響整個(gè)網(wǎng)站的正常瀏覽。CSS網(wǎng)站制作的設(shè)計(jì)元素通常放在幾個(gè)外部文件中，這一個(gè)或幾個(gè)文件有可能相當(dāng)復(fù)雜，甚至比較龐大，如果CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站的網(wǎng)頁(yè)顯示將變得慘不忍睹。

（3）CSS+Div方式布局的頁(yè)面在顯示時(shí)對(duì)瀏覽器兼容性要求較高。基于HTML4.0的網(wǎng)頁(yè)設(shè)計(jì)在IE4.0之后的版本中幾乎不存在瀏覽器兼容性問(wèn)題，但CSS+Div方式布局的頁(yè)面在IE瀏覽器中正常顯示的頁(yè)面，到火狐瀏覽器（FireFox ）中卻可能面目全非（這也是為什么建議網(wǎng)絡(luò)營(yíng)銷(xiāo)人員使用火狐瀏覽器的原因所在 ）。CSS+Div方式布局的頁(yè)面在顯示時(shí)還有待于各個(gè)瀏覽器廠商的進(jìn)一步支持。

（4）CSS+Div方式布局的頁(yè)面對(duì)搜索引擎優(yōu)化與否取決于網(wǎng)頁(yè)設(shè)計(jì)的專(zhuān)業(yè)水平而不是CSS+Div本身。CSS+Div方式布局的網(wǎng)頁(yè)并不能保證網(wǎng)頁(yè)對(duì)搜索引擎的優(yōu)化，甚至不能保證一定比HTML網(wǎng)站有更簡(jiǎn)潔的代碼設(shè)計(jì)，何況搜索引擎對(duì)于網(wǎng)頁(yè)的收錄和排序顯然不是以是否采用表格和CSS定位來(lái)衡量，這就是為什么很多傳統(tǒng)表格布局制作的網(wǎng)站在搜索結(jié)果中的排序靠前，而很多使用CSS及web標(biāo)準(zhǔn)制作的網(wǎng)頁(yè)排名依然靠后的原因。因?yàn)閷?duì)于搜索引擎而言，網(wǎng)站結(jié)構(gòu)、內(nèi)容、相關(guān)網(wǎng)站鏈接等因素始終是網(wǎng)站優(yōu)化最重要的指標(biāo)。

CSS+Div和CSS+Table這兩者如何結(jié)合起來(lái)使用也沒(méi)有固定的要求，而應(yīng)根據(jù)個(gè)人掌握的知識(shí)和習(xí)慣靈活變化。但一個(gè)最基本的原則就是使用CSS+Div方式布局頁(yè)面的定位、色塊、圖片等，使用CSS+Table或Ul和Li等這樣的元素來(lái)顯示頁(yè)面中需要展示的數(shù)據(jù)。根據(jù)近幾年在網(wǎng)絡(luò)公司工作的我校北大青鳥(niǎo)班畢業(yè)生反饋回來(lái)的信息得知，CSS+Div和CSS+Table這兩者巧妙結(jié)合起來(lái)進(jìn)行頁(yè)面布局方式，他們?cè)趯?shí)際工作中也經(jīng)常使用，并大大提高了他們開(kāi)發(fā)網(wǎng)站的能力。

（作者單位：東莞市紡織服裝學(xué)校）

參考文獻(xiàn)：

[1]阿博泰克北大青鳥(niǎo)信息技術(shù)有限公司.網(wǎng)站配色與布局[M].北京：科學(xué)技術(shù)文獻(xiàn)出版社，2001．

[2]阿博泰克北大青鳥(niǎo)信息技術(shù)有限公司.使用

Dreamweaver制作網(wǎng)頁(yè)[M].北京：科學(xué)技術(shù)文獻(xiàn)出版社，2002．

[3]阿博泰克北大青鳥(niǎo)信息技術(shù)有限公司.制作企業(yè)網(wǎng)站[M].北京：科學(xué)技術(shù)文獻(xiàn)出版社，2011．

責(zé)任編輯朱守鋰