DIV+CSS在計算機網頁設計中的運用

楚子漪

【摘 要】互聯網發展至今，網絡已經成為人們生活的重要部分，各色網站層出不窮，眾多網頁各有千秋。本文從計算機網頁設計中的布局入手，分析了傳統網頁布局的局限性，介紹了計算機網頁中典型的 “DIV+CSS”布局方式。通過對DIV 和CSS 技術的研究，介紹了DIV+CSS布局方法及其優勢，為計算機網頁設計提供思路。

【關鍵詞】DIV；CSS；計算機網頁；布局

一、前言

傳統的計算機網頁布局的方法主要有框架布局和表格布局。框架布局比較靈活，若有效運用，則能使網頁更整潔、清晰。但是，對于內容多、布局復雜的網站，不宜采用框架布局，因為，過多的框架會影響網頁下載所需的時間，影響網頁的讀取速度，而且瀏覽器對框架結構的兼容性也不是很好。

表格是計算機網頁設計制作中的一個重要網頁元素，用來對網頁進行排版，使頁面的信息布局合理、簡潔。但是表格排版也存在以下的問題：

1.用表格排版的頁面很難再修改或升級。當頁面制作完成后，如果要將其中的某些位置對調，那么表格排版的工作量相當于重新制作一個頁面。而CSS排版利用position和float屬性可以輕松地移動和重新定位各個塊，實現讓用戶動態選擇界面的功能。

2.用表格排版的頁面在下載時必須等整個表格的內容都下載完畢后才會一次性顯示出來，而利用DIV+CSS排版的頁面在下載時，各個子塊可以分別下載顯示，從而提高了頁面的下載速度。

3.復雜的表格設計使得設計極為不易，修改更為復雜，最后生成的網頁代碼除了表格本身的代碼，還有許多沒有任何意義的圖像占位符及其他元素，文件量龐大，最終導致瀏覽器下載及解析速度變慢，網站的維護和更新困難。

二、DIV和CSS的具體內容

DIV元素是用來為HTML文檔內大塊的內容提供布局的結構和背景。它是HTML中的一個標簽，此標簽的作用就是定位網頁內容中的圖片、文字、視頻等相關信息。一般我們也叫為DIV層定位。

CSS（cascading style sheet），層疊樣式表，是用于控制網頁樣式并允許將樣式信息與網頁分離的一種標識性語言。CSS 是 1996由W3C 審核通過，并且推薦使用的。CSS 的引入就是為了使 HTML語言更好的適應頁面的美工設計。它以 HTML語言為基礎，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網頁設計者可以針對各種可視化瀏覽器（包括顯示器、打印機、打字機、投影儀和 PDA 等）來設置不同的樣式風格。CSS的引入引發了網頁設計一個又一個的新高潮。使用CSS設計的優秀頁面層出不窮。

DIV+CSS布局方式使網頁結構和外觀相分離，極大地簡化了代碼，而且使站點加載的速度變得快捷、維護也更加方便，無疑對傳統布局的網頁方式造成了極大的沖擊。除此之外，DIV+ CSS布局方式的使用，使傳統的網頁布局的不足得到很好的彌補，當前國內多數比較著名的網站都利用此類方式方法進布局，給用戶帶來了全新的體驗模式。

三、DIV+CSS設計計算機網頁布局

采取DIV和CSS的網頁布局結構，首先需要用DIV來分塊，定義語義結構；然后用CSS來定位和添加樣式，如浮動、位置、對齊屬性、加入背景等；最后在這個CSS定義的各個塊中添加相應的樣式，如文字、圖片等。下面通過一個布局實例介紹使用DIV+CSS布局網頁的基本方法。

首先，把網頁區分成不同的三個區塊，包括header、content（其中有main主體區域，并將main主體部分分為兩個區域lside和rside）、footer三個區域，分別作為網頁的頭部、內容和版權區域。編寫HTML部分文檔代碼如下：

其次，設置其CSS樣式文件代碼如下：

#container{margin：0 auto；width：90%；}

#header{height：200px；margin-top：20px；border：2px solid；}

#content{height：500px；width：100%；margin-bottom：10px；}

#main{float：left；width：70%；height：400px；border：2px solid；}

#footer{height：60px；border：1px solid；}

其中，width屬性設置為百分比形式，表示當窗口大小發生變化時，頁面的寬度也隨之變化。container的margin屬性為0，auto，表示上下邊距為0像素，auto表示左右邊距為自動，實現網頁的居中顯示。main的float屬性為left，表示靠左對齊，實現中間兩列豎欄的顯示效果。border屬性為2px solid，表示2個像素寬的實線邊框。

四、DIV+CSS布局計算機網頁的優點

通過上面DIV+CSS的布局實例，可以看出使用DIV+CSS布局計算機網頁給網頁設計帶來很大的優勢，具體如下：

（一）內容與表現相分離

即CSS代碼和HTML代碼相分離，CSS可以把樣式的部分單獨的置于獨立的樣式文件中，而在HTML的文件中只放置網頁需要顯示的內容，而網頁的內容表現的形式則可以完全通過CSS文件來實現，消除了大量的冗余代碼，解決頁面表現和結構混合在一起的問題。

（二）網站的更新與維護更簡易

因為CSS文件能夠被多個網頁鏈接或使用，當需要重新布局網站頁面時，只要依照區塊的內容標記到CSS樣式的文件里，尋找到相應的ID，并進行簡單的修改即可。不需要在每一個HTML文件中進行重復的設置，使修改頁面變得更加簡捷，極大地提高了網站更新與維護的效率，節約網站的運營成本。

（三）網頁加載迅速

當代碼寫在了CSS文件中時，讓頁面體積變小、代碼簡潔，而且相較于表格嵌套方式而言，DIV+CSS賦予頁面更多的獨立區域，當要打開頁面時，不會在整個頁面局限于一個大表格里，而是逐層加載，提升了頁面加載速率。

【參考文獻】

[1]王儉敏等.CSS+DIV網頁樣式與布局案例指導[M].北京：電子工業出版社，2009.

[2]張趙輝.3D網絡試衣技術的市場應用分析 [J].致富時代，2015.