1、第第1章章 網頁設計概述網頁設計概述學習目標：學習目標：通過本章學習，掌握網頁設計相關的基礎知識和基本概念，熟悉網頁的組成元素，了解網頁設計可能用到的開發軟件和常用技術，對網站的設計流程和網頁制作原則有初步的了解和認識。1.1網頁中的基本概念網頁中的基本概念1萬維網萬維網(WWW)萬維網(World Wide Web，WWW)是Internet的多媒體信息查詢工具，由三部分組成：客戶機、服務器和HTTP，它是促使Internet迅速發展和普及的重要技術。用戶只要在WWW瀏覽器中的Web頁面上輕松點擊鏈接，就可以轉到相應的信息服務資源中去。多媒體的Web界面帶來生動活潑的效果，簡單和直觀的操作手

2、段給用戶提供了很大的便利。2網頁和網站網頁和網站網頁是構成網站的基本元素，是承載各種網站應用的平臺。通俗地講，網站就是由網頁組成的。網頁可由文字、圖像、動畫、聲音和程序等多種媒體信息鏈接組成，通過鏈接實現與其他網頁或網站的關聯和跳轉。3瀏覽器瀏覽器瀏覽器是指可以顯示網頁服務器或者文件系統的HTML文件內容，并讓用戶與這些文件交互的一種軟件。網頁瀏覽器主要通過HTTP協議與網頁服務器交互并獲取網頁，這些網頁由URL指定，文件格式通常為HTML。一個網頁中可以包括多個文檔，每個文檔都是分別從服務器獲取的。4URLURL(Uniform Resource Locator，統一資源定位符)也被稱為網頁

3、地址，是因特網上標準資源的地址，是用于完整地描述Internet上網頁和其他資源的地址的一種標識方法。在Internet上所有資源都有一個獨一無二的URL地址，這種地址可以是本地磁盤，也可以是局域網上的某一臺計算機，更多的是Internet上的站點。簡單地說，URL就是Web地址，俗稱“網址”。例如http:/www. C。5Internet協議協議協議(Protocol)是關于信息格式及信息交換規則的描述。在信息技術中，協議就是些特殊規則的集合，它被通信的接收方和發送方認可，接收到的信息和發送的信息均以這種規則加以解釋。在網絡的各層中存在著許多協議。接收方與發送方同層的協議必須一致，否則一方

4、將無法識別另一方發出的信息，以這種規則規定雙方完成信息在計算機之間的傳送過程。6IP地址地址IP地址是網上的通信地址，是計算機、服務器和路由器的端口地址，每個IP地址在全球都是惟一的，是遠行TCP/IP的惟一標識。每臺Internet上的計算機由一個獨有的IP地址來惟一標識。目前Internet使用的是IPv4版本，IP地址是一個由32位的二進制數組成的號碼，該號碼分為4段，每段8位，每段取值范圍為0255。例如0。7HTTPInternet的基本協議是TCP/ IP協議，然而在TCP/ IP摸型最上層的是應用層 (Application layer)，它包含所有高層的協議

5、。高層協議有文件傳輸協議FTP、電子郵件傳輸協議SMTP、域名系統服務DNS、網絡新聞傳輸協議NNTP和HTTP協議等。8HTMLHTML是Hypertext Markup Language(超文本標記語言)的縮寫，它是構成Web頁面的主要工具，是用來表示網絡上信息的符號標志語言。在萬維網上，如果要向全球范圍出版和發布信息，需要有一種能夠被廣泛理解的語言，即所有的計算機都能夠理解的一種用于出版的“母語”。9靜態網頁與動態網頁靜態網頁與動態網頁在網站設計中，純粹HTML格式的網頁通常被稱為靜態網頁，靜態網頁每個網頁都有一個固定的URL，且網頁URL以.htm、.html、.shtml等常見形式為

6、后綴，而不含有“？”。靜態網頁一經編寫完成，其顯示效果就確定了。在HTML格式的網頁上，也可以出現各種動態的效果，但這些“動態效果”只是視覺上的，與動態網頁是不同的概念。1.2頁面組成元素頁面組成元素現在的網頁已經不再是簡單的文字和圖像組合，而是添加了各種設計元素，這使網頁變得更加豐富多彩。組成網頁的最基本元素通常包括網站LOGO、BANNER、導航欄、文本和圖像、動畫、超級鏈接、表單和多媒體等。1LOGO網站LOGO，也叫網站標志。它是一個站點的象征，一般放在網站首頁的左上角或顯眼位置，訪問者能明顯地看到它。成功的網站標志有著獨特的形象標識，在網站的推廣和宣傳中起到事半功倍的效果。如新浪用字

7、母sina和大眼睛作為標志。2BANNERBANNER一般翻譯為網幅廣告、旗幟廣告和橫幅廣告等。BANNER通常為一幅表現商家廣告內容的圖片，放置在廣告商的頁面上，是互聯網廣告中最基本的廣告形式。橫幅廣告的標準尺寸是468*60像素，而彈出窗口廣告一般為360*300像素。BANNER可以是使用GIF格式的圖像文件，可以使用靜態圖形，也可用多幀圖像拼接為動畫圖像。BANNER的設計原則包括具有鮮明的色彩、語言具有號召力、文字的字體清晰和圖形位置合適這4個方面。如圖1.6所示為一個靜態圖形格式的BANNER。 圖圖1.6 網站的網站的BANNER3導航欄導航欄導航欄是用戶在規劃好站點結構、開始設

8、計主頁時必須考慮的一項內容。導航欄的作用就是讓瀏覽者在瀏覽站點時，不會因為迷路而中止對站點的訪問。事實上，導航欄就是一組超鏈接，這組超鏈接的目標就是本站點的主頁以及其他重要頁面。4文本和圖像文本和圖像文本一直是人類最重要的信息載體和交流工具，網頁中的信息也以文本為主。在網頁中，雖然文字不像圖像那樣能夠很快地引起瀏覽者的注意，但卻能夠準確地表達信息的內容和含義。網頁設計與制作者還可以通過設置字體、字號、顏色、底紋和邊框等屬性來改變文本的視覺效果，通過不同格式的區別，突出顯示重要的內容。5動畫動畫動畫是構成網頁的重要元素之一，目前，最常用的網頁動畫軟件是Flash、ImageReady和Gif A

9、nimation等，使用較多的動畫格式通常有GIF動畫和SWF動畫。動畫能提供信息、展示作品、裝飾網頁、動態交互等，用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以制作出高品質的網頁動態效果，甚至有的網站中的所有網頁也全部都是用Flash完成。6超鏈接超鏈接在網上用鼠標點擊一段文字或一幅圖片，就會有一個新的頁面被打開，這就是超鏈接技術。超鏈接技術是WWW流行起來的原因。鏈接源可以是帶下劃線的文本，也可以是圖像或圖像切片，甚至可以是一些不可見的程序代碼。當鏈接源被鼠標單擊激活后，其鏈接目的端將會顯示在Web瀏覽器上，并根據目的端的類型不同選擇以不同的方式打開。7表單表單表單通常用于填寫

10、申請或提交信息的交互頁面，如電子郵箱、主頁空間、QQ密碼等申請頁面以及論壇、留言簿等都是通過表單來實現交互的。通常表單的用途是：收集聯系信息、接收用戶要求、獲得反饋意見、設置訪問者簽名、讓瀏覽者輸入關鍵字去搜索相關網頁、讓瀏覽者注冊會員或以會員身份登錄等。8聲音和視頻聲音和視頻聲音是多媒體網頁的一個重要組成部分。從目前來看，網絡上使用范圍最廣的音頻格式主要有MP3、MIDI和WAV等。設計者在采用音頻前需要考慮其用途、格式、文件大小、聲音品質和瀏覽器兼容差別等因素。1.3網站規劃與網頁設計網站規劃與網頁設計我們所見到的網站，雖然在規模、內容和功能上各不相同，但網站設計制作的基本流程是相似的。從

11、簡單的個人網站到復雜的門戶型網站，都遵循著一個基本的制作流程。同時，網站的定位、策劃、創意和風格，網站的版面布局，網頁的色彩應用及網頁的藝術原則等都直接關系到網站的生存和效果評估。1.3.1網站的策劃網站的策劃網站的前期策劃是一個網站成功與否的關鍵，也是進行網站建設和網頁制作整個流程中的第一步。策劃的目的是為了完成需求分析，確定網站的主題、目標、規模、風格和類型等。 網站的主題就是將要創建的網站的主要內容，也就是網站的題材。一個網站必須有一個明確的主題。 網站按照其功能和結構形式大體上可以分為4類，即門戶網站、職能網站、專業網站和個人網站。 1.3.2網頁版面布局設計網頁版面布局設計網頁制作本

12、質上就是排版，是以瀏覽器作為閱讀平臺的電子出版物的圖文排版。網頁設計表面上看是一種全新的視覺表現形式，但仔細想想，網頁設計與日常所見的傳統報刊排版并沒有太多不同，只不過在單一靜止的圖文編輯基礎上添加了新的交互元素和多媒體元素，它們的基本原理是相通的。網頁版面布局是個性思維的展示，因此沒有固定的網頁版式模式，設計者可以根據自己的喜好隨心所欲地設計。 1設計步驟 (1)草案 (2)效果圖 (3)定稿2布局設計原則(1)正常平衡 (2)異常平衡 (3)對比 (4)凝視 (5)空白 3常見布局類型(1)“工型” (2)拐角型 (3)對稱型 1.4網頁的色彩搭配及應用網頁的色彩搭配及應用在網頁設計中，色

13、彩搭配是體現網頁風格的重要元素之一。一個網站設計的成功與否，很大程度上取決于網頁色彩的搭配。色彩搭配是一項藝術性很強的工作，因此在設計網頁時除了考慮網站本身的特點外，還要遵循一定的藝術規律，這樣才能設計出色彩鮮明、性格獨特的網站。1.4.1網頁色彩搭配的原理網頁色彩搭配的原理網頁的色彩是樹立網站形象的關鍵之，網頁的背景、文字、圖標、邊框和鏈接等應該采用什么樣的色彩，應該搭配什么色彩才能最好地表達網站的內涵和主題呢?下面將介紹網頁色彩搭配的一些原理。 1色彩的鮮明性 2色彩的獨特性 3色彩的藝術性 4色彩搭配的合理性1.4.2網頁色彩搭配的技巧網頁色彩搭配的技巧網頁配色很重要，網頁顏色搭配得好壞

14、與否會直接影響到訪問者的情緒。好的色彩搭配會給訪問者帶來很強的視覺沖擊力，不好的色彩搭配則會讓訪問者產生抵觸情緒。下面就來講述網頁色彩搭配的一些技巧。 1使用單色 2使用鄰近色 3使用對比色 4黑色的使用 5背景色的使用 6色彩的數量1.4.3網頁色彩選擇標準網頁色彩選擇標準選擇網頁色彩，在遵從藝術規律的同時，還應考慮人的生理特點。色彩搭配一定要合理，給人一種和諧、愉快的感覺，避免采用容易造成視覺疲勞的純度很高的單一色彩。在選擇網站顏色時，應遵循以下標準。1了解網站所要傳達的信息和品牌2了解網站的訪問群體3不要使用過多的顏色4在文字的部分使用對比色5選擇顏色要注意時效性6選擇色盤時應考慮功能性的顏色7注意網站色差問題1.4.4常見的幾種配色方案常見的幾種配色方案1紅色2黃色3藍色4白色5紫色6綠色7灰色8黑色1.5網頁的設計原則網頁的設計原則 盡管網頁設計和網站的開發有多種多樣的方式和技巧，但要完成一個完美的、既讓