采用DIV+CSS技術的高校門戶網站系統分析和設計

摘要：本文針對采用傳統表格布局方式的高校門戶網站系統設計的局限性，如下載速度慢，網頁代碼不清晰，維護成本大等缺點，給出了采用DIV+CSS布局技術的高校門戶網站系統設計方案。實驗表明采用DIV+CSS技術頁面布局方案一經開發者熟練掌握之后，將會比表格布局更加靈活實用。

關鍵詞：DIV+CSS頁面布局； Table頁面布局； 高校門戶網站

中圖分類號：TP3021 文獻標識碼：A文章編號：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引言

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

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

1DIV+CSS頁面布局技術

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

CSS標記語言的代碼應用于網頁一共有四種方式：直接在HTML標記的Style屬性中存放CSS代碼；寫入網頁Head標記內的內部樣式規則；嵌入外部樣式規則和鏈接外部樣式規則。這種外部樣式規則是把CSS代碼放在一個獨立于網頁文件的普通文本文件中，該文本文件要求必須使用css作為文件的擴展名。外部樣式表使得網站開發者可以通過簡單地更改 CSS 文件，從而實現改變網頁的整體表現形式的目的。如此一來，就節省了網站維護成本，也提高了網站的維護效率，更使得只要通過操作一個CSS文件就可以改變整個網站頁面的外觀風格和布局方式。

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

DIV+CSS 布局方式的思路是首先使用DIV容器標記，將網頁劃分成幾個模塊，每個DIV標記可以對應一個獨立的網頁模塊[5]。其后把頁面的內容元素分別放入所對應的DIV模塊中，再通過CSS規則來控制每個容器模塊的樣式，并采用CSS邊框屬性（Border）、填充屬性（Padding） 、邊界屬性 （Margin） 和浮動屬性 （Float）來控制容器模塊間的相對位置，最終確定相互之間的布局方案和位置關系[6]。

2采用DIV+CSS技術的高校網站系統分析和設計

高校門戶網站系統從功能上劃分共分為以下幾個模塊：首頁、學校概況、機構設置、師資隊伍、人才培養、科學研究、國際交流、學生工作、招生信息、就業指導和公共服務。各模塊的詳細結構即如圖1所示。

（1）網站LOGO區域：用來顯示高校名稱和其LOGO標志圖片。

（2）網站導航區域：以導航鏈接列表的形式顯示網站的各個功能模塊超鏈接。主要鏈接內容包括首頁鏈接、學校概況鏈接、機構設置鏈接、師資隊伍鏈接、人才培養鏈接、科學研究鏈接、國際交流鏈接、學生工作鏈接、招生信息鏈接、就業指導鏈接和公共服務鏈接等。 第4期劉松：采用DIV+CSS技術的高校門戶網站系統分析和設計智能計算機與應用第4卷

（3）網站主體區域：使用無序列表UL標記的形式顯示高校的學術活動信息和校園公告信息。

（4）網站新聞區域：顯示高校的近期新聞列表。

（5）網站友情鏈接區域：顯示了各兄弟院校網站的鏈接信息。

（6）網站版權信息區域：展示了高校門戶網站系統的版權信息和該高校的具體聯系方式及所處地理位置信息。

3采用DIV+CSS技術進行頁面結構設計的優勢

經過實際運行的使用效果表明，DIV+CSS布局相對傳統的表格布局掌握起來要復雜一些，因為在這種方式下，控制各布局的DIV層都是通過大量CSS規則代碼來實現的。但是DIV+CSS這種頁面布局方式一經開發者熟練掌握之后，則會比表格布局更加靈活實用?，F對其表現出的設計優勢具體表述如下：

（1）采用DIV+CSS技術進行頁面結構設計的高校門戶網站網頁，在調整各網頁容器模塊之間的相對位置時比較簡單。因為各DIV 模塊間是相對比較獨立的，不受其它模塊的影響。

（2）采用DIV+CSS技術進行頁面結構設計的高校門戶網站網頁的頁面格式更改非常有效。DIV+CSS模式下網站的內容代碼和格式代碼是相分離的，因此在調整和維護時高校門戶網站的布局結構和顯示格式修改更加簡便有效。

（3）采用DIV+CSS技術進行頁面結構設計的高校門戶網站網頁，由于涉及的各布局DIV 層可以依次下載顯示，因此其網頁的訪問速度會比表格網頁布局方式更為快速。

（4）采用DIV+CSS技術進行頁面結構設計的高校門戶網站網頁對瀏覽器的兼容性高。因為DIV+CSS網頁布局方式符合W3C標準的特性，使得該技術可以實現對瀏覽器軟件的向后兼容。

（5）DIV+CSS頁面結構設計方式相比于表格布局方式，更加方便搜索引擎有效定位、使得在萬維網上快速搜尋高校門戶網站成為可能。

4結束語

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

參考文獻：

[1]劉翼.DIV+CSS技術在延安大學網上考試系統中的應用研究[J].電子設計工程，2012（10）：35 -37.

[2]周瀟.DIV+CSS技術在網頁重構中的技巧應用[J].赤峰學院學報（自然科學版），2011（12）：25 -26.

[3]袁磊，陳偉衛. 網頁設計與制作實例教程[M].北京：清華大學出版社，2011.

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

[5]陳婷婷.教務網站交互界面設計原則淺析[J].天津職業院校聯合學報，2011（3）：12 -14.

[6]孫曉娟.基于WEB標準的網頁布局的設計與實現[J].科技信息，2010（1）：44.