網(wǎng)站規(guī)劃與設計戀愛主義網(wǎng)站項目規(guī)劃與設計目錄TOC\o"1-3"\h\u19246一、項目背景 一、項目背景本網(wǎng)站設計為戀愛主義網(wǎng)站。戀愛，它是男女互相愛慕的行為表現(xiàn)。在不同時代有不同的定義，而在現(xiàn)代定義為兩個人基于一定的物質(zhì)條件和共同的人生理想。在各自內(nèi)心形成的對對方的最真摯的仰慕，并渴望對方成為自己終生伴侶的最強烈、最穩(wěn)定、最專一的感情，在遠古的母系社會、古代的父系社會，愛情的另一種體驗，并不是單純的一夫一妻制。但隨著社會的發(fā)展，愛情也在向文明的方向發(fā)展。而在當代大學生中，戀愛是一種很普遍存在的現(xiàn)象，不論是男生，還是女生，他們大多會選擇自己的戀愛對象，彼此有一個依靠，這個依靠不同于親情、友情，戀人之間相處更親密，更無話不談。戀愛又分為四個階段：1.初戀：剛剛進入戀愛階段，了解還不是很深入，還有一定的模糊感。2.熱戀：戀愛雙方看到的都是彼此的優(yōu)點，對周圍環(huán)境漠不關心，可以說雙方都已經(jīng)迷戀其中了。3.依戀：雙方在日常生活已離不開對方，離開一陣子都會覺得不順心、有一種心不安的感覺。4.平淡：戀愛雙方都已經(jīng)冷靜下來，留下的大部分是理性，而缺少了激情，需要進一步的理由來點燃愛情的火焰，比如說婚姻。很多情侶都是在這一環(huán)節(jié)沒走完的，當然，完成這一環(huán)節(jié)意味著下一步進入婚姻階段?，F(xiàn)在我們建立的這個網(wǎng)站，就是有關于戀愛的，名為“戀愛主義”，主要是想通過這個網(wǎng)站，讓更多的人了解正確的戀愛觀，同時也可以分享一些戀愛感悟，讓人知道一些戀愛技巧，為自己的戀愛過程增添一些趣味。而且我們的網(wǎng)站多以文章為主，所以在最終成型的網(wǎng)站中，文章會占很大一部分內(nèi)容。二、網(wǎng)站開發(fā)平臺功能模塊技術和軟件平臺操作系統(tǒng)Windows8設計稿、圖形處理PhotoshopCS6動畫設計制作FlashCS5網(wǎng)頁制作平臺Dreamweaver網(wǎng)站開發(fā)語言HTML,CSS,JavaScript網(wǎng)站測試平臺Chrome，F(xiàn)irefox三、網(wǎng)站建設日程表完成整個項目所需時間為三個月，其中各項規(guī)劃任務如下表所示：時間任務內(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日總結反思，網(wǎng)站細節(jié)完善5月11日-24日計劃微調(diào)，網(wǎng)站用戶體驗感測試5月25日-6月7日網(wǎng)站裝飾再加工，CSS布局，JS語言6月8日-6月15日最終測試四、網(wǎng)站結構與文件目錄1、網(wǎng)站邏輯結構（1）網(wǎng)站欄目結構首頁首頁戀愛通告戀愛物語心靈脈搏櫻空斷點愛與成長心理測試戀愛短信、戀愛情書戀愛故事、戀愛詩詞、戀愛名句火花四濺、幸?；ê鄻驓堁?、空釋戀空回味過去、品味現(xiàn)在、展望未來(測測你一生會愛幾個人！)（2）網(wǎng)站文件層次圖首頁首頁主頁導航動畫、文章、電影、戀愛通告、戀愛物語、心靈脈搏櫻空斷點愛與成長心理測試通過鏈接，轉(zhuǎn)到其他頁面五、網(wǎng)頁與關鍵元素設計理念1、網(wǎng)站設計理念（1）設計風格本次的課程設計以“戀愛”為主題，整體風格走“清新”、“甜蜜”路線，不管是文字、圖片，還是動畫，都會以其為主，比如文字內(nèi)容，會有戀愛短信、戀愛情書、戀愛故事、戀愛詩詞，同時也會有一些有關戀愛的感悟、技巧等，還會有戀愛的小測試；圖片方面，景和物會以“心”形和代表愛情（比如：玫瑰）東西或是兩兩相關的東西（比如：對戒）為主，人物則多用戀人牽手、擁抱，或是一眼就能看出兩人是戀人關系的圖片；動畫也會與其有關，這個會在下面詳細介紹。（2）色彩戀愛，給人的感覺是甜蜜、幸福、多姿多彩，所以我們的網(wǎng)站的色彩會以粉色為主，但同時也會輔以其他的淺色系的顏色，使網(wǎng)頁更加的繽紛多彩，雖然顏色多，但不會雜亂。每種顏色都有它獨特的意義，同時，不同的搭配也會有不同的效果，而我們就是要讓網(wǎng)頁看起來很舒服，不會有什么突兀的感覺。2、關鍵元素設計理念（1）Logo我們的主題是“戀愛”，而logo也就與其有關，它是用“心”拼成的一個大的“心”。先打開Fireworks應用軟件，在畫布上劃出一個心，在色彩處理上，用彩色充滿，表示戀愛中的多姿多彩，然后，將這個心再粘貼、復制多次，再用它們重新拼成一個大的心，而這么多的心圍在一起，就是說戀愛時的男女雙方，要多用心呵護他們之間的愛情。（2）導航 導航共分為七項，分別是：首頁、戀愛通告、戀愛物語、心靈脈搏、櫻空斷點、愛與成長和心理測試。其中，戀愛通告是要“大膽說出愛”，“通告”的意義就在于此，所以這個欄目分為“戀愛短信”和“戀愛情書”；“戀愛物語”是說一些戀愛時的私語，包括“戀愛文章”、“戀愛詩詞”和“戀愛名句”；然后是“心靈脈搏”，“脈搏”會讓人想到跳動，從而聯(lián)想到活力、激情、陽光，所以這個欄目分為：“火花四濺”和“幸?；ê！?；戀愛中難免會有一些不愉快或者是不幸的結局，所以在“戀愛”的網(wǎng)站中也一定要有此類內(nèi)容，“櫻空斷點”就是為此而設。櫻花會讓人看到一種凄美的愛情，“斷”又會讓人聯(lián)想到不美好的事，這就是這個欄目名稱的由來，它又包含了兩個子欄目“斷橋殘雪”和“空釋戀空”；還有“愛與成長”，在戀愛過程中，戀人攜手，一步步走來，總會有一些美好的回憶，同時也會有對未來的美好愿望，這個欄目就體現(xiàn)了這個含義，它包括：“回味過去”、“品味現(xiàn)在”和“展望未來三個子欄目；最后是“心理測試”，這個欄目的主要目的是為了放松，它比較有趣味，會通過一個小的測試測測你“與眾不同”的方面，當然，它并不一定真實，只是會用測試來達到讓人放松的目的，（3）首頁首頁共有六個模塊：簡短動畫、推薦文章、推薦電影、青春校園、愛情語錄、愛情散文。這六個模塊，每個都被分別框起來，框的樣式也不同，其中的色彩也不同，而首頁的背景又是白色，整體看起來，清新、簡單，又不失可愛。（4）動畫Flash動畫的名稱是《一千零一個愿望》，它講述了一對戀人相識、相知、相戀的故事：動畫的開頭是一個女孩獨自走在車站內(nèi)，接著，女孩想起了她和男孩相連的事在一個冬天，男孩和女孩在網(wǎng)上相遇，他們開始相互傾訴，兩人慢慢熟悉起來，然后，兩人戀愛了，因為彼此，那個冬天不再寒冷。后來男孩因為一些事情，外出了，兩人的聯(lián)系少了，女孩漸漸感覺到了無比的寂寞，在經(jīng)過內(nèi)心斗爭后，她踏上了尋找男孩的路。這個動畫看起來很簡單，但也精致，再加上音樂，整體看上去，很不錯。當打開首頁時，動畫就會開始播放，而在打開別的網(wǎng)頁時，它就會自動停止，直到再次回到首頁，《一千零一個愿望》的音樂就會再響起。（5）電影在首頁中共推薦了五部電影，每部電影結局不同，有的痛失戀人，有的卻又事業(yè)、愛情雙豐收，無論如何，每一部都值得一看。六、線框圖1、首頁頁面布局導航圖片背景圖片子頁面布局導航圖片背景圖片文字文字七、網(wǎng)頁UI設計我們將堅持以用戶體驗為中心設計原則，界面直觀、簡潔，操作方便快捷，瀏覽者將對界面上對應的功能一目了然。保持頁面內(nèi)元素風格，版式一致。使用一致的標記、標準縮寫和顏色，顯示信息含義明確。顯示有意義的出錯信息，而不是單純的程序錯誤代碼。減持高效地使用顯示器的顯示空間，保持語言的一致性與可選擇性。我們將遵循瀏覽者從上而下，自左向右瀏覽、操作習慣，盡量多做“減法”運算，將不常用的功能區(qū)塊隱藏，以保持界面的簡潔。在頁面顯眼位置應該出現(xiàn)面包屑導航欄，讓用戶知道當前所在頁面的位置，并明確導航結構。并且為頁面導航加以設計規(guī)劃。八、主頁面設計圖及設計規(guī)范圖片此為網(wǎng)頁的中部，包括文字連接，圖片鏈接，以及視頻簡介的連接，以粉色為底，配以淺藍色的文字，多彩的圖片，從而顯現(xiàn)戀愛網(wǎng)頁的單純格調(diào)圖片此為網(wǎng)頁的上半部分，導航，Logo，唯美的圖片，右上部分的心形圖案為Logo,超炫的“戀愛主義”藝術字效果，和導航的名字都讓人耳濡目染。從而體會到戀愛的那種唯美的畫面。大方而不失色調(diào)。此為網(wǎng)頁的一小部分，文字的鏈接與青春戀愛相關的主體文字，以及青春向上的積極的態(tài)度來面對生活，達到理性中的網(wǎng)站的積極樂觀的精神面貌愛情語錄重疊的文字放在首頁，讓瀏覽者一遍又一遍的去觸摸文字，從而在心靈之窗留下多彩而又不可忘卻的記憶愛情散文同“愛情語錄”相同，不同的文字下卻又偏重于同一理念，有用不同的文字表達，這樣，相得益彰，恰到好處，照應題目，又顯得整體布局大方，清晰此為Logo以及其背景圖片，首頁底色為粉色，配以紫色，從色彩角度來講，清麗卻又不失高貴典雅，顯得莊重，而心形的Logo多彩的色調(diào)，富有靈氣，與戀愛時刻的美妙心有靈犀格外地清麗圖片文字鏈接唯美的愛情宣言，滄海桑田的變遷，?？菔癄€的誓言，都似乎悄悄在戀愛的季節(jié)里生根發(fā)芽，與青春打馬走過的年華格格相應導航鏈接六個不同的詞匯包含了戀愛中的酸甜苦辣，簡單又不失華麗，又有著與愛戀中的感受息息相關的體味和那種對青春，生活的態(tài)度首頁的文字無連接在導航下面，你，我，他，象征著青春里的愛情，親情，友情三者風一般的掠過，有著怎樣的的意義，又有著怎樣的印痕，都成為我們每個人青春里的不能說的秘密子網(wǎng)頁首頁導航中的下拉菜單的連接一點點文字拼湊而來的卻又整齊地坐落在讀者的眼眶中，是一種享受子網(wǎng)頁首頁導航中下拉菜單的連接純純的文字，勾勒出來的畫面，讓人馬上回想起那些自己青春里走過的人，掠過的故事，更多的不是在讀而是在品味自己的青春子網(wǎng)頁首頁導航下拉菜單的連接可愛的圖片，讓我們更多的是來自視覺上的享受，無論從顏色，或者是勾勒出的圖像上，都似乎發(fā)生過一般子網(wǎng)頁首頁導航中下拉菜單的連接文字來說明，戀愛的境界圖片則展示不同境界的相同感受，或者說是一種自上而下的順暢子網(wǎng)頁首頁下拉菜單中的連接唯美的詩句，昭示古人的愛情觀，又有著多少可能和不可能的機會，才會曉得，該如何去體會蘊含在詞中的含義子網(wǎng)頁首頁導航中下拉菜單的連接斷橋殘雪，戀愛過的感受是刻骨銘心的，無論最后的結局如何，那種沉浸在其中的幸福是無法抹殺的子網(wǎng)頁首頁導航中下拉菜單的連接空釋戀空，走過，從青春的街角，我們彼此守望，卻有說不清道不明的錯覺，悲傷，快樂子網(wǎng)頁大樹下，我們自由的成長，那種無法表露的懵懂的心靈的無可代替的小小心結，都是走過青春里留下的奪目的財富子網(wǎng)頁與Logo的相似圖像，有著更加迷離的背景，心牽著心，好比青春里的故事，是你我主角的相互的變化，而令我們永遠也無法琢磨透的是那信譽新建的情思子網(wǎng)頁戀愛的季節(jié)，單車，成為了十分亮麗的風景線，不是孤孤單單的景，而是有著多少幸福在里面，到現(xiàn)在，也許經(jīng)歷過的人們都不曾hi忘記子網(wǎng)頁不可能所有戀愛的時刻都是幸福的，遇上了，愛上了，錯過了，結束了，便是一種幸福，慢慢的紅色格調(diào)是我對你的深深地祝福子網(wǎng)頁手拉著手并不走在大街上，也許，眼中只有彼此的身影，原來，世界是那么的渺小，卻充滿著你我的身影清晰的畫布，配上淡淡的藍天，誰會想到與戀愛有關，但是一點點仔細地觀察，整個畫面，都似乎要將我們挽留在那種畫面似的，那唯美的畫面，有著某種魔力，拉著我們，走進青春這道靜謐的風景之中。九、網(wǎng)站測試報告1、測試準備測試前對被測系統(tǒng)做好以下準備：系統(tǒng)的全面?zhèn)浞荩☉贸绦騻浞?、?shù)據(jù)備份等；記錄測試前系統(tǒng)狀態(tài)；制定應急措施，確保在測試中發(fā)生問題時系統(tǒng)可恢復。測試員應在測試開始前了解網(wǎng)頁的相關情況，對測試的預期結果應進行準備和預測。測試前要做好真實數(shù)據(jù)的準備工作，并進行系統(tǒng)的數(shù)據(jù)初始化。2、用戶界面測試主要測試導航條、內(nèi)容、顏色、背景、圖像、返回等。3、功能測試主要測試站點中的鏈接等。鏈接測試：目的是檢查各個URL所聯(lián)接的頁面是否正確。表單測試：目的是檢查每個表單與程序是否正確聯(lián)接，能夠正確地發(fā)送用戶請求。4、瀏覽器兼容性測試網(wǎng)頁設計瀏覽器兼容請測試軟件5、測試環(huán)境IE7.瀏覽器IE8瀏覽器IE9瀏覽器Firefox瀏覽器Chrome.瀏覽器Opera.瀏覽器360瀏覽器.QQ瀏覽器6、測試結果均可以在以上瀏覽器