郭彥輝

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

0 引言

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

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

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

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

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

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

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

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

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