基于HTML5的校园网站前端优化的软件工程实践与研究

林健

摘要：本文从软件工程的角度，针对现代中学网站界面优化的需求分析，分析了相关界面优化的HTML5技术及对应的安全维护解决机制，为后续的网站建设与开发提供理论支持与工程实践解决方案。

关键词：中学网站 HTML5 Javascript 多媒体数据 工程实践

0 需求分析概述

随着移动互联网的迅速普及，风格得宜的校园网站已成为现代中学对外交流宣传和对内信息管理的不二选择，在中学校园信息化建设中的地位举足轻重。据此，本文以《湛江第一中学原旧版网站》为基础，提出以下优化需求：

（1） 结构设计需求：采用HTML5技术，结合CSS3与Javascript在Dreamweaver软件平台上重构学校网站的前台，创建现代风格的离线应用和本地存储结构框架，搭建整个网站的骨架体系。

（2） 多媒体交互设计需求：现代校园网页对图片、视觉效果展示、音视频等多媒体元素都有非常高的要求，特别对于灵活的音视频技术及平滑的3D视觉效果，对于网站界面的友好性、艺术性及交互性都有较高要求。

（3） 網站安全性能维护需求：校园网站内部承接着校园资讯的传递，因原网站后台与前台优化方案存在技术性衔接，在衔接过程中需要调整更优的网站架构安全防控方案，以便让脚本语言在MVC传统网站架构中得到更平滑的过渡。

1 HTML5校园网站实现方案

众所周知，相比较传统的ASP网站技术与FLASH技术，HTML5架构有更成熟的体系，如音频与视频元素等，都可以作为移动互联网下的中学校园网站优化方案被广泛应用。以HTML5技术做支撑的响应式网站开发，促使网站具备自适应能力，在移动终端下能根据浏览用户的阅读环境，进行自主适配与适应，从而保证终端浏览器的统一风格；……