徐福麗　殷嬌嬌　時艷琰

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

關鍵詞：在線網站；需求；外觀；性能

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

1.1 背景分析

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

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

1.2 網站開發(fā)項目需求分析

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

1.3 使用軟件

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

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

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

2 網站制作

2.1 網站的建設步驟

在做本網站之前，結合系統(tǒng)開發(fā)分析，確定了做網頁的五個步驟。

2.1.1 確定網站目標與主題

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

2）網站主題的確定：賦予網站生命的關鍵一步就是確定網站主題。本系統(tǒng)的主題就是：幫助失蹤的孩子找到家，幫助丟失孩子的家庭重獲團圓，崇尚家庭關愛、構建和諧社會。

2.1.2 網站的規(guī)劃

網站的規(guī)劃包括總體結構的位置、目錄的設置和連接結構的設置[2]。

1）網站總體結構的確立：網站總體結構的確立是網站設計能否成功的關鍵所在。該站總體結構的規(guī)劃過程是：先用樹狀結構將每個頁面的大綱列出，然后考慮各方面的擴充，一一添加，進而確定采用圖文并茂，對稱式的總體結構。

2）網站目錄的設置：網站目錄結構的好壞對瀏覽者沒有影響，但對于一個新站來說提交網址到分類目錄站點是一項非常重要的工作。因此設計好目錄結構，是項目負責人員的首要任務之一。

3）網站鏈接結構的設置：網站鏈接結構是建立在目錄結構之上，又可以跨越目錄的頁面之間的連接的拓撲?？紤]網站鏈接結構的目的在于：用最少的鏈接，使瀏覽最有效果。[2]

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

綜合兩種方式的優(yōu)缺點，本網站設計中，將二者混合：首頁和一級頁面之間用星狀結構，一級頁面和二級頁面之間用樹狀結構。具體鏈接結構設計圖如圖1、圖2所示。

2.1.3網站素材的準備

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

2.1.4 網站制作工具的選擇

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

2.1.5 網站的建立

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

2.2 網頁設計注意事項：整體布局的設計

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

3 結束語

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

[參考文獻]

[1]李潤紅，呂霄.如何做好網站開發(fā)項目需求分析[J].中國科技信息，2006，（2）：1.

[2]楊選輝.《網頁設計與制作教程》[M].北京：清華大學出版社，2008.

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

[4]夏東盛.《網站設計與開發(fā)案例教程》[M].天津：天津大學出版社，2001：3.

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