藍(lán)鷹

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

關(guān)鍵詞：HTML5； CSS；跨平臺(tái)

中文分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼： A文章編號(hào)：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 技術(shù)設(shè)計(jì)的高校門戶網(wǎng)站頁(yè)面中大量使用到 DIV+CSS 技術(shù)進(jìn)行頁(yè)面布局。首先使用DIV標(biāo)簽將網(wǎng)頁(yè)元素分成塊，再對(duì)分割后的每一塊使用 CSS技術(shù)進(jìn)行精確的格式控制，以實(shí)現(xiàn)為每部分設(shè)置文本格式，段落格式，背景格式，排版，自動(dòng)隱藏，各種特效等。這種DIV標(biāo)簽的過多使用情況通常會(huì)導(dǎo)致在網(wǎng)頁(yè)代碼中嵌套層次過多，進(jìn)而造成網(wǎng)頁(yè)代碼結(jié)構(gòu)不清晰，給高校門戶網(wǎng)站的日后維護(hù)帶來很大麻煩，并于無(wú)形中增加了網(wǎng)站的維護(hù)成本。

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

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

1.1高校門戶網(wǎng)站的系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)

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

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

Fig.1 Function Structure of University Web Site

1.2高校門戶網(wǎng)站首頁(yè)的架構(gòu)設(shè)計(jì)

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

圖2 高校門戶網(wǎng)站首頁(yè)架構(gòu)

Fig.2 Home Page Structure of University Web Site

高校門戶網(wǎng)站首頁(yè)所使用的HTML5結(jié)構(gòu)化標(biāo)簽有：