1、新乡职业技术学院毕业设计(论文) 第 1 页基于 WEB的网络自学平台的设计与实现摘要：随着信息技术的发展不仅使工业生产力突飞猛进的发展外，而且也深刻地改变着人们的日常生活，大致国民教育，小至生活方式，无一不受信息技术的影响。正所谓“百年大计，教育为本”，信息化发展的成功也充分影响着当今教育的发展。相对于传统教学的面面相授，基于信息化的现代教学优势是不言而喻的。首先，基于互联网以浏览器为客户端的现代远程教育系统突破了时间和空间的限制，可以在很大程度上削弱“知识沟”所形成的地区间教学水平的差异，其次，基于 Web 教学系统可以打破传统教学中的条条框框，可以让学生随时随地接受现代教育，不在拘泥于校
2、园课堂中。最后，远程教学系统可以提高教学的效率，每个学生可以因人而异，选择自己学习的内容，在学习上充分体现了自主性。本系统是基于 Web 的网络教学系统建立在 JSP 模式下，以互联网为传输媒介，以浏览器为客户终端的远程网络教学系统。在改系统的设计前期，做了充分的调查，分析了本系统所具有的适用范围和潜在市场。在系统的设计阶段，充分借鉴了各大网络教学网站，结合利弊，设计了系统平台，即基于 JSP 的系统主页，并实现了预期的功能和目标。关键词：网页、自学平台、JSP、数据库、服务器新乡职业技术学院毕业设计(论文) 第 2 页The design and implementation of the
3、network self-learning platform based on WEBXuchangkaiQigeSummary：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 life, the impact is not affected
4、 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 information advantage is self-evid
5、ent. 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 traditional teaching system in teach
6、ing 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 person to person, choose thei
7、r 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 the system design stage, a f
8、ull 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 on the JSP Homepage, and to a
9、chieve 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.2、服务器的特性： .10
10、2.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 、设计中所遇困难和解决方案 .3
11、76、 结论 .39致谢： .40参考文献 .411、网站前端的设计1.1、认识 webWeb 前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0 时代产物，那时网站的主要内容是静态的，用户使用网站的行为也以浏览为主。2005 年以后，互联网进入 Web2.0 时代，各种类似桌面软件新乡职业技术学院毕业设计(论文) 第 5 页的 Web 应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。随着人们对用
12、户体验的要求越来越高，前端开发的技术难度越来越大，前端设计师这一职业开发技术包括三个要素：HTML、CSS 和 JavaScript，但随着 RIA 的流行和普及，Flash/Flex、Silverlight、XML 和服务器端语言也是前端开发设计师应该掌握的。前端设计师既要与上游的交互设计师，视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对前端设计师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才是够用呢？对于很多初级前端设计师来说这个问题是非常
13、令人迷惑的。前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事 IT 工作的人来说，前端开发是个不错的初入点。在 Web 前端中 css 的应用也是非常重要的。以前人们通常用的都是 table 布局，table布局虽然很简单，好用。但是随着社会的发展和科技的进步，越来越不能满足人们的需求。现在手机和平板电脑的兴起，人们大多数都是用手机和平板电脑浏览网页或网上购物。那么问题来了！当用户在不同的手机和平板上浏览网页时，会不会出现“错位”的现象？比如说，一个网页中的图片大小是 1024*765 分辨率的，那么你的手机或平板的分辨率是 500*
14、800 的，会不会图片显示不全，这种情况是有的，所以现在都是用 css 布局，这样和解决了用户用不同的终端浏览网页而出现的“错位”现象。1.2 、HTMLHTNL 是超文本标记语言，标准通用标记语言下的一个应用,是网页编写的基本语言。要实现 Web 网页的正文提取，必须对 HTML 的语法结构有个清楚的认识。对于搜狐、新浪、网易等包含大量信息的大型门户网站而言，其各类网页中包含信息标题、文摘、超链接等可供用户检索用的有用信息，且这类网站结构稳定、类似具有普遍代表性，所以只要对这些网站信息做到高效滤除，则等于可以对这类网站的信息做到批量处理的目的。经对比得到该类网站普遍拥有相似的结构如下：网页标
15、题及其它与网页标题无关的信息新乡职业技术学院毕业设计(论文) 第 6 页正文标题，正文内容及其它与网页正文标题，正文内容无关的信息1.3 、css 样式布局在界面设计中，层叠样式表（CSS）扮演着十分重要的角色。它是一种通过定义页面元素的位置、布局、颜色及字体来控制应用外观的代码。怎样引用 CSS 呢？首先我们要现在网页的页面定义好。在网页的页面当中可以做很多事情，例如，定义 web 的所用的语言，定义文字显示格式，用那种文字显示出来。1.3.1、引用 css样式表引用有两种定义方式。一种是,另一种。后者是应用在新建一个 css 样式表中，不和网页一个页面，这样用的看着舒服，也比较清晰，时候来
16、维护人员一眼就能找到所要修改的内容，前者是建立在网页页面中的，一个网页代码本来就比较多，要是在加上一些 css 样式，看着比较麻烦，不容易找出你找的内容。那么首先 我们在 head 中定义一个 css 样式。代码如下：定义的 css 样式定义 css 样式1.3.2、 CSS 样式表CSS 代码中的每条规则由两个部分组成：选择器和声明，它用来作用于整个页面距离上边距为 0px。在 CSS 中提供三种选择器机制来选取中对应的元素：（1）元素选择器：直接使用元素，如 P:first-chilsfont-size:24px;及 spantile=”home”font-style-size:24px;
17、分别使用元素与元素。并且前者元素后接这是一种带伪类的选择器，后者元素后接是一种带有属性的选择器。（2）ID 选择器：以#开头，用来匹配中带有对应值的元素。例如：#top /*上标题设置*/width:1349px;新乡职业技术学院毕业设计(论文) 第 7 页height:90px;margin:opx auto;/*上边距为 0px 右边距自动*/background-image:url(./images/top.jpg); /*填充背景图片*/（3）类选择器：以.开头，用来匹配中带有对应值的元素。例如：.carte_1 a /*超链接设置*/text-decoration:none;/*去除
18、超链接样式 下面的下划线去掉了*/color: #FFFFFF; /*颜色为#FFFFFF*/display:block; /*块状化，使超链接有个形状*/1.4、 js 脚本代码1.4.1、 js 脚本的介绍脚本是批处理文件的延伸，是一种纯文本保存的程序，一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合，在其中可以实现一定的逻辑分支等。JS 即 Javascript，Javascript 是一种由 Netscape 的 LiveScript 发展而来的脚本语言，主要目的是为了解决服务器终端语言，比如 Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相
19、当缓慢,只有 28.8kbps，验证步骤浪费的时间太多。于是 Netscape 的浏览器Navigator 加入了 Javascript，提供了数据验证的基本功能。是一个网看着美观，使用户用着赏心悦目，绝大多数的网站都是使用了 js 脚本来调试的，Java Script 的突出特点有以下几种：（1）是一种解释性的脚本语言，编写功能代码段很方便，这些 Java Script 程序不需要提前编译，它是在浏览器加载运行的过程中，一行一行解释执行的。新乡职业技术学院毕业设计(论文) 第 8 页（2）是面向对象的。开发人员可以用它创建自己的需要对象也可以使用其本身具有一些内置对象比如日期、正则表达式等。
20、（3）具有事件驱动特性。就是因为 Java Script 是事件驱动的，它正好满足了前端开发交互页面的需要。当把一个页面对象与相应的某个事件（比如单击 click）监听绑定在一起后，对这个页面元素所进行的相应操作（比如单击操作）被监听到之后，就会调用已绑定的事件处理程序，完成特定的功能。（4）具有安全性。代码只能运行在用户客户端浏览器中以确保安全。（5）具有平台无关性。因为它是由浏览器解释执行的，所以在不同的操作平台下它都能运行，只和运行它的浏览器相关。网站前端开发主要的宗旨就是尽可能提高用户体验，当下，浏览器用户要求越来越高，用户也是互联网的重要参与者，要求在互联网中也有所参与与创造，所以交
21、互将是互联网的重要主题之一。Java Script 凭借自身的这些特点成为 Web 前端开发的最热门的设计语言。1.4.2、如何使用 js脚本语言在使用 JavaScript 语言之前要先完成一个 jQuery 代码，保存成一个js 文件，然后在网页中调用，jQuery 也是网页前台设计师必备的技能。每个网页前台设计师都会 jQuery 不会就不是网站前台设计。所以说网站前台比后台管理者会的技能更多。在使用 js 脚本语言的时候，我们只需要把脚本独立完成，保存成一个 js 文件，然后在网页中引用，例如：上面的这句代码就是你要引用的代码。Type 是类型的意思，就是你使用的语言是那种类型的，例如
22、“style type=text/css” 这是使用 css 语言，而上面“type=text/JavaScript”的是使用 JavaScript 语言。然后我们新乡职业技术学院毕业设计(论文) 第 9 页要在网页中是用 JavaScript 语言了，JavaScript 语言中间或者写在中间，这两个地方没有啥多的区别。如下图：2 、服务器2.1、 服务器的介绍服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务
23、，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。在网络环境下，根据服务器提供的服务类型不同，分为文件服务器，数据库服务器，应用程序服务器，WEB 服务器等。新乡职业技术学院毕业设计(论文) 第 10 页按照体系架构来区分，服务器主要分为两种：非 x86 服务器x86 服务器按应用层次划分可以分为五类：（1）入门级服务器（2）工作组服务器（3）部门级服务器（4）企业级服务器2.2、服务器的特性：从这四个方面来衡量服务器是否达到了其设计目的；A：Availability 可用性；S：Scalability 可扩展性；U：Usability 易用性；M：Manageabi
24、lity 可管理性，即服务器的 RASUM 衡量标准。2.2.1、可用性对于一个服务器来说，一个非常重要的方面就是它的“可用性”，即所选服务器可以满足长期稳定的要求，而且不能经常出问题。事实上，相当于太阳的可靠性（可靠性）。因为在服务器端是整个网络用户，而不是个人用户，在大、中型企业中，通常需要服务器从不中断。在一些特殊的领域，即使没有用户，服务器必须不间断地工作，因为它必须继续为用户提供连接服务，无论是在工作，还是工作，无论是工作，还是休息，节假日。这是服务器必须具有高稳定性的根本原因。一般来说，7X24 小时不间断工作，特别是一些大型的网络服务器，如大型公司使用服务器，Web 服务器，并提供公共服务 iqdeweb 服务器，这些服务器，实际工作的次数只有一次，那就是它刚买回来的时候正式使用后完全安装，它没有工作，直到结束。2.2.2、可扩展性服务器必须具有一定的可扩展性，这是不可能的，这是不可能的，特别是在今天的信息时代。如果服务器没有一定的可扩展性，当用户不能胜任，一个价值的几万，甚至几百上千的服务器在短时间内被淘汰，为了保持可扩展性，通常需要有一定数量的可扩展空间和冗余部件（如磁盘阵列、支架等）。
