《基于web数字媒体技术专业网络教学平台的设计与实现_毕业论文(38页).doc》由会员分享,可在线阅读,更多相关《基于web数字媒体技术专业网络教学平台的设计与实现_毕业论文(38页).doc(38页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、-基于web数字媒体技术专业网络教学平台的设计与实现_毕业论文-第 32 页编号 潍 坊 学 院毕 业 设 计 技 术 报 告课题名称:数字媒体技术专业网络教学平台的设计与实现(前台)学生姓名:田秋月学 号:08021140111专 业:计算机科学与技术班 级:2008级1班指导教师:韩殿元2012年6月网络教学平台设计与实现摘 要:随着科技的进步和互联网的广泛应用,网络教学的应用在教学过程中越来越广泛,并被越来越多的人所认知。网络教学是远程教学的一种重要形式。它是依托电脑和宽带等硬件设施,来实现远距离教学的目的。网络教学不受时间、地点以及教师的限制,只要透过一台能连接上网的电脑就可以随时随地
2、地进行学习。本次设计是关于多媒体课程教学平台的设计与开发,其中主要的主要功能模块包括了基本的课程的教学,实验实践,常用工具软件以及相关工具软件使用教程的下载,能够实现学生问题上传的辅导答疑,介绍相关教师资料的教学团队,以及展示一些学生作品的功能。还能够实现学生的注册与登录功能,提供一些拓展学习的知识。网页主要采用的是ASP与Dreamweaver相结合的方式来设计,并使用Access设计数据库来存储相关数据。关键字:ASP,多媒体,网络教学,平台开发Design and Implementation of Network Teaching PlatformAbstract:With the p
3、rogress of science and technology and the wide application of Internet, the application of network teaching in the course of teaching is more and more extensive, and more and more people cognition. Network teaching is an important form of remote teaching. It is relying on the computer and broadband
4、facilities and other hardware, to realize the purpose of remote teaching. Network teaching is not subject to time, place and teachers to the restrictions, as long as one computer which can connect to the Internet can learn whenever and wherever.This design is about the multimedia teaching platform d
5、esign and development, of which The main function modules of this web site include basic courses teaching, experiment and practice, software tools and related software tutorial download, which can realize the upload and answer question which are put forward by students. Beside this, the web can intr
6、oduces the relevant information of the teaching team, and show some the function of student work. It is able to realize students registration and login function, and provides some expansion of knowledge. This design main use of ASP combined with Dreamweaver way to design, and the use of Access desig
7、n database to store data.Key words:ASP, Multiple, Network teaching, Platform Development目录1前言11.1概述11.2主要开发工具介绍12需求分析32.1系统功能需求分析42.2系统的数据需求分析42.3系统的性能需求43概要设计53.1网站结构概要设计53.2数据库结构概要设计54数据库的设计64.1用户表(users)64.2模拟试题(mnst)64.3拓展学习(tzxx)74.4实验指导(syzd)74. 5教学团队(team)84. 6疑问留言(question)85网页功能的设计95.1首页95.
8、2课程教学135.3实验实践165.4工具软件185.5辅导答疑185.6教学团队305.7作品展示316结束语32参考文献34附录35致 谢411前言1.1概述21世纪是一个信息化的社会,随着科技的发展,网络已经和人们的生活密不可分了。信息化生活给人们带来了极大的方便。目前,互联网已经广泛地应用在教育上,并对教学过程产生了非常重要的影响。网络教学是传统教学的补充和延伸,它是以学生为中心的一种教学方式。它丰富了教学的方法,扩大了教学的空间。通过网络教学的方式传递教授的信息,实现教师和学生的互动。还可以将一些课堂上小的知识点作为拓展内容放到网络教学平台上,对此有兴趣的同学就可以在上课之余,自己上
9、网去浏览这些拓展信息,丰富自己的知识面。学生也可以随时将自己的问题放在网上,等待老师的解答。学生还可以在网上反复学习以巩固课堂上学到的知识。或是将课件下载下来进行自主学习。这样教学资源的利用率会大大提高。此次的网站是针对单门课程进行设计的网络教学平台(前台)的设计。在此基础上还可以扩充成多门课程的教学平台。然后由后台的服务进行更新。网站的主要目的就是实现教学资源的共享,满足教学的需求,提高教学资源的利用率。学生可以通过系统发布问题,可以搜索相关的问题。可以查看其它学生的问题,教师回答问题,通过这种方式实现师生之间的互动交流。此外,教师也可以动态发布实验的内容和要求。1.2主要开发工具介绍1.2
10、.1 梦幻网页的编织者DreamweaverDreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver相对于其他同类软件来说有这样几个特点:不生产冗余代码;具有方便的代码编辑,可以自由在可视化编辑和源代码编辑状态之间自由转换;强大的动态页面支持;操作方便,它提供了历史面板、html样式、模板等功能避免了重复劳动,除此之外,它还可以直接在页面中插入flash等插件。使用十分方便。Dreamweaver可以为用
11、户做到:使用动态HTML功能(例如具有动态效果的层和行为)而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键,甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。1.2.2 动态网站的脚本语言ASPActive Server Pages:“动态服务器网页”,一般简称为“ASP”,ASP之所以能受到大家的重视与使用的原因,主要在于所产生的执行结果都是标准的HTML格式,而且这些程序是在网络服务端中执行,使用一般的浏览器(如IE 或N
12、etscape)都可以正确地获得ASP的“执行”结果,并且将这ASP执行的结果直接在浏览器中“浏览”。ASP的语言相容性高,与所有的ActiveX Script语言都相容。并且它的隐密安全性也相当高。如果在浏览器中直接查看网页的源文件,那么只能看见html文件。而ASP程序代码是看不到的。能够避免ASP程序被看见和盗用。再有,使用ASP抑郁操控数据库,它可以通过ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库,例如Access、SQL Server、Oracle等等。因此选择采用ASP结合 dreamweaver8构架网站。并使用IIS5.0对页面进
13、行调试。1.2.3 数据库AccessMicrosoft Access是一种桌面数据库,只适合数据量少的应用,在处理少量数据和单机访问的数据库时是很好的,效率也很高。但是它的同时访问客户端不能多于4个。Microsoft Access数据库有一定的极限,如果数据达到100M左右,很容易造成服务器IIS假死,或者消耗掉服务器的内存导致服务器崩溃。对于需求不算太大的数据库来说,使用Access比较合适,如果网站还需要继续扩充,则可以将数据库的开发工具改为SQL server。数据库的访问方式有很多种,主要有公共网关接口GGI(Common Gateway Interface),先进数据库连接器AD
14、C(Advance Database Connector),JAVA/JDBC语言编程,动态服务器页面ASP。相对应以上几种数据库访问方式,ASP编程灵活简洁,具有较高的性能,是目前访问WEB数据库的最佳选择。1.2.4 SQL查询语言SQL(Structured Query Language)结构化查询语言,是一种数据库查询和程序设计语言,用于存取数据以及查询、更新和管理关系数据库系统。同时也是数据库脚本文件的扩展名。SQL是高级的非过程化编程语言,是沟通数据库服务器和客户端的重要工具,允许用户在高层数据结构上工作。它不要求用户指定对数据的存放方法,也不需要用户了解具体的数据存放方式,所以,
15、具有完全不同底层结构的不同数据库系统,可以使用相同的SQL语言作为数据输入与管理的 SQL接口。它以记录集合作为操作对象,所有SQL语句接受集合作为输入,返回集合作为输出,这种集合特性允许一条SQL语句的输出作为另一条SQL语句的输入,所以SQL语句可以嵌套,这使它具有极大的灵活性和强大的功能,在多数情况下,在其他语言中需要一大段程序实现的功能只需要一个SQL语句就可以达到目的,这也意味着用SQL语言可以写出非常复杂的语句。1.2.5 其他网页制作还用到了一些其他的软件,比如说处理图片的Photoshop软件,本次设计的网页导航图片就是通过Photoshop剪切拼合成的。还有另一个制作平面二维
16、动画的flash软件,在学生作品展示中,由于资源有限,就在末尾放上了一个自己做过的flash动画。还有一个比较重要的工具就是测试网页用到的windows组件IIS。HTM等格式的静态网页可以通过网页浏览器直接进行测试,ASP动态网页的测试则最好是通过IIS,在电脑安装系统的时候系统自带了一个服务器测试软件。安装方法如下:打开控制面板,选择添加或删除程序,再选择添加或删除windows组件,钩选中Internet信息服务(IIS)点击下一步,按照向导安装上IIS。安装成功后,将整个网站放在合适的目录下即可对动态网页进行测试。2需求分析建立网络平台的主要目的是为了方便教学工作,其最本质的功能在辅助
17、教学方面。2.1系统功能需求分析本次设计的是前台,主要实现的是面向学生的这部分功能。主要功能及简介如下:(1)注册及登录。学生可以通过注册来获得用户名,获得登录的权力,这有助于在辅导答疑中实现问题的查看(2)上传功能。学生可以将老师布置的部分作业通过网站提交上传。(3)下载功能。现在教师上课一般都有课件,通过后台管理可以将每一章节的内容放到网站上,学生想要再看课件的话可以通过进入网站下载。(4)留言功能。学生可以通过答疑平台将自己的问题提交到网站上,然后由老师回答,学生再次登录的时候可以查看自己的问题是否被回答了。(5)查看功能。整个网络教学平台是要实现教学目的,所以很多教学内容都要放到网页上
18、供学生查看。2.2系统的数据需求分析数据是系统的灵魂,没有数据的话也就无从谈起管理,系统也就不能发挥它的功效。所以说数据库的选择对系统的开发很重要。虽然本次设计采用的是适用于小型数据存储的Access数据库开发,但SQL查询语句仍然适用。SQL查询语句可以实现一系列复杂的操作。比如说数据的增加、删除、修改等等。配合ASP使用也十分方便。根据网站的设计,需要动态显示的数据最好都放在数据库里。比如说,课下的拓展知识,做练习用的模拟试题,存储用户信息的用户表,存储教师信息的表。存储与实验相关信息的实验表。还有就是存储学生留言提问信息的问题表。2.3系统的性能需求网络教学平台是一个教育类型的网站,所以
19、必须做到实用、简洁。界面不必太过花哨,要做到界面简洁明了、导航清晰。用户只要能上网就可以进行学习,以及实现上传,下载等功能。并且,网站应该具有可扩充性,此次设计的网络教学平台只是针对单门课程的设计,还有很多内容还不全面,因此网站的设计要能够方便日后的更改、扩充等。3概要设计3.1网站结构概要设计对于功能较为全面的网络教学平台来说,一般都有教学大纲、教师信息、讨论答疑、课程作业、教学笔记、教学邮箱、资源下载等一系列复杂的内容。由于时间,资源的限制,所以本次设计只能实现其中一部分的功能。网站主要结构如下图所示。主页首页课程教学实验实践工具软件作品展示辅导答应教学团队图3.1网站结构3.2数据库结构
20、概要设计由于整个网站的内容不是特别多,所以把所以的表设计在了同一个数据库中,数据库中数据表的情况如图3.2所示。usersexercicemnsttzxxsyzdteamquest_ion图3.2数据库结构设计4数据库的设计整体来说包含了六个数据表,第一个是users表,用了存储学生注册信息的表;第二个是mnst表,用来存储所以的模拟试题的信息的表;第三个是tzxx表,用来存储拓展学习内容的表;第四个是syzd表,用来存储与实验相关内容的表;第五个是team表,用来存储教学团队的信息;第六个是question表,用来存储学生问题的表。4.1用户表(users)表4-1 用户表(users)字段
21、名数据类型长度是否允许为空S_num文本20否S_name文本5否S_password文本20否S_class文本20是S_tel文本12是以上为用来存储用户的用户表,共有五个字段,其中S_num和S_password分别用做用户名和登录密码。并且不允许为空,最长不得超过20个字符。S_name用来存储用户的姓名,也不允许为空值。S_class和S_tel作为辅助选项,可不填写。4.2模拟试题(mnst)表4-2 模拟试题(mnst)字段名数据类型长度是否允许为空id数字长整形否title文本50是content备注是模拟试题表用来存储模拟题的相关信息,有三个字段,第一个是便于搜索的id字段,
22、第二个是title字段,用来存放试题的标题,例如说章节之类的内容。第三个字段是content,备注类型的字段,可以用来存放较长的文本。4.3拓展学习(tzxx)表4-3 拓展学习(tzxx)字段名数据类型长度是否允许为空Num数字长整形否title文本50是content备注是拓展学习(tzxx)表用来存放拓展学习的相关信息,也有三个字段,第一个是便于搜索或进行参数传递的num字段。第二个是title字段,用来存放拓展学习中小的知识点的标题,例如关键字之类的内容。第三个字段是content,备注类型的字段,可以用来存储较多较详细的内容。4.4实验指导(syzd)表4-4实验指导(syzd)字段
23、名数据类型长度是否允许为空S_id自动编号长整形否S_name文本50是S_goal备注是S_content备注是S_reqment备注是实验指导(syzd)表是用来存放于实验实践里相关的信息。S_id字段是自动编号字段,用做搜索或参数传递。S_name是用来存放实验名称的字段,长度不超过50个字符长。S_goal是存放实验目的的字段,类型为备注类型,可存储比较长的文本。S_content是存放实验内容的字段,同样是备注类型的字段。S_reqment是存放实验要求的字段,数据类型为备注类型。4. 5教学团队(team)表4-5教学团队(team)字段名数据类型长度是否允许为空T_id文本20否
24、T_name文本8是T_jieshao备注是T_imgOLE对象是教学团队(team)表是用来存放教师相关资料的,T_id是用来存放一些编号的,比如说教师的员工号,当然也可以在输入数据前将它更改成自动编号,这样每次添加数据的时候就不用反复输入编号。T_name用来存储教师姓名或称呼之类的信息。T_jieshao则是存储对教师个人资料的详细介绍。T_img是一个OlE对象,用来存储相关的照片信息。4. 6疑问留言(question)表4-6疑问留言(question)字段名数据类型长度是否允许为空S_num文本20否SQ备注否SA备注是疑问留言(question)表是用来存储学生提交上来的问题的
25、,S_num是配合前面的用户表设置的,将这样两个表连接在一起的时候就可以查询到已登录学生的账号和问题了。SQ字段用来存储学生的问题,和前一个字段组合形成数据表的主键,避免一个学生提出相同的问题。SA则用来存储对某一个问题的答案。以上是关于本次设计的数据库中所用的到的表的设计,尽最大可能将所用能存储到数据库中的内容存储到数据库中,以便将来后台进行修改。使用ASP+Dreamweaver+Access开发出来的网站只能尽量做到这些。5网页功能的设计5.1首页首页页面布置如下图:图5.1首页界面首页的布置是这样的:上面是导航条,且在本次设计中,所有的网页上部都是主要的导航条。根据一个全局变量的判断,
26、先判断用户是否登录成功。若没有登录的时候,左侧上方是一个简单的登录界面,要求输入用户名和密码,且两个都不能为空,若输入为空则显示如下图:图5.2出错界面表单的代码设置如下: 用户名: 密 码: 在提交表单的时候先进行的是一个检查函数:checkdata()function checkdata() if( f1.yonghu.value.length20 ) alert(请输入正确的用户名 !)return false;if( f1.mima.value.length20 ) alert(请您输入正确的登录密码 !)return f
27、alse;函数对两个输入的文本框进行检查,首先是用户名是否为空或者是超过了规定的长度。然后检查密码输入是否规范。表单提交后执行的操作是chklogin.asp,其代码如下: username=trim(request.form(yonghu)password=trim(request.Form(mima)rs.open select * from users,cn,1,3do while not rs.eof if username=trim(rs(S_num) and password=trim(rs(S_password) then response.cookies(denglu)=ok
28、response.cookies(username)=rs(S_num) response.cookies(sname)=rs(S_name) response.redirect index.asp end if rs.movenext loopif rs.eof then MsgBox 对不起,用户名不存在,或密码输入错误location.href = javascript:history.back()以上代码判断从前一个页面传递过来的两个参数是否是正确的用户名和密码,如果用户名不存在或者密码错误的话则弹出消息框提示用户,用户名不存在或密码输入错误。然后返回首页重新输入。如果数据库中存在该用
29、户且密码正确,则将全局变量”denglu”的值设置成”ok”, 并且将用户名作为全局变量保存起来。然后主页用户登录位置则变动如下,以用户1234为例:图5.3登录成功界面登录成功后,左侧上方显示的是用户的登录学号以及注册姓名,姓名为空则显示空白。下方是提供了学校的一些超链接,方便学生访问其他网站。右侧则是和数字多媒体相关的一些简介。若用户没有进行注册的话,可以点击用户登录的地方,有一个注册按钮,点击注册按钮可进入注册界面。界面如下:图5.4用户注册界面如上图,用户注册界面要求用户输入的信息比较简单,用来做用户名的学号、学生姓名、密码,班级以及手机号。此注册页面由导航和下方注册信息表单构成。因为
30、用户名和密码不能为空,所以同样设置了一个检查函数,和首页的检查用户名和密码输入是否为空的函数原理是一样的,在这里就不过多介绍了。还有一点是密码的确认输入,因为密码要输入两次,所以在检查函数里有一项是检查两次输入的密码是否相同。在提交表单之后检查无误的情况下转到处理页面adduser.asp,其代码如下:num=trim(request.form(num)sname=trim(request.Form(name)pwd=trim(request.form(pwd)sclass=trim(request.Form(sclass)tel=trim(request.form(tel)rs.open s
31、elect * from users,cn,1,3rs.addnewrs(S_num)=numrs(S_name)=snamers(S_password)=pwdrs(S_class)=sclassrs(S_tel)=telrs.updaters.closecn.close MsgBox 注册成功,请重新登录location.href = index.asp此段代码的主要作用是将用户的注册信息写进数据表里,然后提示用户注册成功,再转到首页重新登录。5.2课程教学课程教学主要是知识课堂知识方面的教学内容以及一些相关的资源。其效果如下图:图5.5课程教学界面 课程教学的界面是针对多媒体课程的教学。
32、左侧是几个选项,右侧则是用一个框架展示的类似于目录的一个课程的要点,点击右侧的某个选项,框架内容将自动更新成与选中的选项相关的网页,网页下端有返回按钮,点击则返回课程教学起始页。左侧的是四个链接内容。第一个教学大纲是一个简单的网页,显示的主要内容是关于多媒体的教学内容,教学要求等信息。第二个选项是课件,点击课件会在右侧提供每一章的教学课件。到时只需要点击相关的连接即可将相应章节的教学课件下载下来,实现资源的共享。第三个选项是拓展学习,点击拓展学习之后将刷新到一个新的页面,页面如下:图5.6课程教学之拓展学习拓展学习的内容是从数据库中读取出来的,左侧是从数据库中的(tzxx)表中读取出来的标题行
33、,点击标题,右侧显示相对应的具体介绍。由于每个标题对应的内容都比较多,所以左侧为每个标题设置锚点,以页内设置连接的方式使右侧全部显示数据库中的内容是不现实的,这样会占用太多的空间,所以采用一个参数传递自动刷新的方式来显示相对应的知识点。实现的方式主要还是通过一个框架和两个动态网页的文件。左侧显示标题的代码如下: % rs.open select * from tzxx,cn,1 do while not rs.eof a href=tzxx1.asp?id= target=right rs.movenext loop rs.close cn.close这段代
34、码是将tzxx表中的标题全部显示在左侧,并为每一个标题设置一个连接,在更新网页的时候更新的位置是名字是“right”的一个框架,就是整个页面的右下方区域。同时将该标题所对应的num值作为一个id参数传递到tzxx1.asp中。tzxx1.asp的主要代码如下 id=request.QueryString(id) if id= then rs.open select * from tzxx where num=0,cn,1,3response.Write(changechr(rs(content)elsers.open select * from tzxx where num=&id,cn,1,
35、3response.Write(changechr(rs(content)end if根据上一个网页传递过来的id参数,在数据库中进行查找,查找到与参数相符的记录,然后将对应的记录内容显示在网页上。其中用到了一个转换函数,changechr()。其主要功能是将数据库中的文字原样输出,否则网页中显示的文字将显得非常不规范排列不整齐。changechr(),函数的代码如下:function changechr(str) changechr=replace(replace(replace(replace(str,>),chr(13),), , ) end functionreplac
36、e()是一个标准函数,其中有三个参数,第一个参数是一个字符串,必有的参数,即要被搜索的字符串,第二个参数是所要查找的字符,第三个参数是要替换后的字符。课程教学的最后一项是模拟试题,模拟试题也是存储在数据库中的记录,使用的方法和拓展学习的方法是类似的,所以就不过多赘述了。5.3实验实践实验实践的界面如下:图5.7实验实践界面实验实践页面的主要作用是显示与实验信息相关的内容。将存储在数据库中的实验信息读取出来存放在当前页面,本次使用的连接方式是锚记的方式,点击左侧选项,右侧则定位到相关部分,以显示实验的标题、实验目的、实验内容、以及实验要求这些信息。原理及代码和以上的模拟试题类似,不同之处在于所连
37、接的表的内容不同。右下角的部分是提供了一个上传作业的功能。学生可以将完成的作业或作品通过网页提交上去。实现文件上传的方式有两种,一种是需要先安装一个组件,然后实现文件的上传功能,另一种则是无组件上传方式,无组件上传代码虽然复杂,但相对于使用组件上传要简单一些。先将文件上传到服务器,然后在下载到文档中。由于学到的知识有限,这部分代码来源于互联网。关键代码如下:dim upload,file,formname,formpath set upload=new upload_5xsoft 建立上传对象 formpath=upload.form(filepath) 在目录后加(/) if right(f
38、ormpath,1)/ then formpath=formpath&/ for each formname in upload.file 列出所有上传了的文件 set file=upload.file(formname) 生成一个文件对象 if file.filesize100 then MsgBox 请重新上传location.href = javascript:history.back()response.end end if if file.filesize500*1000 then 设置上传文件大小为500k MsgBox 请重新上传location.href = javascrip
39、t:history.back()response.end end if if file.filesize0 then 如果 filesize 0 说明有文件数据 file.saveas server.mappath(updata&file.filename) 保存文件 end if set file=nothing next set upload=nothing MsgBox 已成功上传location.href = javascript:history.back()将上传的文件保存在了名为upload的文件夹中。在学生上传作业的时候,可以将文件的名字以自己的学号命名。这样比较便于区别不同学生
40、的作品。5.4工具软件工具软件的界面如下:图5.8工具软件界面工具软件是可能能够用到的素材以及教程类型的信息,共分为积件、图片、表格、实验素材、软件教程几个部分。学生下载时候只需要点击文字便可将相应的文件下载成功,此部分内容是由几个单独的网页组成,不是存储在数据库中的内容。5.5辅导答疑辅导答疑的界面如下:图5.9提问内容照片现在显示的已经登录上以后进入辅导答疑看到的界面,如果不登陆的话,看到的界面如下:图5.10尚未登录的辅导答疑界面若未经过登录则显示尚未登录,下面有返回首页登录的文字,点击则可返回网站首页进行登录。在辅导答疑界面不管是否登录,右侧显示的都是全部问题。未登录的时候,点击我的问
41、题,显示的仍然是全部问题,若登录后则只显示和登录学号相关的问题。为了便于查看相关的问题,全部问题中还提供了搜索的功能,按照输入的关键字对问题进行检索比如搜索中输入 “颜色”两个字,显示结果如下:图5.11 按关键字搜索提问中有颜色两个字的问题便列在了右边。整体代码如下: Dim sousuo,sousuo1 sousuo=Trim(Request.Form(sousuo)&) if sousuo then sousuo1=Where SQ like %& sousuo &% else sousuo1= end if 输入要查找问题的关键字: input type=text maxlength=20 name=sousuo value=%if sousuo then Response.Write sousuoelse Response.Write 请输入关键字end ifonmouseover=if(this.value=输入关键字)this.select();dim sqldim rs 实例dim totalPut 总记录数dim CurrentPage 当前页dim TotalPages 总页数dim i,jdim errmsgMaxPerPage=10 每页10条记录founderr=falsesql = select SQ,SA from question