網(wǎng)站項目規(guī)劃與設計班級網(wǎng)站的設計報告目錄TOC\o"1-3"\h\u23220一、概述 2185331.網(wǎng)站開發(fā)背景和目的 26692二、需求分析 21893三、網(wǎng)站開發(fā)平臺 216210四、網(wǎng)站建設日程表 225324五、總體設計 330380六、網(wǎng)頁UI設計 423986七、線框圖及頁面詳細設計圖： 4102441、界面設計及布局 4226062、主模塊子頁的樣圖 6126343、關鍵技術 824939八、網(wǎng)站測試 8298991、測試準備 841872、用戶界面測試 8151803、功能測試 814194、兼容性測試 914799九、網(wǎng)站推廣 918284十、個人心得 9

一、概述網(wǎng)站開發(fā)背景和目的本項目為班級網(wǎng)站。隨著網(wǎng)絡技術的發(fā)展與互聯(lián)網(wǎng)的普及，網(wǎng)站建設與網(wǎng)頁制作越來越成為各行各業(yè)以及個人宣傳自己的有利工具，、網(wǎng)站在當今時代被越來越多的人用來宣傳，通過這次個人網(wǎng)頁的制作，我對計算機有了更深層次得到了解，也有了更濃厚的興趣。尤其是對網(wǎng)頁制作的過程與一些技巧手法更有了另外一番了解，對網(wǎng)頁制作的基礎知識也有了一定的掌握。所以我覺得這次制作網(wǎng)頁我已經(jīng)達到了自己的目的，而不是單單為了完成作業(yè)而已。這是一個完全關于班級網(wǎng)站的網(wǎng)頁。主題《班級網(wǎng)站》是在Windwos7環(huán)境下用記事本、Dreamweaver和Photoshop等工具完成靜態(tài)網(wǎng)站的開發(fā)，我們完全是運用了這一學期的網(wǎng)頁制作教程所學習的知識和課外自學知識完成的。二、需求分析用戶對網(wǎng)站的要求是：風格統(tǒng)一和諧的網(wǎng)頁，網(wǎng)頁操作合理、方便、友好需要實現(xiàn)的功能和性能是：適當運用HTML語言和CSS樣式定義，并正確運用多媒體信息，設計出風格統(tǒng)一和諧的網(wǎng)頁；網(wǎng)站正常運行，功能達到設計要求，風格和諧統(tǒng)一，操作合理、方便、友好，界面具有美感或創(chuàng)意，還要符合網(wǎng)站管理的原則。三、網(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日計劃微調，網(wǎng)站用戶體驗感測試5月25日-6月7日網(wǎng)站裝飾再加工，CSS布局，JS語言6月8日-6月15日最終測試五、總體設計網(wǎng)站需要讓每個人到了解到藝術主題《班級網(wǎng)站》是在Windwos7環(huán)境下用記事本、Dreamweaver和Photoshop等工具完成靜態(tài)網(wǎng)站的開發(fā)此次網(wǎng)站制作共三人合力完成需要遵循的規(guī)則和標準：網(wǎng)頁命名要簡潔、確保頁面的導覽性好、保持新鮮感、合理設計視覺效果、為圖片添加文字說明、盡量減少拼寫和語法錯誤、頁面長度要適中、保持鏈接的有效性、整個頁面風格要一致網(wǎng)頁色彩搭配原理①色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。②色彩的獨特性。要有與眾不同的色彩，使得用戶對企業(yè)網(wǎng)站的印象強烈。③色彩的合適性。色彩和網(wǎng)站表達的內(nèi)容要與氣氛相適應。④色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，如藍色想到天空，白色想到純潔等。網(wǎng)站的功能框架結構如下：班級網(wǎng)站班級網(wǎng)站主頁班級相冊班級簡介留言板同學錄班級趣聞友情鏈接首頁六、網(wǎng)頁UI設計我們將堅持以用戶體驗為中心設計原則，界面直觀、簡潔，操作方便快捷，瀏覽者將對界面上對應的功能一目了然。保持頁面內(nèi)元素風格，版式一致。使用一致的標記、標準縮寫和顏色，顯示信息含義明確。顯示有意義的出錯信息，而不是單純的程序錯誤代碼。減持高效地使用顯示器的顯示空間，保持語言的一致性與可選擇性。我們將遵循瀏覽者從上而下，自左向右瀏覽、操作習慣，盡量多做“減法”運算，將不常用的功能區(qū)塊隱藏，以保持界面的簡潔。在頁面顯眼位置應該出現(xiàn)面包屑導航欄，讓用戶知道當前所在頁面的位置，并明確導航結構。并且為頁面導航加以設計規(guī)劃。七、線框圖及頁面詳細設計圖：1、界面設計及布局 首頁的樣圖2、主模塊子頁的樣圖3、關鍵技術 主要運用：DIV、CSS、JAVASCRIPT腳本語言，表格 次要運用：JQuerry腳本，flash動畫，gif動態(tài)圖片等等。運用工具：美圖秀秀，表情工廠，DW8，等等八、網(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、兼容性測試主要檢驗應用能否在不同的客戶端使用。如蘋果（iOS系統(tǒng)的）用戶，經(jīng)常使用chrome，F(xiàn)irefox等瀏覽器的用戶是否都能正常使用。九、網(wǎng)站推廣微信公眾平臺、朋友圈、微博、QQ空間推廣（2）論壇推廣我們可以注冊幾十個論壇，每個論壇注冊若干個帳號，把簽名設為自己的網(wǎng)站及團隊圖標。發(fā)表熱門內(nèi)容，自己頂自己的帖子。目前我們應用的論壇包括校內(nèi)的極速之星、外網(wǎng)的百度貼吧、天涯論壇、豆瓣等等網(wǎng)民較為聚集的地方。（3）電子郵件推廣我們會像宜家一樣讓用戶進行自愿注冊會員，瀏覽者自愿留下他的郵箱地址，定期或不定期的發(fā)布一些電子刊物、會員通訊、專業(yè)服務商的電子郵件廣告等?？梢詼p少廣告對用戶的滋擾、增加潛在吸引人群定位的準確度、增強與客戶的關系、提高品牌忠誠度等。十、個人心得做好主頁，并不是一件容易的事，它包括個人主頁的選題、內(nèi)容采集整理、圖片的處理、頁面的排版設置、背景及其整套網(wǎng)頁的色調等很多東西。1.標題在個人主頁中標題起著很重要的作用，它在很大程度上決定了你整套個人主頁的定位。一個好的標題必須有概括性、簡短，有特色、容易記，還要符合自己主頁的主題和風格，決不要取一個名不符實的"好名字"，別人第一次上了當，下次再也不會光顧了。2.內(nèi)容的采集選好標題后，開始采集內(nèi)容，內(nèi)容必須與標題相符，在采集內(nèi)容的過程中，應注重特色，所謂特色應該是有一些自己的東西。個人主頁中的特色，應該突出自己的個性，把自己的興趣、愛好盡情地發(fā)揮出來，因為在網(wǎng)絡上不受限制。主頁就是在網(wǎng)絡上的一個小小家園，在那里，可以放上自己喜歡的任何東西，包括你自己平時喜歡一些文章，一些好聽的歌，一些好的動畫作品。把這些內(nèi)容按類別進行分類，設置欄目，讓人一目了然，在欄目上不要設置太多，最好不要超過十個，層次上最好少于五層。3.圖片做個人主頁不能只用文字，必須在主頁上適當?shù)丶右恍﹫D片，增加可看性，俗話說"一圖勝（轉載自第一范文網(wǎng)，請保留此標記。）千言"，我想不無道理，一張?zhí)幚淼煤玫膱D片不需要多做任何解釋，就能讓人一目了然，讓人去思考，去了解它。當然處理得不好的以及無關緊要的圖片最好不要放上去，否則讓人覺得是累贅，同時也影響網(wǎng)頁的傳輸速度。圖片不僅要好看，還要在保證圖片質量的情況下盡量縮小圖片的大小（即字節(jié)數(shù)），在目前網(wǎng)絡傳輸速度不是很快的情況下，圖片的大小在很大程度上影響了網(wǎng)頁的傳輸速度。那么如何精簡圖片的大小呢，一般來說，圖片顏色較少的及在256色以內(nèi)的最好把它處理成gif圖像格式，如果是一些色彩比較豐富的圖片，最好把它處理成jpg圖像格式，因為gif和jpg各有各的壓縮優(yōu)勢，應根據(jù)具體的圖片來選擇壓縮比