武海麗 李彩玲

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

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

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

1 WEB標準的概述

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

2 DIV+CSS技術(shù)概述

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

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

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

2.2.1 精簡頁面代碼

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

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

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

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

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

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

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

4 結(jié)語

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

[參考文獻]

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

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

[3]丁海燕，袁國武，張澤華，等.用CSS+DIV開發(fā)技術(shù)實現(xiàn)網(wǎng)頁布局[J].實驗科學與技術(shù)，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