[毕业论文] 网上模拟高考交互式网页设计

毕  业  设  计  [  论  文  ]

题目：《网上模拟高考交互式网页设计》

专业：2001计算机应用专业

姓名：　　

指导老师：

　　　　

年月

目录

摘要………………………………………………… 1
前言………………………………………………… 1
一、目的及意义…………………………………… 3
二、交互式页面组织结构………………………… 3
三、开发工具及系统运行环境…………………… 4
四、网页设计思想及实现方法……………………12
五、网页设计中遇到的问题………………………15
六、运行效果及改进意见…………………………20
七、结束语…………………………………………21
八、致谢词…………………………………………21
九、参考文献………………………………………22

网上模拟高考交互式网页设计

前  言
world wide web(万维网)、infornation superhighway（信息高速公路）以及internet（因特网）的急速膨胀把人们带进了信息时代，这些无疑已经成为人们热衷谈论的话题，它们也的确为我们的生活提供了目不暇接的大量信息，信息时代为世界带来新的机会，web为个人事业添加了新的潜能，使人才难以埋没，使社会更加透明……
现在，大多数国家的具有某种电话服务机制的网络都被连接到了internet上。这实际上意味着用户可以使用本地网络上的计算机，向另一个公司或另一个地区、另一个国家里的使用计算机的人员发送信息，或与其交换文件。事实上用户与任何一个地方进行通信，只要该地进入了internet。
作为internet 成员之一的www，自从1989年由tim bernerslee开始使用以来，其规模一直在以指数级爆炸性地扩大。internet之所以风靡全球，在于www以超文本格式提供了世界范围内的多煤体信息服务，用户能够在web页面之间进行超链接，使得一个页面到另一个页面的访问非常简单。在internet上，web包含了一个全球性的计算机网络，该网络上的计算机可以访问被称为web server（web服务器）的计算机上所提供的交互信息，个人也可以通过命令驱动或点击页面来使用web browser(web浏览器)访问。
internet的容量每年都在成倍地增长，现在全世界已拥有七千多万用户了。其实只要你进入world wide web的海阔天空，你就可以按着鼠标漫游全世界，感受信息时代带给你的全新视野及享受其提供的各种有关服务。随着web用户爆炸性增加，网页的商业应用前景不可估量,许多公司﹑学校及政府部门都迫切期望将自己的形象和业务搬到网上,掌握网页制作及发布技术具有现实和深远的意义.
近年来,国外一些资格评定机构和教育部门进行考试时都采用一种叫“无纸化考试”的方式,这越来越成为一种趋势.所谓“无纸化考试”,即由计算机随机出题(题库由出题机构不断保充及修改),学生在规定的时间内在计算机上答题,答题完毕学生可以马上知道成绩,这种形式的考试方便了学生及出题机构,使他们都节省了时间和开支,而且堵住了作弊现象.这样的考试一来即可考核学生的知识水平,又可考验学生的心理素质,是一种比较好的考试形式.据闻明年的gre考试将取消纸上考试方式,采取这种“无纸化考试”.本设计课题的灵感正是来源于“无纸化考试”.

一﹑目的及意义
对现正在积极备战高考的同学来说,他们除了看书复习外，如果能得到一些模拟试题来练习，检查一下知识的掌握程度，看一看有哪方面的遗漏点，是很重要的。然而浪费时间到书店选购有关习题太不值得。在学校和家庭开始逐步引进电脑的今天，可以考虑采用网上模拟考试的形式来辅导学生在家里或在学校进行复习,实现无纸化考试,使教学自动化工作更上一层楼！基于上述原因，我们经过酝酿和研究，决定有步骤地试行编制一套“网上模拟高考”交互式internet网页，以完成毕业设计的任务。

二﹑交互式页面组织结构
本设计课题是交互式internet网页设计，本交互式页面从内容上说不是单一型的，为了清晰起见，首先从整个交互页面的组织结构图进行描述，web组织图如下：
主要分为四层：
第一层为主页，是交互式网页的窗口界面，主要提供各交互式页面的链接。
第二层有《高考语文试题库》、《高考数学试题库》、《高考英语试题库》、《高考物理试题库》和《高考化学试题库》五个网页，五个网页有各自的子网页即第三层页面。
第三层有：父层为《高考数学试题库》网页分别有考试模式的《高考数学试题一》、《高考数学试题二》两个网页；辅导模式的《高考数学试题一》、《高考数学试题二》两个网页。共计四个网页。其它父层也分别有四个子网页。
第四层有：父层为考试模式的《高考数学试题一》、《高考数学试题二》分别有一个答案网页。
四层中凡有子网的每个父层带有其子层网页的链接，同样每个子网页有返回其父层的链接，从而使得各网页联系起来。
交互式web页的设计不同于一般的程序设计，它既有超文本链接，又有多种煤体的网页设计，是技术与美术的的结合，给人以美感。总的来说，我的交互式网页的内容计划设计成比较有特色的，嵌入文字、图形、表格、动画、背景声音等来丰富网页的内容和增加吸引力。

三﹑发工具及系统运行环境
交互式页面设计主要使用的开发工具有：网页设计语言(html、java、vbscript等),网页制作工具frontpage 98,工具软件ulead cool 3d、paint shop5.0,网上下载软件teleport pro等，本课题的交互式页面编程是用vbscript来完成的,部分页面用frontpage 98网页创作工具完成。
vbscript是visual basic语言的scripting版本—microsoft visual basic系列产品的小家伙.引用microsoft的一句话来说，vbscript是visual basic和visual basic for application的一个“轻量级（lightweight）”子集。其实，vbscript并不软弱，轻量级一词应该理解为健壮、快速和有力。通过vbscript,可以将所有对象封装在web页上，并按需要相互交互和动作，建立所有对象之间所需要的任何关系。vbscript也是microsoft的activex scripting的重要工具。activex scripting是一种技术，它可以让internet exploer之类的浏览器随心所欲地激发（hosting）一系列的脚本引擎（scripting engine ）,每种脚本引擎可支持不同的脚本语言，如vbscript或javascript。用vbscript可创建非同一般的web页，把一个表单的各个元素关联在一起；将进程从服务器移至客户机；创建web页上的分布式应用。还能对放在web页上的各种各样对象进行控制。vbscript刚刚出现不久，就已经在web页上创造了令人难以置信的例子。例如：
◆ ◆通过脚本（scripts）语言控制的java对象使irc用户内置于
web页。
◆ ◆             一个在浏览器状态栏为每一个表单元素提供帮助的导读表单。
◆ ◆一个使用脚本语言严格控制框架和导航的web站点。
◆ ◆             一个通过vbscript和复选框提供非常高效导航工具的web站点。
在性能方面，vbscript如下特点：
◆ ◆             简洁性：作为一个开发人员，作为一个开发人员，只需使用notepad(记事本)便可编辑源程序，然后直接在internet explorer或支持vbscript的其他web浏览器上运行。
◆ ◆             兼容性：在internet中，跨平台兼容技术是该领域的重大成就。microsoft去掉了使vbscript与其它平台不兼容的一些关键字，使得vbscript源代码可移植到一个不支持vbscript的平台上，既vbscript能够应用于多种平台象unix和mac。这样，所有unix和mac用户都将不会被冷落，因他们也能看到用vbscript和activex造的网页。
◆ ◆             安全性：microsoft通过禁止vbscript进行某些操作，如读写文件或系统调用，从而使之对浏览网页的计算机用户更安全。
◆ ◆             高效性：为提高通信性能，microsoft省略了影响vbscript性能的关键字。
在使用vbscript时，必须要弄清楚activex  scripting和vbscript二者概念是不同的。activex scripting是使一个程序(如internet explorer)激活脚本引擎(如vbscript或javascript)的一项技术。vbscript引擎是在web页中实际解释、编译、运行vbscript的一项技术。activex scripting就象旧友聚会时的东道主：一个中间人。internet explorer 通过activex  scripting与vbscript引擎交流。通过它所处的中介位置，免去了浏览器需对特定脚本语言的过多了解。这样做有什么好处呢？你可以在浏览器中穿插各种各样的脚本语言(vbscript、javascript，甚至某天还有cobolscript), 它还可以让浏览器开发者集中精力去开发更好的浏览器，而不是摆弄脚本语言。
※ ※浏览器处理脚本的过程：
当浏览器装载一个包含脚本的web页时(语法分析阶段)，它立刻分析它所遇到的每一<script>块，登记下该块中的所有内容并把它传递给脚本引擎(scripting engine)。
脚本引擎扫描一下浏览器传递的脚本块，然后查找所有的子过程和子过程之外的变量(全局变量)，经编译后将它们的名字保存在一个内部表中以备后用。例如，对于一个叫dispalyname的子过程，脚本引擎编译子过程的代码，保存它，并把子过程名放在一表中。当你以后调用dispalyname的子过程时，脚本引擎在该表中查找该过程并执行与之相关的代码。
当遇到包含了一些子过程以外的语句时，脚本引擎会立即执行在该子过程以外找到的代码，这叫做立即执行方式(immediate execution)。microsoft也把浏览器立即执行的脚本叫做内联脚本 (inline script)。vbscript是边装载web页边等待执行内联脚本，但它会在一张符号表中登记变量和子过程以备后用。
可以说，有了vbscript和activex技术，创建交互式网页时几乎没有不可能完成的事。有一种说法，强大的功能和灵活性要付出代价，这个代价通常是时间、费用或困难。vbscript则不然。它非常容易使用，它只有有限的关键字集合。它没有一个集成的开发环境，但可在html文件展开。
选vbscript 还是javascript,不一定非要在两者之间做出选择，完全没有必要。internet explorer 和大多数支持vbscript 的浏览器均支持vbscript 和javascript 。实际上netscape 天生就支持javascript(它不需要外界的支持)。甚至可以在html 文件
中同时嵌入两种脚本语言。不管系统愿不愿意，通过指定script 标记的语言属性为当前语言，可以实现在vbscript 和javascript之间的切换。
vbscript 和javascript 还支持完全相同的对象模型（可用于访问浏览器和web页属性的对象）。事实上，如果所做的一切就是用浏览器对象（例如窗口和文档）写一段脚本，那么就可以改变语言属性，使其从一种改到另一种，这样程序运行时就几乎不需要改动。
然而，javascript 比vbscript 先进一点，它支持建立和使用“运行时间对象（runtime object)”的观点，但 vbscript 不能。不过，vbscript 的简洁性是其吸引人的一大特征。我们尤其要记住，在一个html文件中使用脚本语言的最终目标就是把页面上的内容揉合在一起。
使用vbscript需要的支持: 一定要有vbscript,它来自于internet explorer 3.0或更高版(注:这能免费从microsoft公司得到,从microsoft公司的web站点http://www.microsoft.com可下载该软件),但我建议最好用4.0版以上,关于这点本文后面会有论述. 其它浏览器,如netscape navigator,不久也将支持vbscript.其它需要部分为:
◆ ◆一台运行windows 95或nt的计算机。
◆ ◆             一种internet连接.不论是独立的服务供应商(isp)还是许多通过ip地址接入的internet的联机服务。
◆ ◆             有空间供你使用的web服务器.许多独立服务供应商(isp)免费供应一小块web空间。
如果没有internet连接或在web服务器上没有空间，仍可以直接在自己的计算机硬盘上处理文件。虽然无法一下子把程序放到internet上，但是仍然可以学到精彩的vbscript。
frontpage 98是microsoft公司98年推出的可视化网页设计工具，包括三大组件：frontpage explorer——功能强大的web创建和管理工具；frontpage editor——技术先进的web页编辑工具；personal web server——frontpage面向world wide web（或internet / intranet）的窗口。以上三个组件共同组成一个整体，其真正的wysiwyg（所见即所得）风格的页面编辑、方便快捷的all files视图、拇指甲图像的自动转换、导航视图和向导标签的使用、动态的html支持、多种功能强大的网页设计向导等等，并能自动产生html代码，该代码可以通过包括netscape navigator 和microsoft internet iexplorer在内的标准html浏览器在任何平台上查看；frontpage还将这种支持扩展到web服务器；web的服务器扩展可以支持位于多种服务器平台上的web，其中包括有microsoft internet information server和 netscape server。从而使web页面设计者从大量、烦琐的编程工作中摆脱出来，使页面的设计和管理工作变得更轻松有趣。
运行frontpage 98的软件环境：
microsoft windows 95操作系统或windows nt workstation 3.51 service pack 5 或更高版本。
运行frontpage 98的硬件环境：
     用于windows 95，需要8mb内存；
用于windows nt workstation，需要16mb内存；
对microsoft personal web server，推荐使用16mb内存。
     30mb空余磁盘空间。
     cd－rom驱动器。
   vga或更高分辨率的显示器适配器。（使用推荐至少super vga，256色。）
   microsoft mouse，microsoft intelli mouse，或兼容的鼠标设备。
html语言（hypertexe markup language）用于网页设计的一种超文本标注语言，它是一种描述文档结构的语言,而不能描述实际的表现形式.html语言使用描述性的标记符(称为标记码)来指明文档的不同内容.标记码是区分文本各个组成部分的分界符,用来把html文档划分成不同的逻辑部分(或结构),如段落、标题和表格等.标记码描述了文档的结构,它向浏览器提供该文档的格式化信息,以传送文档的外观特征.用html语言写的页面是普通的文本文档,不含任何与平台和程序相关的信息,它们可以被任何文本编辑器读取.html文档包含两种信息:一是页面本身的文本,二是表示页面的元素、结构、格式和其它超文本链接的html标签.通过编辑html代码，使网页的编辑和测试工作更直接。
动画设计的基础是静止图象的设计，若干幅静止图象在同一位置一交替出现，就构成了动画。因此，要设计动画，首先要分别设计每一幅静止的图象，然后用专门的制作工具把这些图像组合在一起。实际上，动画设计是网页制作中最艰辛的一项工作。尽管目前已经推出了众多优秀的专业图象处理软件，设计的实际工作量并没有减轻。恰恰相反，由于专业图象处理软件过于复杂，即便是专业图象设计师，同样无法摆脱从分解的每一幅图象的设计到最后的组合处理生成动画的每一个具体的制作过程。有三个动画制作工具的
专业图象处理软件可供选择：中文版photoshop 5.0、中文版我形我速、paint shop pro 5.0（真可惜，此软件尚未推出中文版！）。
目前，ulead cool 3d是一种动态字体图形编辑工具，提供多种字体编辑功能，有助于快速创建和编辑动态标题字，使页面更生动、美观。此软件已经先后推出了二个版本，下面给出用cool3d v1.0设计转动文字标题的图示。参考下图完成1-7步后，第8步选图中的animation一项即可生成各种3d效果的转动文字。(若不需要背景，则第7步可省略)最后请选菜单image中的save as gif 选项即可保存文件。注意:不要选 file 来存盘，否则无法用 frontpage 98插入此动画格式图象文件.

四﹑网页设计思想及实现方法
要设计一个好的web页面，首先要从总体上设计好网页的风格，可以根据自己的需要、爱好、特长收集相应的文字资料及相关的图片、背景图、背景声音等，并对这些页面材料进行整理、归类，预先规划各网页的层结构（组织图），然后设计好各层的网页，接下来，根据页面的组织图逐层地对每个网页建立相应的链接，最后，对各链接进行测试和修改。
本课题web网页有四层，各层有相应的网页，考虑到各层网页创建的方法有些相同有些不同，故分开两个方面介绍各网页的具体创建方法。
第一和第二层网页，都是比较简单的超级链接，可用frontpage  exploer完成。以下是web网页中包含的超级链接的创建方法：在frontpage 98的editor中，在主菜单中选择“insert”，在其下拉列表中选择hyperlink，则会引出一个创建超级链接的窗口，在url中分别输入目标文本的url，用文字进行链接的创建完毕。由此可见使用frontpage 98软件设计网页要比用html语言设计网页简单的多。
第三层网页是交互式网页。在这种场合，非要使用vbscript或javascript等交互式网页设计语言不可。我选择vbscript了，因其简洁性受人喜爱。只要在源程序的html代码中加入vbscript脚本语言，利用按钮on_ click事件处理程序，完成允许用户完成的功能。按钮元素的on_ click事件，当用户用鼠标点击按钮元素时，就会产生此事件，完成确定等功能。在考试模式的试题里，选择题我采用“radio”类型的单选按钮，当单选按钮处于选中的状态时，它的checked属性为true，否则为false。因此用来判断单选框是否选中，若用户选中正确的选项时，则将该题的得分置给相应的变量，否则相应的变量为0分。以下是实现此功能的程序段：
<input name =“b”type =“button”value =“提交”>
<script language=“vbscript ”>
<! --
sub b__onclick ()
   if n1(1).checked = true then
   ‘若选中第一题第二个答案，则
      t1=4
   ‘第一题得４分
      else
      t=0
   ‘否则，第一题得0分
         .
         .
         .
  -->
  </script>
在辅导模式的试题里，选择题采用“radio”类型按钮。按“提交”的按钮后，则会弹出一对话框告诉用户的答案对否。这种用户可输入信息，网页把结果反馈给用户，使用户与web服务器真正实现了双向的交流。这也是交互式网页的最大特点，也是本课程设计的侧重点。在考试模式的试题里，填空题及计算题都是采用让用户自行按答案方式。

            五﹑ 网页设计中遇到的问题
1、 1、试题答案的保密
一开始进行设计时，我便有一个想法，如何让别人在网上看不到自己写的代码，找不到试题的答案。试想象一下，如果网上考试能够让人马上知道答案，网上考试将会变成什么样！找遍所有有关vbscript的资料，也不可能得到有关源代码加密的关键字，但有一个小小的诀窍，就是采用带有框架的web页。
框架（frame）并不像想象的那么神秘和难以理解，它只不过把浏览器窗口分割为子窗口，甚至可以把它们认为是窗格（pane）。在每个框架中可以放进不同的web页，除此而外没别的什么。当用户在网上考试时，通过观看源文件可以得知被调用的其它文件名，但不可能知道其它文件的源代码。例子：一个带有框架的web页的主html文件如下清单所示：
<html>
<head><title>exb_03.html:a web page with frames</title>
</head>

<frameset rows="10%,90%">
   <frame src="exb_04.html">
   <frameset cols="25%,75%">
   <frame src="exb_05.html">
   <frame src="exb_06.html">
   </frameset>
</frameset>

</html>

使框架类起作用的程序以﹤frameset﹥标记开始，以﹤/frameset﹥标记结束，所定义的每个框架以及与之相联系的html文件都必须在这两个标记之间。用rows属性可把框架分为行，用cols属性分为列，把rows和cols属性的值设为以逗号分隔的值的列表，它表示多大的行数或列数，可以用一组百分数或像素数表示。每个﹤frame﹥标记制定用在该框中的html文件，可用src属性来指定文件名：绝对文件名或相对文件名。
从以上清单例子可以看出，用户观看源文件时看到的是框中的文件名而不能看到框中的源文件的。

2﹑microsoft ie的版本
在调试以下源程序时，在microsoft的ie 3.0上是通不过的，但在ie4.0上马上通过。

<html>

<script language="vbscript">

</script>

<form  name="abcd">
<input name="a" type="radio"value=0>a.stone
<input name="a" type="radio"value=1>b.route
<input name="a" type="radio"value=2>c.stove
<input name="a" type="radio"value=3>d.hook
<input name="b"type="button"value="ok">
</form>

<script language="vbscript">

</script>

</html>

这说明使用microsoft的ie时，最好使用4.0以上的版本。因为有的语句在ie3.0是不能用的，以致源程序通不过。
3、activex control pad的使用
当使用activex的控件时,如果仅用一般的文字编辑器来编写程序的话,我们首先就必须取得控件的clsid,属性、事件、对象方法,再将该对象置于object的标签中,但现在这些繁锁的工作都可以交给activex control pad(acp)去做。acp不但帮我们取得控件的所有数据,而且会在主页脚本中加入相关的程序码。很自然,喜欢用visual basic的人一定会喜欢acp,因为他们已经习惯这种编写程序的方式。我曾试过上微软的网站去下载控制板的安装程序，但很遗憾，每次都不能成功找到。如果能够用上acp控件的话，将会节省很多时间来写源程序。
4、试题的获取及调入写字板
开始进行课题设计时，最头痛的是高考数学试题的录入。因为数学跟语文和英语不同，有很多数学符号在超文本格式是不能手工输入的。即使html3.0以上提供了对数学方程式显示的支持，但仍很繁琐。如果尝试使用扫描器把试题录入，仍然要把每条方程式存为浏览器制定的图形文件（如gif或jpeg文件），这样很麻烦。后来，我在网址www.k12.com.cn/test/data/gaokao上发现了数学试题，采用了teleport pro软件把其下载，才解决了这个问题。

5、文件名最好是小写
当我按上所述四层结构组织页面时，发现使用超级链接时文件名不能为大写。由于时间关系，在这方面不能进行进一步的探究，但文件名改为小写后链接无误。

六﹑运行效果及改进意见
本次web页面的设计，总体上说，从各个网页设计好后在frontpage explorer或在internet iexplorer 4.0中进行预览，到把各个网页链接成一个完整的web页面进行后，从第一层主页开始沿着各超级链接进行预览，其效果都是比较完美的，各页面的超级链接都能沿着正确的链接路径显示。整个web页嵌入了多煤体内容，使得页面内容丰富、生动，有较好的美感。
但由于设计过程涉及较多新的软件应用知识，有部分软件工具中的某些功能不可能完全掌握，而只能是边设计边学习，且整个设计时间比较仓促，在材料收集、整理方面还有做得不够的地方，这些都会影响web页的设计效果，故web页在某些设计方面还存在有待改进的地方。如页面的内容还有待充实；页面的组织还有待进一步改善，以使其更具条理性；版面的设计还需要不断地完善，使其更有艺术感，增强web页吸引力。

七﹑结束语
通过本次web页毕业设计，使自己掌握了制作一个完整的web页的全过程和方法，及制作web页的一些技巧；掌握了frontpage 98、ulead cool 3d、paint shop pro 5.0、internet iexplorer和teleport pro等工具的使用；加深对网络知识的了解，同时巩固了以前所学知识。在网页设计过程，自己亦得到了锻炼，为如何使用新的软件工具和今后上网获取信息及有关服务积累了经验。并且，在设计过程中，通过上网搜索有关资料的同时，亦开阔了视野，丰富了自己的知识面。

八﹑  致谢辞
在网页设计过程中，指导老师苟平年为我们提供了网页设计有关的软件工具，并对其有关功能和事项在电脑上做了相应的演示；推介有关的参考书籍；帮助我们解决在设计上遇到的有关问题和疑点；复印网页设计的有关资料；提供internet上有关主页信息的网址。
学校在这方面也给我们提供了很大的支持和帮助，学校领导也比较重视，如：给我们安排了较多的上机次数和足够的计算机，让我们有尽可能多的时间上机；给我们小组的一台计算机连接了modem和电话线，方便我们上网查找信息；另外提供了专门的教室方便我们上机调试；每个设计小组配有专门的指导老师，帮助我们能顺利完成整个设计。
对于学校和老师为我的毕业设计所提供的极大帮助和关心，在此我致以衷心的感谢！

九﹑参考文献
1、《看实例学vbscript》 [美]jerry honeycutt 著
2、《frontpage 98 网页设计速成教程》王朝阳等编著
3、《网络主页制作使用技巧100例》朱亦梅张宏敏王伟梁卢峰编著
4、《互联网看图速成》周升锋编著
5、《万维新叶╰自己动手做网页》五月工作室赵友星赵羽编著