小型網(wǎng)上商城的設(shè)計(jì)與實(shí)現(xiàn)摘要本文對(duì)網(wǎng)上購(gòu)物系統(tǒng)的開(kāi)發(fā)過(guò)程作了詳細(xì)的描述，系統(tǒng)是用asp技術(shù)和access2003數(shù)據(jù)庫(kù)技術(shù)進(jìn)行開(kāi)發(fā)的，并且達(dá)到功能明確，費(fèi)用低廉，通用性強(qiáng)，適合我國(guó)國(guó)情的購(gòu)物網(wǎng)站系統(tǒng)。文中著重論述了該系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，并對(duì)關(guān)鍵的技術(shù)作了較詳細(xì)的介紹。本系統(tǒng)共分兩個(gè)部分:前臺(tái)用戶部分和后臺(tái)管理部分。在前臺(tái)系統(tǒng)中有用戶注冊(cè)登陸、瀏覽商品、訂購(gòu)商品、訂單查詢、發(fā)表評(píng)論和留言板。后臺(tái)系統(tǒng)中有系統(tǒng)管理，會(huì)員管理，訂單管理、商品管理、留言管理。在用戶注冊(cè)模塊中，特別加強(qiáng)了用戶注冊(cè)信息驗(yàn)證的嚴(yán)格性；在商品或商家信息瀏覽和查詢模塊中，用戶可以對(duì)商品進(jìn)行瀏覽檢索，查看商品的詳細(xì)資料；并且規(guī)定注冊(cè)成會(huì)員的用戶才能對(duì)商品進(jìn)行評(píng)論。沒(méi)有注冊(cè)成會(huì)員的用戶只能瀏覽商品。在后臺(tái)系統(tǒng)中，系統(tǒng)管理員可以對(duì)已注冊(cè)的用戶進(jìn)行審查，并對(duì)提交的訂單進(jìn)行處理；可以對(duì)現(xiàn)有的商品進(jìn)行管理以及對(duì)留言進(jìn)行管理。整個(gè)系統(tǒng)結(jié)構(gòu)清晰，功能明確，頁(yè)面風(fēng)格鮮明，易操作，適合客戶的需要。使交易能夠更加方便和快捷。關(guān)鍵詞網(wǎng)上購(gòu)物;ASP;access2003數(shù)據(jù)庫(kù)DesignandImplementationofOnlineShoppingMallAbstractThisarticlethroughdetaileddescriptionfordevelopmentoftheonlineshoppingsystem.ThesystemisbasedonASPandAccess2003Databasedevelopmenttechnology,bythetimeachievedfunctionformidable,theexpenseisinexpensive,versatile,suitsourcountrynationalconditiontheshoppingwebsitesystem.Inthearticleelaboratedonemphaticallythissystemfunctionandtherealization.Andhasmadethedetailedintroductiontothekeyrelatedtechnology.Thesystemincludestwomoduleswhicharetheforegroundsystemandthebackgroundsystem.Intheforegroundofmysystem,Thereareusersregisteringandlogin,querymerchandise,ordermerchandise,orderedquery,makecommentsandmessageboards.Inthebackgroundsystem,therearesystemmanagement,membershipmanagement,ordersmanagement,productmanagement,messagemanagement.Inthemoduleofusersregistering,inparticular,Istrengthentheuserregistrationinformationtothestrictcertification;inthemoduleofbrowsingandqueryingcommodityorbusinessinformation,userscanbrowseandsearchforproducts,viewsproductsandthebusinessdetails.Inthebackgroundsystem,thesystemadministratorhastobearegisteredusertoreviewandsubmitordersforprocessing;thesystemadministratoralsocanmanageexistingproducts,transportingwaysandcustomersmail.Theentiresystemstructureisclear,unambiguous,pagestyleclear,easy-to-operate,suitablefortheneedsofcustomers,thusenablingtorealizeonlinetradeandmakingthetrademoreconvenient.Keywordsshoppingonline;ASP;access2003database目錄摘要 IAbstract II目錄 III第1章緒論 1第2章系統(tǒng)開(kāi)發(fā)及運(yùn)行平臺(tái) 22.1選擇ASP的原因 22.2Access2003簡(jiǎn)介 32.3開(kāi)發(fā)環(huán)境介紹 4第3章需求分析 5可行性分析 53.1.1技術(shù)可行性 53.1.2經(jīng)濟(jì)可行性 53.2需求說(shuō)明 53.2.1性能需求 63.2.2功能需求 6第4章系統(tǒng)的總體設(shè)計(jì) 74.1系統(tǒng)總體結(jié)構(gòu)圖 94.2網(wǎng)站流程圖 9數(shù)據(jù)庫(kù)設(shè)計(jì) 114.3.1數(shù)據(jù)庫(kù)需求分析 11數(shù)據(jù)表結(jié)構(gòu)的詳細(xì)設(shè)計(jì) 11第5章系統(tǒng)功能模塊設(shè)計(jì) 145.1前臺(tái)首頁(yè)布局 145.1.1前臺(tái)首頁(yè)的設(shè)計(jì) 145.1.2用戶注冊(cè)模塊設(shè)計(jì) 165.1.3用戶登錄模塊設(shè)計(jì) 185.1.4購(gòu)物車界面 215.1.5我的訂單界面 225.2后臺(tái)首頁(yè)設(shè)計(jì) 235.2.1系統(tǒng)管理模塊 245.2.2會(huì)員管理模塊 245.2.3類別管理模塊 255.2.4訂單管理模塊 255.2.5商品管理模塊 255.2.6留言管理模塊 26結(jié)論 27致謝 28參考文獻(xiàn) 29附錄A譯文 30可視化組織 30附錄B外文原文 35

第1章緒論傳統(tǒng)購(gòu)物已經(jīng)不能滿足人們?nèi)找嬖鲩L(zhǎng)的需求，傳統(tǒng)購(gòu)物受到商店?duì)I業(yè)面積的限制，想買到所有想買的東西，要逛好幾家商店才有可能買到，浪費(fèi)很多時(shí)間和精力。而且大多消費(fèi)者受到營(yíng)業(yè)時(shí)間的限制，不能隨時(shí)隨地的買東西。傳統(tǒng)商店的店鋪費(fèi)，代理費(fèi)以及其它相關(guān)費(fèi)用，可能使得商品的的銷售價(jià)格變?yōu)樵瓉?lái)成本價(jià)格的2倍可能更多。隨著互聯(lián)網(wǎng)的不斷發(fā)展，網(wǎng)絡(luò)已日益成為收集提供信息的最佳渠道并進(jìn)入傳統(tǒng)的流通領(lǐng)域。為了解決傳統(tǒng)購(gòu)物的一些問(wèn)題,一種全新的購(gòu)物理念開(kāi)始形成并逐步發(fā)展。本文講述了小型網(wǎng)上商城購(gòu)物系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)的全過(guò)程，向消費(fèi)者展示出一種新穎的購(gòu)物理念。網(wǎng)絡(luò)商店中的商品種類多，沒(méi)有商店?duì)I業(yè)面積限制。它可以包含國(guó)內(nèi)外的各種產(chǎn)品，充分體現(xiàn)了網(wǎng)絡(luò)無(wú)地域的優(yōu)勢(shì)。網(wǎng)絡(luò)購(gòu)物沒(méi)有任何時(shí)間限制。作為網(wǎng)絡(luò)商店，它可以24小時(shí)對(duì)客戶開(kāi)放，只要用戶在需要的時(shí)間登錄網(wǎng)站，就可以挑選自己需要的商品。購(gòu)物成本低。對(duì)于網(wǎng)絡(luò)商品購(gòu)買者，他們挑選、對(duì)比各家的商品，只要登錄不同的網(wǎng)站，或是選擇不同的頻道就可以在很短時(shí)間內(nèi)完成，而且可以直接由商家負(fù)責(zé)送達(dá)，免去了傳統(tǒng)購(gòu)物中舟車勞頓的辛苦，時(shí)間和費(fèi)用成本大幅降低。網(wǎng)上購(gòu)物是一種具有交互功能的商業(yè)信息系統(tǒng)。它向用戶提供靜態(tài)和動(dòng)態(tài)兩類信息資源。所謂靜態(tài)信息是指那些不經(jīng)常變動(dòng)或更新的資源，動(dòng)態(tài)信息是指隨時(shí)變化的信息，如商品報(bào)價(jià)，商品類別等。網(wǎng)上購(gòu)物系統(tǒng)具有強(qiáng)大的交互功能，可使商家和用戶方便的傳遞信息，完成電子貿(mào)易。網(wǎng)上購(gòu)物系統(tǒng)不僅要有漂亮的網(wǎng)頁(yè)，更要有嚴(yán)謹(jǐn)?shù)囊?guī)劃，注重每一個(gè)細(xì)小的環(huán)節(jié)。這樣才能使得在電子交易時(shí)避免不必要錯(cuò)誤發(fā)生。本文使用ASP技術(shù)來(lái)編輯網(wǎng)頁(yè)，運(yùn)用ACCESS技術(shù)把數(shù)據(jù)庫(kù)和動(dòng)態(tài)網(wǎng)頁(yè)相關(guān)聯(lián)。傳統(tǒng)的管理信息系統(tǒng)信息獲取方法是由專業(yè)文字錄入人員將信息輸入到管理系統(tǒng)的數(shù)據(jù)庫(kù)中,這種方法在數(shù)據(jù)量不大時(shí)有很多的應(yīng)用場(chǎng)合。當(dāng)數(shù)據(jù)量比較大,并且有較強(qiáng)的專業(yè)性時(shí),錄入的費(fèi)用和出錯(cuò)的可能性都相應(yīng)上升。本設(shè)計(jì)在實(shí)際應(yīng)用中的解決方案是建立網(wǎng)站,以及自己的數(shù)據(jù)庫(kù)，使得所需商品信息可以及時(shí)的保存、更新，可以更好的及時(shí)了解商品買賣的情況。

第2章系統(tǒng)開(kāi)發(fā)及運(yùn)行平臺(tái)選擇ASP的原因ASP（ActiveServerPages動(dòng)態(tài)網(wǎng)頁(yè)）是微軟公司推出的一種用以取代CGI（CommonGatewayInterface通用網(wǎng)關(guān)接口）的技術(shù)。通過(guò)ASP我們可以結(jié)合HTML網(wǎng)頁(yè)、腳本語(yǔ)言和ActiveX元件建立動(dòng)態(tài)、交互且高效的WEB服務(wù)器應(yīng)用程序。有了ASP你就不必?fù)?dān)心客戶的瀏覽器是否能運(yùn)行你所編寫(xiě)的代碼，因?yàn)樗械某绦蚨紝⒃诜?wù)器端執(zhí)行，包括所有嵌在普通HTML中的腳本程序。當(dāng)程序執(zhí)行完畢后，服務(wù)器僅將執(zhí)行的結(jié)果返回給客戶瀏覽器，這樣也就減輕了客戶端瀏覽器的負(fù)擔(dān)，大大提高了交互的速度。以下闡述了ASP的幾個(gè)特點(diǎn)1.ASP使用簡(jiǎn)單，容易學(xué)習(xí)。使用VBScript、JavaScript等簡(jiǎn)單易懂的腳本語(yǔ)言，結(jié)合HTML代碼，即可快速地完成網(wǎng)站的應(yīng)用程序。當(dāng)你安裝ASP時(shí)，系統(tǒng)提供了兩種腳本語(yǔ)言：VBsrcipt和Jscript，而VBscript則被作為系統(tǒng)默認(rèn)的腳本語(yǔ)言。你也可以根據(jù)自己的喜好改變系統(tǒng)默認(rèn)的腳本語(yǔ)言。2.無(wú)須編譯，可在服務(wù)器端直接執(zhí)行。當(dāng)執(zhí)行ASP程序時(shí)，腳本程序?qū)⒁徽酌畎l(fā)送給腳本解釋器(即腳本引擎)，由腳本解釋器進(jìn)行翻譯并將其轉(zhuǎn)換成服務(wù)器所能執(zhí)行的命令。3.使用普通的文本編輯器，如Windows的記事本，即可進(jìn)行編輯設(shè)計(jì)。4.ASP使用的ActiveX技術(shù)基于開(kāi)放設(shè)計(jì)環(huán)境，用戶可以自己定義和制作組件加入其中，使自己的動(dòng)態(tài)網(wǎng)頁(yè)具有無(wú)限的擴(kuò)充能力，這是傳統(tǒng)的CGI等程序所遠(yuǎn)遠(yuǎn)不及的地方。使用ASP還有個(gè)好處，就是在于ASP可通過(guò)ADO（ActiveDataObject）方便的訪問(wèn)數(shù)據(jù)庫(kù)。5.ASP的源程序，不會(huì)被傳到客戶瀏覽器，因而可以避免所寫(xiě)的源程序被他人剽竊，也提高了程序的安全性。如果使用VB、C++或JAVA等編程語(yǔ)言開(kāi)發(fā)過(guò)后端Web應(yīng)用程序，將會(huì)發(fā)現(xiàn)ASP是用于創(chuàng)建Web應(yīng)用程序的靈活而快速的方法。除了添加腳本為應(yīng)用程序創(chuàng)建迷人的HTML界面外，還可以建立自己的COM組件。可以將應(yīng)用程序的商業(yè)邏輯封裝在可重復(fù)使用的模塊中，以便在腳本、其他組件或其他程序中調(diào)用[1]。2.2Access2003簡(jiǎn)介該系統(tǒng)是在WindowsXP下開(kāi)發(fā)的，后臺(tái)數(shù)據(jù)庫(kù)使用的是Access2003。Access2003以其簡(jiǎn)單易用的特點(diǎn)，逐漸成為辦公領(lǐng)域流行的數(shù)據(jù)庫(kù)軟件。使用Access2003，用戶不需要進(jìn)行專業(yè)程序設(shè)計(jì)能力培養(yǎng)，就可在較短的時(shí)間內(nèi)通過(guò)簡(jiǎn)單直觀的可視化操作（操作向?qū)В┩瓿纱蟛糠值臄?shù)據(jù)管理任務(wù)，設(shè)計(jì)出功能強(qiáng)大的數(shù)據(jù)庫(kù)管理程序。即使要開(kāi)發(fā)復(fù)雜或?qū)I(yè)的數(shù)據(jù)庫(kù)管理程序，也只需編寫(xiě)少量的程序代碼。Access2003是微軟公司開(kāi)發(fā)的基于Windows平臺(tái)的小型數(shù)據(jù)庫(kù)管理系統(tǒng)，是Office2003的組件之一。它承襲了舊版本Access的各項(xiàng)優(yōu)點(diǎn)，又新增和完善了數(shù)據(jù)訪問(wèn)頁(yè)、個(gè)性化菜單、internet/intranet、編程、安全保密等功能[8]。數(shù)據(jù)庫(kù)管理系統(tǒng)DBMS（DataBaseManagementSystem），它是允許用戶對(duì)數(shù)據(jù)庫(kù)進(jìn)行創(chuàng)建、修改，并可以對(duì)數(shù)據(jù)庫(kù)內(nèi)的數(shù)據(jù)進(jìn)行加工處理，生成各種報(bào)表的軟件系統(tǒng)。用戶使用數(shù)據(jù)庫(kù)的命令、執(zhí)行數(shù)據(jù)庫(kù)應(yīng)用程序都需要通過(guò)數(shù)據(jù)庫(kù)管理系統(tǒng)來(lái)完成。Access2003就是可以完成上述任務(wù)的一個(gè)流行的數(shù)據(jù)庫(kù)管理系統(tǒng)[9]。關(guān)系型數(shù)據(jù)庫(kù)系統(tǒng)RDBMS（RelationDataBaseManagementSystem）它是以數(shù)據(jù)的關(guān)系模型為基礎(chǔ)，根據(jù)自己定義的關(guān)系來(lái)存儲(chǔ)、處理和管理數(shù)據(jù)庫(kù)信息的系統(tǒng)[10]。Access2003數(shù)據(jù)庫(kù)是一個(gè)典型的關(guān)系型數(shù)據(jù)庫(kù)。用戶在使用Access2003時(shí)，可以為每一種類型的信息創(chuàng)建一個(gè)表，將數(shù)據(jù)分別存放在自己創(chuàng)建的表中,并建立起表與表之間的關(guān)系；然后使用查詢，從一個(gè)或多個(gè)表中查找符合條件的數(shù)據(jù)；使用窗體，編輯表中的數(shù)據(jù)；使用報(bào)表，分析、匯總表中的數(shù)據(jù)，并可以根據(jù)實(shí)際的需要將所需的數(shù)據(jù)打印出來(lái)；利用數(shù)據(jù)訪問(wèn)頁(yè)，查看、編輯WEB頁(yè)；使用宏，自動(dòng)完成事先定義好的一系列操作；通過(guò)嵌入模塊，采用VisualBasic語(yǔ)言編寫(xiě)一段程序代碼來(lái)實(shí)現(xiàn)一些復(fù)雜功能，在Access2003上開(kāi)發(fā)出功能更完善的數(shù)據(jù)庫(kù)管理程序[8]。Access是一個(gè)面向?qū)ο蟮?、采用事件?qū)動(dòng)機(jī)制的小型關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)。在Access中，用戶可以根據(jù)實(shí)際需要對(duì)數(shù)據(jù)進(jìn)行分類，然后使用表對(duì)象分別存儲(chǔ)每一種類型的數(shù)據(jù)，并建立起不同類型數(shù)據(jù)之間的關(guān)系，供報(bào)表使用。此時(shí)，每條信息僅在一處存放，減少了冗余數(shù)據(jù)的產(chǎn)生，節(jié)省了寶貴的存儲(chǔ)空間，同時(shí)也加快了更新數(shù)據(jù)的速度。在Access數(shù)據(jù)庫(kù)中，任何有名字的事物都可以稱之為對(duì)象。Access使用了與Windows一致的風(fēng)格，采取面向?qū)ο蟮姆绞剑瓿蓴?shù)據(jù)庫(kù)的各種功能。極大地簡(jiǎn)化了用戶的開(kāi)發(fā)工作。針對(duì)用戶在實(shí)際應(yīng)用中的需求，Access數(shù)據(jù)庫(kù)提供了表、查詢、窗體、報(bào)表、頁(yè)、宏和模塊等七個(gè)對(duì)象，用于收集、存儲(chǔ)和操作各種不同的信息。為了便于使用，Access的每個(gè)對(duì)象都為用戶提供了設(shè)計(jì)器和生成向?qū)?。用戶可以在設(shè)計(jì)器中設(shè)計(jì)生成對(duì)象，或?qū)ι傻膶?duì)象進(jìn)行編輯；用戶也可通過(guò)生成向?qū)Х奖憧焖俚纳梢粋€(gè)完備的對(duì)象。2.3開(kāi)發(fā)環(huán)境介紹操作系統(tǒng)：WindowsXPIIS5.1（InternetInformationServer5.1）腳本語(yǔ)言：JavaScript數(shù)據(jù)庫(kù)工具：MicrosoftAccess2003瀏覽器：IE6.0基于B/S結(jié)構(gòu)第3章需求分析可行性分析計(jì)算機(jī)網(wǎng)絡(luò)作為一種先進(jìn)的信息傳輸媒體，有著信息傳送速度快、信息覆蓋面廣、成本低的特點(diǎn)。因此，很多個(gè)人或企業(yè)都開(kāi)始利用網(wǎng)絡(luò)開(kāi)展商務(wù)活動(dòng)，可以看到，在個(gè)人或者企業(yè)進(jìn)行網(wǎng)上商業(yè)活動(dòng)時(shí)產(chǎn)生的效益是多方面的。但是，開(kāi)發(fā)任何一個(gè)基于計(jì)算機(jī)的系統(tǒng)，都會(huì)受到時(shí)間和資源上的限制。因此，對(duì)在接受任何一個(gè)項(xiàng)目開(kāi)發(fā)任務(wù)之前，必須根據(jù)客戶可能提供的時(shí)間和資源條件進(jìn)行可行性分析，以減少項(xiàng)目的開(kāi)發(fā)風(fēng)險(xiǎn)，避免人力、財(cái)力和物力的浪費(fèi)。可行性分析與風(fēng)險(xiǎn)分析在很多方面是相互關(guān)聯(lián)的，項(xiàng)目風(fēng)險(xiǎn)越大，開(kāi)發(fā)高質(zhì)量的軟件的可行性就越小。技術(shù)可行性畢業(yè)設(shè)計(jì)整個(gè)系統(tǒng)是以ASP技術(shù)來(lái)開(kāi)發(fā)，由于代碼是經(jīng)過(guò)服務(wù)器執(zhí)行之后才向?yàn)g覽器發(fā)送的，所以在客戶端看到的只能是經(jīng)過(guò)解析之后的數(shù)據(jù)，而無(wú)法獲得源代碼，故編寫(xiě)者不用擔(dān)心自己的代碼會(huì)被別人剽竊。數(shù)據(jù)庫(kù)的創(chuàng)建使用MicrosoftAccess2003，為了便于編程，前臺(tái)的操作頁(yè)面和后臺(tái)的數(shù)據(jù)庫(kù)管理頁(yè)面的設(shè)計(jì)我是分別進(jìn)行的。在整個(gè)程序編寫(xiě)完之后，在將后臺(tái)的數(shù)據(jù)庫(kù)管理頁(yè)面通過(guò)管理員在前臺(tái)的登錄來(lái)調(diào)用，這樣就把前臺(tái)和后臺(tái)有機(jī)的連接起來(lái)，使操作更加方便。當(dāng)用戶以會(huì)員身份登錄調(diào)用執(zhí)行的是前臺(tái)的操作頁(yè)面，而當(dāng)以管理員身份登錄時(shí)，則進(jìn)入后臺(tái)管理頁(yè)面來(lái)對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作。經(jīng)濟(jì)可行性本系統(tǒng)開(kāi)發(fā)費(fèi)用不是很高，將來(lái)運(yùn)行、維護(hù)的費(fèi)用依數(shù)據(jù)庫(kù)的規(guī)模而定。估計(jì)該系統(tǒng)投入使用后，可以為人們的購(gòu)物帶來(lái)方便。不過(guò)，如果在投入使用之后，可能會(huì)花費(fèi)一筆錢，用于網(wǎng)站平時(shí)的維護(hù)，因?yàn)樵谌藗冑?gòu)物結(jié)束之后，管理員必須對(duì)所銷售產(chǎn)品、庫(kù)存產(chǎn)品等進(jìn)行統(tǒng)計(jì)，還有要定時(shí)發(fā)布商品的新消息。3.2需求說(shuō)明隨著www（WorldWideWeb）的普及，動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)也急速發(fā)展。從原來(lái)的CGI（CommonGatewayInterface）到ASP（ActiveServerPage）都從某種程度上滿足了網(wǎng)頁(yè)開(kāi)發(fā)人員對(duì)動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)的需求。通過(guò)ASP我們可以結(jié)合HTML網(wǎng)頁(yè)、ASP指令和ActiveX元件建立動(dòng)態(tài)、交互且高效的Web服務(wù)器應(yīng)用程序。因?yàn)樗械某绦蚨紝⒃诜?wù)器端執(zhí)行，包括所有嵌在普通HTML中的腳本程序。當(dāng)程序執(zhí)行完畢后，服務(wù)器僅將執(zhí)行的結(jié)果返回給客戶瀏覽器，這樣也就減輕了客戶端瀏覽器的負(fù)擔(dān)，大大提高了交互的速度。3.2.1性能需求考慮到目前處于畢業(yè)設(shè)計(jì)階段，但是該系統(tǒng)今后有可能投入到應(yīng)用實(shí)踐中，所有該系統(tǒng)的總體性能應(yīng)有一定的嚴(yán)格要求，具體如下：1.數(shù)據(jù)精確度在精度需求上，根據(jù)使用需要，在各項(xiàng)數(shù)據(jù)的輸入，輸出及傳輸過(guò)程中，由于本系統(tǒng)使用了數(shù)據(jù)結(jié)構(gòu)，可以滿足各種精度的需求。2.時(shí)間特性由于網(wǎng)絡(luò)發(fā)展的速度之快，在發(fā)布消息時(shí)，應(yīng)該講究“準(zhǔn)，及時(shí)”，做到能更好完全滿足用戶要求。3.可使用性當(dāng)用戶訪問(wèn)網(wǎng)站時(shí)，用戶可以方便地進(jìn)行搜索和了解自己要想的信息。4.可維護(hù)性維護(hù)模塊是整個(gè)系統(tǒng)運(yùn)行的基礎(chǔ),用于對(duì)網(wǎng)站進(jìn)行日常管理和維護(hù),包括商品的增加、權(quán)限設(shè)置和數(shù)據(jù)刪除等功能。3.2.2功能需求根據(jù)本網(wǎng)站主要任務(wù)和系統(tǒng)的需求,確定本網(wǎng)站主要完成以下功能:用戶注冊(cè)商品瀏覽會(huì)員評(píng)論購(gòu)物車收銀臺(tái)查看訂單后臺(tái)管理員設(shè)置第4章系統(tǒng)的總體設(shè)計(jì)隨著Interent的發(fā)展，電子商城已成為21世紀(jì)網(wǎng)絡(luò)發(fā)展的主流，網(wǎng)上購(gòu)物也成為一種購(gòu)物時(shí)尚。目前國(guó)內(nèi)很多企業(yè)正加入到一些電子商城里，通過(guò)網(wǎng)絡(luò)進(jìn)行交易將成為未來(lái)商品交易的重要組成部分。而人民的生活水平的提供和生活節(jié)奏的加快，工作中的人民沒(méi)有大量的時(shí)間花在購(gòu)物上，所以網(wǎng)上購(gòu)物也已經(jīng)成為了一種時(shí)代進(jìn)步的產(chǎn)物。人們可以在家，也可以在工作休息時(shí)，在網(wǎng)上挑選自己喜歡和想要購(gòu)物的東西。所以，一些網(wǎng)站的還是起到很大的作用。根據(jù)本網(wǎng)站主要任務(wù)和系統(tǒng)的需求,確定本網(wǎng)站系統(tǒng)設(shè)計(jì)目標(biāo):前臺(tái)要實(shí)現(xiàn)的功能：由于在商場(chǎng)進(jìn)行購(gòu)物的顧客是來(lái)自不同的群體，如何幫助他們正確使用購(gòu)物過(guò)程中的操作和技巧，盡快投入到購(gòu)物中，必須在這個(gè)設(shè)計(jì)中體現(xiàn)出來(lái)。(1)界面友好，操作簡(jiǎn)單，提供大量的使用和提示說(shuō)明。(2)提供會(huì)員制：可以對(duì)自己的注冊(cè)資料進(jìn)行修改，可以進(jìn)入系統(tǒng)查詢商品，訂購(gòu)商品；可以對(duì)商品發(fā)表評(píng)論；可以查看自己的訂單處理。(3)提供最新、推薦、促銷商品信息的瀏覽。(4)對(duì)站內(nèi)所有的商品能夠進(jìn)行分類。(5)顯示商品的具體信息時(shí)，要詳細(xì)顯示商品的大部分信息，并注明不同用戶和不同產(chǎn)品價(jià)格區(qū)別，并能夠提供對(duì)同類相關(guān)產(chǎn)品的顯示。(6)允許會(huì)員用戶對(duì)商品進(jìn)行評(píng)論。未注冊(cè)顧客可以瀏覽評(píng)論內(nèi)容。(7)為了更好與用戶進(jìn)行溝通，給用戶提供留言功能，以利于用戶與商場(chǎng)管理員之間的交流。(8)對(duì)于用戶購(gòu)買物品到提交訂單整個(gè)流程要做到簡(jiǎn)單明了、安全，盡量模擬現(xiàn)實(shí)購(gòu)物的習(xí)慣。對(duì)于購(gòu)物車內(nèi)的物品要用列表一一顯示出來(lái)，并提供刪除功能，對(duì)于重復(fù)夠買的物品要累加計(jì)算。在用戶提交訂單時(shí)要提供多種運(yùn)送方式，并對(duì)信息提供重復(fù)審核的功能。(9)整個(gè)界面以綠色為主色調(diào)，布局統(tǒng)一，用CSS統(tǒng)一整個(gè)版面的樣式。系統(tǒng)結(jié)構(gòu)清晰，功能明確，頁(yè)面風(fēng)格鮮明，易操作。后臺(tái)管理功能：要能夠?qū)W(wǎng)站絕大部分的動(dòng)態(tài)信息直接操作，盡量不改動(dòng)頁(yè)面。提供系統(tǒng)管理，會(huì)員管理，類別管理，訂單管理，商品管理，留言管理等。(1)系統(tǒng)管理模塊可以修改管理員密碼，數(shù)據(jù)庫(kù)備份路徑，以及數(shù)據(jù)庫(kù)的其它信息；(2)會(huì)員管理模塊對(duì)注冊(cè)的會(huì)員統(tǒng)一管理以及會(huì)員短信的管理(3)類別管理模塊對(duì)系統(tǒng)中的商品類別進(jìn)行管理，在該模塊中管理員可以對(duì)商品類別進(jìn)行添加和管理；(4)訂單管理模塊在該模塊中對(duì)當(dāng)前訂單進(jìn)行處理和確認(rèn)；(5)商品管理對(duì)商品進(jìn)行添加和管理及對(duì)商品評(píng)論進(jìn)行管理；(6)留言管理模塊對(duì)客戶的留言進(jìn)行處理解決。4.1系統(tǒng)總體結(jié)構(gòu)圖前臺(tái)管理系統(tǒng)如圖4.1所示：用戶注冊(cè)用戶注冊(cè)登陸登陸發(fā)表評(píng)論購(gòu)買商品客戶留言查看購(gòu)物車查看定單修改資料瀏覽商品發(fā)表評(píng)論購(gòu)買商品客戶留言查看購(gòu)物車查看定單修改資料瀏覽商品會(huì)員資料管理圖4.1前臺(tái)功能模塊圖后臺(tái)管理系統(tǒng)如圖4.2所示：管理員登陸管理員登陸留言板管理商品管理訂單管理類別管理會(huì)員管理系統(tǒng)管理留言板管理商品管理訂單管理類別管理會(huì)員管理系統(tǒng)管理商品評(píng)論商品添加和查看訂單查詢處理訂單類別刪減類別添加會(huì)員信息管理會(huì)員查詢上傳文件管理網(wǎng)站信息管理商品評(píng)論商品添加和查看訂單查詢處理訂單類別刪減類別添加會(huì)員信息管理會(huì)員查詢上傳文件管理網(wǎng)站信息管理圖4.2后臺(tái)功能模塊圖4.2網(wǎng)站流程圖本系統(tǒng)功能流暢，操作簡(jiǎn)單，具體操作流程如圖4.3所示：主頁(yè)面主頁(yè)面登陸不注冊(cè)登陸不注冊(cè)注冊(cè)用戶登陸驗(yàn)證修改資料查看定單查看購(gòu)物車管理員登陸驗(yàn)證系統(tǒng)管理會(huì)員管理類別管理訂單管理商品管理留言板管理用戶管理員失敗失敗注銷成功成功成功客戶留言瀏覽商品商品介紹圖4.3網(wǎng)站流程圖4.3數(shù)據(jù)庫(kù)設(shè)計(jì)4數(shù)據(jù)庫(kù)需求分析現(xiàn)代的，成熟的和廣泛占領(lǐng)市場(chǎng)的數(shù)據(jù)庫(kù)產(chǎn)品一般都是關(guān)系數(shù)據(jù)庫(kù)產(chǎn)品。關(guān)系數(shù)據(jù)庫(kù)產(chǎn)品具有堅(jiān)實(shí)的理論基礎(chǔ)，access是由微軟開(kāi)發(fā)的適合中小型應(yīng)用的一款關(guān)系型數(shù)據(jù)庫(kù)產(chǎn)品，在安裝office時(shí)可以選擇安裝。這個(gè)購(gòu)物網(wǎng)站是針對(duì)于畢業(yè)設(shè)計(jì)而做的，所以選擇操作比較簡(jiǎn)單的access作為后臺(tái)數(shù)據(jù)庫(kù)。4數(shù)據(jù)表結(jié)構(gòu)的詳細(xì)設(shè)計(jì)本網(wǎng)站重要的數(shù)據(jù)表，分別如下adminuser（后臺(tái)管理員信息表）、basket（顧客購(gòu)物記錄表）、book（客戶留言表）、csort（商品分類表）、dvote（商品評(píng)論表）、links（友情鏈接信息表）、orders（訂單信息表）、user（會(huì)員信息表）下面分別來(lái)說(shuō)明這些數(shù)據(jù)表。adminuser（后臺(tái)管理員信息表）后臺(tái)管理員信息表如圖4.4所示。圖4.4后臺(tái)管理員信息表界面2.basket（顧客購(gòu)物記錄表）顧客購(gòu)物記錄表此表主要用來(lái)記錄消費(fèi)者訂購(gòu)信息。如圖4.5所示。圖4.5顧客購(gòu)物記錄表界面3.book（客戶留言表）客戶留言表主要用來(lái)保存留言者的信息的。如圖4.6所示。圖4.6客戶留言表界面4.csort（商品分類表）商品分類表主要是保存出售商品的信息的。如圖4.7所示。圖4.7商品分類表界面5.dvote（商品評(píng)論表）商品評(píng)論表主要用來(lái)記錄會(huì)員對(duì)商品的評(píng)論信息。如圖4.8所示。圖4.8商品評(píng)論表界面6.links（友情鏈接信息表）友情鏈接信息表主要是用來(lái)保存你的友情鏈接的主要信息的。如圖4.9所示。圖4.9友情鏈接信息表界面8.orders（訂單信息表）訂單信息表用來(lái)保存訂單的詳細(xì)信息。如圖4.10所示。圖4.10訂單信息表界面9.user（會(huì)員信息表）會(huì)員信息表主要用來(lái)存儲(chǔ)所注冊(cè)的會(huì)員的信息。如圖4.11所示。圖4.11會(huì)員信息表界面第5章系統(tǒng)功能模塊設(shè)計(jì)5.1前臺(tái)首頁(yè)布局開(kāi)發(fā)一個(gè)網(wǎng)站，好的頁(yè)面風(fēng)格和頁(yè)面框架是非常重要的，特別是對(duì)購(gòu)物網(wǎng)站來(lái)說(shuō)，應(yīng)該需要更好的頁(yè)面風(fēng)格和布局。其效果圖如圖5.1所示：圖5.1前臺(tái)首頁(yè)界面5.前臺(tái)首頁(yè)的設(shè)計(jì)<!--#includefile="top.asp"--><!--#includefile="config.asp"--><!--*******************首頁(yè)左邊單元格開(kāi)始*******************//--><tdwidth="198"bgcolor="#FFFFFF"valign=top><!--#includefile="include/c_userlogins.asp"--><!--用戶登錄//--><!--#includefile="include/default_ml.asp"--><!--商品目錄//--></td><!--*******************首頁(yè)左邊單元格結(jié)束************************//--><tdwidth="1"bgcolor="#d1d1d1"></td><!--************************首頁(yè)右邊單元格開(kāi)始*******************//--><tdwidth="575"bgcolor="#FFFFFF"valign=top><tablewidth="570"border="0"cellspacing="0"cellpadding="0"></table><tablewidth="570"border="0"cellspacing="0"cellpadding="0"align=right><tbody><tr><tdvalign="top"><!--#includefile="include/default_new.asp"--><!--新品上架//-></td></tr><tr><tdvalign="top"background=img/cx_titlebg.gifheight=100><!--#includefile="include/default_cx.asp"--><!--促銷商品//--></td></tr><tr><tdvalign="top"><!--#includefile="include/default_tj.asp"--><!--推薦商品//--></td></tr></tbody></table></td><!--*******************首頁(yè)右邊單元格結(jié)束************************//--></tr><trbgcolor="#FFFFFF"><tdheight="1"colspan="3"bgcolor="#d1d1d1"></td><td></td></tr></table><!--******************上部分結(jié)束****************************//--><!--#includefile="footer.asp"--><!--end//--></body></html>5.用戶注冊(cè)模塊設(shè)計(jì)用戶若要在本網(wǎng)站中購(gòu)物或享受會(huì)員權(quán)利就必須在本網(wǎng)站注冊(cè)并登錄，這是一個(gè)必須的步驟，下面讓我來(lái)詳細(xì)介紹一下本模塊的功能實(shí)現(xiàn)。注冊(cè)界面如圖5.2所示。用戶注冊(cè)界面在用戶登記個(gè)人的詳細(xì)資料時(shí)，仍然使用ASP中的Recordset的對(duì)象，對(duì)數(shù)據(jù)庫(kù)進(jìn)行添加的操作，其方法如下：setrs=server.createobject("adodb.recordset")sql="select*fromuserwhereuser_id='"&user_id&"'"rs.opensql,conn,3,3rs("user_id")=user_idrs("user_adds")=user_addsrs("user_mail")=user_mailrs("user_password")=passwordrs("regip")=request.servervariables("remote_addr")rs("user_postalcode")=user_postalcoders("user_name")=user_namers("sex")=request("sex")rs("user_tel")=user_telrs("user_grade")="會(huì)員"rs("regdate")=now()rs("logins")=1sex=rs("sex")user_grade=rs("user_grade")user_tel=rs("user_tel")user_password=rs("user_password")session("user_id")=rs("user_id")session("user_grade")=rs("user_grade")申請(qǐng)成功后進(jìn)入提示界面，告訴用戶已經(jīng)申請(qǐng)成功。如圖5.3所示。圖5.3注冊(cè)成功界面在會(huì)員注冊(cè)中，首先是檢查該顧客所申請(qǐng)的用戶名是否以被人申請(qǐng)了，若已被人申請(qǐng)了該用戶名，則系統(tǒng)將提示給用戶“該用戶名已存在”的信息。其方法還是使用對(duì)數(shù)據(jù)庫(kù)的操作：setrs=server.createobject("adodb.recordset")sql="select*fromuserwhereuser_id='"&user_id&"'"nsql,conn,3,3查找數(shù)據(jù)庫(kù)，檢查用戶名是否已經(jīng)注冊(cè)過(guò)ifnotrs.eofthenerrmsg=errmsg+"<br>"+"<li>對(duì)不起，該帳號(hào)已被別人注冊(cè)，請(qǐng)點(diǎn)擊瀏覽器的后退鍵重新選擇您的登陸帳號(hào)"founderr=trueendif用戶登錄模塊設(shè)計(jì)用戶只有通過(guò)登錄模塊的驗(yàn)證才能進(jìn)入網(wǎng)站。當(dāng)用戶在左側(cè)“用戶信息”區(qū)域中的“用戶名”和“密碼”文本框中輸入用戶名和密碼后，單擊“登錄”按鈕，如果驗(yàn)證成功，用戶將以會(huì)員的身份進(jìn)入時(shí)裝購(gòu)物網(wǎng)的首頁(yè)，并可在網(wǎng)站中進(jìn)行購(gòu)物。其效果圖如表5.4所示圖5.4登錄界面設(shè)計(jì)用戶登錄頁(yè)面,查找數(shù)據(jù)庫(kù)，利用用戶名和密碼登錄網(wǎng)站：sql="select*fromuserwhereuser_id='"&user_id&"'anduser_password='"&user_password&"'"Setrs=Server.CreateObject("ADODB.RecordSet")rs.opensql,conn,3,3session("user_id")=rs("user_id")session("user_grade")=rs("user_grade")注冊(cè)的會(huì)員可以實(shí)現(xiàn)對(duì)注冊(cè)資料的修改，如圖5.5所示。用戶資料修改界面用戶可以瀏覽所有商品，查看商品的詳細(xì)信息。瀏覽商品界面如圖5.6所示：圖5.6商品詳情界面如果是會(huì)員用戶可以對(duì)商品評(píng)論，如圖5.7所示。但是沒(méi)有成為會(huì)員的用戶不能對(duì)商品發(fā)表評(píng)論，如圖5.8所示。圖5.7會(huì)員評(píng)論界面圖5.8沒(méi)有注冊(cè)的用戶不能發(fā)表評(píng)論界面具體實(shí)現(xiàn)代碼如下：ifsession("user_id")=""thenresponse.write"<SCRIPTlanguage=JavaScript>alert('會(huì)員可發(fā)評(píng)論,請(qǐng)先登陸');"response.write"javascript:self.close()</SCRIPT>"endifdisplay=CurPagesetrs=server.createobject("adodb.recordset")ifrequest("action")="save"then grade=request("grade")ifrequest("content")<>""thencontent=replace(replace(replace(request("content"),"'","‘"),"<","<"),">",">")endifsql="select*fromDvotewheredownid="&request("id")&"orderbyiddesc" rs.opensql,conn,1,1ifrs.bofandrs.eofthenV_num=0pingrade=0endif5.購(gòu)物車界面購(gòu)物車界面如圖5.9所示：圖5.9購(gòu)物車界面／*建立購(gòu)物籃的詳細(xì)代碼*/<%sql="select*fromproductwhereid="&request("id")sql="select*frombasketwhereuser_id='"&session("user_id")&"'andbasket_check=false"setrs=server.createobject("adodb.recordset")rs.opensql,conn,3,3ifrs.eofthen%>…..<%elsedowhilenotrs.eof%>這個(gè)是對(duì)購(gòu)物籃的商品進(jìn)行清空的處理<ahref="clearbasket.asp?basket_id=<%=rs("basket_id")%>">清除</a></div>如果用戶點(diǎn)擊去收銀臺(tái)，會(huì)將界面跳轉(zhuǎn)到cash.asp，選擇付款方式和配送方式，然后提交訂單。如圖5.10所示。圖5.10購(gòu)物住處確認(rèn)界面購(gòu)物確認(rèn)之后，訂單界面如圖1所示：圖5.11完成訂購(gòu)界面5.我的訂單界面用戶在購(gòu)買商品之后，可以查看自己的訂單，也可以查看訂單的狀態(tài)，其中訂單狀態(tài)包括（未受理、已付款、已發(fā)貨）。我的訂單如圖5.12所示：5.12我的訂單界面查詢成功的代碼實(shí)現(xiàn)如下：<%sql="select*frombasketwhereorder_number='"&order_number&"'"setrs1=server.createobject("adodb.recordset")rs1.opensql,conn,3,3%>5.2后臺(tái)首頁(yè)設(shè)計(jì)后臺(tái)系統(tǒng)中包括以下幾個(gè)子模塊,系統(tǒng)管理，會(huì)員管理，類別管理，訂單管理，商品管理，留言管理等。后臺(tái)首頁(yè)界面如3所示。3后臺(tái)首頁(yè)界面系統(tǒng)管理模塊系統(tǒng)管理模塊中可以修改管理員密碼4所示。4管理員修改密碼界面修改數(shù)據(jù)庫(kù)備份的位置，5所示。5數(shù)據(jù)庫(kù)備份修改路徑界面以及其它網(wǎng)站信息的設(shè)置6所示。6網(wǎng)站信息管理界面會(huì)員管理模塊會(huì)員管理模塊中可以管理注冊(cè)的會(huì)員7所示。7會(huì)員管理界面類別管理模塊在類別管理模塊中可以對(duì)所有商品的類別進(jìn)行管理8所示。8類別管理模塊界面訂單管理模塊在訂單管理模塊中可以對(duì)顧客下的訂單進(jìn)行處理9所示。9訂單管理模塊界面商品管理模塊在商品管理模塊中，可實(shí)現(xiàn)對(duì)商品的管理，添加新的商品，并可以實(shí)現(xiàn)會(huì)員商品的評(píng)論管理。如圖5.20所示。圖5.20評(píng)論管理模塊界面留言管理模塊在留言管理模塊中可實(shí)現(xiàn)對(duì)所有留言用戶的管理1所示。圖5.21留言管理模塊界面結(jié)論在歷時(shí)將近三個(gè)月的時(shí)間里，我的畢業(yè)設(shè)計(jì)是從學(xué)習(xí)新的知識(shí)（ASP語(yǔ)言），到建立網(wǎng)上購(gòu)物系統(tǒng)的網(wǎng)站。我遇到了若干的問(wèn)題和解決了不少的問(wèn)題.從建立自己的虛擬服務(wù)器，到網(wǎng)站服務(wù)，我對(duì)建立網(wǎng)站的認(rèn)識(shí)從無(wú)到有，有了具體詳細(xì)的認(rèn)識(shí)。本文所建立的網(wǎng)上購(gòu)物系統(tǒng)只是一個(gè)網(wǎng)上的購(gòu)物的基本原理，里面要涉及到的方方面面的問(wèn)題我們未曾遇到或現(xiàn)有的條件限制而未能實(shí)現(xiàn)。購(gòu)物系統(tǒng)并不是我們想象的寫(xiě)程序那么簡(jiǎn)單，它包括了編寫(xiě)程序、數(shù)據(jù)庫(kù)設(shè)計(jì)、網(wǎng)頁(yè)制作、圖象處理、版面設(shè)計(jì)、數(shù)據(jù)采集、文本編輯、服務(wù)器管理等等，要搞好一個(gè)好的，完善的網(wǎng)站需要一個(gè)詳細(xì)的、合理的、可行性的規(guī)劃設(shè)計(jì)。在用ASP開(kāi)發(fā)的時(shí)候，在程序的調(diào)試上出現(xiàn)了很大的問(wèn)題，要使用瀏覽器來(lái)瀏覽才能找出錯(cuò)誤所在，這一定程度上延長(zhǎng)了開(kāi)發(fā)周期。在開(kāi)始的時(shí)候往往要為了找一個(gè)小錯(cuò)誤花上大半天的時(shí)間。經(jīng)過(guò)多看程序，現(xiàn)在已經(jīng)對(duì)程序有了一定的了解。因?yàn)槲业膶I(yè)也不是學(xué)編程的，所以畢業(yè)設(shè)計(jì)完成的也是比較辛苦的。隨著Web技術(shù)的進(jìn)一步發(fā)展和Internet的逐漸大眾化，基于Internet的電子商務(wù)系統(tǒng)無(wú)疑比傳統(tǒng)商務(wù)具有更加廣闊的應(yīng)用前景。而如何提高電子商務(wù)系統(tǒng)中的數(shù)據(jù)訪問(wèn)效率、交易平臺(tái)的安全性及事務(wù)處理的能力仍是當(dāng)前人們所關(guān)注的熱點(diǎn)問(wèn)題。這些問(wèn)題有待于我們大家作更深入的探討，相信在不久的將來(lái)電子商務(wù)將表現(xiàn)出越來(lái)越大的作用。在整個(gè)設(shè)計(jì)過(guò)程中學(xué)習(xí)到了很多關(guān)于ASP的知識(shí),得到了很多學(xué)習(xí)經(jīng)驗(yàn),也得到了很多鍛煉,同時(shí)提高了自己分析和解決問(wèn)題的能力.我的畢業(yè)設(shè)計(jì)還有一些漏洞和不足之處，由于時(shí)間和能力關(guān)系，沒(méi)來(lái)得及實(shí)現(xiàn)，希望以后能夠完善。致謝此次的畢業(yè)設(shè)計(jì)得到了許多老師和同學(xué)的關(guān)心和幫助,在此我對(duì)他們表示誠(chéng)摯的謝意.首先應(yīng)該要感謝的是我的指導(dǎo)老師陳瑩瑩老師,在這次的畢業(yè)設(shè)計(jì)過(guò)程中,陳瑩瑩其次我要感謝四年來(lái)傳授知識(shí)給我的各位老師,感謝他們四年來(lái)對(duì)我們的教導(dǎo)和關(guān)心,使我們具備了一定的專業(yè)知識(shí)和能力.最后我還要感謝同學(xué)們,因?yàn)榇蠹乙黄鸬呐?相互幫助學(xué)習(xí),我們才可以在這四年的時(shí)光時(shí)快樂(lè)的學(xué)習(xí).在這次的設(shè)計(jì)中我學(xué)到了很多很多，給我的啟示也是讓我終生受益。今后我在工作中也許不會(huì)觸及這方面，也許根本沒(méi)有機(jī)會(huì)再與這些知識(shí)接觸，但是有了這次的體會(huì)我會(huì)認(rèn)真的去對(duì)待每一個(gè)件事和每一個(gè)機(jī)會(huì)，爭(zhēng)取做到最好！ 參考文獻(xiàn)1《ASP網(wǎng)絡(luò)編程從入門到精通》頊宇峰馬軍編著清華大學(xué)出版社2《Dreamweaver8+ASP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)從基礎(chǔ)到實(shí)踐》戴一波等編著電子工業(yè)出版社3《ASP開(kāi)發(fā)實(shí)例》清漢計(jì)算機(jī)工作室編著機(jī)械工業(yè)出版社4《ASP實(shí)例演練之組建商務(wù)網(wǎng)站》洪傳華編著中國(guó)電力出版社5《電子商務(wù)網(wǎng)站建設(shè)》薛萬(wàn)欣編著北京交通大學(xué)出版社6《ASP動(dòng)態(tài)網(wǎng)站之旅》李福榮曹慶臻編著人民交通出版社7《ASP數(shù)據(jù)庫(kù)開(kāi)發(fā)實(shí)例解析》李嚴(yán)于亞芳王國(guó)輝編著機(jī)械工業(yè)出版社8《Access2003數(shù)據(jù)庫(kù)管理從入門到精通》李海兵楊曉亮編著中國(guó)青年出版社9《Access2003數(shù)據(jù)庫(kù)應(yīng)用教程》

陳佛敏金國(guó)念編著華中科學(xué)技術(shù)出版社10《Access數(shù)據(jù)庫(kù)技術(shù)與應(yīng)用》譚浩強(qiáng)編著清華大學(xué)出版社附錄A譯文可視化組織5.1引言網(wǎng)頁(yè)的外觀，跟外觀在其他許多情況中一樣重要。精美的履歷能給人留下好的第一印象從而贏得信心。有趣的過(guò)期報(bào)紙比草率的報(bào)紙能得到更多的尊重。在網(wǎng)頁(yè)上，好的可視化組織能讓使用者知道那些條目是有聯(lián)系的，同時(shí)也能幫助人們很快的找到需要的頁(yè)面。內(nèi)容組織和視覺(jué)組織是緊密相連的。一個(gè)有效的布局能加強(qiáng)站點(diǎn)的內(nèi)容組織，當(dāng)然，也使得站點(diǎn)更容易導(dǎo)航。或許你已經(jīng)體驗(yàn)到一個(gè)視覺(jué)組織好的網(wǎng)站帶給你方便的實(shí)例。比如說(shuō)，當(dāng)你行駛在洲際的公路上，如果你看到右側(cè)通道上方有一個(gè)出口標(biāo)志，那么它直接的表示出口也在右側(cè)。再如，當(dāng)你瀏覽桌上放著的一本書(shū)的目錄，內(nèi)容的布局能使你很快明白書(shū)的結(jié)構(gòu)。因此，你能直接翻到你想看的那部分。一旦你知道你的用戶群體是哪些，你就能決定網(wǎng)頁(yè)的外觀應(yīng)該包含什么。簡(jiǎn)單說(shuō)來(lái)：內(nèi)容組織依賴與視覺(jué)組織。這是一個(gè)設(shè)計(jì)網(wǎng)頁(yè)布局的開(kāi)發(fā)者的觀點(diǎn)。作為一個(gè)使用者的觀點(diǎn)，我不得不說(shuō)以下這點(diǎn)。好的視覺(jué)組織能使我們快捷的查找出所需內(nèi)容的地點(diǎn)?？匆粋€(gè)網(wǎng)又或者看整個(gè)世界，人們往往會(huì)從他們看到的外觀和事物的布置上來(lái)推斷它的結(jié)構(gòu)。在本文的第2段格式塔定律（Gestalt）已經(jīng)充分讓我們認(rèn)識(shí)到可視化組織在網(wǎng)頁(yè)上的必要存在性。在本文章中，你將從四個(gè)簡(jiǎn)單而有強(qiáng)有說(shuō)服力的原則來(lái)教你建網(wǎng)頁(yè)的視覺(jué)組織。按照以下四個(gè)原則，網(wǎng)站能讓使用者更加快速地找到需要的信息。文章的目標(biāo)在本文中，你將會(huì)了解以下四個(gè)關(guān)于可視化組織的原則以及如何應(yīng)用它們：1.近距離性2.線性排列3.一致性4.對(duì)比性5.2簡(jiǎn)單闡述以下就是這四個(gè)原則，不要掉以輕心：近距離性：人們通常認(rèn)為緊密相關(guān)的數(shù)據(jù)項(xiàng)應(yīng)該放在一起。把有關(guān)系的項(xiàng)目作為組放在一起，分開(kāi)沒(méi)有關(guān)聯(lián)的項(xiàng)目。比方說(shuō)，將段落的標(biāo)題放到與相對(duì)應(yīng)的段落附近。線性排列：將相關(guān)的數(shù)據(jù)項(xiàng)目排列成為一條虛擬的線。使同等重要的條目排成一行，把略為重要的條目縮進(jìn)。這些從屬于主標(biāo)題的項(xiàng)目就是清楚使用這些線的具體闡述。一致性：使有關(guān)系的數(shù)據(jù)項(xiàng)目看起來(lái)類似。在每個(gè)網(wǎng)頁(yè)的左邊建立一個(gè)導(dǎo)航條是體現(xiàn)連貫性的的一個(gè)方面，使所有的工具按鈕為同樣的大小是另一個(gè)方面。對(duì)比性：使不同的數(shù)據(jù)項(xiàng)目起來(lái)也不相同。把每個(gè)章節(jié)的標(biāo)題用大的粗體與內(nèi)容中的略小的字體區(qū)分開(kāi)。一個(gè)優(yōu)秀的網(wǎng)頁(yè)可視化組織便是依賴與以上四個(gè)原則。通常在建網(wǎng)頁(yè)時(shí)，會(huì)將這四個(gè)原則結(jié)合起來(lái)，但是首先在設(shè)計(jì)的時(shí)候每個(gè)原則都是各自獨(dú)立的。5.3近距離性丹的服裝店女裝男裝童裝特殊尺碼七月特賣雨衣特賣粉色襪子脫銷店面地址開(kāi)設(shè)帳戶帳戶等級(jí)注銷聯(lián)系我們這是格式塔定律（Gestalt）之一，在第2段中已經(jīng)提及。應(yīng)用該原則更能清晰的將有關(guān)的數(shù)據(jù)項(xiàng)組織在一起。如下兩圖。圖1是一個(gè)小商店的初步體現(xiàn)近距離性的導(dǎo)航表。圖2是一個(gè)合理的布局，利用近距離性充分的表達(dá)了整個(gè)商店的內(nèi)容結(jié)構(gòu)。丹的服裝店注銷粉色襪子脫銷聯(lián)系我們七月特賣童裝男裝開(kāi)設(shè)帳戶雨衣特賣特殊尺碼店面地址帳戶等級(jí)女裝圖1服裝店站點(diǎn)草圖圖2更加合理的布局從圖1中，開(kāi)發(fā)商忘記了什么？很難說(shuō)，因?yàn)槲覀儫o(wú)法采訪他，但一個(gè)合理的猜測(cè)，他忘記協(xié)調(diào)好他的任務(wù)分析，也沒(méi)有事先將內(nèi)容做卡排序。如果他有記得，他會(huì)意識(shí)到人們?nèi)ゾW(wǎng)上購(gòu)物會(huì)帶著各自不同的目的。一些人想去瀏覽著找到他需要的具體條目；有些是針對(duì)降價(jià)產(chǎn)品或者特賣去的；有些是想與店主洽談帳戶事宜。假設(shè)他事先將內(nèi)容用卡分做為以下幾組：第一組：女裝、男裝、童裝、特殊尺碼第二組：七月特賣、雨衣特賣、粉色襪子脫銷第三組：店面地址第四組：開(kāi)設(shè)帳戶、帳戶等級(jí)第五組：注銷第六組：聯(lián)系我們。上圖中圖2更加合理的利用了近距離性，將內(nèi)容清晰的組織了起來(lái)。由此看來(lái)，近距離性能使表面看起來(lái)相關(guān)的事物更加緊密的組織在一起。以上兩個(gè)例子雖然不十分貼切，但是它強(qiáng)調(diào)了近距離性的基本思想。究竟哪一個(gè)利用可視化組織表達(dá)了內(nèi)容結(jié)構(gòu)，相信讀者一眼就能看出來(lái)。近距離性不僅僅是你應(yīng)當(dāng)將相關(guān)內(nèi)容組織在一起，同樣你還得將無(wú)關(guān)內(nèi)容區(qū)分開(kāi)來(lái)。近距離性屢屢使用在網(wǎng)頁(yè)設(shè)計(jì)中，正面看來(lái)，有關(guān)東西被組織在一起了，相反的看，無(wú)關(guān)東西被區(qū)分開(kāi)了。5.4線性排列格式塔（Gestalt）心理學(xué)的概念連續(xù)性直接引導(dǎo)出可視化組織的下一原則,即對(duì)準(zhǔn)."準(zhǔn)"來(lái)自拉丁根"線".在平面設(shè)計(jì)中，它通常是處理何時(shí)將東西沿實(shí)線放置，何時(shí)將東西沿虛線放置。有較強(qiáng)對(duì)準(zhǔn)性的頁(yè)面會(huì)含有很多連續(xù)的實(shí)線。很難再找到一個(gè)網(wǎng)站沒(méi)有用到線性排列。圖3中顯示了一個(gè)叫EddieBaner的站點(diǎn)。這個(gè)頁(yè)面很多部分都包含了線性排列這一準(zhǔn)則，其中頂部包括公司名標(biāo)志和一些重要的為客戶過(guò)去和當(dāng)前的購(gòu)物服務(wù)的鏈接。在這個(gè)頁(yè)面的左部保留了一些季節(jié)性的或當(dāng)前的特殊廣告，在頁(yè)面右邊的暗色背景部分，是一個(gè)為有購(gòu)物清單用戶提供的快速購(gòu)物通道。所有的這些部分都是以左部為線性排列的。圖3關(guān)于線性排列的好例子5.5一致性一致性是使網(wǎng)站易于理解和導(dǎo)航的最強(qiáng)大的工具之一。這里的一致性是指在網(wǎng)站同一頁(yè)面甚至者跨頁(yè)的時(shí)候，布局上也要保持高度一致。圖4地球科學(xué)網(wǎng)頁(yè)這個(gè)頁(yè)面的布局是否含蓋了所有的頁(yè)面？這是我們所希望的；將一個(gè)包含很多站點(diǎn)的頁(yè)面聚集在一個(gè)相同的模板下不能有效的通過(guò)視覺(jué)效果表達(dá)出它的內(nèi)容。因?yàn)?，就算是在縮進(jìn)的第三層頁(yè)面，那也要與上一頁(yè)面寶石相當(dāng)?shù)囊恢隆D4中能顯示出網(wǎng)頁(yè)瀏覽者“我在哪？我應(yīng)該去哪？我能從這兒到哪去？”這些問(wèn)題的答案。使用一致性連接創(chuàng)建網(wǎng)頁(yè)，或者連使用一致性布置各個(gè)文檔的時(shí)候,都會(huì)大大提高整個(gè)網(wǎng)頁(yè)的可用性。下面，我們將話題轉(zhuǎn)向第四個(gè)原則，即對(duì)比性。5.6對(duì)比性四個(gè)原則中的最后一個(gè)原則就是對(duì)比性。對(duì)比性能使你網(wǎng)頁(yè)上的條目更加吸引人的注意，也能使你在創(chuàng)建視覺(jué)層次的同時(shí)加強(qiáng)你的內(nèi)容層次感。換句話說(shuō)，文章標(biāo)題用大的粗體字比小標(biāo)題讓人感覺(jué)到更加重要。當(dāng)你決定讓兩個(gè)條目不同的時(shí)候,那么必須使他們看起來(lái)真的,真的不同。如果你決定把標(biāo)題做得更大,那么就使它們是正文字體的兩倍大小。當(dāng)然，當(dāng)你做這些的時(shí)候，同樣也要用粗體標(biāo)明標(biāo)題，這樣更加增強(qiáng)你頁(yè)面的對(duì)比性。5.7總結(jié)如果你在你制作的網(wǎng)頁(yè)中了使用了這四個(gè)原則——近距離性,對(duì)準(zhǔn)、一致性和對(duì)比性,那么結(jié)果將是使你的站點(diǎn)看起來(lái)更加專業(yè),這將激勵(lì)用戶的信心,并能使用戶更加容易地找到他們想要的。下次當(dāng)你看到一個(gè)比較吸引你目光的好網(wǎng)頁(yè)時(shí),花一點(diǎn)時(shí)間來(lái)分析一下這四個(gè)網(wǎng)頁(yè)制作的原則。雖然網(wǎng)站還主要是一個(gè)視覺(jué)媒介,但在我們有限的視野內(nèi)越來(lái)越多的被人們所使用。你不一定要設(shè)計(jì)出有藝術(shù)家視覺(jué)效果的網(wǎng)頁(yè)。你甚至可以建立僅用HTML（超文本標(biāo)記語(yǔ)言）和文本文檔編輯的一些有特色的網(wǎng)頁(yè)。你需要一些天賦和訓(xùn)練來(lái)創(chuàng)造原始的藝術(shù)網(wǎng)頁(yè),不管是你自己親自創(chuàng)作或者是使用AdobeIllustrator軟件，但你不必以一個(gè)藝術(shù)家的標(biāo)準(zhǔn)，為了使視覺(jué)組織、內(nèi)容組織更清晰來(lái)來(lái)布局文本內(nèi)容。有效的視覺(jué)組織,能強(qiáng)化內(nèi)容組織，使得頁(yè)面更加容易導(dǎo)航。附錄B外文原文VisualOrganization5.1IntroductionAppearancematterswithWebpages,justasitdoesinmanyothersituations.Apolishedlooktoyourresumecreatesafirstimpressionandinvitesconfidences.Anattractivelylaid-outtermpapergetsmorerespectthanasloppy.OntheWeb,agoodvisualorganizationletsuserknowwhatcontentitemsarerelatedandhelpsthemfindthepagestheywant.Contentorganizationandvisualorganizationgohand-in-hand.Aneffectivelayoutreinforcesasite’scontentorganization,andtheresultiseasynavigation.Youalreadyhaveexperiencewithusinginstancesofvisualorganizationtoyouradvantage.Forexample,whendrivingonaninterstatehighway,ifyouseeanoverheadsignforanexitovertherightlane,Itisaprettyfairassumptionthattheexitisalsoontheright.Whenyouscanthetableofcontentsofabook’scontentssoyoucangettothepartyouwant.Onceyouknowhowyourusersgroupcontentitems,youcandecidehowtheitemsshouldappearonaWebpage.Simplystated:Contentorganizationdrivesvisualorganization.Thisisadeveloper’spointofviewfordesigningWebpagelayout.Turningitaroundtoauser’spointofview,wemightsaythenext.Goodvisualorganizationmakesiteasytolocatecontent.WhenlookingataWebpageortheworldingeneral,humansinferorganizationfromtheappearanceandarrangementoftheobjecttheysee.ThematerialonGestaltprinciplesinChapter2helpedyourecognizevisualorganizationintheWebpagesthatalreadyexist.Inthischapter,youwilllearnfoursimpleyetpowerfulprinciplesthatwillhelpyoucreateWebpagesthathaveeffectivevisualorganization.FollowingthesefourprinciplesresultsinWebpagesthathelpusersfindthingsquickly.GoalsofthisChapterInthischapter,youwilllearnthefollowingfourprinciplesofvisualorganizationandhowtoapplythem:1.proximity2.alignment3.consistency4.contrast5.2TheFourPrinciplesHerearethefourprinciplesoverlightly:·Proximity.Peopletendtoperceiveitemsthatarelocatedclosetogetherasbeingrelated.Grouprelatedcontentitemsclosetogether.Separateunrelateditems.Forexample,placeparagraphheadingsclosetotheparagraphtheyintroduce.·Alignment.Placerelateditemsalonganimaginaryline.Alignitemsofequalimportance.Indentsubordinateitems.Indentingtheitemsthatbelongtoamainheadingisanexampleofusingalignmenttoclarifymeaning.·Consistency.Makerelateditemslookthesame.Puttinganavigationbarontheleftsideofeverypageofawebsiteisanexampleofconsistency.Makingallofthebuttonsthesamesizeisanother.·Contrast.Makedifferentitemslookdifferent.Thelarge,boldletteringofachaptertitlesetsitapartfromthesmallerletteringinthebodyofthepage.Awebpagewithgoodvisualorganizationdrawsonallfourprinciples.Usuallyyouwillusesomecombinationofthesefourprincipleswhenyouareplacingitemsonapage,butthisfirstdiscussionwilllookateachprincipleinisolation.5.3ProximityThisisoneoftheGestaltprinciplesdiscussedinChapter2.ApplyingProximitycanaddclaritytoapagebyorganizingrelateditems.Figure1showsapreliminarystudyforthenavigationalplanforadepartmentstore.Figure2isabetterlayout,usingproximitytoconveycontentorganization.Dan’sClothingStoreCheckoutCloseoutonpinksocksEmailusJulyspecialsKid’sclothesMen’sclothesOpenanaccountSaleonrainwearSpecialsizesStorelocationsYouraccountstatusWomen’sclothesDan’sClothingStoreWomen’sclothesMen’sclothesKid’sclothesSpecialsizesJulyspecialsSaleonrainwearCloseoutonpinksocksStorelocationsOpenanaccountYouraccountstatusCheckoutEmailusFigure1FirstsketchFigure2AbetterlayoutFromFigure1,whatdidourdeveloperforget?Hardtosay,sincewecan’tinterviewhim,butareasonableguesswouldbethatheforgottoconsulthistaskanalysisandcard-sortinginterviews.Ifhehadremembered,hewouldhaverealizedthatpeoplegotothewebsiteforastorewithdifferentgoals.Somewanttobrowsestofindspecificitems;someareattractedtosalesandspecials;someneedtointeractwiththestoreonaccountmatters.Supposethatthecard-sortinginterviewsyieldedthefollowinggroup:Group1:Women’sclothes,Men’sclothes,Kid’sclothes,SpecialsizesGroup2:JulySpecial,Salesonrainwear,CloseoutonpinksocksGroup3:StorelocationGroup4:Openanaccount,YouraccountstatusGroup5:CheckoutGroup6:Emailus.Figure2showsabetterlayout.Theorganizationwillbeasclearasawhole.Thisshowsthatclosetotheperformanceofthesurfacethingsseemmorecloselyrelatedtotheorganizationtogether.Thistongue-in-cheekexampleemphasizesthebasicideaofproximity,whichisusingvisualorganizationtoconveycontentorganization,whichisusingvisualorganizationtoconveycontentorganization.Itisn’tjustthatyoushouldgroupsimilarthingstogether;youshouldseparatethemfromthingsthataredifferent.Asthetermisusedinwebsitedesign,“proximity”ispositive-thingsclosetogetherarerelated,butitisalsonegative-thingsthatareseparatedaredifferent.5.4AlignmentTheGestaltpsychologyconceptofcontinuityleadsdirectlytotheprincipleofvisualorganization,whichisalignment.Theword“alignment”comesfromtheLatinrootfor“l(fā)ine”.Ingraphicdesign,itusuallyhastodowithhowthingsarepositionedalongavirtualorinvisibleline.Pagelayoutswithstrongalignmentwillhavemanyunbrokenlines.ItwouldbehardtofindaWebpagethatdoesnotmakeuseofalignment.Figure3showsapagefromtheEddieBanersite.Thispagehasmanysectionstoit,