網(wǎng)站規(guī)劃與網(wǎng)頁設計 網(wǎng)站設計流程 確定網(wǎng)站的類型 定位網(wǎng)站的主題和名稱 確定網(wǎng)站 確定網(wǎng)站的欄目和版塊 確定網(wǎng)站的整體風格 確定網(wǎng)站的目錄結構和鏈接結構 網(wǎng)站內(nèi)容的確定 網(wǎng)頁的設計 瀏覽器版本和分辨率 第 2章 網(wǎng)站規(guī)劃設計基礎 網(wǎng)站設計的主要任務包括： 網(wǎng)站架構設計，以瀏覽器為客戶端的 新聞中心、網(wǎng)上商店、虛擬郵局、客戶關系管理等），系統(tǒng)測試及網(wǎng)站發(fā)布 等。設計過程大體上分為以下 13個階段： 1 編寫網(wǎng)站設計的計劃書； 2 確定網(wǎng)站設計總體思想，即網(wǎng)站設計如何能實現(xiàn)網(wǎng)站規(guī)劃中提出的目標，以及網(wǎng)站的風格和特點，網(wǎng)頁的外觀與使用方面的特點； 3 確定網(wǎng)站提供的內(nèi)容； 4 網(wǎng)站交互設計，如信息反饋、意見調查等； 5 對網(wǎng)站的內(nèi)容進行分類； 6 設計網(wǎng)頁必有的內(nèi)容，如公司標志、聯(lián)系方法和導航條等； 7 討論并確定方案； 8 制作網(wǎng)頁的模板； 9 制作網(wǎng)頁并在不同平臺的瀏覽器上測試網(wǎng)頁； 10 檢查網(wǎng)頁的鏈接； 11 讓部分顧客或員工試用網(wǎng)站，并提出反饋意見； 12 根據(jù)需要修改不合適的地方； 13 正式發(fā)布網(wǎng)站。 網(wǎng)站設計流程 1門戶網(wǎng)站 （ 合了眾多內(nèi)容，提供多樣服務，并使其盡可能地成為網(wǎng)絡用戶的首選。 中文門戶網(wǎng)站有三類： 第一類 :新浪、搜狐、網(wǎng)易由國內(nèi)網(wǎng)絡公司經(jīng)營的網(wǎng)站，網(wǎng)站內(nèi)容除了 搜索引擎 外，還包括新聞、娛樂、游戲、文化、體育、健康、科技、財經(jīng)、教育等若干 版塊 ，以及網(wǎng)上短信、個人主頁空間、免費郵箱等 服務項目 ； 第二類：境外投資的網(wǎng)站，如中文雅虎、美國在線等，網(wǎng)站內(nèi)容 以新聞和娛樂為主 ，少數(shù)提供免費信箱、在線聊天等服務項目； 第三類是國內(nèi)傳統(tǒng)媒體辦的網(wǎng)站，以人民網(wǎng)、新華網(wǎng)、央視國際為代表，以提供新聞和時事評論為主。 確定網(wǎng)站的類型 2普及型網(wǎng)站 企事業(yè)單位和個人根據(jù)自身要求建立和發(fā)布的以介紹其基本情況 、 通信地址 、 產(chǎn)品和服務信息 、 供求信息 、 人員招聘及合作信息等為主旨的網(wǎng)站屬于普及型網(wǎng)站 。 以向客戶 、 供應商 、 公眾和其他一切對該網(wǎng)站感興趣的人宣傳 、 推介自身 ， 并樹立網(wǎng)上形象為目的 ， 網(wǎng)站內(nèi)容一般比較全面 。 訪問該網(wǎng)站 ， 可以了解這些單位的業(yè)務范圍 、 最新動態(tài) 、產(chǎn)品及價格 ， 并可以通過網(wǎng)站提供的用戶咨詢服務與相關部門進行在線信息交流 。 包括企業(yè)網(wǎng)站、大學網(wǎng)站、政府網(wǎng)站及數(shù)量眾多的個人網(wǎng)站。 確定網(wǎng)站的類型 3電子商務類網(wǎng)站 分為 商家對商家 ） 和 商家對個人客戶 ） 兩種 按照交易過程可分為 商品檢索 、 商品采購 、 訂單支付 三個階段 。 電子商務網(wǎng)站應該具有如下功能： 商品發(fā)布功能； 商品選購功能； 具有個性化的采購訂單模板 ， 顧客進行購物組合比較； “ 購物車 ” 內(nèi)置的價格計算模型可以根據(jù)商家的價格體系靈活定制； 在線交易功能； 商品交接 、 資金結算功能 。 確定網(wǎng)站的類型 4 媒體信息服務類網(wǎng)站 媒體信息服務類網(wǎng)站是報社 、 雜志社 、 廣播電臺 、 電視臺等傳統(tǒng)媒體為了樹立自己的網(wǎng)上形象 ， 方便服務對象而建立的網(wǎng)站 ， 主要功能包括：信息發(fā)布 、 電子出版 、 客戶在線咨詢 、 網(wǎng)站管理 。 5 辦公事務管理網(wǎng)站 辦公事務管理網(wǎng)站是企業(yè)事業(yè)單位為了實現(xiàn)辦公自動化而建立的內(nèi)部網(wǎng)站 ， 包括以下主要功能模塊：辦公事務管理 、人力資源管理 、 財務資產(chǎn)管理和網(wǎng)站管理 。 6 商務管理網(wǎng)站 商務管理網(wǎng)站是企業(yè)內(nèi)部為了進行廣告及商品管理 、 客戶管理 、 合同管理 、 營銷管理等目的而建立的網(wǎng)上辦公平臺 。 確定網(wǎng)站的類型 網(wǎng)站主題的確定 網(wǎng)站的主題也就是網(wǎng)站的題材。 網(wǎng)站使用的主要題材有： 網(wǎng)上求職、網(wǎng)上聊天 /上社區(qū) /討論 /郵件列表、計算機技術、網(wǎng)頁 /網(wǎng)站開發(fā)、娛樂網(wǎng)站、旅行、參考 /資訊、家庭 /教育、生活 /時尚等 。 選擇網(wǎng)站題材的時候要注意以下 3點。 1主題小而內(nèi)容精 2題材最好是自己擅長的內(nèi)容 3題材不要太濫、目標不要過高 定位網(wǎng)站的主題和名稱 網(wǎng)站名稱的確定 選擇網(wǎng)站的名稱時要注意以下 3點。 1名稱要端正 2名稱要易記 3名稱要有特色 :瀟湘書院 鐵血軍事 例如，“電腦學習室”和“電腦之家”相比，后者更簡練些； 定位網(wǎng)站的主題和名稱 業(yè)形象） 指通過強化 視覺效果的手段 來加深用戶對企業(yè)形象的印象。例：可口可樂公司。 1設計網(wǎng)站的標志（ 文字母、符號或圖案，也可以是動物或人物等。 確定網(wǎng)站 2設計網(wǎng)站的標準色彩 “ 標準色彩 ” 是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。 一個網(wǎng)站的標準色彩不宜超過 3種 ; 標準色彩要用于網(wǎng)站的 題、主菜單和主色塊，給人以整體統(tǒng)一的感覺。 其他色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。 確定網(wǎng)站 3設計網(wǎng)站的標準字體 標準字體是指用于 題和主菜單的特有字體。 一般網(wǎng)頁默認的字體是宋體。 4設計網(wǎng)站的宣傳標語 網(wǎng)站的宣傳標語也可以說是網(wǎng)站的精神、網(wǎng)站的目標，最好用一句話甚至一個詞來高度概括。它類似于實際生活中的廣告語句 . 汽車之家 :我的汽車網(wǎng)站，我的汽車之家 中國銀行：中國銀行 全球服務 確定網(wǎng)站 設計網(wǎng)站的欄目 網(wǎng)站欄目 :實質是一個網(wǎng)站的大綱索引； 索引應該將網(wǎng)站的主體明確顯示出來。 一般的網(wǎng)站欄目安排要注意以下 4點。 1緊扣網(wǎng)站主題 2設計一個最近更新或網(wǎng)站指南欄目 3設計一個可以互動交流的欄目 4設計一個下載或常見問題回答欄目 確定網(wǎng)站的欄目和版塊 設計網(wǎng)站的版塊 版塊比欄目的概念要大一些，每個版塊都可以有自己的欄目。 設置版塊時，應該注意以下幾點： 各版塊要有相對獨立性； 各版塊要相互關聯(lián)； 版塊的內(nèi)容要圍繞站點主題。 確定網(wǎng)站的欄目和版塊 1風格是建立在有價值的內(nèi)容之上的 2將網(wǎng)站 3使用統(tǒng)一的圖片處理效果 4設計宣傳標語 確定網(wǎng)站的整體風格 設計網(wǎng)站的目錄結構 網(wǎng)站的目錄是指用戶建立網(wǎng)站時創(chuàng)建的目錄。 目錄結構好壞，對瀏覽者沒有什么太大的感覺， 對于站點本身的上傳維護，以及內(nèi)容的擴充和移植有著重要的影響。 建立目錄結構的一些注意事項。 1不要將所有文件都存放在根目錄下 2按欄目內(nèi)容建立子目錄 3在每個主目錄下都建立獨立的 4目錄的層次不要太深 5不要使用中文目錄名 6不要使用過長的目錄名 確定網(wǎng)站的目錄結構和鏈接結構 設計網(wǎng)站的鏈接結構 網(wǎng)站的鏈接結構 ：指頁面之間相互鏈接的拓撲結構。 建立在目錄結構基礎之上，但可以跨越目錄。 建立網(wǎng)站的鏈接結構有以下兩種基本方式。 1樹狀鏈接結構 樹狀鏈接結構類似于 頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。 優(yōu)點 ：條理清晰，訪問者明確知道自己在什么位置，不會 “ 迷路 ” 。 缺點 ：瀏覽效率低，從一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經(jīng)首頁。 2星 （網(wǎng)狀）狀鏈接結構 星狀鏈接結構類似于網(wǎng)絡服務器的鏈接，每個頁面相互之間都建立有鏈接。 優(yōu)點是瀏覽方便，隨時可以到達自己喜歡的頁面。 缺點是鏈接太多，容易使瀏覽者 “迷路 ”，搞不清自己在什么位置，看了多少內(nèi)容。 確定網(wǎng)站的目錄結構和鏈接結構 網(wǎng)頁組織結構樹狀結構（分級結構） 樹狀結構：由網(wǎng)站文件的主頁開始，依次劃分為一級標題、二級標題等等，逐級細化，直至提供給瀏覽者具體信息。 主 頁 頁面 1 頁面 2 頁面 3 頁面 4 頁面 5 頁面 6 頁面 7 一級標題 二級標題 圖 網(wǎng)頁組織結構 線性結構 組織線性順序形式存在的信息，可以引導瀏覽者按順序地瀏覽整個網(wǎng)站文件。 主 頁 頁 面 1 頁 面 2 頁 面 3 線性結構 線性和分級結構的結合 主 頁標 題 標 題 標 題主 頁二級標題三級標題網(wǎng)站文件的結構通常是樹狀結構和線性結構相結合 星（網(wǎng)）狀結構 主 頁標題一 標題二 標題三主 頁二級標題三級標題 確定網(wǎng)站的題材，并且收集和組織了許多相關的資料內(nèi)容后，按照以下方面組織內(nèi)容來吸引瀏覽者瀏覽網(wǎng)站。 1站點結構圖 2導航欄 3精美的圖片 4引人入勝的內(nèi)容 5反饋表 6聯(lián)系方式頁面 7搜索工具 8常見問題解答 網(wǎng)站內(nèi)容的確定 站點結構圖 導航欄 精美的圖片 引人入勝的內(nèi)容 聯(lián)系方式 搜索工具 網(wǎng)頁的基本元素 網(wǎng)頁通常以網(wǎng)頁文件及其附屬文件形式存在。 1文本 2圖片和動畫 3聲音和視頻 4超鏈接 5導航欄 6表格 7表單 8其他常見元素 網(wǎng)頁的設計 1文本 2圖片和動畫 4超鏈接 5導航欄 6表格 圖像格式 由于受網(wǎng)絡帶寬的限制 ， 在 最常用的包括： 1 損壓縮算法 進行圖像的壓縮處理 ， 是目前在網(wǎng)頁設計中使用最普遍 、 最廣泛的一種圖像格式 。 2 因此適用于使用真彩色或平滑過渡色的照片和圖片 。 因此用戶將看到隨著文件的減小 ， 圖片的質量也降低了 。 3 它適于任何類型 、任何顏色深度的圖片 。 4 矢量格式 圖像 瀏覽器能識別的圖象有 可叫 目前網(wǎng)上用的最多的是 這兩種格式文件體積較小。 很好的和頁面融合，還能做成動畫。 使用網(wǎng)頁圖像的要點 在 通常需要考慮下列三個問題： 確保文件較小； 控制圖像的數(shù)量和質量； 合理使用動畫 。 超級鏈接 超鏈接是是網(wǎng)頁中 最重要 、 最根本的元素之一 。 超鏈接能夠使多個孤立的網(wǎng)頁之間產(chǎn)生一定的相互聯(lián)系 ， 從而使單獨的網(wǎng)頁形成一個有機的整體 。 （ 1） 什么是超級鏈接 超鏈接： 指從一個網(wǎng)頁指向一個目標的連接關系 ， 目標可以是另一個網(wǎng)頁 ， 也可以是相同網(wǎng)頁上的不同位置 ， 還可以是一個圖片 、 一個電子郵件地址 、 一個文件 ， 甚至是一個應用程序 。 在一個網(wǎng)頁中用來超鏈接的對象 ， 可以是一段文本或者是一個圖片 。 當瀏覽者單擊已經(jīng)鏈接的文字或圖片后 ， 鏈接目標將顯示在瀏覽器上 ， 并且根據(jù)目標的類型來打開或運行 。 超級鏈接 按照鏈接路徑的不同 ， 分為 3種類型：內(nèi)部鏈接 、 錨點鏈接和外部鏈接 。 按照使用對象的不同 ， 鏈接分為：文本超鏈接 、 圖像超鏈接 、 錨點鏈接 、 多媒體文件鏈接 、 空鏈接等 。 1。 避免孤立文件的存在：應該避免存在孤立的文件 ， 能使將來在修改和維護鏈接時有清晰的思路 。 2。 避免使用過多的超級鏈接：在一個網(wǎng)頁中設置過多超鏈接會導致網(wǎng)頁的觀賞性不強 ， 文件過大 。 如果避免不了過多的超鏈接 ， 可以嘗試使用下拉列表框 、 動態(tài)鏈接等一些鏈接方式 。 3。 網(wǎng)頁中的超鏈接不要超過 4層：鏈接層數(shù)過多容易讓人產(chǎn)生厭煩的感覺 ， 在力求做到結構化的同時 ， 應注意鏈接避免超過 4層 。 4。 頁面較長時可以使用書簽：在頁面較長時 ， 可以定義一個書簽 ， 這樣能讓瀏覽者方便地找到想要的信息 。 5。 設置主頁或上一層的鏈接：有些瀏覽者可能不是從網(wǎng)站的主頁進入網(wǎng)站的 ， 設置主頁或上一層的鏈接 ， 會讓瀏覽者更加方便地瀏覽全部網(wǎng)頁 。 合理安排超鏈接 在超鏈接過程中的路徑問題 網(wǎng)站中 3種類型的文檔路徑： 絕對路徑、和根目錄相對路徑以及和文檔相對路徑。 絕對路徑：是包含服務器協(xié)議 （ 對于網(wǎng)頁來說通常是 ） 的 完全路徑 ， 絕對路徑包含的是精確地址而不用考慮源文件的位置 。 但是如果目標文件被移動 ， 則鏈接無效 。 創(chuàng)建外部超鏈接時必須使用絕對路徑 。 和根目錄相對的路徑：是從當前站點的根目錄開始的路徑 。 站點上所有可公開的文件都存放在站點的根目錄下 。 和根目錄相對的路徑使用斜杠以告訴服務器從根目錄開始 。 和文檔相對的路徑：是指和當前文檔所在的文件夾相對的路徑。這種路徑通常是最簡單的路徑，可以用來鏈接和當前文檔處于同一文件夾下的文檔。 網(wǎng)頁布局 1網(wǎng)頁布局的基本概念 （ 1）頁面尺寸 分辨率為 1024*768像素情況，頁面顯示尺寸為 1007*600 像素； 分辨率為 800*600像素情況，頁面顯示尺寸為 780*428像素； 分辨率為 640*480像素情況，頁面顯示尺寸為 620*311像素。 在網(wǎng)頁設計過程中，向下拖動頁面是惟一給網(wǎng)頁增加更多內(nèi)容（尺寸）的方法。 除非設計者肯定站點的內(nèi)容很有吸引力，否則不要讓瀏覽者拖動頁面超過三個屏幕。 網(wǎng)頁的設計 網(wǎng)頁布局 （ 2）整體造型 整體造型 :頁面的整體形象，圖形與文本的結合應該是層疊有序的。 雖然顯示器和瀏覽器都是矩形的，但對于頁面的造型，設計者可以充分運用自然界中的各種形狀及它們的組合，如矩形、圓形、三角形、菱形等。 網(wǎng)頁制作大多結合多種圖形加以設計，只是其中某一種圖形的構圖比例可能占得多一些。 網(wǎng)頁的設計 網(wǎng)頁布局 2網(wǎng)頁布局的一般步驟 （ 1）構思 根據(jù)網(wǎng)站內(nèi)容的整體風格，設計版面布局。不要講究細節(jié)，只要有一個輪廓就行。 （ 2）初步填充內(nèi)容 把一些主要的內(nèi)容放到網(wǎng)頁中，例如，網(wǎng)站的標志、廣告條、菜單、導航條、計數(shù)器等。然后再考慮其他元素的放置。 （ 3）細化 利用網(wǎng)頁編輯工具把草案做成一個簡略的網(wǎng)頁，對每一種元素所占的比例也要有一個詳細的數(shù)字，以便以后修改。 網(wǎng)頁的設計 網(wǎng)頁布局 3網(wǎng)頁排版布局的原則 （ 1）平衡性 （ 2）對稱性 （ 3）對比性 （ 4）疏密度 （ 5）比例 網(wǎng)頁的設計 網(wǎng)頁布局 4網(wǎng)頁布局類型 “ 國 ” 字型 拐角型 標題正文型 左右框架型 上下框架型 綜合框架型 封面型 變化型 網(wǎng)頁的設計 （ 1）“國”字型布局 也可以稱為“同”字型 一些大型網(wǎng)站經(jīng)常使用 最上面是網(wǎng)站的標題及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權聲明等。這種布局是網(wǎng)上最常見的一種布局類型。 （ 2）拐角型布局 拐角型布局與上一種布局只是形式上的區(qū)別，其實是很相似的。該布局上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等內(nèi)容，右面是很寬的正文，最下面也有一些網(wǎng)站的輔助信息。在這種布局中，左側一般是導航鏈接 。 網(wǎng)頁的設計 拐角型布局 （ 3）標題正文型布局 最上面是標題或類似的一些東西，下面一般是正文，例如，一些文章頁面或注冊頁面等就屬于這種類型。 （ 4）左右框架型布局 網(wǎng)頁分為左、右兩部分，一般左面是導航鏈接，有時最上面會有一個小的標題或標志，右面是正文。 網(wǎng)頁布局 （ 5）上下框架型布局 上下框架型布局與左右框架型布局類似，區(qū)別僅僅在于這種布局分為上、下兩部分。 （ 6）綜合框架型布局 綜合框架型布局是左右框架型布局與上下框架型布局的結合，相對較復雜，類似于拐角型布局，只是采用了框架結構。 （ 7）封面型布局 封面型布局一般出現(xiàn)在一些網(wǎng)站的首頁，由一些精美的平面設計結合一些小的動畫組成，在頁面中放上幾個簡單的鏈接或者僅僅是一個 “ 進入 ” 的鏈接，甚至直接在圖片上加上鏈接而沒有任何提示。這種布局需要精心設計，能給人帶來賞心悅目的感覺。 網(wǎng)頁的設計 封面型布局 網(wǎng)頁布局 5網(wǎng)頁布局的常用技術 （ 1） 疊樣式表）布局 （ 2）表格布局 表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響，而且表格在定位圖片和文本上比用 格布局惟一的缺點是，當設計者使用了過多的表格時，會影響頁面的下載速度。 （ 3）框架布局 從布局上考慮，框架結構不失為一個好的布局方法。 網(wǎng)頁的設計 框架 框架：可以將整個網(wǎng)頁分割為多個獨立的區(qū)域，每一個區(qū)域稱為一個框架窗口，可以在任何一個框架窗口中單獨顯示一個網(wǎng)頁。應用框架的頁面稱為框架頁面。 框架將頁面分成幾個部分，每一個部分都是獨立的個框架頁面包含多個 以分別控制每個框架區(qū)域的內(nèi)容。 框架由兩部分組成：一個框架集和獨立的框架。 框架集文件定義了包含在該框架集中的框架數(shù)量、每個框架的大小、鏈接到每個框架的頁面?？蚣芗⒉辉跒g覽器中顯示，它只存儲包括上述信息在內(nèi)的、關于每個框架的信息。 框架的作用 1）節(jié)約下載時間 2）導航功能 配色原則 第一印象 ：視覺 處理原則 “總體協(xié)調，局部對比 1色彩的形成 色彩是一種視覺，是光作用于眼睛的結果。 2色彩的特征 色彩的基本特征主要有 色調、亮度和飽和度 三個。 色調 :色彩的種類。同一色調指色彩中組成彩色成分的三原色光組合比例相同的一系列色彩。 亮度 :色彩的明亮程度。指顏色的深淺之分。 飽和度 :色彩的鮮艷程度。受物體表面結構、照射光源的特點以及視覺生理特性的影響。 網(wǎng)頁的設計 配色原則 3色彩的心理感覺 紅色是一種激奮的色彩，具有刺激效果，能使人產(chǎn)生沖動、憤怒、熱情、活力的感覺； 綠色介于冷暖兩類色彩的中間，給人以和睦、寧靜、健康、安全的感覺，它和金黃、淡白色搭配，可以產(chǎn)生優(yōu)雅、舒適的氣氛； 橙色也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨、時尚的效果； 黃色表現(xiàn)快樂、希望、智慧和輕快的個性，它