程 序

（貴州交通職業(yè)技術學院 貴州 貴陽 550008）

1 DIV+CSS布局技術

DIV+CSS作為一種新型的Web設計標準、網(wǎng)頁布局方法，它基于傳統(tǒng)網(wǎng)頁布局方式表格、圖層、框架等實現(xiàn)了網(wǎng)頁內容與表現(xiàn)的分離。其中，DIV（DIVision，劃分），是一個區(qū)塊容器，用于封閉數(shù)據(jù)區(qū)域，其所包含的標題、段落、表格、圖片等元素由＜div＞標記套用CSS來定義；CSS（Cascading Style Sheets，層疊樣式表），是由國際W3C標準化組織所制定的的擴展樣式標準，是定義HTML的顯示形式，用于補充HTML的樣式編排功能，可在同一文檔內實現(xiàn)外部樣式表、內部樣式表、內聯(lián)樣式表的使用，以更好地完成網(wǎng)頁設計。

2 基于DIV+CSS布局技術的網(wǎng)頁設計實現(xiàn)

基于DIV+CSS布局技術的網(wǎng)頁設計，其布局思想是用DIV來劃分網(wǎng)頁空間，用CSS來定位各個區(qū)塊，以實現(xiàn)網(wǎng)頁內容與表現(xiàn)的分離。也就是說，利用DIV+CSS實現(xiàn)網(wǎng)頁設計，首先要將整個頁面利用＜div＞標記進行分塊，其次對各區(qū)塊進行CSS定位，最后對各區(qū)塊進行內容填充。

2.1 利用DIV劃分網(wǎng)頁空間

在網(wǎng)頁制作之前，需分析網(wǎng)頁的結構組成，進行整體規(guī)劃，劃分網(wǎng)頁空間布局，明確其DIV層的嵌套關系。一般而言，網(wǎng)頁空間結構包含以下幾部分：

（1）標題區(qū)，位于網(wǎng)頁頂部，用來顯示網(wǎng)站名稱、Logo等。

（2）導航區(qū)，位于標題區(qū)下方，用來顯示網(wǎng)站的索引關系，如站點主菜單、工具欄等。

（3）主功能區(qū)，位于網(wǎng)頁中間，用來顯示網(wǎng)站的主體內容，如商品展示等。

（4）頁腳，位于網(wǎng)頁底部，用來顯示網(wǎng)站的版權信息、法律聲明等。

利用＜div＞標記將定義上述結構，可表示如下：

這樣，就構成了一個網(wǎng)頁的基本結構，此時尚未對各標簽進行定位，因此這些標簽僅按語句的先后順序排放，寬度也為整個頁面的寬度，這就需要CSS對各標簽進行定位，并最終填充內容。

2.2 利用CSS定位各個區(qū)塊

對網(wǎng)頁空間完成劃分后，就可以利用CSS對各個區(qū)塊進行定位（確定各DIV層的位置、大小等），完成對頁面的整體布局，為在各個區(qū)塊中填充內容打下基礎。

例如，對header的定位：位置居中，寬度為800px，上邊距0px，下邊距10px，左右邊距為auto，可表示如下：

將頁面的各個部分都定位完成后，就可按照網(wǎng)頁設計的具體要求，在各個區(qū)塊中添加相應的內容。對于如何對各區(qū)塊進行填充，并將其以最佳狀態(tài)顯示，這涉及網(wǎng)頁設計的實際實現(xiàn)細節(jié)，內容細致、繁多，這里鑒于篇幅，不再進行一一介紹。

3 基于DIV+CSS布局技術的網(wǎng)頁設計優(yōu)化

雖然使用DIV+CSS布局技術進行網(wǎng)頁設計有極大的優(yōu)勢，但在實際使用過程中，仍存在一些不足，如實際操作中存有一定程度的誤差、瀏覽器兼容問題比較突出、技術實現(xiàn)復雜程度較高以及使用難度較大等。因此，在實際的網(wǎng)頁設計中，要在重視DIV+CSS布局技術優(yōu)勢的基礎上，充分考慮其現(xiàn)存問題，盡可能地對其進行優(yōu)化，以最大限度地發(fā)揮DIV+CSS布局技術在網(wǎng)頁設計中的作用。

基于DIV+CSS布局技術的網(wǎng)頁設計優(yōu)化方法有很多，下面簡單介紹幾種。

3.1 重視網(wǎng)頁風格的美化

基于DIV+CSS布局技術的網(wǎng)頁設計優(yōu)化，要重視網(wǎng)頁風格的美化，因此網(wǎng)頁設計人員應做到以下幾點：

（1）應盡可能減少或避免代碼視圖臃腫現(xiàn)象的出現(xiàn)，以降低設計難度，保障網(wǎng)頁質量，提升網(wǎng)頁美觀；

（2）應盡可能簡化嵌套布局，確保網(wǎng)頁外部的整齊簡潔；

（3）應盡可能使用外部樣式表，以降低實現(xiàn)難度，減少操作步驟；

（4）應保證美化的目的在于服務網(wǎng)頁設計，不能以犧牲代碼間接性、結構性為代價，片面追求美化，因此要把握好美化度的問題。

3.2 適當?shù)鼐帉應毩⒋a

基于DIV+CSS布局技術的網(wǎng)頁設計優(yōu)化，對網(wǎng)頁設計人員要求更高，因此網(wǎng)頁設計人員在網(wǎng)頁設計過程中能適當?shù)鼐帉應毩⒋a，具體來說應做到以下幾點：

（1）應合理利用TGc_9HH布局技術解決傳統(tǒng)表格布局中存在的常見問題；

（2）應盡可能將網(wǎng)頁內容與表現(xiàn)分離放置，將設計部分剝離出來，并將其放置在一個獨立的樣式文件夾中，以最大限度地減少網(wǎng)頁無效的可能性。

（3）應合理縮減頁面代碼，以保障網(wǎng)頁的瀏覽速度，進而縮減寬帶成本，提高設計的最終效果。

3.3 合理利用CSS選擇器

基于DIV+CSS布局技術的網(wǎng)頁設計優(yōu)化，其關鍵在于合理地利用CSS選擇器，因此網(wǎng)頁設計人員應做到以下幾點：

（1）要理解CSS選擇器的用途與優(yōu)缺點，明白CSS選擇器比其他選擇器要更加靈活，應用更廣泛，但CSS選擇其也有其自身的局限，如具有強制性、唯一性等特征，因此為保證使用者能更加快速地通過選擇器進行檢索，務必要使網(wǎng)頁結構更加靈活。

（2）要搭配好DIV與CSS，即將DIV合理運用到網(wǎng)頁的布局設計中，以更好地幫助使用者進行檢索、翻閱，而將CSS靈活運用到網(wǎng)頁的內容編排中，以確保網(wǎng)頁的簡潔性，提高網(wǎng)頁的設計效果。

隨著Web 2.0標準化設計理念的普及，DIV+CSS布局技術在網(wǎng)頁設計中將有更大的應用空間，也將在未來的應用過程中開發(fā)出更多的優(yōu)化方法，得到更好的優(yōu)化，從而更好地推動網(wǎng)頁設計的發(fā)展。

4 結語

綜上所述，DIV+CSS布局技術在網(wǎng)頁設計中大有可為，設計人員在實際應用中要極力發(fā)揮其優(yōu)勢，規(guī)避其不足，通過科學、合理地布局網(wǎng)頁空間，使其功能性更強、靈活性更高，在最大程度地提高網(wǎng)頁設計的最終效果。

[1]張偉娜，王海波.DIV+CSS網(wǎng)頁設計初探[J].電腦知識與技術，2013（1）.

[2]王國慶.探究基于DIV+CSS技術的網(wǎng)頁設計優(yōu)化方法[J].信息與電腦（理論版），2016（2）.

[3]劉小艮.網(wǎng)頁設計中DIV+CSS布局技術的應用實踐探討[J].無線互聯(lián)科技，2015（12）.