水果網(wǎng)站項目規(guī)劃與設(shè)計目錄一、項目背景 11、選題的目的和意義 12、課題研究的主要簡介 1二、網(wǎng)站開發(fā)平臺 1三、網(wǎng)站建設(shè)日程表 2四、站點地圖 2五、線框圖 31、主頁布局 32、子頁布局 3六、設(shè)計規(guī)范及網(wǎng)頁UI設(shè)計 31、設(shè)計愿望 42、確定網(wǎng)站主題 53、確定網(wǎng)站形象 54、確定網(wǎng)站風(fēng)格 55、確定網(wǎng)站內(nèi)容 5七、主要頁面的詳細(xì)設(shè)計圖 6八、網(wǎng)站測試 81、測試準(zhǔn)備 82、用戶界面測試 83、功能測試 84、兼容性測試 9九、網(wǎng)站推廣與維護 91.網(wǎng)站推廣 92、網(wǎng)站維護 9PAGE1一、項目背景1、選題的目的和意義近年來，互聯(lián)網(wǎng)已日益成為收集提供信息的最佳渠道并進入傳統(tǒng)的流通領(lǐng)域。在Internet上發(fā)布商業(yè)信息，商品廣告，使用戶可以查閱商品、搜索商品、訂購商品，為客戶提供全天候的、更好、更快的商務(wù)活動空間，實現(xiàn)網(wǎng)上交易的基本功能。網(wǎng)站依據(jù)目前商業(yè)網(wǎng)站的設(shè)計原則，以網(wǎng)上交易功能為主，輔于娛樂、廣告、導(dǎo)購等功能，是一個綜合性電子商務(wù)網(wǎng)站。本課題是設(shè)計一個水果網(wǎng)站，目的是為了更好的服務(wù)用戶。2、課題研究的主要簡介水果網(wǎng)站網(wǎng)站是給用戶一個方便的購物空間，登陸水果網(wǎng)界面，根據(jù)自己的需求選擇瀏覽，其功能有以下：（1）用戶可以通過瀏覽主頁，了解公司的簡介以及圖片展示（2）用戶通過瀏覽子頁，可以對水果進行細(xì)致的了解二、網(wǎng)站開發(fā)平臺功能模塊技術(shù)和軟件平臺操作系統(tǒng)Windows8設(shè)計稿、圖形處理PhotoshopCS6動畫設(shè)計制作FlashCS5網(wǎng)頁制作平臺MyEclipse6.0網(wǎng)站開發(fā)語言Java，Sqlserver網(wǎng)站測試平臺Chrome，F(xiàn)irefox三、網(wǎng)站建設(shè)日程表完成整個項目所需時間為三個月，其中各項規(guī)劃任務(wù)如下表所示：時間任務(wù)內(nèi)容3月9日-16日擬定項目3月17日-23日制定初步項目計劃4月6日-19日網(wǎng)站初步框架4月20日-5月1日網(wǎng)站內(nèi)容具體豐富5月2日-5月10日總結(jié)反思，網(wǎng)站細(xì)節(jié)完善5月11日-24日計劃微調(diào)，網(wǎng)站用戶體驗感測試5月25日-6月7日網(wǎng)站裝飾再加工，CSS布局，JS語言,后臺數(shù)據(jù)庫設(shè)計6月8日-6月15日最終測試四、站點地圖五、線框圖1、主頁布局背景圖片跑馬燈公示文字登錄注冊背景圖片跑馬燈公示文字登錄注冊圖片主商品展示區(qū)圖片版權(quán)及其他版權(quán)設(shè)計LLogo圖片2、子頁布局背景圖片背景圖片跑馬燈公示文字登錄注冊圖片主商品展示區(qū)圖片版權(quán)及其他版權(quán)設(shè)計LLogo圖片六、設(shè)計規(guī)范及網(wǎng)頁UI設(shè)計本系統(tǒng)是采用了MyEclipse6.0開發(fā)平臺，運用Java語言和SQLServer2005數(shù)據(jù)庫進行實現(xiàn)設(shè)計的。該水果網(wǎng)站主界面的主要實現(xiàn)功能包括注冊用戶管理功能、登陸用戶管理功能、留言管理功能、搜索管理功能、相關(guān)圖片查看管理功能等。1、設(shè)計愿望當(dāng)用戶點擊希望去的界面時，就會自動的鏈接到用戶希望的那個網(wǎng)頁。展現(xiàn)給用戶相應(yīng)的界面，在每個界面都會有這幾個選項卡，用戶可以在其中自由的切換。2、確定網(wǎng)站主題建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰。如果網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結(jié)果不但瀏覽者看得糊涂，自己擴充和維護網(wǎng)站也相當(dāng)困難。網(wǎng)站的題材確定后，并且收集和組織了許多相關(guān)的資料內(nèi)容，但如何組織內(nèi)容才能吸引網(wǎng)友們來瀏覽網(wǎng)站呢？欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。3、確定網(wǎng)站形象網(wǎng)站形象的設(shè)計可以從網(wǎng)站的LOGO、網(wǎng)站的色彩、網(wǎng)站的字體宣傳語等這些方面著手。圖6-1Logo設(shè)計網(wǎng)站色彩，網(wǎng)站給人的第一印象來自于視覺的沖擊，不同的色彩搭配會產(chǎn)生不同的效果，并可能影響到訪問者的情緒?！皹?biāo)準(zhǔn)色彩”指的是能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，給人們一種以整體統(tǒng)一的感覺。我個人網(wǎng)站的色彩是以橙色為主，黑色的字體和淺色的圖像給人一種舒服的感覺，仿佛生活在虛幻的世界里。網(wǎng)站字體，和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)題、主菜單的一些特有字體。為了體現(xiàn)網(wǎng)站所特有的風(fēng)格，可以根據(jù)自已的網(wǎng)站所表達的內(nèi)涵，選擇更貼切的字體。我的個人網(wǎng)站的標(biāo)準(zhǔn)字體是華文彩體。給人一種沉穩(wěn)而不失俏皮的感覺。表格布局的過程：設(shè)計出框架為800*1000的布局表格，再在表格中添加適當(dāng)?shù)膯卧矜溄釉O(shè)計制作的過程：主頁與五個子頁進行連接圖片處理的過程：單元格設(shè)定好，圖片大小和單元格同等大小然后添加導(dǎo)航按鈕的設(shè)置等等4、確定網(wǎng)站風(fēng)格風(fēng)格是抽象的，指網(wǎng)站的整體形象給瀏覽者留下的綜合感受。這個“整體形象”包括網(wǎng)站的LOGO、網(wǎng)站的色彩、網(wǎng)站的字體、網(wǎng)站的標(biāo)語等許多因素。網(wǎng)站是可以平易近人的、生動活潑的，也可以是嚴(yán)肅專業(yè)的。但不管是在色彩、技術(shù)、文字、布局、還是交互方式上，只要能由此讓瀏覽者明確的看出這是你的網(wǎng)站所獨有的，這就形成了一種風(fēng)格。風(fēng)格是有人性的，它通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式等可以綜合概括出一個網(wǎng)站的自己的個性；我的網(wǎng)站風(fēng)格是以舒服為主，給人一種舒舒服服的感覺。5、確定網(wǎng)站內(nèi)容本水果網(wǎng)站是為了方便廣大用戶在網(wǎng)上進行購物、瀏覽信息以及交流等。該平臺是自主開發(fā)設(shè)計，因此不會構(gòu)成侵權(quán)，在法律上是可行的。用戶在進行購買時，首先需要通過注冊界面進行用戶注冊然后通過登錄界面對身份進行驗證，確認(rèn)驗證信息合法后進入后臺管理的主界面。主界面提供了包括注冊用戶注冊管理功能、登陸用戶管理功能、留言管理功能、搜索管理功能、相關(guān)圖片查看管理功能、等模塊的鏈接。每個模塊都具有自己的頁面和功能，根據(jù)人機界面設(shè)計指南和模塊功能可以設(shè)計用戶界面。用戶注冊以后通過登錄界面輸入相應(yīng)信息，系統(tǒng)對其身份進行驗證，驗證信息合法后便可以進入到網(wǎng)站的主界面進行購買商品界面，在購買界面中用戶可以選擇想購買的商品，點擊“購買”用戶所購買的商品就存入到本水果網(wǎng)站的數(shù)據(jù)庫中了，用戶購買完商品可以點擊“查看購物車”來查看用戶所選購的商品及金額，用戶還可以點擊“移除”來修改用戶所選購的商品，也可以點擊“繼續(xù)購買”再次進入到購買界面進行購買。購買完商品以后用戶可以點擊“留言”來對本網(wǎng)站進行留言，輸入相應(yīng)的信息點擊“提交”，用戶的留言就成功了，用戶點擊“查看留言”可以查看自己的留言及本網(wǎng)站的其他留言。七、主要頁面的詳細(xì)設(shè)計圖（1）用戶進入水果網(wǎng)站主界面瀏覽相關(guān)內(nèi)容可以進行相應(yīng)的操作，水果網(wǎng)站主界面如圖index所示。圖index水果網(wǎng)站主界面（2）用戶可以在水果網(wǎng)站的主界面通過點擊“注冊”可以進入注冊界面進行注冊，填寫相關(guān)信息，填寫完以后點擊“提交”系統(tǒng)對用戶填寫的信息進行驗證。水果網(wǎng)站的注冊界面如圖reg所示。圖reg水果網(wǎng)站注冊界面用戶可以在水果網(wǎng)站的主界面通過點擊“登陸”可以進入水果網(wǎng)站的登陸界面，用戶填寫登錄信息（用戶名和密碼），系統(tǒng)根據(jù)用戶填寫的信息進行相關(guān)的驗證，驗證成功用戶進入下一界面。水果網(wǎng)站的登陸界面如圖denglu所示。圖denglu水果網(wǎng)站登陸界面（4）用戶填寫完登陸信息以后進入到登陸成功界面。水果網(wǎng)站登陸成功界面如圖dlchenggong所示。圖dlchenggong水果網(wǎng)站登陸成功界面（5）用戶在沒有注冊前進入水果網(wǎng)站點擊主頁的產(chǎn)品鏈接到相關(guān)的頁查看相應(yīng)的圖片信息點擊“蘋果”查看圖片信息。水果網(wǎng)站蘋果界面如圖pinggu所示。圖pingguo水果網(wǎng)站蘋果鏈接界面（6）用戶在沒有進行注冊前進入水果網(wǎng)站瀏覽主界面時，可以點擊主頁的產(chǎn)品鏈接到相關(guān)的頁面查看相應(yīng)的水果圖片信息，點擊“梨”就鏈接到查看梨的相關(guān)界面，通過該界面可以顯示”梨“的相關(guān)圖片信息及水果的相應(yīng)價格。本網(wǎng)頁會提示用戶線進行注冊才能進入網(wǎng)站購買水果。水果網(wǎng)站梨界面如圖li所示。圖juzi水果網(wǎng)站橘子鏈接界面（7）用戶可以通過本頁來購買需要的水果種類及查看水果的單價。用戶可以通過點擊“購買“就可以把想要購買的水果數(shù)量及水果種類添加到本水果網(wǎng)站的數(shù)據(jù)庫中。水果網(wǎng)站購買界面如圖goumai所示。圖goumai水果網(wǎng)站購買界面（8）用戶可以通過點擊“查看購物車”跳轉(zhuǎn)到本頁來查看用戶所購買的水果及應(yīng)付的錢數(shù)，還可以點擊“移除”來減少選購水果的數(shù)量。水果網(wǎng)站購物車界面如圖shoppcar所示。圖shoppcar水果網(wǎng)站查看購物車界面（9）當(dāng)用戶買完水果以后還可以對本水果網(wǎng)站進行留言。水果網(wǎng)站留言界面如圖liuyan。所示。圖liuyan水果網(wǎng)站留言界面用戶留言完畢點擊“提交”用戶就留言成功了，用戶可以點擊“查看留言”來查看自己的留言及他人的留言。水果網(wǎng)站查看留言界面如圖lyshow所示。圖lyshow水果網(wǎng)站查看留言界面八、網(wǎng)站測試1、測試準(zhǔn)備測試前對被測系統(tǒng)做好以下準(zhǔn)備：系統(tǒng)的全面?zhèn)浞?，包括?yīng)用程序備份、數(shù)據(jù)備份等；記錄測試前系統(tǒng)狀態(tài)；制定應(yīng)急措施，確保在測試中發(fā)生問題時系統(tǒng)可恢復(fù)。測試員應(yīng)在測試開始前了解網(wǎng)頁的相關(guān)情況，對測試的預(yù)期結(jié)果應(yīng)進行準(zhǔn)備和預(yù)測。測試前要做好真實數(shù)據(jù)的準(zhǔn)備工作，并進行系統(tǒng)的數(shù)據(jù)初始化。2、用戶界面測試主要測試導(dǎo)航條、內(nèi)容、顏色、背景、圖像、返回等。3、功能測試主要測試站點中的鏈接等。鏈接測試：目的是檢查各個URL所聯(lián)接的頁面是否正確。表單測試：目的是檢查每個表單與程序是否正確聯(lián)接，能夠正確地發(fā)送用戶請求。4、兼容性測試主要檢驗應(yīng)用能否在不同的客戶端使用。如蘋果（iOS系統(tǒng)的）用戶，經(jīng)常使用chrome，F(xiàn)irefox等瀏覽器的用戶是否都能正常使用。九、網(wǎng)站推廣與維護1.網(wǎng)站推廣（1）微信公眾平臺、朋友圈、微博、QQ空間推廣（2）論壇推廣我們可以注冊幾十個論壇，每個論壇注冊若干個帳號，把簽名設(shè)為自己的網(wǎng)站及團隊圖標(biāo)。發(fā)表熱門內(nèi)容，自己頂自己的帖子。目前我們應(yīng)用的論壇包括校內(nèi)的極速之星、外網(wǎng)的百度貼吧、天涯論壇、豆瓣等等網(wǎng)民較為聚集的地方。（3）電子郵件推廣我們會像宜家一樣讓用戶進行自愿注冊會員，瀏