張 麗

(安徽農(nóng)業(yè)大學(xué),安徽合肥 230036;山西管理職業(yè)學(xué)院,山西臨汾 041000)

近年來隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和各高校網(wǎng)站建設(shè)的不斷升級與更新,很多高等院校都有自己的校園信息平臺,因為在這個高度信息化的社會里,利用網(wǎng)絡(luò)的超時空特性,各大高?？梢宰尭嗟臑g覽者更好的了解自己的學(xué)校,因此網(wǎng)站建設(shè)已經(jīng)成為各大高校信息化建設(shè)的重要組成部分。

本文以山西管理職業(yè)學(xué)院為例,在收集國內(nèi)外已有成果資料的基礎(chǔ)上,針對目前山西管理職業(yè)學(xué)院現(xiàn)在自身的具體情況,并結(jié)合各個部門需求狀況,對該網(wǎng)站前臺頁面和后臺功能模塊的設(shè)計進(jìn)行了深入的分析和論述。

一、系統(tǒng)需求分析

需求分析是網(wǎng)站建設(shè)的一個重要階段,在這個階段確立了網(wǎng)站的根本任務(wù)和必須具有的功能,而需求分析的根本任務(wù)是確定系統(tǒng)必須完成哪些工作和要求,并不是確定怎樣完成它。例如該學(xué)院網(wǎng)站要求運行的環(huán)境,網(wǎng)站的需求量,瀏覽器的兼容性問題、長期使用的數(shù)據(jù)存儲等都是需求分析所要考慮到的內(nèi)容,因此,需求分析的結(jié)果是網(wǎng)站制作成敗的前提和基礎(chǔ)。所以一定要把握好需求分析這一階段。

本網(wǎng)站是一所獨立的高職院校門戶網(wǎng)站,與其他類型網(wǎng)站相比不需要太華麗的外表,需要的則是豐富的內(nèi)容與校園的氣息。高職院校的網(wǎng)站不但承載著對學(xué)院各部門信息的管理而且還具有對外宣傳的重大責(zé)任。高職院校網(wǎng)站的主頁是學(xué)院對外的窗口,能充分傳播信息,而且是瀏覽者了解學(xué)院最直接的平臺。所以要給瀏覽者留下更深更好的印象,得到瀏覽者的認(rèn)可,從而促進(jìn)學(xué)院的發(fā)展,主頁的版面設(shè)計就非常重要。當(dāng)然光有好的主頁設(shè)計也不能持久吸引讀者,發(fā)揮其自身作用的還是自身豐富的內(nèi)容。通過對各大高校網(wǎng)站與山西管理職業(yè)學(xué)院現(xiàn)狀的具體分析,該門戶網(wǎng)站主要包括網(wǎng)站首頁、學(xué)院概況、學(xué)生工作、教學(xué)科研、招生就業(yè)、校園文化建設(shè)、黨建工作、職業(yè)培訓(xùn)、后勤服務(wù)等欄目。

經(jīng)過需求分析階段的工作之后,系統(tǒng)要做什么,要達(dá)到什么要求就很清楚,便知道該如何規(guī)劃與設(shè)計了。

二、系統(tǒng)設(shè)計與規(guī)劃

網(wǎng)站系統(tǒng)設(shè)計過程通常由兩個主要階段組成,即前臺頁面設(shè)計和后臺功能設(shè)計。結(jié)合需求分析階段的具體要求內(nèi)容與山西管理職業(yè)學(xué)院辦學(xué)特色的實際情況設(shè)計規(guī)劃如下:

1、前臺頁面設(shè)計

網(wǎng)站的前臺設(shè)計即頁面版式及美工設(shè)計,主要包括布局、Banner、Logo與導(dǎo)航的設(shè)計,網(wǎng)站所需的背景與圖片可以使用Photoshop與Flash來完成。

該網(wǎng)站在前臺首頁整體頁面布局時,遵從人們從左往右、自上而下、先左上后右下的原則,選用了廣泛使用的“T”字形布局方式 (如圖1所示),主體內(nèi)容采用兩行布局方式,其中頂部為網(wǎng)站名稱、Flash Banner和主導(dǎo)航欄,以及底部的版權(quán)信息在整個網(wǎng)站的界面中都保持不動。主體內(nèi)容部分分為中上部和中下部,各分為左中右三部分,其中分割線正處在黃金分割點上,主要內(nèi)容放置在網(wǎng)頁打開的醒目位置,例如圖片新聞與學(xué)院動態(tài)。右下側(cè)集成了學(xué)院各個系統(tǒng)的登陸入口,方便了師生在此登陸各個校內(nèi)系統(tǒng)。

圖1 前臺頁面布局

該網(wǎng)站首頁布局方式按照以白色為主體色,頂部選擇平靜的淡藍(lán)色作為基本色調(diào),由學(xué)院名稱及右邊的大門圖片組成,Banner是用Flash制作出的流云效果,并且飄動著學(xué)院的校訓(xùn),網(wǎng)站其他各個分頁的頂部和此效果相似,有效地保證了網(wǎng)站風(fēng)格的一致性。簡約而不簡單,素雅而不單調(diào)。

網(wǎng)站頁面導(dǎo)航欄目設(shè)計的內(nèi)容不僅僅是根據(jù)對學(xué)院網(wǎng)站要求直接體現(xiàn)信息架構(gòu),也是為了讓網(wǎng)站瀏覽者高效達(dá)成預(yù)期目標(biāo)的一種手段和方法。

(1)全局導(dǎo)航設(shè)計

“全局”并不意味著這個導(dǎo)航會出現(xiàn)在網(wǎng)站的每一個頁面中,相反地,全局導(dǎo)航是按照科學(xué)分類,模擬用戶的實際瀏覽行為,提供給用戶需要從網(wǎng)站的首頁面到目標(biāo)頁面的關(guān)鍵點。用戶想去哪里,都可以通過全局導(dǎo)航到達(dá)目標(biāo)頁面。

該校園門戶網(wǎng)的導(dǎo)航采用多級菜單,分為網(wǎng)站首頁、學(xué)院概況、教學(xué)科研、學(xué)生工作、招生就業(yè)、校園文化建設(shè)、黨建工作、職業(yè)培訓(xùn)、后勤服務(wù)九個分類,每個分類根據(jù)相關(guān)內(nèi)容,下分子導(dǎo)航,每一個都要完成在各種情形中成功引導(dǎo)用戶的任務(wù)。

(2)局部導(dǎo)航設(shè)計

局部導(dǎo)航是可以提供給用戶一個頁面的父級、兄弟級和子級頁面。反映了用戶對這個網(wǎng)站的內(nèi)容結(jié)構(gòu)的思路。

以學(xué)生工作的頁面導(dǎo)航為例,在這個頁面提供了較好的局部導(dǎo)航,用戶進(jìn)入學(xué)生工作欄目,若要瀏覽學(xué)生工作的相關(guān)內(nèi)容,用戶可在此頁面左邊的局部導(dǎo)航中直接進(jìn)入,方便了用戶的行為需求。

該學(xué)院在對網(wǎng)站進(jìn)行頁面設(shè)計的過程中,遵循XHTM L 1.0 Transitional的設(shè)計標(biāo)準(zhǔn),并在HTML頁面頂部標(biāo)示出文檔類型,網(wǎng)站采用gb2312字符集進(jìn)行編碼,整個頁面采用CSS+DIV的方式進(jìn)行頁面布局設(shè)計,將頁面結(jié)構(gòu)和表現(xiàn)分離,有效保證了網(wǎng)站頁面代碼的簡潔性。針對現(xiàn)在一些常見用戶使用的瀏覽器,如360瀏覽器、遨游瀏覽器、搜狗瀏覽器、QQ瀏覽器、Internet Explorer、Chrome、Firefox進(jìn)行了頁面的兼容性測試,保證頁面在多種瀏覽器中瀏覽不會出現(xiàn)錯位等異?，F(xiàn)象。

2、后臺功能設(shè)計

該網(wǎng)站后臺頁面的登陸中使用程序添加了圖片驗證碼功能,減小了黑客等人群使用軟件猜測后臺密碼,惡意登陸的可能性。進(jìn)入網(wǎng)站后臺首頁面中,右側(cè)顯示了當(dāng)前服務(wù)器的各項參數(shù),管理者可以通過這些內(nèi)容詳細(xì)了解到當(dāng)前服務(wù)器的運行狀況,并根據(jù)反映的狀況進(jìn)行相應(yīng)的服務(wù)器維護(hù)操作。

該網(wǎng)站后臺采用常用的樹形導(dǎo)航菜單,其中具體內(nèi)容包括系統(tǒng)維護(hù)、學(xué)校首頁、招生就業(yè)、評建在線、精品課程、教學(xué)科研、學(xué)生工作、校園文化建設(shè)、黨建工作、職業(yè)培訓(xùn)、后勤服務(wù)共11項。系統(tǒng)維護(hù)中包括員工管理,角色管理等,針對不同的用戶賦予不同的權(quán)限,有效保證了管理上的嚴(yán)密性;學(xué)校首頁主要用于控制網(wǎng)站首頁的各版塊上傳信息內(nèi)容;其他菜單項目用于各個相關(guān)內(nèi)容的管理。這種分類明確的樹形菜單方式對于網(wǎng)站的各級管理者來說,是非常方便的,方便各角色的管理者很迅速地找到相關(guān)的內(nèi)容,進(jìn)行添加、修改、刪除等操作。除此之外,各一級導(dǎo)航欄目還可以隨意添加、修改與刪除下設(shè)的二級欄目內(nèi)容。例如,招生就業(yè)下設(shè)的招生就業(yè)分類管理可以修改與刪除其分類內(nèi)容。添加招生就業(yè)分類便可以添加分類。這就使得網(wǎng)站的導(dǎo)航欄目功能可以擴(kuò)充。

三、總結(jié)

網(wǎng)站設(shè)計時,除了上述要點外,還應(yīng)注意要素和容量應(yīng)安排得當(dāng)。除了重點欄目信息放在突出醒目的位置外,整個空間也要排序適當(dāng)。網(wǎng)站導(dǎo)航也要有一定的規(guī)律。網(wǎng)頁也應(yīng)易讀,視聽效果不能過度使用,以免喧賓奪主。一個成功的網(wǎng)站,除了科學(xué)的規(guī)劃和設(shè)計外,細(xì)節(jié)也會影響網(wǎng)站的成敗。

[1]高川.談高校網(wǎng)站的主頁設(shè)計[J].考試周刊,2012,(12).

[2]孫立鑫介龍梅.校園門戶網(wǎng)站的設(shè)計與實現(xiàn)[J].電腦學(xué)習(xí),2012,(2).

[3]譚嵐丹.網(wǎng)站設(shè)計中導(dǎo)航系統(tǒng)的藝術(shù)性 [J].大眾文藝學(xué)術(shù)版,2011,(12).