淺析“DIV+CSS網(wǎng)頁布局”的優(yōu)劣勢及使用技巧

梁弘宇

【摘 要】隨著網(wǎng)絡(luò)的普及和飛速發(fā)展，用戶對于網(wǎng)頁設(shè)計(jì)和體驗(yàn)要求越來越高，DIV+CSS技術(shù)就在這一環(huán)境下孕育而生，它代表著網(wǎng)頁制作技術(shù)的一大進(jìn)步。論文主要闡述DIV+CSS網(wǎng)頁布局的優(yōu)劣勢及幾點(diǎn)使用技巧。

【Abstract】With the popularity and rapid development of the network， the user has more and more high requirements for the web design and experience. DIV+CSS technology is born in this environment， it represents a great progress of web page making technology. This paper mainly expounds the advantages and disadvantages and several use skills of "DIV+CSS page layout".

【關(guān)鍵詞】DIV+CSS；網(wǎng)頁布局；優(yōu)劣勢；使用技巧

【Keywords】 DIV+CSS； web layout； advantages and disadvantages； use skills

【中圖分類號】TP393.0 【文獻(xiàn)標(biāo)志碼】A 【文章編號】1673-1069（2017）12-0187-02

1 引言

用DIV+CSS進(jìn)行網(wǎng)頁布局具有代碼精簡等優(yōu)點(diǎn)，但是其同時(shí)存在開發(fā)技術(shù)高、開發(fā)時(shí)間長、開發(fā)成本高等問題。因此，應(yīng)該了解DIV+CSS網(wǎng)頁布局的優(yōu)劣勢，并在實(shí)踐中不斷總結(jié)和探索其布局技巧。

2 DIV+CSS網(wǎng)頁布局的優(yōu)勢

DIV+CSS是一種全新的網(wǎng)頁布局方法，與傳統(tǒng)的TABLE網(wǎng)頁布局相比具有三大優(yōu)勢：第一，結(jié)構(gòu)與表現(xiàn)的分離，利于頁面修改和重構(gòu)；第二，頁面代碼量少，利于提升頁面的訪問速度；第三，有利于SEO優(yōu)化。

2.1 結(jié)構(gòu)與表現(xiàn)的分離，利于頁面修改和重構(gòu)

DIV+CSS布局頁面能實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離，一般來說，DIV+CSS頁面的HTML和CSS文件都是分開的，即一個(gè)網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)形式是分離的，修改小部分的CSS文件里CSS樣式屬性就可以修改網(wǎng)站的樣式版面，如邊框樣式、背景顏色、網(wǎng)站寬度等，具有TABLE不具備的靈活性[1]。

在教學(xué)中，曾設(shè)計(jì)了這樣的一個(gè)問題情境：“同學(xué)們，如果你是一個(gè)大型商場的網(wǎng)站管理員，每逢重大節(jié)日，如何做到大型網(wǎng)站在不改變架構(gòu)的情況下，還能表現(xiàn)出節(jié)日渲染的氣氛呢？”

上述問題的解決方法是：使用DIV+CSS進(jìn)行網(wǎng)頁布局，這是一種讓網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)分離的技術(shù)。要理解這個(gè)原理，首先要了解DIV+CSS的盒子模型。盒子模型像生活中商品的包裝盒。盒子跟另一個(gè)盒子之間的距離叫“外邊距”，包裝盒的紙殼就是“邊框”，防止商品在運(yùn)輸過程中出現(xiàn)碰撞而增加的泡沫墊可以看成“內(nèi)邊距”。在實(shí)踐中，大部分學(xué)生想到的盒子就只是DIV，其實(shí)所有網(wǎng)頁元素都可以看作盒子。

2.2 頁面代碼量少，利于提升頁面的訪問速度

一方面，DIV+CSS布局的網(wǎng)頁代碼精簡，TABLE時(shí)代，一個(gè)頁面的表格達(dá)到10個(gè)以上是非常常見的事情，但是應(yīng)用DIV+CSS后，一個(gè)表格都可以不用，就可以達(dá)到之前的效果，并且，CSS文件可以在網(wǎng)站的任意一個(gè)頁面進(jìn)行調(diào)用，避免了代碼冗余的弊端，可以讓網(wǎng)頁文件大小比使用TABLE時(shí)減少一半以上。另一方面，DIV和TABLE的加載方式不同，TABLE要把所有內(nèi)容加載完畢，瀏覽器才知道該怎么顯示；而DIV的加載方式是即讀即加載，邊加載邊將內(nèi)容呈現(xiàn)到瀏覽器上，訪問者打開網(wǎng)頁時(shí)不用等，大大提升頁面的訪問速度[2]。

2.3 DIV+CSS布局頁面，有利于SEO優(yōu)化

DIV+CSS布局網(wǎng)頁可以精簡頁面代碼，提高加載速度，這對蜘蛛（spider）爬行非常有利。一個(gè)網(wǎng)站在搜索引擎上的排名很大程度上取決于該網(wǎng)站的信任值和權(quán)威值。由于搜索引擎在訪問某個(gè)網(wǎng)站時(shí)，會(huì)“感覺”到該網(wǎng)站是否正常。例如：該網(wǎng)站是否有過多的頁面代碼而造成爬行超時(shí)？連向該網(wǎng)站的聯(lián)結(jié)數(shù)量、質(zhì)量、多樣性如何？諸如此類的線索都會(huì)引起搜索引擎的注意，搜索引擎會(huì)把各種因素結(jié)合在一起作整體評估。因此DIV+CSS布局的網(wǎng)站在搜索引擎中的排名情況會(huì)更良好。

3 DIV+CSS網(wǎng)頁布局的不足

雖然DIV+CSS技術(shù)在網(wǎng)站建設(shè)中有很多優(yōu)勢，但劣勢也非常明顯，如開發(fā)技術(shù)高、開發(fā)時(shí)間長、開發(fā)成本高等。

3.1 開發(fā)技術(shù)高

DIV+CSS雖然不是高不可及，但實(shí)踐證明，DIV+CSS比表格定位復(fù)雜得多。例如一個(gè)溢出沒處理好，可能導(dǎo)致整個(gè)網(wǎng)頁面目全非。并且，DIV+CSS要兼容各種瀏覽器，大大增加了DIV+CSS的開發(fā)難度。比如在IE中顯示正常的頁面，到了火狐瀏覽器中可能會(huì)面目全非。目前，DIV+CSS還沒有實(shí)現(xiàn)所有瀏覽器的兼容，調(diào)試瀏覽器的兼容問題是一件非常難的事，需要較高的開發(fā)技術(shù)[3]。

3.2 開發(fā)時(shí)間長

DIV+CSS布局相對于TABLE布局來說，DIV+CSS的耗費(fèi)時(shí)間要長得多，并且各種瀏覽器間的兼容測試也是一個(gè)很費(fèi)時(shí)的事情。

3.3 開發(fā)成本高

網(wǎng)站的開發(fā)成本很大程度取決于開發(fā)技術(shù)和開發(fā)時(shí)間，DIV+CSS制作網(wǎng)頁需要的開發(fā)技術(shù)高，開發(fā)時(shí)間長，因此決定了它的開發(fā)成本高。

4 DIV+CSS網(wǎng)頁布局的幾點(diǎn)使用技巧

在網(wǎng)頁制作中，巧妙地使用技巧可以達(dá)到事半功倍的效果，下面是筆者在平時(shí)教學(xué)和實(shí)踐中常使用的幾點(diǎn)DIV+CSS網(wǎng)頁布局技巧。

4.1 列表項(xiàng)前面的圖片在不同瀏覽器中顯示存在差異的處理技巧

5 結(jié)論

作為網(wǎng)站的設(shè)計(jì)者，需要理解DIV+CSS網(wǎng)頁布局的優(yōu)點(diǎn)及不足，從而更好地運(yùn)用DIV+CSS技術(shù)來制作網(wǎng)站。同時(shí)，也應(yīng)在平時(shí)的實(shí)踐中多總結(jié)DIV+CSS布局的技巧，以便制作出更高質(zhì)量的網(wǎng)頁。

【參考文獻(xiàn)】

【1】劉紅梅.網(wǎng)頁設(shè)計(jì)與制作[M].南京：江蘇教育出版社，2013.

【2】李玲玲.關(guān)于“網(wǎng)頁布局”方式的研究[J].淮北職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2011（01）：29-30.

【3】吳胡和，周非凡.網(wǎng)頁布局優(yōu)化設(shè)計(jì)方法探析[J].科技資訊，2011，05（18）：22-23.

【4】盧秀蕓.淺析優(yōu)化設(shè)計(jì)網(wǎng)頁布局[J].科技資訊，2010，03（33）：11-12.