《宝贝回家计划——丢失儿童在线寻找系统》的设计与制作

徐福丽　殷娇娇　时艳琰

摘 要：宝贝回家计划是一个综合了信息发布、在线咨询等多功能浏览的在线寻人网站，是服务于大众的，因此网站的设计理念是：友好、交互、有效。本网站在vs2010开发环境下设计，不仅到考虑客户需求，而且在网站的外观设计方面，综合考虑网站的设计流程、网页的布局等因素。使得网站的性能与外观感受能够相得益彰。

关键词：在线网站；需求；外观；性能

1 系统开发分析

1.1 背景分析

由于当今社会法制并不是十分完善，拐卖、遗弃儿童的现象依然存在，但是通过警方或个人的力量不能够完善寻找丢失儿童的工作；而今随着科学技术的发展，社会已进入信息时代。在“以速度求生存，以质量求发展”的信息时代，互联网是信息传播的最佳通道，它开阔了我们了解世界的眼界，缩小了人与人之间的距离，这就更容易使我们走上信息化的道路。

以往，人们寻找人或物都以口头宣传、张贴启示、人力搜索等方法，现如今，越来越多的人意识到传统的寻人方法不仅慢，而且被诸多无可避免的因素（例如个人能力、公关机构管辖范围等）所制约。在线寻找网站客服了这些缺点、限制，满足了人们的需求，使人们可以随时了解自己想知道的各地发布的丢失儿童消息，能够帮助人们在保证自己正常生活的前提下，寻找自己的亲人。把人与互联网连接起来，是信息时代发展的方向之一。

1.2 网站开发项目需求分析

明确项目开发需求是设计项目所有工作之前必须做到的，一个网站项目的主导需求是客户需求。项目的负责人必须面对不同知识层面的客户来进行网站开发。因此如何更好地的了解、分析、明确用户需求，如何保证开发过程按照满足用户需求的方向正确进行，是每个网站开发项目管理者需要面对的问题。[1]因而，本项目利用计算机专业知识，通过建立专门的网站，对寻人信息进行搜集、整理与发布，以帮助更多的家庭早日团聚，也为更多爱心人士提供了奉献平台。基于专业网站内的多种沟通途径，如论坛、BBS等，不仅有利于寻人信息的传播，而且还有助于将这种爱心传递。

1.3 使用软件

Microsoft Visual Studio是目前最流行的由微软推出Windows平台应用程序开发环境。Visual Studio 2010 支持开发面向Windows 7的应用程序。它支持Microsoft SQL Server，IBM DB2和Oracle数据库，还支持C#、C++、VB语言[3]。

1.4 软件运行环境

Visual Studio是一款完整的开发工具集，可以在Win7/WinXP中安全运行。

2 网站制作

2.1 网站的建设步骤

在做本网站之前，结合系统开发分析，确定了做网页的五个步骤。

2.1.1 确定网站目标与主题

1）网站目标的确定：建立网站的首要问题就是要明白为什么要建立网站，本系统是根据社会发展趋势，结合人们需求而建立的专业的寻找丢失儿童的网站。另外，还应该知道谁是网站将来的访问者。[2]本系统是针对寻找丢失儿童而设计的，因此本网站的主要访问者为寻找孩子的父母、寻亲的孩子以及志愿帮助他们寻亲的爱心人士。

2）网站主题的确定：赋予网站生命的关键一步就是确定网站主题。本系统的主题就是：帮助失踪的孩子找到家，帮助丢失孩子的家庭重获团圆，崇尚家庭关爱、构建和谐社会。

2.1.2 网站的规划

网站的规划包括总体结构的位置、目录的设置和连接结构的设置[2]。

1）网站总体结构的确立：网站总体结构的确立是网站设计能否成功的关键所在。该站总体结构的规划过程是：先用树状结构将每个页面的大纲列出，然后考虑各方面的扩充，一一添加，进而确定采用图文并茂，对称式的总体结构。

2）网站目录的设置：网站目录结构的好坏对浏览者没有影响，但对于一个新站来说提交网址到分类目录站点是一项非常重要的工作。因此设计好目录结构，是项目负责人员的首要任务之一。

3）网站链接结构的设置：网站链接结构是建立在目录结构之上，又可以跨越目录的页面之间的连接的拓扑。考虑网站链接结构的目的在于：用最少的链接，使浏览最有效果。[2]

建立网站链接结构一般有两种基本方式：星状结构和树状结构。前者是一对多形式的链接方式，其优点是浏览方便；缺点是用户面对太多的链接，很容易迷失自己的位置。后者则是一对一的链接方式，其优点是页面级别明确，条理清晰；其缺点则是浏览效率低。

综合两种方式的优缺点，本网站设计中，将二者混合：首页和一级页面之间用星状结构，一级页面和二级页面之间用树状结构。具体链接结构设计图如图1、图2所示。

2.1.3网站素材的准备

空洞的网站对人没有任何吸引力[2]，为了丰富网页内容，需要项目负责人在设计好网站的整体框架之后，准备对网站可能有用的素材。网站素材的准备工作包括搜集、整理加工、制作和存储等环节。本网站素材准备过程是：一方面先借助图书、互联网获取可能有用的信息，然后由专门负责该项工作的人员负责筛选、加工處理；另一方面负责制作材料的人员进行自制材料，自制材料包括文字内容及图片按钮两大类。本网站设计过程中，采用传统的导航，传统的选项卡设计方式。网站采用了典型的圆角选项卡，但灵动之处是每个选项卡颜色不一，绚丽的效果、精巧的图标，使得网站上的选项卡从传统模式脱胎换骨。这里需要说明的是网页中使用的各种元素需要事先存放站点相应的文件夹内[4]。

2.1.4 网站制作工具的选择

尽管工具的选择不会影响网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。[2]本系统根据以上三点的设计与构思选择了用PhotoShop CS5来加工制作按钮，背景图等素材；选择Microsoft Visual Studio 2010、Dreamwear来是实现网页的制作。

2.1.5 网站的建立

主题明确了，素材選择并制作好了，工具也选择好了，接下来的过程复杂而细致。建立网站的大致步骤是：首先用Dreamwaver建立界面，然后建立vs网站项目，之后建立数据库，根据E-R图建立表与索引。接下来建立WebForm界面，把Dreamwaver建立界面放进去进行修改，然后操作WebForm界面后台cs文件进行数据库操作与其他操作。

2.2 网页设计注意事项：整体布局的设计

网页设计最基础、最重要的工作之一有一项便是网页的版面设计。首先，设计者组织网站内容时一般会把内容分类放入不同的容器[5]。本网站的版面设计也不例外，3这个数字可以完成此网站的所有工作，版面设计中，首页采用横向三个模块，纵向三个模块，二级、三级页面采用横向三个模块。如此整体布局，进而细化每个模块：首页横向三个模块分别设立导航标签、丢失儿童照片、成功案例；纵向三个模块分别设立主要信息之外的检索、注册等。二级、三级页面的模块分别设立导航、详细信息、友情链接。其次，对于视觉语言——网页来说，布局与内容的成功结合，是网站受欢迎的最直接因素。本系统网页布局设计充分利用版面，信息量大，加上特别留意的空白量，使得页面整齐又不拥挤。活动的照片克服了这种设计原本单板的缺点，使界面充实又不失活泼。如此，通过文字图形的空间组合，表达出和谐与美，进而体现网站的主题：帮助社会寻找丢失儿童，传播爱心，构建和谐社会。本网站的整体布局设计如图3、图4所示。

3 结束语

“宝贝回家计划”丢失儿童在线寻找系统，是一个服务大众的系统，本网站的设计原则，规划宗旨都依据这一真谛进行的。本文全面阐述了该网站的初次规划及制作过程，本网站目的明确、主题鲜明、从各方面深入考虑以满足客户需求，是一个具有专业性、公益性的人性化网站。但由于是初步设计制作。在性能模块、色彩设计等方面还存在欠缺，项目负责人正在进行改进。

[参考文献]

[1]李润红，吕霄.如何做好网站开发项目需求分析[J].中国科技信息，2006，（2）：1.

[2]杨选辉.《网页设计与制作教程》[M].北京：清华大学出版社，2008.

[3]http：//baike.baidu.com/view/2950556.htm？fromId=3433001，2013.11.06.

[4]夏东盛.《网站设计与开发案例教程》[M].天津：天津大学出版社，2001：3.

[5]Patrick McNeil，著，图灵编辑部，译.《The Web DesignerIdea Book》[M].北京：人民邮电出版社，2010：227.