藍(lán)鷹

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

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

中圖分類號(hào)：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 引言

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

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

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

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

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

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

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

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

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

1.1.2.1搭建頁(yè)面主體框架

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

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

1.2.2.2 頁(yè)面全局屬性的定義

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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