崇 陽(yáng)（遼寧行政學(xué)院信息技術(shù)系，遼寧沈陽(yáng)，110161）

?

基于HTML5的校園網(wǎng)站移動(dòng)平臺(tái)web頁(yè)面設(shè)計(jì)

崇 陽(yáng)
（遼寧行政學(xué)院信息技術(shù)系，遼寧沈陽(yáng)，110161）

摘要：隨著無(wú)線網(wǎng)絡(luò)技術(shù)和智能移動(dòng)設(shè)備的發(fā)展，人們對(duì)web應(yīng)用的需求也在不斷增加。HTML5的出現(xiàn)，給移動(dòng)互聯(lián)網(wǎng)帶來(lái)了重要的影響。作為重要的web開(kāi)發(fā)標(biāo)準(zhǔn)，HTML5使web應(yīng)用開(kāi)發(fā)更加容易。本文使用HTML5簡(jiǎn)單論述了一個(gè)校園網(wǎng)站web也的開(kāi)發(fā)過(guò)程。

關(guān)鍵詞：HTML5；移動(dòng)互聯(lián)網(wǎng)；web應(yīng)用；校園網(wǎng)站

1　移動(dòng)互聯(lián)網(wǎng)概述

隨著智能手機(jī)、平板電腦等移動(dòng)終端及無(wú)線網(wǎng)絡(luò)技術(shù)的普及和發(fā)展，人們對(duì)web移動(dòng)應(yīng)用的需求也不斷增加?，F(xiàn)如今的3G、4G網(wǎng)絡(luò)投入使用，使我們的生活已經(jīng)深深融入到了移動(dòng)互聯(lián)網(wǎng)之中。不論是瀏覽網(wǎng)站，還是使用各種互聯(lián)網(wǎng)應(yīng)用，不再局限于pc設(shè)備，而是在各種移動(dòng)終端上就能方便地完成各種操作。目前較為流行的web應(yīng)用有以下幾種：

（1）移動(dòng)社交：用戶可以通過(guò)平板電腦、手機(jī)等移動(dòng)設(shè)備進(jìn)行社交活動(dòng)，包括即時(shí)通訊和虛擬社交網(wǎng)絡(luò)等應(yīng)用。

（2）移動(dòng)電子商務(wù)：用戶可以通過(guò)移動(dòng)設(shè)備快速、方便地享受各種電子商務(wù)服務(wù)，如在線購(gòu)物、在線支付等。

（3）移動(dòng)多媒體：用戶可以通過(guò)移動(dòng)設(shè)備，收聽(tīng)在線音樂(lè)，觀看在線電影等各種視頻資源。

（4）移動(dòng)游戲：隨著手機(jī)等移動(dòng)設(shè)備性能的不斷提高，web版在線游戲已經(jīng)成為了人們娛樂(lè)生活不可或缺的一部分，同時(shí)也給游戲開(kāi)發(fā)和運(yùn)營(yíng)商帶來(lái)了巨大的經(jīng)濟(jì)收益。

（5）移動(dòng)搜索：搜索引擎的概念和應(yīng)用價(jià)值不言而喻，在移動(dòng)設(shè)備上，強(qiáng)大的智能搜索引擎，能夠 幫助用戶快速準(zhǔn)確地檢索到需要信息資源。

2　HTML5簡(jiǎn)介

2.1 HTML5概述

HTML5是繼HTML4.0后W3C推出的新一代HTML標(biāo)準(zhǔn)。和以前的版本不同，除了作為HTML、XHTML的標(biāo)準(zhǔn)， 它還將web應(yīng)用帶入了一個(gè)更加標(biāo)準(zhǔn)化的平臺(tái)。強(qiáng)大的功能和標(biāo)準(zhǔn)，使web上的圖片、動(dòng)畫(huà)、音頻及視頻等多媒體能夠以標(biāo)準(zhǔn)化的方式進(jìn)行設(shè)計(jì)和開(kāi)發(fā)。因此，HTML5不僅僅是技術(shù)的發(fā)展，更是一個(gè)有利于web應(yīng)用開(kāi)發(fā)標(biāo)準(zhǔn)化的平臺(tái)。

2.2 HTML5的特點(diǎn)

（1）HTML5摒棄了一些原有的元素和屬性，也新增了很多功能強(qiáng)大的元素和屬性。其中包括

（2）HTML5還提供了支持本地存儲(chǔ)的文件系統(tǒng)的API，在互聯(lián)網(wǎng)環(huán)境下，用戶訪問(wèn)的url中相應(yīng)的數(shù)據(jù)文件會(huì)被緩存到設(shè)備中，離線時(shí)也可以瀏覽網(wǎng)站，回到網(wǎng)絡(luò)環(huán)境后，緩存的數(shù)據(jù)能夠自動(dòng)更新。

（3）HTML5提供了通信能力。利用Web Socket API，開(kāi)發(fā)者可以輕松實(shí)現(xiàn)數(shù)據(jù)傳遞及跨文檔通信等功能，使用戶使用基于HTML5開(kāi)發(fā)的web應(yīng)用時(shí)，享受到類似于C/S模式的應(yīng)用體驗(yàn)。

（4）HTML5為開(kāi)發(fā)者提供了各種硬件訪問(wèn)的API，例如GPS、wifi、攝像頭等硬件設(shè)備均可通過(guò)相應(yīng)的API進(jìn)行訪問(wèn)。

3　移動(dòng)web頁(yè)面設(shè)計(jì)

3.1 開(kāi)發(fā)與測(cè)試環(huán)境

（1）使用Dreamweaver CS5作為HTML和CSS代碼的編寫(xiě)工具。在編輯視圖下，根據(jù)網(wǎng)頁(yè)結(jié)構(gòu)圖，編寫(xiě)HTML和CSS代碼并進(jìn)行重構(gòu)設(shè)計(jì)。

（2）使用Opera Mobile Emulator模擬手機(jī)，作為測(cè)試移動(dòng)設(shè)備web頁(yè)面的測(cè)試環(huán)境。

3.2 web頁(yè)面結(jié)構(gòu)圖

校園網(wǎng)站的首頁(yè)內(nèi)容主要包括：網(wǎng)站的logo及標(biāo)題動(dòng)畫(huà)，導(dǎo)航欄，主體內(nèi)容、版權(quán)信息及其他內(nèi)容。頁(yè)面的結(jié)構(gòu)采用頁(yè)眉，左右側(cè)邊欄，主體內(nèi)容及頁(yè)腳的形式，如圖1所示。

圖1　Web頁(yè)面結(jié)構(gòu)圖

3.3 頁(yè)面代碼

3　結(jié)束語(yǔ)

本文使用HTML5語(yǔ)言和CSS樣式表設(shè)計(jì)了一個(gè)校園網(wǎng)站web頁(yè)并測(cè)試成功，在一定程度上體會(huì)到了HTML5的使用方法和新特性。HTML5的新語(yǔ)義和元素，不但使代碼量減少，簡(jiǎn)化了web頁(yè)的開(kāi)發(fā)過(guò)程，新增的多媒體特性使web也更加豐富多彩，容易開(kāi)發(fā)。

參考文獻(xiàn)

[1]錢(qián)海軍.基于HTML5移動(dòng)web頁(yè)面開(kāi)發(fā)技術(shù)研究.電腦與信息技術(shù),2013,2:20

[2]胡晶.基于HTML5 的Web 移動(dòng)應(yīng)用開(kāi)發(fā)研究.工業(yè)控制計(jì)算機(jī), 2014,10:20.

崇陽(yáng)（1982年3月）男，遼寧行政學(xué)院（遼寧商貿(mào)職業(yè)學(xué)院）信息技術(shù)系，講師。

Design of Campus Website Web Page For Mobile Platform Based on HTML5

Chong Yang
（Liaoning Academy of Governance，Liaoning Shenyang，110161）

Abstract：With the development of wireless Network technology and mobile device，the requirement of web application is increasing.Appearience of HTML5 is a important influence for mobile Internet,As a important Web standard，HTML5 made the design of Web application more easy.

Keywords：HTML5; mobile Internet;Web application;campus website

作者簡(jiǎn)介