基于HTML5技术的高校门户网站设计

2015-05-30 01:40蓝鹰

智能计算机与应用 2015年4期

关键词：跨平台

蓝鹰

摘要：针对目前大多数高校门户网站采用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结构化标签有：

标记、