基于HTML5的高校门户网站设计研究

　　0 引 言

　　传统的采用 HTML4 技术设计的高校门户网站页面中大量使用到 DIV + CSS 技术进行页面布局。首先使用 DIV 标签将网页元素分成块，再对分割后的每一块使用 CSS 技术进行精确的格式控制，以实现为每部分设置文本格式、段落格式、背景格式、排版、自动隐藏、各种特效等。这种 DIV 标签的过多使用情况通常会导致在网页代码中嵌套层次过多，进而造成网页代码结构不清晰，给高校门户网站的日后维护带来很大麻烦，并于无形中增加了网站的维护成本。

　　HTML5 是 W3C 与 WHATWG（Web Hypertext ApplicationTechnology Working Group） 在 2006 年合作创建的一个新版本 HTML.该版本将成为 HTML 和 XHTML 以及 HTML DOM技术的新标准。2013 年5 月6 日，HTML 5. 1 正式草案公布。

　　HTML 5 是近年来网站开发标准的巨大飞跃。与之前的 HT-ML 版本不同的是 HTML 5 技术并非仅仅用来表示网站的页面内容，而是能够将 Web 应用带入一个更加成熟的应用平台，在该平台上，文本、音频、视频、图像、动画、以及同电脑的交互活动都将得到高质量的标准化。根据 W3C（万维网联盟） 的发言稿称： "HTML5 是开放的 Web 网络平台的奠基石。"这种跨平台的网页程序环境通常被认为是"Web 标准"的保护伞。HTML5 以及 JavaScript 和 CSS 相关技术的联合更使得 HTML5 技术渐趋完善，三者的结合能够让开发者在任何设备上可顺利运行丰富内容的网页应用。基于此，采用 HTML5 技术设计的高校门户网站页面代码结构将会更加清晰，并且能够轻松实现跨平台。可以预期，越来越多的高校门户网站即将加入到 HTML 5 的大平台上来。

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

　　1. 1 高校门户网站的系统功能结构设计

　　从功能上划分，高校门户网站系统共分为以下几个模块： 首页、学校概况、机构设置、科学研究、师资队伍、人才培养、国际交流、学生工作等功能模块，如图 1 所示。

　　1. 2 高校门户网站首页的架构设计

　　高校门户网站首页的架构采用两栏式网页架构，如图 2所示。

　　高校门户网站首页所使用的 HTML5 结构化标签有： <header > 标记、< nav > 标记、< article > 标记、< aside > 标记、< section > 标记和 < footer > 标记。这些标记的具体含义则如表 1 所示。

　　1. 3 高校门户网站首页的页面实现

　　采用 HTML5 技术的高校门户网站首页效果如图 3 所示。高校门户网站首页主要部分代码如下：

　　< header id = " header" > / / 高校门户网站首页头部< hgroup > < h1 > 欢迎来到吉林师范大学 < / h1 > < h4> 好学近知，力行近仁 < / h4 > < / hgroup >

　　< nav > < ul > < li > < a href = " #" > 首页 < / a > < / li >

　　< li class = " current - item" > < a href = " #" > 学校概况 < / a> < / li > / / 高校门户网站导航< li > < a href = " #" > 机构设置 < / a > < / li > < li > < ahref = " #" > 师资队伍 < / a > < / li > < / ul > < / nav >

　　< / header >

　　< article id = " travel" > / / 高校门户网站的主内容区< section > / / 显示学术活动公告< h2 > 学术活动 < / h2 > < p > < a href = " #" > 07. 03 大学外语部教师系列学术讲座之六 < /a > < /p >

　　……此处省略部分代码 < /section >

　　< aside > < figure > < img src = " 01. jpg" width = 350height = 300 > < / figure > < / aside > / / 高校门户网站首页的侧栏，显示学校图片< / article >< footer > 信息管理： 党委宣传部 技术支持： 信息网络中心 吉 ICP 备 05005280 < /footer > / /高校门户网站的页脚，标注网站的版权采用 HTML5 技术创建的高校门户网站首页只含有页面显示内容。网页的美化部分则需要由 CSS3 来处理。这种HTML5 语法只负责显示网页结构与内容，CSS3 负责网页格式的方式能够实现网页内容与格式相分离，方便网页日后维护。图 4 即是在图 3 的基础上使用 CSS3 美化后的高校门户网站首页效果图。

　　高校门户网站首页中所使用的关键 CSS3 代码如下：#header nav li { float: left; list - style: none; padding: 05px; } / / 通过 float 浮动属性，将导航链接由垂直方向更改为水平方向a { color: #996600; text - decoration: none; } / / 定义导航链接文本格式为指定文本颜色，去掉下划线h1,h2,h4 { margin: 0; } / / 定义标题文本格式为居中a: hover { color: #cc3300; } / / 定义导航链接文本悬浮状态的颜色#travel section { float: left; width: 350px; } / / 学术活动侧栏浮动靠左对齐#travel aside { margin - left: 400px; } / / 定义高校门户网站首页图片侧边栏与学术活动侧栏距离为 400 像素footer { margin: 15px 0 10px; text - align: center; } / / 定义网站版权声明页脚的文本信息水平居中对齐……此处省略部分 CSS 代码2 采用 HTML5 技术的高校门户网站优势。

　　2. 1 Web 标准统一

　　HTML5 技术的推出源于 W3C 、谷歌、苹果等几百家公司探讨商定的结果。HTML5 标准的公开性，使得访问高校门户网站的各种浏览器和平台都可以根据关联 W3C 的资料库找寻根源，并实现自己的应用，进而实现了 Web 标准的统一性。

　　2. 2 轻松实现跨平台

　　HTML5 技术可以轻松地实现跨平台使用。采用 HTML5技术的高校门户网站应用，如果需要可以很轻松地被移植到UC 的开放平台、Facebook 应用平台，甚至可以通过软件封装的技术发放到 App Store 上。这种强大的跨平台性将使得高校门户网站具有广阔的应用前景。

　　2. 3 程序升级更快捷

　　使用 HTML5 技术的高校门户网站由于采用的是 B/S（浏览器/服务器） 模式，程序升级将是即时更新的，只要服务器端更新了高校门户网站的新版本； 之后，客户端浏览器在打开网页时，也将自动更新到高校门户网站各个网页的最新版本。

　　2. 4 与搜索引擎无缝结合

　　通常，对于一些含有 Flash 动画的高校门户网站，搜索引擎在抓取和索引操作时效率十分低下。而采用 HTML5 技术编写的高校门户网站，搜索引擎的蜘蛛将能够抓取高校门户网站站点和索引内容。大部分嵌入高校门户网站中的 Flash动画内容可以方便、高效地被各类搜索引擎成功获取。

　　3 结束语

　　网站实际应用效果表明，采用 HTML5 技术的高校门户网站设计，在实现网页代码结构非常清晰的同时，大大减少了开发人员代码编写量，能够有效提高开发效率，同时降低高校门户网站的日后维护成本。鉴于 HTML5 技术所具有的Web 标准统一、轻松实现跨平台、程序升级更快捷、搜索引擎无缝结合等这些优良特性，由此推断 HTML5 技术必将成为未来高校门户网站开发的核心技术。

　　参考文献：
　　[1]黄玉春。 浅谈下一代 Web 开发标准的核心技术_HTML5[J]. 计算机时代，2015,12（4） : 3 -5.
　　[2]涂频。 基于 HTML5 的网页设计应用[J]. 办公自动化，2013,24（18） : 31 -33.
　　[3]陈婉凌。 网页设计必学的实用编程技术[M]. 北京： 清华大学出版社，2014.