基于HTML5技術的高校門戶網站設計

藍鷹

摘要：針對目前大多數高校門戶網站采用HTML4技術實現的網頁代碼結構不清晰等局限性，本文提出了一套基于HTML5+CSS技術的高校門戶網站生成方案。該方案具有Web標準統一，輕松實現跨平臺等優點。

關鍵詞：HTML5； CSS；跨平臺

中文分類號：TP311 文獻標識碼： A文章編號：2095-2163（2015）04-

Design of University Portal Website based on HTML5

LAN Ying

（College of Computer Science and Technology， Jilin Normal University， Siping 136000， China）

Abstract： At present， most of the university portal is realized by using html4 technology to realize，butits structure of code is not clear. This paper proposes a scheme based on HTML5 + CSS technology. The scheme has many advantages such asthe same web standard and platform independence.

Key words： HTML5； CSS；Platform Independence

0 引言

傳統的采用HTML4 技術設計的高校門戶網站頁面中大量使用到 DIV+CSS 技術進行頁面布局。首先使用DIV標簽將網頁元素分成塊，再對分割后的每一塊使用 CSS技術進行精確的格式控制，以實現為每部分設置文本格式，段落格式，背景格式，排版，自動隱藏，各種特效等。這種DIV標簽的過多使用情況通常會導致在網頁代碼中嵌套層次過多，進而造成網頁代碼結構不清晰，給高校門戶網站的日后維護帶來很大麻煩，并于無形中增加了網站的維護成本。

HTML5 是 W3C與 WHATWG（Web Hypertext Application Technology Working Group）在 2006 年合作創建的一個新版本HTML。該版本將成為 HTML和XHTML以及 HTML DOM 技術的新標準。2013年5月6日，HTML 5.1 正式草案公布。HTML 5是近年來網站開發標準的巨大飛躍。與之前的HTML版本不同的是HTML 5技術并非僅僅用來表示網站的頁面內容，而是能夠將Web應用帶入一個更加成熟的應用平臺，在該平臺上，文本，音頻，視頻，圖像，動畫，以及同電腦的交互活動都將得到高質量的標準化。根據W3C（萬維網聯盟）的發言稿稱：“HTML5是開放的Web網絡平臺的奠基石。”，這種跨平臺的網頁程序環境通常被認為是“Web標準”的保護傘。HTML5以及JavaScript和CSS相關技術的聯合更使得HTML5技術更趨完善，三者的結合能夠讓開發者在任何設備上可順利運行豐富內容的網頁應用。基于此，采用HTML5技術設計的高校門戶網站頁面代碼結構將會更加清晰，并且能夠輕松實現跨平臺。可以預期，越來越多的高校門戶網站即將加入到HTML 5的大平臺上來。

1 基于HTML5的高校門戶網站設計

1.1高校門戶網站的系統功能結構設計

從功能上劃分，高校門戶網站系統共分為以下幾個模塊： 首頁、學校概況、機構設置、科學研究、師資隊伍、人才培養、國際交流、學生工作等功能模塊，如圖1所示。

圖1 高校門戶網站系統功能結構

Fig.1 Function Structure of University Web Site

1.2高校門戶網站首頁的架構設計

高校門戶網站首頁的架構采用兩欄式網頁架構，如圖2所示。

圖2 高校門戶網站首頁架構

Fig.2 Home Page Structure of University Web Site

高校門戶網站首頁所使用的HTML5結構化標簽有：