题库系统ui设计.doc

摘要

随着计算机网络的发展，Internet 的应用越来越广泛，现代信息技术的发展，给教育带来了深刻的变革。试题库管理系统作为现代教育技术的组成部分越来越受到重视。界面是直接面对用户的，通过修改题库的UI界面，使得原来的系统更加细腻，操作方便；为了适应不同年龄段的老师作者做了相关的修改，使管理员的操作更加简便，使界面看起来更加简洁，作者针对界面的相关问题做出了版本的升级。

本系统采用Dreamweaver和tomcat开发使得界面的看起来比较清新，同时也使系统的平均响应时间大大减少。此方案具有根据选择的科目和知识点系统自动组卷和人工手动组卷两种方式。 本文从该系统的可行性研究,需求分析，到该系统的详细设计和使用都作了细致的阐述。

关键词：题库系统、Dreamweaver、UI界面

Abstract

with the development of computer network, the application of Internet, more and more widely, the development of modern information technology, brought profound changes to education. Examination management system as part of the modern education technology is more and more attention. Interface is directly facing the user, by modifying the UI interface of question bank, make the original system more delicate, easy to operate; In order to adapt to different age groups of teachers, the author made relevant changes, enables the administrator of the operation more convenient, makes the interface looks more concise, the author made a version upgrade for interface related problem.
This system adopts the Dreamweaver and tomcat development makes the interface looks fresh, at the same time, it makes the average response time of the system is greatly reduced. This plan is according to the selection of subjects and knowledge system automatic group volume and manually set in two ways. This article from the system feasibility study, demand analysis, the detailed design of the system and use all has made the detailed elaboration.

Keywords: question bank system, Dreamweaver, UI interface

目 录

1 绪论 1
1.1 系统开发的背景 1
1.2 通用试题库管理系统开发的意义 1
1.4 系统开发的目标 1
1.5 相关的研究工作 1
2 开发环境及技术 3
2.1开发环境介绍 3
2.2 HTML开发技术简介 3
2.3 Dreamweaver简介 3
2.4 Tomcat简介 4
2.5 JSP技术简介 4
3 系统功能分析与设计方法 5
3.1系统功能分析 5
3.2系统功能的设计方法 5
4 功能的实现 6
4.1 课程浏览的UI设计 6
4.2 试题维护页面的UI设计 8
4.3 课程知识点浏览页面的UI设计 12
5 总结 16
6 致谢 17
参考文献 18

1 绪论

1.1 系统开发的背景
试题库管理系统主要研究如何借助计算机提高出题,组卷速度、精度保证试题的客观、公正、一致、节省组卷时间、减轻教师负担提高工作效率。 随着时代的发展和计算机自动化的进步，各种各样的考试多如牛毛。试卷中包括大量的试题，这无疑增加了出题组卷老师的组卷难度和工作量。如何才能更客观、准确、高效地去评估、检测一分试卷的难易程序与能力分布水平呢。一些教育发达的国家由此建立了不少规模巨大的海量试题库，参加考试的考生数目庞大、次数频繁、还要求每次出题与组卷具有可比性，这样才能用于鉴别和控制试卷的难易分布。学校投入大量的人力、物力到试题的准备、试题的抽取、试卷组织、试卷排版、印刷过程等过程。就在这样的大背景下，为适应这类处理事业的大规模发展，一个高质量的、高效率的试题库管理系统就应运而生。
1.2 通用试题库管理系统开发的意义
设计开发通用试题库管理系统的目的主要是为了帮助教师轻松的出一份高质量的试卷，提供一个科学和实用的教学资源管理工具。通用试题库管理系统的重大意义是让教师节约大量的教学工作准备时间，并且拥有更多的时间进行教学研究和对学生进行个性化深入辅导。选择通用试题库管理系统研究设计的意义，是试题库管理系统可以为学校教师举行考试提供方便与快捷的方式，拥有与真实考试同样的题型、组卷等功能。而且，通过JSP、HTML等技术建立具有较高查询效率的试题库系统，使得试卷的自动生成并逐步积累，形成有效的试题库，使试卷管理工作更科学更高效。
1.3 UI设计的发展趋势
目前在国内UI还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。 但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程
1.4 系统开发的目标
该项目只要是一个UI界面的版本升级，针对已有的河北农业大学题库管理系统进行相关的UI设计。研究的总体目标是使教师出卷更加方便，管理员的操作更加简洁。而且在这基础上修改了原来的一些缺陷，比如：课程排序问题、查找不方便的问题。
1.5 相关的研究工作
为了顺利完成题库系统UI的设计与实现，作者在毕业设计期间所做的研究工作如下：
1. 分析使用者的各方面需求，使用人群。
2. 研究了各个UI界面的设计，从中发现其优点。
3. 学习HTML技术，了解TOMCAT的构建，了解了Dreamweaver的使用以及CSS的基础知识。
4. 仔细分析了相关的UI界面。
5. 设计了题库系统的UI界面。

2 开发环境及技术

2.1开发环境介绍
硬件系统：Intel 酷睿i5 2450M、2G以上内存、500G以上硬盘、光驱。
软件系统：Windows7版本、Dreamweaver8、tomcat7.0。
2.2 HTML开发技术简介
在万维网上的一个超媒体文档称之为一个页面（英语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（英语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator,英语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
超级文本标记语言（英文缩写：HTML）是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
2.3 Dreamweaver简介
Dreamweaver是由美国著名的多媒体软件 Dreamweaver是由美国著名的多媒体软件 开发商Adobe公司（电脑软件公司， Adobe公司 开发商Adobe公司（电脑软件公司，位于美 国的圣何塞）开发的一个“所见即所得” 国的圣何塞）开发的一个“所见即所得”的 可视化网站开发工具，Dreamweaver是 可视化网站开发工具，Dreamweaver是 网页设计三剑客”中的重要成员， “网页设计三剑客”中的重要成员，主要负 责网站的创建与管理、网页板式设计、网页 责网站的创建与管理、网页板式设计、 编辑和排版。 编辑和排版。

2.4 Tomcat简介
Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。由于有了Sun 的参与和支持，最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现，Tomcat 5 支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。
2.5 JSP技术简介
SP是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态技术标准。在传统的网页HTML文件（*.htm，*.html）中加入Java程序片段（Scriptlet）和JSP标签，就构成了JSP网页java程序片段可以操纵数据库、重新定向网页以及发送E-mail等，实现建立动态网站所需要的功能。所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，这样大大降低了对客户浏览器的要求，即使客户浏览器端不支持Java，也可以访问JSP网页。
JSP全名为java server page，其根本是一个简化的Servlet设计，他实现了Html语法中的java扩张（以 <%, %>形式）。JSP与Servlet一样，是在服务器端执行的，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然后将执行结果连同JSP文件中的HTML代码一起返回给客户端。插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。
JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计的显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。 JSP(JavaServer Pages)是一种动态页面技术，它的主要目的是将表示逻辑从Servlet中分离出来。
JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。Java Servlet是JSP的技术基础，而且大型的Web应用程序的开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。

3 系统功能分析与设计方法
3.1系统功能分析
根据河北农业大学题库管理系统的相关信息，作者发现一些有待升级的地方。对于题库系统的UI设计有：
第一部分：课程浏览页面。
原有的页面可以实现删除课程信息，但是当点击删除按钮以后显示的是 “确定删除该课程吗？” 当实际操作的时候用户可能忘记自己选的是哪门课程，要是再确定信息就要点取消，这样浪费时间，而且管理员的操作量也比较大。所以作者认为该页面存在一定的问题，我尝试给与修改。
第二部分：试题维护页面。
试题维护，里面的课程信息相比比较多，有1049个知识点，而且不是按照顺序排列的，当用户需要修改或者浏览该试题的话，需要查找很长时间，页面的字体很紧凑，长时间的工作容易产生疲劳。根据相关问题，我尝试修改。
第三部分：知识点浏览页面。
知识点浏览页面同样有信息量大这一特征，同样存在不存在排序的问题，页面上有查找功能，但是我们习惯课本式的目录，对于同一门课程的相关知识点，我想做出相关修改
3.2系统功能的设计方法
第一部分：课程浏览页面。
根据页面点击“删除课程信息”按钮出现“确定要删除该课程吗？”的问题，我做出的修改是：当用户点击该按钮时，返回用户的是“确定删除XX课程吗？”这样就能让用户清楚的了知道自己是否要删除该课程了。“修改课程”按钮也是同样的设计。
第二部分：试题维护页面。
试题维护页面体现出来的问题是信息量大，查找不容易。修改、浏览消耗用户大量的时间。根据这个缺点我做出的修改是：对知识点名称、题型名称、重点等级、参考分数、试题性质、难度、实体精确描述、当前状态这些表头添加效果，效果就是当用户点击该表头的时候，表头下的一列数据会自动排列，默认是升序，再次点击是降序。这样方便用户的操作，节省大量的时间。
第三部分：课程知识点浏览页面。
对于课程在知识点浏览，同样存在信息量大的问题，我参照教科书的目录，做出了如下修改： 针对知识点名称如：绪论 我对绪论添加一个动作，当点击“绪论”的时候，可以展开绪论的所有章节。其章也是同样的效果。这样修改使用户操作更有目的性。同样节省了时间，后台的管理员也没有那么大的操作量。

4 功能的实现
4.1 课程浏览的UI设计
此操作可以实现的是：以“成本管理会计”课程为例点击“删除课程信息”按钮出现的是“确认删除成本管理会计吗？”而不是“确认删除该课程吗？”并且光标默认在取消的按钮上，这样就防止了一些连带操作，不会出现点击“删除课程信息”时不注意按了回车键，导致课程被误删。

图 4.1

图 4.1-a 图 4.1-b

实现代码：
<script type="text/javascript">
function validate(name) {

if (confirm("确认要删除" + name + "吗？")) {
}
else {
}
return false;
}
这是在函数中做出的修改。
<TD>3 </TD>
<TD>成本管理会计 </TD>
<TD>&nbsp;课程描述暂无 </TD>
<TD>
<FORM action=EditSubject.action method=post><INPUT type=hidden value=23
name=sid> <INPUT type=hidden value=成本管理会计 name=sname> <INPUT type=hidden
value=0 name=substate> <INPUT type=submit value=修改课程信息 name=submit>
</FORM></TD>
<TD>
<FORM onsubmit="return validate('成本管理会计')" action=DeleteSubject.action
method=post><INPUT type=hidden value=23 name=sid> <INPUT type=hidden
value=0 name=substate> <INPUT type=submit value=删除课程信息 name=submit>
根据要求，作者在这里写出了“成本管理会计”修改的代码。实现了点击“删除课程信息”按钮出现的忘记已选课程和连带操作导致的按回车按钮直接删除课程的问题。
4.2 试题维护页面的UI设计
由于修改的表头比较多，我就以“难度”这一列为例子。如图4.2-1 原来版本的表头是固定的，由于课程比较多用户查找比较繁琐。 通过设计，此操作实现了点击“难度”这一表头，难度这一列可以对难度等级进行升序、降序排列。图4.2-2 大大节省了查找的时间。

图 4.2-1 图 4.2-2
实现代码：

//开始排序 num 根据第几列排序 aord 逆序还是顺序
startArray:function(aord,num){
var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序后的二维数组传到排序方法中去
this.array2Td(num,afterSort);//输出
},
//将受影响的行和列转换成二维数组
_td2Array:function(){
var arr=[];
for(var i=(this.startRow-1),l=0;i<(this.endRow);i++,l++){
arr[l]=[];
for(var n=0;n<this.rows[i].cells.length;n++){
arr[l].push(this.rows[i].cells[n].innerHTML);
}
}
return arr;
},
//根据排序后的二维数组来输出相应的行和列的 innerHTML
array2Td:function(num,arr){
this.colClassSet(num,this.selectClass);
for(var i= (this.startRow-1),l=0;i<(this.endRow);i++,l++){
for(var n=0;n<this.Tags.length;n++){
this.rows[i].cells[n].innerHTML = arr[l][n];
}
}
},
//传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组
sortMethod:function(arr,aord,w){
//var effectCol = this.getColByNum(whichCol);
arr.sort(function(a,b){
x = killHTML(a[w]);
y = killHTML(b[w]);
x = x.replace(/,/g,'');
y = y.replace(/,/g,'');
switch (isNaN(x)){
case false:
return Number(x) - Number(y);
break;
case true:
return x.localeCompare(y);
break;
}
});
arr = aord==0?arr:arr.reverse();
return arr;
}
}
/*-----------------------------------*/
function addEventListener(o,type,fn){
if(o.attachEvent){o.attachEvent('on'+type,fn)}
else if(o.addEventListener){o.addEventListener(type,fn,false)}
else{o['on'+type] = fn;}
}

function hasClass(element, className) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
return element.className.match(reg);
}

function addClass(element, className) {
if (!this.hasClass(element, className))
{
element.className += " "+className;
}
}

function removeClass(element, className) {
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,' ');
}
}

var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
//去掉所有的html标记
function killHTML(str){
return str.replace(/<[^>]+>/g,"");
}
以上是对表头实现点击以后对数据排序的代码。
4.3 课程知识点浏览页面的UI设计
之前版本的知识点浏览是把所有的知识点全部展开，这样容易产生视觉疲劳，而且容易出现错误，因为每章的知识点名称都相似。本功能实现的是点击章节名称，可以在下方展开和收起该章节的详细知识点，如图4.3-1 类似教科书的目录，用户可以单独的查找相关课程。

如图 4.3-1

如图 4.3-2
此操作实现的是表头章节的关于旗下章节的展开和收起。类似教科书的目录。
实现代码：
</script>-->

<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
// $("td:gt(4)") 选择td元素中序号大于4的所有td元素

//$("td:ll(4)") 选择td元素中序号小于4的所有的td元素
$(function () {
$(".child1").hide();

$("#parent1").toggle(function () {
$(".child1").fadeIn();
}, function () {
$(".child1").fadeOut();
});
$(".child2").hide();
$("#parent2").toggle(function () {
$(".child2").fadeIn();
}, function () {
$(".child2").fadeOut();
});
$(".child3").hide();
$("#parent3").toggle(function () {
$(".child3").fadeIn();
}, function () {
$(".child3").fadeOut();
});
$(".child4").hide();
$("#parent4").toggle(function () {
$(".child4").fadeIn();
}, function () {
$(".child4").fadeOut();
});
$(".child5").hide();
$("#parent5").toggle(function () {
$(".child5").fadeIn();
}, function () {
$(".child5").fadeOut();
});
});
</script>
</head>
<body>
<div style="margin:0px auto;padding:10 0 10 0;text-align:center;font-weight:bold;font-size:30px;BACKGROUND: url(images/bg.gif) repeat-x;">

5 总结
通过这次的毕业设计我了解到了程序设计的一般流程，从学习资料，查询相关书籍到收集材料到项目的落实，其实是一个很困难的过程，入手一门新的技术明显比运用已经学过的知识要困难。但是我通过这次的毕业设计我学到了自学知识的方法，上网查资料也是一个自学的过程，每个网站都有本身的特点，我要仔细区别，分析那个更适合我。老师的指导是离不开的，通过与老师的交流我学习到了一个资深的老师看程序的远见，要首先对这个程序有一个整体的思路，再从框架入手，最后才是落实到代码阶段。
在实际开发过程中，我也遇到了不少的困难，如在没有数据库的情况下面我无法将各个页面连接起来，没法触发按钮的作用等等。这也是我对技术的了解，在老师的耐心指导下克服了该困难。这也是我的不足，没有对一门语言有一个充分了解，学习的不够透彻，对一个JSP的框架不够了解。
我觉得通过这次的毕设，我学到的不仅是JPS、HTML技术，更多的是面对困难的态度，面对不了解的知识我不在是马上就找人问，而是先自己分析，然后从相关书籍和网站找到相关的知识点。这对我以后的工作学习也有很大的帮助。

6 致谢
在我毕业设计的这几个月来，感谢指导我的孙晨霞老师。由于我以前没接触过这项技术，老师不耐其烦的一次一次给我耐心讲解。不仅在学习方面，在生活方面和我们交流很多，在放假期间关心我们的安全状况。正式因为这样，我能顺利的完成大学的最后一项学习任务，让我们的大学生活有一个圆满的句号。
大学生活即将结束，回头看看陪伴我的都是我的老师和我的同学们，感谢老师对我孜孜不倦的教导，同学对我的帮助，在我人生的第一阶段我会有一个美好的回忆。在之前的几年我通过学习，这也是为我以后的生活打下了很不错的基础，让我更有自信迎接我人生的第二阶段。
最后我在这里感谢孙晨霞老师以及我所有的老师的教导，感谢同学们的一路陪伴。

参考文献：
[1]参考网站
[2]李兴华、王月清，《Java Web 开发实战经典》，清华大学出版社。2010

[3]《众妙之门——网站UI设计之道2》

[4]《用户体验要素:以用户为中心的产品设计(原书第2版)(UI设计丛书)(全彩印刷)》

[5] 张一宁，《认知与设计:理解UI设计准则(UI领域大师力作)》

[6] 《移动应用UI设计模式(简易的UI模式参考书)》

[7] Rob Hawkes :《HTML5 Canvas: For Games and Entertainment》

[8] Sergey Mavrody :《Sergey’s HTML5 & CSS3 Quick Reference 》目 录
前 言 1
1 城市现状 2
1.1 自然状况 2
1.2 社会经济发展现状 5
1.3 城市结构与人口 6
1.4 城市能源供应及消费状况 7
1.5 环境状况 7
1.6 交通条件 8
2 设计依据、设计原则及规范与标准 9
2.1 设计依据 9
2.2 编制原则 9
2.3 编制应遵循的规范、标准 11
3 我国城镇燃气概况与发展燃气政策 12
3.1 我国能源 12
3.2城镇燃气概况 14
3.3 我国发展城镇燃气政策 19
4 气源确定与气源基本参数 19
4.1 气源条件 19
4.2 CNG与LNG气源选择 22
4.3 CNG供气及供气基本参数 23
5 工程项目范围、供气规模及主要工程量 24
5.1 工程项目建设的必要性 24
5.2 工程项目范围 25
5.3 供气原则 25
5.4 供气对象与供气范围 26
5.5 气化人口与气化率的确定 26
5.6工程分期 27
5.7 各类用户耗热定额 27
5.8 居民与商业用户高峰系数的确定 28
5.9 供气比例与供气规模 30
5.10 各类用户耗气量平衡与高峰流量 31
5.11 储气与调峰 34
6 CNG气源站 38
6.1 站址选择 38
6.2 建站规模及占地面积 39
6.3 总图布置 39
6.4 CNG气源站竖向设计 40
6.5 交通运输及道路 41
6.6 绿化 41
6.7 用地指标 41
6.8 工艺设计与主要设备 42
6.9 管材选择及防腐 47
6.10 公用工程 48
7 中压管网输配系统 53
7.1 中压输配系统压力级制确定 53
7.2 城区中压管网布置原则 55
7.3 中压管网布置 56
7.4 中压管网的敷设和特殊地段的处理 57
7.5 管材选择与防腐 58
7.6 管道水力计算 59
8、组织机构及劳动定员 61
9 环境保护专篇 62
9.1 设计采用规范及标准 63
9.2 污染物及治理措施 63
9.3 绿化设计 64
10 消防专篇 65
10.1 设计采用规范和标准 65
10.2 工程项目火灾危险性分析 65
10.3 消防措施 66
10.4 建立健全各种规章制度 67
11 劳动保护、职业安全与工业卫生 68
11.1 设计依据及遵循的标准和规范 68
11.2 安全措施 68
11.3 劳动保护与工业卫生 70
12 各类用户对燃气价格承受能力分析 71
12.1 居民用户对燃气价格承受能力分析 71
12.2 商业用户对天然气价格承受能力分析 72
13 节能 73
13.1 能耗分析 73
13.2 节能措施 73
13.3 节能效益 73
14 工程效益分析 74
14.1 经济效益分析 74
14.2 社会效益分析 75
14.3 环境效益分析 75
15 主要设备与技术经济指标： 76
15.1 主要设备 76
15.2 主要技术经济指标（一期工程） 77
16工程项目实施计划 79
17 工程项目招标初步方案 80
17.1 招标范围及招标 80
17.2 招标初步安排 80
17.3 招标形式 81
17.4 招标方式 81
17.5 评标专家来源 81
17.6 招标程序和招标基本情况表 82
18 投资估算及资金筹措 83
18.1 编制依据 83
18.2 投资估算 83
18.3 资金筹措 84
18.4 庭院及户内管道工程 84
19 经济评价 84
19.1编制依据 84
19.2基础数据 85
19.3成本分析 85
19.4损益分析 85
19.5清偿能力分析 87
19.6不确定性分析 87
19.7财务评价结论： 87
20 结论与建议 88
20.1 结论 88
19.2 建议 89