基于HTML5技術的高校門戶網(wǎng)站設計

藍鷹

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

關鍵詞：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 引言

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

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

1 基于HTML5的高校門戶網(wǎng)站設計

1.1高校門戶網(wǎng)站的系統(tǒng)功能結構設計

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

圖1 高校門戶網(wǎng)站系統(tǒng)功能結構

Fig.1 Function Structure of University Web Site

1.2高校門戶網(wǎng)站首頁的架構設計

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

圖2 高校門戶網(wǎng)站首頁架構

Fig.2 Home Page Structure of University Web Site

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