武海麗 李彩玲

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

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

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

1 WEB標(biāo)準(zhǔn)的概述

WEB標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁分為3個(gè)部分。第一：結(jié)構(gòu)，其用于對網(wǎng)頁中信息的整理，常用技術(shù)有HTML和XML等。第二：表現(xiàn)，用于對已經(jīng)結(jié)構(gòu)化的信息進(jìn)行修飾（例如顏色、版式），再顯示信息，其主要技術(shù)是CSS。第三：行為，用于對整個(gè)內(nèi)部模型的定義及相互行為的編寫，主要使用JavaScript等腳本語言。傳統(tǒng)的網(wǎng)頁布局技術(shù)即是Table布局，它具有較容易控制和搭建速度快的特點(diǎn)，但如今，隨著時(shí)代的發(fā)展，如何給用戶帶去便利才是當(dāng)今網(wǎng)頁設(shè)計(jì)考慮的關(guān)鍵，清晰的網(wǎng)絡(luò)結(jié)構(gòu)能方便使用者快速查找出所需信息，而精美的網(wǎng)頁布局能給瀏覽者帶來美的欣賞，所以DIV+CSS技術(shù)應(yīng)運(yùn)而生，它相比傳統(tǒng)的網(wǎng)頁布局方式更具優(yōu)勢，實(shí)現(xiàn)了網(wǎng)頁內(nèi)容與其表現(xiàn)形式的分離，更能合理地分析、整理復(fù)雜的網(wǎng)絡(luò)信息，恰當(dāng)?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è)計(jì)標(biāo)準(zhǔn)，它與傳統(tǒng)的網(wǎng)頁布局方式不同，在傳統(tǒng)的表格、圖層、框架等布局方式的基礎(chǔ)上，它實(shí)現(xiàn)了網(wǎng)頁內(nèi)容與其表現(xiàn)形式的分離。DIV只是HTML眾多標(biāo)記中的一個(gè)塊級元素，可以為其提供結(jié)構(gòu)和背景，DIV是一個(gè)雙標(biāo)記，其中所包含的元素有DIV標(biāo)記套用CSS來定義。CSS是格式設(shè)置規(guī)則，即層疊樣式表的縮寫，如在HTML文檔中加入CSS樣式表，即可實(shí)現(xiàn)在同一文檔內(nèi)使用嵌入式、外部、內(nèi)聯(lián)樣式表3種方法，CSS技術(shù)可以控制網(wǎng)絡(luò)頁面的整體外觀內(nèi)容，調(diào)整字體間距和固定背景等HTML無法表現(xiàn)的效果，或?qū)ζ渌Ч_(dá)到精確控制，CSS技術(shù)是定義HTML的顯示形式，是應(yīng)用于W3C中網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)技術(shù)，是網(wǎng)頁設(shè)計(jì)者必須掌握的技術(shù)之一，為適應(yīng)網(wǎng)絡(luò)發(fā)展的需求，DIV+CSS具有強(qiáng)大的應(yīng)用數(shù)據(jù)轉(zhuǎn)換能力。

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

2.2.1 精簡頁面代碼

網(wǎng)頁中的頁面代碼十分復(fù)雜，而加大對DIV+CSS技術(shù)的使用，能有效地精簡頁面代碼。精簡的網(wǎng)頁代碼不僅能提高網(wǎng)頁制作的效率，還能降低網(wǎng)頁維護(hù)的成本。代碼精簡后能使百度蜘蛛更具高效性，提高網(wǎng)頁加載速度，提升了收錄質(zhì)量。有效使用DIV+CSS技術(shù)可以提高用戶訪問頁面的速度，提升用戶的體驗(yàn)感，一旦網(wǎng)頁的加載速度提高，用戶在點(diǎn)擊頁面時(shí)所需等待時(shí)間就越少，這樣給使用者帶來良好的用戶體驗(yàn)性，也增加了用戶再次訪問的頻率，有利于增強(qiáng)客戶訪問粘性，進(jìn)而提高網(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)一的格式顯示，例如，各類標(biāo)題以相同的字體、或顏色顯示，此技術(shù)繁瑣重復(fù)性的工作簡單化，恰當(dāng)?shù)氖褂肈IV+CSS技術(shù)，不但能統(tǒng)一元素格式，還能降低網(wǎng)頁制作的工作量，一舉多得。

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

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

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

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

4 結(jié)語

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

[參考文獻(xiàn)]

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

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

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