天地人音樂網(wǎng)站項目規(guī)劃與設(shè)計目錄6013一、項目背景 1205151、選題的目的和意義 1104022、課題研究的主要簡介 119140二、網(wǎng)站開發(fā)平臺 12222三、網(wǎng)站建設(shè)日程表 111375四、站點地圖 22396五、線框圖 2143281、主頁布局 2104732、子頁布局 319107六、設(shè)計規(guī)范及網(wǎng)頁UI設(shè)計 338231、設(shè)計愿望 340192、確定網(wǎng)站主題 4262633、確定網(wǎng)站形象 4204294、確定網(wǎng)站風(fēng)格 577365、確定網(wǎng)站內(nèi)容 522977七、主要頁面的詳細設(shè)計圖 59207八、網(wǎng)站測試 8151891、測試準備 935672、用戶界面測試 971593、功能測試 9124274、兼容性測試 91590九、網(wǎng)站推廣與維護 973391.網(wǎng)站推廣 9240272、網(wǎng)站維護 10PAGE4一、項目背景1、選題的目的和意義在互聯(lián)網(wǎng)發(fā)展迅猛的今天，我們無時無刻不與網(wǎng)絡(luò)接觸，可以從中查找我們需要的信息，可以發(fā)布想讓別人知道的信息，可以找到你不認識但真心的朋友，也可以第一時間看到國內(nèi)外的重大事件。當(dāng)我們無事可做的時候，便開始了娛樂方式的搜索，由此，很多音樂網(wǎng)站和視頻網(wǎng)站應(yīng)運而生，服務(wù)大家，為我們的生活增添了色彩。隨著我國網(wǎng)民的增加，也促進了音樂網(wǎng)站的開發(fā)。2、課題研究的主要簡介音樂網(wǎng)站網(wǎng)站是給用戶一個方便的視聽空間，登陸音樂網(wǎng)界面，根據(jù)自己的需求選擇瀏覽，其功能有以下：（1）用戶可以通過瀏覽主頁，了解音樂的簡介以及音樂展示（2）用戶通過瀏覽子頁，可以對音樂進行細致的了解二、網(wǎng)站開發(fā)平臺功能模塊技術(shù)和軟件平臺操作系統(tǒng)Windows8設(shè)計稿、圖形處理PhotoshopCS6動畫設(shè)計制作FlashCS5網(wǎng)頁制作平臺Dreamweaver網(wǎng)站開發(fā)語言HTML,CSS,JavaScript，asp網(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)站細節(jié)完善5月11日-24日計劃微調(diào)，網(wǎng)站用戶體驗感測試5月25日-6月7日網(wǎng)站裝飾再加工，CSS布局，JS語言,后臺數(shù)據(jù)庫設(shè)計6月8日-6月15日最終測試四、站點地圖音樂網(wǎng)站音樂網(wǎng)站用用戶注冊模塊用戶登錄模塊動態(tài)顯示歌曲留言模塊音樂搜索模塊動態(tài)顯示時間五、線框圖1、主頁布局logo圖片添加收藏logo圖片添加收藏下載作品添加說明導(dǎo)航搜索欄圖片圖片主推薦介紹注冊登錄版權(quán)及其他版權(quán)設(shè)計2、子頁布局 logo圖片添加收藏logo圖片添加收藏下載作品添加說明導(dǎo)航搜索欄主推薦板塊版權(quán)設(shè)計六、設(shè)計規(guī)范及網(wǎng)頁UI設(shè)計音樂網(wǎng)網(wǎng)站這個網(wǎng)站是運用了HTML靜態(tài)網(wǎng)頁技術(shù)，和Dreamweaver軟件相結(jié)合實現(xiàn)的。頁面間通過網(wǎng)頁鏈接，實現(xià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)站給人的第一印象就是首頁，要讓人愿意繼續(xù)欣賞下去。我設(shè)計的首頁力求簡潔明了，色調(diào)屬于暖色，給人明快、輕松的感覺。頁面最醒目處是一朵正在開放的花，象征著祖國的未來生機勃勃。背景隱約可見的五條橫線，代表著五線譜，表明了本網(wǎng)站音樂休閑的主題。首頁包括音樂、視頻、簡介、紫蘭圖片、紫蘭文化和鏈接六項。有我的E-mail以便用戶和我聯(lián)系。網(wǎng)頁的色彩選擇和搭配是網(wǎng)頁設(shè)計的重點之一。用什么色彩才能最好地表達出網(wǎng)站的內(nèi)涵，吸引瀏覽者的視線，網(wǎng)頁的色調(diào)、背景、文字、圖標(biāo)、邊框、鏈接應(yīng)該采用什么樣的色彩，應(yīng)該如何搭配，都是網(wǎng)頁設(shè)計一開始就必須考慮的問題。網(wǎng)頁的色彩搭配在網(wǎng)頁的制作中起到非常重要的作用，因為它將決定瀏覽者對你的網(wǎng)頁的第一印象，好的色彩搭配可以使你的網(wǎng)頁獨具魅力，相反則提不起瀏覽者的興趣。所以一定要把握住色彩的搭配。網(wǎng)站字體，和標(biāo)準色彩一樣，標(biāo)準字體是指用于標(biāo)題、主菜單的一些特有字體。為了體現(xiàn)網(wǎng)站所特有的風(fēng)格，可以根據(jù)自已的網(wǎng)站所表達的內(nèi)涵，選擇更貼切的字體。我的音樂網(wǎng)站的標(biāo)準字體是華文彩體。給人一種沉穩(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è)的。但不管是在色彩、技術(shù)、文字、布局、還是交互方式上，只要能由此讓瀏覽者明確的看出這是你的網(wǎng)站所獨有的，這就形成了一種風(fēng)格。風(fēng)格是有人性的，它通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式等可以綜合概括出一個網(wǎng)站的自己的個性；我的網(wǎng)站風(fēng)格是以舒服為主，給人一種舒舒服服的感覺。5、確定網(wǎng)站內(nèi)容本網(wǎng)站的內(nèi)容表現(xiàn)形式主要以文本、圖像為主。用戶注冊：用戶注冊自己的空間用戶登錄：用戶登錄空間查看音樂收藏動態(tài)顯示歌曲：根據(jù)類別不同，顯示華人歌曲，日韓歌曲，影視歌曲，傷感歌曲，非主流歌曲等等。動態(tài)時間：網(wǎng)頁中顯示動態(tài)的時間音樂搜索：搜索數(shù)據(jù)庫中包含的歌曲留言：用戶提交自己的留言七、主要頁面的詳細設(shè)計圖1網(wǎng)站主頁注：主頁的右上角為動態(tài)時鐘，上方為網(wǎng)站形象flash，并有設(shè)為首頁和添加收藏功能，可通過上傳作品和下載作品查看說明，中間網(wǎng)站分類導(dǎo)航條和音樂搜索，左下角為會員登錄窗體，可通過鏈接進行注冊，下方網(wǎng)站版權(quán)說明，關(guān)于我們和留言提交鏈接。2歌曲分類頁面注：歌曲分類頁面均來自于模板，結(jié)構(gòu)相似，只是數(shù)據(jù)集的綁定不同而已，故此不做重復(fù)介紹。3音樂搜索頁面注：在音樂搜索文本框中輸入搜索文本，點擊音樂搜索按鈕后，會顯示出搜索結(jié)果，同樣也可以在有主頁模板生成的其他頁面進行搜索。4用戶留言頁面輸入反饋內(nèi)容和聯(lián)系方式后，單擊確定提交按鈕，即可將用戶要反饋的內(nèi)容提交給后臺數(shù)據(jù)庫。5音樂播放器頁面注：點擊音樂名稱鏈接或者點擊試聽后，網(wǎng)站會自動打開該網(wǎng)頁播放器頁面，播放你選中的音樂，而播放器的左邊分類歌曲列表，供你選擇喜歡的各種類型歌曲。八、網(wǎng)站測試1、測試準備測試前對被測系統(tǒng)做好以下準備：系統(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)進行準備和預(yù)測。測試前要做好真實數(shù)據(jù)的準備工作，并進行系統(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）電子郵件推廣我們會像宜家一樣讓用戶進行自愿注冊會員，瀏覽者自愿留下他的郵箱地址，定期或不定期的發(fā)布一些電子刊物、會員通訊、專業(yè)服務(wù)商的電子郵件廣告等?？梢詼p少廣告對用戶的滋擾