采用DIV+CSS技術(shù)的高校門戶網(wǎng)站系統(tǒng)分析和設(shè)計(jì)

摘要：本文針對(duì)采用傳統(tǒng)表格布局方式的高校門戶網(wǎng)站系統(tǒng)設(shè)計(jì)的局限性，如下載速度慢，網(wǎng)頁代碼不清晰，維護(hù)成本大等缺點(diǎn)，給出了采用DIV+CSS布局技術(shù)的高校門戶網(wǎng)站系統(tǒng)設(shè)計(jì)方案。實(shí)驗(yàn)表明采用DIV+CSS技術(shù)頁面布局方案一經(jīng)開發(fā)者熟練掌握之后，將會(huì)比表格布局更加靈活實(shí)用。

關(guān)鍵詞：DIV+CSS頁面布局； Table頁面布局； 高校門戶網(wǎng)站

中圖分類號(hào)：TP3021 文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：2095-2163（2014）04-0068-04

Abstract：According to the limitation of the table-layout of the university Gateway website system ， such as the slow downloading， blurring page code and high maintenance costs etc， this pape puts forward a design scheme for the university gateway website system using DIV+CSS technology. And the experiments show that the DIV+CSS layout would be more flexible than the table layout.

Key words：DIV+CSS Page Layout；Table Page Layout；University Gateway Website

0引言

高校門戶網(wǎng)站是發(fā)布日常教學(xué)信息、提供學(xué)生選課服務(wù)、展示高校各類教學(xué)科研成果的綜合性平臺(tái)。目前，很多高校門戶網(wǎng)站的頁面布局采用的仍然是傳統(tǒng)Table表格布局方式。表格布局在WEB2.0問世之前是比較通行的頁面布局方式，但是隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展，這種布局方式的弊端逐漸顯現(xiàn)出來。該種表格布局方式將網(wǎng)頁的主體內(nèi)容和頁面表現(xiàn)格式混搭在一起，導(dǎo)致網(wǎng)頁代碼結(jié)構(gòu)不清，不利于網(wǎng)頁的設(shè)計(jì)和網(wǎng)站的維護(hù)。表格布局的瀏覽速度也比較慢，表格布局所在的網(wǎng)頁要在表格中的所有元素下載完畢后才能顯示完整的頁面內(nèi)容。

DIV+CSS頁面布局技術(shù)的出現(xiàn)克服了表格頁面布局方式的上述不足。采用DIV+CSS網(wǎng)頁布局技術(shù)的高校門戶網(wǎng)站的頁面代碼，可將頁面的內(nèi)容和頁面的表現(xiàn)格式進(jìn)行分離[1]，這將使得高校門戶網(wǎng)站的項(xiàng)目代碼更加清晰，方便開發(fā)者閱讀，有利于日后網(wǎng)站的升級(jí)和維護(hù)。DIV+CSS技術(shù)在提高網(wǎng)站下載速度的同時(shí)，也能夠使高校門戶網(wǎng)站更具親和力，并且能夠提升高校門戶網(wǎng)站日后的瀏覽器兼容性[2]。

1DIV+CSS頁面布局技術(shù)

CSS（Cascading Style Sheets）層疊樣式表又稱級(jí)聯(lián)樣式表，是由 W3C 的 CSS工作組策劃提出的[3]。CSS在網(wǎng)站設(shè)計(jì)中主要負(fù)責(zé)網(wǎng)頁內(nèi)容的格式顯示和布局方式。層疊樣式表是一種不需要編譯的標(biāo)記語言，可以直接由瀏覽器執(zhí)行，因?yàn)镃SS屬于瀏覽器解釋型語言。CSS 在網(wǎng)頁排版方面表現(xiàn)非常優(yōu)秀，使用 CSS不僅可以控制網(wǎng)頁文字的大小、網(wǎng)頁文字顏色、網(wǎng)頁文字對(duì)齊方式和網(wǎng)頁文字字體類型等文本格式，還可以控制網(wǎng)頁文字行高、字母間距、英文字符大小寫等段落格式，同時(shí)也可以控制文本的第一個(gè)字或第一行的樣式。網(wǎng)頁開發(fā)者可以將自己所創(chuàng)建的樣式規(guī)則應(yīng)用于整個(gè)網(wǎng)站的所有網(wǎng)頁文件，這樣就能實(shí)現(xiàn)在任何時(shí)候均可尋獲需要更改網(wǎng)站內(nèi)容的格式，如字號(hào)增大，或是需要改變正文的字體，并且只需要更改對(duì)應(yīng)的樣式表中的CSS屬性值即可。

CSS標(biāo)記語言的代碼應(yīng)用于網(wǎng)頁一共有四種方式：直接在HTML標(biāo)記的Style屬性中存放CSS代碼；寫入網(wǎng)頁Head標(biāo)記內(nèi)的內(nèi)部樣式規(guī)則；嵌入外部樣式規(guī)則和鏈接外部樣式規(guī)則。這種外部樣式規(guī)則是把CSS代碼放在一個(gè)獨(dú)立于網(wǎng)頁文件的普通文本文件中，該文本文件要求必須使用css作為文件的擴(kuò)展名。外部樣式表使得網(wǎng)站開發(fā)者可以通過簡單地更改 CSS 文件，從而實(shí)現(xiàn)改變網(wǎng)頁的整體表現(xiàn)形式的目的。如此一來，就節(jié)省了網(wǎng)站維護(hù)成本，也提高了網(wǎng)站的維護(hù)效率，更使得只要通過操作一個(gè)CSS文件就可以改變整個(gè)網(wǎng)站頁面的外觀風(fēng)格和布局方式。

DIV（Division）標(biāo)記是一個(gè)容器型標(biāo)記，可以利用該標(biāo)記來進(jìn)行網(wǎng)頁的布局。一個(gè)網(wǎng)頁可以由若干個(gè)這樣的DIV容器組成，每個(gè)容器都對(duì)應(yīng)于網(wǎng)頁的一個(gè)獨(dú)立模塊。DIV容器和其它HTML標(biāo)記一樣可以通過 CSS進(jìn)行控制。級(jí)聯(lián)樣式表可以控制DIV容器顯示大小、背景顏色、背景圖片、正文字體類別、正文字體大小以及DIV容器所定義的模塊在網(wǎng)頁當(dāng)中具體的擺放位置等[4]。

DIV+CSS 布局方式的思路是首先使用DIV容器標(biāo)記，將網(wǎng)頁劃分成幾個(gè)模塊，每個(gè)DIV標(biāo)記可以對(duì)應(yīng)一個(gè)獨(dú)立的網(wǎng)頁模塊[5]。其后把頁面的內(nèi)容元素分別放入所對(duì)應(yīng)的DIV模塊中，再通過CSS規(guī)則來控制每個(gè)容器模塊的樣式，并采用CSS邊框?qū)傩裕˙order）、填充屬性（Padding） 、邊界屬性 （Margin） 和浮動(dòng)屬性 （Float）來控制容器模塊間的相對(duì)位置，最終確定相互之間的布局方案和位置關(guān)系[6]。

2采用DIV+CSS技術(shù)的高校網(wǎng)站系統(tǒng)分析和設(shè)計(jì)

高校門戶網(wǎng)站系統(tǒng)從功能上劃分共分為以下幾個(gè)模塊：首頁、學(xué)校概況、機(jī)構(gòu)設(shè)置、師資隊(duì)伍、人才培養(yǎng)、科學(xué)研究、國際交流、學(xué)生工作、招生信息、就業(yè)指導(dǎo)和公共服務(wù)。各模塊的詳細(xì)結(jié)構(gòu)即如圖1所示。

（1）網(wǎng)站LOGO區(qū)域：用來顯示高校名稱和其LOGO標(biāo)志圖片。

（2）網(wǎng)站導(dǎo)航區(qū)域：以導(dǎo)航鏈接列表的形式顯示網(wǎng)站的各個(gè)功能模塊超鏈接。主要鏈接內(nèi)容包括首頁鏈接、學(xué)校概況鏈接、機(jī)構(gòu)設(shè)置鏈接、師資隊(duì)伍鏈接、人才培養(yǎng)鏈接、科學(xué)研究鏈接、國際交流鏈接、學(xué)生工作鏈接、招生信息鏈接、就業(yè)指導(dǎo)鏈接和公共服務(wù)鏈接等。 第4期劉松：采用DIV+CSS技術(shù)的高校門戶網(wǎng)站系統(tǒng)分析和設(shè)計(jì)智能計(jì)算機(jī)與應(yīng)用第4卷

（3）網(wǎng)站主體區(qū)域：使用無序列表UL標(biāo)記的形式顯示高校的學(xué)術(shù)活動(dòng)信息和校園公告信息。

（4）網(wǎng)站新聞區(qū)域：顯示高校的近期新聞列表。

（5）網(wǎng)站友情鏈接區(qū)域：顯示了各兄弟院校網(wǎng)站的鏈接信息。

（6）網(wǎng)站版權(quán)信息區(qū)域：展示了高校門戶網(wǎng)站系統(tǒng)的版權(quán)信息和該高校的具體聯(lián)系方式及所處地理位置信息。

3采用DIV+CSS技術(shù)進(jìn)行頁面結(jié)構(gòu)設(shè)計(jì)的優(yōu)勢

經(jīng)過實(shí)際運(yùn)行的使用效果表明，DIV+CSS布局相對(duì)傳統(tǒng)的表格布局掌握起來要復(fù)雜一些，因?yàn)樵谶@種方式下，控制各布局的DIV層都是通過大量CSS規(guī)則代碼來實(shí)現(xiàn)的。但是DIV+CSS這種頁面布局方式一經(jīng)開發(fā)者熟練掌握之后，則會(huì)比表格布局更加靈活實(shí)用?，F(xiàn)對(duì)其表現(xiàn)出的設(shè)計(jì)優(yōu)勢具體表述如下：

（1）采用DIV+CSS技術(shù)進(jìn)行頁面結(jié)構(gòu)設(shè)計(jì)的高校門戶網(wǎng)站網(wǎng)頁，在調(diào)整各網(wǎng)頁容器模塊之間的相對(duì)位置時(shí)比較簡單。因?yàn)楦鱀IV 模塊間是相對(duì)比較獨(dú)立的，不受其它模塊的影響。

（2）采用DIV+CSS技術(shù)進(jìn)行頁面結(jié)構(gòu)設(shè)計(jì)的高校門戶網(wǎng)站網(wǎng)頁的頁面格式更改非常有效。DIV+CSS模式下網(wǎng)站的內(nèi)容代碼和格式代碼是相分離的，因此在調(diào)整和維護(hù)時(shí)高校門戶網(wǎng)站的布局結(jié)構(gòu)和顯示格式修改更加簡便有效。

（3）采用DIV+CSS技術(shù)進(jìn)行頁面結(jié)構(gòu)設(shè)計(jì)的高校門戶網(wǎng)站網(wǎng)頁，由于涉及的各布局DIV 層可以依次下載顯示，因此其網(wǎng)頁的訪問速度會(huì)比表格網(wǎng)頁布局方式更為快速。

（4）采用DIV+CSS技術(shù)進(jìn)行頁面結(jié)構(gòu)設(shè)計(jì)的高校門戶網(wǎng)站網(wǎng)頁對(duì)瀏覽器的兼容性高。因?yàn)镈IV+CSS網(wǎng)頁布局方式符合W3C標(biāo)準(zhǔn)的特性，使得該技術(shù)可以實(shí)現(xiàn)對(duì)瀏覽器軟件的向后兼容。

（5）DIV+CSS頁面結(jié)構(gòu)設(shè)計(jì)方式相比于表格布局方式，更加方便搜索引擎有效定位、使得在萬維網(wǎng)上快速搜尋高校門戶網(wǎng)站成為可能。

4結(jié)束語

采用DIV+CSS網(wǎng)頁布局技術(shù)的高校門戶網(wǎng)站系統(tǒng)網(wǎng)頁，克服了之前采用表格頁面布局方式的不足。這種將網(wǎng)頁內(nèi)容代碼與網(wǎng)頁格式代碼和網(wǎng)頁定位代碼相分離的技術(shù)，使得高校門戶網(wǎng)站的代碼更加簡潔，方便網(wǎng)站日后的升級(jí)和維護(hù)，極大地節(jié)省了維護(hù)網(wǎng)站的人力和物力成本。經(jīng)過實(shí)際應(yīng)用表明，采用DIV+CSS技術(shù)的高校門戶網(wǎng)站系統(tǒng)的下載速度明顯優(yōu)于采用表格布局技術(shù)的高校門戶網(wǎng)站系統(tǒng)網(wǎng)頁。而且，該技術(shù)在提高網(wǎng)頁下載速度的同時(shí)，更為有效地減少了網(wǎng)站網(wǎng)頁流量。

參考文獻(xiàn)：

[1]劉翼.DIV+CSS技術(shù)在延安大學(xué)網(wǎng)上考試系統(tǒng)中的應(yīng)用研究[J].電子設(shè)計(jì)工程，2012（10）：35 -37.

[2]周瀟.DIV+CSS技術(shù)在網(wǎng)頁重構(gòu)中的技巧應(yīng)用[J].赤峰學(xué)院學(xué)報(bào)（自然科學(xué)版），2011（12）：25 -26.

[3]袁磊，陳偉衛(wèi). 網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程[M].北京：清華大學(xué)出版社，2011.

[4]尚博. 基于DIV+CSS的網(wǎng)頁布局方式解析[J].電腦知識(shí)與技術(shù)，2010（27）： 7465-7467.

[5]陳婷婷.教務(wù)網(wǎng)站交互界面設(shè)計(jì)原則淺析[J].天津職業(yè)院校聯(lián)合學(xué)報(bào)，2011（3）：12 -14.

[6]孫曉娟.基于WEB標(biāo)準(zhǔn)的網(wǎng)頁布局的設(shè)計(jì)與實(shí)現(xiàn)[J].科技信息，2010（1）：44.