徐福麗 殷嬌嬌 時(shí)艷琰
摘 要:寶貝回家計(jì)劃是一個(gè)綜合了信息發(fā)布、在線咨詢等多功能瀏覽的在線尋人網(wǎng)站,是服務(wù)于大眾的,因此網(wǎng)站的設(shè)計(jì)理念是:友好、交互、有效。本網(wǎng)站在vs2010開發(fā)環(huán)境下設(shè)計(jì),不僅到考慮客戶需求,而且在網(wǎng)站的外觀設(shè)計(jì)方面,綜合考慮網(wǎng)站的設(shè)計(jì)流程、網(wǎng)頁的布局等因素。使得網(wǎng)站的性能與外觀感受能夠相得益彰。
關(guān)鍵詞:在線網(wǎng)站;需求;外觀;性能
1 系統(tǒng)開發(fā)分析
1.1 背景分析
由于當(dāng)今社會(huì)法制并不是十分完善,拐賣、遺棄兒童的現(xiàn)象依然存在,但是通過警方或個(gè)人的力量不能夠完善尋找丟失兒童的工作;而今隨著科學(xué)技術(shù)的發(fā)展,社會(huì)已進(jìn)入信息時(shí)代。在“以速度求生存,以質(zhì)量求發(fā)展”的信息時(shí)代,互聯(lián)網(wǎng)是信息傳播的最佳通道,它開闊了我們了解世界的眼界,縮小了人與人之間的距離,這就更容易使我們走上信息化的道路。
以往,人們尋找人或物都以口頭宣傳、張貼啟示、人力搜索等方法,現(xiàn)如今,越來越多的人意識到傳統(tǒng)的尋人方法不僅慢,而且被諸多無可避免的因素(例如個(gè)人能力、公關(guān)機(jī)構(gòu)管轄范圍等)所制約。在線尋找網(wǎng)站客服了這些缺點(diǎn)、限制,滿足了人們的需求,使人們可以隨時(shí)了解自己想知道的各地發(fā)布的丟失兒童消息,能夠幫助人們在保證自己正常生活的前提下,尋找自己的親人。把人與互聯(lián)網(wǎng)連接起來,是信息時(shí)代發(fā)展的方向之一。
1.2 網(wǎng)站開發(fā)項(xiàng)目需求分析
明確項(xiàng)目開發(fā)需求是設(shè)計(jì)項(xiàng)目所有工作之前必須做到的,一個(gè)網(wǎng)站項(xiàng)目的主導(dǎo)需求是客戶需求。項(xiàng)目的負(fù)責(zé)人必須面對不同知識層面的客戶來進(jìn)行網(wǎng)站開發(fā)。因此如何更好地的了解、分析、明確用戶需求,如何保證開發(fā)過程按照滿足用戶需求的方向正確進(jìn)行,是每個(gè)網(wǎng)站開發(fā)項(xiàng)目管理者需要面對的問題。[1]因而,本項(xiàng)目利用計(jì)算機(jī)專業(yè)知識,通過建立專門的網(wǎng)站,對尋人信息進(jìn)行搜集、整理與發(fā)布,以幫助更多的家庭早日團(tuán)聚,也為更多愛心人士提供了奉獻(xiàn)平臺?;趯I(yè)網(wǎng)站內(nèi)的多種溝通途徑,如論壇、BBS等,不僅有利于尋人信息的傳播,而且還有助于將這種愛心傳遞。
1.3 使用軟件
Microsoft Visual Studio是目前最流行的由微軟推出Windows平臺應(yīng)用程序開發(fā)環(huán)境。Visual Studio 2010 支持開發(fā)面向Windows 7的應(yīng)用程序。它支持Microsoft SQL Server,IBM DB2和Oracle數(shù)據(jù)庫,還支持C#、C++、VB語言[3]。
1.4 軟件運(yùn)行環(huán)境
Visual Studio是一款完整的開發(fā)工具集,可以在Win7/WinXP中安全運(yùn)行。
2 網(wǎng)站制作
2.1 網(wǎng)站的建設(shè)步驟
在做本網(wǎng)站之前,結(jié)合系統(tǒng)開發(fā)分析,確定了做網(wǎng)頁的五個(gè)步驟。
2.1.1 確定網(wǎng)站目標(biāo)與主題
1)網(wǎng)站目標(biāo)的確定:建立網(wǎng)站的首要問題就是要明白為什么要建立網(wǎng)站,本系統(tǒng)是根據(jù)社會(huì)發(fā)展趨勢,結(jié)合人們需求而建立的專業(yè)的尋找丟失兒童的網(wǎng)站。另外,還應(yīng)該知道誰是網(wǎng)站將來的訪問者。[2]本系統(tǒng)是針對尋找丟失兒童而設(shè)計(jì)的,因此本網(wǎng)站的主要訪問者為尋找孩子的父母、尋親的孩子以及志愿幫助他們尋親的愛心人士。
2)網(wǎng)站主題的確定:賦予網(wǎng)站生命的關(guān)鍵一步就是確定網(wǎng)站主題。本系統(tǒng)的主題就是:幫助失蹤的孩子找到家,幫助丟失孩子的家庭重獲團(tuán)圓,崇尚家庭關(guān)愛、構(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ī)劃過程是:先用樹狀結(jié)構(gòu)將每個(gè)頁面的大綱列出,然后考慮各方面的擴(kuò)充,一一添加,進(jìn)而確定采用圖文并茂,對稱式的總體結(jié)構(gòu)。
2)網(wǎng)站目錄的設(shè)置:網(wǎng)站目錄結(jié)構(gòu)的好壞對瀏覽者沒有影響,但對于一個(gè)新站來說提交網(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)之上,又可以跨越目錄的頁面之間的連接的拓?fù)?。考慮網(wǎng)站鏈接結(jié)構(gòu)的目的在于:用最少的鏈接,使瀏覽最有效果。[2]
建立網(wǎng)站鏈接結(jié)構(gòu)一般有兩種基本方式:星狀結(jié)構(gòu)和樹狀結(jié)構(gòu)。前者是一對多形式的鏈接方式,其優(yōu)點(diǎn)是瀏覽方便;缺點(diǎn)是用戶面對太多的鏈接,很容易迷失自己的位置。后者則是一對一的鏈接方式,其優(yōu)點(diǎn)是頁面級別明確,條理清晰;其缺點(diǎn)則是瀏覽效率低。
綜合兩種方式的優(yōu)缺點(diǎn),本網(wǎng)站設(shè)計(jì)中,將二者混合:首頁和一級頁面之間用星狀結(jié)構(gòu),一級頁面和二級頁面之間用樹狀結(jié)構(gòu)。具體鏈接結(jié)構(gòu)設(shè)計(jì)圖如圖1、圖2所示。
2.1.3網(wǎng)站素材的準(zhǔn)備
空洞的網(wǎng)站對人沒有任何吸引力[2],為了豐富網(wǎng)頁內(nèi)容,需要項(xiàng)目負(fù)責(zé)人在設(shè)計(jì)好網(wǎng)站的整體框架之后,準(zhǔn)備對網(wǎng)站可能有用的素材。網(wǎng)站素材的準(zhǔn)備工作包括搜集、整理加工、制作和存儲等環(huán)節(jié)。本網(wǎng)站素材準(zhǔn)備過程是:一方面先借助圖書、互聯(lián)網(wǎng)獲取可能有用的信息,然后由專門負(fù)責(zé)該項(xiàng)工作的人員負(fù)責(zé)篩選、加工處理;另一方面負(fù)責(zé)制作材料的人員進(jìn)行自制材料,自制材料包括文字內(nèi)容及圖片按鈕兩大類。本網(wǎng)站設(shè)計(jì)過程中,采用傳統(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)模式脫胎換骨。這里需要說明的是網(wǎng)頁中使用的各種元素需要事先存放站點(diǎn)相應(yīng)的文件夾內(nèi)[4]。
2.1.4 網(wǎng)站制作工具的選擇
盡管工具的選擇不會(huì)影響網(wǎng)頁的好壞,但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。[2]本系統(tǒng)根據(jù)以上三點(diǎn)的設(shè)計(jì)與構(gòu)思選擇了用PhotoShop CS5來加工制作按鈕,背景圖等素材;選擇Microsoft Visual Studio 2010、Dreamwear來是實(shí)現(xiàn)網(wǎng)頁的制作。
2.1.5 網(wǎng)站的建立
主題明確了,素材選擇并制作好了,工具也選擇好了,接下來的過程復(fù)雜而細(xì)致。建立網(wǎng)站的大致步驟是:首先用Dreamwaver建立界面,然后建立vs網(wǎng)站項(xiàng)目,之后建立數(shù)據(jù)庫,根據(jù)E-R圖建立表與索引。接下來建立WebForm界面,把Dreamwaver建立界面放進(jìn)去進(jìn)行修改,然后操作WebForm界面后臺cs文件進(jìn)行數(shù)據(jù)庫操作與其他操作。
2.2 網(wǎng)頁設(shè)計(jì)注意事項(xiàng):整體布局的設(shè)計(jì)
網(wǎng)頁設(shè)計(jì)最基礎(chǔ)、最重要的工作之一有一項(xiàng)便是網(wǎng)頁的版面設(shè)計(jì)。首先,設(shè)計(jì)者組織網(wǎng)站內(nèi)容時(shí)一般會(huì)把內(nèi)容分類放入不同的容器[5]。本網(wǎng)站的版面設(shè)計(jì)也不例外,3這個(gè)數(shù)字可以完成此網(wǎng)站的所有工作,版面設(shè)計(jì)中,首頁采用橫向三個(gè)模塊,縱向三個(gè)模塊,二級、三級頁面采用橫向三個(gè)模塊。如此整體布局,進(jìn)而細(xì)化每個(gè)模塊:首頁橫向三個(gè)模塊分別設(shè)立導(dǎo)航標(biāo)簽、丟失兒童照片、成功案例;縱向三個(gè)模塊分別設(shè)立主要信息之外的檢索、注冊等。二級、三級頁面的模塊分別設(shè)立導(dǎo)航、詳細(xì)信息、友情鏈接。其次,對于視覺語言——網(wǎng)頁來說,布局與內(nèi)容的成功結(jié)合,是網(wǎng)站受歡迎的最直接因素。本系統(tǒng)網(wǎng)頁布局設(shè)計(jì)充分利用版面,信息量大,加上特別留意的空白量,使得頁面整齊又不擁擠?;顒?dòng)的照片克服了這種設(shè)計(jì)原本單板的缺點(diǎn),使界面充實(shí)又不失活潑。如此,通過文字圖形的空間組合,表達(dá)出和諧與美,進(jìn)而體現(xiàn)網(wǎng)站的主題:幫助社會(huì)尋找丟失兒童,傳播愛心,構(gòu)建和諧社會(huì)。本網(wǎng)站的整體布局設(shè)計(jì)如圖3、圖4所示。
3 結(jié)束語
“寶貝回家計(jì)劃”丟失兒童在線尋找系統(tǒng),是一個(gè)服務(wù)大眾的系統(tǒng),本網(wǎng)站的設(shè)計(jì)原則,規(guī)劃宗旨都依據(jù)這一真諦進(jìn)行的。本文全面闡述了該網(wǎng)站的初次規(guī)劃及制作過程,本網(wǎng)站目的明確、主題鮮明、從各方面深入考慮以滿足客戶需求,是一個(gè)具有專業(yè)性、公益性的人性化網(wǎng)站。但由于是初步設(shè)計(jì)制作。在性能模塊、色彩設(shè)計(jì)等方面還存在欠缺,項(xiàng)目負(fù)責(zé)人正在進(jìn)行改進(jìn)。
[參考文獻(xiàn)]
[1]李潤紅,呂霄.如何做好網(wǎng)站開發(fā)項(xiàng)目需求分析[J].中國科技信息,2006,(2):1.
[2]楊選輝.《網(wǎng)頁設(shè)計(jì)與制作教程》[M].北京:清華大學(xué)出版社,2008.
[3]http://baike.baidu.com/view/2950556.htm?fromId=3433001,2013.11.06.
[4]夏東盛.《網(wǎng)站設(shè)計(jì)與開發(fā)案例教程》[M].天津:天津大學(xué)出版社,2001:3.
[5]Patrick McNeil,著,圖靈編輯部,譯.《The Web DesignerIdea Book》[M].北京:人民郵電出版社,2010:227.