【復(fù)合式網(wǎng)頁(yè)界面設(shè)計(jì)9400字（論文）】

復(fù)合式網(wǎng)頁(yè)界面設(shè)計(jì) 目錄一、相關(guān)概念及理論 一、相關(guān)概念及理論（一）WEB界面概述根據(jù)用戶(hù)的需求,可以把網(wǎng)頁(yè)界面的體驗(yàn)分為三個(gè)層面感官層面、行為層面和反思層面。其中,感官層面是指用戶(hù)通過(guò)視、聽(tīng)等感官刺激實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)界面的認(rèn)知。這時(shí),用戶(hù)通過(guò)視、聽(tīng)、觸、嗅等感官刺激能夠體驗(yàn)到網(wǎng)站界面的主題、性質(zhì)、風(fēng)格、色調(diào)、肌理、形狀、裝飾、級(jí)別等信息,顧客接觸到界面設(shè)計(jì)的印象是直觀(guān)的。這種主要由美學(xué)因素決定的界面印象,起到引起用戶(hù)注意的作用。可見(jiàn)視覺(jué)設(shè)計(jì)是非常重要的影響因素。在新形勢(shì)下,網(wǎng)頁(yè)界面的視覺(jué)元素設(shè)計(jì)不能一成不變,僅貫穿第一層面滿(mǎn)足美觀(guān)需求,還要求對(duì)另外個(gè)層面也起到促進(jìn)作用。二是用戶(hù)在使用網(wǎng)頁(yè),即操作時(shí)產(chǎn)生的印象,即行為層面,是指頁(yè)面通過(guò)布局、板塊邏輯設(shè)計(jì)等在功能上的實(shí)現(xiàn)程度。網(wǎng)站的界面設(shè)計(jì)不光要使用戶(hù)感覺(jué)好看,重要是用起來(lái)好用,不僅使用順利而且在用戶(hù)掌控之中。例如流暢的觸摸屏操控總是使人倍感愜意。三是頁(yè)面在使用后期用戶(hù)的評(píng)價(jià)回顧,即反思層面。這個(gè)層面與用戶(hù)感受有關(guān),是用戶(hù)對(duì)自我行為產(chǎn)生的思考。這最能體現(xiàn)成熟設(shè)計(jì)與不合格設(shè)計(jì)的區(qū)別。優(yōu)秀的界面設(shè)計(jì)會(huì)使用戶(hù)在使用過(guò)程中感到舒適、和諧,使用起來(lái)有自豪感甚至“忘適”。網(wǎng)站按照功能分類(lèi),可以分為信息類(lèi)網(wǎng)站、購(gòu)物類(lèi)、視頻類(lèi)、下載類(lèi)、綜合類(lèi)等。按照網(wǎng)站構(gòu)建的異同特點(diǎn)可以分為大信息量、中等信息量和小信息量的個(gè)性化網(wǎng)站。（二）DreamweaverMX簡(jiǎn)介MacromediaDreamweaverMX是創(chuàng)建專(zhuān)業(yè)網(wǎng)站的最佳途徑,同時(shí)也是構(gòu)建強(qiáng)大Internet應(yīng)用程序的最簡(jiǎn)便的途徑。它是Macromedia公司推出的網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)和動(dòng)畫(huà)圖像處理等方面的綜合性工具，它具有強(qiáng)大的功能和友好的工作界面，已經(jīng)被越來(lái)越多的網(wǎng)頁(yè)設(shè)計(jì)者和網(wǎng)站開(kāi)發(fā)人員所接受。隨著該軟件應(yīng)用范圍的擴(kuò)大，其版本得到快速地更新，功能也不斷增強(qiáng)。它集網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)和站點(diǎn)管理功能于一身，具有可視化、跨瀏覽器和支持多平臺(tái)的特性。支持多種標(biāo)準(zhǔn)服務(wù)器終端交互技術(shù)，利用該軟件可開(kāi)發(fā)功能強(qiáng)大、高效的動(dòng)態(tài)交互式網(wǎng)站。Dreamweaver具有以下特點(diǎn)：（1）最佳的制作效率（2）無(wú)可比擬的控制能力（3）所供即所得（4）夢(mèng)幻樣板和XML（5）全方位的呈現(xiàn)（三）復(fù)合式網(wǎng)站設(shè)計(jì)的必要性經(jīng)觀(guān)察研究和思考上百個(gè)網(wǎng)站的模塊架構(gòu)及盈利方式,可以得出如下結(jié)論綜合類(lèi)型的網(wǎng)站需綜合其他類(lèi)型模塊,開(kāi)辟新的商業(yè)模式,以不斷滿(mǎn)足用戶(hù)的需要,而網(wǎng)絡(luò)本身信息量大,信息源廣泛,內(nèi)容形式豐富,增長(zhǎng)速度迅速網(wǎng)站與網(wǎng)站間,鏈接猶如各種吊橋,在原有的復(fù)雜結(jié)構(gòu)中構(gòu)筑新的聯(lián)系,以供用戶(hù)在不同網(wǎng)站間跳躍,其動(dòng)態(tài)性強(qiáng),也加大了網(wǎng)站結(jié)構(gòu)的復(fù)雜性隨著技術(shù)近來(lái)不斷迅猛發(fā)展,用戶(hù)和網(wǎng)站互動(dòng)、交互行為增多,用戶(hù)也更易迷失在浩瀚的信息海洋中。網(wǎng)站呈現(xiàn)綜合型趨勢(shì)的今天,信息架構(gòu)的難度隨之增加,以前單一的網(wǎng)站模式更加復(fù)雜,更加大了網(wǎng)站的整體、搜索系統(tǒng)設(shè)計(jì)、導(dǎo)航系統(tǒng)設(shè)計(jì)的難度。在網(wǎng)站復(fù)雜性增加的今天,信息架構(gòu)的要求和水準(zhǔn)也水漲船高。因此，本文設(shè)計(jì)以及開(kāi)發(fā)復(fù)合式的網(wǎng)站是十分有必要的。（四）復(fù)合式網(wǎng)站的價(jià)值（1）新的盈利方式深入挖掘或開(kāi)發(fā)了用戶(hù)需求,爭(zhēng)取和開(kāi)發(fā)了新的用戶(hù)群,尋找到新的盈利方式。新生的綜合型網(wǎng)站基于對(duì)用戶(hù)需求的探索、市場(chǎng)分析,吸引和發(fā)展了一批用戶(hù)。全新的綜合網(wǎng)站因其明確定位、清晰商業(yè)模式引人注目。（2）提升用戶(hù)體驗(yàn)使用戶(hù)完成任務(wù)更有效、有效率、更高滿(mǎn)意度。綜合型的網(wǎng)站,使用戶(hù)可以在同個(gè)網(wǎng)站上完成多任務(wù),這些任務(wù)可能原來(lái)需要登錄不同的網(wǎng)站,可能更有利于用戶(hù)的管理,它們?cè)谝欢ǔ潭壬瞎?jié)省了用戶(hù)完成任務(wù)的時(shí)間,提高了效率。（3）增加網(wǎng)站粘度對(duì)于已有網(wǎng)站來(lái)說(shuō),不斷提升的用戶(hù)體驗(yàn),新內(nèi)容的適度增加、融合,可使網(wǎng)站保持新鮮感,它們帶給用戶(hù)更多期待和驚喜。在長(zhǎng)期使用中,增加網(wǎng)站的使用粘度。二、復(fù)合式網(wǎng)站設(shè)計(jì)簡(jiǎn)介（一）網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)背景隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，使人類(lèi)的信息資源實(shí)現(xiàn)了高度共享，并從根本上改變了人類(lèi)進(jìn)行信息交流的方式，展開(kāi)了一場(chǎng)史無(wú)前例的信息革命。信息革命對(duì)社會(huì)的各行各業(yè)的促進(jìn)和沖擊作用是巨大的，以計(jì)算機(jī)和網(wǎng)絡(luò)技術(shù)為主的信息技術(shù)，已在社會(huì)各個(gè)領(lǐng)域得到了廣泛應(yīng)用，并逐步改變著人們的生活、學(xué)習(xí)和工作方式，展示出良好的前景。Internet是目前世界上最大的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)，它遍布全球，將世界各地各種規(guī)模的網(wǎng)絡(luò)連接成一個(gè)整體。據(jù)估計(jì)，Internet上內(nèi)容范圍跨越了教育科研、文化事業(yè)、金融、商業(yè)、新聞出版、娛樂(lè)、體育等各個(gè)領(lǐng)域，其用戶(hù)群十分龐大，因此，建設(shè)一個(gè)好的Web站點(diǎn)對(duì)于一個(gè)機(jī)構(gòu)的發(fā)展十分重要。隨著網(wǎng)絡(luò)用戶(hù)要求的不斷提高及計(jì)算機(jī)科學(xué)的迅速發(fā)展，特別是數(shù)據(jù)庫(kù)技術(shù)在Internet中的廣泛應(yīng)用，Web站點(diǎn)向用戶(hù)提供的服務(wù)將越來(lái)越豐富，越來(lái)越人性化。數(shù)據(jù)庫(kù)技術(shù)和網(wǎng)站的結(jié)合是當(dāng)今Web技術(shù)的一個(gè)熱點(diǎn)。有了數(shù)據(jù)庫(kù)的支持，可以擴(kuò)展網(wǎng)頁(yè)的功能，可以方便地設(shè)計(jì)出交互式頁(yè)面，可以構(gòu)造功能強(qiáng)大的后臺(tái)管理系統(tǒng)，可以為網(wǎng)站的更新、維護(hù)提供極大的方便。復(fù)合式網(wǎng)頁(yè)的設(shè)計(jì)以及制作方法隨著Internet的飛速變化也在不斷的更新和發(fā)展，設(shè)計(jì)以及制作的工具也越來(lái)越多，使用的語(yǔ)言也越來(lái)越多。在這個(gè)背景下復(fù)合式網(wǎng)站的制作也隨之興起，并日漸趨于成熟起來(lái)。基于這個(gè)背景，筆者在本次畢業(yè)設(shè)計(jì)中，主要基于復(fù)合式網(wǎng)頁(yè)的使用界面進(jìn)行探討以及分析。（二）網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)的目的和意義網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見(jiàn)，它已成為機(jī)關(guān)、學(xué)校、企事業(yè)單位，甚至尋常百姓家的信息交流的橋梁，為廣大用戶(hù)提供了一個(gè)資源共享和信息交流的平臺(tái)。開(kāi)發(fā)該復(fù)合式網(wǎng)站，其目的有二：第一，使用先進(jìn)的開(kāi)發(fā)平臺(tái)和Web編程技術(shù)，創(chuàng)建一個(gè)功能完備的復(fù)合式網(wǎng)站系統(tǒng)。在開(kāi)發(fā)設(shè)計(jì)的過(guò)程中，充分運(yùn)用技術(shù)，體現(xiàn)其自身具有的優(yōu)點(diǎn)，真正把理論知識(shí)運(yùn)用在實(shí)踐中。第二，開(kāi)發(fā)本復(fù)合式網(wǎng)站，希望能夠給用戶(hù)提供一個(gè)便捷的網(wǎng)站使用平臺(tái)。該網(wǎng)站將為用戶(hù)提供豐富的信息，用戶(hù)可以購(gòu)物、游戲以及進(jìn)行影片分享。與此同時(shí)，網(wǎng)站管理員會(huì)及時(shí)更新網(wǎng)站信息，使得用戶(hù)能夠快速獲取最新的新聞。（三）網(wǎng)頁(yè)設(shè)計(jì)任務(wù)本文的任務(wù)是在.NET平臺(tái)下的Web編程技術(shù)的基礎(chǔ)上，充分運(yùn)用ASP.NET技術(shù)設(shè)計(jì)一個(gè)動(dòng)態(tài)的復(fù)合式網(wǎng)站系統(tǒng)，該網(wǎng)站要體現(xiàn).NET技術(shù)的優(yōu)越性。在設(shè)計(jì)的過(guò)程中，進(jìn)一步學(xué)習(xí)和掌握ASP.NET的核心技術(shù)。這個(gè)復(fù)合式網(wǎng)站主要整合了購(gòu)物網(wǎng)站、影片分享網(wǎng)站以及游戲網(wǎng)站三種為一體的復(fù)合式網(wǎng)站，通過(guò)這三種網(wǎng)站的使用對(duì)象以及使用群體的不同的，來(lái)將所有的網(wǎng)站使用者整合在本次課題設(shè)計(jì)中的復(fù)合式網(wǎng)站平臺(tái)內(nèi)，最終將這三大網(wǎng)站的優(yōu)勢(shì)集合為一體。（四）復(fù)合式網(wǎng)站設(shè)計(jì)的條件及開(kāi)發(fā)環(huán)境該復(fù)合式網(wǎng)站設(shè)計(jì)需要的條件有：（1）具有一定的網(wǎng)絡(luò)條件。（2）系統(tǒng)設(shè)計(jì)的軟件和硬件設(shè)備：Dreamweaver軟件、VB.NET編程語(yǔ)言、FireworksMX、電腦等。（3）文獻(xiàn)數(shù)據(jù)庫(kù)，例如知網(wǎng)、萬(wàn)方等下載論文需要的參考資料。開(kāi)發(fā)環(huán)境：根據(jù)本人所掌握的技術(shù)及本系統(tǒng)的對(duì)硬件平臺(tái)的要求，本文選擇.NET作為系統(tǒng)的開(kāi)發(fā)環(huán)境。Microsoft.NET開(kāi)發(fā)環(huán)境主要包含兩部分內(nèi)容平臺(tái)分別是.NET應(yīng)用程序的運(yùn)行平臺(tái).NETFramework和.NET的開(kāi)發(fā)環(huán)境VisualStudio.NET。VisualStudio是微軟公司推出的開(kāi)發(fā)環(huán)境，可以用來(lái)創(chuàng)建Windows平臺(tái)下的應(yīng)用程序和網(wǎng)絡(luò)應(yīng)用程序，也可以用來(lái)創(chuàng)建網(wǎng)絡(luò)服務(wù)、智能設(shè)備應(yīng)用程序和Office插件。VisualStudio2005包含了一系列高效的、智能的開(kāi)發(fā)工具，它結(jié)合了Microsoft以往編程語(yǔ)言(VB，C#語(yǔ)言)的優(yōu)勢(shì)，不論是為開(kāi)發(fā)初學(xué)者，還是為經(jīng)驗(yàn)豐富的企業(yè)開(kāi)發(fā)團(tuán)隊(duì)都提供了很多全新的、強(qiáng)大的功能。因此，本人選擇VisualStudio2005及C#編程語(yǔ)言作為開(kāi)發(fā)工具。下面是復(fù)合式網(wǎng)站的開(kāi)發(fā)及運(yùn)行環(huán)境。（1）技術(shù)平臺(tái)：微軟的.NET框架。（2）信息服務(wù)器：InternetInformationService6.0。（3）開(kāi)發(fā)語(yǔ)言：ASP.NET2.0技術(shù)框架，實(shí)現(xiàn)語(yǔ)言完全采用c#語(yǔ)言。（4）數(shù)據(jù)庫(kù)：SQLServer2005。（5）服務(wù)器操作系統(tǒng)：開(kāi)發(fā)過(guò)程采用WindowsXPProfessional操作系統(tǒng)，系統(tǒng)實(shí)施后可采用的Windows2003Server或Windows2003Server服務(wù)器操作系統(tǒng)。平臺(tái)硬件標(biāo)準(zhǔn)配置如下表1所示：表1系統(tǒng)運(yùn)行環(huán)境序號(hào)服務(wù)器及客戶(hù)端配置參數(shù)數(shù)量1綜合管理平臺(tái)服務(wù)器刀片式服務(wù)器，2CPU或雙核，4GB內(nèi)存，Windows2003Server操作系統(tǒng)。根據(jù)需要，可作雙機(jī)備份，也可作容災(zāi)備份基本數(shù)量1臺(tái)2客戶(hù)端主機(jī)CPU：IntelCore2雙核，DDR2內(nèi)存，容量2G，硬盤(pán)160G，獨(dú)立顯卡，預(yù)裝正版WindowsXPProfessionalSP3操作系統(tǒng)基本數(shù)量1臺(tái)(根據(jù)客戶(hù)端數(shù)量作調(diào)整)三、復(fù)合式網(wǎng)站需求分析需求分析是軟件生存周期中相當(dāng)重要的一個(gè)階段，通過(guò)開(kāi)發(fā)人員與用戶(hù)之間的廣泛交流，確定待開(kāi)發(fā)軟件的功能、性能、數(shù)據(jù)、界面等要求。需求分析的好壞將直接影響到開(kāi)發(fā)的軟件的成敗。（一）功能需求功能需求說(shuō)明了系統(tǒng)的功能，即系統(tǒng)是如何記錄、計(jì)算、轉(zhuǎn)換和傳輸數(shù)據(jù)的。每個(gè)接口都有它自己的功能。通常，用戶(hù)界面是最重要的接口。（1）用戶(hù)基本需求=1\*GB3①購(gòu)物=2\*GB3②游戲=3\*GB3③影片分享（2）用戶(hù)功能需求=1\*GB3①需要了解站點(diǎn)的總體概況=2\*GB3②需要提供豐富的信息供用戶(hù)瀏覽=3\*GB3③需要擁有一個(gè)用戶(hù)和用戶(hù)之間、用戶(hù)和管理人員之間的信息交流平臺(tái)=4\*GB3④需要發(fā)布公告和重要通知=5\*GB3⑤需要提供友情鏈接=6\*GB3⑥需要讓用戶(hù)知道如何聯(lián)系我們（二）數(shù)據(jù)需求數(shù)據(jù)需求是需求的重要組成部分，用于說(shuō)明系統(tǒng)的輸入、輸出數(shù)據(jù)以及系統(tǒng)內(nèi)部存儲(chǔ)的數(shù)據(jù)。該復(fù)合式網(wǎng)站中，數(shù)據(jù)庫(kù)的內(nèi)容是系統(tǒng)的最重要部分，網(wǎng)站功能的實(shí)現(xiàn)主要用于數(shù)據(jù)維護(hù)和數(shù)據(jù)的各種顯示。其中數(shù)據(jù)模型則說(shuō)明了系統(tǒng)所要存儲(chǔ)的數(shù)據(jù)以及數(shù)據(jù)之間的關(guān)系。下面給出該復(fù)合式網(wǎng)站的實(shí)體/關(guān)系模型。用戶(hù)名用戶(hù)用戶(hù)名用戶(hù)用戶(hù)角色電話(huà)性別電子信箱QQ號(hào)碼個(gè)人簡(jiǎn)介注冊(cè)日期瀏覽次數(shù)影片分享次數(shù)密碼圖1用戶(hù)屬性圖m普通用戶(hù)m普通用戶(hù)瀏覽影片影片購(gòu)物購(gòu)物下載分享回復(fù)管理員編輯影片分享論壇版主刪除置頂購(gòu)物欄目購(gòu)物欄目物品編輯mnmnmmnnn1nnnn11nnn圖2復(fù)合式網(wǎng)站的E-R圖（三）質(zhì)量需求質(zhì)量需求說(shuō)明了系統(tǒng)執(zhí)行功能的好壞程度。許多質(zhì)量需求不僅僅是軟件需求，而是對(duì)整個(gè)系統(tǒng)的需求。下面分別來(lái)進(jìn)行說(shuō)明。（1）界面風(fēng)格需求①風(fēng)格傾向名次：明亮、時(shí)尚、活潑②主色調(diào)傾向名次：橙黃色、紅色、淡紫色（2）可用性需求①網(wǎng)站界面友好，簡(jiǎn)潔清晰，以便用戶(hù)能快速地掌握并使用②網(wǎng)站訪(fǎng)問(wèn)速度要快，避免等待③網(wǎng)站應(yīng)使用通俗的語(yǔ)言，也就是一般用戶(hù)熟悉的詞匯、慣用語(yǔ)和概念，而不是術(shù)語(yǔ)④避免出現(xiàn)有歧義的詞匯，方便用戶(hù)的正確選擇（3）環(huán)境需求需要分享數(shù)據(jù)，上傳文件，因此網(wǎng)站應(yīng)遵循通用的網(wǎng)絡(luò)技術(shù)（4）可維護(hù)性需求網(wǎng)站應(yīng)具有延展性并且可維護(hù)（5）安全性需求用戶(hù)的信息能夠得到尊重，不能被隨意篡改；網(wǎng)站應(yīng)該是安全的盡量不受到黑客的攻擊。四、網(wǎng)站概要設(shè)計(jì)（一）網(wǎng)站結(jié)構(gòu)設(shè)計(jì)根據(jù)網(wǎng)站開(kāi)發(fā)的目的以及上面獲得的需求分析，將網(wǎng)站的內(nèi)容劃分為以下幾個(gè)方面：（1）用戶(hù)登錄注冊(cè)模塊用戶(hù)通過(guò)注冊(cè)，可以成為網(wǎng)站的合法用戶(hù)，并享受網(wǎng)站提供的特別服務(wù)。（2）購(gòu)物網(wǎng)站模塊在本復(fù)合式網(wǎng)站中，購(gòu)物網(wǎng)站模塊是三大網(wǎng)站功能之一，其中購(gòu)物網(wǎng)站模塊可以細(xì)分為商品模塊、用戶(hù)中心模塊、留言板模塊、商品查詢(xún)模塊以及幫助系統(tǒng)模塊。（3）游戲網(wǎng)站模塊在本復(fù)合式網(wǎng)站中，游戲網(wǎng)站模塊也是其中三大主要模塊之一，其中游戲網(wǎng)站模塊可以分為游戲登錄模塊、游戲主界面模塊以及游戲后臺(tái)模塊。（4）影片分享網(wǎng)站模塊在本復(fù)合式網(wǎng)站中，影片風(fēng)向網(wǎng)站模塊也是其中三大主要模塊之一，其中影片分享網(wǎng)站模塊可以分為影片網(wǎng)站主界面、影片觀(guān)看界面模塊以及影片分享模塊。（5）后臺(tái)管理模塊后臺(tái)管理是為管理員提供了一個(gè)方便操作數(shù)據(jù)庫(kù)的平臺(tái)。管理員可以對(duì)用戶(hù)、新聞、影片文件以及網(wǎng)站信息進(jìn)行管理。（二）網(wǎng)站布局設(shè)計(jì)網(wǎng)頁(yè)是網(wǎng)站構(gòu)成的基本元素，網(wǎng)頁(yè)的精彩與否，除了色彩的搭配、文字的變化、圖片的處理等這些不可忽略的因素外，還有一個(gè)非常重要的因素——網(wǎng)頁(yè)的布局。通常有三種網(wǎng)頁(yè)布局技術(shù)：層疊樣式表、表格、框架。該網(wǎng)站中頁(yè)面的板塊布局均采用表格進(jìn)行定位，然后根據(jù)網(wǎng)站的內(nèi)容對(duì)其使用相應(yīng)的CSS樣式。（三）網(wǎng)站視覺(jué)設(shè)計(jì)1.網(wǎng)站風(fēng)格設(shè)計(jì)網(wǎng)站風(fēng)格是一個(gè)抽象的概念，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括網(wǎng)站的CI（標(biāo)志，色彩，字體，標(biāo)語(yǔ)）、版面布局、瀏覽方式、視覺(jué)效果等。風(fēng)格是獨(dú)特的，是站點(diǎn)不同于其它網(wǎng)站的地方，通過(guò)網(wǎng)站的外表、內(nèi)容、文字以及交流，可以概括出一個(gè)站點(diǎn)的個(gè)性。根據(jù)需求分析中用戶(hù)對(duì)界面風(fēng)格的需求，將網(wǎng)站的總體風(fēng)格定義為生動(dòng)活潑、熱情、具有時(shí)尚感。2.網(wǎng)站色彩設(shè)計(jì)色彩能夠在不知不覺(jué)中影響人的心理，左右人的情緒，因此一個(gè)站點(diǎn)根據(jù)自身的內(nèi)容以及性質(zhì)來(lái)對(duì)色彩進(jìn)行定位顯得尤為重要。為了與設(shè)計(jì)的網(wǎng)站風(fēng)格相協(xié)調(diào)，將網(wǎng)站的色彩定義如下：綠色：柔和，能使人精神平緩，給人一種平和的感覺(jué)淡黃色：亮度低，給人溫暖的感覺(jué)紅色：強(qiáng)有力、喜慶的色彩，能使人精神興奮淡紫色：給人寧?kù)o的感覺(jué)黑色：大眾化顏色，不會(huì)產(chǎn)生視覺(jué)疲勞通過(guò)整合風(fēng)格和色彩定位，將網(wǎng)站的視覺(jué)設(shè)計(jì)總結(jié)以下幾點(diǎn)：使用宋體黑色作為網(wǎng)站的主要字體網(wǎng)站中穿插綠色、紅色提示亮點(diǎn)網(wǎng)站標(biāo)志、名稱(chēng)、標(biāo)語(yǔ)明亮活潑，色彩鮮艷使用盡量少的顏色五、網(wǎng)站詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)（一）網(wǎng)站實(shí)現(xiàn)過(guò)程分析首先根據(jù)用戶(hù)需求確定各個(gè)模塊要實(shí)現(xiàn)的功能，然后根據(jù)功能分析設(shè)計(jì)出數(shù)據(jù)庫(kù)，包括各個(gè)數(shù)據(jù)表關(guān)系圖的詳細(xì)結(jié)構(gòu)。實(shí)現(xiàn)功能模塊時(shí)，采用先模塊化，后集成的方式。即對(duì)網(wǎng)站各個(gè)功能模塊分別獨(dú)立設(shè)計(jì)和調(diào)試，在創(chuàng)建網(wǎng)站主頁(yè)面時(shí)再將各個(gè)功能模塊通過(guò)主頁(yè)面的導(dǎo)航菜單系統(tǒng)集成到一起，最后進(jìn)行整體設(shè)計(jì)調(diào)試。在訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)時(shí)，將數(shù)據(jù)庫(kù)連接字符存放在web.Config文件中，避免對(duì)數(shù)據(jù)庫(kù)的反復(fù)連接，并可減少代碼編寫(xiě)，從而提高系統(tǒng)開(kāi)發(fā)效率。用戶(hù)登錄注冊(cè)模塊以及購(gòu)物網(wǎng)站模塊、游戲模塊和影片分享模塊中，涉及到的頁(yè)面比較多，在這里只對(duì)核心頁(yè)面的實(shí)現(xiàn)進(jìn)行介紹。（二）用戶(hù)登錄注冊(cè)模塊該網(wǎng)站中，對(duì)于前面介紹的兩個(gè)模塊，所有用戶(hù)均可使用。也就是說(shuō)未注冊(cè)用戶(hù)也可以享受其功能。但是對(duì)于分享以及留言板和影片上傳以及后臺(tái)管理來(lái)說(shuō)，基于安全性考慮，必須是合法用戶(hù)才可使用。特別是后臺(tái)管理，其安全性更加重要，僅僅允許網(wǎng)站管理員使用。1.功能概述用戶(hù)登錄是影片分享以及影片上傳和后臺(tái)管理的入口，只有合法用戶(hù)才可進(jìn)入。未注冊(cè)用戶(hù)可以先完成注冊(cè)再進(jìn)入網(wǎng)站，實(shí)現(xiàn)瀏覽和分享影片視頻等功能。管理員用戶(hù)登錄后進(jìn)入后臺(tái)管理頁(yè)面進(jìn)行相應(yīng)的操作。2.數(shù)據(jù)庫(kù)設(shè)計(jì)基于不同角色的用戶(hù)擁有不同的權(quán)限，現(xiàn)設(shè)計(jì)表users來(lái)保存網(wǎng)站的所有用戶(hù)信息，包括管理員。其結(jié)構(gòu)如表4-1所示。表2users存放用戶(hù)信息字段名稱(chēng)數(shù)據(jù)類(lèi)型說(shuō)明UserId文本用戶(hù)名（主鍵）RoleId文本用戶(hù)角色：A表示管理員N表示普通用戶(hù)UserPWD文本用戶(hù)密碼UserName文本用戶(hù)姓名Sex文本性別Tel文本電話(huà)Email文本電子信箱QQ文本QQ號(hào)碼Intro備注個(gè)人簡(jiǎn)介SubmitDate日期/時(shí)間注冊(cè)時(shí)間Movie數(shù)字上傳影片數(shù)ReMovie數(shù)字分享影片數(shù)表5-1中，字段RoleId用來(lái)區(qū)分用戶(hù)的角色，不同角色可以實(shí)現(xiàn)不同的功能。另外，當(dāng)用戶(hù)在論壇中每次發(fā)表和回復(fù)文章后，就會(huì)更新Movie和ReMovie字段，這樣就可以隨時(shí)獲取用戶(hù)的上傳影片視頻和分享影片視頻數(shù)目。3.具體實(shí)現(xiàn)（1）注冊(cè)表單register2.aspx用戶(hù)表users中設(shè)置了用戶(hù)名為主鍵，那么在用戶(hù)注冊(cè)的過(guò)程中不可避免會(huì)出現(xiàn)用戶(hù)名重復(fù)的情況，許多網(wǎng)站中，用戶(hù)在提交表單后被拒絕注冊(cè)時(shí)系統(tǒng)才提示用戶(hù)名重復(fù)的問(wèn)題，這樣用戶(hù)輸入的大量信息將無(wú)效。為了避免這種情況，該網(wǎng)站中在用戶(hù)輸入了用戶(hù)名后可以及時(shí)對(duì)其進(jìn)行檢驗(yàn)，檢驗(yàn)數(shù)據(jù)庫(kù)中是否存在該用戶(hù)名的用戶(hù)，存在與否，都會(huì)給用戶(hù)一個(gè)提示。由于難點(diǎn)在于正則驗(yàn)證中正則表達(dá)式的語(yǔ)法，那么在這里列出所有使用了正則驗(yàn)證的正則表達(dá)式。用戶(hù)名：^[a-zA-Z0-9_]{4,20}$——4-20位字母、數(shù)字和下劃線(xiàn)密碼：^[a-zA-Z0-9_]{4,30}$——4-30位字母、數(shù)字和下劃線(xiàn)真實(shí)姓名：^.{1,20}$——1位到20位任意字符電話(huà)：^([0-9]{3,4}-[0-9]{7,8})|([0-9]{11})$——如格式E-mail：^.{1,}@.{1,}\.[a-zA-Z]{2,3}$——如同abceef@163.com的格式QQ號(hào)碼：^[0-9]{5,15}$——5-15位數(shù)字該頁(yè)面負(fù)責(zé)生成了驗(yàn)證碼圖片，那么在注冊(cè)表單中，利用普通的img標(biāo)記顯示該圖片。當(dāng)用戶(hù)提交表單后，將其輸入的驗(yàn)證碼和Session中的驗(yàn)證碼比較即可。（2）登錄表單登錄模塊使用了用戶(hù)控件，由于所占版面比較小，把它放在了網(wǎng)站的主頁(yè)中。用戶(hù)在登錄時(shí)系統(tǒng)會(huì)判斷其身份，如果是管理員，將進(jìn)入后臺(tái)管理頁(yè)面；如果是普通用戶(hù)，在進(jìn)入影片分享網(wǎng)站界面后，可以瀏覽影片、上傳影片、分享影片；如果是某個(gè)欄目的版主，除了瀏覽影片、上傳影片、分享影片外，還可以實(shí)現(xiàn)刪除影片和將影片置頂?shù)墓δ?。用?hù)登錄以后，頁(yè)面上顯示歡迎用戶(hù)登錄字樣，并允許用戶(hù)修改個(gè)人基本信息和修改密碼。在修改個(gè)人信息和修改密碼頁(yè)面表單中同樣使用了驗(yàn)證控件。（三）購(gòu)物網(wǎng)站模塊1.功能概述網(wǎng)站是交流的重要工具，目前在門(mén)戶(hù)網(wǎng)站、游戲、教育、娛樂(lè)等網(wǎng)站中的作用都非常大。該購(gòu)物網(wǎng)站模塊支持多個(gè)板塊，但只支持一級(jí)分類(lèi)。普通消費(fèi)者用戶(hù)可以瀏覽商品、購(gòu)買(mǎi)商品；而對(duì)于購(gòu)物網(wǎng)站的賣(mài)家來(lái)說(shuō)，可以上傳商品，對(duì)商品的信息進(jìn)行編輯，以及管理自己的店鋪等。2.數(shù)據(jù)庫(kù)設(shè)計(jì)根據(jù)上面介紹的功能，下面來(lái)進(jìn)行數(shù)據(jù)庫(kù)的設(shè)計(jì)。由于該購(gòu)物網(wǎng)站模塊支持多個(gè)板塊，因此首先設(shè)計(jì)一張欄目信息表forum，如同前面購(gòu)物網(wǎng)站模塊中的產(chǎn)品類(lèi)別表一樣。結(jié)構(gòu)如表5-2所示。表3forum存放論壇欄目字段名稱(chēng)數(shù)據(jù)類(lèi)型說(shuō)明ForumId自動(dòng)編號(hào)商品編號(hào)（主鍵）ForumName文本商品名稱(chēng)ForumCount數(shù)字商品數(shù)目ForumManager文本賣(mài)家ForumPicture文本商品圖片表5-2中，字段ForumCount統(tǒng)計(jì)該欄目中的商品數(shù)目，其實(shí)在存放商品信息的表中也可以統(tǒng)計(jì)，但是經(jīng)常統(tǒng)計(jì)計(jì)算會(huì)花費(fèi)大量的時(shí)間，該字段放在表5-5中，只要用戶(hù)上傳商品時(shí)更新一下該數(shù)目即可。下面來(lái)設(shè)計(jì)表商品，該表比較重要，用來(lái)存放所有商品章。其結(jié)構(gòu)如表5-3所示。表4商品欄目存放商品字段名稱(chēng)數(shù)據(jù)類(lèi)型說(shuō)明BBSId自動(dòng)編號(hào)商品編號(hào)（主鍵）ForumId數(shù)字商品編號(hào)Title文本商品標(biāo)題Body備注商品內(nèi)容FatherId數(shù)字商品編號(hào)Childs數(shù)字購(gòu)買(mǎi)商品次數(shù)Hits數(shù)字點(diǎn)擊次數(shù)UserId文本買(mǎi)家用戶(hù)名Email文本買(mǎi)家支付信息SubmitDate日期/時(shí)間上傳商品時(shí)間SetTop數(shù)字是否購(gòu)買(mǎi)1是0否LastUserId文本最后更新時(shí)間3.具體實(shí)現(xiàn)購(gòu)物網(wǎng)站模塊的實(shí)現(xiàn)采用了三層結(jié)構(gòu)，并且使用了業(yè)務(wù)對(duì)象。使用業(yè)務(wù)對(duì)象，可以把開(kāi)發(fā)中經(jīng)常用的功能封裝起來(lái)，然后就可以在各個(gè)頁(yè)面像使用內(nèi)置類(lèi)一樣方便地調(diào)用。下面對(duì)該設(shè)計(jì)用到了業(yè)務(wù)對(duì)象源文件作一個(gè)簡(jiǎn)單的介紹。1)源文件Common.vbCommon.vb中定義了一個(gè)類(lèi)ConvertString，用來(lái)轉(zhuǎn)換字符串。它的兩個(gè)共享方法HTMLEncode和URLEncode分別用于顯示HTML標(biāo)記和UBB代碼。2)源文件DataUsers.vb在用戶(hù)登錄注冊(cè)模塊、論壇模塊以后后面將要介紹的后臺(tái)管理模塊，都要對(duì)用戶(hù)進(jìn)行管理。源文件DataUsers.vb則主要用于用戶(hù)管理，其中定義了四個(gè)類(lèi)。DataUsers類(lèi)主要用于添加、刪除用戶(hù)等操作，它的屬性和方法如表4-4所示。表5DataUsers類(lèi)的屬性和方法名稱(chēng)類(lèi)型說(shuō)明Count屬性獲取注冊(cè)的用戶(hù)數(shù)目GetUser方法獲取所有用戶(hù)InsertUser方法添加用戶(hù)DeleteUser方法刪除用戶(hù)UpdateUserInfo方法更新用戶(hù)個(gè)人信息UpdatePWD方法更新用戶(hù)密碼IsExist方法查找指定用戶(hù)名是否存在IsPassed方法判斷用戶(hù)名和密碼是否正確Items方法返回一個(gè)DataUser對(duì)象DataUser類(lèi)則主要用來(lái)返回一個(gè)用戶(hù)的各種信息和對(duì)該用戶(hù)進(jìn)行操作，它的屬性和方法如表5-5所示。表6DataUser類(lèi)的屬性和方法名稱(chēng)類(lèi)型說(shuō)明UserId屬性獲取用戶(hù)名RoleId屬性獲取用戶(hù)角色DataUserLog類(lèi)主要用來(lái)判斷用戶(hù)是否已經(jīng)登錄，是否具有相應(yīng)的權(quán)限。它有兩個(gè)共享方法IsNormal和IsAdmin，分別用來(lái)判斷登錄用戶(hù)是否是普通用戶(hù)和管理員。（3）購(gòu)物網(wǎng)站詳細(xì)頁(yè)面particular.aspx在goodsslist.aspx頁(yè)面中，當(dāng)選定商品標(biāo)題時(shí)，就可以打開(kāi)particular.aspx頁(yè)面，在其中利用Repeater控件顯示該標(biāo)題對(duì)應(yīng)的商品內(nèi)容和相應(yīng)的商品詳情。并且在下方提供一個(gè)購(gòu)買(mǎi)商品的表單。利用Repeater控件綁定數(shù)據(jù)時(shí)，每綁定一條記錄后，就會(huì)執(zhí)行MyRepeater_ItemDataBound過(guò)程。顯示發(fā)表該文章的用戶(hù)信息時(shí)，此處利用一個(gè)用戶(hù)控件，將用戶(hù)名UserId傳遞給該用戶(hù)控件，其中就會(huì)顯示用戶(hù)名、發(fā)表和回復(fù)數(shù)目、是否在線(xiàn)等信息。為了顯示HTML標(biāo)記和UBB代碼，其中用到了ConvertString類(lèi)的方法。顯示數(shù)據(jù)時(shí)，利用SetForm過(guò)程將商品編號(hào)GoodsId保存到一個(gè)隱藏的文本框中，用于添加商品時(shí)使用。此外，還自動(dòng)設(shè)置了商品標(biāo)題、商品詳情以及商品購(gòu)買(mǎi)信息。六、網(wǎng)站測(cè)試與性能分析網(wǎng)站測(cè)試是保證網(wǎng)站質(zhì)量的主要手段，其主要方式是在設(shè)計(jì)測(cè)試用例的基礎(chǔ)上檢驗(yàn)網(wǎng)站的各個(gè)組成部分是否符合網(wǎng)站需求。該網(wǎng)站主要包括五大功能模塊，在設(shè)計(jì)各個(gè)功能模塊的過(guò)程中，采用白盒測(cè)試的方法對(duì)各個(gè)模塊進(jìn)行測(cè)試，以發(fā)現(xiàn)編碼和詳細(xì)設(shè)計(jì)過(guò)程中發(fā)現(xiàn)的錯(cuò)誤。設(shè)計(jì)完所有模塊，對(duì)其進(jìn)行集成測(cè)試，檢查模塊間的接口和通信，最后進(jìn)行確認(rèn)測(cè)試。其中集成測(cè)試和確認(rèn)測(cè)試采用了黑盒測(cè)試。下面分別對(duì)網(wǎng)站的各個(gè)重要模塊設(shè)計(jì)測(cè)試用例，進(jìn)行測(cè)試。測(cè)試過(guò)程以及測(cè)試結(jié)果用網(wǎng)站界面表示出來(lái)。首先給出網(wǎng)站的首頁(yè)，其中包括網(wǎng)站標(biāo)志、名稱(chēng)，網(wǎng)站導(dǎo)航，站點(diǎn)公告，站點(diǎn)日歷，新聞以及名站導(dǎo)航。測(cè)試十：在注冊(cè)表單中，輸入個(gè)人信息。“檢測(cè)用戶(hù)名”可以判斷用戶(hù)輸入的用戶(hù)名是否已經(jīng)存在。如果輸入用戶(hù)名test，測(cè)試結(jié)果顯示如圖6-1。圖3檢測(cè)用戶(hù)名用戶(hù)輸入用戶(hù)名123，則提示“只能輸入4-20位字母數(shù)字合下劃線(xiàn)”，如圖5-2。圖4用戶(hù)名錯(cuò)誤用戶(hù)輸入確認(rèn)密碼和密碼不一致，如圖5-3。圖5密碼錯(cuò)誤當(dāng)在注冊(cè)表單中輸入的所有信息都通過(guò)驗(yàn)證后，點(diǎn)擊“確定”按鈕，則注冊(cè)成功。在注冊(cè)表單中輸入的用戶(hù)信息如下圖6-4所示。圖6注冊(cè)表單填寫(xiě)完注冊(cè)表單，點(diǎn)擊“確定”按鈕，則提示注冊(cè)成功，如圖6-5所示。圖7注冊(cè)成功注冊(cè)完畢用戶(hù)，返回到登錄頁(yè)面，輸入以上注冊(cè)的用戶(hù)名和密碼，則進(jìn)入網(wǎng)站。各大界面實(shí)現(xiàn)圖：圖8購(gòu)物網(wǎng)站主界面（1）圖9購(gòu)物網(wǎng)站主界面（2）圖10游戲網(wǎng)站主界面圖11影片分享網(wǎng)站主界面總結(jié)本設(shè)計(jì)實(shí)現(xiàn)了一個(gè)基于ASP.NET的復(fù)合式網(wǎng)站系統(tǒng)。