基于Jquery课程网站的设计

梅元昭

摘   要：文章采用HTML和Jquery實现了单位的精品课程网站设计，在设计过程中归纳了课程网站的具体特点，通过网页局部刷新输出、JSON数据和多种数据资料格式间的转换等技术的使用设计出具有动态感强、传输性能高、网页样式多样化的网页，最终解决了课程网站设计上的需求。

关键词：超文本标记语言;Jquery课程网站;JavaScript 对象简谱;Ajax开发;文档对象模型

当今社会随着信息化和网络的迅猛发展，学校发展要求教师进行课程建设，尤其是精品课程网站的建设，需要将教师的课程申报、相应的教学成果和教学设计思路等内容在网络中进行展示。同时，需要将大量的各种类型教学资源（如图片、PPT、视频等文件）发布到网上，便于供师生交流学习，在实施过程中既要做到学习和交流的无障碍，又要能对教师课程资料实施一定保护，以避免不必要的泄漏损失。

本文通过使用超文本标记语言（Hyper Text Markup Language，HTML），Jquery和JSON等多项技术设计网页结构，将上传课程资料转换成Flash的swf和flv两种视频文件格式，完成课程网站的建设，最终达到符合上述课程网站建设的要求。

1    软件涉及的理论

网站主要使用了HTML，层叠样式表（Cascading Style Sheets，CSS）和Jquery来设计，HTML是一种用来制作超文本文档的简单标记语言，是网络的通用语言，允许网页制作人建立文本与图片、视频等多媒体相结合的复杂页面。通过HTML和CSS可以表现出丰富多彩的设计风格，可以实现页面之间的跳转，它的优势在于与平台无关，是静态的网页，占用服务器资源较小，便于搜索引擎收录，不会受到黑客的攻击，相对来讲具有较高网络安全等特点[1]。

Jquery是一个兼容多种浏览器的JavaScript框架，宗旨是写更少的代码，做更多的事情。它属于轻量级的js库，能兼容CSS3。Jquery快速、方便地帮助用户处理HTML文档和事件的交互，实现网页的动画效果。Jquery简化了过去JavaScript编程任务，有简单而易于理解的编程方式，尽可能地强化常用功能，消除冗余，而且有更加方便、快捷的选择和操作DOM节点方法。Jquery的说明文档很全，各种应用详细，同时，还有许多成熟的第三方插件可供选择。

为了获得更好的用户体验，在页面内与服务器通信中，网站运用了Jquery中的Ajax技术，即异步请求页面局部刷新技术，是基于标准化的并被广泛支持的一项技术。Ajax可使用DOM进行动态显示和交互，能减轻服务器与宽带的负担，不需要插件支持。

JSON是一种纯文本的标准键值对的数据格式，相对于XML，JSON数据格式比较简单，易于读写，易于解析，支持多种语言。JSON支持对象引用以及函数，在语法的层面上，JSON与其他格式的区别在于分隔数据的字符，其分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。

2    网站结构设计

通过对课程网站的结构分析，发现一般网站都由很多页面构成，但许多页面在外观有诸多共同之处，相异的只是数据显示内容和超链接生成的网页。由此引发一个问题，即组成在课程网站的网页中，首页和详细页在结构上存在较大差异的，将网站应该被设计成两个还是一个页面？如果设计一个页面构成，网站虽被高度概括，但是由于涉及内容太多，不利于设计和调试，给后期的代码维护带来困难。因此，采用主要由两个网页—主页和详细页构成网站的方案。

主页和详细页的具体情况，可根据课程的特点和教师个人的需求来设置，这既能充分体现网站的个性多样化，又能保证该类网站在结构上的稳定性，使开发人员大幅节省开发时间，提高开发工作效率，同样，还可作为相应网站模板，便于后期开发网站时选择[2]。

3    网站实现

3.1  网站主页设计

Jquery库是一个JavaScript文件，只需把对网页HTML的