第2章-1總體概述及網(wǎng)站建設的規(guī)劃與設計.ppt

1、1,第2章 網(wǎng)站建設概論,2,2.1 總體概述 2.2 網(wǎng)站的規(guī)劃與設計 2.3 站點建設 2.4 站點的發(fā)布以及網(wǎng)站的管理與維護 2.5 網(wǎng)站策劃書,本章內(nèi)容,3,課后作業(yè)：網(wǎng)站策劃書 要求： 1.撰寫一份網(wǎng)站策劃書，所策劃網(wǎng)站的類型為如下三種類型： 商學系網(wǎng)站 某家企業(yè)的網(wǎng)站 其他 2.該策劃書所策劃的網(wǎng)站靜態(tài)部分內(nèi)容要求在本學期實現(xiàn)。 3.本策劃書將作為本文學期網(wǎng)站建設作業(yè)的一個附加文檔要求與網(wǎng)站一起提交。,4,2.1總體概述,圖2-1 網(wǎng)站建設的步驟,5,2.1.1 網(wǎng)站的規(guī)劃與設計 在這步中需要對網(wǎng)站進行整體的分析，明確網(wǎng)站的建設目標，確定網(wǎng)站的訪問對象、網(wǎng)站應提供的內(nèi)容與服務及網(wǎng)站

2、的域名，設計網(wǎng)站的標志、網(wǎng)站的風格、網(wǎng)站的目錄結構等各方面的內(nèi)容。這一步是網(wǎng)站建設成功與否的前提，因為所有的后續(xù)步驟都必須按照第一步的規(guī)劃與設計來進行實施。,6,2.1.2 站點建設 網(wǎng)站規(guī)劃設計之后，就可以進入站點建設的步驟。這個步驟主要包括域名注冊、網(wǎng)站配置、網(wǎng)頁制作和網(wǎng)站測試四個部分。除了網(wǎng)站測試必須要在其他三項內(nèi)容開始之后才能進行之外，域名注冊、網(wǎng)站配置和網(wǎng)頁制作相對獨立，可以同時進行。 2.1.3 發(fā)布網(wǎng)站 相關內(nèi)容設置好之后就可以正式發(fā)布網(wǎng)站。也就是說將網(wǎng)站放到Internet上允許用戶通過網(wǎng)站的域名進行訪問。,7,2.1.4 網(wǎng)站的管理與維護 網(wǎng)站的管理與維護雖然是最后一個步驟，

3、但實際上貫穿網(wǎng)站建設的全過程，只要網(wǎng)站沒有停止運行，就需要對其進行管理和維護，所以這一步也是最為費勁的一步。網(wǎng)站的管理和維護主要包括安全管理、性能管理和內(nèi)容管理三個方面。 另外：從圖2-1也可以看到，網(wǎng)站建設是一個循環(huán)的過程，并不是說一次過后就結束了。它需要隨著需求的變化不斷地對網(wǎng)站進行再次規(guī)劃與設計，進而不斷地建設和發(fā)布新的內(nèi)容與服務，不斷地升級服務器和網(wǎng)絡環(huán)境以保障網(wǎng)站的運行性能。,8,2.2 網(wǎng)站的規(guī)劃與設計,在網(wǎng)站建設之前，需要對網(wǎng)站進行一系列的分析和估計，然后根據(jù)分析的結果提出合理的建設方案，這就是網(wǎng)站的規(guī)劃與設計。 網(wǎng)站的規(guī)劃與設計可分為：網(wǎng)站定位、欄目規(guī)劃（確定框架結構）、目錄結

4、構設計、風格設計、導航系統(tǒng)設計幾個環(huán)節(jié)。 網(wǎng)站的規(guī)劃和設計結果，一般應以網(wǎng)站策劃書的形式呈現(xiàn)。網(wǎng)站策劃書的具體內(nèi)容，見本節(jié)結束部分。,9,2.2.1 網(wǎng)站的定位 網(wǎng)站的定位就是確定網(wǎng)站的建設目標，它通常需要確定三個方面： 網(wǎng)站的建設目的 為什么要建立這個網(wǎng)站? 網(wǎng)站的訪問對象 這個網(wǎng)站為誰服務? 網(wǎng)站的內(nèi)容與服務 網(wǎng)站提供哪些方面的內(nèi)容和服務?,10,2.2.2 欄目規(guī)劃（內(nèi)容規(guī)劃）及其任務 欄目規(guī)劃的主要任務是對所收集的大量內(nèi)容進行有效的篩選，并將它們組織成一個合理的便于理解的邏輯結構，即建立網(wǎng)站的邏輯結構，在這其中不僅需要為整個網(wǎng)站建立層次型結構，還需要為每一個欄目或者子欄目設計合理的邏輯

5、結構。 除此之外，欄目規(guī)劃還需要確定哪些是重點欄目、哪些是需要實時更新的欄目、需要提供哪些功能性欄目等。,11,（1）確定必需的欄目 欄目規(guī)劃的第一步就是要確定哪些是必需的欄目，這通常取決于網(wǎng)站的性質(zhì)。 比如對于一個企業(yè)網(wǎng)站來說，公司簡介、產(chǎn)品介紹、服務內(nèi)容、聯(lián)系方式、技術支持等欄目是必不可少的，而對于政府網(wǎng)站來說政務、政策法規(guī)、地方經(jīng)濟、百姓生活、觀光旅游等欄目都是必需的。個人網(wǎng)站相對來說比較隨意，往往取決于所收集的內(nèi)容，但個人簡介、個人收藏等欄目通常不能缺少。,12,除了內(nèi)容欄目之外，網(wǎng)站還應該包含另外兩類欄目，分別是用戶指南類欄目和交互性欄目。 用戶指南類欄目 該欄目的目的是為了幫助用戶

6、了解這個網(wǎng)站的背景、性質(zhì)、目的、功能及發(fā)展歷程，了解如何更好地對網(wǎng)站進行訪問，了解網(wǎng)站建設的最新動態(tài)。這類欄目通常以“幫助”、“關于網(wǎng)站”、“網(wǎng)站地圖”、“最新動態(tài)”等名稱出現(xiàn)。 交互性欄目 該欄目是能與用戶進行雙向交流的欄目，通過它不僅可以解答用戶的疑問、了解用戶的需求，而且還可以獲得用戶對網(wǎng)站的建議和看法，讓用戶與網(wǎng)站、用戶與用戶之間建立良好的溝通，以便更好地幫助網(wǎng)站的建設與發(fā)展。交互性欄目最常見的方式就是留言板。,13,（2）確定重點欄目 在確定完需要設置哪些欄目之后，接著需要做的是從這些欄目中挑選出最為重要的幾個欄目然后對它們進行更為詳細的規(guī)劃，這種選擇往往取決于網(wǎng)站的目的與功能。 比

7、如企業(yè)網(wǎng)站，其目的可能是為了更好地推銷自己的產(chǎn)品，所以產(chǎn)品介紹便是它的重點欄目。因此為了更好地介紹產(chǎn)品，它除了基本的產(chǎn)品介紹之外，可能還需要設立價格信息、網(wǎng)上定購、產(chǎn)品動態(tài)等相關欄目。,14,（3）建立層次型結構（確定網(wǎng)站框架結構） 建立層次型結構是一個遞進的過程，即從上到下一級一級地確定每一層的欄目。 首先是確定第一層，即網(wǎng)站所必需的欄目； 然后對其中的重點欄目進行進一步的規(guī)劃，確定它們所必需的子欄目，以此類推直至不需要再細分為止； 最后將所有的欄目及其子欄目連在一起就形成了網(wǎng)站的層次型結構。,15,線型結構 線型結構是最為簡單的邏輯結構，如圖2-2所示，它將多個網(wǎng)頁按照一定的先后順序鏈接起

8、來，使得用戶在沒有完成上一個網(wǎng)頁的訪問之前就無法進入下一個網(wǎng)頁。,圖2-2 線性結構,16,層次型結構 層次型結構是按照網(wǎng)頁之間的包含關系組織而成。,圖2-3 層次型結構說明圖,17,優(yōu)點：層次型結構簡單而且直觀，能將所有的內(nèi)容劃分得非常清晰且便于理解，所以幾乎所有的網(wǎng)站都采用這種結構來進行總體的欄目規(guī)劃，即將所有的內(nèi)容先分成若干個大欄目，然后再將每個大欄目細分成若干小欄目，以此類推直到不用再細分為止。 缺點：層次型結構也有不好的地方，就是用戶如果要訪問最底層的網(wǎng)頁就不得不按照層次從上到下一級一級地訪問，最終到達想要訪問的網(wǎng)頁。如果層次型結構的層次很深，比如有五層或者六層，那么所帶來的麻煩就大

9、大降低了層次型網(wǎng)絡所具有的優(yōu)點。又比如圖2-3所示的例子，用戶想從網(wǎng)頁A轉(zhuǎn)到網(wǎng)頁B，很可能不得不先從網(wǎng)頁A一級級地返回到網(wǎng)頁C，然后再一級一級地往下走直到網(wǎng)頁B。 注意：所以過深過于復雜的層次型結構反而會帶來很多不良的影響，最好的深度就是三層，最多不要超過五層。另外，建立一個良好的導航系統(tǒng)也可以彌補層次型結構這方面的缺點。,18,如圖2-4所示，網(wǎng)絡型結構是指多個網(wǎng)頁相互之間都超鏈接的一種結構，這些網(wǎng)頁可以是層次結構上的任意網(wǎng)頁，但是因為導航的需要或者內(nèi)容上的相關性而鏈接在一起。,網(wǎng)絡型結構,圖2-4 網(wǎng)絡型結構,19,優(yōu)點：網(wǎng)絡型結構的實現(xiàn)就在于在所有相關的網(wǎng)頁上保留到其他網(wǎng)頁的超鏈接。這種

10、結構使用戶能更方便地在網(wǎng)站上游弋。 缺點：帶來一個龐大超鏈接數(shù)的問題，龐大的超鏈接數(shù)維護起來相當麻煩，某個網(wǎng)頁的改動(如改名、刪除、增加)就可能同時需要對所有的網(wǎng)頁進行相應的修改，這是誰都不愿意做的事情，所以在網(wǎng)站中需要謹慎使用網(wǎng)絡型結構。,20,2.2.3 網(wǎng)站目錄結構設計 目錄結構又稱為物理結構，它的設計解決的是如何在硬盤上更好地存放包括網(wǎng)頁、圖片、Flash動畫、JavaApplet、數(shù)據(jù)庫等各種資源在內(nèi)的所有網(wǎng)站資源。 目錄結構是否合理，對網(wǎng)站的創(chuàng)建效率會產(chǎn)生較大的影響，但更主要的，會對未來網(wǎng)站的性能、網(wǎng)站的維護及擴展產(chǎn)生很大的影響。,21,目錄結構對用戶來說是不可見的，它只針對網(wǎng)站管

11、理員，所以它的設計是為了網(wǎng)站管理員能從文件的角度更好地管理網(wǎng)站的所有資源。 不建議將所有的網(wǎng)頁文件和資源文件都放在同一個目錄底下。當文件一多時，www服務器的性能就會急劇下降，因為查找一個網(wǎng)頁文件需要很長的時間，而且網(wǎng)站管理員在區(qū)分不同性質(zhì)的文件和查找某一個特定的文件時也會變得非常麻煩。,22,目錄結構的設計通常需要遵循以下原則： 不要將所有的文件都放在根目錄下 2) 根據(jù)欄目規(guī)劃來設計目錄結構 一般情況下，可以按照網(wǎng)站的欄目規(guī)劃來設計目錄結構，使兩者有一一對應的關系。但是這么做，也會導致一個安全問題，就是訪問者很容易猜測出網(wǎng)站的目錄結構，也就容易對網(wǎng)站實施攻擊。所以在設計目錄結構的時候，盡量

12、避免目錄名和欄目名相一致。,23,3) 每個目錄下都建立獨立的images子目錄 將圖片及資源文件都放在一個獨立的images目錄下，可以使目錄結構更加清晰。如果很多網(wǎng)頁都需要用到同一個圖片，比如網(wǎng)站標志圖片，那么將這個圖片放到所有這些網(wǎng)頁共有的最高層目錄的images子目錄下。 4) 目錄的層次不要太深 5) 不要使用中文目錄名 因為你的站點是對Internet所有用戶開放的，所以你得考慮到使用非中文操作系統(tǒng)的客戶也能正常訪問你的站點。對于目錄名，最好都使用英文。,24,6) 可執(zhí)行文件和不可執(zhí)行文件分開放置 將可執(zhí)行的動態(tài)服務器網(wǎng)頁文件和不可執(zhí)行的靜態(tài)網(wǎng)頁文件與動態(tài)網(wǎng)頁文件分別放在兩個目錄

13、下，然后將存放可執(zhí)行網(wǎng)頁文件的目錄設為不可讀和執(zhí)行。這么做的好處就是可以避免動態(tài)服務器網(wǎng)頁文件被讀取。 7) 數(shù)據(jù)庫文件單獨放置 數(shù)據(jù)庫文件因為安全需求很高，所以最好放置在HTTP所不能訪問到的目錄底下。這樣就可以避免惡意的用戶通過HTTP方式取到數(shù)據(jù)庫文件。,網(wǎng)站的邏輯結構設計 網(wǎng)站的目錄結構設計原則,25,本節(jié)課重點,26,2.2.4 風格設計 風格設計包含很多內(nèi)容，為了體現(xiàn)個人風格，符合網(wǎng)站的名稱和定位。下面我們在色彩搭配和版面布局方面做一些規(guī)劃和設計。,27,（1） 色彩搭配 網(wǎng)站的色彩是最影響網(wǎng)站整體風格的因素，也是站點美工設計中最令人頭疼的問題。許多網(wǎng)頁設計者都缺乏色彩搭配的基本知

14、識，所以在制作網(wǎng)頁之前往往有一個很好的想法，但是卻不知如何搭配網(wǎng)頁的顏色來表達預想的效果。因此，在介紹色彩搭配之前，先來看看色彩的基本知識。,28, 色彩的基本知識 在物理學中，顏色是因為光的折射而產(chǎn)生的。顏色不同，光的波長也就不同。紅、綠、藍是自然界的三原色，它們不同程度的組合可以形成各種顏色。所以在網(wǎng)頁中，也就用它們的不同顏色值來表示各種顏色。,29,網(wǎng)頁中的顏色通常采用6位十六進制的數(shù)值來表示，每兩位代表一種顏色，從左到右依次表示紅色、綠色和藍色。顏色值越高表示這種顏色越深。比如紅色，其數(shù)值為“#FF0000”，白色為“#FFFFFF”，黑色為“#000000”。也可以采用三個以“，”相

15、隔的十進制數(shù)來表示某一顏色，比如紅色，其十進制表示為color(255，0，0)。,在傳統(tǒng)的色彩理論中，顏色一般分為彩色和非彩色(或稱為灰色)兩大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的顏色。在網(wǎng)頁中，如果三種顏色的數(shù)值相等，就顯示為灰色。,30,31,太陽光是彩色的，按顏色的色調(diào)通常將其劃分為七種顏色：紅、橙、黃、綠、青、藍、紫。 如果將這七種顏色按這個順序漸變?yōu)橐粭l色帶的話，越靠近紅色，給人的感覺越溫暖，越靠近藍色和紫色，給人的感覺越寒冷。 所以紅、橙、黃的組合又稱為暖色調(diào)，青、藍、紫的組合又稱為冷色調(diào)。,32,除了冷暖的差別外，不同的單個顏色也會給人帶來不同的感覺，通常

16、： 紅色：是一種激奮的色彩，給人以沖動、憤怒、熱情和活力的感覺。 綠色：介于冷暖兩種色彩的中間，一顯得和睦、寧靜、健康、安全。它和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅、舒適的氣氛。 橙色：也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨和時尚的效果。 黃色：充滿快樂、希望、智慧和輕快，它也是最亮的一種顏色。 藍色：是最具涼爽、清新、專業(yè)的色彩。它和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣 (如天空的色彩)。 白色：給人以潔白、明快、純真和干凈的感覺。 黑色：通常是深沉、神秘、寂靜、悲哀和壓抑的代表。 灰色：具有中庸、平凡、溫和、謙讓、中立和高雅的感覺，它可以和任何一種顏色進行搭配。,33,34,35,網(wǎng)站的

17、色彩搭配 色彩搭配的步驟 第一步，為整個網(wǎng)站選取一種主色調(diào)。主色調(diào)指的是整個網(wǎng)站給人印象最深的顏色，或者說除白色之外用得最多的顏色。 選擇主色調(diào)的基本原則：正如前面所述，不同的顏色給人的感受是不一樣的，所以主色調(diào)選取的一個最基本的原則就是保證所選的顏色與網(wǎng)站的主題或者形象相符，進一步地，能夠通過這種顏色加深用戶對網(wǎng)站的印象。企業(yè)在選取主色調(diào)的時候需要考慮符合企業(yè)自身的形象。,36,選好主色調(diào)之后，接下來要考慮的就是在什么地方使用主色調(diào)。 主色調(diào)最常表現(xiàn)在三個位置： 首先是頭部，也就是網(wǎng)頁最上面的部分，通常包含導航條。頭部是最能體現(xiàn)主色調(diào)的地方，所以所有的網(wǎng)站都會在頭部表現(xiàn)主色調(diào)。 然后是欄目索

18、引條上，欄目索引條雖然面積小，但是出現(xiàn)在網(wǎng)頁的各個部位，所以能非常有效地渲染主色調(diào)。 最后是網(wǎng)頁上的文字，文字筆畫雖細，但大面積的文字也能很好地突出主色調(diào)。,37,第二步，再為主色調(diào)搭配多種適合的顏色。 該步驟要考慮的是在別的地方使用什么顏色去搭配這種主色調(diào)，比如背景色、文字顏色、導航條顏色、插圖顏色等都使用什么顏色。色彩搭配是一項非常精細的工作，因為往往一個細節(jié)就會影響整個網(wǎng)頁的色彩均衡。,38,網(wǎng)頁上不同位置顏色選取原則 選取背景色 大多數(shù)的網(wǎng)站都會選取白色作為背景色。白色使得狹小的屏幕空間顯得很大，再多的信息在白色的背景下，其排放也可以顯得很整齊，其頁面也可以顯得非常干凈和整潔。 導航條

19、的顏色 導航條是對網(wǎng)站欄目的一個索引，它通常以一個水平長條的形式出現(xiàn)在網(wǎng)頁頭部的下邊。導航條作為頭部的一部分，經(jīng)常采用主色調(diào)，另方面，導航條因為介于網(wǎng)頁的頭部和內(nèi)容部分的中間，所以也經(jīng)常作為頭部和內(nèi)容部分的過渡，這種情況下通常采用灰色系。,39,欄目索引條的顏色 欄目索引條因為分布在網(wǎng)頁的各個部位，所以經(jīng)常采用主色調(diào)中不同深度的顏色來烘托整體的效果。 文字的顏色 文字在一個網(wǎng)頁上是無處不在的，但是文字的筆畫比較單薄，所以文字通常用來進一步突出主色調(diào)，或者用來過渡和緩解頁面的顏色。文字的顏色主要根據(jù)文字的背景色進行搭配，它與背景色應有較大的反差，如白底黑字、藍底白字等，以便能清楚得顯示文字。其次

20、文字的顏色搭配還得兼顧文字周圍物體的顏色。,40,插圖的顏色 網(wǎng)頁的插圖通常尺寸都比較小，所以它的顏色可以絢麗、豐富一些，這樣一來可以使頁面變得活潑，二來可以點綴整個頁面。但是在選擇有背景的圖片時要特別小心，不要和網(wǎng)頁的背景色及圖所插區(qū)域的背景色相沖突。解決這個問題一般有兩種方法：一種是采用可透明的GIF圖，另一種是將圖片的背景色做成和網(wǎng)頁背景色一樣的顏色。,41,42,圖2-5 微軟公司主頁,43,圖2-6 IBM公司主頁,44,（2） 版面布局設計 網(wǎng)站在版面布局上的一個特點 那就是從網(wǎng)站層次型結構的頂層主頁到最底層的內(nèi)容網(wǎng)頁，版面布局不斷簡化。 網(wǎng)站在進行版面布局設計時應采用的原則： 首

21、先，對主頁進行版面布局； 然后，在主頁布局的基礎上對欄目首頁進行版面布局； 接著，往下； 最后，對內(nèi)容網(wǎng)頁進行版面布局。,45,在網(wǎng)頁的不同區(qū)域上安排不同的內(nèi)容 人們在瀏覽一個網(wǎng)頁的時候，通常會把第一眼停留在網(wǎng)頁的左上角或中間的地方(如圖2-7所示)，然后才會瀏覽其他部分。這個部分通常稱為焦點，所以在布局內(nèi)容的時候，應該把最能傳達信息、最能吸引人的內(nèi)容放在這些地方，比如網(wǎng)站標志和最新新聞。,46,圖2-7網(wǎng)頁設計重點區(qū)域,47,版面布局的基本方法 第一種方法是用手工的方式在紙上畫草圖，這種方法可以大概地描繪出網(wǎng)頁的框架，但是也只能到此為止，不能再進行更細的工作，如配色、擺放文字和圖片等。 第二

22、種方法是用專業(yè)制圖軟件來進行布局，建議使用Photoshop。Photoshop是一個非常優(yōu)秀的圖片處理工具。用它可以像設計一幅圖片、一幅招貼畫、一幅廣告一樣去設計一個網(wǎng)頁的界面，然后再考慮如何用網(wǎng)頁制作工具去實現(xiàn)這個網(wǎng)頁。,48,版面布局的常見形式 上下結構,49,左右結構,50,半包圍結構,51,全包圍結構,52,自由結構,53,2.2.5 網(wǎng)站的導航設計 （1）導航的實現(xiàn)方法 導航最常用的實現(xiàn)方法就是導航條。在導航條中，所有超鏈接所對應的網(wǎng)頁在網(wǎng)站的層次型結構中是并列的，所以通過它可以快速地切換到并列的其他網(wǎng)頁。 比如圖2-8所示的新浪網(wǎng)首頁中就有很多導航條。首先是網(wǎng)站第一層分類欄目的導航條，這個導航條幾乎出現(xiàn)在新浪網(wǎng)的所有網(wǎng)頁中，所以在任何一個網(wǎng)頁通過它都可以立即跳轉(zhuǎn)到新聞、UC聊天、體育等各個欄目的首頁。,54,圖2-8新浪網(wǎng)導航條,55,除了普通的導航條之外，導航另一種非常重要的實現(xiàn)方法是路徑導航，即在網(wǎng)頁上顯示這個網(wǎng)頁在網(wǎng)站層次型結構上的位置。通過路徑導航，用戶不僅可以了解當前所處的位置，還可以快速地返回到當前網(wǎng)頁以上的任何一層網(wǎng)頁。 比如圖2-9所示的新浪網(wǎng)讀書欄目上就有路徑導航，從這個導航可以清