基于 HTML5 的校园网站移动平台 web 页面设计

摘要 ：随着无线网络技术和智能移动设备的发展，人们对 web 应用的需求也在不断增加。HTML5 的出现，给移动互联网带来了 重要的影响。作为重要的 web 开发标准，HTML5 使 web 应用开发更加容易。本文使用 HTML5 简单论述了一个校园网站 web 也 的开发过程。

关键词 ：HTML5 ；移动互联网 ；web 应用 ；校园网站

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

 

1 移动互联网概述

随着智能手机、平板电脑等移动终端及无线网络技术的普及 和发展，人们对 web 移动应用的需求也不断增加。现如今的 3G、 4G 网络投入使用，使我们的生活已经深深融入到了移动互联网 之中。不论是浏览网站，还是使用各种互联网应用，不再局限于 pc 设备，而是在各种移动终端上就能方便地完成各种操作。目前 较为流行的 web 应用有以下几种 ：

（1）移动社交 ：用户可以通过平板电脑、手机等移动设备进 行社交活动，包括即时通讯和虚拟社交网络等应用。

（2）移动电子商务 ：用户可以通过移动设备快速、方便地享 受各种电子商务服务，如在线购物、在线支付等。

（3）移动多媒体 ：用户可以通过移动设备，收听在线音乐，观 看在线电影等各种视频资源。

（4）移动游戏 ：随着手机等移动设备性能的不断提高，web 版在线游戏已经成为了人们娱乐生活不可或缺的一部分，同时也 给游戏开发和运营商带来了巨大的经济收益。

（5）移动搜索 ：搜索引擎的概念和应用价值不言而喻，在移 动设备上，强大的智能搜索引擎，能够 帮助用户快速准确地检索 到需要信息资源。

2 HTML5 简介

2.1 HTML5 概述

HTML5 是继 HTML4.0 后 W3C 推出的新一代 HTML 标准。和以 前的版本不同，除了作为 HTML、XHTML 的标准， 它还将 web 应用 带入了一个更加标准化的平台。强大的功能和标准，使 web 上的 图片、动画、音频及视频等多媒体能够以标准化的方式进行设计 和开发。因此，HTML5 不仅仅是技术的发展，更是一个有利于 web 应用开发标准化的平台。

2.2 HTML5 的特点1）HTML5 摒弃了一些原有的元素和属 性，也新增了很 多功能强大的元素和属性。其 中包括 <video>、<audio> 以及

<canvas> 元素。这些元素的主要作用是使网页能够更好的支持 多媒体功能。除了新的元素外，为了方便网页布局，HTML 5 还增 加了一些语义化标签， 例如 header、footer、 nav 、section 等。

（2）HTML5 还提供了支持本地存储的文件系统的 API，在互 联网环境下，用户访问的 url 中相应的数据文件会被缓存到设备 中，离线时也可以浏览网站，回到网络环境后，缓存的数据能够自 动更新。

（3）HTML5 提供了通信能力。利用 Web  Socket  API，开发者 可以轻松实现数据传递及跨文档通信等功能，使用户使用基于 HTML5 开发的 web 应用时，享受到类似于 C/S 模式的应用体验。

（4）HTML5 为开发者提供了各种硬件访问的 API，例如 GPSwifi、摄像头等硬件设备均可通过相应的 API 进行访问。

3  移动 web 页面设计

3.1 开发与测试环境

（1）使用 Dreamweaver CS5 作为 HTML 和 CSS 代码的编写工 具。在编辑视图下，根据网页结构图，编写 HTML 和 CSS 代码并进 行重构设计。

（2）使用 Opera Mobile Emulator 模拟手机，作为测试移动 设备 web 页面的测试环境。

3.2  web 页面结构图

校园网站的首页内容主要包括 ：网站的 logo 及标题动画， 导航栏，主体内容、版权信息及其他内容。页面的结构采用页眉， 左右侧边栏，主体内容及页脚的形式,案例:
四海电子www.xmqisheng.com

3.3 页面代码

<header>

  <section><img src="/images/logo.jpg " 

/><section>

  <section><img src="/images/title.jpg " 

/><section>

  <nav>

  <ul>

  <li> 首 页 </li><li> 学 院 概 况 </ li><li> 科研教学 </li>……<li> 学生园地 </li>

</ul>

</nav>

</header>

<aside id="left">

  <!-- 限 于 篇 幅，此 处 边 栏 代 码 省 略 -->

</aside>

<article>

  <section>

 

  <!-- 限于篇幅，此处校园新闻代码省略 -->

<section>

<section>

  <!-- 限于篇幅，此处公告通知代码省略 -->

<section>

</article>

<aside id="right">

  <!-- 限 于 篇 幅，此 处 边 栏 代 码 省 略 -->

</aside>

<footer>

  <ul>

  <li> 版权所有…</li><li> 地址 ：沈阳市……

<li> 电话 ：024…</li>

</ul>

</footer>

3 结束语

本文使用 HTML5 语言和 CSS 样式表设计了一个校园网站 web 页并测试成功，在一定程度上体会到了 HTML5 的使用方法和 新特性。HTML5 的新语义和元素，不但使代码量减少，简化了 web 页的开发过程，新增的多媒体特性使 web 也更加丰富多彩，容易 开发。