基于jsp的毕业论文选题系统的界面设计与实现

湖北中医药大学本科毕业论文（设计）

摘 要

信息化作为先进生产力的代表，是当今时代发展的大趋势。在信息化发展的大潮中，信息技术无疑成为了时代的宠儿。随着信息化技术的兴起与广泛应用，尤其是网络的覆盖越来越普遍，很多高校也都建立起了自己的校园网。传统的毕业生直接联系导师进行手工报送的选题方式在网络选题面前显得太过麻烦而且费时较长，已经不能适应信息化时代的发展要求，所以基于互联网的毕业论文选题系统就顺势而生了。

毕业论文选题系统将毕业生对毕业设计课题的选定提升到了互联网层面，不仅采用web的方式，使得选题信息查询实时性大大提升，而且它的审核、权限管理、文件接收等一些功能也使得论文选题变得更加严谨。本系统提供了最灵活的选题方式与开放的课题管理系统，通过用户的身份自动进行相关权限的判断，用户只能对自己权限内容进行操作。

本系统主要采用jsp网络编程技术为主要开发方法，用tomcat作为web服务器，通过网上课题的公开发布、学生与导师之间的双向选择、选题信息的及时反馈、多角色用户管理简化传统手工报送的繁琐流程，使得学生、导师、管理员的工作更加方便轻松且快捷省事，同时数据库的管理与维护也会变得更加简便易操作。

【关键词】双向选择 多角色用户 系统开发 jsp

目 录

摘 要 ............................................................................................................................. 1

Abstract .............................................................................................. 错误！未定义书签。

第1章 绪 论 ............................................................................................................. 3

1.1 选题背景、目的及意义 .................................................................................... 4

1.2 选题系统的研究范围 ....................................................................................... 5

第2章 系统需求分析..................................................................................................... 5

2.1 系统支持环境 .................................................................................................. 5

2.2 任务概述 ......................................................................................................... 6

2.3 系统功能分析 .................................................................................................. 6

2.4 系统需要解决的问题 ....................................................................................... 7

2.4 系统可行性分析 .............................................................................................. 7

2.4.1 技术可行性.............................................................................................. 8

1

湖北中医药大学本科毕业论文（设计）

2.4.2 经济可行性.............................................................................................. 8

2.4.3 操作可行性.............................................................................................. 8

第3章 系统设计 .......................................................................................................... 9

3.1 系统的设计原则 .............................................................................................. 10

3.2 系统物理架构.................................................................................................. 11

3.3 系统的逻辑设计 .............................................................................................. 11

3.4 系统功能设计.................................................................................................. 13

3.4.1 教师端................................................................................................... 14

3.4.2 学生端................................................................................................... 14

3.4.3 管理员端 ............................................................................................... 14

3.5 数据库设计 ..................................................................................................... 15

3.6 系统界面设计.................................................................................................. 18

第4章 系统实现 .................................................................................................... 19

4.1 系统登录界面的实现 ....................................................................................... 19

4.1.1 滚动字幕的实现..................................................................................... 20

4.1.2 图片的插入与滚动显示 .......................................................................... 21

4.1.3 超链接的建立与多样化 .......................................................................... 22

4.1.4 图片旋转切换的实现.............................................................................. 23

4.1.5 登录权限选择的实现.............................................................................. 25

4.2 系统主界面效果的实现.................................................................................... 26

4.2.1 双语导航的实现..................................................................................... 27

4.2.2 隐藏菜单栏的实现 ................................................................................. 28

4.3 系统其他界面的实现 ....................................................................................... 31

4.3.1 兔斯基害羞表情动画的实现 ................................................................... 33

4.3.2 确认拒绝对话框的实现 .......................................................................... 35

4.4 系统功能的实现 ............................................................................................ 35

4.4.1 登录模块的实现..................................................................................... 35

4.4.2 管理员模块的实现 ................................................................................. 36

4.4.3 教师模块的实现..................................................................................... 36

4.4.4 学生模块的实现..................................................................................... 36

第5章 系统测试.......................................................................................................... 37

5.1 可用性测试 ................................................................................................ 37

5.2 功能测试.................................................................................................. 37

5.3 数据库测试.................................................................................................. 37

第6章 总结 ............................................................................................................. 39

参考文献........................................................................................................................ 40

致谢............................................................................................................................... 41

1

湖北中医药大学本科毕业论文（设计）

第1章 绪 论

伴随着信息化技术与网络技术的发展，网络开始成为了我们生活中的重要组成部分，与我们的生活息息相关，为我们的学习、工作和生活提供了很大的便利。我们不仅实现了真正意义上的“秀才不出门，尽知天下事”，“办公自动化”也成为了现实。

我们从网络的陌生到熟悉，生活方式也在悄然地发生着改变。学校、企业和事业单位都可以利用网络即时发布自己的动态，公布相关信息，实行网络化的实时管理。内部人员也可以通过网1

湖北中医药大学本科毕业论文（设计）

络来交流自己的经验以及自己遇到的问题，达到相互解决问题、借鉴经验、相互促进，共同发展的效果。

借助网络环境下的系统来完成复杂的管理工作是目前系统开发的一个重要课题，学校、企业、事业单位都有自己的网站来解决复杂的管理问题，这些网站不但有着相关事务的管理功能，而且操作起来方便简单，工作流程得以有效简化，工作效率也大大提高。

当前互联网几乎覆盖全球，很多学校都有自己的校园网来发布自己的教育、科研动态。每年的毕业论文是检测一个毕业于生在校期间的学习能力以及学习成果的一个重要手段，也是每个学生大学生涯中必不可少的环节。毕业论文选题涉及到导师、学生、管理员，工作量比较大，传统的手工选题方式就显得流程繁琐而费时，基于网络的毕业论文选题系统得到发展。毕业论文选题系统客户端配置简单，终端形式多样，无处不在的网络也使得论文选题系统摆脱了时间和地域的限制，为网上选题提供了前提条件。本系统采用jsp技术进行开发，连接MYSLQ数据库，使得数据维护起来更加方便。

系统的界面是给用户的第一印象，正如人的外貌一样，“佛靠金装，人靠衣装”这句话流传至今不无道理。一个好看的外貌更能引人驻足观望进而想深入的去了解，系统也是一样的，有了一个美观的界面之后，才更能提升用户使用的兴趣。本系统的界面设计主要是将HTML与JavaScript和CSS相结合起来使用，使得界面在美观的同时还富有动感，更加提升了系统用户的兴趣，这对于系统的广泛应用提供了更为有利的条件。

1.1 选题背景、目的及意义

目前，各大高校的网络基础设施建设日趋健全，网络技术也越来越成熟，很多高校已经开始利用基于网络的毕业论文选题系统了。基于网络的毕业论文选题系统可以弥补手工报送方式的不足，能有效提高毕业论文选题的工作效率，节省相关的财力和物力。

本系统主要是针对当代高校计算机技术与网络技术广泛应用的现状，为了解决以往毕1

湖北中医药大学本科毕业论文（设计）

业生毕业论文设计中遇到的工作效率低下、实时性差、交互性差等问题而釆用jsp网站开发与设计的思想来开发的，目的是为应届毕业生提供一个不受时间和地域限制毕业论文创作环境，为师生间的交流提供便利。

对毕业生来说，找工作、实习、考研、考公务员才是毕业生活中的主旋律，而这一系列的事情却造成了学生做毕业设计时时间紧迫，指导老师难以集中时间对毕业生进行论文和设计的指导，一些关于论文和设计的建议也无法及时告知给学生。因此，本系统实现的最大意义就在于将导师和学生联系起来，通过远程交流实时的完成论文的相关工作，解决学生遇到的难题，使得毕业设计的完成更加顺利。

1.2 选题系统的研究范围

毕业论文选题系统分为“前端”和“后台”两个部分，前端主要是实现学生和导师浏览网站的功能：导师根据自己的研究方向在系统中发布自己的课题以及招录人数，再根据学生的报名情况选择学生，浏览学生提交的文件并附加自己的修改意见；学生根据导师发布的消息进行操作，并修改自己的相关信息。同时，在学生和导师对系统进行操作后，信息都会提交到后台数据库，并且只能由管理员进行修改和处理。管理员可以查询还未选择志愿的学生以及志愿未被录取的学生，并且及时将相关信息反馈到班级，再反馈到学生本人，督促学生完成相关工作。

第2章 系统需求分析

2.1 系统支持环境

毕业论文选题系统采用了jsp网站开发技术，使用了Dreamweaver 8 作为网页设计软件，JavaScript和CSS代码都是在Dreamweaver 8里面编写的，除此之外，本系统还采用了 MySQL数据库技术，以及采用了JDBC作为数据库连接技术来制作。在使用jsp网站开发1

湖北中医药大学本科毕业论文（设计）

技术时，需要配置Java的开发工具（JDK），还要设置web的服务器tomcat作为虚拟服务器，设置CLASSPATH环境变量也是一个必不可少的环节。此外，还要将tomcat与eclipse连接起来，并用eclipse来搭建jsp的开发环境。

2.2 任务概述

用JavaScript和CSS相结合，在Dreamweaver 8里编写一个在线毕业论文选题系统的界面。这个系统提供一个导师与学生在线论文选题到论文完成过程的交流平台。导师可以发布自己的选题信息，根据学生的选择情况选择自己的论文小组成员，并浏览学生的相关论文信息，向学生提出修改建议。学生可以根据导师发布的消息来选择自己的导师，与导师取得实际的联系，并且接受导师的审核，选定导师后，再与导师取得实时的联系，通过本系统提交自己的论文信息给老师，并获得修改意见，直至论文的完成。

2.3 系统功能分析

本系统提供了前台和后台两个部分，功能包括学生、教师、管理员三个模块，前台即用户登录、浏览相关权限信息、以及相关权限内的操作等，后台则是指管理员的维护，以及一些相关信息的查询、添加与删除。

（1）提供用户登录功能。使得用户可以通过登录进入相关权限端口，不同的用户类型有着不同的权限。

（2）提供密码保密功能。用户都有统一的初始密码，在进入系统后可以修改自己的密码，忘记密码时可以去管理员处查询自己的密码，而不可以自己找回密码，使得密码的保密性更强，不容易泄露。

（3）提供信息及时反馈功能。当学生选择导师被拒绝时，该学生的状态立马就会改变成未选状态，提醒学生再次进行选择。管理员也可以查询到没有选择导师的学生，并将这部分学生的名单反馈到相应的班级，督促学生进行选题。

1

湖北中医药大学本科毕业论文（设计）

（4）为教师提供课题的修改与删除功能。教师临时想改变或者删除自己的课题可以通过相关操作来实现，并且选择了该课题的学生也会接收到相应的信息，便于学生重新作出选择。

（5）管理员登陆后，可以进行管理用户、管理课题等相关操作。

2.4 系统需要解决的问题

该系统把数据的增加、删除、查询、修改功能分开来实现，把教师、学生和管理员的操作权限和模块功能分开，可以通过单独的网页来使其相互之间的关系联系起来。本系统的一切工作都是通过Internet网上来完成的，只要能够上网的地方都能进行工作。该系统需要解决的问题主要有：

（1）解决手工操作时引起的操作过程繁琐，从而造成的数据的遗漏、错误等问题以及时间和精力上的浪费。

（2）解决排列课题的时候引起的误操作。在系统生成终表时，按照学生和教师课题多对一的原则生成终表，使得信息查询时一目了然。

（3）在制作界面时，由于课本知识对于JavaScript和CSS并没有过多的去涉及，教学内容上对于这一块提到的的并不多，所以要完成本系统的界面设计，就必须去图书馆查阅相关的书籍或者去网上寻找相关教学课程来自学这一块的知识。

2.4 系统可行性分析

本系统的主要是从技术、经济、操作方面通过调查研究、分析思考来探讨开发项目的主要内容和配套条件是否具有可能性和必要性，避免失误的判断，确保系统的开发能成功完成。基于jsp的毕业论文选题系统在技术上相对容易实现，且经济成本不高，操作方便，且实用性强，易于推广。除此之外，本系统的开发还有利于加强我们学校的信息化建设进程。本系统的可行性分析主要包括技术可行性、经济可行性和操作可行性。

1

湖北中医药大学本科毕业论文（设计）

2.4.1 技术可行性

在当今信息化高速发展的时代下，网络几乎覆盖了我们生活中的角角落落，通过网络发布和获取信息已经成为我们这个信息时代的主流，这一条件也为系统的开发提供了支持。使用当前流行jsp网页技术支撑，以MySQL为数据库来进行开发系统，再通过CSS技术和JavaScript技术来进行界面美工设计，其高效性、通用性、安全性以及可移植性在与其他开发平台竞争中也会更占优势。所以本系统在技术上完全有可行性。

2.4.2 经济可行性

信息化管理可以使毕业论文选题这一过程更加系统化、规范化和高效化，可以给学校带来更高的工作效益，大大减少办公的费用，同时也能减少学生和老师在选题过程中时间、资源和精力的浪费。而且本系统是基于web服务器架构，不需要再另外配置服务器，这样就大量节省了开发所需要的资金。所以本系统在经济上完全有可行性。

2.4.3 操作可行性

（1）从系统操作角度来讲，一般系统管理员都有一定的计算机技术基础技能，对计算机的相关操作有基本的了解，在操作方面应该是没有问题的。本系统在完成开发并投入使用后，只需要对管理员进行简单的培训即可进行操作。也因为不同用户的权限不同，便可以各司其职。美观的用户界面和良好的工作流程，以及管理员较高的计算机素养均能保证系统操作的完整性。

（2）从开发角度来说，本系统主要是用来解决高校毕业生在毕业论文选题到论文完成阶段所遇到的一系列问题，将各类用户的需求用jsp网页技术进行业务流程再造，技术实现的可操作性也很大。所以本系统完全具有可操作性。

1

湖北中医药大学本科毕业论文（设计）

第3章 系统设计

本系统主要涉及了三种用户类型：教师、学生和管理员，这三种用户类型虽然是从不同的端口进入，拥有不同的权限，但是却通过数据库的访问和调用连系在一起。其中，教师与学生之间是一对多的关系，学生与管理员之间是多对一的关系，教师与管理员之间也是多对一的关系，其E-R图如下：

1

湖北中医药大学本科毕业论文（设计）

1：n

管理员

n:1

1：n

n：1

1：n

n：1

教师

学生

3.1 系统的设计原则

本系统以实用为准则，使系统相应的架构遵循经济性、可靠性、兼容性以及开放性的原则。

（1）经济性

Apache、eclipse、MySQL等软件的开源免费等特性，极大地节约了服务器端所需要的软件费用，大大节省了开发的成本。

（2）可靠性

高强度的密码保密性，只有管理员才能拥有查询用户密码的权限，用户不能自己找回密码，使得系统具有高度的可靠性。

（3）兼容性

系统遵循W3C的网页标准，采用jsp网页技术进行开发，极大地提高了本系统对浏览器的兼容性，在一般的主流浏览器下都能运行良好。

（4）开放性

在计算机技术和网络技术不断发展的今天，系统的功能建设必须遵循开放性的原则，可以在各个网络平台上运行。

1

湖北中医药大学本科毕业论文（设计）

3.2 系统物理架构

系统分为三层体系架构：用户层、业务层和数据层。用户层是与用户最为接近的一层，主要用于显示数据和接收并处理用户输入的数据，以及处理用户的操作，同时将用户界面与代码相分离。业务层主要是用来制定业务规则、实现业务流程、完成业务需求，体现业务核心价值的一种系统设计。它位于用户层和数据层的中间，将用户层和数据层联系起来。数据层主要用来控制数据库的访问，通过SQL语句来对数据库中的表实现增加、删除、查询和修改等操作，从而实现用户层的相关功能。

3.3 系统的逻辑设计

系统主要由三个实体构成，即教师、学生和管理员。

（1）教师的主要属性有姓名、工号、教研室、电话和QQ,教师的E-R图如下：

导师

QQ

姓名

工号

教研室

电话

（2） 学生的主要属性有姓名、密码、学号、班级、电话和QQ,教师的E-R图如下：

1

湖北中医药大学本科毕业论文（设计）

学生

QQ

姓名

学号

班级

电话

（3）管理员的主要属性有姓名、工号、办公室、负责班级、电话和QQ,教师的E-R图如下：

管理员

负责班级

姓名

工号

办公室 电话

QQ

（4）各实体之间的E-R关系图如下：

1

湖北中医药大学本科毕业论文（设计）

密码 用户名

n

用户登录

m

进入

姓名 工号姓名

教师

教研室

n

包括

1

姓名

管理员

办公室

学号

电话

模块

学生

n

n

班级

数据管理

负责班级

3.4 系统功能设计

通过对系统的需求的分析，可将本系统按照不同的功能来进行模块的划分，通过登录界面的选择后，可进入三个不同的模块之一，分别是管理员模块、教师模块、和学生模块。这三种不同的用户类型有着不同的功能：管理员模块主要进行后台数据维护与管理、选题管理、人员管理以及发布相关公告；教师模块主要进行课题的发布、查询、修改和删除，学生的选择、个人信息和个人密码的修改、论文综述、开题报告等的下载和浏览；学生模块主要功能是进行导师的选择，自己论文相关信息的查询，论文和综述以及开题报告的上传，个人密码和个人信息的修改。系统的功能模块图如下：

1

湖北中医药大学本科毕业论文（设计）

毕业论文选题系统

登录界面

教师 学生 管理员

修改密码

添加选题

修改信息

查询选题

修改密码

修改信息

我的选题

查询选题

人员管理

数据管理

选题管理

3.4.1 教师端

教师端是只有教师才有权限登录的一个模块，教师以自己的工号为ID进入端口后，该模块向教师提供修改密码、修改自己信息、添加选题和修改选题信息等功能，除此之外，教师还可以下载学 生提交的开题报告，文献综述以及论文，并提出针对性的修改完善建议。

3.4.2 学生端

学生通过登陆界面，以自己的学号作为用户名进入系统后，可以修改自己的密码以及个人信息，并且还可以查看自己的选题状态，及时联系导师，并在老师拒绝自己的志愿后快速修改志愿，为自己寻找下一位导师。选定导师后，还可以通过本系统上传自己的开题报告、文献综述和论文给自己的导师，并接收老师的修改建议，使论文的完成更加顺畅。

3.4.3 管理员端

管理员进入自己的模块后，可以对整个系统数据进行管理，包括对用户记录的添加、修改和删除；对数据表内记录的添加、、查询、删除和修改；还有对选题记录的添加加、修改、查询和删除。除此之外，管理员还可以通过对数据库的操作找出期限内并未选题的学1

湖北中医药大学本科毕业论文（设计）

生，并将所得的信息反馈给其所在的班级，以解决选题逾期的问题。

3.5 数据库设计

本系统采用MySQL数据库，是因为MySQL数据库低成本、容易使用、且功能丰富，有突出的联网和安全防护性能，最重要的是程序的来源很广，只要有了web浏览器，我们就可以从很多地址进行下载并安装。系统在进行数据库设计时，尽量减少了系统功能实现过程中数据表的使用，所以本系统在设计数据表时，本着避免重复存储的原则，只用到了4个数据表来处理系统中的数据。同时，为了减少数据的冗余，每个字段都用字母表示。

（1）教师信息表

教师信息表用于保存教师的相关信息，其中 id即教师的工号，为整张表的主索引，其他字段还有：name表示教师姓名，pwd表示登录密码，sex表示教师性别，dept表示教师隶属院系，tel表示教师的联系电话，other表示一些诸如备注之类需要附加的信息。教师信息表如下图所示：

（2）学生表

与教师信息表相类似，学生表是用来储存学生的信息的，学生表的id即学生的学号，1

湖北中医药大学本科毕业论文（设计）

也是学生表的主索引，name、pwd、sex、tel、dept分别表示毕业生们的姓名、登录密码、性别、电话以及所隶属的院系，bj则表示学生所在的班级。学生表如下：

（3）项目表

项目表以id作为整张表的索引，处id外，本表还包括：stuid，itemid,date,withteacher,dept,state六个字段。其中，stuid表示的是学生的学号，代表该学生；itemid即项目id，是指所选题目的编号；date即指的是选题时间，使得数据的管理更加规范和严谨，方便查询信息；withteacher只有就是指是否跟师学习；dept跟教师信息表和学生表中一样，都是指所在院系；state是指选题的状态，一共分为未选、待审核、已选定三种状态。项目表如下：

1

湖北中医药大学本科毕业论文（设计）

（4）选题记录表

选题记录表同样是由id作为主索引，不同的是，在选题记录表中id是自动加一的，而不是管理员手动录入的，当数据库中的记录发生变化时，相应的记录就会保存在选题记录表中，而不至于造成信息的紊乱和重复。选题记录表包含了多个字段，其中teaid表示的是老师的id，title是指可供选择的课题；content是指备注；ask for 是指课题要求 ；withteacher依然是用来记录学生是否跟师的；itemdate是用来记录时间的。选题记录表如下图所示。

1

湖北中医药大学本科毕业论文（设计）

3.6 系统界面设计

本系统主要通过Dreamweaver8来实现系统的界面设计，该软件是建立web站点和应用程序的专业工具。该软件还把可视布局工具、应用程序开发功能和代码编辑支持组合在了一起，其强大的功能使得基于标准网站和应用程序的优美界面的创建更为简便快捷。通过Dreamweaver8在建立HTML网页的同时还能创建CSS样式表，并运用JavaScript的知识进行界面的设计。

1

湖北中医药大学本科毕业论文（设计）

第4章 系统实现

系统的实现分为两个方面，一是系统各功能模块的实现，二是通过美工完成系统的页面设计，使得系统更加美观，增强系统的可读性。

4.1 系统登录界面的实现

系统界面的美化主要是运用了HTML、CSS和JavaScript三种技术。系统是由一个个网页组成的，为了增加系统的可读性与吸引力，界面美化举足轻重。HTML标签可以用来描述不同文本内容的显示方式，而CSS样式表则可以通过控制不同的样式将网页的内容和样式分离开来，供HTML部分使用。然而这两种方法只能向用户提供一种静态的信息资源，，而缺少动态的交互信息。JavaScript的使用正好解决了这一矛盾，不需要复杂的程序便可以完成较为复杂的效果。下面就简单地介绍一下各种界面中用到的效果的实现，主要是以教师端界面为例。本系统的登录界面如下图所示：

1

湖北中医药大学本科毕业论文（设计）

4.1.1 滚动字幕的实现

滚动字幕主要用于一些消息的发布，它不仅可以让网页更加的生动活泼，同时还可以体现出消息的即时性，主界面中的教务通知、教务动态就是使用了滚动字幕制作出来的效果。滚动字幕的制作并不复杂，只需要一个简单的HTML标记即可，其主要代码示例（以教务通知为例）如下：

hspace="1" scrollamount="2" scrolldelay="2" vspace="1" loop="-1">

关于对2015年部分学院教师评学情况的通报    2016-05-10

关于2015-2016学年第一学期试卷进行抽查    2016-05-10

关于公布2016届毕业生清考安排的通知    2016-05-06

关于做好2016届毕业实习后期工作安排的通知    2016-05-03

关于对2015-2016学年第一学期期末考试试卷进行抽查结果的通报   

2016-04-25

1

湖北中医药大学本科毕业论文（设计）

通过多标签对属性的设置，就可以控制文字的滚动效果。其中direction属性是用来控制字幕中文字滚动方向的；align属性用来设置字幕的对齐方式；behavior属性用来控制字幕中文字的滚动方式，属性值有scroll（一段滚动到另一端）、slide（从一端快速滑到另一端且不再重复）、alternate（两端之间来回滚动）3个；height、width属性分别控制字幕的高度和宽度；hspace属性控制字幕左右方向空白区域的宽度，scrollamount属性控制滚动速度；scrolldelay属性控制两次滚动之间的延迟时间；loop属性设定滚动的次数，其中-1表示一直滚动下去直至页面更新。其中红色字体部分显示的是热点关注的消息。

4.1.2 图片的插入与滚动显示

（1） 图片的插入

在网页上使用图片，可以更为直观巧妙的表达出网页的主题，使网页更加的充满生机，这种效果单靠文字是是实现不了的。主要使用标签来导入图片，其代码（以登录界面为例）如下：

其中，src属性用来指定图像的源文件路径，image是图片所在文件夹名，是图片名；alt属性定义的则是图片的描述文字，当图片无法显示或者鼠标移到图片上时显示该属性的属性值；width、height、align属性分别用来定义图片的宽度、高度以及语文本行的对齐方式。

（2） 图片的滚动显示

图片的滚动与文字的滚动相类似，也是通过标签对来实现的，不同之处只是将标签对之间的文字内容换成了图片插入标记，代码如下所示：

bgcolor=” lightblue” hspace="1" scrollamount="2"

1

湖北中医药大学本科毕业论文（设计）

scrolldelay="2" vspace="1" loop="-1">

图片滚动中 标签对的属性代表含义与字幕滚动中相同。

4.1.3 超链接的建立与多样化

建立超链接所使用的HTML标记为标签对，还可以使用CSS的样式定义来使超链接多样化。其实现代码示例为：

首页

学校简介

院系介绍

师资队伍

重点专业方向

关于系统

在浏览器中打开链接网页，可以看到， 最开始的链接是红色的，当鼠标移动到链接上时变为绿色，接着鼠标单击以后链接变为了黄色，最后链接到新的网页并退回来时，链接会变成蓝色，，且当鼠标的光标移动到链接上时，链接变为绿色20px大的楷体字体。此外，a{ text-decoration:none }控制了超链接不加下划线。

1

湖北中医药大学本科毕业论文（设计）

4.1.4 图片旋转切换的实现

图片旋转切换需要运用到JavaScript的知识，需要编写一个控制图片旋转的文件，然后 在 里面引用到 文件，主要旋转控制代码如下：

:

function getStyle(obj,name)

{

if(tStyle)

{

return tStyle[name];

}

else

{

return getComputedStyle(obj,false)[name];

}

}

function startMove(obj,json,fnEnd)

{

clearInterval();

=setInterval(function()

{

var bStop=true;

for(var attr in json)

{

var cur=0;

if(attr=='opacity')

{

cur=(parseFloat(getStyle(obj,attr))*100);

}

else

{

cur=parseInt(getStyle(obj,attr));

}

var speed=(json[attr]-cur)/6;

speed=speed>0?(speed):(speed);

1

湖北中医药大学本科毕业论文（设计）

if(cur!=json[attr]) bStop=false;

if(attr=='opacity')

{

='alpha(opacity:'+(cur+speed)+')';

y=(cur+speed)/100;

}

else

{

[attr]=cur+speed+'px';

}

}

if(bStop)

{

clearInterval();

if(fnEnd) fnEnd();

}

},30)

}

除此之外，图片的位置摆放需要用到层的知识通过改变区域的重叠顺序在CSS样式中实现，主要代码如下：

#pic ul .pic1{top:-80px;left:2px;z-index:1;}

#pic ul .pic2{top:110px;left:88px;z-index:2;}

#pic ul .pic3{top:80px;left:174px;z-index:3;}

#pic ul .pic4{top:50px;left:260px;z-index:4;}

#pic ul .pic5{top:80px;left:436px;z-index:3;}

#pic ul .pic6{top:110px;left:700px;z-index:2;}

#pic ul .pic7{top:-180px;left:696px;z-index:1;}

点击图片上的前进与后退按钮，可以看到，原来的中间层变成了最上层，而原来最上层的图片被转换到了中间层，这些都是利用z-index属性来实现的。先建立一个三维空间概念，在前面的区域位置设置时使用的left属性和top属性，实际就等同于是x坐标和y坐标，而z-index属性就等同于三维空间里的z坐标，设置区域的上下层关系，设置值为整数。整数值越大，区域层次越是处于上层，反之，区域层次越是处于下层，上层覆盖下一层的内容，所以利用z-index属性，可以让区域的显示更加多元次多层次化。

1

湖北中医药大学本科毕业论文（设计）

图片的明暗变化是通过alpha滤镜效果来实现的：

#pic ul 1{opacity:0.2;filter:alpha(:20);}

#pic ul 2{opacity:0.6;filter:alpha(opacity:60);}

#pic ul 3{opacity:0.9;filter:alpha(opacity:90);}

#pic ul 4{opacity:1;filter:alpha(opacity:100);}

#pic ul 5{opacity:0.9;filter:alpha(opacity:90);}

#pic ul 6{opacity:0.6;filter:alpha(opacity:60);}

#pic ul 7{opacity:0.2;filter:alpha(opacity:20);}

滤镜的使用语法结构为：

Filter：滤镜名（参数1，参数2„„）

参数与参数之间用逗号‘，’隔开，根据滤镜的不同，参数不同，参数的个数也不同。我主要是采用了alpha滤镜的opacity参数，控制了图片开始时的透明度，使图片产生透明渐变的结果。

从上图可以看出，登录界面是由多个部分共同组合而成的。首先最上面的部分只需要插入一幅图片就行了，实现起来非常简单，代码如下：

只是需要注意的是，在程序中插入的图片必须是 .jpg、.gif、.png格式。

4.1.5 登录权限选择的实现

本系统用户类型有三种：教师端、学生端和管理员。三种用户所拥有的权限不同，需要通过对登录

界面的控制来实现到不同端口的跳转，这个相比较起来实现较为简单，设置下拉用户类型选择框即可， 即：

教师

1

湖北中医药大学本科毕业论文（设计）

学生

管理员

4.2 系统主界面效果的实现

以教师端主界面为例，通过登录界面的权限选择跳转后，就会进入相应的端口主界面，主界面的美观直接影响到人使用系统的热情，主界面的效果图如下所示：

上面三个部分分别用不同的颜色做背景来表示，体现了框架结构的特点。

1

湖北中医药大学本科毕业论文（设计）

4.2.1 双语导航的实现

当鼠标移动到双语导航栏的时候，双语导航栏会在鼠标停留的那一栏显示英文导航。其实现效果图显示如下：

要实现双语导航栏，要先在HTML文件的部分设置css样式，代码如下：

然后在部分应用该样式，应用代码如下：

• 修改密码change

  password

• 修改信息information modify
• 查询选题query

  selection

• 添加选题add

  topic

• 退出系统exit

  system

4.2.2 隐藏菜单栏的实现

本系统设置了一个隐藏的菜单栏，悬浮于页面的左侧，当鼠标移动到悬浮的图标上时，隐藏的菜单会从左侧移出显示。并且隐藏菜单栏并不是固定不动的，它会随着滚动条的移动而移动，且始终处于屏幕的左边的同一个位置。隐藏菜单栏的设计既节省了界面空间，也使得界面更加美观。其效果图显示如下：

隐藏菜单栏的实现其实与双语菜单的实现相类似，也是需要先在HTML1

湖北中医药大学本科毕业论文（设计）

文件的部分先使用内部CSS样式表对菜单的样式进行设计，其样式设计代码如下：

然后在部分应用该样式，并通过