北理工網(wǎng)站規(guī)劃及設(shè)計大作業(yè)

.8/8《網(wǎng)站設(shè)計與規(guī)劃》大作業(yè)要求自選主題,撰寫開發(fā)某靜態(tài)網(wǎng)站的"項(xiàng)目規(guī)劃與設(shè)計文檔"。具體要求如下：通用規(guī)則1.撰寫認(rèn)真:文檔應(yīng)具有統(tǒng)一性〔所有內(nèi)容都指向同一個清晰的主題、一致性〔所有內(nèi)容的組織清晰合理,符合邏輯和支持性〔有具體的細(xì)節(jié)或案例。沒有各種文字錯誤。2.正確的格式化:使用標(biāo)題、列表、留白等機(jī)制,讓文檔適宜閱讀。關(guān)于項(xiàng)目規(guī)劃&設(shè)計是否/如何回答了以下問題?項(xiàng)目是什么?項(xiàng)目的來源或背景?項(xiàng)目的具體內(nèi)容〔是否有樹狀圖或其他方式的示意圖讓我們清楚知道網(wǎng)站即將包括的內(nèi)容？項(xiàng)目的技術(shù)細(xì)節(jié),比如開發(fā)平臺、運(yùn)行平臺等？詳細(xì)的任務(wù)分解?詳細(xì)的時間表?是否有示例圖幫助我們理解?是否符合專業(yè)文檔撰寫規(guī)范？是否包括了以下內(nèi)容：站點(diǎn)地圖〔Sitemap：即信息架構(gòu)圖。線框圖〔wireframe：可手繪后照照片,也可以用軟件繪制。如果是手繪圖,應(yīng)保證內(nèi)容清晰可見。設(shè)計規(guī)范〔designspecification：至少包括顏色設(shè)計、字體設(shè)計、圖像設(shè)計、布局設(shè)計等方案,需包含主要頁面的詳細(xì)設(shè)計圖。避免抄襲現(xiàn)象：如果發(fā)現(xiàn)抄襲或雷同,成績不及格。

網(wǎng)站項(xiàng)目規(guī)劃與設(shè)計目錄TOC\o"1-3"\h\u7348一、項(xiàng)目背景22482〔1網(wǎng)站需求分析230089〔2網(wǎng)站的目的及功能定位214269二、網(wǎng)站開發(fā)平臺217762三、網(wǎng)站建設(shè)日程表312132四、站點(diǎn)地圖418816五、線框圖432758六、設(shè)計規(guī)范526275七、網(wǎng)頁UI設(shè)計72849八、主要頁面的詳細(xì)設(shè)計圖828678九、網(wǎng)站測試930319〔1測試準(zhǔn)備932602〔2用戶界面測試97635〔3功能測試911693〔4兼容性測試914208十、網(wǎng)站推廣9.一、項(xiàng)目背景〔1網(wǎng)站需求分析隨著不同國家之間交流越來越廣泛,不同國家的飲食文化也隨之傳播,人們逐漸開始產(chǎn)生了解不同國家飲食的需求。近年來,舌尖上的中國的熱播,通過對中華美食的多個側(cè)面,來展現(xiàn)食物給中國人生活帶來的儀式、倫理等方面的文化。由此我們深受啟發(fā),準(zhǔn)備讓大家見識多個有代表性的國家特色食材以及與食物相關(guān)、構(gòu)成他們各自美食特有氣質(zhì)的一系列元素,從而了解世界飲食文化的精致和源遠(yuǎn)流長。出自對事物的熱愛,對自然的敬畏,同時為了讓大家更多地了解世界廣大的飲食文明,我們決定制作六個最具有代表性的國家的飲食介紹,相信會獲得各年齡階層曾的青睞。〔2網(wǎng)站的目的及功能定位目的及功能：展示各國各地的美食,使大眾全方位了解不同地區(qū)的飲食文化；為吃貨的旅行提供參考；介紹大學(xué)食堂趣聞,貼近生活,展現(xiàn)另類美食風(fēng)采目標(biāo)人群：美食愛好者,各國文化愛好者,幾乎輻射各年齡階層二、網(wǎng)站開發(fā)平臺功能模塊技術(shù)和軟件平臺操作系統(tǒng)Windows8設(shè)計稿、圖形處理PhotoshopCS6動畫設(shè)計制作FlashCS5網(wǎng)頁制作平臺Dreamweaver網(wǎng)站開發(fā)語言HTML,CSS,JavaScript網(wǎng)站測試平臺Chrome,Firefox三、網(wǎng)站建設(shè)日程表完成整個項(xiàng)目所需時間為三個月,其中各項(xiàng)規(guī)劃任務(wù)如下表所示：時間任務(wù)內(nèi)容3月9日-16日擬定項(xiàng)目3月17日-23日制定初步項(xiàng)目計劃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)站用戶體驗(yàn)感測試5月25日-6月7日網(wǎng)站裝飾再加工,CSS布局,JS語言6月8日-6月15日最終測試四、站點(diǎn)地圖五、線框圖AnunexpectedAnunexpectedDelicacyJourneyCHINA相關(guān)圖片INDIACHINA相關(guān)圖片INDIA相關(guān)圖片JAPAN相關(guān)圖片TURKEYTURKEY相關(guān)圖片ITALY相關(guān)圖ITALY相關(guān)圖片ENGLAND相關(guān)圖片CONTACTCOUNTRIESABOUTUSSHARECONTACTCOUNTRIESABOUTUSSHARECONTACTCOUNTRIESABOUTUSSHARElogo導(dǎo)航面包屑CONTACTCOUNTRIESABOUTUSSHARElogo導(dǎo)航面包屑〔2單頁布局起源起源內(nèi)容內(nèi)容分類分類內(nèi)容內(nèi)容特色特色內(nèi)容內(nèi)容支持平臺如微博,微信的圖標(biāo)支持平臺如微博,微信的圖標(biāo)六、設(shè)計規(guī)范〔1視覺風(fēng)格：網(wǎng)站整體風(fēng)格將圍繞"簡約"、"輕快"這兩個主題。各國都別具一格,富有自己國家的特點(diǎn),但仍然有相互聯(lián)系,統(tǒng)一的整體效果。①顏色：首頁設(shè)計以藍(lán)紫灰為基調(diào),運(yùn)用米黃進(jìn)行融合搭配,突出網(wǎng)站活潑清爽的格調(diào)。另外運(yùn)用flash和其他形式的動態(tài)技術(shù)效果,強(qiáng)調(diào)網(wǎng)站的特色同時也更能吸引瀏覽者的注意。每個國家單獨(dú)的一組網(wǎng)頁的配色,我們決定采用每個國家國旗的主要顏色,如意大利為綠、白、紅,中國主要為紅色等等但不會使用純度很高的顏色,否則不適宜閱讀。會使用偏灰色系的顏色,簡約的現(xiàn)代感,營造靜謐的氛圍,烘托食物的鮮艷,誘人。超鏈接的各個時段的顏色也會統(tǒng)一,目前鼠標(biāo)移上去和點(diǎn)擊時統(tǒng)一為白色。②字體：為了美化頁面,提高視覺效果,使用纖細(xì),清新的字體,且面包屑、主導(dǎo)航和頁面上各個標(biāo)題的字體都統(tǒng)一。目前使用的英文字體為yellowpeasdemo和SIMPLIFICATypeface。③圖像：采用貼合國家氣息的背景,背景盡量少繁復(fù)而實(shí)物圖片則選擇鮮艷,能夠引起人們食欲的,明亮暖色調(diào)的圖片。④分辨率：所制作的網(wǎng)頁將自動調(diào)整分辨率以適應(yīng)顯示器分辨率,不管在1024還是800的分辨率下都可以配合用戶達(dá)到較佳的視覺效果?！?布局設(shè)計①空間的合理利用：在網(wǎng)頁的上端顯示檢索欄等信息,圖片都先以小圖標(biāo)形式展現(xiàn),鼠標(biāo)挪動致圖片位置將展現(xiàn)細(xì)節(jié)圖,劃過處可進(jìn)一步放大,即節(jié)約了空間,同時營造出一種簡潔現(xiàn)代的感覺。②動態(tài)效果：會在圖片和一些特色小機(jī)關(guān)上賦予動態(tài)效果,如跳動,閃爍,放大縮小等。③其他附加效果：超鏈接下劃線的顯隱,目錄的跳轉(zhuǎn),后期可能會加上音樂播放器功能。七、網(wǎng)頁UI設(shè)計我們將堅持以用戶體驗(yàn)為中心設(shè)計原則,界面直觀、簡潔,操作方便快捷,瀏覽者將對界面上對應(yīng)的功能一目了然。保持頁面內(nèi)元素風(fēng)格,版式一致。使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色,顯示信息含義明確。顯示有意義的出錯信息,而不是單純的程序錯誤代碼。減持高效地使用顯示器的顯示空間,保持語言的一致性與可選擇性。我們將遵循瀏覽者從上而下,自左向右瀏覽、操作習(xí)慣,盡量多做"減法"運(yùn)算,將不常用的功能區(qū)塊隱藏,以保持界面的簡潔。在頁面顯眼位置應(yīng)該出現(xiàn)面包屑導(dǎo)航欄,讓用戶知道當(dāng)前所在頁面的位置,并明確導(dǎo)航結(jié)構(gòu)。并且為頁面導(dǎo)航加以設(shè)計規(guī)劃。八、主要頁面的詳細(xì)設(shè)計圖九、網(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)進(jìn)行準(zhǔn)備和預(yù)測。測試前要做好真實(shí)數(shù)據(jù)的準(zhǔn)備工作,并進(jìn)行系統(tǒng)的數(shù)據(jù)初始化?！?用戶界面測試主要測試導(dǎo)航條、內(nèi)容、顏色、背景、圖像、返回等。〔3功能測試主要測試站點(diǎn)中的鏈接等。鏈接測試：目的是檢查各個URL所聯(lián)接的頁面是否正確。表單測試：目的是檢查每個表單與程序是否正確聯(lián)接,能夠正確地發(fā)送用戶請求?！?兼容性測試主要檢驗(yàn)應(yīng)用能否在不同的客戶端使用。如蘋果〔iOS系統(tǒng)的用戶,經(jīng)常使用chrome,Firefox等瀏覽器的用戶是否都能正常使用。十、網(wǎng)站推廣微信公眾平臺、朋友圈、微博、QQ空間推廣〔2論壇推廣我們可以注冊幾十個論壇,每個論壇注冊若干個帳號,把簽名設(shè)