一、項(xiàng)目背景（1）網(wǎng)站需求分析隨著計(jì)算機(jī)科學(xué)的迅速發(fā)展及網(wǎng)絡(luò)用戶要求的不斷提高，特別是數(shù)據(jù)庫技術(shù)在Internet中的廣泛應(yīng)用，Web站點(diǎn)向網(wǎng)絡(luò)用戶提供的服務(wù)將越來越豐富，越來越人性化，信息化管理被人們所重視。電子商務(wù)（ElectronicCommerce，簡(jiǎn)稱E-commerce）隨即誕生，成為當(dāng)前產(chǎn)物，以滿足人們足不出戶即可搜集信息、實(shí)時(shí)購物等要求。時(shí)代的發(fā)展把我們推向網(wǎng)絡(luò)化和信息化的巨潮，這給我們帶來了無限的機(jī)遇，也帶來了巨大的挑戰(zhàn)。如何更好地利用網(wǎng)絡(luò)化和信息化，成為我們?cè)谖磥淼母?jìng)爭(zhēng)中占據(jù)有利地位的關(guān)鍵問題。在這種情況下，綠色家居行業(yè)領(lǐng)導(dǎo)者品牌網(wǎng)站網(wǎng)站需要結(jié)合公司自己的實(shí)際情況，設(shè)計(jì)開發(fā)一個(gè)具有以宣傳與購物為主的多功能網(wǎng)站平臺(tái)，它則是一個(gè)典型的Web電商系統(tǒng)，由網(wǎng)絡(luò)服務(wù)器和網(wǎng)頁實(shí)現(xiàn)。電子商務(wù)是通過采用數(shù)字科技與Internet作為最基本的溝通手段，將企業(yè)價(jià)值進(jìn)行持續(xù)不斷的優(yōu)化配置的過程。本網(wǎng)站功能包括網(wǎng)站首頁，關(guān)于我們，產(chǎn)品展示，新聞中心，案例展示，榮譽(yù)資質(zhì)，客戶見證，人才招聘，客戶留言，聯(lián)系我們。（2）網(wǎng)站的目的及功能定位綠色家居行業(yè)領(lǐng)導(dǎo)者品牌網(wǎng)站是給用戶一個(gè)方便的家居展示體系，登陸公司網(wǎng)界面，根據(jù)自己的需求選擇瀏覽，其功能有以下：（1）用戶可以通過瀏覽主頁，了解公司的簡(jiǎn)介以及圖片展示；（2）用戶通過瀏覽子頁，可以對(duì)公司詳細(xì)內(nèi)容進(jìn)行細(xì)致的了解；二、網(wǎng)站開發(fā)平臺(tái)功能模塊技術(shù)和軟件平臺(tái)操作系統(tǒng)Windows8設(shè)計(jì)稿、圖形處理PhotoshopCS6動(dòng)畫設(shè)計(jì)制作FlashCS5網(wǎng)頁制作平臺(tái)Dreamweaver網(wǎng)站開發(fā)語言HTML,CSS,JavaScript網(wǎng)站測(cè)試平臺(tái)Chrome，F(xiàn)irefox三、網(wǎng)站建設(shè)日程表完成整個(gè)項(xiàng)目所需時(shí)間為三個(gè)月，其中各項(xiàng)規(guī)劃任務(wù)如下表所示：時(shí)間任務(wù)內(nèi)容2月9日-16日擬定項(xiàng)目2月17日-23日制定初步項(xiàng)目計(jì)劃3月6日-19日網(wǎng)站初步框架3月20日-4月1日網(wǎng)站內(nèi)容具體豐富4月2日-4月10日總結(jié)反思，網(wǎng)站細(xì)節(jié)完善4月11日-24日計(jì)劃微調(diào)，網(wǎng)站用戶體驗(yàn)感測(cè)試4月25日-5月7日網(wǎng)站裝飾再加工，CSS布局，JS語言5月8日-5月10日最終測(cè)試四、站點(diǎn)地圖綠色家居行業(yè)領(lǐng)導(dǎo)者品牌網(wǎng)站新聞中心案例展示榮譽(yù)資質(zhì)客戶見證關(guān)于我們?nèi)瞬耪衅妇W(wǎng)站首頁產(chǎn)品展示聯(lián)系我們客戶留言綠色家居行業(yè)領(lǐng)導(dǎo)者品牌網(wǎng)站新聞中心案例展示榮譽(yù)資質(zhì)客戶見證關(guān)于我們?nèi)瞬耪衅妇W(wǎng)站首頁產(chǎn)品展示聯(lián)系我們客戶留言線框圖網(wǎng)站首頁：Logo圖片搜索欄電話導(dǎo)航欄banner動(dòng)畫產(chǎn)品展示關(guān)于我們Logo圖片搜索欄電話導(dǎo)航欄banner動(dòng)畫產(chǎn)品展示關(guān)于我們案例展示展示模塊底部版權(quán)所有及其它子頁面：Logo圖片搜索欄電話導(dǎo)航欄Logo圖片搜索欄電話導(dǎo)航欄banner圖片子頁面主介紹底部版權(quán)所有及其它六、設(shè)計(jì)規(guī)范（1）視覺風(fēng)格：網(wǎng)站整體風(fēng)格將圍繞“簡(jiǎn)約”、“輕快”這兩個(gè)主題。各國(guó)都別具一格，富有自己國(guó)家的特點(diǎn)，但仍然有相互聯(lián)系，統(tǒng)一的整體效果。①顏色：首頁設(shè)計(jì)以白色為基調(diào)，運(yùn)用綠色進(jìn)行融合搭配，突出網(wǎng)站活潑清爽的格調(diào)。另外運(yùn)用flash和其他形式的動(dòng)態(tài)技術(shù)效果，強(qiáng)調(diào)網(wǎng)站的特色同時(shí)也更能吸引瀏覽者的注意。但不會(huì)使用純度很高的顏色，否則不適宜閱讀。會(huì)使用偏灰色系的顏色，簡(jiǎn)約的現(xiàn)代感，營(yíng)造靜謐的氛圍，烘托食物的鮮艷，誘人。超鏈接的各個(gè)時(shí)段的顏色也會(huì)統(tǒng)一，目前鼠標(biāo)移上去和點(diǎn)擊時(shí)統(tǒng)一為白色。②字體：為了美化頁面，提高視覺效果，使用纖細(xì)，清新的字體，且面包屑、主導(dǎo)航和頁面上各個(gè)標(biāo)題的字體都統(tǒng)一。目前使用的英文字體為yellowpeasdemo和SIMPLIFICATypeface。③圖像：采用貼合企業(yè)氣息的背景，背景采用白色系，能夠快速吸引客戶瀏覽。Logo設(shè)計(jì)符合企業(yè)特色，用文字設(shè)計(jì)。Logo設(shè)計(jì)④分辨率：所制作的網(wǎng)頁將自動(dòng)調(diào)整分辨率以適應(yīng)顯示器分辨率，不管在1024還是800的分辨率下都可以配合用戶達(dá)到較佳的視覺效果。（2）布局設(shè)計(jì)①空間的合理利用：在網(wǎng)頁的上端顯示檢索欄等信息，圖片都先以小圖標(biāo)形式展現(xiàn)，鼠標(biāo)挪動(dòng)致圖片位置將展現(xiàn)細(xì)節(jié)圖，劃過處可進(jìn)一步放大，即節(jié)約了空間，同時(shí)營(yíng)造出一種簡(jiǎn)潔現(xiàn)代的感覺。②動(dòng)態(tài)效果：會(huì)在圖片和一些特色小機(jī)關(guān)上賦予動(dòng)態(tài)效果，如跳動(dòng)，閃爍，放大縮小等。③其他附加效果：超鏈接下劃線的顯隱，目錄的跳轉(zhuǎn)，后期可能會(huì)加上音樂播放器功能。七、網(wǎng)頁UI設(shè)計(jì)我們將堅(jiān)持以用戶體驗(yàn)為中心設(shè)計(jì)原則，界面直觀、簡(jiǎn)潔，操作方便快捷，瀏覽者將對(duì)界面上對(duì)應(yīng)的功能一目了然。保持頁面內(nèi)元素風(fēng)格，版式一致。使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色，顯示信息含義明確。顯示有意義的出錯(cuò)信息，而不是單純的程序錯(cuò)誤代碼。減持高效地使用顯示器的顯示空間，保持語言的一致性與可選擇性。我們將遵循瀏覽者從上而下，自左向右瀏覽、操作習(xí)慣，盡量多做“減法”運(yùn)算，將不常用的功能區(qū)塊隱藏，以保持界面的簡(jiǎn)潔。在頁面顯眼位置應(yīng)該出現(xiàn)面包屑導(dǎo)航欄，讓用戶知道當(dāng)前所在頁面的位置，并明確導(dǎo)航結(jié)構(gòu)。并且為頁面導(dǎo)航加以設(shè)計(jì)規(guī)劃。主要頁面的詳細(xì)設(shè)計(jì)圖九、網(wǎng)站測(cè)試（1）測(cè)試準(zhǔn)備測(cè)試前對(duì)被測(cè)系統(tǒng)做好以下準(zhǔn)備：系統(tǒng)的全面?zhèn)浞?，包括?yīng)用程序備份、數(shù)據(jù)備份等；記錄測(cè)試前系統(tǒng)狀態(tài)；制定應(yīng)急措施，確保在測(cè)試中發(fā)生問題時(shí)系統(tǒng)可恢復(fù)。測(cè)試員應(yīng)在測(cè)試開始前了解網(wǎng)頁的相關(guān)情況，對(duì)測(cè)試的預(yù)期結(jié)果應(yīng)進(jìn)行準(zhǔn)備和預(yù)測(cè)。測(cè)試前要做好真實(shí)數(shù)據(jù)的準(zhǔn)備工作，并進(jìn)行系統(tǒng)的數(shù)據(jù)初始化。（2）用戶界面測(cè)試主要測(cè)試導(dǎo)航條、內(nèi)容、顏色、背景、圖像、返回等。（3）功能測(cè)試主要測(cè)試站點(diǎn)中的鏈接等。鏈接測(cè)試：目的是檢查各個(gè)URL所聯(lián)接的頁面是否正確。表單測(cè)試：目的是檢查每個(gè)表單與程序是否正確聯(lián)接，能夠正確地發(fā)送用戶請(qǐng)求。（4）兼容性測(cè)試主要檢驗(yàn)應(yīng)用能否在不同的客戶端使用。如蘋果（iOS系統(tǒng)的）用戶，經(jīng)常使用chrome，F(xiàn)irefox等瀏覽器的用戶是否都能正常使用。十、網(wǎng)站推廣微信公眾平臺(tái)、朋友圈、微博、QQ空間推廣（2）論壇推廣我們可以注冊(cè)幾十個(gè)論壇，每個(gè)論壇注冊(cè)若干個(gè)帳號(hào)，把簽名設(shè)為自己的網(wǎng)站及團(tuán)隊(duì)圖標(biāo)。發(fā)表熱門內(nèi)容，自己頂自己的帖子。目前我們應(yīng)用的論壇包括校內(nèi)的