1、本科毕业论文（20 届）基于 WEB 的网络自学平台的设计与实现所在学院 专业班级 计算机科学与技术 学生姓名 学号 指导教师 职称 完成日期 年 月 - 1 -基于 WEB 的网络自学平台的设计与实现摘要：随着信息技术的发展不仅使工业生产力突飞猛进的发展外，而且也深刻地改变着人们的日常生活，大致国民教育，小至生活方式，无一不受信息技术的影响。正所谓“百年大计，教育为本”，信息化发展的成功也充分影响着当今教育的发展。相对于传统教学的面面相授，基于信息化的现代教学优势是不言而喻的。首先，基于互联网以浏览器为客户端的现代远程教育系统突破了时间和空间的限制，可以在很大程度上削弱“知识沟”所形成的地区
2、间教学水平的差异，其次，基于 Web 教学系统可以打破传统教学中的条条框框，可以让学生随时随地接受现代教育，不在拘泥于校园课堂中。最后，远程教学系统可以提高教学的效率，每个学生可以因人而异，选择自己学习的内容，在学习上充分体现了自主性。本系统是基于 Web 的网络教学系统建立在 JSP 模式下，以互联网为传输媒介，以浏览器为客户终端的远程网络教学系统。在改系统的设计前期，做了充分的调查，分析了本系统所具有的适用范围和潜在市场。在系统的设计阶段，充分借鉴了各大网络教学网站，结合利弊，设计了系统平台，即基于 JSP 的系统主页，并实现了预期的功能和目标。关键词：网页、自学平台、JSP、数据库、服务
3、器- 2 -The design and implementation of the network self-learning platform based on WEBSummary：With the development of information technology not only makes the industrial productivity by leaps and bounds, but also profoundly changed peoples daily life, roughly from the national education, way of lif
4、e, the impact is not affected by the information technology. It is the so-called “project, education oriented“, the development of information technology success also fully affects the development of todays “face to face education. Relative to the traditional teaching, modern teaching based on infor
5、mation advantage is self-evident. Firstly, based on the Internet browser for modern distance education system breaks through the limitation of time and space, can largely weaken the“ knowledge gap “formed by the inter regional differences in the level of teaching, secondly. Web can break the traditi
6、onal teaching system in teaching can make students based on restrictions and fetters, whenever and wherever possible to receive modern education and not get bogged down in the campus classroom. Finally, far away History teaching system can improve the teaching efficiency, each student can vary from
7、person to person, choose their own learning content, learning fully embodies the autonomy. This system is based on Web network teaching system established in the JSP model, to the Internet as the transmission media, the browser for the client terminal of the remote network teaching system. Change in
8、 the system design stage, a full investigation, analysis of the scope and potential market for this system has. In the design phase of the system, to make full use of the website of each large network teaching, combined with the advantages and disadvantages, design the system platform, namely based
9、on the JSP Homepage, and to achieve the expected function and target.Key word：Webpage、Self study platform、database、server、jsp- 3 -目录1、网站前端的设计 .51.1、认识 web.51.2 、HTML .51.3 、css 样式布局 .61.3.1、引用 css 样式表 .61.3.2、 CSS 样式表 .61.4、 js 脚本代码 .71.4.1、 js 脚本的介绍 .71.4.2、如何使用 js 脚本语言 .82 、服务器 .102.1、 服务器的介绍 .102
10、.2、服务器的特性： .102.2.1、可用性 .102.2.2、可扩展性 .112.2.3、易用性 .112.2.4、可管理性 .112.3 、认识 apache+jsp+tomcat： .122.3.1、服务器安装 jdk.122.3.2、安装 apache.123、数据库 .163.1、数据库的介绍 .163.1.1、数据库的定义 .163.1.2、数据库的基本结构 .163.1.3、数据库的特点 .163.2、数据库的应用 .174、网络自学平台的设计 .214.1、前台设计 .214.2、服务器配置 .284.3 数据库的调式 .33- 4 -5 、设计中所遇困难和解决方案 .376
11、、 结论 .39致谢： .40参考文献 .41- 5 -1、网站前端的设计1.1、认识 webWeb 前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0 时代产物，那时网站的主要内容是静态的，用户使用网站的行为也以浏览为主。2005 年以后，互联网进入 Web2.0 时代，各种类似桌面软件的 Web 应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。随着人们对用户体验的要求越来越高，前端开发的技术难
12、度越来越大，前端设计师这一职业开发技术包括三个要素：HTML、CSS 和 JavaScript，但随着 RIA 的流行和普及，Flash/Flex、Silverlight、XML 和服务器端语言也是前端开发设计师应该掌握的。前端设计师既要与上游的交互设计师，视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对前端设计师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才是够用呢？对于很多初级前端设计师来说这个问题是非常令人迷惑的。前端开发的门槛其实非常低，
13、与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事 IT 工作的人来说，前端开发是个不错的初入点。在 Web 前端中 css 的应用也是非常重要的。以前人们通常用的都是 table 布局，table布局虽然很简单，好用。但是随着社会的发展和科技的进步，越来越不能满足人们的需求。现在手机和平板电脑的兴起，人们大多数都是用手机和平板电脑浏览网页或网上购物。那么问题来了！当用户在不同的手机和平板上浏览网页时，会不会出现“错位”的现象？比如说，一个网页中的图片大小是 1024*765 分辨率的，那么你的手机或平板的分辨率是 500*800 的，会不会图片显示不全，这种情
14、况是有的，所以现在都是用 css 布局，这样和解决了用户用不同的终端浏览网页而出现的“错位”现象。1.2 、HTMLHTNL 是超文本标记语言，标准通用标记语言下的一个应用,是网页编写的基本语言。要实现 Web 网页的正文提取，必须对 HTML 的语法结构有个清楚的认识。- 6 -对于搜狐、新浪、网易等包含大量信息的大型门户网站而言，其各类网页中包含信息标题、文摘、超链接等可供用户检索用的有用信息，且这类网站结构稳定、类似具有普遍代表性，所以只要对这些网站信息做到高效滤除，则等于可以对这类网站的信息做到批量处理的目的。经对比得到该类网站普遍拥有相似的结构如下：网页标题及其它与网页标题无关的信息
15、正文标题，正文内容及其它与网页正文标题，正文内容无关的信息1.3 、css 样式布局在界面设计中，层叠样式表（CSS）扮演着十分重要的角色。它是一种通过定义页面元素的位置、布局、颜色及字体来控制应用外观的代码。怎样引用 CSS 呢？首先我们要现在网页的页面定义好。在网页的页面当中可以做很多事情，例如，定义 web 的所用的语言，定义文字显示格式，用那种文字显示出来。1.3.1、引用 css 样式表引用有两种定义方式。一种是,另一种。后者是应用在新建一个 css 样式表中，不和网页一个页面，这样用的看着舒服，也比较清晰，时候来维护人员一眼就能找到所要修改的内容，前者是建立在网页页面中的，一个网页
16、代码本来就比较多，要是在加上一些 css 样式，看着比较麻烦，不容易找出你找的内容。那么首先 我们在 head 中定义一个 css 样式。代码如下：定义的 css 样式定义 css 样式1.3.2、 CSS 样式表CSS 代码中的每条规则由两个部分组成：选择器和声明，它用来作用于整个页面距离上边距为 0px。在 CSS 中提供三种选择器机制来选取中对应的元素：- 7 -（1）元素选择器：直接使用元素，如 P:first-chilsfont-size:24px;及 spantile=”home”font-style-size:24px;分别使用元素与元素。并且前者元素后接这是一种带伪类的选择器，
17、后者元素后接是一种带有属性的选择器。（2）ID 选择器：以#开头，用来匹配中带有对应值的元素。例如：#top /*上标题设置*/width:1349px;height:90px;margin:opx auto;/*上边距为 0px 右边距自动*/background-image:url(./images/top.jpg); /*填充背景图片*/（3）类选择器：以.开头，用来匹配中带有对应值的元素。例如：.carte_1 a /*超链接设置*/text-decoration:none;/*去除超链接样式 下面的下划线去掉了*/color: #FFFFFF; /*颜色为#FFFFFF*/displ
18、ay:block; /*块状化，使超链接有个形状*/1.4、 js 脚本代码1.4.1、 js 脚本的介绍脚本是批处理文件的延伸，是一种纯文本保存的程序，一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合，在其中可以实现一定的逻辑分支等。JS 即 Javascript，Javascript 是一种由 Netscape 的 LiveScript 发展而来的脚本语言，主要目的是为了解决服务器终端语言，比如 Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只- 8 -有 28.8kbps，验证步骤浪费的时间太多。于是 Netscape 的浏览器Nav
19、igator 加入了 Javascript，提供了数据验证的基本功能。是一个网看着美观，使用户用着赏心悦目，绝大多数的网站都是使用了 js 脚本来调试的，Java Script 的突出特点有以下几种：（1）是一种解释性的脚本语言，编写功能代码段很方便，这些 Java Script 程序不需要提前编译，它是在浏览器加载运行的过程中，一行一行解释执行的。（2）是面向对象的。开发人员可以用它创建自己的需要对象也可以使用其本身具有一些内置对象比如日期、正则表达式等。（3）具有事件驱动特性。就是因为 Java Script 是事件驱动的，它正好满足了前端开发交互页面的需要。当把一个页面对象与相应的某个事
20、件（比如单击 click）监听绑定在一起后，对这个页面元素所进行的相应操作（比如单击操作）被监听到之后，就会调用已绑定的事件处理程序，完成特定的功能。（4）具有安全性。代码只能运行在用户客户端浏览器中以确保安全。（5）具有平台无关性。因为它是由浏览器解释执行的，所以在不同的操作平台下它都能运行，只和运行它的浏览器相关。网站前端开发主要的宗旨就是尽可能提高用户体验，当下，浏览器用户要求越来越高，用户也是互联网的重要参与者，要求在互联网中也有所参与与创造，所以交互将是互联网的重要主题之一。Java Script 凭借自身的这些特点成为 Web 前端开发的最热门的设计语言。1.4.2、如何使用 js
21、 脚本语言在使用 JavaScript 语言之前要先完成一个 jQuery 代码，保存成一个js 文件，然后在网页中调用，jQuery 也是网页前台设计师必备的技能。- 9 -每个网页前台设计师都会 jQuery 不会就不是网站前台设计。所以说网站前台比后台管理者会的技能更多。在使用 js 脚本语言的时候，我们只需要把脚本独立完成，保存成一个 js 文件，然后在网页中引用，例如：上面的这句代码就是你要引用的代码。Type 是类型的意思，就是你使用的语言是那种类型的，例如“style type=text/css” 这是使用 css 语言，而上面“type=text/JavaScript”的是使用 JavaScript 语言。然后我们要在网页中是用 JavaScript 语言了，JavaScript 语言中间或者写在中间，这两个地方没有啥多的区别。如下图：
