1、第5章 Web網(wǎng)站設計準則,湖南科技大學計算機科學與技術系,2,主要內(nèi)容,網(wǎng)站目標的定義 概要設計 網(wǎng)站功能設計 網(wǎng)站結構設計 網(wǎng)站的藝術性設計,湖南科技大學計算機科學與技術系,3,Web網(wǎng)站設計,對于新手來說，必須壓抑急于編寫網(wǎng)頁的沖動，先學會遵守網(wǎng)頁設計的原則。 學完本章內(nèi)容，你會擁有一個完整的設計文檔的模板和一些設計站點所做的決定的記錄。這些文檔可以作為建造網(wǎng)站的路線圖。 客戶和網(wǎng)站管理者需要這些文檔，有了這些文檔，網(wǎng)站的維護將變得更容易。,湖南科技大學計算機科學與技術系,4,5.1定義網(wǎng)站的目標(建網(wǎng)站做什么),1.定義網(wǎng)站的目標 設計信息結構，構思一個清晰的良好文檔，回答建網(wǎng)站做什么

2、。 2. 需求調(diào)查 組織的任務或目標是什么？ 網(wǎng)站的近期目標和遠期目標是什么？ 誰是確定的訪問者？ 為什么人們會來到你的網(wǎng)站？,湖南科技大學計算機科學與技術系,5,5.1定義網(wǎng)站的目標(建網(wǎng)站做什么),3. 需求分析 把這些問題的混亂的答案過濾一遍，整理成目標列表。 把這些列表返回給被調(diào)查者看，讓他們評價每個目標的重要性。 重新過濾整理成一個正式的目標清單，取得客戶重要人物支持。 如果必要，召開一個會議，確?？蛻敉獠⒃诰W(wǎng)站目標清單上簽名。 4.書寫文檔 - 網(wǎng)站的目標 = 例： Chapter 1 網(wǎng)站目標 1. 目標定義 2. 有客戶簽名的目標列表 =,湖南科技大學計算機科學與技術系,6,

3、5.2 概要設計(為誰而建網(wǎng)站),1. 定義用戶經(jīng)歷 2. 定義訪問者 3. 創(chuàng)建情節(jié) 情節(jié)是關于用戶訪問網(wǎng)站的經(jīng)歷。情節(jié)對實現(xiàn)網(wǎng)站的設計有幫助：要求情節(jié)與網(wǎng)站訪問者的的實際行為相匹配。,湖南科技大學計算機科學與技術系,7,5.2 概要設計(為誰而建網(wǎng)站),4. 競爭性分析,湖南科技大學計算機科學與技術系,8,5.2 概要設計(為誰而建網(wǎng)站),5. 設計文檔訪問者，場景和競爭性分析。 = 例： Chapter 2 用戶經(jīng)歷 2.1 訪問者定義 2.2 情節(jié) 2.3 競爭性分析概述 附錄A：競爭性分析報告 =,湖南科技大學計算機科學與技術系,9,5.3 網(wǎng)站功能設計(網(wǎng)站有什么),1. 確定內(nèi)容

4、和功能 內(nèi)容的類型包括：靜態(tài)的、動態(tài)的、功能的和事務處理的 確定內(nèi)容清單中每個條目的重要程度，它是內(nèi)容取舍的依據(jù)。 2. 分組和標記內(nèi)容 將內(nèi)容按性質(zhì)分組，給每組一個名字（既要描述準確，又不能太長）。把每組的名字和每組中的元素記錄在卡片上。 討論每種方案的優(yōu)缺點，最終決定分組內(nèi)容和組名，把它們作為網(wǎng)站主要部分的分類名稱，這是網(wǎng)站的基礎。,湖南科技大學計算機科學與技術系,10,5.3 網(wǎng)站功能設計(網(wǎng)站有什么),3. 設計文檔內(nèi)容和功能 = 例： Chapter 3 網(wǎng)站內(nèi)容 3.1 內(nèi)容分組和命名 3.2 功能描述 附錄B： 內(nèi)容和功能清單 =,湖南科技大學計算機科學與技術系,11,5.4 網(wǎng)

5、站結構設計(方便用戶訪問網(wǎng)站),網(wǎng)站結構 網(wǎng)站的結構相當于身體的骨架,沒有它，你的網(wǎng)站將會一團糟 完成網(wǎng)站結構以后，就可以讓內(nèi)容各就各位 精心設計的網(wǎng)站結構使定義導航系統(tǒng)變得更容易,湖南科技大學計算機科學與技術系,12,5.4 網(wǎng)站結構設計(方便用戶訪問網(wǎng)站),探索裝飾風格 裝飾風格即網(wǎng)站結構的表現(xiàn)形式 按性質(zhì)類型可分三種裝飾風格 組織性裝飾風格 超市 - 按產(chǎn)品類型（罐裝蔬菜、乳制品、谷類食品、快餐、家居用品等）邏輯地分類 按功能性裝飾風格 圖形軟件Photoshop 依賴于很多功能性圖標象征性地表示在計算機上剪切、拷貝和粘貼圖形。 可視性裝飾風格 娛樂性網(wǎng)站- 你可能想用各種播放器圖標表示

6、不同的多媒體數(shù)據(jù)。,湖南科技大學計算機科學與技術系,13,5.4 網(wǎng)站結構設計(方便用戶訪問網(wǎng)站),網(wǎng)站結構的描述方法 基于文本的網(wǎng)站層次結構列表 例: Section1 Section1.1 Section1.2 Section2 Section2.1 Section2.2 Section2.2.1 Section2.2.2 Section2.2.3 Section2.3 Section2.4 Section3,湖南科技大學計算機科學與技術系,14,5.4 網(wǎng)站結構設計(方便用戶訪問網(wǎng)站),網(wǎng)站結構的描述方法 基于圖形的網(wǎng)站結構化藍圖是網(wǎng)站結構的可視化表示。它是一種顯示網(wǎng)站中的元素如何分組和

7、聯(lián)系的圖表。,湖南科技大學計算機科學與技術系,15,5.4 網(wǎng)站結構設計(方便用戶訪問網(wǎng)站),定義導航 全局導航系統(tǒng) 出現(xiàn)在網(wǎng)站的每頁上，使用戶很方便地在不同部分之間跳轉 局部導航系統(tǒng) 出現(xiàn)在網(wǎng)站的某組上，使用戶很方便地在組內(nèi)跳轉 設計文檔網(wǎng)站結構 = 例： Chapter 4 網(wǎng)站結構 5.1 網(wǎng)站結構概述 5.2 網(wǎng)站層次結構列表或網(wǎng)站結構化藍圖 5.3 全局和局部導航系統(tǒng)設計 附錄C：網(wǎng)站結構列表補充說明 =,湖南科技大學計算機科學與技術系,16,5.5 網(wǎng)站的藝術性設計(使網(wǎng)站充滿魅力),1. 可視化設計 編寫Web文檔 2. 布局網(wǎng)格描述網(wǎng)頁的模板,湖南科技大學計算機科學與技術系,1

8、7,5.5 網(wǎng)站的藝術性設計(使網(wǎng)站充滿魅力),3. 設計框架和頁面模型 框架是布局網(wǎng)格圖的具體實現(xiàn) 設計頁面模型是Web原形的基礎，涉及各個框架的頁面表現(xiàn)形式。 4. 設計文檔 = 例： Chapter 5 可視化設計 5.1 布局網(wǎng)格圖 5.2 設計框架(frame) 5.3 頁面模型 附D： Web文檔 =,湖南科技大學計算機科學與技術系,18,實施一項網(wǎng)站建設工程的步驟,1. 定義網(wǎng)站的目標（回答為什么建網(wǎng)站？） 結束標志：可行性報告(包含目標定義，有客戶簽名的目標列表)。 2. 概要設計（回答為誰而建網(wǎng)站？） 結束標志：需求說明書(包含訪問者定義，訪問者情節(jié)預測，競爭性分析表) 3. 網(wǎng)站的內(nèi)容和功能設計（回答網(wǎng)站有什么？） 結束標志：信息字典(包含內(nèi)容的分組和命名，功能描述) 4. 網(wǎng)站的結構設計（回答信息應如何組織,如何檢索？） 結束標志：結構設計說明書(包含基于文本的網(wǎng)站層次結構列表，基于圖形的網(wǎng)站結構化藍圖，全局導航系統(tǒng)和局部導航系統(tǒng)) 5. 網(wǎng)站的可視化設計（回答