高校門戶網站的頁面布局技術研究

藍鷹

摘要：隨著時代的發展，高校門戶網站在日常招生、就業、教學過程中起到越來越重要的作用。高校門戶網站頁面布局的好壞直接決定的門戶網站的美觀程度?？茖W合理的頁面布局不僅能夠提高網頁的顯示效果，而且能夠極大地提高網頁的下載速度，提升網站訪問者體驗的滿意度。

關鍵詞：高校門戶網站 頁面布局技術

中圖分類號：TP302.1

Abstract：With the development of the times， the university portal website plays a more and more important role in the daily recruitment、employment、and teaching process. The appearance of the university portal website is directly determined by the quality of the web page layout. Scientific and reasonable layout of pages may not only improve the page display effect， but also can greatly improve the download speed of the pages and enhance the satisfaction of website visitors.

Key words：university portal website； layout of Web page

0 引言

隨著移動互聯和網絡信息技術的發展，教學資源信息化及教學課程共享化已經成為當今高校教學的一個至關重要的設計配置環節。與此同時，高校教學網絡化也獲得了廣泛普及與深度實施，高校日常的眾多業務已然重度依賴于高校門戶網站各項功能的全方位集成與開發，如網絡課程建設，網絡科研建設，網絡專業建設，網絡招生，網絡就業等。高校門戶網站頁面布局的好壞將直接決定門戶網站的美觀程度?？茖W合理的頁面布局不僅能夠突出網頁的顯示效果，而且能夠顯著優化網頁的下載速度，進而提升網站訪問者體驗的滿意度。

1 高校門戶網站的布局方式

本文主要探討目前比較流行的2種布局方式，即表格布局方法和DIV+CSS布局方法，并給出其各自對應的設計方式和實現方法。

1.1 高校門戶網站的表格布局研究

表格布局方式屬于傳統設計范疇，在網頁超文本標記語言發展之初，設計者如果要將網頁內的各種元素定制在網頁的具體位置上則并非易事，通常網頁設計者會利用表格的各種特性（如嵌套表格技術，表格單元格合并技術，表格行高和列表的設置、表格邊框線隱藏等）來達到頁面布局的可視化開發目的[1]。

1.1.1 高校門戶網站表格頁面布局的設計

表格頁面布局的設計方法是先期集成規劃頁面中各種插入元素的具體位置和大小，其次通過表格的行和列將這些區域劃分出來，而后再將頁面中的待插入元素配置到相應的單元格內，最后利用表格的各種屬性精細調整各個單元格的大小、位置，進而使頁面中的各個元素所在的位置與實際設計效果圖相吻合，在此基礎上還需設計表格的背景、頁面水平對齊方式，并將表格邊框線隱藏[2]。由此，即可得到實習一個頁面布局合理并兼具美觀的Web頁面效果。

采用表格頁面布局的高校門戶網站可以迅捷的實現排版定位，從而使得高校門戶網站的頁面開發得到優勢提速。圖1是采用表格頁面布局設計的高校門戶網站首頁抽象布局圖。

1.1.2 高校門戶網站表格頁面布局的實現

1.1.2.1搭建頁面主體框架

高校門戶網站首頁的抽象布局圖可以使用一個4行2列的表格來給出描述構建，但是考慮到頁面的加載速度，本次研究采用了4個單獨的列表格來做設計實現。這種研發方式不僅能夠提高頁面的加載速度，并且能夠降低板塊間的耦合性，利于日后網站的維護和升級[3]。

高校門戶網站首頁抽象布局圖的主體HTML實現代碼可做如下呈現：

1.2.2.2 頁面全局屬性的定義

關于高校門戶網站首頁的抽象布局圖的樣式實現，在本文中采用了CSS樣式表技術。利用CSS樣式格式對抽象布局圖的首頁背景、表格樣式、頁面文字大小和頁面文字顏色等進行具體相應設計。關鍵CSS代碼可表述如下：

1.2.2.3 采用表格布局的高校門戶網站首頁效果展示

采用表格布局的高校門戶網站首頁效果如圖2所示。

1.2 高校門戶網站的DIV+CSS布局方式研究

目前，Web技術標準化程度得到了飛速提高與進步，而窮采用DIV+CSS技術的標準化網頁布局方式也隨即吸引了開發者和網站用戶的廣泛青睞與關注。在不久的將來，即會取代絕大部分網頁的表格布局方式。

1.2.1高校門戶網站DIV+CSS頁面布局的設計

DIV+CSS的方式，采用DIV標記進行頁面的布局分塊，而后使用CSS層疊樣式表技術來控制各個DIV模塊的具體大小、擺放位置、對齊方式、背景顏色、內部文字字體顏色等網頁外觀特征。

圖3是采用DIV+CSS頁面布局設計的高校門戶網站首頁抽象布局圖。

1.2.2高校門戶網站DIV+CSS頁面布局的實現

簡言之，采用DIV+CSS實現的高校門戶網站頁面結構可總共分為如下部分：

1）頭部區域。實現網頁的標題和頁面導航；

2）橫幅風采展示區域；

3）主體區域。包括左側頁面內容區域、中部頁面內容區域和右側頁面內容區域。

2 高校門戶網站2種布局方式的比較

表格布局方式是一種比較傳統的技術選用，其主要優點為：開發者使用方便，布局簡單、實現快捷、瀏覽性兼容性均為優良。缺點是網頁結構復雜，日后網站維護困難，開發人員維護工作量較大。DIV+CSS頁面布局方式的優點為頁面布局靈活、網頁結構較清晰，日后網站維護較輕松、網頁表現與內容分離，便于網站重構網頁、更加適應搜索引擎等。缺點是開發人員需要仔細考慮平臺的兼容性。經過測試實驗表明，在進行頁面布局時，表格布局方式適用于網頁結構簡單并且內容變動率低微的高校門戶網站。而DIV+CSS頁面布局方式則適用于結構較復雜，日后將會進行頻繁維護和更新的高校門戶網站。

參考文獻：

[1] 鄭婭峰，張永強. 網頁設計與開發 [ M] .北京：清華大學出版社，2016 .

[2] 于淑云.高?？膳渲镁W站集群前端框架設計[J].長春工業大學學報（自然科學版），2015，36（5）：519-523.

[3] 周方.基于模板技術的網站內容管理系統的設計與實現[D].北京：北京交通大學，2009