《寶貝回家計(jì)劃——丟失兒童在線尋找系統(tǒng)》的設(shè)計(jì)與制作

徐福麗　殷嬌嬌　時(shí)艷琰

摘 要：寶貝回家計(jì)劃是一個(gè)綜合了信息發(fā)布、在線咨詢等多功能瀏覽的在線尋人網(wǎng)站，是服務(wù)于大眾的，因此網(wǎng)站的設(shè)計(jì)理念是：友好、交互、有效。本網(wǎng)站在vs2010開(kāi)發(fā)環(huán)境下設(shè)計(jì)，不僅到考慮客戶需求，而且在網(wǎng)站的外觀設(shè)計(jì)方面，綜合考慮網(wǎng)站的設(shè)計(jì)流程、網(wǎng)頁(yè)的布局等因素。使得網(wǎng)站的性能與外觀感受能夠相得益彰。

關(guān)鍵詞：在線網(wǎng)站；需求；外觀；性能

1 系統(tǒng)開(kāi)發(fā)分析

1.1 背景分析

由于當(dāng)今社會(huì)法制并不是十分完善，拐賣、遺棄兒童的現(xiàn)象依然存在，但是通過(guò)警方或個(gè)人的力量不能夠完善尋找丟失兒童的工作；而今隨著科學(xué)技術(shù)的發(fā)展，社會(huì)已進(jìn)入信息時(shí)代。在“以速度求生存，以質(zhì)量求發(fā)展”的信息時(shí)代，互聯(lián)網(wǎng)是信息傳播的最佳通道，它開(kāi)闊了我們了解世界的眼界，縮小了人與人之間的距離，這就更容易使我們走上信息化的道路。

以往，人們尋找人或物都以口頭宣傳、張貼啟示、人力搜索等方法，現(xiàn)如今，越來(lái)越多的人意識(shí)到傳統(tǒng)的尋人方法不僅慢，而且被諸多無(wú)可避免的因素（例如個(gè)人能力、公關(guān)機(jī)構(gòu)管轄范圍等）所制約。在線尋找網(wǎng)站客服了這些缺點(diǎn)、限制，滿足了人們的需求，使人們可以隨時(shí)了解自己想知道的各地發(fā)布的丟失兒童消息，能夠幫助人們?cè)诒ＷC自己正常生活的前提下，尋找自己的親人。把人與互聯(lián)網(wǎng)連接起來(lái)，是信息時(shí)代發(fā)展的方向之一。

1.2 網(wǎng)站開(kāi)發(fā)項(xiàng)目需求分析

明確項(xiàng)目開(kāi)發(fā)需求是設(shè)計(jì)項(xiàng)目所有工作之前必須做到的，一個(gè)網(wǎng)站項(xiàng)目的主導(dǎo)需求是客戶需求。項(xiàng)目的負(fù)責(zé)人必須面對(duì)不同知識(shí)層面的客戶來(lái)進(jìn)行網(wǎng)站開(kāi)發(fā)。因此如何更好地的了解、分析、明確用戶需求，如何保證開(kāi)發(fā)過(guò)程按照滿足用戶需求的方向正確進(jìn)行，是每個(gè)網(wǎng)站開(kāi)發(fā)項(xiàng)目管理者需要面對(duì)的問(wèn)題。[1]因而，本項(xiàng)目利用計(jì)算機(jī)專業(yè)知識(shí)，通過(guò)建立專門的網(wǎng)站，對(duì)尋人信息進(jìn)行搜集、整理與發(fā)布，以幫助更多的家庭早日?qǐng)F(tuán)聚，也為更多愛(ài)心人士提供了奉獻(xiàn)平臺(tái)?；趯I(yè)網(wǎng)站內(nèi)的多種溝通途徑，如論壇、BBS等，不僅有利于尋人信息的傳播，而且還有助于將這種愛(ài)心傳遞。

1.3 使用軟件

Microsoft Visual Studio是目前最流行的由微軟推出Windows平臺(tái)應(yīng)用程序開(kāi)發(fā)環(huán)境。Visual Studio 2010 支持開(kāi)發(fā)面向Windows 7的應(yīng)用程序。它支持Microsoft SQL Server，IBM DB2和Oracle數(shù)據(jù)庫(kù)，還支持C#、C++、VB語(yǔ)言[3]。

1.4 軟件運(yùn)行環(huán)境

Visual Studio是一款完整的開(kāi)發(fā)工具集，可以在Win7/WinXP中安全運(yùn)行。

2 網(wǎng)站制作

2.1 網(wǎng)站的建設(shè)步驟

在做本網(wǎng)站之前，結(jié)合系統(tǒng)開(kāi)發(fā)分析，確定了做網(wǎng)頁(yè)的五個(gè)步驟。

2.1.1 確定網(wǎng)站目標(biāo)與主題

1）網(wǎng)站目標(biāo)的確定：建立網(wǎng)站的首要問(wèn)題就是要明白為什么要建立網(wǎng)站，本系統(tǒng)是根據(jù)社會(huì)發(fā)展趨勢(shì)，結(jié)合人們需求而建立的專業(yè)的尋找丟失兒童的網(wǎng)站。另外，還應(yīng)該知道誰(shuí)是網(wǎng)站將來(lái)的訪問(wèn)者。[2]本系統(tǒng)是針對(duì)尋找丟失兒童而設(shè)計(jì)的，因此本網(wǎng)站的主要訪問(wèn)者為尋找孩子的父母、尋親的孩子以及志愿幫助他們尋親的愛(ài)心人士。

2）網(wǎng)站主題的確定：賦予網(wǎng)站生命的關(guān)鍵一步就是確定網(wǎng)站主題。本系統(tǒng)的主題就是：幫助失蹤的孩子找到家，幫助丟失孩子的家庭重獲團(tuán)圓，崇尚家庭關(guān)愛(ài)、構(gòu)建和諧社會(huì)。

2.1.2 網(wǎng)站的規(guī)劃

網(wǎng)站的規(guī)劃包括總體結(jié)構(gòu)的位置、目錄的設(shè)置和連接結(jié)構(gòu)的設(shè)置[2]。

1）網(wǎng)站總體結(jié)構(gòu)的確立：網(wǎng)站總體結(jié)構(gòu)的確立是網(wǎng)站設(shè)計(jì)能否成功的關(guān)鍵所在。該站總體結(jié)構(gòu)的規(guī)劃過(guò)程是：先用樹(shù)狀結(jié)構(gòu)將每個(gè)頁(yè)面的大綱列出，然后考慮各方面的擴(kuò)充，一一添加，進(jìn)而確定采用圖文并茂，對(duì)稱式的總體結(jié)構(gòu)。

2）網(wǎng)站目錄的設(shè)置：網(wǎng)站目錄結(jié)構(gòu)的好壞對(duì)瀏覽者沒(méi)有影響，但對(duì)于一個(gè)新站來(lái)說(shuō)提交網(wǎng)址到分類目錄站點(diǎn)是一項(xiàng)非常重要的工作。因此設(shè)計(jì)好目錄結(jié)構(gòu)，是項(xiàng)目負(fù)責(zé)人員的首要任務(wù)之一。

3）網(wǎng)站鏈接結(jié)構(gòu)的設(shè)置：網(wǎng)站鏈接結(jié)構(gòu)是建立在目錄結(jié)構(gòu)之上，又可以跨越目錄的頁(yè)面之間的連接的拓?fù)??？紤]網(wǎng)站鏈接結(jié)構(gòu)的目的在于：用最少的鏈接，使瀏覽最有效果。[2]

建立網(wǎng)站鏈接結(jié)構(gòu)一般有兩種基本方式：星狀結(jié)構(gòu)和樹(shù)狀結(jié)構(gòu)。前者是一對(duì)多形式的鏈接方式，其優(yōu)點(diǎn)是瀏覽方便；缺點(diǎn)是用戶面對(duì)太多的鏈接，很容易迷失自己的位置。后者則是一對(duì)一的鏈接方式，其優(yōu)點(diǎn)是頁(yè)面級(jí)別明確，條理清晰；其缺點(diǎn)則是瀏覽效率低。

綜合兩種方式的優(yōu)缺點(diǎn)，本網(wǎng)站設(shè)計(jì)中，將二者混合：首頁(yè)和一級(jí)頁(yè)面之間用星狀結(jié)構(gòu)，一級(jí)頁(yè)面和二級(jí)頁(yè)面之間用樹(shù)狀結(jié)構(gòu)。具體鏈接結(jié)構(gòu)設(shè)計(jì)圖如圖1、圖2所示。

2.1.3網(wǎng)站素材的準(zhǔn)備

空洞的網(wǎng)站對(duì)人沒(méi)有任何吸引力[2]，為了豐富網(wǎng)頁(yè)內(nèi)容，需要項(xiàng)目負(fù)責(zé)人在設(shè)計(jì)好網(wǎng)站的整體框架之后，準(zhǔn)備對(duì)網(wǎng)站可能有用的素材。網(wǎng)站素材的準(zhǔn)備工作包括搜集、整理加工、制作和存儲(chǔ)等環(huán)節(jié)。本網(wǎng)站素材準(zhǔn)備過(guò)程是：一方面先借助圖書、互聯(lián)網(wǎng)獲取可能有用的信息，然后由專門負(fù)責(zé)該項(xiàng)工作的人員負(fù)責(zé)篩選、加工處理；另一方面負(fù)責(zé)制作材料的人員進(jìn)行自制材料，自制材料包括文字內(nèi)容及圖片按鈕兩大類。本網(wǎng)站設(shè)計(jì)過(guò)程中，采用傳統(tǒng)的導(dǎo)航，傳統(tǒng)的選項(xiàng)卡設(shè)計(jì)方式。網(wǎng)站采用了典型的圓角選項(xiàng)卡，但靈動(dòng)之處是每個(gè)選項(xiàng)卡顏色不一，絢麗的效果、精巧的圖標(biāo)，使得網(wǎng)站上的選項(xiàng)卡從傳統(tǒng)模式脫胎換骨。這里需要說(shuō)明的是網(wǎng)頁(yè)中使用的各種元素需要事先存放站點(diǎn)相應(yīng)的文件夾內(nèi)[4]。

2.1.4 網(wǎng)站制作工具的選擇

盡管工具的選擇不會(huì)影響網(wǎng)頁(yè)的好壞，但是一款功能強(qiáng)大、使用簡(jiǎn)單的軟件往往可以起到事半功倍的效果。[2]本系統(tǒng)根據(jù)以上三點(diǎn)的設(shè)計(jì)與構(gòu)思選擇了用PhotoShop CS5來(lái)加工制作按鈕，背景圖等素材；選擇Microsoft Visual Studio 2010、Dreamwear來(lái)是實(shí)現(xiàn)網(wǎng)頁(yè)的制作。

2.1.5 網(wǎng)站的建立

主題明確了，素材選擇并制作好了，工具也選擇好了，接下來(lái)的過(guò)程復(fù)雜而細(xì)致。建立網(wǎng)站的大致步驟是：首先用Dreamwaver建立界面，然后建立vs網(wǎng)站項(xiàng)目，之后建立數(shù)據(jù)庫(kù)，根據(jù)E-R圖建立表與索引。接下來(lái)建立WebForm界面，把Dreamwaver建立界面放進(jìn)去進(jìn)行修改，然后操作WebForm界面后臺(tái)cs文件進(jìn)行數(shù)據(jù)庫(kù)操作與其他操作。

2.2 網(wǎng)頁(yè)設(shè)計(jì)注意事項(xiàng)：整體布局的設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)最基礎(chǔ)、最重要的工作之一有一項(xiàng)便是網(wǎng)頁(yè)的版面設(shè)計(jì)。首先，設(shè)計(jì)者組織網(wǎng)站內(nèi)容時(shí)一般會(huì)把內(nèi)容分類放入不同的容器[5]。本網(wǎng)站的版面設(shè)計(jì)也不例外，3這個(gè)數(shù)字可以完成此網(wǎng)站的所有工作，版面設(shè)計(jì)中，首頁(yè)采用橫向三個(gè)模塊，縱向三個(gè)模塊，二級(jí)、三級(jí)頁(yè)面采用橫向三個(gè)模塊。如此整體布局，進(jìn)而細(xì)化每個(gè)模塊：首頁(yè)橫向三個(gè)模塊分別設(shè)立導(dǎo)航標(biāo)簽、丟失兒童照片、成功案例；縱向三個(gè)模塊分別設(shè)立主要信息之外的檢索、注冊(cè)等。二級(jí)、三級(jí)頁(yè)面的模塊分別設(shè)立導(dǎo)航、詳細(xì)信息、友情鏈接。其次，對(duì)于視覺(jué)語(yǔ)言——網(wǎng)頁(yè)來(lái)說(shuō)，布局與內(nèi)容的成功結(jié)合，是網(wǎng)站受歡迎的最直接因素。本系統(tǒng)網(wǎng)頁(yè)布局設(shè)計(jì)充分利用版面，信息量大，加上特別留意的空白量，使得頁(yè)面整齊又不擁擠?；顒?dòng)的照片克服了這種設(shè)計(jì)原本單板的缺點(diǎn)，使界面充實(shí)又不失活潑。如此，通過(guò)文字圖形的空間組合，表達(dá)出和諧與美，進(jìn)而體現(xiàn)網(wǎng)站的主題：幫助社會(huì)尋找丟失兒童，傳播愛(ài)心，構(gòu)建和諧社會(huì)。本網(wǎng)站的整體布局設(shè)計(jì)如圖3、圖4所示。

3 結(jié)束語(yǔ)

“寶貝回家計(jì)劃”丟失兒童在線尋找系統(tǒng)，是一個(gè)服務(wù)大眾的系統(tǒng)，本網(wǎng)站的設(shè)計(jì)原則，規(guī)劃宗旨都依據(jù)這一真諦進(jìn)行的。本文全面闡述了該網(wǎng)站的初次規(guī)劃及制作過(guò)程，本網(wǎng)站目的明確、主題鮮明、從各方面深入考慮以滿足客戶需求，是一個(gè)具有專業(yè)性、公益性的人性化網(wǎng)站。但由于是初步設(shè)計(jì)制作。在性能模塊、色彩設(shè)計(jì)等方面還存在欠缺，項(xiàng)目負(fù)責(zé)人正在進(jìn)行改進(jìn)。

[參考文獻(xiàn)]

[1]李潤(rùn)紅，呂霄.如何做好網(wǎng)站開(kāi)發(fā)項(xiàng)目需求分析[J].中國(guó)科技信息，2006，（2）：1.

[2]楊選輝.《網(wǎng)頁(yè)設(shè)計(jì)與制作教程》[M].北京：清華大學(xué)出版社，2008.

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

[4]夏東盛.《網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)案例教程》[M].天津：天津大學(xué)出版社，2001：3.

[5]Patrick McNeil，著，圖靈編輯部，譯.《The Web DesignerIdea Book》[M].北京：人民郵電出版社，2010：227.