郭彥輝

（廣州番禺職業(yè)技術(shù)學(xué)院 藝術(shù)設(shè)計學(xué)院，廣東 廣州 511483）

0 引言

隨著各類上網(wǎng)設(shè)備的發(fā)展和普及使用，用戶使用智能手機、平板電腦、桌面電腦和筆記本電腦等設(shè)備訪問網(wǎng)站的情況普遍。如何使網(wǎng)站內(nèi)容在各種不同屏幕分辨率下保持良好的顯示效果，并使用戶獲得良好的體驗是需要關(guān)注和解決的問題。自從Ethan Marcotte提出響應(yīng)式 Web設(shè)計（RWD，Responsive Web Design）[1]概念以來，其設(shè)計方法能夠使同一網(wǎng)站兼容不同終端設(shè)備的訪問，而不需要為每個終端定制開發(fā)相應(yīng)的版本，可以有效降低網(wǎng)站開發(fā)的復(fù)雜性和維護的難度。這種設(shè)計方法對于高職院校的網(wǎng)站建設(shè)來說同樣具有應(yīng)用價值。本文以學(xué)校的招生信息網(wǎng)站改版設(shè)計為例，介紹該網(wǎng)站響應(yīng)式設(shè)計實現(xiàn)的過程及技術(shù)要點。

1 網(wǎng)站改版需求分析與規(guī)劃

廣州番禺職業(yè)技術(shù)學(xué)院原招生信息網(wǎng)站由多個獨立運行的子網(wǎng)站構(gòu)成，這些子站面向的招生類型不同，先后獨立規(guī)劃設(shè)計、開發(fā)和管理。隨著學(xué)校招生宣傳和服務(wù)工作的推進，網(wǎng)站的內(nèi)容與功能需求有所變化，需要重新規(guī)劃設(shè)計與開發(fā)。為了便于今后對網(wǎng)站的統(tǒng)一管理與維護，同時，也為滿足網(wǎng)站來自移動設(shè)備訪問的需求，此次網(wǎng)站改版的內(nèi)容主要包括兩個方面：（1）將原有多個子站合并成為單獨一個網(wǎng)站，并使用網(wǎng)站群系統(tǒng)來實現(xiàn)網(wǎng)站的后臺管理功能，學(xué)校相關(guān)的招生信息將集中統(tǒng)一發(fā)布在該網(wǎng)站上。（2）采用響應(yīng)式設(shè)計使網(wǎng)站能夠兼容多種主流的終端設(shè)備，并且保持統(tǒng)一的設(shè)計風(fēng)格。

在新版招生信息網(wǎng)站的規(guī)劃中，對原先各子站的內(nèi)容和功能模塊進行調(diào)整合并，重新設(shè)計網(wǎng)站的信息架構(gòu)和頁面布局。新版網(wǎng)站主要包括招生計劃、報考指南、招生咨詢和錄取查詢等主要欄目內(nèi)容。

2 響應(yīng)式招生信息網(wǎng)站的實現(xiàn)

2.1 頁面設(shè)計及構(gòu)建

以往進行網(wǎng)頁設(shè)計時，會先以桌面電腦顯示器分辨率作為參考進行固定寬度設(shè)計，再針對小屏幕進行內(nèi)容重排。在響應(yīng)式設(shè)計中，應(yīng)該先針對小屏幕進行設(shè)計，再逐步增強針對大屏幕的設(shè)計和內(nèi)容[2]。在智能手機這類小屏幕設(shè)備設(shè)計中，網(wǎng)站內(nèi)容按照重要程度自上而下排列顯示，內(nèi)容元素和屏幕等寬，布局結(jié)構(gòu)以豎向單列顯示。布局隨著設(shè)備屏幕尺寸變寬其結(jié)構(gòu)也由單列變成多列形式，頁面最寬時適合于桌面電腦的顯示。網(wǎng)站首頁頁面設(shè)計簡稿如圖1所示。

圖1 不同顯示下的頁面設(shè)計簡稿Fig.1 Brief manuscript with different visual for webpage design

網(wǎng)站首頁的html結(jié)構(gòu)大致如下：