计算机网站设计论文.docx

成 绩：
指导教师：

失物招领网站
计算机科学与技术2014416289王慧玲
指导教师 刘清秀 依托课程web程序设计基础
摘要：在信息技术迅速发展的当今社会中，大多招领事务处理使用的传统人工管理方式，而这种方式存在着许多缺点，如：效率低、保密性差，另外时间一长，将产生大量的文件和数据，不利于失主寻找，而且人工管理无法精确的寻找到失主，中间容易出现错误，也不利于数据的及时更新及管理。因此建立一个失物招领网站，基于“网络平台”接收和处理失物，失主将丢失的物品，拾主将捡到的物品发布到网站上，不仅方便失主寻找失物、拾主归还捡拾物品，同时能减轻失物招领处管理人员的工作负担，提高失物招领工作的效率。 
关键词：失物招领 web 网站 垂直搜索

引言 大学生由于携带的东西较多，活也动多，而且经常来往于不同的地方，因此很容易发生物品丢失的情况，而目前大学里又缺乏一套可以帮助学生寻找失物的系统。考虑到大学生普遍上网，而且校园网络覆盖率高，那么就通过网络这一便捷高效的方式来实现一个失物招领系统，优化失物招领业务。通过本系统，拾主可以通过这个平台发布最新的消息以通知大家，而失主可以通过这个平台寻找和联系拾主。这样不仅财产上的损失避免了，还加强了人与人之间的交流。所以可以说它是一个偏向于实际应用，但又不缺乏社交元素的系统。
1设计说明 
1.1设计背景
为了方便失主寻找丢失物品、拾主归还捡拾物品和减轻失物招领中心的管理员的工作负担，以及发扬拾金不昧的美好品德和提高中国人民的道德水平，我们开发了失物招领管理网站。失主可以通过网络进入到本系统，查询自己丢失的物品是否已被好心人拾到并交给了招领中心和对好心人的感谢等；管理员可通过本系统对失物信息、报失信息、留言信息等方便的进行管理。 
当今社会，当失主丢失物品后往往苦于寻找，要不是得登报，就得到处张贴寻物启事。同时，拾主捡到物品若希望归还，也是麻烦重重。最重要的是，现在我国正努力建设和谐社会，政府重视城镇居民道德素质的提高，所以弘扬拾金不昧的优秀传统是政府义不容辞的一项责任。虽然现在很多学校已有失物招领中心，可是这些中心在记录失物等的信息时全部都是用笔纸记录的。当失物招领中心的记录很多时，查询起来会耗费大量的时间，同时失主必须到失物招领中心才能报失自己丢失的物品或者确认自己丢失的东西是否保存在失物招领中心。因此，开发失物招领管理系统是一件迫在眉睫的事情，并且该系统是基于网络的，失主可以在网络上查询和报失以及确认。这个系统可以在方便管理人员和失主的同时提高我国人民的道德素质，使我国人民处于更和谐的社会。
1.2设计目的
为了帮助更多的人更加方便快捷得找回他们丢失的物品而设立的一个平台。在这个网络日益发展的时代，网上寻物成为最简单方便的方式，只需要坐在家里就可以清清楚楚地知道自己丢失物品的情况。能够满足大多数人的需求，不需要自己辛苦的出门寻找便能寻回自己丢失的物品。
1.3相关技术综述
熟悉HTML5的使用，以及CSS和Jscript等语言的使用。
1.3.1 HTML
HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-Lee提出。HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。 
HTML是制作网页的基础。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
HTML可以实现：
1． 网站所有文字页面
2． 静态图片
3． 表格
1.3.2 CSS
CSS是Cascading Style Sheets（层叠样式表单）的简称。它是一种用来表现HTML或 XML 等文件式样的计算机语言。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。
CSS在网页中作用：
1． 网站页面布局 
2． 网站页面效果 
使用CSS的技术，网页便会给人一种赏心悦目，工工整整的感觉，同时字 体的色彩变化、背景的改变。实现效果，简单明了。
1.3.3 JScript
JScript是由微软公司开发的活动脚本语言，是微软对ECMAScript规范的实现。JScript最初是随Internet Explorer 3.0于1996年8月发布。典型的JScript源文件使用的扩展名是.js。JScript 是一种宽松类型的语言。宽松类型意味着您不必显式定义变量的数据类型。事实上 JScript 更进一步。您无法在JScript上明确地定义数据类型。此外，在大多数情况下，JScript 将根据需要自动进行转换。例如，如果将一个数值添加到由文本组成的某项，该数值将被转换为文本。
2 需求分析
2.1系统需求分析
系统需求分析简单的说就是分析用户的需求。需求分析是网站设计的起点，需求分析的结果是否准确地反映了用户的实际需求，将直接影响到后面各个阶段的设计，并影响到设计的结果是否合理和适用。
需求分析的任务是通过详细调查现实世界要处理的对象，充分了解系统工作概况，明确用户的各种需求，然后在此基础上确定网站的功能。
2.1.1失物招领过程的概述
在失物招领过程中。一般用户即遗失人对自己丢失的物品相关信息进行发布，留下自己的联系方式，以备拾获人进行联系。拾获人可将拾获物品的相关信息进行发布，留下自己的联系方式，以备失主进行联系。用户所发布的信息暂时不能够马上显示。为了防止不相关的信息，以及不健康的信息在该网站上进行发布，所以用户发布的信息都必须经过管理员的审核通过之后才能够进行发布。如果发布人对相关信息需要修改或有对该网站的建议可以通过该网站提供的留言板进行留言。管理员会针对相关信息进行回复以及对该网站的不足之处做出修改。
2.2用户需求分析
失物招领网站服务的对象是丢失物品的失主，涉及到各个年龄阶段以及不同的群体，因此失物招领网站应将根据不同用户的需求提供不同的功能。
通过平时的了解和调查，对服务中心系统的需求分析及其服务对象的需求分析着手：
（1） 普通用户：主要希望通过失物招领网站进行遗失物品与拾获物品的进行填写以及提供线索等功能。用户注册后方可登录系统进行搜索，用户也可以在不登录的情况下对网站上的物品进行浏览、查看。
（2） 系统管理员：能对用户填写的资料进行审核，让用户填写的遗失以及拾获的物品信息进行发布。管理员会定期对网站的信息进行检查，如果发现某个物品在很长时间内没有被查询，也没有被领取，会将此条信息进行删除。 
3 系统设计
3.1系统功能设计
该系统作为遗失人和拾物人的一个媒介，一方面由拾物人或遗失人发布信息，另一方面由拾物人或遗失人通过该网络获取信息，通过双方进行确认之后，完成网络合作并寻回失物的过程。
对于该系统的管理方面，则要求管理员对用户所添加的信息进行修改、删除等操作。最重要的是该系统对用户所能查看的信息必须是管理员审核通过的信息。所以管理员还得有审核的操作。不仅如此要把系统作为可扩展的网站还要求管理员可以直接对管理的分类信息进行添加修改删除等操作。因此该系统要满足以下的需求分析：
（1） 用户需要添加新的遗失招领信息。
（2） 拾取者应提供清晰的线索，让失主更快找回自己丢失的物品。
（3） 在网站内添加信息搜索功能。
（4） 给该网站提出建议。
（5） 管理员对信息进行分类管理。
（6） 管理员对物品信息进行分类的管理
（7） 管理员对用户发表信息的审核删除等功能。
所以根据上述需求该网站中需要创建6个模块一个站内搜索功能，用来搜索站内物品。一个寻物启事模块，用于存放遗失者所丢失物品的线索相关信息。还要有一个招领启事模块，用来存放拾获者拾取物品的信息。第四个就是建立留言板，对用户对该网站的一些不足等所提出建议的信息的存储。第五个为管理员信息表，并留下管理员的联系QQ,方便用户与管理员进行联系。第六个用于发布网站信息及公告。通过上述用户的需求分析为简化思路本系统分为5个部分，分别是信息管理、信息添加、信息查询、信息搜索、网站留言。
下面就每一个功能模块的作用描述其具体功能需求分析如下：
3.1.1信息添加模块分析
信息添加模块主要功能为：用户可以对拾得物品、丢失的物品相关信息进行录入。对感谢信遗矢帮助等信息进行添加。
3.1.2信息查看模块分析
信息查看模块主要功能为用户对通过管理员审核后的信息进行浏览查看。包括对遗矢信息、招领信息、感谢信及遗矢帮助等信息的查看。
3.1.3信息管理模块分析
该功能是针对管理员而做。信息管理模块主要功能为对用户添加信息的审核。通过审核后方发布。对用户添加信息的删除。对网站信息分类进行管理。可以对现有的网站信息分类进行修改删除等操作。也可以对现有的网站信息分类进行添加。对物品信息分类的管理。可以让用户更加容易的找到自己所要寻找的信息。
3.1.4信息搜索模块分析
该模块是为了用户能更加准确的搜索自己所寻找的信息。主要功能为：用户可根据自己所知道的信息对该网站的遗矢招领等信息进行更加准确的搜索。
3.1.5网站留言模块分析
网站留言信息模块主要功能为：用户如果对网站有建议以及遇到的问题都可以在网站上进行留言。以便维护该网站的人员可以对该网站进行更好的维护。
失物管理网站
系统总模块划分图：

用户端
管理端

信息查询
留言
失物报失
报失信息管理

信息公布管理
失物信息管理

是
用户管理

图 3-1 网站模块图
4网站设计
4.1网站结构
1． 主页：搜索、首页、选择地区、寻物启事、失物招领、友情链接、登录；

2.客服：联系客服；

3．网站公告：网站的一些信息及近期公告；

4．寻物启事：遗失者发布一些丢失物品的信息；

5．招领启事：拾获者发布他们所拾捡物品的信息；

6．留言板：用户可以留言，给网站提出建议。

4.2网站详细介绍
网页设计作为一种视觉语言，特别讲究编排和布局，版式设计通过文字图形的空间组合，表达出和谐之美 
多页面站点页面的编排设计要求要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，设计时考虑到整体布局的合理性，使浏览者有一个流畅的视觉体验。网站设计认真分析项目浏览群体的特点，并从浏览群体的感受出发安排页面布局。网站的主页给访问者比较清晰、明了的印象，要突出网站的特点和风格。
4.3网页设计
页头：网站名制作的LOGO以及搜索框。 
页面：导航，图片，客服，网站介绍，公告，丢失物品展示，拾获物品展示，留言板。  
首页：首页利用div设计以及表格。把不同内容划分到不同区域。首页的导航系统是有效连接网站各处的工具，它有效的分类网站内容并指向它所代表的内容。是通过超文本链接，使浏览者能够在网站上自由前进或后退。访问者可以通过QQ客服的方式联系管理人员，来发布自己寻找或拾获物品的信息。
分页：通过首页链接到分页，可以选择自己所在的地区，并进行登录，以便于更好地访问网站。
登录跳转页面

地区选择页面

客服页面

5兼容问题
在网页设计中都会遇到这样那样的兼容问题，兼容问题是最让人头疼的问题。在不同的浏览器下，都会出现不同的效果，有的甚至还会把自己排好的版面，在别的浏览器上显示的乱七八糟，还有的一些东西显示不出来。每个做网页的人都会遇到这一些问题。就像Padding和margin。这两个就是很常用、特别的。关于解决兼容问题，在一些常用的浏览器设置它们都兼容的代码。Dreamweaver里有一个“检查浏览器兼容性”功能特别实用。 
1、为什么在不同的浏览器显示效果不一样？  
因为不同浏览器对于CSS样式表的解析不一样，所以导致样式乃至层布局发生变化。例如，FF中设置padding属性时，div会相应增加height和width，而IE的解析是不会的，再例如FF对盒模型的解析和IE相差两个象素。   
2、设计时要做到所有浏览器都兼容吗？  
 只要做到IE6 FF2.0 以及新出的IE7.0兼容即可，可以另外设计CSS文件，然后通过JS判断浏览器版本进行选择相应的文件。
6总结
通过本次的网站设计，运用了所学到的知识。这样不仅复习了本学期学过的一些知识，同时也加深所学知识的内容，这次的网页制作学会了很多，学会了运用网页特效，怎样的特效才能凸现网页主题。在制作网站的过程中，也碰到了不少的不明白的地方通过老师同学的帮助也解决了不少问题，通过不断的学习慢慢地完成了本次的网站设计，这次做的网页虽然不是很好看，有不足之处，比如一些动态效果的运用等运用的不够灵活，同时网页布局也不是很完善。在这一次做网页的过程中，从内心来说感觉很满意这次经历，在制作过程中不仅学到了书上没有的东西，也培养了独立思考问题的能力。总之这次设计就是在不断的“发现问题——>解决问题——>再发现问题——>再解决问题——>”这个学习过程中完成的。今后将继续努力，把网页设计的更好。

参考文献： 
[1] 吴黎兵、罗云芳编，网页设计教程， 武汉大学出版社
[2] 任学文、范严编, 网页设计与制作，中国科学技术出版社 
[3] 郭根生 著 网页设计艺术 齐鲁电子出版社 2006.8 
[4] 何翠平  HTML从入门到精通[M]  电子工业出版社  2007.7 
[5] 邱郁慧   精通CSS与HTML设计模式[M]  人民邮电出版社 2008.9
[6] 樊月华、刘雪涛、刘洪发，web技术应用基础，清华大学出版社，2010 

精选范本