基于DIV+CSS網頁布局技術的應用研究

2014-04-29 04:03:01麥小霞

計算機時代 2014年5期

麥小霞

摘要： DIV+CSS技術作為網頁布局的新寵，有著其獨特的優勢，它把網頁的表現形式和內容分離，能夠解決很多表格布局時產生的問題。介紹了DIV+CSS布局技術的概念、特點及其優勢；通過一個具體的實例展示了DIV+CSS布局技術的應用思路與核心技術。希望能幫助初學者初步認識這種布局技術，為進一步的學習打下基礎。

關鍵詞： DIV； CSS；網頁布局；網頁設計

中圖分類號：TP393 文獻標志碼：A 文章編號：1006-8228（2014）05-42-02

Abstract： DIV+CSS is a popular technology in page layout because of its own advantages. The form and the content of the page are separated so that it may solve many problems existing when we use table layout. The concept of DIV+CSS layout techniques and its characteristic advantages are introduced. Through a concrete example， the DIV+CSS layout technology application and the core technology are displayed to help the beginners understand this layout technology.

Key words： DIV； CSS； Web page layout； Web page design

0 引言

隨著網絡技術的發展和Web2.0標準化設計理念的普及，網頁布局不再以表格布局為主，而是向更規范的DIV+CSS布局方式轉變。因為DIV+CSS布局方式解決了表格布局中的問題，把網頁的表現形式與內容進行分離，這樣做的好處是網頁后期的維護更加方便，網頁的代碼也簡化了，并且提升了網頁的加載速度。因此，DIV+CSS技術的普及是趨勢。那么什么是DIV+CSS技術，它有什么樣的優勢，如何使用該技術，本文將對此進行探討，介紹DIV+CSS布局技術的基本知識，再通過實例介紹其結構以及如何在網頁制作中應用這種技術。

1 什么是DIV+CSS技術

網頁的頁面是一個整體，在進行設計的時候必須從整體上去規劃它，也就是把整個頁面劃分成幾個區域，再對每個區域作進一步的細節排版以及版式設計，最后就是用戶所看到的頁面效果。DIV+CSS布局技術就是按照上面的設計思路去制作網頁的一種技術。

DIV是HTML標記中的塊級標記，是一個提供結構和背景的元素。CSS是用來表現文件樣式的腳本語言。DIV+CSS技術就是用DIV盒子模型把各部分內容劃分到不同的區塊，然后通過CSS樣式來定義盒子的位置、大小、邊框、內外邊距等。

2 DIV+CSS技術的優勢

DIV+CSS布局方式解決了表格布局中的問題，主要體現在以下幾個方面。

⑴ 表現和內容分離。HTML文件中只存放文本的信息，而設計部分的內容則分離出來放在一個獨立的css樣式文件中，這樣的網站不會因為將來網絡應用的升級而被淘汰。

⑵ 代碼簡化，頁面瀏覽速度提高。DIV+CSS布局的頁面的編碼一般只有表格布局的頁面編碼的二分之一，這樣的頁面瀏覽速度更快，帶寬成本更低，被搜索引擎搜索到的概率更高。

⑶ 維護和改版更加便捷。當需要改變頁面風格的時候，只需要修改CSS樣式即可，從而降低改版網站的成本，提高了效率。

YAHOO，網易，新浪等幾大門戶網站均采用DIV+CSS布局框架，這更加印證了這種技術有其獨特的優勢，相信它的普及應用也為期不遠了。

3 DIV+CSS技術的應用

下面以廣州華商職業學院的主頁設計為例子來講解DIV+CSS布局技術的具體應用。

4 結束語

本文介紹了使用DIV+CSS布局技術進行網頁設計的完整思路，給出了使用這種技術的過程，并且給出了核心代碼。通過本文的探討，相信初學者對DIV+CSS布局技術有了初步的了解。當然，DIV+CSS布局技術包含的知識很多，在本文中都沒有提及。網頁布局的樣式非常多，如何通過這種技術實現不同的布局方式是筆者要進一步研究的課題，這需要不斷地學習和更多的實踐。

參考文獻：

[1] 楊陽.DIV+CSS網站布局實錄[M].科學出版社，2009.

[2] 張志浩，李書明，趙玲.CSS技術在網頁設計中的應用探析[J].電腦知

識與技術，2007.10：30-36

[3] 周鑫.淺談DIV+CSS技術在網頁設計中的應用[J].科技信息，

2011.17：84-85

[4] 梁靜琳.DIV+CSS布局技術在網頁設計中的應用[J].武漢工程職業

技術學院學報，2009.21（1）：42-45

[5] 夏曼.用DIV_CSS布局技術實現網頁設計[J].軟件導刊，2010.11：

132-134

[6] 楊芳菊.DIV+CSS布局可視化嘗試[J].電腦知識與技術，2008.8：

1821-1825