1、網站項目規劃與設計目錄一、項目背景 1（ 1 ）網站需求分析1（ 2）網站的目的及功能定位1二、網站開發平臺 1三、網站建設日程表 1四、站點地圖 2五、線框圖 2六、設計規范 2七、網頁UI 設計 4八、主要頁面的詳細設計圖 4九、網站測試 4（1 ）測試準備 4（2）用戶界面測試 4（3）功能測試 4（4）兼容性測試 4十、網站推廣 4一、項目背景(1)網站需求分析隨著不同國家之間交流越來越廣泛，不同國家的飲食文化也隨之傳播，人們逐漸開始產生了解不同國家飲食的需求。近年來，舌尖上的中國的熱播，通過對中華 美食的多個 側面，來展現食物給 中國人生活帶來的儀式、倫理等方面的文化。由此我們深受啟

2、發，準備讓大家見識多個有代表性的國家特色食材以及與食物相關、構成他們各自美食特有氣質的一系列 元素，從而了解 世界飲食文化 的精致和源遠流長。出自對事物的熱愛，對自然的敬畏，同時為了讓大家更多地了解世界廣大的飲食文明，我們決定制作六個最具有代表性的國家的飲食介紹，相信會獲得各年齡階層曾的青睞。(2)網站的目的及功能定位目的及功能：展示各國各地的美食，使大眾全方位了解不同地區的飲食文化；為吃貨的旅行提供參考；介紹大學食堂趣聞，貼近生活，展現另類美食風采目標人群：美食愛好者，各國文化愛好者，幾乎輻射各年齡階層二、網站開發平臺功能模塊技術和軟件平臺操作系統Windows 8設計稿、圖形處理Photo

3、shop CS6動畫設計制作Flash CS5網頁制作平臺Dreamweaver網站開發語言HTML, CSS, JavaScript網站測試平臺Chrome, Firefox三、網站建設日程表完成整個項目所需時間為三個月，其中各項規劃任務如下表所示:時間任務內容3月9日-16日擬定項目3月17日-23日制定初步項目計劃4月6日-19日網站初步框架4月20日-5月1日網站內容具體豐富5月2日-5月10日總結反思，網站細節完善5月11日-24日計劃微調，網站用戶體驗感測試5月25日-6月7日網站裝飾再加工， CSS布局，JS語言6月8日-6月15日最終測試四、站點地圖五、線框圖(1)首頁布局(2

4、)單頁布局六、設計規范(1)視覺風格:An unexpected片D DelicacyJora片JAPAN相關圖片TURKEY相關圖片ITALY相關圖相關圖片CONTACT COUNTRIESABOUT US SHARElogo面包屑 起源CONTACT COUNTRIES ABOUT US SHARE內容分類特色支持平臺如微博，微信的圖標內容網站整體風格將圉繞“簡約”、“輕快”這兩個主各國都別具一格，蜜有自己國家的特點，但仍然有相互聯系,統一的整體效果顏色：首頁設計以藍紫灰為產調，運用米黃進行融合搭配，突出網站活發清爽的格調。另外運用flash和其他形式的動態技術效果，強調網站的特色同時也更

5、能吸引瀏覽者的注意每個國家單獨的一組網頁的配色，我們決定采用每個國家國旗的主要顏色，如意大利為綠、白、紅，中國主要為紅色等但不會使用純度很高的顏色，否則不適宜閱讀。會使用偏灰色系的顏色，簡約的現代感，營造靜謐的氛圍，烘托食物的鮮艷，誘人。超鏈接的各個時段E勺顏色也會統一，目前鼠標移上去和點擊時統一為白色。字體：為了美化頁面，提高視覺效果，使用纖細，清新的字體，且面包屑、主導航和頁面上各個標題的字體都統目前使用的英文字體為yellow peas demo 和 SIMPLIFICATypeface圖像：采用貼合國家氣息的背景，背景盡量少繁復而實物圖片則選擇鮮艷，能夠引起人們食欲的，明亮暖色調的圖片

6、。分辨率：所制作的網頁將 自動調整分辨率以適應顯示器分辨率，不管在1024還是800的分辨率下都可以配合用戶達到較佳的視覺效果。(2)布局設計空間的合理利用：在網頁的上端顯示檢索欄等信息，圖片都先以小圖標形式展現，鼠標 挪動致圖片位置將展現細節圖，劃過處可進一步放大，即節約了空間，同時營造出一種簡潔現 代的感覺。動態效果：會在圖片和一些特色小機關上賦予動態效果，如跳動，閃爍，放大縮小等。其他附加效果：超鏈接下劃線的顯隱，目錄的跳轉，后期可能會加上音樂播放器功能。 七、網頁UI設計我們將堅持以用戶體驗為中心設計原則，界面直觀、簡潔，操作方便快捷，瀏覽者將對界 面上對應的功能一目了然。保持頁面內元

7、素風格，版式一致。使用一致的標記、標準縮寫和顏色，顯示信息含義明確。顯示有意義的出錯信息，而不是單純的程序錯誤代碼。減持高效地使用顯示器的顯示空間，保持語言的一致性與可選擇性。我們將遵循瀏覽者從上而下，自左向右瀏覽、操作習慣，盡量多做“減法”運算，將不常 用的功能區塊隱藏，以保持界面的簡潔。在頁面顯眼位置應該出現面包屑導航欄，讓用戶知道當前所在頁面的位置，并明確導航結構。并且為頁面導航加以設計規劃。八、主要頁面的詳細設計圖九、網站測試(1)測試準備測試前對被測系統做好以下準備：系統的全面備份，包括應用程序備份、數據備份 等；記錄測試前系統狀態；制定應急措施，確保在測試中發生問題時系統可恢復。測

8、試員 應在測試開始前了解網頁的相關情況，對測試的預期結果應進行準備和預測。測試前要做 好真實數據的準備工作，并進行系統的數據初始化。(2)用戶界面測試主要測試導航條、內容、顏色、背景、圖像、返回等。(3)功能測試主要測試站點中的鏈接等。鏈接測試：目的是檢查各個URL所聯接的頁面是否正確。表單測試：目的是檢查每個表單與程序是否正確聯接，能夠正確地發送用戶請求。(4)兼容性測試主要檢驗應用能否在不同的客戶端使用。如蘋果(iOS系統的)用戶，經常使用chrome, Firefox等瀏覽器的用戶是否都能正常使用。十、網站推廣(1)微信公眾平臺、朋友圈、微博、QQ空間推廣(2)論壇推廣我們可以注冊幾十個論壇，每個論壇注冊若干個帳號，把簽名設為自己的網站及團隊圖 標。發表熱門內容，自己頂自己的帖子。目前我們應用的論壇包括校內的極速之星、外網的百 度貼吧、天涯論壇、豆瓣等等網民較為聚