網站設計與建設第2節(jié)網站規(guī)劃設計流程課件

1、第2節(jié) 網站規(guī)劃與設計的流程概 述網站規(guī)劃與設計流程網站策劃書撰寫要點功能需求分析設計 網站概要設計網站詳細設計網站測試設計撰寫網站開發(fā)總結性報告編寫網站用戶手冊21.網站規(guī)劃與設計流程 流程圖網站設計的主要任務包括以下六個階段用戶需求分析及變更（前期調研）網站架構及業(yè)務流程分析系統(tǒng)分析及總體設計（網站設計策劃書撰寫）界面設計、交互設計及程序開發(fā)系統(tǒng)測試和文檔編寫客戶培訓、技術支持和售后服務42.網站策劃書撰寫要點前期調研分析 (是否適合互聯(lián)網、競爭對手、客戶群、自身建設網站的條件和能力)網站目的及功能定位 (是什么類型的網站、功能和目的，如是宣傳還是電子商務)網站技術解決方案 (自建還是虛擬

2、主機等、OS的選擇、自己開發(fā)還是已有方案、安全性措施、動態(tài)語言和數(shù)據(jù)庫的選擇、開發(fā)工具的選擇)網站內容規(guī)劃網頁設計網站維護網站測試(服務器穩(wěn)定性及安全性、程序及數(shù)據(jù)庫、網頁兼容性等)網站發(fā)布與推廣網站建設日程表費用明細53.網站設計階段功能需求分析設計網站概要設計網站詳細設計界面設計、交互設計及程序開發(fā)網站測試設計撰寫網站開發(fā)總結性報告編寫網站用戶手冊第7章 小結7網站設計流程網站策劃書撰寫要點功能需求分析設計 網站概要設計網站詳細設計網站測試設計撰寫網站開發(fā)總結性報告編寫網站用戶手冊第7章 思考問題結束87.1 網站設計流程大致分為幾個階段？7.2 網站策劃書撰寫要點有哪些？7.3 網站技術

3、解決方案主要包括哪些內容？7.4 什么是網站功能需求分析？7.7 網站技術需求中主要有哪些主要內容需要描述？7.9 什么是網站概要設計？7.11 什么是網站詳細設計？7.16 什么是壓力測試？7.17 使用兩個網站測試工具測試和本單位網站情況？7.21 編寫一個本單位網站的功能需求、概要設計、詳細設計、網站測試、總結性報告和網站用戶手冊文檔。功能需求分析設計需求分析人員分工網站技術需求網站頁面需求網站需求管理9返回需求分析人員分工需求分析人員主要有兩種：第一種是精通開發(fā)環(huán)境和技術的系統(tǒng)分析人員（采集項目的硬件成本、軟件成本、技術成本）第二種是擅長內容設計的編輯人員（采集項目的詳細功能、頁面展示

4、內容、頁面需求文檔）需求采集任務由系統(tǒng)分析員和編輯人員共同完成一般規(guī)模比較大的網站需求設計需要1周以上，注意需求分析要經過幾個往復過程。10網站項目需求分析計劃書模板11返回XXX網站項目需求分析計劃書部門作者日期1需求分析引言：1.1 需求目的：闡明編寫需求說明書的目的，指明讀者對象。1.2 需求背景：應包括項目的委托單位、開發(fā)單位和主管部門。該軟件系統(tǒng)與其他系統(tǒng)的關系。1.3 關鍵字：列出文檔中所用到的專門術語的定義和縮寫詞的原文。1.4 參考資料：2人員分工說明：3需求進度預估：4需要配合部門：12網站技術需求:技術需求說明書原則上主要記錄用戶提出的功能需求、安全需求、網絡結構拓撲圖以及

5、硬件環(huán)境和軟件環(huán)境等。表7.2 網站技術需求設計說明書模板XXX網站技術需求設計說明書部門作者日期1需求設計引言：1.1 需求目的：闡明編寫需求說明書的目的，指明讀者對象。1.2 需求背景：應包括項目的委托單位、開發(fā)單位和主管部門。該軟件系統(tǒng)與其他系統(tǒng)的關系。1.3 關鍵字：列出文檔中所用到的專門術語的定義和縮寫詞的原文。1.4 參考資料：可包括項目經核準的計劃任務書、合同或上級機關的批文。文檔所引用的資料、規(guī)范等。列出這些資料的作者、標題、編號、發(fā)表日期、出版單位或資料來源132技術概述：2.1 技術目標：技術目標，著重說明本次項目采用技術，要達到或者實現(xiàn)怎么樣的一個目標。2.2 硬件環(huán)境：

6、在硬件環(huán)境里面要說明本次項目所需要的硬件環(huán)境，并分析企業(yè)已有的硬件和需要繼續(xù)購置的硬件設施。2.3 軟件環(huán)境：操作系統(tǒng)、數(shù)據(jù)庫、Web服務器或應用服務器等。因為成本的不同，是否采用免費的數(shù)據(jù)庫和Web服務器等，也是至關重要的。2.4 網絡結構拓撲圖：同樣與軟件項目不同，網站項目還要考慮負載均衡、路由等問題，所以大型的網站項目都必須畫出網絡結構拓撲圖。開發(fā)人員、測試人員有時候需要搭建真實的環(huán)境進行調試。143數(shù)據(jù)描述：3.1 已有數(shù)據(jù)：如何處理或利用原有數(shù)據(jù)，是項目中至關重要的內容。3.2 錄入數(shù)據(jù)：什么人，以什么方式更新，是否需要對錄入部分重新編寫程序，這些同樣需要說明。3.3 數(shù)據(jù)保存：數(shù)據(jù)

7、的保存有兩種方式，存在數(shù)據(jù)庫或存成文件，什么數(shù)據(jù)用什么方式存儲要提前說明，便于程序員在編程時不易出錯。3.4 數(shù)據(jù)字典：數(shù)據(jù)詞典是為了檢索和查詢使用的，主要列出本次項目中關鍵字的定義、解釋和相關處理方式。3.5 數(shù)據(jù)采集：在開發(fā)過程中，需要哪些基礎數(shù)據(jù)，應該跟誰聯(lián)系，這些內容要在這里說明。154功能需求：4.1 功能劃分：網站項目都要按照功能怎樣劃分模塊，例如：用戶管理模塊、幫助模塊等。4.2 功能描述：對每一個功能模塊進行詳細說明。5性能需求：5.1 數(shù)據(jù)精確度：對于財務，購物等數(shù)字敏感的項目，用戶會提出數(shù)據(jù)的精確度的要求，所以要進行記錄。5.2 時間特性：響應時間、更新處理時間、數(shù)據(jù)轉換與

8、傳輸時間、運行時間等。5.3 適應性：適應性也叫友好性，指界面的使用友好性等內容。6操作流程圖6.1 流程圖一及說明：操作流程圖也叫做功能流程圖，描繪某個功能模塊包含的用戶操作流程。6.2 流程圖二及說明7其他需求可實用性、安全保密、可維護性、可移植性等。返回16網站頁面需求:網站頁面需求設計說明書主要描述頁面樣式、功能說明、鏈接說明等。表7.3 網站頁面需求設計說明書模板XXX網站頁面需求設計說明書部門作者日期1需求頁面引言：1.1 需求目的：闡明編寫頁面需求說明書的目的，為開發(fā)確定方向。1.2 參與人員：參與頁面需求設計的人員和分工情況。1.3 相關文檔：其他相關文檔，若沒有，可不寫。1.

9、4 關 鍵 字：本次需求的關鍵字，要能反映出需求的目的和主要內容，同時便于讀者查找。172頁面1：頁面名稱2.1 頁面樣式：由word一些繪圖元素構成的頁面示意圖，它主要描述頁面布局，以及導航、文字和圖片等元素放置的位置。2.2頁面功能說明：像文字漸入漸出顯示、圖片隨著鼠標移動、單擊頁面自動滾屏等，或者其他無法通過繪圖來說明的，都需要在頁面功能中進行說明，例如：登錄頁面的單擊【重填】按鈕時，它的功能就需要說明為：“清空用戶名和密碼輸入框”。當然頁面功能說明還需要聲明此頁面的主要作用，比如說“此頁面是用戶登錄頁”。2.3頁面鏈接說明：在有鏈接的地方必須注明鏈接的目的地，對于表單而言，就必須聲明提

10、交后顯示的頁面，例如：用戶登錄頁面單擊【確定】按鈕后，應該跳轉到論壇首頁，還是用戶詳細資料頁面，就需要在頁面鏈接說明進行說明。18返回3頁面2：頁面名稱3.1 頁面樣式：3.2 頁面功能說明：3.3 頁面鏈接說明：。4其他需求例如用戶指定基本彩調，公司的專用徽標、用戶特殊要求。19網站需求管理:主要描述需求修改情況表7.4 網站需求管理文檔模板XXX網站需求管理文檔說明書部門作者日期1需求管理引言：1.1 需求目的：闡明需求管理的目的。1.2 參與人員：參與需求管理的人員。1.3 相關文檔：其他相關文檔，若沒有，可不寫。2需求文檔列表3變更說明文檔名稱所在位置修改時間文檔名稱變更內容變更原因變

11、更時間返回20網站概要設計：網頁文件和數(shù)據(jù)庫表的索引，它簡要地描述了開發(fā)人員的工作內容。由系統(tǒng)分析員和網頁設計人員共同完成系統(tǒng)分析員確定網站的版本，源代碼存放位置，根據(jù)需求設計文檔生成主要的文件夾和頁面；網頁設計人員首先根據(jù)文檔中已有的頁面進行設計，若遇到沒有的頁面，則應該補充該文檔。等到整個網站設計完畢的時候，概要設計文檔也就同時完成了。概要設計說明書頁面概要設計說明書數(shù)據(jù)庫概要設計說明書返回21網站頁面概要設計:頁面的概要設計主要包含網頁命名的列表，它作為網站的索引目錄為后來的程序員迅速找到網頁做好備份。表7.5 網站頁面概要設計說明書模板XXX網站頁面概要設計說明書部門作者日期1概要設計

12、引言：1.1 設計目的：闡明概要設計的目的。1.2 參與人員：參與撰寫概要設計的人員。1.3 關 鍵 字：該概要設計的關鍵字，便于查找。1.4 相關文檔：需求設計說明書，或者其他相關文檔。2版本及源代碼： 軟件的版本和源代碼存放在VSS下的位置要在此處聲明，便于開發(fā)人員將頁面設計完畢后添加到指定的VSS目錄中。3網站目錄結構圖：畫出網站的目錄結構樹形圖4根目錄頁面名稱 全路徑 說明 對應需求設計頁面 index.htm/index.htm首頁主頁面文件夾名稱全路徑說明5頻道1： 需求設計人員在進行需求設計時應該已經根據(jù)功能基本劃分出了頻道，對于網頁設計人員，它們其實是許多相關聯(lián)的網頁組成的文件

13、夾，確切地說應該是根目錄下的第一級文件夾。頻道下仍然可能再包含目錄和文件，這些也要在文件夾中進行說明。頁面鏈接如果已經明確指明了，那么在概要設計里面可以不再要求；如果是概要設計人員另外加進去的，則需要特別加以說明。頁面名稱 全路徑說明 對應需求設計頁面 文件夾名稱 全路徑 說明(包括鏈接頁面文件名) 返回6頻道2：24數(shù)據(jù)庫概要設計:一部分是概要設計，一部分是SQL執(zhí)行腳本。前者用來描述數(shù)據(jù)庫設計的內容，后者在移植數(shù)據(jù)庫時使用。表7.6 網站數(shù)據(jù)庫概要設計說明書模板XXX網站數(shù)據(jù)庫概要設計說明書部門作者日期1概要設計引言：1.1 設計目的：闡明概要設計的目的。1.2 參與人員：參與撰寫概要設計

14、的人員。1.3 關 鍵 字：該概要設計的關鍵字，便于查找。1.4 相關文檔：需求設計說明書，或者其他相關文檔。2新建數(shù)據(jù)庫表一覽表1：所屬用戶用戶是擁有數(shù)據(jù)庫操作權限的操作員。數(shù)據(jù)庫表往往是某個用戶建立的，這時候，這些表就屬于這個用戶。其他用戶，包括DBA權限的用戶對這些表格進行操作時，就需要在表格前面聲明這個表所屬的用戶的用戶名。用戶在一定意義上相當于表路徑。數(shù)據(jù)庫名稱所建數(shù)據(jù)庫表所在的數(shù)據(jù)庫的名稱數(shù)據(jù)庫表名稱說明建立時間SQL腳本名稱(SQL腳本詳細內容)數(shù)據(jù)庫表詳細說明一覽表1：(數(shù)據(jù)庫表名稱)字段名稱字段類型和長度是否為空字段說明SQL腳本名稱(SQL腳本詳細內容)返回27網站詳細設計

15、：主要參與人員：美工、網頁設計人員、程序員、測試人員。系統(tǒng)分析人員和項目經理主要負責團隊成員的溝通，并監(jiān)督工作的進展。對于程序員，使用不同的開發(fā)語言，工作內容也不同。如JSP程序員既要編寫JavaBean又要編寫腳本，PHP和ASP程序員只要編寫腳本即可。美工負責制作效果圖（對網站內容少，顏色布局要求不高的網站，可以不制作效果圖）網站詳細設計包括：頁面詳細設計數(shù)據(jù)庫詳細設計后臺腳本詳細設計返回28頁面詳細設計:CSS詳細說明、JS特效說明、框架網頁說明、內置框架說明和層的說明等。表7.7 網站頁面詳細設計說明書模板XXX網站頁面詳細設計說明書部門作者日期1詳細設計引言：1.1 設計目的：闡明詳

16、細設計的目的。1.2 參與人員：參與撰寫詳細設計的人員。1.3 關 鍵 字：該詳細設計的關鍵字，便于查找。1.4 相關文檔：需求設計說明書，或者其他相關文檔。2頁面一覽表1：頁面名稱全路徑頁面說明創(chuàng)建時間CSS說明JS 說明框架說明其他說明返回30網站數(shù)據(jù)庫詳細設計:表空間的建立、索引的建立、存儲過程的建立、觸發(fā)器的建立，同時，根據(jù)程序員構造的查詢語句需要，建立相應的視圖。表7.8 網站數(shù)據(jù)庫詳細設計說明書模板XXX網站數(shù)據(jù)庫詳細設計說明書部門作者日期1詳細設計引言：1.1 設計目的：闡明詳細設計的目的。1.2 參與人員：參與撰寫詳細設計的人員。1.3 關 鍵 字：該詳細設計的關鍵字，便于查找

17、。1.4 相關文檔：需求設計說明書，或者其他相關文檔。2索引：3視圖：4存儲過程：5觸發(fā)器： 返回索引名稱功能說明(含索引所在表的名稱)創(chuàng)建時間視圖名稱功能說明(含索引所在表的名稱)創(chuàng)建時間存儲過程名稱功能說明(含索引所在表的名稱)創(chuàng)建時間觸發(fā)器名稱功能說明(含索引所在表的名稱)創(chuàng)建時間32后臺腳本詳細設計:說明這些頁面的主要功能，處理事物的流程，如果某些代碼有特殊的地方，也要適當?shù)芈暶鳌１?.9 網站后臺腳本詳細設計說明書模板XXX網站后臺腳本詳細設計說明書部門作者日期1詳細設計引言：1.1 設計目的：闡明詳細設計的目的。1.2 參與人員：參與撰寫詳細設計的人員。1.3 關 鍵 字：該詳細設

18、計的關鍵字，便于查找。1.4 相關文檔：需求設計說明書，或者其他相關文檔。2頁面名稱及功能1：返回頁面名稱頁面全路徑創(chuàng)建時間功能描述流 程 圖注：頁面功能流程圖如同技術需求說明書中的功能流程圖，畫流程圖可以更加形象地表達頁面的功能，這些內容在編寫代碼之初就可以先完成，對指導代碼的編寫也非常有利。代碼說明34網站測試設計：網站的測試是為了找錯誤，而不是證明程序沒有錯誤，也就是說，沒有測試出問題并不意味著程序絕對沒有問題。目標是盡可能的發(fā)現(xiàn)更多的錯誤。結構化或者面向對象的軟件測試的源代碼對于測試人員可以是不可見的，測試人員測試的是可執(zhí)行文件，網站則不同，HTML語言、JS語言、CSS語言，都是解釋

19、執(zhí)行的，測試人員可以方便地查看源代碼。測試人員應該跟隨整個項目的進程，不斷地對每個過程進行測試也驗證，而不應該等到項目開發(fā)結束才開始工作。 網站測試工具：http:/ ：網站排名OpenSTA：負荷及壓力測試軟件SAINT：網站風險評估工具CSE HTML Validator: HTML網頁檢錯工具Xenus Link Sleuth: 網站鏈接正確性工具AB（Apache Bench）：可同時模擬多個并發(fā)請求的小工具網站測試報告 ：網站測試分為前臺頁面測試和后臺腳本測試。返回35網站測試工具:Alexa 是發(fā)布全世界網站排名的權威性網站，也是對網站整體性能測評的綜合評價。以網站導航起家的Ale

20、xa創(chuàng)建于1996年4月。返回36網站測試報告:表7.10 網站測試文檔的模板XXX網站測試報告部門作者日期1測試引言：1.1 測試目的：為了更好地將測試結果與開發(fā)人員進行交流，特編寫此文檔。本測試文檔將記錄每次有效測試的結果，并將問題反映給開發(fā)人員。1.2 參與人員：參與測試的人員。1.3 關 鍵 字：該測試文檔的關鍵字，便于查找。1.4 相關文檔：概要設計說明書或數(shù)據(jù)庫設計相關文檔。2功能測試（鏈接、表單、cookie、開發(fā)語言、數(shù)據(jù)庫）3性能測試：通過自動化的測試工具模擬多種正常、峰值以及異常負載條件來對系統(tǒng)的各項性能指標進行測試 。常用工具LoadRunner、AB、OpenSTA等3

21、.1 連接速度： 打開網頁的響應速度（不要超過5秒）3.2 負載測試： 通過測試系統(tǒng)在資源超負荷情況下的表現(xiàn)，以發(fā)現(xiàn)設計上的錯誤或驗證系統(tǒng)的 負載能力。3.3 壓力測試： 測試網站服務器支持的最大用戶數(shù)，從而掌握在經歷一次大的訪問量增長后，服務器是否還能正常提供服務?？梢钥醋髫撦d測試的一種。 被測頁面測試用例測試結果操作流程屏幕截圖被測頁面并發(fā)數(shù)目預期結果響應時間4安全測試：SAINT工具4.1 權限測試4.2 超時測試：4.3 記錄測試：4.4 套接字測試： 4.5 腳本安全測試被測頁面測試用例預期結果測試結果5. 穩(wěn)定性測試：6. 瀏覽器兼容性測試：ActiveX：Microsoft公司開

22、發(fā)，IE；JAVA是SUN公司的產品；JavaScript是Netscape的產品等，后來和 SUN合作開發(fā)，目前IE也支持JavaScript腳本。7. 可用性/易用性測試： 8. 測試總結： 返回被測頁面測試用例預期結果測試結果被測頁面瀏覽器名稱預期結果測試結果被測頁面測試用例預期結果測試結果40撰寫網站開發(fā)總結性報告:網站發(fā)布成功，測試完畢后，需要撰寫開發(fā)總結報告，總結本次開發(fā)的收獲和經驗，為了下一次更好地開發(fā)做準備。報告內容：一般包括本次項目的概要、參與開發(fā)人員、開發(fā)起止時間、質量評估等內容。表7.11 網站開發(fā)總結性報告模板 XXX網站開發(fā)總結性報告部門作者日期1總結引言：1.1 總

23、結目的：撰寫總結性報告總結現(xiàn)有的開發(fā)經驗，發(fā)現(xiàn)相應的問題，從而在下一個網站開發(fā)項目中避免相應的問題，達到提高效率和質量的目的。1.2 參與人員：參與開發(fā)設計的人員。1.3 關 鍵 字：該總結性報告的關鍵字，便于查找。1.4 相關文檔：需求設計說明書、概要設計書或者其他相關文檔。2網站開發(fā)結果：2.1 網站簡介： 簡要介紹網站的功能、頻道劃分情況、網站的文件數(shù)、頁面數(shù)、圖片數(shù)、數(shù)據(jù)數(shù)量、初始數(shù)據(jù)量等。2.2 網站主要功能： 著重介紹網站的主要內容，各頻道的主要功能，要是有后臺管理同樣要介紹相應的管理程序的功能。2.3 網站開發(fā)進度： 簡單介紹網站開發(fā)計劃起止時間，實際耗用多少時間。2.4 網站開發(fā)成本： 說明本次開發(fā)耗用的人力及其他相關材料的成本，對這一次成本的投入和人員的利用率進行評價。2.5 網站總體開發(fā)質量： 主要從網站的功能和性能方面來衡量網站的開發(fā)質量，因為沒有一個客觀的標準，所以質量可能總是帶有主觀色彩。2.6 軟硬件與相關技術： 主要介紹網站的開發(fā)工具、Web服務器、數(shù)據(jù)庫，以及使用的主要開發(fā)技術。2.7 預知錯誤分析及解決方案： 一個經過測試的網站和一批有經驗的開發(fā)人員必然會預料到網站可能出現(xiàn)的問題，例如當訪問量達到多少網站會宕機等。這些問題都是可以預見的，所有對可以預見的問題事先聲明，以便能在事故發(fā)生以前采取相應的措施。并給出各種