教育网站设计本科毕业设计说明书

1、本科毕业设计说明书内蒙古工业大学本科毕业设计说明书内蒙古工业大学本科毕业设计说明书教育类网站，此类网站随时更新随时修改，极大的方便了师生之间的密切交流。 我们可以在网站上查阅最新通知公告，掌握学校各类活动的消息，了解最新的学术 动态，甚至连成绩都可以在网上查看。同时也具备小型的bbs功能，大家可以在网站上畅所欲言，共享生活中和学习中的心得体验。我这里要做的，就是一个本学院 计算机学科研究室网站。本网站以微软的Asp技术，采用Access数据库保存网站数据，用以实现研究 室日常运管所需要的功能。具体功能包括设有我实验室相关背景介绍，师生信息的 介绍，方便浏览这对我研究室有一个初步的认识。设置专门

2、的通知公告栏目用于信 息的发布。本研究室所获得的学术成果要逐一展示，已获得的专利项目、具有哪些 单位部门的支持、专业图书文献的发表情况、学术论文的发表情况等等，都设有专 门的栏目。在师生空间专栏，制作一个类似于bbs功能的学生论坛，用于留言回复， 学生如有相关学术问题可以在论坛内留言，方便同学之间的讨论和教师对问题的解 答。下方设有友情链接板块，以下拉列表的形式选择上级主管部门和学术研究网站， 用以实现快速跳转，极大的方便了用户对资料文档的查找。在网站的具体实现方面，使用以 Dreamwaver为主的开发工具，以 Fireworks 和川ustrator等软件配合美化。Dreamwaver作为

3、强大的网站开发工具，在网站的布局及相关asp网页的设计中提供了丰富功能支持，从而减少了代码的敲击次数， 仅靠点击鼠标就可以实现网站的编辑制作。此外，Dreamwaver还拥有丰富资源插件， 开发者可根据自己的实际需求选用插件，在需要的时候调用插件即可实现需要的功 能。为增强视觉效果，网站的美化必不可少，Fireworks作为网站设计三剑客之一的美化工具，对图片切片后可以直接导入Dreamwaver中使用，不必像以往逐一手动添加。两软件配合使用，足以满足日常的开发需要。关键词：教育网站； Asp； Dreamwaver; AccessAbstractEducati on websites, su

4、ch site cha nges at any time, the great convenience of close com muni cati on betwee n teachers and stude nts. We can refer to the latest announ ceme nts on the website, to master all kinds of school activities, understand the latest academic dyn amic, eve n the result can see on the Intern et. It a

5、lso has a small BBS fun cti ons, you can speak freely on the site, shari ng experie nces in life and study. I want to do here, is a the college computer scie nee lab web site.This web site used Microsoft Asp tech no logy, use access database to store web site data. Specific functions include with my

6、 lab background introduction, the introduction of in formati on betwee n teachers and stude nts, convenient to browse this laboratory have a prelim inary un dersta nding to me. Set up special announ ceme nts colu mn for in formati on release. Obtai ned the academic achieveme nts of this research wil

7、l show one by on e.The space betwee n teachers and stude nts, stude nts to produce a similar to the fun cti ons of BBS used for an sweri ng, stude nts if releva nt academic problems can leave a message in the BBS, convenient discussion between classmates and teachers to answer to the question. Below

8、 has a link plate, in the form of the following drop-down list select the compete nt departme nt and academic research site, to realize the quick jump, great convenience for users to find docume nts.In the realizati on of a site, the use of predo minan tly Dreamwaver developme nt tools, the beautifi

9、cati on with fireworks and illustrator software. Dreamwaver as a powerful tool for website developme nt, in the desig n of the layout of the site and related asp web page provides rich function support, thereby reduci ng the code nu mber of percussi on, only by the click of a mouse can achieve websi

10、te editor. In addition, Dreamwaver plug-in also has rich resources, developers can choose accord ing to their own actual dema nd plug-i nfireworks as a tool for web desig n one of the three musketeers beautificati on, the slice images can be directly used to import Dreamwaver, not as in the past one

11、 by one manu ally add. Two software, is eno ugh to meet the developme nt n eeds of the everyday.Key words: Educati on website; Asp;Dreamwaver; Access目录 TOC o 1-5 h z 引言 1 HYPERLINK l bookmark4 o Current Document 第一章系统需求分析 2 HYPERLINK l bookmark6 o Current Document 1.1建设网站的目的 2 HYPERLINK l bookmark8

12、o Current Document 1.2计算机学科研究室网站的需求分析 2 HYPERLINK l bookmark10 o Current Document 1.2.1网站分为前台显示和后台管理两个部分 2 HYPERLINK l bookmark12 o Current Document 1.2.2网站功能模块需求分析 3 HYPERLINK l bookmark14 o Current Document 1.3分析细分各模块简要功能介绍 3 HYPERLINK l bookmark16 o Current Document 1.4系统数据流程情况介绍 4 HYPERLINK l bo

13、okmark18 o Current Document 前台显示流程分析 4 HYPERLINK l bookmark20 o Current Document 1.4.2后台管理流程分析 4 HYPERLINK l bookmark22 o Current Document 第二章网站数据库的设计与实现 6 HYPERLINK l bookmark24 o Current Document 2.1网站数据库的设计 6 HYPERLINK l bookmark26 o Current Document 2.2创建数据库 7 HYPERLINK l bookmark28 o Current Do

14、cument 2.3根据网站需求规划实现数据库各表 7 HYPERLINK l bookmark30 o Current Document 第三章系统设计相关技术 12 HYPERLINK l bookmark32 o Current Document 3.1后台数据库 12 HYPERLINK l bookmark34 o Current Document Access数据库 12 HYPERLINK l bookmark36 o Current Document SQL Server数据库 12 HYPERLINK l bookmark40 o Current Document 3.2网页

15、设计语言 12 HYPERLINK l bookmark42 o Current Document Asp 12 HYPERLINK l bookmark44 o Current Document Asp .net 13 HYPERLINK l bookmark46 o Current Document PHP 13 HYPERLINK l bookmark48 o Current Document Jsp 13 HYPERLINK l bookmark50 o Current Document 3.2.5开发语言及数据库组合的确定 13 HYPERLINK l bookmark52 o Cu

16、rrent Document 3.3开发设计工具 14 HYPERLINK l bookmark54 o Current Document 使用 Adobe Dreamweaver 8 为开发工具 14 HYPERLINK l bookmark56 o Current Document 美化网站的工具 Fireworks8和Illustrator cs4 14 HYPERLINK l bookmark58 o Current Document 3.3.3功能增强插件aspupload和Html编辑器 14 HYPERLINK l bookmark60 o Current Document 第四

17、章网站具体页面设计及实现 16 HYPERLINK l bookmark62 o Current Document 4.1网站前台界面的设计和实现 16 HYPERLINK l bookmark64 o Current Document 4.1.1首页的设计 16 HYPERLINK l bookmark66 o Current Document 4.1.2网站登录页面 17 HYPERLINK l bookmark68 o Current Document 4.1.3通知栏的设计 18 HYPERLINK l bookmark72 o Current Document 4.1.4学术成果展示

18、模块 19 HYPERLINK l bookmark74 o Current Document 4.1.5师生空间模块 20 HYPERLINK l bookmark76 o Current Document 4.2网站后台界面的设计和实现 21 HYPERLINK l bookmark78 o Current Document 4.2.1管理员登陆 21 HYPERLINK l bookmark80 o Current Document 4.2.2用户管理 22 HYPERLINK l bookmark82 o Current Document 4.2.3通知管理 23 HYPERLINK

19、l bookmark84 o Current Document 4.2.4学术成果管理和师生空间管理 27 HYPERLINK l bookmark86 o Current Document 总结 28 HYPERLINK l bookmark88 o Current Document 参考文献 29 HYPERLINK l bookmark90 o Current Document 谢辞 31内蒙古工业大学本科毕业设计说明书 内蒙古工业大学本科毕业设计说明书 弓I 言网站在学科日常运行中起辅助的作用， 设置专门的通知公告栏目用以对及时发 布相关信息。当然关于学科的介绍是必不可少的， 包括学科

20、的资料背景，建立时间, 负责人，成员列表都应有详细的介绍。作为研究学科技术的研究室，应设置相关的 学术展示栏目，用以分享成果，方便大家的交流和学习。本网站针对学科研究室开展，方便我们平时的使用，设计多个模块和内容。大 体分为标题导航，学术成果展示，师生空间，通知公告栏，友情链接等。导航栏对 整个网站的功能进行分类，利于师生快速查找和进入，使得网站信息可以有效地传 递给用户，这里我们制作的导航导航简洁、直观、明确；学术成果展示对历年来的 科学研究成果进行总结和公告；为加强我学科研究室的建设和管理，促进信息交流 沟通，引领学科的科学发展，提高教育质量和管理水平设置专门的通知公告栏目； 师生空间方便

21、研究者们互动和交流，内设有留言板；通知公告栏及时更新考务情况 和学科新动向；友情链接设置上级管理机构和权威学术网站的快速链接，这利于用 户直接通过网站查找想要的资料，以便于更直接简单地了解全面的信息。本网站力 求简洁明了，严肃准确。希望为广大研究者们提供更好的学习平台。网站的建设涉及到多方面的技术，不仅仅时你会编代码就可以实现的，在网站 建设时，需求分析要做好做足，搞清供求关系，网站需要什么功能，不需要什么功 能，这样才不至于白做苦工。网站建设初期一定要将大的模块设计好，把握好大的 方向，相比遍代码而言，宏观的把握更为重要。在细节的处理中，注意相关工具的 使用，例如Dreamwaver的使用，

22、使得网站的建设更为轻松，鼠标点击下就可以实 现几行甚至是几行代码，大大减轻了工作量。同时，网站的美化有失必可少的，尤 其是对模块比较多的网站来说，美化工作尤为重要，通过美化降不同模块分隔开来， 从视觉上和客户的体验上都是相当重要的。这涉及到Fireworks、PS之类的美化软件的使用，像PS之类的专业位图制作软件并非一日之功，需要我们长时间的实践 学习，也是一项必不可少的技能。所以，网站的建设，需要我们全方位的综合能力。 熟练抓握制作美化技能，才可以做好，做精。第一章系统需求分析1.1建设网站的目的设计实现一个基于 B/S模式，用以满足我校信息工程学院计算机科学与技术 专业的硕士研究生学位授权

23、点学科研究室使用需求的网站系统。首先要用以及时发 布通知公告，其次要对我研究室的技术及研究室展示，再次要内含师生交流空间， 为师生交流并进行学术探讨提供一个良好的平台，最后，要设置丰富的上级主管部 门和权威机构网站资源链接，便于资料文献获取。1.2计算机学科研究室网站的需求分析1.2.1网站分为前台显示和后台管理两个部分其中前台管理包括导航栏、用户登录、通知中心、学术成果展示、师生空间、 友情链接六个模块，后台分为用户管理、帖子管理、学术成果管理、通知公告管理 四个部分。具体网站栏目结构层次示意图如图 1-1所示。师生信息展示师生交流论坛科研项目专利成果著作论文成果科研奖励图1-1网站栏目结构

24、层次示意图122网站功能模块需求分析网站前台顶部导航模块该模块始终处于网页的最顶端，出现在整个网站每个网页的最上方，对每个模 块均设有快捷访问链接，方便用户的快速访问，各个导航块采用图片显示，当鼠标 启动到相应图片时，会产生相应变化，大大提高了辨识度。方便研究者们直接进入 需要的内容进行查阅。通知中心用通知中心来实现信息的发布，管理员通过该模块发布研究室相关通知或公 告，对本阶段工作要求进行部署。以便研究室成员了解研究室内部最新的动向和下 一步的工作计划和要求。学术成果展示通过学术成果展示完成研究室学术方面的展示任务，下设科研项目、专利成果、著作/论文成果、科研奖励4个部分，每一部分都以表格图

25、片等形式针对对不同成果 进行展示。研究者们可以通过学术成果展示栏了解到该学科的新技术、新要求、新 方向，是该网站中最重要的环节。师生空间师生空间用来展示师生风采，实现互动交流。该模块包括师生信息介绍和师生 互动两大环节。学生可以在当前模块内寻找需要的信息，包括教师的研究专长以及 联系方式。师生互动是类似于校内 bbs设立的，可以随时留言回复，为学生提供交 流的平台。友情链接在网站的最下方设置上级主管部门和科研学术的两大类友情链接，方便用户对上级部门网站的浏览和相关学术文献的查询。网站后台在后台针对前台的部分设置一一对应的管理部分，针对每个部分设置添加删除修改的功能。1.3分析细分各模块简要功能

26、介绍表1-1各模块简要功能前台显示导航栏网页最上端显示，可以快捷进入各模块用户登录通过登录获得发表机回复论坛帖子的权限通知中心用以显示研究室相关最新通知消息学术成果展示展示我研究室的学术成果师牛空间师生资料的展示，有带论坛功能的留言板，方便师 生交流。友情链接便于上级部门和学术网站的快速访问后台管理用户管理用于添加删除网站用户帖子管理用于删除论坛中不符合规范的帖子学术成果管理添加删除修改要展示的学术成果通知公告管理添加删除通知公告1.4系统数据流程情况介绍1.4.1前台显示流程分析登录注册模块：系统通过搜索数据库中的文件判断用户名及密码是否已注册， 登陆成功则跳转进入bbs论坛部分。通知中心模

27、块和用户成果展示：用户通过点击相应的通知标题，从而提取出管 理员之前提交的内容，内容可以包括文字，图片，各种格式的附件，经提取后显示 出来。师生空间：用户通过点击相应的师生名字标题，从而提取出管理员之前提交的 个人信息，显示出来。用户还可以通过点击相应的留言标题，从而提取之前的留言 及讨论内容，显示出来。如该用户从登陆中心登入，还有权限回复留言。其中留言 和回复可以自动生成时间。142后台管理流程分析用户管理、帖子管理、通知管理、学术成果管理均为管理员在管理员登陆中心 登陆验证后，通过列表选择要操作的项目，执行添加删除修改等操作，最终将数据 从数据库中删除。具体系统数据流图如图1-2所示。用户

28、登录信备验证成功信息Use用户表注册L会员信息选则要显示的模块1录成功V v一 、显示Bbs留言、通知、展示八执行显示帖子）成果展示通知一i 列表 丿提交选择删除添加图1-2系统数据流图第二章网站数据库的设计与实现2.1网站数据库的设计根据之前总结出本网站具有7个实体，分别为：用户实体，通知实体，留言实 体，科研项目实体，专利成果实体，著作/论文成果实体，科研奖励实体。具体各实体 E-R 图如图 2-1、2-2、2-3、2-4、2-5、2-6、2-7所示。图2-1用户实体图2-2通知实体图2-3留言实体图2-4论文/著作实体科研项冃图2-5科研项目实体图2-6科研奖励实体图2-7专利成果实体2

29、.2创建数据库首先使用Access2003创建一个名为yanjiushi.mdb的数据库，作为保存本网站 数据的唯一数据库。2.3根据网站需求规划实现数据库各表存储用户数据的user表，见表2-1所示。表 2-1 user 表字段名称数据类型长度备注users id长整型不限制主键、自动编号姓名:文本255密码文本50性别文本255手机双精度型不限制电子邮箱文本255地址文本255权限长整型不限制默认为0同时存放用户及管理员的相关资料，这里没有像大多数网站那样为用户和管理 员分别建立两个不同的表，而是将它们同时放在user表中，在user表中加设一个权 限的字段，用数字0，1, 2作为区分，再

30、进入相关网页时，进行全线的判定，数字 越大。相应的权限也就越高，总而设置后台普通用户的不允许进入。用于存储通知的message表，见表2-2所示。表 2-2 message表字段名称数据类型长度备注标题文本50作者文本50更新时间日期/时间不限制Now （）详细内容文本不限制id长整型不限制主键、自动编号f n ame文本50f size文本50f fileOLE对象不限制file path超链接不限制用于存放网站通知公告栏目数据的表，考虑到通知公告会有相关图片、附件的 上传，故而设置了与附件有关的字段，f_name为附件名称，其名称就是上传附件的 文件名，f_size为附件大小，f_file

31、为附件的存储，也就是说所有文件都可以直接存 入数据库，f_path附件路径，在上传时也可以将附件上传到服务器相关文件夹，这里我设置为网站跟目录的upload文件夹，同时将文件保存的路径返回到f_path字段 用于存储师生空间数据的bbs和liuyan表，见表2-3、2-4所示。表2-3 bbs表字段名称数据类型长度备注bbs id长整型不限制主键、自动编号作者文本50标题文本不限制内容文本不限制更新时间日期/时间不限制Now（）表 2-4 liuyan 表字段名称数据类型长度备注liuya nD长整型不限制主键、自动编号姓名文本50email文本50留言内容文本不限制回复内容文本不限制QQ文本

32、50futie id文本50时间日期/时间不限制Now （）用于存放网站师生空间相关数据的表，bbs为师生空间中论坛功能的相关数据, liuyan表存放的是针对于bbs表中具体标题内容的回复数据。存储科研奖励数据的research_money表，见表2-5、2-6所示。表 2-5 research money 表字段名称数据类型长度备注research m on ey id长整型不限制主键、自动编号获奖人文本不限制授奖名称文本不限制成果名称文本不限制授奖时间日期/时间不限制颁奖部门文本不限制存储著作论文成功数据的research_repor表表 2-6 research_report 表字段名

33、称数据类型长度备注research report id长整型不限制主键、自动编号著作名称文本不限制作者文本不限制刊物名文本不限制发表时间日期/时间不限制备注文本不限制存储专利成果的research_resul俵，见表2-7所示表 2-7 research_result 表字段名称数据类型长度备注research result id长整型不限制主键、自动编号专利名称文本不限制专利类型文本不限制专利号文本不限制授权单位文本不限制授权时间文本不限制存储科研项目的research_xm表，见表2-8所示表 2-8 research_xm 表字段名称数据类型长度备注research x md长整型不限制

34、主键、自动编号年度文本不限制项目名称文本不限制负责人文本不限制项目级别文本不限制项目来源文本不限制拨款经费文本不限制完成情况文本不限制批准文号文本不限制以上四个表分别用于学术成果展示栏目下的四个子栏目数据的存储，其对应关系如下,:research_m oney 为科研奖励、research_report为著作/论文成果、 research_result为专禾U成果、research_x m为科研项目。用于存放友情链接数据的 website_1表，见表2-9所示。表 2-9 website_1 表字段名称数据类型长度备注编号长整型不限制主键、自动编号网站名称文本255网址超链接不限制第三章系统设

35、计相关技术3.1后台数据库下面我又对数据库做了相关的对比，常用的数据库有：Access、SQL Server、MySQL。Access数 据库Access比较是适合数据量少的情况下使用，在此情况下效率也很高。但同时访 问不能多于4个。Access的数据库大小也最好不要超过100M，否则容易出现问题。SQL Server 数据库SQL Server为中大型数据库，功能上管理上也要比Access好的多。数据的处理 效率，灵活的后台开发，可扩展性很强。数据库的管理比较简单，因为可以使用图 形化界面。可以使用的接口工具丰富，集成性伸缩性好，适合多平台使用。MySQL 数据库MySQL为开源免费的数据库

36、管理系统，近年被广泛地应用在许多中小型网站 中。其体积小、速度快、成本低，开放源码，可运行在不同的操作系统下。安全性 其稳定性也比较好，支持大型的数据库。查询非常方便。且PHP中提供了一整套的MySQL函数，对MySQL进行了全方位的支持。3.2网页设计语言经过几天的查阅相关资料明白现在主流的网站开发语言有Asp、PHP、Asp .net、Jsp我们学习过的的Html是网页最基本的网络语言，每一个服务器语言都需要有它 的支持。下面通过比较主流开发语言的优缺点决定我的设计所需要的语言。3.2.1 AspAsp是微软公司早期研发的一款可以连接数据库并且进行数据交互的脚本程序 语言。Asp的网页文件

37、的格式是.aspo现在常用于各种动态网站中。Asp简单易用, 但是它自身存在着许多缺陷，最重要的就是安全性问题。Asp的优点为：无需编译、 易于生成、独立于浏览器、面向对象、与任何ActiveX scripting语言兼容、源程序码不会外漏。缺点为：安全性、稳定性、跨平台性都有问题，工作效率也不是很高， 部分企业级的功能不能完全实现。322 Asp. netA是微软对Asp的下一代升级产物。A的语法在很大程度上与 Asp 兼容，增强了稳定性和安全性。A可以用vb, c#, j#等所有.net framework的语言开发，更容易开发出 Web应用。Asp .net的优点为：简洁的设计和实施、语

38、言灵 活，并支持复杂的面向对象特性、开发环境。缺点为：数据库的连接复杂。PHPPHP是一种Html内嵌式的语言，是一种在服务器端执行的嵌入Html文档的脚本语言，PHP最初是制作动态网页的服务器端脚本语言，PHP的使用率是我们此次对比的网站开发语言中最高的。能兼容各类平台操作系统，所支持的数据库也非 常多。PHP优点为：它是一种能快速学习、跨平台、有良好数据库交互能力的开发 语言。比较简单轻便，易学易用。可以与Apache及其它扩展库结合紧密，具有良好的安全性。缺点为：数据库支持的极大变化，不适合使用在大型电子商务网站的 设计上，安装调试很复杂，缺少正规的商业支持，且基本上很难去实现商品化应用

39、 的开发。JspJsp是由Sun公司发起、许多公司参与一起建立的一种动态网页技术标准。Jsp技术在传统的Html中插入Java程序段和Jsp(tag),最终形成Jsp的.jsp文件。可以 跨平台使用。Jsp的优点为：一处编写可以随处运行、对系统平台支持、具有强大 的的可伸缩性及多样化和功能强大的开发工具支持。缺点为：与Asp 一样，Java的一些优势正是它致命的问题所在、缺少相关的系统性的资料、速度超慢。3.2.5开发语言及数据库组合的确定因为在论证过程中已经决定使用 Asp为开发语言，所以在此仅讨论Asp及可以 与之配合的数据库。经过查阅浏览我发现在IIS环境下常用的开发语言和数据库的组合有

40、：Asp 和 Access、Asp 和 SQL Server、A 和 Access A 和 SQL Server。 因为我已经调试好IIS环境，所以并没有对Apache环境下的组合进行深究。考虑到 曾经学校开设过Asp的课程，且学起来比较简单，我要建设的网站也并不非常复杂， 所以初步考虑使用Asp开发语言。本网站的数据库选用Access经过查阅相关资料，发现绝大多数基于Asp制作 的网站均使用Access作为配套数据库，考虑到Asp与Access均为微软公司的产品，其兼容性较好，并且我做制作的网站所要求的数据库也不是很大，故选择使用Access数据库。3.3开发设计工具331使用Adobe D

41、reamwaver 8为开发工具Dreamweaver是最常见的功能强大的网页开发工具之一，是由美国Macromedia 公司所开发的可视化软件。它同时具有网页设计开发与站点维护管理功能等众多功 能。Dreamwaver具有诸多优势：首先，在网页编辑的过程中使用方便，不用再大 量的敲击代码，他可以自动生成Html代码，使网站的制作更为快捷。不过，在使用的过程中发现，与手动敲击代码相比，Dreamwaver生成的代码较为杂乱，有相当一部分赘余。其次，Dreamwaver软件的设计页面相当人性化，在这里不得不赞 扬其设计和代码窗口同时显示的方式，其用户界面可以根据个人情况使用习惯自行 更改。再次，

42、Dreamwaver内部有网站站点的创建和管理功能，可以更为便捷的管 理网站中的各种文件，从而使得开发的速度大幅度提升。然后，Dreamwaver内部设置了非常方便的引用其他软件数据的选项，包括Fireworks，Adobe川ustrator，为网站的美化提供了更多的方便。最后，Dreamweaver对许多网络上面共享的第三方 插件的支持比较好，在网站的设计方面可以根据自己的需要进行添加，极大的减轻 了工作量。3.3.2 美化网站的工具 Fireworks8 和 Illustrator cs4Fireworks8和Illustrator cs4均为Adobe公司开发的图形制作软件，Firewo

43、rks 为网站开发者口中的三剑客之一，专门用于网站的美化工作，同时具有位图和矢量 图两种格式的编辑功能，方便实用，其根据网站布局图片切片并生成Html文件的功能，配合Dreamwaver的Fireworks切片导入，使得开发者美化网站时不必再像从 前以往那样一一修改图片。Illustrator cs4为专业的矢量图制作软件，多用商标的图形设计，矢量图的优势 为可以随意拉伸而不影响显示效果，不会像位图拉伸后出现模糊不清的情况。由于 我个人对Illustrator的使用比较熟悉，可以更为轻松的进行网站的美化，所以没有 选用人们常用的Photoshop。3.3.3功能增强插件aspupload和Ht

44、ml编辑器由于网站的通知中心及学术成果展示都设有相关资料展示部分，考虑到相关资料文档的排版，在后台后可以编辑排版并提交数据库，所以考虑使用Html编辑器,在选用的过程中，发现编辑器的上传附件功能非常方便，而且可以使用在我们这次 的设计中，所以根据本身网站情况选择了新浪的Html编辑器，见面大方简单。在与导师交流的过程中发现网站有时还需要上传附件，方便用户的下载浏览，故选用 强大的aspupload上传组件，以便完成附件的上传。第四章 网站具体页面设计及实现4.1网站前台界面的设计和实现4.1.1首页的设计由于我是第一次做网站，并没有相关的经验，在网站的设计上还是以参考为主， 并没有过多的设计。

45、经过几天的查阅相关资料，在网络上查找其他教育类网站的结 构和布局，最终形成今天的网站首页。网站布局完全使用Dreamwaver,布局起来非常方便。网站采用三个大的布局表格来布局。顶部表格设置一鲜明的网站名计算机学科实验室”下方紧跟一个导航栏，这个布局表格始终存在于网站的每一个页面， 便于用户在使用当中对不同栏目的跳转。由于以往用内工大旧版主页的导航栏时经 常出现想进信息工程学院却误入电力学院的情况，故此次导航栏使用Fireworks制作不同的图片，以实现当鼠标移动到相应栏目时图片会有变化的效果，这样在用户 体验方面不至于点错。下方第二个表格分为左右两个部分，左侧设置用户登陆界面和通知公告栏目，

46、 两者上下排列。右侧设有计算机学科实验的相关介绍，使得浏览者在初入我网站就 可以对我实验室有一个简单的认识。此介绍的显示也需要有明确的排版，而 Dreamwaver并不具有此功能，所以特地寻找相关的 Html编辑器来实现此部分的排 版。实验室介绍的旁边有学术成果展示中心，可直接跳转进学术板块，下方设置师 生空间，有我实验室师生的具体信息，点击进入可浏览相关师生的资料。师生空间 的右侧设置交流论坛，方便师生交流。由于本表格所含内容实在太多，制作完成后 发现每个部分要有明确的边界更为明了，故使用Fireworks8配合川ustrator cs4为没有部分设置了不同的图片作为背景。最下方表格设置了上

47、级主管单位和科研学术类两类的友情链接，采用下拉式显示，点击可以跳转。友情链接的下方分别用中英文明确写明我计算机学科实验室的 联系地址及邮编。具体的首页效果图如图4-1 o内蒙古工业大学本科毕业设计说明书 内蒙古工业大学本科毕业设计说明书图4-3通知列表 图4-1首页效果图4.1.2网站登录页面网站登录无非就是用户名、密码、注册新用户这三个部分，我只是做了一个简 单的美化，为保护隐私，我在密码输入文本框设置了不明文显示，输入密码时为* 如果是新用户可以点击注册新用户跳转到zhuce.asp页面进行注册。具体效果图如下图4-2。4.1.3通知栏的设计由于网站需要发布许多条通知公告，而首页那十几条远

48、远不够的，故在首页通 知下方设置查看更多，跳转到 message.asp来显示通知列表，以表格形式呈现，具 有通知标题、更新时间、更新人三个项目，按照更新时间排序，也就是说，最新发 布的消息永远在列表的最上方。通过点击相关通知标题，跳转到 message_show.asp 对选择的通知详细内容进行显示。最后，在列表的最下端设置下一页前一页最后一 页的选项。具体效果如图4-3、4-4所示。通知公告通知标題更新时间更新人2014/5/120:01:16陡个12014/4/21浅院举办学生二诗魅用报告会2014/3/17按干宙趙部州甬勤车线路时间的涌知2014/2/27关于1月11、12日诵勒车安排

49、的诵知2014/1/9(2011 1. 9)丢于1戸& B老试増协诵勤车辆的通翘2014/1/2第一页前一页下一页最后一页我院新増2个硕士专业学位接权点更新时J町：2D14/5/3L 21:4&均根坷反学tz丢員仝矢丁F展増列硕丄吉业兰立脅礁审杭二 作的通知（学位：201337号）部署，自治区人民政府学位委员会 组垠开展了我区増列硕士专业学位授权点审核工作。裁院积极准奋申 报，经学校推荐，基于自治区专家组通过公开答辩方式据出的评审意 见，公幵公示后，确定我院软件工程、电子与通信工程2个申报点为通 过评审的硕士专业学位授权点.目前，学院共有6个本科专业，3个工学硕士点，3个硕士专业学位 授杈点。

50、内容:图4-4通知详情4.1.4学术成果展示模块学术成果展示模块内部包含文件较多，将其单独拿出也可以作为一个学术展示类网站。学术成果展示模块frameset-all.asp采用了框架结构，上方和左侧完全不动, 上方frame-top.asp为首页的顶部布局部分，左侧 frame-lef.asp为学术成果模块的使 用导航，通过点击相关栏目实现跳转，将跳转的页面直接显示在导航右侧的 research.asp并不新开其他网页。具体效果如图4-5。内蒙古工业大学本科毕业设计说明书 内蒙古工业大学本科毕业设计说明书图4-10用户管理页 内蒙古工业大学本科毕业设计说明书图4-6师生空间页 祁审會as专利成

51、果甘利名称专利类型春利号授权卑位擾桓时阖檎碗|i1师盛凳闻图4-5学术成果页4.1.5师生空间模块师生空间除去首页的师生介绍部分外，其他部分就是一个类似于百度贴吧的小型bbs，可以实现发帖回帖的相关操作。对于没有登录过的游客只开放了浏览帖子 的功能，只有在通过登录模块登录后，才有回复帖子的权限。具体效果如图4-6、4-7、4-8。图4-7帖子列表不知道专业课多不多4图4-8主贴回复4.2网站后台界面的设计和实现网站后台hou.asp同样采用框架的形式为，左侧为导航部分，右侧为显示部分。4.2.1管理员登陆由于本网站用户和管理员共享一个user表,其管理权限有user表中的权限字段进行限制，用D

52、reamwaver在后台页面hou.asp中设置了一个限制对页的访问，凡是在login_hou.asp中输入的用户权限比1小的，都重新跳转回管理员登陆页面重新登 录。具体效果如图4-9所示。管理员用尸名图4-9管理员登录页422用户管理用于对user表数据的处理，可以删除无关用户，添加新用户，对已注册的用户 资料进行修改，设置用户权限等等。具体效果如图4-10、4-11所示。用户管理冃户名冥悴喫作铀K憑画?fl户同户世改遍liMi用户用户協孩点飞41 撫 i和ftSffl户.HPftiS于IW田誹:EtCfli用户冃户谣改4）幡湊址新田户审户幌为別除同户魅改碣 ffiicS用户目户捋改图4-1

53、1用户修改页423通知管理对通知栏目的管理涉及到许多方面的问题，首先，在后台设有新通知发布的功 能，而新通知不是单纯的发布标题内容，为方便管理员的使用，通知发布页面，内 置了 Html在线编辑器，可以是实现文本和图片的编辑排版，这里的编辑器选用新 浪的Html，调用方便，丰富实用。具体编辑代码包括编辑器message_add.asp勺代码如下：vform acti on=save.asp method=post en ctype=multipart/form-data n ame=form1 id=form1 标题 v|abel v/labelx/td 作者 v/px/td内蒙古工业大学本科毕

54、业设计说明书 内蒙古工业大学本科毕业设计说明书 内容 vtextarea name=c onten tid=c onten tstyle=display:non ex/textarea viframe src=Edit/editor.htm?id=c ontent&ReadCookie=0 frameBorder=0 margi nH eight=0margi nWidth=0scrolli ng=Nowidth=700height=460 文件名：vinput name=text1 type=text id=text1 /filel:考虑到在发布消息的同时有时会上传相关附件以供用户下载，而上

55、传附件涉及到许许多方面的问题，经过学习，发现最好的方案还是直接将附件上传到服务器特 定的文件夹，同时将文件的服务器保存路径存入数据库message表的file_path字段中，附件名写入file_name字段。在需要显示的页面显示file_name中的内容，如果 上传过附件，则显示，没有则不显示。在还有附件的文档中点击附件可以跳转到 ，从而实现附件的下载。具体上传文件并保存于文件夹。更改删除Server.mappath这一部分，直接改为绝对路径Uploadfile.save (E:aspmonkeyfxupload)文件路径的数据库保存方式为： strSql= In serti ntot7(b

56、iaoti,file_path,f_ n ame,f_size,f_file)values(&biaoti&,/m on keyfx /UPLOAD/ & Upload.Files(file1).file name & , & Upfile.file name & , & Upfile.size & ,?),将路径path保存为网站目录/上传文件目录/ &文件名(save.ASP中显示模块里有)& 然后在要添加附件的另外显示网页中添加附件下 载标识，在下方连接处添加路径 ， 该路径为dreamwaver正常添加记录集拖拽出file_path，复制其内容。整个上传附件我选用了 aspupload

57、上传组件，方便调用，其中需要一个asve.asp 用于保存，经过研究用if then. elseif then的方式处理有附件和没有附件两种上传 方式。，注意要有end if最为结尾。在将文件文件写入数据库的时候出现了很多问题， 在处理的过程中发现单独使用 Recordsetl.addnew或Insert into都不能完成我要求的 写入任务，最终决定同时使用这两种写入方式。同时使用时要注意，将无附件的情 况，即Recordsetl.addnew方式放在前面，Insert into放在后面，为最终成功结果。 原因不详。具体save.asp代码如下：v%LANGUAGE=VBSCRIPT%On

58、error resume NextDim Upload,Upfile,Uploadfile,strCo nn ,strSqlSet Upload = Server.CreateObject(Persits.Upload)Set Uploadfile =UploadUpload.OverwriteFiles = TrueUpload.SetMaxsize 10*1024*1024,True Uploadfile.save (E:aspm on keyfxupload)Upload.save()先将文件保存到内存，改为count=Upload.save(可返回上传文 件数量Set Upfile =

59、 Upload.Files(file1) biaoti=Upload.form(biaoti) resp on se.write biaoti zuozhe=upload.form(zuozhe) n eiro ng=Upload.form(co nten t) file_path=Upload.Files(file1).path resp on se.write file_path if file_path= the nSet Recordset1 = Server.CreateObject(ADODB.Recordset)Recordset1.Source = SELECT * FROM

60、t7Recordsetl.ope nt7,co nn ,1,3Recordsetl.add newRecordset1(biaoti)=biaotiRecordset1(作者)=zuozheRecordset1(详细内容)=neirongRecordsetl.update Recordsetl.close set Recordset1= nothing set conn=nothingelseif Upload.Files(file1).filename then内蒙古工业大学本科毕业设计说明书 内蒙古工业大学本科毕业设计说明书 内蒙古工业大学本科毕业设计说明书图4-12通知管理页 strCo