從技術層面淺析高校網站的建設現狀

摘 要： 從網站構建技術層面對國內高校門戶網站的建設現狀進行分析，內容涉及網站的整體編碼質量、兼容性、可訪問性，設計和交互性等。結合時代現狀、行業建議和實際開發中需要遵循的規則，對高校網站的構建技術現狀做出了相應的評價。為使高校門戶網站能夠順應移動互聯網時代的潮流，提高網站的易用性和健壯性，滿足日益增長的用戶需求，提出了一些前瞻性建議，可為同類建設提供參考。

關鍵詞： 高校門戶網站； 兼容性； 編碼質量

中圖分類號：TP311 文獻標志碼：A 文章編號：1006-8228（2015）10-17-04

Abstract： This paper gives a deep and detailed analysis on the status quo of the construction of Web portals in Chinese universities， which mainly focuses on the technologies of Websites building progress. The content includes code quality， compatibility， accessibility， design， and interactivity of Websites and so on. Combining with the present situation of the times， the industry recommendations， and the rules that should be followed in the actual development， the evaluation is made for the construction technology of the university portal Website. In order to make the university portal Website comply with the trend of the mobile Internet era， improve the Website's usability and robustness， and meet the growing needs of users， some suggestions are put forward， which can provide reference for similar construction.

Key words： university portal Website； compatibility； code quality

0 引言

高校門戶網站在某種意義上可以被認為是一個高校的名片，一張名片設計的好壞，從側面反映了這個高校的形象。然而高校的門戶網站卻普遍存在著可訪問性不強，對瀏覽器兼容性不好，內容繁瑣或設計陳舊等不符合時代特點的問題。目前大部分高校都已經建成了自己的門戶網站，但是高質量的門戶網站并不多見。本文撇開網站內容，僅僅對網站建設過程中采用的技術進行分析，提出一些建議，希望能夠在今后的網站建設過程中給建設者提供一些有益的參考。

1 網站構建整體要求

2015年已經進入了移動為先的互聯網時代，對網站的建設要求也越來越高，然而，高校門戶網站的整體建設質量卻良莠不齊。在對部分高校的門戶網站進行相應分析之后，結合發現的問題，總結出網站建設開發應滿足以下要求：

⑴ 表現與內容分離；

⑵ 代碼格式遵循標準；

⑶ 避免Flash的使用；

⑷ 應該具有良好的兼容性。要求網站能夠在各種瀏覽器中完成優雅解析；

⑸ 能夠實現移動設備等多分辨率的適配；

⑹ 能夠有體現高校特色的設計與美化效果，并有一定的交互表現。

據此對具有代表性的部分高校門戶網站進行了分析（分析日期截止2015年3月10日，各個高校門戶網站已經改版多次，以截止日期版本為準）。

2 表現與內容分離

傳統的網站布局方式大多是用Table布局，內容和表現糅雜在一起，對網頁的修改和維護造成相當大的困難，現在比較流行的是采用DIV進行結構的設計，用CSS進行表現的處理，再加上行為交互。表1是對39所985高校[7]編碼中是否進行內容與表現分離的統計。

在被統計的39所高校中有12所高校仍把控制網頁表現的代碼與實現網頁內容的代碼糅合在一起，已有三分之二的高校已經實現內容與表現分離。

為了實現頁面表現不依賴數據，實現數據層與表現層的解耦，推薦DIV+CSS的方式進行網頁的結構設計與外觀表現[2]，實現內容與表現的分離。內容與表現分離的網站對搜索引擎是友好的，訪問速度更快，代碼更加簡潔優美，而且維護更加方便，修改網站外觀時僅需修改樣式文件即可，并不需要對網頁結構進行修改，大大降低了網頁的維護成本。而對于Table布局的網頁而言，有很多弊端，例如沒有辦法實現靈活的布局，對JavaScript并不友好，對實現動態交互效果非常不便。綜合上述幾點，我們推薦使用DIV+CSS實現內容與表現分離。

3 代碼格式遵循標準

在現代Web構建技術中，應遵循幾點：元素名推薦小寫，在XHTML文檔中標簽必須閉合。研究發現，大部分高校網站已經采用HTML5的文檔類型聲明，即在網頁文檔首部用<！DOCTYPE html>的形式聲明網頁文檔的類型。在HTML5標準下雖然并不需要完全采用小寫英文字母聲明標簽，但是這并不是被推薦的，在W3School中有以下說明：“W3School使用的是小寫字母標簽，因為萬維網聯盟（W3C）在 HTML 4中推薦使用小寫，而在未來（X）HTML版本中強制使用小寫。”[3]。在實際統計中，大部分985高校門戶網站在編碼過程中都遵守了這一建議，但仍然有少部分網站是大小寫雜糅使用，或者完全使用大寫標簽。

從南京大學主頁的代碼片段中可以很明顯地看出，其在布局過程中采用了TABLE與DIV混合布局，在代碼格式上，大小寫標簽混用，代碼比較混亂，并不符合“標簽使用小寫英文字母”的建議。

在XHTML聲明的網頁文檔中標簽要求閉合。在HTML語言中存在自閉合標簽，以換行標簽“br”為例，有兩種使用方式：“

”與“”，同樣地“即使

在所有瀏覽器中都是有效的，但使用其實是更長遠的保障。”[3]。但是實際在網頁建設過程中，我們并不強制開發者必須遵循后者，但是應當采用同一種方式進行編碼，而不應該混合起來使用。

同樣是南京大學的門戶網站首頁，如圖2、圖3，其文檔聲明為：

在其網頁文檔開頭的link標簽中（第8-9行）采用了第二種標簽閉合方式，而在79行代碼中的“img”標簽并沒有閉合，這種同時使用閉合和不閉合的方式是不被推薦的。如圖4、圖5。

還需要舉例的還有天津大學的新版主頁，其主頁文檔聲明為：

其采用的是XHTML可擴展超文本標記語言，聲明這個標準，意味著需要遵循更加嚴格的語法，具體而言就包括必須把所有的自閉合標簽閉合，但是在檢查其代碼的過程中發現，其代碼的第7行、第8行“link”標簽處都沒有閉合標簽。如圖6、圖7。

在157行代碼中，同樣是“img”標簽也沒有閉合，從以上例子可以看出，在高校網站的建設過程中，網站的編碼質量還是有提升空間的。

4 良好的兼容性

4.1 是否采用Flash技術構建網站

Flash是非常好的技術，但是隨著時代進程的推進，Flash似乎有些力不從心，隨著HTML5標準的確定，Adobe也已經退出了Android平臺，與此同時Apple移動端的設備不支持Flash，在某種程度上Flash現在已經被移動設備給拋棄了。現在是移動互聯網時代，不符合時代潮流的技術我們應當適當地摒棄。為了網站能有更好的可訪問性，我們并不推薦使用Flash來構建網頁的交互功能。然而實際上，大部分網站還在用Flash制作焦點圖等效果。事實上，JavaScript可以作為很好的替代方案，并且所有的現代瀏覽器都支持JavaScript，包括移動設備上的瀏覽器。在對國內具有代表性的高校進行研究的過程中發現，985大學的門戶主頁中Flash的使用已經比較少見，但是在211工程大學中相當一部分大學仍在使用Flash，圖8就是一個比較鮮明的例子。

湘潭大學主頁有兩處（1、2兩處）使用了flash用于表現焦點圖，雖然這是美化網站的一種手段，但是已經不符合時代了。

同樣的還有延邊大學首頁（圖9）。

延邊大學首頁的頁頭banner和導航欄采用flash制作，這種banner對移動用戶相當不友好。圖9是用iPhone5s自帶的Safari瀏覽器和三星手機自帶瀏覽器訪問該網站的效果，完全沒有辦法看到主要的banner和導航欄，也就是說，連該網站最基本的標識都已經沒有辦法識別，同樣導航欄已經完全沒有辦法顯示，無法正常訪問，失去了一個網站應該有的大部分功能。在移動互聯網時代，采用這一技術的確是過時了。

4.2 是否有良好的多瀏覽器兼容性

網站的可訪問性包括對多瀏覽器的適配，隨著時代的進步，瀏覽器技術也在不斷革新。網站的建設者需要考慮網站在各種瀏覽器中的適配情況，根據百度的統計[8]，最近六個月市場瀏覽器市場占用情況如圖10。

對各個高校的門戶網站用主流的三種瀏覽器（Chrome，IE8.0，搜狗高速）進行測試，以下取比較有代表性的太原理工大學網站進行說明。

太原理工大學官網主頁在Chrome瀏覽器中的表現并不符合設計初衷，整個網頁向左偏移，然而在IE8.0中的表現卻不錯，然而Chrome這樣的現代瀏覽器，就性能和解析力而言是超過IE8.0的，對網頁的表現反而不盡如人意。可以說明這個網站的設計編碼是不向上兼容的。如圖11。

在網頁的編碼過程中，應該做到優雅降級，原則上應該是在高版本現代瀏覽器中有完美表現，在低版本瀏覽器中有相應替代方案，首先不應使功能欠缺，其次應該在表現上保持一定的一致性。對低版本的瀏覽器進行HACK，雖然會增加成本，卻可以很好地增強兼容性并提高用戶體驗。研究發現，各個高校在兼容性方面所做的努力也乏善可陳。對各個高校進行統計后，僅僅在幾所大學的主頁代碼中發現了對低版本IE瀏覽器進行了HACK。復旦大學在主頁代碼中對低版本的IE瀏覽器提供了多種解決方案，從而使低版本的IE瀏覽器也能較為優雅地展示網頁，但是這么做的高校網站少之又少。復旦大學瀏覽器hack代碼片段如圖12。

非常值得一提的是廈門大學主頁，其對低版本IE瀏覽器（IE6.0及以下）進行了用戶提醒，為那些仍在使用低版本瀏覽器的用戶升級其瀏覽器做出了一定的貢獻，廈門大學的這種做法是有相當的前瞻性的。

5 移動設備多分辨率適配

響應式設計已經成為了網頁設計的潮流，但是能夠跟上這個潮流的高校卻寥寥無幾，清華大學作為先行者，在多分辨率適配[6]方面已經做得很好。不管是手機還是平板電腦，清華大學的主頁都能給用戶以很好的體驗。但真正能做到這點的高校少之又少。對39所985工程高校統計做到響應式設計的僅有：清華大學、廈門大學、華東師范大學、北京師范大學、復旦大學、中南大學等。

南京師范大學的主頁在門戶網站的建設上，也走在了時代的前列，完成了多分辨率適配。

在實現多屏幕分辨率適配的過程中，不得不提的就是媒體查詢（Media Queries），利用Media Queries定義查詢關鍵字，配合viewport虛擬窗口，可以讓網頁文檔在不同的設備及分辨率下具有不同的表現。在內容與表現分離的網頁中只需要對CSS樣式進行修改，并簡單地加上一些聲明（給網頁加上viewport和Media Queries樣式模塊聲明）即可（Media Queries 是CSS3新特性）。

6 動態效果與交互

網站的動態效果也是現代網站不可或缺的因素之一，Flash曾被廣泛應用于給網站添加動態效果，但是在兼容性評價中，Flash致命缺點，使我們不得不把目光轉向其他替代方案——JavaScript。在網站建設過程中，JavaScript代碼是不可或缺的成分之一，其可以替代Flash提供焦點圖的效果，可以實現下拉菜單導航，可以完成不同瀏覽器的兼容，可以完成多分辨率的適配。同樣的，可以提供優秀的網頁交互功能。

據統計，39所985高校中有29所高校使用JavaScript來實現焦點圖效果。山東大學使用了Flash來實現焦點圖，而其余高校并沒有使用焦點圖效果。可以看出，高校網站已經普遍采用了JavaScript作為動態效果的支撐，為了更好的用戶體驗，各個高校也開始意識到JavaScript是一個非常有用的工具。當然JavaScript并不只用于實現焦點圖，在研究過程中發現，清華大學主頁用JavaScript代碼做網站訪問量統計，廈門大學用JavaScript實現了效果絢麗的導航欄菜單，浙江大學主頁用JavaScript實現了能夠容納大量信息的TAB效果，上海交通大學用JavaScript代碼實現了優雅的鼠標跟隨聚焦效果，中國人民大學主頁整站基本依靠JavaScript代碼實現整站內容展示功能等等。可見在高校網站中，JavaScript代碼已經隨處可見，同時各個高校對絢麗的網站展示效果也有了一定的追求，但是也不乏一些高校仍然停留在純HTML+CSS結構上，明顯跟不上時代的步伐。

7 結束語

本文從技術層面對國內高校門戶網站進行簡單的分析，可以得出這樣結論：我國高校門戶網站已經開始探索整個網站建設的前沿技術，同時也有一部分網站開始向前沿技術靠攏。但總體上看，在技術層面還是稍有欠缺，缺乏進步性和前瞻性。作為國內學術前沿的高校，其門戶網站建設水平提升空間還是相當大的，希望在今后的網站建設中能夠多采用先進技術，提升國內高校門戶網站建設的整體水平。

參考文獻：

[1] 劉歡，盧蓓蓉.中美高校門戶網站的比較與思考[J].中國教育信息化，2012.3：4-6

[2] 劉松.采用DIV+CSS技術的高校門戶網站系統分析和設計[J].智能計算機應用，2014.4（8）：68-71

[3] W3School，HTML元素[EB/OL]， http：//www.w3school.com.cn/html/html_elements.asp，2015.3.10.

[4] 洪勇軍.面向移動終端的屏幕自適應網頁設計[J].技術與方法，2014.33（3）：65-69

[5] 陳祖琴.改進高校門戶網站可用性的建議[J].Person Education，2013.8：77-78

[6] 林帝浣，曾海標，關偉豪.高校門戶網站建設探討[J].中山大學學報（自然科學版），2003.42（6）增刊：264-266

[7] 教育部.“985工程”學校名單[EB/OL].http：//www.moe.edu.cn/publicfiles/business/htmlfiles/moe/s238/201112/128833.html，2015.3.10.

[8] 百度流量研究院.瀏覽器市場份額[EB/OL].http：//tongji.baidu.com/data/browser，2015.3.10.