DIV+CSS技術在網(wǎng)頁制作與設計中的應用研究

武海麗 李彩玲

摘 要：隨著網(wǎng)絡時代的來臨，網(wǎng)頁布局已經(jīng)成為網(wǎng)頁設計的關鍵點之一，DIV+CSS技術則成為眾多網(wǎng)頁布局方法中的主導技術，它在網(wǎng)頁制作與設計中的地位也越來越高。文章對DIV+CSS技術進行了基本概述，并結合在教育資源網(wǎng)站平臺的應用，介紹了DIV+CSS技術在網(wǎng)頁格局上的設計。

關鍵詞：DIV+CSS 技術；網(wǎng)頁制作與設計；網(wǎng)頁布局

現(xiàn)代化科學技術的不斷進步發(fā)展，網(wǎng)絡已經(jīng)成為人類生產(chǎn)生活中不可或缺的一部分。而一個網(wǎng)站的主體即是網(wǎng)頁，網(wǎng)頁的內(nèi)容與布局是否成功是吸引瀏覽者的關鍵。如今，DIV+CSS技術逐漸成熟，它可以實現(xiàn)在網(wǎng)頁設計中的靈活使用，作為網(wǎng)頁布局的新寵，它替代了傳統(tǒng)的表格、圖層、框架等布局方式，提高的網(wǎng)頁制作與設計的工作效率，成為一種新型的功能性更強的網(wǎng)頁布局設計方式。

1 WEB標準的概述

WEB標準是一系列標準的集合。網(wǎng)頁分為3個部分。第一：結構，其用于對網(wǎng)頁中信息的整理，常用技術有HTML和XML等。第二：表現(xiàn)，用于對已經(jīng)結構化的信息進行修飾（例如顏色、版式），再顯示信息，其主要技術是CSS。第三：行為，用于對整個內(nèi)部模型的定義及相互行為的編寫，主要使用JavaScript等腳本語言。傳統(tǒng)的網(wǎng)頁布局技術即是Table布局，它具有較容易控制和搭建速度快的特點，但如今，隨著時代的發(fā)展，如何給用戶帶去便利才是當今網(wǎng)頁設計考慮的關鍵，清晰的網(wǎng)絡結構能方便使用者快速查找出所需信息，而精美的網(wǎng)頁布局能給瀏覽者帶來美的欣賞，所以DIV+CSS技術應運而生，它相比傳統(tǒng)的網(wǎng)頁布局方式更具優(yōu)勢，實現(xiàn)了網(wǎng)頁內(nèi)容與其表現(xiàn)形式的分離，更能合理地分析、整理復雜的網(wǎng)絡信息，恰當?shù)貙⑿畔⒎湃刖W(wǎng)頁中，是一種應用靈活的網(wǎng)頁布局方式。

2 DIV+CSS技術概述

2.1 DIV+CSS技術的內(nèi)容

DIV+CSS技術是網(wǎng)頁的布局方法之一，也是一種新型的Web設計標準，它與傳統(tǒng)的網(wǎng)頁布局方式不同，在傳統(tǒng)的表格、圖層、框架等布局方式的基礎上，它實現(xiàn)了網(wǎng)頁內(nèi)容與其表現(xiàn)形式的分離。DIV只是HTML眾多標記中的一個塊級元素，可以為其提供結構和背景，DIV是一個雙標記，其中所包含的元素有DIV標記套用CSS來定義。CSS是格式設置規(guī)則，即層疊樣式表的縮寫，如在HTML文檔中加入CSS樣式表，即可實現(xiàn)在同一文檔內(nèi)使用嵌入式、外部、內(nèi)聯(lián)樣式表3種方法，CSS技術可以控制網(wǎng)絡頁面的整體外觀內(nèi)容，調(diào)整字體間距和固定背景等HTML無法表現(xiàn)的效果，或對其他效果達到精確控制，CSS技術是定義HTML的顯示形式，是應用于W3C中網(wǎng)頁內(nèi)容的標準技術，是網(wǎng)頁設計者必須掌握的技術之一，為適應網(wǎng)絡發(fā)展的需求，DIV+CSS具有強大的應用數(shù)據(jù)轉換能力。

2.2 DIV+CSS技術的優(yōu)勢

2.2.1 精簡頁面代碼

網(wǎng)頁中的頁面代碼十分復雜，而加大對DIV+CSS技術的使用，能有效地精簡頁面代碼。精簡的網(wǎng)頁代碼不僅能提高網(wǎng)頁制作的效率，還能降低網(wǎng)頁維護的成本。代碼精簡后能使百度蜘蛛更具高效性，提高網(wǎng)頁加載速度，提升了收錄質(zhì)量。有效使用DIV+CSS技術可以提高用戶訪問頁面的速度，提升用戶的體驗感，一旦網(wǎng)頁的加載速度提高，用戶在點擊頁面時所需等待時間就越少，這樣給使用者帶來良好的用戶體驗性，也增加了用戶再次訪問的頻率，有利于增強客戶訪問粘性，進而提高網(wǎng)站的排名。

2.2.2 統(tǒng)一頁面元素格式

網(wǎng)頁中經(jīng)常出現(xiàn)頁面元素格式不統(tǒng)一的現(xiàn)象，由于網(wǎng)絡信息集成了種類多樣媒體元素，逐一設置更改的工作量十分龐大，使用傳統(tǒng)的網(wǎng)絡頁面布局方式未能有效的解決此問題，而使用DIV+CSS技術，可有效的將同一頁面元素用統(tǒng)一的格式顯示，例如，各類標題以相同的字體、或顏色顯示，此技術繁瑣重復性的工作簡單化，恰當?shù)氖褂肈IV+CSS技術，不但能統(tǒng)一元素格式，還能降低網(wǎng)頁制作的工作量，一舉多得。

2.2.3 完善頁面內(nèi)容和形式

DIV+CSS技術相比傳統(tǒng)的網(wǎng)頁布局方式更具優(yōu)勢，它實現(xiàn)了網(wǎng)頁內(nèi)容與其表現(xiàn)形式的分離，它結構清晰，易被搜索引擎搜索到，適合優(yōu)化和降低網(wǎng)頁的大小，減小網(wǎng)頁的體積。當在對網(wǎng)頁進行更新維護時，即使用外部樣式表，只要對一個CSS進行更新修改，使用外部格式表定義下的所有文檔的格式都會自動更新，并且可供多個網(wǎng)頁使用，或者重復使用一個CSS文件。DIV+CSS雖然結構精簡，但是不代表它除之上及之外，就全是

由于教學資源庫網(wǎng)站的內(nèi)容繁多，應用DIV+CSS技術僅完成首頁的頁面制作與設計，即完成一級導航是不夠的，簡單、清晰地顯示課程的各項資源需要由多級菜單來完成，而使用CSS制作的菜單能給予教學資源網(wǎng)站最清晰的導航支持。需要基于CSS技術制作了一個兩級下拉菜單，達到當鼠標經(jīng)過主菜單項時顯示相應的二級菜單，鼠標離開時則隱藏的效果，該制作過程需首先定義菜單的HTML結構，后設置樣式。其部分代碼如圖3所示。

基于CSS技術制作出來的下拉菜單，實現(xiàn)了當鼠標經(jīng)過主菜單項時顯示相應的二級菜單，鼠標離開時隱藏二級菜單的效果，整個網(wǎng)頁的顯示效果樣式美觀，這樣有利于提高用戶的瀏覽速度。

4 結語

在網(wǎng)頁制作與設計中應用DIV+CSS 技術，可以實現(xiàn)統(tǒng)一的設計管理，通過修改一個樣式表達到整體網(wǎng)站的修改，統(tǒng)一了網(wǎng)站的風格，由于DIV+CSS 技術具有結構和表現(xiàn)的相分離性，又可實現(xiàn)一個網(wǎng)頁面單獨做一個樣式表，精簡了代碼，提高了用戶訪問頁面的速度，增強了用戶的體驗感。

[參考文獻]

[1]劉海霞.DIV+CSS網(wǎng)頁布局技巧研究[J].計算機時代，2015（3）：14-17.

[2]聞立鷗.以DIV+CSS為核心技術的《網(wǎng)頁制作》教學設計與實踐[J].教育教學論壇，2015（30）：67-69.

[3]丁海燕，袁國武，張澤華，等.用CSS+DIV開發(fā)技術實現(xiàn)網(wǎng)頁布局[J].實驗科學與技術，2012（4）：39-41.

Research on the Application of DIV+CSS Technology in Web Page Making and Design

Wu Haili， Li Cailing

（Computer Department， Linfen Vocational and Technical College， Linfen 041000， China）

Abstract： With the advent of the Internet era， the web page layout has become one of the key points of web design， the DIV+CSS technology has become the dominant technology in many web page layout method the web and its position in the design is also more and more high， this paper gives a basic overview of the DIVCSS technology， combined with the application of education resources in the teaching website platform， introduces the design of DIVCSS technology in" pattern.

Key words： DIV+CSS； web technology and web page； layout design