基于DIV+CSS布局技術的網頁設計實現與優化

程 序

（貴州交通職業技術學院 貴州 貴陽 550008）

1 DIV+CSS布局技術

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

2 基于DIV+CSS布局技術的網頁設計實現

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

2.1 利用DIV劃分網頁空間

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

（1）標題區，位于網頁頂部，用來顯示網站名稱、Logo等。

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

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

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

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

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

2.2 利用CSS定位各個區塊

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

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

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

3 基于DIV+CSS布局技術的網頁設計優化

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

基于DIV+CSS布局技術的網頁設計優化方法有很多，下面簡單介紹幾種。

3.1 重視網頁風格的美化

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

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

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

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

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

3.2 適當地編寫獨立代碼

基于DIV+CSS布局技術的網頁設計優化，對網頁設計人員要求更高，因此網頁設計人員在網頁設計過程中能適當地編寫獨立代碼，具體來說應做到以下幾點：

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

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

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

3.3 合理利用CSS選擇器

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

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

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

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

4 結語

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

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

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

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