談高職院校門戶網(wǎng)站系統(tǒng)設計

張 麗

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

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

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

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

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

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

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

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

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

1、前臺頁面設計

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

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

圖1 前臺頁面布局

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

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

(1)全局導航設計

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

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

(2)局部導航設計

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

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

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

2、后臺功能設計

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

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

三、總結

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

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

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

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