高校門戶網(wǎng)站的頁面布局技術(shù)研究

藍(lán)鷹

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

關(guān)鍵詞：高校門戶網(wǎng)站 頁面布局技術(shù)

中圖分類號：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 引言

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

1 高校門戶網(wǎng)站的布局方式

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

1.1 高校門戶網(wǎng)站的表格布局研究

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

1.1.1 高校門戶網(wǎng)站表格頁面布局的設(shè)計

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

采用表格頁面布局的高校門戶網(wǎng)站可以迅捷的實現(xiàn)排版定位，從而使得高校門戶網(wǎng)站的頁面開發(fā)得到優(yōu)勢提速。圖1是采用表格頁面布局設(shè)計的高校門戶網(wǎng)站首頁抽象布局圖。

1.1.2 高校門戶網(wǎng)站表格頁面布局的實現(xiàn)

1.1.2.1搭建頁面主體框架

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

高校門戶網(wǎng)站首頁抽象布局圖的主體HTML實現(xiàn)代碼可做如下呈現(xiàn)：

1.2.2.2 頁面全局屬性的定義

關(guān)于高校門戶網(wǎng)站首頁的抽象布局圖的樣式實現(xiàn)，在本文中采用了CSS樣式表技術(shù)。利用CSS樣式格式對抽象布局圖的首頁背景、表格樣式、頁面文字大小和頁面文字顏色等進(jìn)行具體相應(yīng)設(shè)計。關(guān)鍵CSS代碼可表述如下：

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

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

1.2 高校門戶網(wǎng)站的DIV+CSS布局方式研究

目前，Web技術(shù)標(biāo)準(zhǔn)化程度得到了飛速提高與進(jìn)步，而窮采用DIV+CSS技術(shù)的標(biāo)準(zhǔn)化網(wǎng)頁布局方式也隨即吸引了開發(fā)者和網(wǎng)站用戶的廣泛青睞與關(guān)注。在不久的將來，即會取代絕大部分網(wǎng)頁的表格布局方式。

1.2.1高校門戶網(wǎng)站DIV+CSS頁面布局的設(shè)計

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

圖3是采用DIV+CSS頁面布局設(shè)計的高校門戶網(wǎng)站首頁抽象布局圖。

1.2.2高校門戶網(wǎng)站DIV+CSS頁面布局的實現(xiàn)

簡言之，采用DIV+CSS實現(xiàn)的高校門戶網(wǎng)站頁面結(jié)構(gòu)可總共分為如下部分：

1）頭部區(qū)域。實現(xiàn)網(wǎng)頁的標(biāo)題和頁面導(dǎo)航；

2）橫幅風(fēng)采展示區(qū)域；

3）主體區(qū)域。包括左側(cè)頁面內(nèi)容區(qū)域、中部頁面內(nèi)容區(qū)域和右側(cè)頁面內(nèi)容區(qū)域。

2 高校門戶網(wǎng)站2種布局方式的比較

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

參考文獻(xiàn)：

[1] 鄭婭峰，張永強. 網(wǎng)頁設(shè)計與開發(fā) [ M] .北京：清華大學(xué)出版社，2016 .

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

[3] 周方.基于模板技術(shù)的網(wǎng)站內(nèi)容管理系統(tǒng)的設(shè)計與實現(xiàn)[D].北京：北京交通大學(xué)，2009