大学物理实验网络学习平台开发论文.doc

摘 要

随着网络的发展基于Internet的网络教育在最近几十年快速发展起来，同时促使各种学习平台的诞生。本研究利用ASP、AJAX、DIV+CSS等技术开发了大学物理实验网络学习平台。在分析该学习平台需求分析的基础上，阐述了平台的整体框架、系统模块，并重点论述了五大功能模块的实现及最终效果：自主学习模块、电子教材视频教材模块、实验报告模块、个人空间模块、交互空间模块。最后，文章还对在系统开发过程中使用到的各种技术进行了统一的阐述。
该学习平台课程资源设计合理、课程资源丰富、用户体验设计良好、导航清晰完善，各个模块设计相辅相成，整体界面设计简洁美观。平台包含督学功能，辅助教师教学。学习信息的反馈快速及时，提高了教师教学效率。学生之间交流方便有利于协作学习的进行。

关键词： 网络教育，学习资源，交互性，协作学习

ABSTRACT

With the development of Internet, online education has developed rapidly in recent decades, as well as birth of a variety of learning platforms. In this study, Network technologies such as ASP, AJAX, DIV + CSS and so on have been used to develop online learning platform of physics experiment. Based on needs analysis, overall framework and system modules have been introduced. And it focuses on five major functional modules and their final effect: self-learning modules, electronic materials and video materials modules, experimental report modules, personal space module, interactive space module. Finally, the article also described various techniques used in the system development process.
The learning platform has some characteristics, such as rich curriculum resources , well-designed user experience, clear navigation and so on. And each module has been perfect designed and complemented each other, moreover the overall interface is simple and beautiful. Platform features include supervisors to assistant teaching. Rapid and timely feedback of information can improve teaching efficiency. Facilitate communication among students can favor cooperation.

Keywords: Online education, learning resources, interactive, collaborative learning 目 录
摘 要 I
ABSTRACT II
第1章 引 言 1
1.1 背景 1
1.2 意义 1
第2章 学习平台开发的环境与技术 2
2.1工具与环境 2
2.2开发语言 2
2.3 开发技术 2
2.3.1 ASP概述 2
2.3.2 AJAX技术 3
2.3.3 DIV+CSS技术 3
2.4数据库技术 3
2.4.1数据库概述 3
2.4.2 Microsoft Access 2000特性及连接步骤 3
第3章 大学物理实验网络学习平台分析设计 5
3.1 大学物理实验网络学习平台介绍 5
3.2 大学物理实验网络学习平台需求分析 5
3.3 大学物理实验网络学习平台数据库设计 7
第4章 平台整体设计与实现 11
4.1 平台整体框架 11
4.2 平台各模块设计与实现 13
4.2.1 自主学习模块 13
4.2.2 电子教材、视频教材模块 15
4.2.3 实验报告模块 15
4.2.4 个人空间模块 17
4.2.5 交互空间模块 18
第5章 各功能的技术实现 19
第六章 结束语 27
致 谢 28
参考文献 29

29
第1章 引 言

1.1 背景
随着信息社会的发展，网络已经越来越普及，几乎已经渗透到所有领域，网络教育也正在蓬勃发展之中。大学物理实验是一门传统的课程，也是一门重要的基础课程，但是仅仅依靠传统的课堂教学，已无法满足学生的需求。随着高校的普及以及网络化教学的深入，对教学效率、教学的时间地点都提出了不同需求。在这样的背景之下，为大学物理实验这样的实践性课程做一个在线的学习平台是非常必要的。本课题旨在利用网络让学生的学习拥有更多的自由，方便快捷，没有时域限制，使教学更加人性化。而且通过这个平台学习者可以很轻松的获取所有的课程资源，对于教师来说则可以很方便的把教学任务教学内容教学思想传达给学生。对于实践性的课程来说这样的学习平台有着很大的意义。目前国内外关于一些学科的学习网站还是比较多的，但是在学习平台的建设上能够完善的比较少，缺少系统的规划和合理的教学系统设计。
1.2 意义
该学习平台根据教学系统设计理念设计，将建构主义理论下的协作学习与网络教育有机结合，使学习者在自主学习的同时可以进行一定的交流学习。同时，为教师设计了督学功能，教师可以根据登陆次数、学生的学习进度、实验报告情况等方面了解学习情况。平台提供了一个学习资源丰富、资源组织结构良好、交流协作方便、教师管理、学生自我管理方便的自主学习模块。通过自主学习模块学生能够完成所有的预习以及复习工作。在实验报告模块，提供了在线完成实验报告的功能，并且能够在线保存。整体上该学习平台能够完成传统教学工作的各个环节，依托网络的优势其又具有网络课程的各种特点，对于建设实践性质的网络课程进行了一定的探究。

第2章 学习平台开发的环境与技术

2.1工具与环境
·Web数据库：Microsoft Access 2000，运用简单，移植方便
·Web服务器：IIS5.0，支持ASP，可作为Web站点的开发和测试平台
·开发工具：Macromedia Dreamweaver 8.0,编辑HTML、VBScript、JavaScript
·界面图片编辑工具:Photoshop
2.2开发语言
（1）HTML语言
HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等[1]。
（2）JavaScript脚本语言
JavaScript脚本运行在客户端浏览器，可以进行一些数据验证减轻服务器和网络的负担。另外它还可以方便的访问和操控整个DOM文档模型，结合html他可以轻松的控制任何页面元素的显示。由于他是运行在客户端的所以响应速度快。基于上述特点，JavaScript可以实现很好的用户体验。
（3）VBScript
VBScript是Visual Basic Script的简称，即 Visual Basic 脚本语言，有时也被缩写为VBS。是asp动态网页默认的编程语言，可以方便访问使用asp内建对象和ADO对象[2]。
2.3 开发技术
2.3.1 ASP概述
ASP（Active Server Pages动态服务器网页），是微软推出的用以取代CGI的动态服务器网页技术。ASP文件就是在普通的HTML文件中嵌入VBScript或者JavaScript脚本语言。ASP提供了几个内部对象和内部组件，利用它们可以很方便的实现表单上传、存取数据库等功能。除此之外使用第三方提供的专用组件解决如发送E-mail、文件上传等功能[3]。
2.3.2 AJAX技术
AJAX是Asynchronous JavaScript and XML 的缩写，意思是异步的JavaScript 与 XML。AJAX是JavaScript、XML、CSS、DOM等多种技术的组合。它可以实现客户端的异步请求操作。这样可以实现在不刷新页面的情况下与服务器进行通信，从而减少了用户的等待时间[4]。
2.3.3 DIV+CSS技术
CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。使用DIV+CSS布局有如下优势：使页面载入得更快、降低流量费用、修改设计时更有效率、保持视觉的一致性、更好地被搜索引擎收录、对浏览者和浏览器更具亲和力[5]。
2.4数据库技术
2.4.1 数据库概述
数据库是依照某种数据模型组织起来并存放二级存储器中的数据集合。这种数据集合具有如下特点：尽可能不重复，以最优方式为某个特定组织的多种应用服务，其数据结构独立于使用它的应用程序，对数据的增、删、改和检索由统一软件进行管理和控制。从发展的历史看，数据库是数据管理的高级阶段，它是由文件管理系统发展起来的。
2.4.2 Microsoft Access 2000特性及连接步骤
Access继续保持了与其他Office中的VBA的一致性。Access 2000引入了Visual Basic Editor（VBE），它与Microsoft Word、Excel和Powerpoint中的VBE具有相同的用户界面。可以直接将自己的代码管理和开放技巧转移到这些软件包中，从而丰富非Access应用程序的数据访问功能。 Office 2000开发人员版改进了打包和分发选项。例如，你可以分发含有MSDE解决方案和依赖于与SQL Server类似的数据库的解决方案。你可以从图形界面和编程接口中获得大量的视图和过程。如果应用程序可能发展到需要成熟的SQL Server数据库的能力，这一点尤其重要。新的分发选项允许你通过Internet来分发解决方案的自定义安装软件包，从而能极大地扩展你的客户范围。潜在的客户可以扩展到世界上通过Internet连接的任何人。[6]
ASP采用ADO访问后台数据库，客户端连接数据库步骤：建立conn.asp文件，新建connection对象，保存到connection文件中，具体代码如下：
Set Conn= Server.CreateObject("ADODB.CONNECTION")
ConnString = "Provider=MicroSoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("admin/database/info.mdb")
Conn.Open ConnString
在每个需要调用该数据库的页面头上只要添加包含语句<!--#include file="connection/conn.asp"-->即可。

第3章 大学物理实验网络学习平台分析设计

3.1 大学物理实验网络学习平台介绍
大学物理实验网络学习平台主要是为辅助教师进行大学物理实验课程的教学和学生课外自主学习而开发的。该学习平台主要为学生提供了一个在线的实验预习环境，在线完成并提交实验报告(教师在线批阅)，以及成绩统计功能，实时和非实时性的师生间、学生之间的交流环境，以及教师对学生的管理、对学生学习情况的监督功能和学生对自身学习情况的管理功能。
3.2 大学物理实验网络学习平台需求分析
3.2.1 服务对象和基本要求
大学物理实验网络学习平台针对的对象主要是大学教师和学生，学生通过该平台要能完成在线预习以及在线完成提交实验报告，教师能通过该平台辅助教学，管理了解学生学习状况。
3.2.2 系统整体分析
大学物理实验网络学习平台完成后系统应该具有以下特点和功能：:
（1）学习教学资源库的建设
学习教学资源是学习的根本，任何学习教学活动都是建立在学习教学资源基础之上的。没有好的学习教学资源就不可能有好的学习效果或者好的教学效果。因此对学习教学资源的管理和设计显得非常重要。这种管理和设计的目标是建立一个信息组织良好、设计合理、显示友好、内容完善正确、表述科学、目录完整、检索便利的学习教学资源库。系统主要提供了电子教材和视频教材。这些教材都是通过专业教师的严格筛选的，经过实际的教学考验的。系统按照实验类别和名称组织这些资源。每个资源还配有缩略图以供学生选择时参考。学习者可以对每个资源进行评价以供教师进行资源的筛选。
（2）自主学习平台的建设
大学的学习和中学的学习一个很大的区别就是自主学习方面。在大学的学习过程中往往学生的自主性学习占大部分的学习空间，而教师是给予引导和提示。于是自主学习平台的建设必需满足学生进行自主学习的需要。通过该平台学生要能完成大学物理实验的课前预习工作，能够了解有关某个实验的各方面信息和知识。比如实验目的、实验原理、实验器材、注意事项、实验拓展等。另外还要能和教师进行一定的交互，能将预习的情况反馈给教师以便教师在上课之前有准备的解决某些问题。同时教师能在学生预习之前给出一些提示，这些提示信息能顺利地传达给学生。为了方便学生记录自己的学习经验等，系统应该提供类似现实生活中的记事本，学生可以随时随地很方便的记录学习经验学习心得等。
（3）在线实验报告
实验报告是大学物理实验教学的一个重要教学环节，所有的实验数据处理都是通过实验报告完成的，实验报告的书写让学生对实验有了一个理论性的总结。将实验上升了一个高度。因此在线实验报告的设计要符合学生的实际需求，需要有一个友好的界面以及方便的操作、书写。系统将实验报告分为两部分：
a.实验目的、原理、内容及步骤
b.实验数据处理表格
在第一部分选用了一种轻量级的文本编辑器，界面清晰美观、操作简单，能实现大部分的文本编辑功能以及添加图片等功能。这些基本能满足实验报告文字部分的处理。
第二部分设计了一些具有立体效果的表格，通过JavaScript控制表格属性，可以突出显示当前编辑的单元格，这些控制力求创建舒适的用户体验。为了方便用户进行一些数据的处理和计算，界面中内置了一个计算器，用户需要的时候可以随时调用当然也可以关闭。
为了防止实验报告数据的丢失，系统应该具有自动保存功能，定时的将实验报告的内容保存到草稿箱，同时也提供手动保存的按钮，方便用户随时保存未完成的实验报告。
（4）交流互动平台的建设
有效的学习活动离不开交流互动环节，这里的交流互动包括学生和教师之间的以及学生之间的，交流的形式包括在线的离线的实时的和非实时的，交流的规模有小组交流、班级讨论、一对一交流等。提供多元化的交流方式能有效的提高交流的效果，对于学习活动的帮助也越大。班级讨论任何人都可以参与，而小组交流是有权限的，只有经过小组创建者的同意方可进入。这种管理方式可以防止交流的混乱。
（5）学生个人信息管理
学生作为教学活动的对象学习活动的主体有着复杂的各种信息，对于这种信息的管理非常重要，只有把握了这些信息才能把握好学习教学活动。为学生提供一个个人信息管理模块显得不可或缺。这个模块中学生应该可以对自身的基本信息进行查看管理和编辑。学生需要有一个自己的邮箱，可以在系统中接发各种邮件，达到信息交流的目的。为了方便学生了解自己的学习情况，系统还要记录学生的学习状况并且随时共学生查看。当然学生有知道作业成绩的权利，因此系统必需提供一个合理的成绩查询方式。
（6）教师对学生学习的监督和管理
大学物理实验网络学习平台建设的一个任务就是辅助教师的教学工作，在这套系统中要能体现教师的监管作用。这个监管体现在以下四个方面：
a.实验报告的批阅，能在线批阅学生提交的实验报告，能将批阅的结果（包括分数和评语）及时反馈给学生。能够清晰的了解学生提交实验报告的情况以及提交的时间等。
b.能够方便都了解学生的自主学习记录。包括学习的内容、学习的时间、学习的次数等等。
c.能够了解学生在学习中遇到的困难并给予提示和帮助。能够参与学生的讨论。
d.对学习教学资源的编排和筛选控制。.
（7）学习、教学信息的反馈
信息的反馈是信息提高的基础，只有随时掌握反馈信息才能根据反馈的情况进行改进和完善。系统需要能迅速反馈以及统计学习和教学的一些信息。
3.2.3 权限设置
系统主要分为三种权限用户：
学生用户、教师用户、管理员用户。学生用户和教师用户由管理员添加。学生用户只能管理本人的信息，教师用户可以管理本班级的所有学生用户信息。系统基本信息由管理员设置。
3.3 大学物理实验网络学习平台数据库设计
数据库是整个系统的信息支持，所有的教学学习资源信息以及用户信息都存储在数据库中。对信息的查阅检索、信息的安全、信息的利用都依赖与数据库。因此合理的数据库设计关系着整个系统的性能以及使用。根据系统的要求建立合理的数据表以及数据表之间的外键关系。根据数据库设计的三范式优化数据库表。合理设置数据库字段，优化数据库表结构。这些优化工作将花费不少的时间和精力，但是这些工作为整个系统的运行提供了基本的保证。
3.3.1 数据库的需求分析
根据整个系统信息数据的结构分析，主要的数据表如下：
学生表(student)： 自动编号、姓名、性别、班级、邮箱、电话、登录密码、最近登录时间、头像图片、登录次数
实验报告表(baogao)： 自动编号、学生id、实验类别id、实验id、报告数据、报告内容、得分、教师评语、提交时间
实验类别表(shiyansort)：自动编号、类别名称、添加时间
实验信息表(shiyan)： 自动:编号、类比id、实验标题、实验目的、实验预习、实验仪器、实验疑难、实验拓展、实验报告、添加时间、报告提交截止时间
资源表(source_video)： 自动编号、资源标题、资源路径、实验id、实验类别id、添加时间、添加者、资源缩略图、资源大小、下载次数、是否在自主学习显示
资源评论表(source_pl)： 自动编号、资源id、评论者id、评论内容、评论时间
学生疑问表(question_learn)：自动编号、学生id、实验id、问题标题、问题内容、提问时间、教师回复、回复时间、是否允许其他人看到该条信息
学习记录表(learn_record)： 自动编号、学生id、实验id、学习内容、进入时间、退出时间
3.3.2 数据表的设计
表3-1 学生表(student)
字段名
字段类型
是否为空
字段别名
是否主键
id
文本
Not null
学号
Primary key
name
文本
Not null
姓名
no
sex
文本
null
性别
no
class
文本
null
班级
no
phone
文本
null
电话
no
pwd
文本
Not null
登录密码
no
last_loadtime
日期/时间
null
上次登录时间
no
img
文本
null
头像图片
no
hits
数字
null
登录次数
no
表3-2 实验报告表（baogao）
字段名
字段类型
是否为空
字段别名
是否主键
id
自动编号
Not null
实验报告id
Primary key
stu_id
文本
Not null
学生id
no
shiyan_fid
文本
Not null
实验类别id
no
shiyan_id
文本
Not null
实验id
no
content
备注
null
报告数据内容
no
content_w
备注
null
报告文字内容
no
score
数字
null
得分
no
evaluation
备注
null
教师评语
no
addtime
文本
null
提交时间
no
表3-3 实验信息表(shiyan)
字段名
字段类型
是否为空
字段别名
是否主键
id
自动编号
Not null
实验id
Primary key
sortid
数字
Not null
实验类别id
no
title
文本
Not null
实验标题
no
content_mudi
备注
null
实验目的
no
content_yuxi
备注
null
实验预习
no
content_yiqi
备注
null
实验仪器
no
content_yinan
备注
null
实验疑难
no
content_tuozhan
备注
null
实验拓展
no
content_baogao
备注
null
实验报告
no
addtime
文本
null
添加时间
no
subtime
文本
null
截止提交时间
no
表3-4资源表(source_video)
字段名
字段类型
是否为空
字段别名
是否主键
id
自动编号
not null
资源id
Primary key
title
文本
not null
资源标题
no
src
文本
not null
资源路径
no
shiyan_id
文本
not null
实验id
no
shiyan_fid
文本
not null
实验类别id
no
addtime
文本
null
添加时间
no
adduser
文本
null
上传者
no
source_img
文本
null
缩略图
no
source_size
文本
null
资源大小
no
hits
数字
null
下载次数
no
ifshow
是/否
null
是否显示在自主学习
no
表3-5学生疑问表(question_learn)
字段名
字段类型
是否为空
字段别名
是否主键
id
自动编号
not null
问题id
Primary key
stu_id
文本
not null
学生id
no
shiyan_id
文本
not null
实验id
no
title
文本
not null
问题标题
no
content
备注
null
提问内容
no
addtime
文本
null
提问时间
no
reback
备注
null
回复内容
no
rebacktime
文本
null
回复时间
no
permission
是/否
null
是否允许其他人看到
no
第4章 平台整体设计与实现

4.1 平台整体框架
学生用户
首页
实验介绍
电子教材
视频教材
实验报告
个人空间
自主学习
交互空间
模块说明
一级目录
二级目录
手动保存
数据处理
文本处理
自动保存
计算器
过期提醒
实验报告
实验草稿
提交
添加笔记
我的笔记
问题集锦
我要提问
教师寄语
学习内容
提交
编辑删除

缩略图
详细信息
资源内容
添加评论
查看评论
点击下载
学习记录
站内邮件
个人资料
成绩查看
通讯录
在线交流
分组讨论
班级讨论
管理组
其他讨论组
我的讨论组
删除邮件
发邮件
收邮件
我的作答
教师评语
得分
删除组
添加组
组员管理
编辑组
交互空间
个人空间
电子教材
视频教材

图4-1 学生用户功能图
教师用户
课程信息管理
实验信息管理
学习资源管理
交互信息管理
讨论组管理
学生学习管理
添加实验
查看所有

类别管理
编辑实验
删除实验
查看学生成绩
批阅实验报告
布置作业
查看学习进度
教师寄语管理
物理公式
视频资源
课件资源
删除提问
回复提问
查看提问
讨论问题管理
编辑
添加
查看
删除
实验信息管理

学生学习管理

讨论组管理

学习资源管理

交互信息管理

图4-2 教师用户功能图
学生用户有实验介绍、自主学习、电子教材、视频教材、实验报告、个人空间、交互空间等七个模块，如图4-1所示。在自主学习模块学生可以完成在线的实验预习，可以查看所有的学习资源。并且可以向教师提问，也可以看到权限允许的其他同学的提问。可以添加自己的学习笔记。学生可以看到教师对问题的答复，也可以看到教师的一些学习贴士。这部分体现了学生学习的自主性也体现了师生之间的交互性。电子教材和视频教材模块向学生展示了所有的学习资源以及这些学习资源的详细信息、资源评价等。学生也可以对资源进行评价，可以下载权限允许的学习资源。实验报告模块可以在线完成实验报告并且提交，也可以保存到草稿箱。个人空间模块则可以查看修改个人信息，查看学习记录、查看实验报告成绩和教师评语、收发个人邮件等。交互空间模块可以进行小组交流、班级交流以及一对一的交流，体现了交互性和协作学习。
教师用户主要可以进行实验信息管理、学习资源管理、学生学习管理、交互信息管理、讨论组管理。对这些信息的管理可以保证教师实时动态地了解学生的学习状况，体现了教师的督学功能。如图4-2所示。
4.2 平台各模块设计与实现
大学物理实验网络学习平台主要是为辅助教师进行大学物理实验课程的教学和学生课外自主学习而开发的。该学习平台主要为学生提供了一个在线的实验预习环境，在线完成并提交实验报告（教师在线批阅），以及成绩统计功能，实时和非实时性的师生间、学生之间的交流环境，以及教师对学生的管理、对学生学习情况的监督功能和学生对自身学习情况的管理功能。该平台主要分为五个模块：自主学习模块、电子教材视频教材模块、实验报告模块、模块个人空间模块、交互空间模块。
4.2.1 自主学习模块
该模块提供了与实验相关的所有学习资料，如图4-3，4-4所示。以实验类别和实验名称为导航，点击可以进入具体实验的学习。包括实验目的、实验预习、实验仪器、实验课件、实验视频、疑难解答以及拓展学习七部分内容。另外还提供了教师寄语、我的笔记、问题集锦三个辅助工具。教师如果有什么说明可以在后台添加教师寄语，在前台的该实验自主学习中学生就可以看到这部分内容。学生可以添加笔记，向教师提问，可以查看自己的问题和教师回复，也可以查看其他同学的提问和回复（前提是添加的时候权限选择为公开，否则只有提问者本人能阅读）。系统还将自动记录学生的所有学习记录、学习时间等，教师可以在后台学生学习管理模块中查看，学生自己则可以在个人空间查看。该模块充分的体现了学习者的自主性和教师的督学功能。

图4-3 自主学习模块

图4-4 自主学习模块
4.2.2 电子教材、视频教材模块
电子教材模块以实验类别和实验名称为导航列出了所有的实验电子课件资源。学生可以通过点击各类实验资源中的课件缩略图查看该电子课件。该模块中所有的电子课件资源都设有评论功能，学生可以对任意电子课件进行评论，以及查看其他人的评论，同时所有课件资源提供下载。视频教材模块功能与电子课件模块类似。主要是提供实验视频资料的学习。具体如图4-5所示。

图4-5 教材模块

4.2.3 实验报告模块
该模块主要是提供学生在线做实验报告的功能。首页将会提示教师布置的实验报告以及上交时间，学生可以在线填写实验报告，分为文字部分的报告和实验数据的提交。为了方便学生进行数据处理还提供了一个在线的科学计算器功能。为了防止学生在填写实验报告的过程中数据丢失，系统将会以一定的时间间隔对实验报告进行自动的保存，学生也可以手动点击保存将报告保存到草稿箱。具体如图4-6，4-7所示。

图4-6 实验报告模块

图4-7 实验报告模块

4.2.4 个人空间模块
该模块记录了当前用户的所有信息。包括个人资料、站内邮件、实验报告成绩、自主学习记录、通讯录。学生可以查看所有和自己相关的信息，可以收发站内邮件以及创建修改通讯录。如图4-8，4-9所示。
图4-8 个人空间模块

图4-9 个人空间模块

4.2.5 交互空间模块
提供了实时和非实时的交流环境。实时的交流主要是提供了一个在线的聊天室，提供学生和老师交流；另外还设有非实时性的班级讨论，同时为了某些专题性的学习讨论，可以创建虚拟学习组。创建者指定组长，学生可以申请加入学习组，组长可以对该组进行管理，包括组员以及问题管理，以实现学生之间资源的共享。效果如图4-8所示。

图4-8交互空间模块

第5章 各功能的技术实现

5.1通用功能的技术实现
(1) 页面缓动效果的实现
为了增加用户体验，在页面菜单展开或者收起的时候可以采用缓动的方式，这种效果可以用flash来实现，但是flash文件比较大影响页面容量而且flash和页面元素的交互性不是很好。基于上述原因采用JavaScript来实现缓动的效果。
实现这个效果主要利用了JavaScript的Math.ceil(x) 、setInterval(code，millisec)和clearInterval(x)函数。Math.ceil(x)函数可以返回大于等于x的最小整数。setInterval(code，millisec)函数可以在millisec规定的时间间隔后执行code指定的代码或者函数。clearInterval(x)函数则用于清除setInterval(code，millisec)的定期执行。结合上述三个函数的功能控制页面元素可以实现缓动效果。具体实现如下：
theHeight=obj.getAttribute("offsetHeight"); //获取页面元素的高度
if(theHeight<=0){ //如果高度小于等于零则展开
srcobj.style.background='url(images/title2.png) no-repeat left center';
obj.style.height="1px"; //设置高度为１
var changeH=function(){ //缓动函数
var obj_h=parseInt(obj.style.height);
if(obj_h<=realHeight){ //realHeight为最终的高度
obj.style.height=(obj_h+Math.ceil((realHeight-obj_h)/10))+"px";
//改变高度
} else{
clearInterval(int1); //当达到最大高度后停止执行改变高度的函数
}
}
int1= setInterval(changeH,1); //每一毫秒执行一次改变高度的函数
}
(2) 页面内容展开关闭的实现
为了节省宝贵的网页显示界面，让用户最想看的内容显示在最佳视觉位置，需要可以自由控制页面元素显示的功能。也就是可以让用户来选择展开或者关闭页面元素的显示。我们可以用上面介绍的缓动效果来实现页面元素的展开和关闭。但是这里还存在一个问题，页面首次载入默认只显示某块内容，而其他内容是不显示的也就是这些页面元素默认关闭了，那么缓动函数中需要页面元素的最大高度就无法获取了，因为元素中的内容是动态的从数据库中读取的，这样也就不能确定这个高度是多少。为了解决这个问题，在页面完成载入之后立刻获取并保存每个元素的高度，然后关闭这些元素只显示默认的一个，这些操作都是瞬间完成的，用户是不会察觉出来的。
function storeH(){
if(parent.content.document.getElementById("tuozhantitle")){
clearInterval(theH); h1=document.getElementById("kejiancontent").getAttribute("offsetHeight"); document.getElementById("kejiancontent").style.height=0;
document.getElementById("kejiantitle").style.display="";
}
}
theH=setInterval("storeH()",1);
这里执行获取保存页面元素高度的函数storeH()采用定时执行的方式而没有采用普通的执行方式是有原因的。在网络状况不佳的情况下，页面元素可能没有完全载入但是获取高度的函数却已经在执行了，这样会导致无法获取页面元素的错误。采用定时执行的方式，每次执行都先判断页面元素有没有完全载入，如果完全载入了再获取高度，并且清除定时执行功能。否则循环执行下一次判断。
(3) 弹出视频窗口的实现
在自主学习模块点击实验视频将弹出一个模拟的电视机，电视机屏幕上会显示要播放的视频，下方的六个按钮分别能实现停止、播放、声音控制等功能。这个模拟效果的实现需要结合图片处理、div和JavaScript来实现。
首先要确定视频显示的大小，然后根据视频显示的大小制作一张电视机的矢量图，电视机的屏幕大小和视频显示的大小要完全一致。然后在页面中设计三个div层。第一个层id为shipin_out，添加以下五个事件：
onmouseover="showclose()"
onmouseout="closeclose()"
onmousedown="startDrag(this) "
onmouseup="stopDrag(this) "
onmousemove="drag(this"
分别用来实现显示关闭窗口按钮、隐藏关闭窗口按钮、div拖动。因为篇幅原因具体的事件实现就不介绍了。这个div层是作为一个容器来包含要显示的内容。
第二个div层为shipin，是shipin_out的子元素，这个层的大小和电视机图片的大小完全一致，将电视机图片插入，并在相应的控制按钮处制作热点，这些热点的事件分别是触发相应的JavaScript代码从而实现对视频播放的控制。比如开始播放实现如下：
<object