获取项目源文件，联系Q:1225467431,可指导毕设，课设
摘要：随着网络技术的迅猛发展，网络教育也呈现了前所未有的发展趋势。但是我国的网络教育起步较晚，已经与国外先进的网络教育之间有了很大的差距。我们希望通过努力开发一个功能比较完善的网络课程来带动大学的网络课程发展。在网络课程中，提供了五大功能：网上学习功能、网上测试功能、作业提交功能、师生交流功能和资源下载功能。其中，网上学习功能为主，其他的功能也是必不可少的补充，它们共同构成了一个完善的网上学习系统。此设计就是选用JSP语言和一些工具软件来开发网络课程的网站的，体现了用JSP技术的优越性。
关键词： 网络课程 JSP 网站
Development of Network Course Website Based on JSP Technology
Abstract: With the rapid development of network technology.the education of the network has presented an unprecedented development tendency.But the network education of our country didnt start very early even a little late .and there has been a long distance between our network education and advanced network education abroad.We expect to make wvery effort to develop network course with perfect function .so than we can make up and spur an the development of the college network course.Our network course willprovide us with five function .those are.function for study.function foe test.functionfortransferring information form PC to Internet.function for downing resource and function for communication between teachers and etudents.Among them.the function for study is the most important .of course.the otherfunctions are also essential complements.they form a perfect on-line study sys tem together..This design is just developing netstation for natwork course with JSP language and some tool sofeware..It embodies the superiority of using JSP technology.
Key words： The network course JSP web site
目 录
TOC 1-3 1绪论 1
1.1网络课程概念及特点 1
1.1.1网络课程概念 1
1.1.2网络课程的特点 2
1.2网络课程应该具备主要功能 3
1.3 网络课程的制作工具 4
1.3.1网络课程制作软件的使用 4
1.3.2 编程语言的使用 6
1.3.3数据库的使用 8
2 课程网站的设计与开发 9
2.1 网站的设计 9
2.1.2 网站的设计思想 9
2.2 网站的制作 10
2.2.1 网站的基本结构 10
2.2.2 网站的框架图 15
2.2.3 网站的制作流程 15
2.2.4 数据库的建立 17
3 网络课程的功能及其技术实现 19
3.1网络课程的功能实现 19
3.1.1 网上学习功能 19
3.1.2 网上测试功能 19
3.1.3 作业提交功能 20
3.1.4 师生交流功能 21
3.1.5 资源下载功能 21
3.2 网站的技术实现 22
3.2.1 Css技术 22
3.2.2网页特效使用 24
4 结论 25
5 致 谢 26
6 参考文献 27
1绪论
1.1网络课程概念及特点
1.1.1网络课程概念
网络课程，顾名思义就是用于网络教育的课程，首先，它是课程，其次我们强调它必须具有网络的特点。按照美国新教育百科辞典课程”条目：所谓课程是指在学校的教师指导下出现的学习者学习活动的总体，其中包含了教育目标、教学内容、教学活动乃至评价方法在内的广泛的概念”。网络应用于教育领域，给人们提供了大量便捷的学习机会、丰富的教学环境和教学资源，使学习活动更加自主化、个性化，使教育的适应性得以大大加强，网络课程要充分体现网络的这一特点，构建多媒体化的接近真实生活的自主、协作学习情境，能充分利用网络的资源开放性。 总而言之，网络课程就是通过网络表现的某学科的教学内容及实施的教学活动的总和。它包括两个组成部分：按一定的教学目标、教学策略组织起来的教学内容和网络教学支撑环境，其中网络教学支撑环境特指支持网络教学的软件工具、教学资源以及在网络教学平台上实施的教学活动。
网络课程是一种可以跨越时空的开放式的课程体系。传统的课程教学是基于课堂的集体授课。教师面对面地在课堂上将课程内容通过备课，转化为自己的语言并以一定的结构传授给学生。师生之间可以进行面对面的交流，教师可以通过多种信息通道得到学生的信息反馈，及时调整授课进程和方式。但当班级人数较多时，教师就不能很好地照顾到每个学习者的个别需要。同时，这一课程模式要求教学同步进行(如图1)，种种局限的存在使得课堂教学已经不能满足目前社会教育发展理念和实践的需要。而网络课程的出现则一定程度上满足了这一需求，学习者可以不再局限于课堂这一特定的空间，可以随时随地进行学习。
图1 课堂教学模式中的信息交互
网络课程的资源更为丰富。网络以资源丰富和信息递送方便见长。除了提供相应参考书目和简单的内容介绍方便学习者选择和查阅外，网络课程还推荐教师精心选择的与课程相关的资源链接，轻点鼠标，学习者就可以进入另外一个缤纷的世界。教育心理学认为概念和理论的学习是要通过理解这一概念或理论在不同背景下的各种阐述和表现，才能完整、深刻地认识。网络提供的丰富资源则适应了学习者的这一需要。比较完善的网络课程还为学习者提供自我评价和与他人交流、评价他人的环境，随着学习的进展，不断积累的学习者的资料成为新的宝贵的学习资源。
网络课程是多点对多点的交互，更强调协作性的学习。在课堂教学中一般是点对面的交互(师——生)，信息集中在教师那里处理，学生得到的信息量相对较少。如图2所示，在基于网络的课程模式中，师生可以通过多种交互手段如聊天室、BBS、E—mail来进行交流，学生除了和教师交流还可与同学一起协商，通过网络组成了一个学习信息网，对信息的利用率大大提高了。有教师参与，学生自己管理聊天室和BBS，体现了学习者是学习主体的思想。对学习过程中比较普遍的问题，教师将其组织到FAQ (Frequently Asked Questions) 列表中，便于同学查阅，同时也丰富了课程资源。
图2 网络课程模式中的信息交互
1.1.2网络课程的特点
（1）资源共享性：
网络课程可通过网络供给不同学习者使用。网络课程存放在网站的服务器上，可以让能够上网的学习者使用，学习者通过网络与网站的服务器连接获取网络课程信息，并进行学习。
（2）开放性：
网络课程在时间、空间和课程体系及内容结构上都是开放的。网络课程体系及内容结构具有模块化、可扩展、更新周期短的特点，网络课程是跨时空开展教学活动的，学习者可以通过网络随时随地参与课程学习。
（3）即时更新性：
即时更新性也称动态性，指网络课程的学习内容是及时更新的。网络课程不仅比印刷媒体更新速度快，而且比单机版的多媒体课件也更新快，只需要将更新的那一部分内容上传到服务器上，不需要上传全部课程内容，学习者就能够通过网络学习到最新的教学内容。
（4）时空不限性：
学习者无论在何时何地只要通过网络就能够利用网络课程进行学习。
（5）交互性：
网络课程可以通过网络（聊天室、BBS、E—mail等）实现人与机、教师与学生、学生与学生之间教与学的交互。
（6）自主性：
网络课程以学生自主学习为主，充分体现了学习的个性化特征，学生在学习过程中具有较大的选择性和自由度。
（7）协作性：
网络课程可以让教师、学生通过讨论、合作、竞争等形式完成一个确定的学习任务。
（8）非线性：
网络课程的内容结构方式是非线性、超链接的，课程结构十分灵活，这是由Web本身的特性所决定的。
（8）多维性：
网络课程内容表现形态的多维性，即网络课程的内容可以通过文字、图形、图像、声音、动画和视频等多媒体形式来表现，可以二维模拟、三维仿真，还可以通过虚拟现实实现多维的教学信息传递。这是传统的教学不具有的特性。
（9）整合性
网络课程体现了信息技术、信息资源、信息方法、人力资源、课程内容和现代教育思想的整合，是一种新型课程模式。
在《计算机网络》的课程网站中，具有网络课程的基本特点，能够满足广大的学习者实现网上学习功能。
1.2网络课程应该具备主要功能
（1）共享功能：
从个人计算机到局域网，然后发展到互联网，资源的共享能力越来越强。网络课程的资源不存在网上登陆，在网络课程的资源下载板块里，学生可以尽情下载。网络课程的资源建设不再重复；对于学生来说，利用计算机网络资源共享功能可以高效率地获取各种学习资源，同时将自己的学习经验与他人分享。
（2）虚拟功能：
利用计算机网络的虚拟功能可以在网上实现所谓的网上学校”。在这样一所没有围墙的学校中，学生的学习是一种开放性的学习，学生可以在自己家里、在业余的时间来进行学习．真正实现终身教育。同时，也给不同社会阶层的人士提供平等的学习机会。
（3）交互功能：
计算机可以实现人——机之间的双向沟通，利用计算机网络则可以实现人与人之间的远距离信息传播。在这种人机交互、人与人之间的交互过程中，学习也变得更有启发性和具有更高的效率。
（4）协作功能：
以往的计算机辅助教学是单机教学，这样能够实现个别化学习。但是个别化学习只能解决部分学习问题，人们在实践中遇到的更多的问题是如何与他人合作，共同完成任务。计算机网络提供了这种协作的环境，从而使网络课程也具备了这样的协作功能，可以在网络课程中开展各种协作的学习活动。
（5）服务功能：
随着网络教育的不断深入发展，网络课程的服务功能也逐渐被人们所认识。同传统的教育教学方式不同，在网络上开展教育活动，学生是学习的主体，教师在传统课堂上的地位在网络课程中发生了根本性的变化。传统课程学习活动中，以没有掌握相应专业知识的学生作为输入对象，经过传统课程学习后，输出的是知识和能力都得到增长的学生。而在网络课程学习中，学生的学习始终贯穿于学生的一生。所以在网络课程学习中，学生的输入和输出变得难以准确界定。网络课程向学生提供终身服务，网络课程不是要造就学习者，而是要以学习者为中心，向学习者提供帮助。网络课程的论坛里有个服务专区，是针对那些在网络课程学习中有疑问的学生提出的问题，然后有专门的教师有针对性给于回答。
1.3 网络课程的制作工具
1.3.1网络课程制作软件的使用
（1） 网站框架程序软件
网络课件的框架使用Dreamweaver MX 网页设计软件编制， Macromedia Dreamweaver MX 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。利用 Dreamweaver 中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在 Macromedia Fireworks 中创建和编辑图像，然后将它们直接导入 Dreamweaver，或者直接在 Dreamweaver 中添加 Macromedia Flash 对象，从而优化开发工作流程。
作为网络课程主要制作软件，先必须建立网络课程的站点，然后把所有的网页和模板全都放在站点里，利用站点来管理制作网页.这也是制作网站的基本常识。这样不仅方便制作网站，而且对网站的设计也很有规律性；也有利于网站制作完成后的系统整合，充分利用了Dreamweaver 3.1.1 网站框架程序软件MX站点的各项功能来实现网站的全面完成。
（2）图像处理软件
FireWorks或PhotoShop等图像处理软件可进行界面及艺术字的美观设计。
Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大型图形切割、动态按钮、动态翻转图片等，对于辅助网页编辑来说，Fireworks将是最大的功臣。
在网络课程的图片处理过程中，由于，网站的图片基本上都很小，而且要求不是很高，所以多数情况下使用Fireworks MX 来处理图片比较灵活，使用方便。，但是作为通用平面美术设计软件Photoshop它的功能完善，性能稳定。我们也注意它的使用价值，在制作一些比较大的图片或者是要求比较高的图片，比如：网络课程的logo就完全是用Photoshop设计完成的。
（3） 动画制作软件
Flash是Macromedia公司的一个网页交互动画制作工具，与其它工具相比，它具有矢量描述、播放流畅、数据量小、色彩鲜明等特点。特别重要的一点是，其它的教学软件都必须下载处理后才能用到课堂教学上，而Flash采用了流技术，可以边下载边播放，这样就能使整个教学过程流畅自然。而且用Flash制作的动画数据量很小，有利于它在互联网上传输，方便使用者在互联网上直接调用运行。加上Flash的描述是基于矢量的，用它制作出来的动画可以任意缩放，不会产生任何变形，等等。由于Flash的这些优点，我们制作网络课程网站的同时，不仅自己制作一些Flash动画，还把一些短小的影片转换成Flash的swf格式这样使文件变小，有利于网络的传输，在网上浏览，这点是非常重要的。
（4） 其它工具
①SnagIt
这个软件主要是用来取图的，通过某些手段，把某些图片用这个软件来抓取某些有用的部分，来弥补网站上的一些不足。
②Colorkey
可以在屏幕上任意处取色值，这个软件在网站的配色方面起到重要的作用，网络课程中为了整个网页的颜色协调性，而用dreamweaver 软件里也没有这个取色的功能，所以制作网站的配色基本上就取决于Colorkey。
③EditPlus2
文字编辑工具，在动态网站制作时，很方便打开和修改asp、jsp源代码，网络课程的资源下载、作业提交、测试系统和论坛都是以动态的形式表现出来的网页，因此EditPlus2对网络课程功能实现十分重要。
④Ulead VideoStudio
Ulead(会声会影)是一个视频编辑软件，可以轻松创建带有生动的标题、视频滤镜、转场和声音的视频作品。在网络课程中我们利用它来制作一些简单的视频，如：在网络课程的动画教学中，第一个就是用Ulead VideoStudio做出的网络课程制作主要页面的连续播放视频。
1.3.2 编程语言的使用
总的来讲，JavaSever Pages（JSP）和 微软的Active Sever Pages（ASP）在技术方面有许多相似之处。但仍然存在很多不同之处，其中最本质上的区别在于：两者是来源于不同的技术规范组织，其实现的基础：WEB服务器平台要求不相同。
而最明显的不同点：开发人员在对两者各自软件体系设计的深入了解的方式不同。JSP技术基于平台和服务器的互相独立，输入支持来自广泛的，专门的，各种工具包，服务器的组件和数据库产品开发商所提供。相比之下，ASP技术主要依赖微软的技术支持。
(1)平台和服务器的独立性
JSP技术依附于一次写入，之后，可以运行在任何具有符合JavaTM语法结构的环境。取而代之过去依附于单一平台或开发商，JSP技术能够运行在任何WEB服务器上并且支持来自多家开发商提供的各种各样工具包。
由于ASP是基于Activex控件技术提供客户端和服务器端的开发组件，因此ASP技术基本上是局限于微软的操作系统平台之上。ASP主要工作环境是微软的IIS应用程序结构，又因Activex对象具有平台特性，所以ASP技术不能很容易地实现在跨平台的WEB服务器的工作。尽管ASP技术通过第三方提供的产品能够得到组件和服务实现跨平台的应用程序，但是Activex对象必须事先放置于所选择的平台中。
(2)开放的开发过程，开放的源代码
JSP应用程序界面（API）毫无疑问已经取得成功，并将随JAVA组织不断开放扩大继续完善。相反，ASP技术仅依靠微软本身的推动，其发展是建立在独占的，封闭的开发过程基础之上。
ASP技术 JSP技术
可重用.跨平台组件 没有JAVABEANS 企业级JAVABEANS，定制JSP标签
安全:防范系统崩溃 没有 有
内存泄露保护 没有 有
脚本语言 VBSCRIPT.JSCRIPT JAVA
定制标签 没有 有
兼容传统的数据库 可以（COM） 可以（用JDBC API）
集成数据源的能力 能工作在任何符合ODBC规范的数据库 工作在任何符合ODBC规范的数据库，而且能访问符合JDBC技术规范数据库
组件 COM组件 JAVABEANS，企业级JAVABEANS或扩展的JSP标签
扩展工具支持 有 有
表1 JSP和ASP比较
(3)从开发人员的角度来看：ASP和JSP技术都能使开发者实现通过点击网页中的组件制作交互式的，动态的内容和应用程序的WEB站点。ASP仅支持组件对象模型COM，而JSP技术提供的组件都是基于JavabeansTM技术或JSP标签库。由此可以看出两者虽有相同之处，但其区别是很明显的。
1.3.3数据库的使用
MYSQL是一个功能强大的数据库语言。SQL通常使用于数据库的通讯。ANSI(美国国家标准学会)声称，MYSQL是关系数据库管理系统的标准语言[4]。MYSQL语句通常用于完成一些数据库的操作任务，比如在数据库中更新数据，或者从数据库中检索数据[11]。使用MYSQL的常见关系数据库管理系统有：Oracle、 Sybase、 Microsoft SQL Server、 Access、 Ingress等等。虽然绝大多数的数据库系统使用SQL，但是它们同样有它们自立另外的专有扩展功能用于它们的系统。但是，标准的MYSQL命令，比如Select、 Insert、 Update、 Delete、 Create和 Drop常常被用于完成绝大多数数据库的操作。
但是，不像其它的语言，如C、Pascal等，MYSQL没有循环结构(比如if-then-else、do-while)以及函数定义等等的功能。而且MYSQL只有一个数据类型的固定设置，换句话说，不能在使用其它编程语言的时候创建自己的数据类型。
（1） 表
关系数据库通常包含多个表。数据库实际上是表的集合，数据库的数据或者信息都是存储在表中的。表是对数据进行存储和操作的一种逻辑结构，每一个表都代表一个对用户意义的对象。例如，一个公司数据库中，会有雇员表、部门表、库存表、销售表、工资表等等。经常见到的成绩表就是一种表，它是有行和列组成的，并且可以通过名字来识别数据。列包含了列的名字、数据类型以及列的其它属性；行包含了列的记录或者数据。
（2） 数据检索
在SQL中SELECT语句通常用于检索数据库，或者检索满足设定条件的数据。
（3）网站中的数据库
网站数据库的主要目的就是存储信息，一般是通过前台页面与浏览者的交互收集信息，然后结合前台的程序(一般为动态页面)，实时生成浏览者所看到的最新内容，从而具备普通静态页面所不能达到的效果。
2 课程网站的设计与开发
2.1 网站的设计
2.1.1 网站的设计原则
网络课程的网站必须以实用、有效的原则来制作。能体现个性化、协作化、交互性、开放性。
2.1.2 网站的设计思想
(1)总体设计
总体设计是设计过程中最重要的一环，它是形成网络课程设计总体思路的过程，决定了后续开发的方方面面，网络课程设计过程中，总体设计具有规范性、组织结构具有条理性。网络课程的总体设计中，不仅对网络课程的整体框架的设计还包含了内容的整体规划以及课程内容怎样安排在网页中，都作了详细的计划，和老师一起讨论了很长时间，经过不断的修改最后才决定。
(2)教学设计
网络课程设计时，教学设计注重教学目标及教学内容分析、设计教学活动时注意情境创设，强调情境在学习中的重要作用、注意信息资源设计，强调利用各种信息资源来支持学（而非支持教）、强调以学生为中心、注重自主学习设计、强调协作学习，要注重协作学习环境设计、注重基于网络教学策略设计。网络课程的网上学习就是针对这个环节还设计的，网上学习中有三部分，两部分是教学内容：文本教程和动画教程；第三部分是课后测试，这里也是针对网上学习后的一个总结，可以巩固和检测学习内容，通过网上学习的设计，静态学习，动态学习再加上课后测试，相信学生的学习效果可以得到很大的提高，同时也是我们设计网上学习时希望达到的一个结果。
(3)界面设计
界面设计即对屏幕上将要显示的信息的布局进行设计，包括主页面、子栏目分页面不同级别设计、页面的过渡方式等。界面布局要合理、风格一致、色彩搭配协调。文本设计、图片选择要美观大方，能激发学习者的学习激情。界面设计中，充分利用网页制作工具及其辅助工具，例如，取色工具可以协调整个网站的配色；动画和图片处理这里也能得到充分利用等等。
(4)课程完整性
一个完整的网络课程，不仅在完成网页和基本功能外，还要把他们结合起来，充分利用站点，成为一个形式上完整的网络课程。最后完成网络课程系统整合后，还要添加相应的说明文档等，这样才具备了发布网络课程的资格。
(5)网络发布性
由于网络课程直接运行在Internet上，所以必须考虑其在低带宽下运行的流畅性。网络课程的设计时就考虑到发布性的特点，所以我们采用大图换小图，进行图片的优化，全部图片都是jpg和gif格式。
2.2 网站的制作
2.2.1 网站的基本结构
(1)程序目录结构：
|-------|---------------------------------------------------
|--admin| 后台管理的目录
|-------|---------------------------------------------------
|-------|--css 后台CSS文件目录
|-------|---------------------------------------------------
|-------|--help 后台帮助系统目录
|-------|---------------------------------------------------
|-------|--images 后台的图片图片目录
|-------|---------------------------------------------------
|-------|--js 使用JS的文件目录
|-------|---------------------------------------------------
|-------|--AddNews.jsp 添加新闻
|-------|--Admin_Class.jsp 类别管理
|-------|--Admin_Config.jsp 系统参数设置
|-------|--Admin_Info.jsp 系统基本信息设置
|-------|--Admin_Left.jsp 框左部导航页面
|-------|--Admin_Main.jsp 主框架页面
|-------|--Admin_Special.jsp 专题管理
|-------|--Admin_User.jsp 用户管理
|-------|--DelNews.jsp 删除新闻
|-------|--Img.htm 上传图片页面
|-------|--index.jsp 后台登录页面
|-------|--Index_Face.html 框架右边页面
|-------|--ListNews.jsp 后台管理新闻列表页面
|-------|--Logout.jsp 退出系统页面
|-------|--Modifynews.jsp 修改新闻
|-------|--Person.jsp 管理员个人信息页面
|-------|--Session.jsp 是否登录判断遄
|-------|--VerifyCode.jsp 验证码页面
|-------|---------------------------------------------------
|--buttonimage eWebEditor编辑器工具图片目录
|-------|---------------------------------------------------
|--css CSS文件目录
|-------|---------------------------------------------------
|-------|--CoolBlue eWebEditor编辑器使用的CSS文件
|-------|---------------------------------------------------
|-------|--newscss 本系统前台使用的CSS文件
|-------|---------------------------------------------------
|--dialog eWebEditor编辑器弹出窗口页面目录
|-------|--images 图片目录
|-------|---------------------------------------------------
|--include eWebEditor编辑器包含文件目录
|-------|---------------------------------------------------
|--pic 本系统图片目录
|-------|---------------------------------------------------
|--sql 本系统使用的数据库的角本文件
|-------|---------------------------------------------------
|--sysimge eWebEditor编辑器系统图片目录
|-------|---------------------------------------------------
|--UploadFile 上传图片保存的目录
|-------|---------------------------------------------------
|--WEB-INF
|-------|---------------------------------------------------
|-------|--lib jar包存放的目录
|-------|---------------------------------------------------
|-------|-------|--|--dom4j.jar eWebEditor编辑器自带的类
|-------|-------|--|--DreamNews.jar 本系统所使用的类文件
|-------|-------|--|--MYSQL-Driver.jar 本系统附带的MYSQL驱动程序
|-------|-------|--|--Oracle-Driver.jar 本系统附带的Oracle驱动程序
|-------|-------|--|--MSSQL-Driver.jar 本系统附带的SQL Server驱动程序
|-------|---------------------------------------------------
|-------|--classes 类文件目录
|-------|---------------------------------------------------
|-------|-------|--src JavaBean源程序目录
|-------|-------|-------------------------------------------
|-------|-------|--|--AdminClass.java 类别管理类源文件
|-------|-------|--|--Config.java 系统设置类源文件
|-------|-------|--|--DBConnection.java 数据库连接类源文件
|-------|-------|--|--Function.java 常用方法定义类源文件
|-------|-------|--|--ListClass.java 前台类别显示类源文件
|-------|-------|--|--Log.java 日志类源文件
|-------|-------|--|--Login.java 用户登录类源文件
|-------|-------|--|--MD5.java MD5加密算法源文件
|-------|-------|--|--News.java 新闻管理类源文件
|-------|-------|--|--ShowNews.java 新闻显示类源文件
|-------|-------|--|--User.java 用户管理类源文件
|-------|-------|--|--VerifyCode.java 验证码类源文件
|-------|---------------------------------------------------
|-------|-------|--DBConfig.property 数据库配置文件
|-------|---------------------------------------------------
|-------|--Button.xml eWebEditor编辑器样式定义文件
|-------|--DreamNews.mdb Access数据库
|-------|--Style.xml eWebEditor编辑器样式定义文件
|-------|--web.xml 应用程序配置页面
|-------|---------------------------------------------------
|--Config.jsp 本系统配置页面
|--eWebEditor.jsp eWebEditor编辑器主页面
|--index.jsp 本系统首页
|--ReadClass.jsp 本系统大类显示页面
|--ReadSClass.jsp 本系统小类显示页面
|--Search.jsp 本系统新闻搜索页面
|--Special.jsp 本系统专题显示页面
|--Top.jsp 本系统头部公共页面
|--upload.jsp eWebEditor编辑器文件上传页面
|--说明.txt 本说明文件
（2）首页
图3 首页
首页是最重要的部分，因为它是别人接触这个网站的第一眼。首页应该对这个网站的性质与所提供的内容做个扼要说明与导引，让别人判断要不要继续点击。首页就有很清楚的类别栏目选项，而且尽量人性化，让浏览者可以很快找到需要的东西。在设计上，坚持干净而清爽的原则。 首页中，我们采用清晰的导航和简洁的页面设计，没有复杂过多的内容。登陆系统，和调查系统，保持一个完整的网站程序，友情连接具有一定的参考价值。打开首页能够清晰的了解到进入的是一个网络课程。
（3） 课程简介
主要对本课程的一些说明，方便学生从整体上去把握学习的内容，这是十分重要的。网络课程针对文本教程的内容，让学生了解到网上学习的主要内容，从而有选者性的去学习。
（4）网上学习
这是网络课程的主要内容，也是我们网路课程设计的主要部分。网上学习共分为3部分，一部分是网上课堂；一部分是动画教程；最后一部分为课后习题。并在网上学习首页上提示重难点和学习建议，有助于学生对网络课程的文本学习有个充分的认识。
（5）信息公布
信息公布是对当前的网络课程改版、更新以及其他消息以公告的形式让学生知道，方便学生及时的关注网络课程的最新变化从而让学生全面掌握课程动态，有利于进一步学习。这个栏目也是更新的主要内容之一，网络课程的学习离不开信息的公布，同时也是网站的维护的重点，要注意到更新及时性。
（6）学习资源
网络课程应当提供一定数量的学习资源，学习包括图像、声音、视频等媒体素材，也包括与学习有关的网站地址，并要为学生提供一定数量的参考文献，供学生在自主学生中使用，也为学生进行研究和探索提供条件。在网络课程中，我们将会提供教师的课件、学生的作品还有网上收集的其他学习素材，做好收集方便学生学习。学习资源的设计中，我们采用了一套教师管理系统。主要是通过教师的收集，然后上传到服务器，提供给学生下载。同时这里也提供学生作业的下载文本，详细的说明作业的基本要求。这个网页的设计比较简单，主要是针对教师的管理课件和发布课件。
（7）习题集
学生在进行一段网络学习之后，应当通过做练习题以加深对所学知识的理解。这里我们不仅提供与网络课程相关的习题外，还收集了大量网络方面的习题，整理成一个习题库，让学生在学习网络课程内容的同时还能增长网络方面的知识。这里我们采用了教师管理习题库，教师可以增加、删除、修改习题库的内容，有更多、更新的习题。同时系统还提供参考答案，和任意选择答题，使得答题的方式更加灵活，跳过已经回答过的问题。习题集栏目中还有一个作业上传专区，这样让学生能够通过学习和完成习题，以及上传作业的形式达到一个与教师相互交流的目的。
（8）交流讨论
在网络课程中，网上讨论一般以论坛形式出现。网上讨论是传统教学中课堂讨论的另一种实现方式，是协作学习网络课程必备的一项功能。有教师答疑专区，学生自由讨论的专区。
（9）帮助系统
网络课程应当有完整的帮助系统，告诉学生如何利用网络课程进行学习，告诉学生如何利用网络资源，帮助学生解决在学习中遇到的问题，以及有特殊问题能够联系站长等信息
2.2.2 网站的框架图
网络课程中我们采用了结合树形结构和网状结构来完成网站的制作。树形结构，主页可以直接链接到下一层的各个页面，这些页面可能还有再下一层页面链接，在网上学习栏目中，我们采用的是网状结构，这样对学习者来说，很方便的找到自己想学习的内容，也便于栏目的跳转。具体的框架图如图3所示。
图4网络课程框架图
2.2.3 网站的制作流程
《计算机网络》的课程网站利用网页三剑客把文字、图形、图像、动画结合起来的交互式网络课程。网络课程用超文本标记语言HTML来实现。超文本标记语言HTML可以跨平台使用，常用的浏览器都能对它进行很好的解释，它支持众多的图像、声音文件，可用Macromidea Dreamweaver MX工具软件进行开发，并且可以使用ASP、CSS等，制作动感和交互性都比较强的页面。在教学中生动形象地把教学内容展示出来，能激发学生的感观，使学习者容易理解、且记忆深刻。能培养教师和学生应用计算机的水平和能力。网络课程制作的环节及过程是：搜索参考网站→整理网络课程内容→教学设计→设计制作框架→素材的制作整理→其他功能的实现→整个网站的整合→测试运行→发布和推广→网站维护与管理。
（1）搜索参考网站
在制作网站前，必须明确网站的性质和目的，从而寻找相关的网站信息作为参考。设计制作网络课程时，搜集其他网络课程作为参考是必需的。从网络课程的教学内容安排和网站设计框架及其美工方面评价，从而完善自己的网络课程，为框架设计做好充分的准备。技术方面主要参考了宇风多媒体 （http://www.yufeng21.com (http://www.yufeng21.com)）和5D多媒体（http://www.5d.cn (http://www.5d.cn)）网站
（2）整理网络课程内容
网络课程的主要内容基本上就是我们选取的一本教材《中文版Frontpage 2002 Dreamweaver MX Flash MX Fireworks MX网页制作》，这里我们需要整理的不仅是书本上的内容，而且与网络课程相关的内容我们也要收集，这样我们的网络课程才能比较生动和形象，并且学习起来更加方便。再配上习题，网络课程基本的功能就能够实现。
（3）教学设计
进行教学设计是网络课程制作中的重要环节，网上学习效果的好坏、是否符合教学需求，关键在于教学设计。这方面的设计主要根据教材的内容来设计的。加上我们收集的动画教程，共同完成了网络课程的网上学习部分。
（4）设计制作框架
进行框架设计实际就是对网络课程的总体设计，主要就是页面设计和功能设计，其设计的要点包括：页面设计、层次结构设计、知识点的表示形式设计、练习方式设计、交流方式设计、页面链接设计、导航设计等内容设计。网站设计与网页制作”网络课程要充分体现网页制作的特点，我们在页面设计时，完全采用静态页面制作，因此我们采用了模板技术。在进行框架设计时，要注意以下几点：
①要最大限度地满足学习者在获取学习资源上的要求。我们制作网络课程的目的不是为了迎合设计者的口味，而是为了满足学习者对学科知识的需求，我们要为学习者提供丰富的学习资源，这才是我们制作网络课程的首要目标。
②要保证网络课程结构清晰、界面连贯、运行高效。页面设计应该美观大方，不但让学习者能够方便快速地得到需要的信息，还能得到一种美的享受。
（5）素材的制作整理
在选择使用图像、声音、动画、等各种素材时，目的是要表达学习内容、突出学习主题，不能不顾主题思想的表达，只顾追求时髦、好看。
（6）其他功能的实现
网络课程的基本内容和框架都完成以后，下面就是进行网络课程的功能设置，我们的网络课程的几个基本功能有：师生之间，学生之间互相讨论采用了论坛的形式；提供资源下载，教师可以把自己的课件和收集整理的比较好的资料上传到服务器，然后提供给学生下载；学生在线练习，这里收集了一定量的习题并且提供正确答案给学生练习使用；学生作业上传系统，当老师布置作业后，学生应该按时上传作业，这样免除了很多传统交作业的麻烦。整个功能的实现都是围绕网络课程的特点，体现了强烈的交互性，也是以后网络课程的发展的基本方向。
（7）整个网站的整合
前面的工作做好后，开始进行链接，动态和静态联系起来，组成一个功能比较齐全的网络课程。这里面的问题可能有很多，需要下面的测试来更正和完善。用Dreamweaver 的站点管理来整合网络课程就比较方便，其中一个重要的过程是整站链接检查，全面去检查网站的各个链接，保证链接正确是网络课程的重点；通过站点的站点地图很方便的对网络课程的层次关系有个清晰的了解，各个页面的相互关系跳转和链接；站点的资源对网络课程所有的资源（图片，flash、颜色等）整体宏观管理。
（8）测试运行
网站发布前要进行细致周密的测试，以保证证场浏览和使用，测试过程如果发现错误，则应立即修改。瓦干测试的主要内容有服务器稳定性、安全性、程序及数据库测试，网页兼容性测试及其相关其它。
（9）发布和推广
网站制作完成以后，需要上传到服务器上，并且在网上进行宣传。
（10）网站维护与管理
网站开始正常运行，需要管理员对网站进行正常和维护管理。这里不仅有网络课程内容的不断更新，还涉及到网络课程的安全性，需要管理员应该具备一定的网络安全知识。
2.2.4 数据库的建立
本系统通过EMS MySQL Manager 3 Lite建立了数据库，其中要创建7个表，分别是：admin、bigclass、config、log、news、smallclass、special。由于篇幅有限仅列出表adminde的脚本：
表的结构 `admin`
CREATE TABLE `admin` (
`AdminID` int(11) NOT NULL auto_increment.
`AdminName` varchar(32) default NULL.
`AdminPwd` varchar(64) default NULL.
`AdminType` smallint(6) default 0.
`AddTime` varchar(20) default NULL.
`LastLoginTime` varchar(50) default 暂无登录.
`LastLoginIP` varchar(50) default 暂无登录.
`NewsNum` int(11) default 0.
`LoginNum` int(11) default 0.
`UserName` varchar(20) default NULL.
`UserSex` char(2) default NULL.
`UserBirthday` varchar(10) default NULL.
`UserEmail` varchar(50) default NULL.
`UserQQ` varchar(10) default NULL.
`UserTel` varchar(50) default NULL.
`UserAddress` varchar(80) default NULL.
`UserZip` varchar(6) default NULL.
`UserInfo` longtext.
PRIMARY KEY (`AdminID`).
KEY `AdminUID` (`AdminName`).
KEY `LoginNum` (`LoginNum`).
KEY `NewsNum` (`NewsNum`)
) TYPE=MyISAM AUTO_INCREMENT=5 ;
导出表中的数据 `admin`
INSERT INTO `admin` (`AdminID`. `AdminName`. `AdminPwd`. `AdminType`. `AddTime`. `LastLoginTime`. `LastLoginIP`. `NewsNum`. `LoginNum`. `UserName`. `UserSex`. `UserBirthday`. `UserEmail`. `UserQQ`. `UserTel`. `UserAddress`. `UserZip`. `UserInfo`) VALUES (3. admin. CB939D9EA1198112BF8EDCD343ED2A1D. 2. 2006-3-20 15:36:02. 2006-3-21 10:38:10. 172.16.165.50. 0. 1. admin. 男. 1983-2-29. [email protected]. . . . . );
3 网络课程的功能及其技术实现
3.1网络课程的功能实现
3.1.1 网上学习功能
网络课程中提供了网上学习功能，只要是能正常上网就能访问网络课程页面进，通过浏览器，正常观看网上学习，网络课程通过文本、动画形式把网络课程的知识展现给学生。给学生轻松的学习环境，高效的学习网站设计和网页制作的内容。
3.1.2 网上测试功能
网上课程中网上学习提供了课后练习：我们是用模拟练习”这个栏目来实现这个功能的，在这一栏目中给出要求完成的练习，覆盖基本知识点，学生可以网上完成作业，可打开答案自己核对。
网络课程中习题集中提供了在线练习，收集了许多网络知识，通过练习提高网络知识，在习题中配有正确答案，方便及时检查和纠正错误。同时对某些作过以前习题的学生，可以通过跳转的方式选择性的练习，这样就节约了练习时间。
图5 练习界面
网上练习不仅让学生能够轻松愉快的练习，而且教师在这里也扮演了十分重要的角色。习题集中，教师通过验证后，可以通过对习题的添加，删除和修改功能，很方便对习题的管理。
图6 习题的添加管理
图7 习题的修改
3.1.3 作业提交功能
在我们以前的课程中，总是要经过一定的程序把自己的作品或者作业交给老师。我们开发的网络课程中作业上传功能方便了学生在完成作业后的上交程序，我们只需要把做好的作业或作品，压缩后就能很快上传，实现了在老师规定的期限内异地随时交作业。根据不能的时候网速可能不一样，增加了测速功能，这样可以在网速快的时候上传。
图8作业提交
3.1.4 师生交流功能
设置网上论坛环境，实现教学的跨时空交流。增强了师生之间网上交流，并且设置常见问题专区方便了学生快速查找常见问题。
3.1.5 资源下载功能
网络课程学习资料栏目中提供学生下载功能。这里都是老师推荐的学习资源、教学课件。这个系统方便老师对资源的管理。对每个网络课程的老师都有自己单独的管理资源。从老师的注册、确认、登陆，教师可以把自己的整理的资料发送上传到网络课程中供学生下载使用，这个系统不仅方便了老师的管理还让学生拥有更多的学习资源，老师可以再这里布置作业文档，很方便让学生按照老师的要求去完成作业。
图9 教师管理界面
图10 教师发布课件界面
3.2 网站的技术实现
3.2.1 Css技术
Css是一种叫做样式表（stylesheet）的技术。又称层叠样式表（Cascading Stylesheet）。 在制作网络课程的网页时采用了CSS技术，有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 下面代码是对网络课程整个网站的静态页面文本实现具有相同的样式，使网络课程更加美观且方便网站文本的输入管理：
BODY {FONT-SIZE: 12px}
TD {FONT-SIZE: 12px}
INPUT {FONT-SIZE: 12px}
SELECT {FONT-SIZE: 12px}
.L12 {LINE-HEIGHT: 120%}
.L14 {LINE-HEIGHT: 140%}
.L15 {LINE-HEIGHT: 150%}
.s2 {FONT-SIZE: 6pt}
.li {FONT-SIZE: 8px}
.title {FONT-SIZE: 14px}
.big-title {FONT-SIZE: 24px; FONT-WEIGHT: bold}
A:active {COLOR: #000000; FONT-SIZE: 9pt; TEXT-DECORATION: underline}
A:visited {COLOR: #000000; TEXT-DECORATION: none}
A:link {COLOR: #000000; FONT-SIZE: 9pt; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; FONT-SIZE: 9pt; TEXT-DECORATION: underline}
.a1 {FONT-SIZE: 14px}
.a1:active {COLOR: #8c6d10; FONT-SIZE: 14px; TEXT-DECORATION: underline}
.a1:visited {COLOR: #8c6d10; FONT-SIZE: 14px; TEXT-DECORATION: none}
.a1:link {COLOR: #8c6d10; FONT-SIZE: 14px; TEXT-DECORATION: none}
.a1:hover {COLOR: #ff0000; FONT-SIZE: 14px; TEXT-DECORATION: underline}
.a3 {COLOR: #525531; FONT-SIZE: 14px}
.a3:active {COLOR: #525531; FONT-SIZE: 14px; TEXT-DECORATION: underline}
.a3:visited {COLOR: #525531; FONT-SIZE: 14px; TEXT-DECORATION: none}
.a3:link {COLOR: #525531; FONT-SIZE: 14px; TEXT-DECORATION: none}
.a3:hover {COLOR: #ff0000; FONT-SIZE: 14px; TEXT-DECORATION: underline}
.a4 {COLOR: #4286a5; FONT-SIZE: 14px}
.a4:active {COLOR: #4286a5; FONT-SIZE: 14px; TEXT-DECORATION: underline}
.a4:visited {COLOR: #4286a5; FONT-SIZE: 14px; TEXT-DECORATION: none}
.a4:link {COLOR: #4286a5; FONT-SIZE: 14px; TEXT-DECORATION: none}
.a4:hover {COLOR: #ff0000; FONT-SIZE: 14px; TEXT-DECORATION: underline}
.u {COLOR: #000000; FONT-FAMILY: 宋体; FONT-SIZE: 9pt}
.u:active {COLOR: #000000; FONT-SIZE: 9pt; TEXT-DECORATION: underline}
.u:visited {COLOR: #000000; TEXT-DECORATION: underline}
.u:link {COLOR: #000000; FONT-SIZE: 9pt; TEXT-DECORATION: underline}
.u:hover {COLOR: #ff0000; FONT-SIZE: 9pt; TEXT-DECORATION: underline}
.a2 {COLOR: #ffffff; FONT-SIZE: 12px; TEXT-DECORATION: none}
.a2:active {COLOR: #ffffff; FONT-SIZE: 9pt; TEXT-DECORATION: underline}
.a2:visited {COLOR: #ffffff; TEXT-DECORATION: none}
.a2:link {COLOR: #ffffff; FONT-SIZE: 9pt; TEXT-DECORATION: none}
.a2:hover {COLOR: #ff0000; FONT-SIZE: 9pt; TEXT-DECORATION: underline}
另外某些Css代码中只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。它的作用可以达到：
（1）在几乎所有的浏览器上都可以使用。
（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
（4）你可以轻松地控制页面的布局 。
（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
3.2.2网页特效使用
（1）随机产生一种过渡方式
在源代码的〈head〉与〈/head〉之间加入如下语句〈meta http-equiv=Page-Enter content=RevealTrans (Duration=3. Transition=number)〉。Duration”的值为网页动态过渡的时间， 单位为秒，一般设为3~5秒即可。Transition”不同的值对应不同的过渡方式。随机产生一种过渡方式〈meta http-equiv=Page-Enter content=RevealTrans (Duration=3. Transition=23)〉
（2）网页中随机调用背景图片
（3）倒计时功能的实现
（4）日常的滚动效果
此处是滚动文字
（5）页面转换
（6）图片渐渐显隐
4 结论
从网络课程的选题、设计、制作到最后的初步完成已经有半年多时间了，经过这段时间的努力及其老师的指导，已实现具备一个完整网络课程的些许功能，当然，我们完成的网络课程还只是初步设计阶段，功能也有很多欠缺，这有待于以后的进一步改进和完善。制作网络课程的过程中，主要负责网站的框架设计、其他主要页面模板的制作和网络课程功能的实现。参考其他网络课程的同时，自己不断的修改，经过近两周的努力才初步完成框架的设计。功能与技术实现的设计是整个网络课程设计的重点，也是实现师生网上交流的桥梁。因此网络课程设计的大部分时间用来设计功能和技术实现。自己对美工方面不是很熟悉，因此页面不是十分美观，这方面在以后会逐步改善。通过设计、制作、完成的网络课程的初步设计的过程中，让我懂得了时间的宝贵、学会了团队写作的精神，让我更加的珍惜来自身边真挚的友情。这次毕业设计不仅是我大学的终点，也是我进入社会开始人生新的设计的起点。
5 致 谢
在本文的选题、写作以及建设的过程中，周先存老师给予了我很多建议和帮助，在这里需要特别提出感谢！
在大学的四年里，我的思想认识和专业知识在计算机与信息科学系各位老师的帮助下，取得了一定的收获，为我今后的人生发展奠定了一定的基础。也要感谢他们特别是周先存老师为培养我而做出的努力。
6 参考文献
[1] 黄文均.网络课程评价刍议.当代教育科学. 2004年,第20期
[2]祝智庭主编 .现代教育技术：走向信息化教育.北京：教育科学出版社，2002.3
[3] 许丰明.JSP动态网页设计实务.北京：科学出版社，2002
[4] 廖常武 .网站建设与维护.西安：西安电子科技大学出版社，2004.7
[5] 李禹生.JSP实用技术：网络数据库应用系统设计.北京：中国水利水电出版社，2004
[6] 於志渊主编.动态Web网页设计大全 .北京：清华大学出版社 1999.10
[7] 导向科技.《Dreamweaver MX Flash MX Fireworks MX网页制作》培训教程，人民邮电出版社 ，出版日期 ：2003.7
[8] 谢希仁.《计算级网络》第四版.大连理工大学出版社.出版日期 ：2004.7）
[9] 阎金铎、田世昆.《JSP课程设计》高等教育出版社 ，第二版，2003.12
[10] 周恕义等.多媒体CAI及网络化远程教学技术.-北京：中国水利水电出版社，2001.11.
[11] 布雷恩.赖特 著, 赵明昌 译 《JSP数据库编程指南》 北京希望电子出版社
[13] David M.Geary 著 , 贺名 译 《JSP高级开发与应用》 科学出版社
[14] 余红.网络课程的特点、构成及开发.中国远程教育.2001.(4).
[15]Hans Bergsten著.汪青青 朱剑平 等译.《JSP设计》.北京：清华大学出版社，2004
[16] 网冠科技著.JSP时尚编程百例.北京：机械工业出版社，2001
[17] 马斗、邱哲，王俊标编著.专家门诊——JSP开发答疑200问.-北京：人民邮电出版社，2005
[18] 魏茂军等著.JSP案例开发.-北京：中国水利水电出版社，2005
[19] 《JSP站点设计编程指南》 .电子工业出版社
[20] http://java.sun.comproductsjspfaq.html
[21]http://www.esperanto.org.nzjspjspfaq.html
[22]http://www.zdnet.compcweekstoriesnews0.4153.410709.00.html
[23]http://developer.netscape.comviewsourcekuslich_jsp (\\developer.netscape.comviewsourcekuslich_jsp) kuslich_jsp.html
[24]http://web2.java.sun.comproductsjspjsp-asp.html
PAGE
获取项目源文件，联系Q:1225467431,可指导其它毕设,课设
