網站開發(fā)第七講網站規(guī)劃與設計

1、.網 站 開 發(fā)網 站 開發(fā)第七講 網站規(guī)劃與設計v網站建設總的來說需要經歷四個步驟，分別是網站的規(guī)劃與設計、站點建設、網站發(fā)布和網站的管理與維護，如圖所示。v網站的規(guī)劃與設計是網站建設的網站的規(guī)劃與設計是網站建設的第一步。第一步。在這在這步中需要對網站進行整體的分析，明步中需要對網站進行整體的分析，明確網站的建設目標，確定網站的訪問對象、確網站的建設目標，確定網站的訪問對象、網站應提供的內容與服務及網站的域名，設網站應提供的內容與服務及網站的域名，設計網站的標志、網站的風格、網站的目錄結計網站的標志、網站的風格、網站的目錄結構等各方面的內容。這一步是網站建設成功構等各方面的內容。這一步是網站

2、建設成功與否的前提，因為所有的后續(xù)步驟都必須按與否的前提，因為所有的后續(xù)步驟都必須按照第一步的規(guī)劃與設計來進行實施。照第一步的規(guī)劃與設計來進行實施。網站開發(fā)第七講 網站的規(guī)劃與設計 1 網站的定位 網站的定位就是確定網站的建設目標，它通常需要確定三個方面：網站的建設目的、網站的訪問對象和網站的內容與服務。用更通俗的話來說，就是回答“為什么要建立這個網站?這個網站為誰服務?網站提供哪些方面的內容和服務?”這三個問題。2.內容搜集 一般現在都是從網上搜集相關資料。v3、欄目規(guī)劃及其任務欄目規(guī)劃及其任務v 欄目規(guī)劃的主要任務是對所收集欄目規(guī)劃的主要任務是對所收集的大量內容進行有效的篩選，并將它們的大

3、量內容進行有效的篩選，并將它們組織成一個合理的便于理解的邏輯結構，組織成一個合理的便于理解的邏輯結構，即建立網站的邏輯結構，在這其中不僅即建立網站的邏輯結構，在這其中不僅需要為整個網站建立層次型結構，還需需要為整個網站建立層次型結構，還需要為每一個欄目或者子欄目設計合理的要為每一個欄目或者子欄目設計合理的邏輯結構。除此之外，欄目規(guī)劃還需要邏輯結構。除此之外，欄目規(guī)劃還需要確定哪些是重點欄目、哪些是需要實時確定哪些是重點欄目、哪些是需要實時更新的欄目、需要提供哪些功能性欄目更新的欄目、需要提供哪些功能性欄目等。等。1)確定必需的欄目確定必需的欄目 欄目規(guī)劃的第一步就是要確定哪些是必需的欄目，欄目

4、規(guī)劃的第一步就是要確定哪些是必需的欄目，這通常取決于網站的性質。比如對于一個企業(yè)網站來這通常取決于網站的性質。比如對于一個企業(yè)網站來說，公司簡介、產品介紹、服務內容、聯系方式、技說，公司簡介、產品介紹、服務內容、聯系方式、技術支持等欄目是必不可少的，而對于政府網站來說政術支持等欄目是必不可少的，而對于政府網站來說政務、政策法規(guī)、地方經濟、百姓生活、觀光旅游等欄務、政策法規(guī)、地方經濟、百姓生活、觀光旅游等欄目都是必需的。個人網站相對來說比較隨意，往往取目都是必需的。個人網站相對來說比較隨意，往往取決于所收集的內容，但個人簡介、個人收藏等欄目通決于所收集的內容，但個人簡介、個人收藏等欄目通常不能缺

5、少。常不能缺少。v 除了內容欄目之外，網站還應該包含除了內容欄目之外，網站還應該包含另外兩類欄目，分別是用戶指南類欄目和交另外兩類欄目，分別是用戶指南類欄目和交互性欄目。用戶指南類欄目的目的是為了幫互性欄目。用戶指南類欄目的目的是為了幫助用戶了解這個網站的背景、性質、目的、助用戶了解這個網站的背景、性質、目的、功能及發(fā)展歷程，了解如何更好地對網站進功能及發(fā)展歷程，了解如何更好地對網站進行訪問，了解網站建設的最新動態(tài)。這類欄行訪問，了解網站建設的最新動態(tài)。這類欄目通常以目通常以“幫助幫助”、“關于網站關于網站”、“網站地圖網站地圖”、“最新動態(tài)最新動態(tài)”等名稱出現。等名稱出現。2)確定重點欄目確

6、定重點欄目 在確定完需要設置哪些欄目之后，接著需要做的在確定完需要設置哪些欄目之后，接著需要做的是從這些欄目中挑選出最為重要的幾個欄目然后對它是從這些欄目中挑選出最為重要的幾個欄目然后對它們進行更為詳細的規(guī)劃，這種選擇往往取決于網站的們進行更為詳細的規(guī)劃，這種選擇往往取決于網站的目的與功能。目的與功能。3)建立層次型結構建立層次型結構 建立層次型結構是一個遞進的過程，即從建立層次型結構是一個遞進的過程，即從上到下一級一級地確定每一層的欄目。首先是上到下一級一級地確定每一層的欄目。首先是確定第一層，即網站所必需的欄目，然后對其確定第一層，即網站所必需的欄目，然后對其中的重點欄目進行進一步的規(guī)劃，

7、確定它們所中的重點欄目進行進一步的規(guī)劃，確定它們所必需的子欄目，以此類推直至不需要再細分為必需的子欄目，以此類推直至不需要再細分為止。將所有的欄目及其子欄目連在一起就形成止。將所有的欄目及其子欄目連在一起就形成了網站的層次型結構。了網站的層次型結構。v4、網站目錄結構設計網站目錄結構設計v 目錄結構又稱為物理結構，它的設目錄結構又稱為物理結構，它的設計解決的是如何在硬盤上更好地存放包括計解決的是如何在硬盤上更好地存放包括網頁、圖片、網頁、圖片、FlashFlash動畫、動畫、JavaAppletJavaApplet、數據庫等各種資源在內的所有網站資源。數據庫等各種資源在內的所有網站資源。v 1

8、)1)每個目錄下都建立獨立的每個目錄下都建立獨立的imagesimages子目錄子目錄 將圖片及資源文件都放在一個獨立將圖片及資源文件都放在一個獨立的的imagesimages目錄下，可以使目錄結構更加目錄下，可以使目錄結構更加清晰。如果很多網頁都需要用到同一個清晰。如果很多網頁都需要用到同一個圖片，比如網站標志圖片，那么將這個圖片，比如網站標志圖片，那么將這個圖片放到所有這些網頁共有的最高層目圖片放到所有這些網頁共有的最高層目錄的錄的imagesimages子目錄下。子目錄下。2) 目錄的層次不要太深目錄的層次不要太深3) 不要使用中文目錄名不要使用中文目錄名 因為你的站點是對因為你的站點是

9、對InternetInternet所有用所有用戶開放的，所以你得考慮到使用非中文戶開放的，所以你得考慮到使用非中文操作系統的客戶也能正常訪問你的站點。操作系統的客戶也能正常訪問你的站點。對于目錄名，最好都使用英文。對于目錄名，最好都使用英文。5. Logo設計 采用fireworks或者photoshop來設計。顏色應該與網站整體顏色保持一致。6風格設計：風格設計： 風格設計包含很多內容，為了體現個人風格，符風格設計包含很多內容，為了體現個人風格，符合網站的名稱和定位。下面我們在色彩搭配和版面合網站的名稱和定位。下面我們在色彩搭配和版面布局方面做一些規(guī)劃和設計。布局方面做一些規(guī)劃和設計。1)

10、色彩搭配色彩搭配 網站的色彩是最影響網站整體風格的因素，網站的色彩是最影響網站整體風格的因素，也是站點美工設計中最令人頭疼的問題。許也是站點美工設計中最令人頭疼的問題。許多網頁設計者都缺乏色彩搭配的基本知識，多網頁設計者都缺乏色彩搭配的基本知識，所以在制作網頁之前往往有一個很好的想法，所以在制作網頁之前往往有一個很好的想法，但是卻不知如何搭配網頁的顏色來表達預想但是卻不知如何搭配網頁的顏色來表達預想的效果。因此，在介紹色彩搭配之前，先來的效果。因此，在介紹色彩搭配之前，先來看看色彩的基本知識?？纯瓷实幕局R。 色彩的基本知識色彩的基本知識 在物理學中，顏色是因為光的折射而產生的。顏在物理學

11、中，顏色是因為光的折射而產生的。顏色不同，光的波長也就不同。紅、綠、藍是自然界的色不同，光的波長也就不同。紅、綠、藍是自然界的三原色，它們不同程度的組合可以形成各種顏色。所三原色，它們不同程度的組合可以形成各種顏色。所以在網頁中，也就用它們的不同顏色值來表示各種顏以在網頁中，也就用它們的不同顏色值來表示各種顏色。色。 網頁中的顏色通常采用網頁中的顏色通常采用6 6位十六進制的數值來表位十六進制的數值來表示，每兩位代表一種顏色，從左到右依次表示紅色、示，每兩位代表一種顏色，從左到右依次表示紅色、綠色和藍色。顏色綠色和藍色。顏色 值越高表示這種顏色越深。比如紅色，其數值為值越高表示這種顏色越深。比

12、如紅色，其數值為“#FF0000#FF0000”，白色為，白色為“#FFFFFF#FFFFFF”，黑色為，黑色為“#000000#000000”。也。也可以采用三個以可以采用三個以“，”相隔的十進制數來表示某一顏色，相隔的十進制數來表示某一顏色，比如紅色，其十進制表示為比如紅色，其十進制表示為color(255color(255，0 0，0)0)。 在傳統的色彩理論中，顏色一般分為彩色和非彩在傳統的色彩理論中，顏色一般分為彩色和非彩色色( (或稱為灰色或稱為灰色) )兩大色系。非彩色是指黑、白和所有灰兩大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的顏色。在網頁中，如果色，彩色是指

13、除非彩色外所有的顏色。在網頁中，如果三種顏色的數值相等，就顯示為灰色。三種顏色的數值相等，就顯示為灰色。v 太陽光是彩色的，按顏色的色調通常太陽光是彩色的，按顏色的色調通常將其劃分為七種顏色：紅、橙、黃、綠、青、將其劃分為七種顏色：紅、橙、黃、綠、青、藍、紫。如果將這七種顏色按這個順序漸變藍、紫。如果將這七種顏色按這個順序漸變?yōu)橐粭l色帶的話，越靠近紅色，給人的感覺為一條色帶的話，越靠近紅色，給人的感覺越溫暖，越靠近藍色和紫色，給人的感覺越越溫暖，越靠近藍色和紫色，給人的感覺越寒冷。所以紅、橙、黃的組合又稱為暖色調，寒冷。所以紅、橙、黃的組合又稱為暖色調，青、藍、紫的組合又稱為冷色調。青、藍、紫

14、的組合又稱為冷色調。v 除了冷暖的差別外，不同的單個顏色除了冷暖的差別外，不同的單個顏色也會給人帶來不同的感覺，通常：也會給人帶來不同的感覺，通常：v紅色紅色：是一種激奮的色彩，給人以沖動、憤：是一種激奮的色彩，給人以沖動、憤怒、熱情和活力的感覺。怒、熱情和活力的感覺。v綠色綠色：介于冷暖兩種色彩的中間，一顯得和：介于冷暖兩種色彩的中間，一顯得和睦、寧靜、健康、安全。它和金黃、淡白搭配，可睦、寧靜、健康、安全。它和金黃、淡白搭配，可以產生優(yōu)雅、舒適的氣氛。以產生優(yōu)雅、舒適的氣氛。v橙色橙色：也是一種激奮的色彩，具有輕快、歡：也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨和時尚的效果。欣、熱烈、

15、溫馨和時尚的效果。v黃色黃色：充滿快樂、希望、智慧和輕快，它也：充滿快樂、希望、智慧和輕快，它也是最亮的一種顏色。是最亮的一種顏色。v v藍色藍色：是最具涼爽、清新、專業(yè)的色彩。：是最具涼爽、清新、專業(yè)的色彩。它和白色混合，能體現柔順、淡雅、浪漫的氣它和白色混合，能體現柔順、淡雅、浪漫的氣 ( (如天空的色彩如天空的色彩) )。v白色：給人以潔白、明快、純真和干凈的白色：給人以潔白、明快、純真和干凈的感覺。感覺。v黑色：通常是深沉、神秘、寂靜、悲哀和黑色：通常是深沉、神秘、寂靜、悲哀和壓抑的代表。壓抑的代表。v灰色灰色：具有中庸、平凡、溫和、謙讓、中：具有中庸、平凡、溫和、謙讓、中立和高雅的感

16、覺，它可以和任何一種顏色進行搭立和高雅的感覺，它可以和任何一種顏色進行搭配。配。網站的色彩搭配網站的色彩搭配 網站的色彩搭配通常分為兩個步驟，那么第一步就是網站的色彩搭配通常分為兩個步驟，那么第一步就是為整個網站選取一種主色調，然后再為主色調搭配多種為整個網站選取一種主色調，然后再為主色調搭配多種適合的顏色。主色調指的是整個網站給人印象最深的顏適合的顏色。主色調指的是整個網站給人印象最深的顏色，或者說除白色之外用得最多的顏色。色，或者說除白色之外用得最多的顏色。 正如前面所述，不同的顏色給人的感受是不一樣的，正如前面所述，不同的顏色給人的感受是不一樣的，所以主色調選取的一個最基本的原則就是保證

17、所選的顏所以主色調選取的一個最基本的原則就是保證所選的顏色與網站的主題或者形象相符，進一步地，能夠通過這色與網站的主題或者形象相符，進一步地，能夠通過這種顏色加深用戶對網站的印象。種顏色加深用戶對網站的印象。v 比如藍色是一種讓人感覺非常專業(yè)的比如藍色是一種讓人感覺非常專業(yè)的顏色，所以許多高科技公司都喜歡使用藍色顏色，所以許多高科技公司都喜歡使用藍色作為公司網站的顏色。最典型的當數微軟公作為公司網站的顏色。最典型的當數微軟公司司( (圖圖2 25 5，) )，藍色極大地加強了人們對他，藍色極大地加強了人們對他們產品的信任感。又比如使用紅色的北京市們產品的信任感。又比如使用紅色的北京市政府網站政

18、府網站()()，是通過紅色來向人們傳達北京，是通過紅色來向人們傳達北京作為中國首都大氣和熱情的氣質。作為中國首都大氣和熱情的氣質。IBMIBM公司主公司主頁（）就采用了黑色和藍色為主色調，如圖頁（）就采用了黑色和藍色為主色調，如圖2 26 6所示。所示。選取背景色選取背景色 大多數的網站都會選取白色作為背景色。大多數的網站都會選取白色作為背景色。白色使得狹小的屏幕空間顯得很大，再白色使得狹小的屏幕空間顯得很大，再多的信息在白色的背景下，其排放也可多的信息在白色的背景下，其排放也可以顯得很整齊，其頁面也可以顯得非常以顯得很整齊，其頁面也可以顯得非常干凈和整潔。干凈和整潔。(2) (2) 導航條的

19、顏色導航條的顏色v 導航條是對網站欄目的一個索引，它導航條是對網站欄目的一個索引，它通常以一個水平長條的形式出現在網頁頭通常以一個水平長條的形式出現在網頁頭部的下邊。導航條作為頭部的一部分，經部的下邊。導航條作為頭部的一部分，經常采用主色調，另常采用主色調，另方面，導航條因為介方面，導航條因為介于網頁的頭部和內容部分的中間，所以也于網頁的頭部和內容部分的中間，所以也經常作為頭部和內容部分的過渡，這種情經常作為頭部和內容部分的過渡，這種情況下通常采用灰色系況下通常采用灰色系v(3) (3) 欄目索引條的顏色欄目索引條的顏色v 欄目索引條因為分布在網頁的各個部位，欄目索引條因為分布在網頁的各個部位

20、，所以經常采用主色調中不同深度的顏色來烘托所以經常采用主色調中不同深度的顏色來烘托整體的效果。整體的效果。v(4) (4) 文字的顏色文字的顏色v 文字在一個網頁上是無處不在的，但是文字在一個網頁上是無處不在的，但是文字的筆畫比較單薄，所以文字通常用來進一文字的筆畫比較單薄，所以文字通常用來進一步突出主色調，或者用來過渡和緩解頁面的顏步突出主色調，或者用來過渡和緩解頁面的顏色。文字的顏色主要根據文字的背景色進行搭色。文字的顏色主要根據文字的背景色進行搭配，它與背景色應有較大的反差，如白底黑字、配，它與背景色應有較大的反差，如白底黑字、藍底白字等，以便能清楚得顯示文字。其次文藍底白字等，以便能清

21、楚得顯示文字。其次文字的顏色搭配還得兼顧文字周圍物體的顏色。字的顏色搭配還得兼顧文字周圍物體的顏色。v(5) (5) 插圖的顏色插圖的顏色v 網頁的插圖通常尺寸都比較小，所以它的網頁的插圖通常尺寸都比較小，所以它的顏色可以絢麗、豐富一些，這樣一來可以使頁面顏色可以絢麗、豐富一些，這樣一來可以使頁面變得活潑，二來可以點綴整個頁面。但是在選擇變得活潑，二來可以點綴整個頁面。但是在選擇有背景的圖片時要特別小心，不要和網頁的背景有背景的圖片時要特別小心，不要和網頁的背景色及圖所插區(qū)域的背景色相沖突。解決這個問題色及圖所插區(qū)域的背景色相沖突。解決這個問題一般有兩種方法，一種是采用可透明的一般有兩種方法，

22、一種是采用可透明的GIFGIF圖，圖，另一種是將圖片的背景色做成和網頁背景色一樣另一種是將圖片的背景色做成和網頁背景色一樣的顏色。的顏色。2) 版面布局設計版面布局設計 報紙、雜志通常分為不同的版面，不同的版面報紙、雜志通常分為不同的版面，不同的版面需要不同的布局，比如報紙的頭版最為重要，它的需要不同的布局，比如報紙的頭版最為重要，它的布局通常都圍繞醒目的大標題展開以吸引人們對它布局通常都圍繞醒目的大標題展開以吸引人們對它的注意，而其他版面以內容為主，所以它們的布局的注意，而其他版面以內容為主，所以它們的布局相對簡單，通常都根據內容文字的多少而自然分割。相對簡單，通常都根據內容文字的多少而自然

23、分割。同報紙、雜志一樣，網站也分為很多不同的網頁，同報紙、雜志一樣，網站也分為很多不同的網頁，比如主頁、欄目首頁、內容網頁等，比如主頁、欄目首頁、內容網頁等，v 網站在版面布局上的一個特點，那就是從網站層次型結構的頂層主頁到最底層的內容網頁，版面布局不斷簡化。如果將這個特點反過來，便得到了網站在進行版面布局設計時應采用的原則，那就是首先首先對主頁進行版面布局，然后在主頁布局的對主頁進行版面布局，然后在主頁布局的基礎上對欄目首頁進行版面布局，接著往基礎上對欄目首頁進行版面布局，接著往下，最后對內容網頁進行版面布局。下，最后對內容網頁進行版面布局。v 第二步就是在網頁的不同區(qū)域上安第二步就是在網頁

24、的不同區(qū)域上安排不同的內容。不同的網頁內容自然是不排不同的內容。不同的網頁內容自然是不一樣的，所以在這里只是向大家介紹內容一樣的，所以在這里只是向大家介紹內容編排上的一個基本知識，那就是人們在瀏編排上的一個基本知識，那就是人們在瀏覽一個網頁的時候，覽一個網頁的時候，通常會把第一眼停留通常會把第一眼停留在網頁的左上角或中間的地方在網頁的左上角或中間的地方( (如圖如圖2-72-7所所示示) )，然后才會瀏覽其他部分。這個部分通，然后才會瀏覽其他部分。這個部分通常稱為焦點，所以在布局內容的時候，應常稱為焦點，所以在布局內容的時候，應該把最能傳達信息、最能吸引人的內容放該把最能傳達信息、最能吸引人的

25、內容放在這些地方，比如網站標志和最新新聞。在這些地方，比如網站標志和最新新聞。圖圖2-7網頁設計重點區(qū)域網頁設計重點區(qū)域 版面布局的基本方法版面布局的基本方法 熟悉網頁制作的人在拿到網頁的相關內容后，熟悉網頁制作的人在拿到網頁的相關內容后，也許很快就可以在腦子里形成大概的布局，并且可也許很快就可以在腦子里形成大概的布局，并且可以直接用網頁制作工具開始制作。但是對不熟悉網以直接用網頁制作工具開始制作。但是對不熟悉網頁布局的人來說，這么做有相當大的困難，所以這頁布局的人來說，這么做有相當大的困難，所以這時，就需要借助于其他的方法來進行網頁布局。時，就需要借助于其他的方法來進行網頁布局。v 第一種方

26、法是用手工的方式在紙上畫草第一種方法是用手工的方式在紙上畫草圖，這種方法可以大概地描繪出網頁的框架，圖，這種方法可以大概地描繪出網頁的框架，但是也只能到此為止，不能再進行更細的工作，但是也只能到此為止，不能再進行更細的工作，如配色、擺放文字和圖片等。如配色、擺放文字和圖片等。v 第二種方法是用專業(yè)制圖軟件來進行布第二種方法是用專業(yè)制圖軟件來進行布局，建議使用局，建議使用PhotoshopPhotoshop。PhotoshopPhotoshop是一個非是一個非常優(yōu)秀的圖片處理工具。用它可以像設計一幅常優(yōu)秀的圖片處理工具。用它可以像設計一幅圖片、一幅招貼畫、一幅廣告一樣去設計一個圖片、一幅招貼畫、

27、一幅廣告一樣去設計一個網頁的界面，然后再考慮如何用網頁制作工具網頁的界面，然后再考慮如何用網頁制作工具去實現這個網頁。去實現這個網頁。v7、網站的導航設計網站的導航設計 在訪問網站的時候也一樣，用戶期望在任何在訪問網站的時候也一樣，用戶期望在任何一個網頁上都能清楚地知道目前所處的位置，一個網頁上都能清楚地知道目前所處的位置，并且能快速地從這個網頁切換到另一網頁。并且能快速地從這個網頁切換到另一網頁。因此網站導航對于一個網站來說非常的必要因此網站導航對于一個網站來說非常的必要和重要，它是衡量一個網站是否優(yōu)秀的重要和重要，它是衡量一個網站是否優(yōu)秀的重要標準。標準。導航的設計策略導航的設計策略 雖然導航有很多不同的實現方法，但是并不是所有的雖然導航有很多不同的實現方法，但是并不是所有的網站都需要使用這些方法，這通常取決于網站的規(guī)模。下網站都需要使用這些方法，這通常取決于網站的規(guī)模。下面就是在設計網站導航時，可以采用的一些基本策略：面就是在設計網站導航時，可以采用的一些基本策略： (1) (1) 首先，至少要使用一個一層欄目的導航條，首先，至少要使用一個一層欄目的導航條，如如果欄目底下也有很多內容，可以分為很多子類的話，那么果欄目底下也有很多內容，可以分為很多子類的話，那么可以進一步設計欄目下的導航條?？梢赃M一步設計欄目