1.2 什么是網頁設計

現在人們使用網絡越來越頻繁，作為上網主要依托的網頁變得越來越重要，這使得網頁設計得到了快速發展。網頁講究的是排版布局，其目的就是給每一個瀏覽者提供一種布局更合理、功能更強大、使用更方便的瀏覽形式，使他們能夠愉快、輕松、快捷地了解網頁所提供的信息。

1.2.1 網頁設計概述

隨著時代的發展、科學的進步、需求的不斷提高，網頁設計已經在短短數年內躍升為一個新的藝術門類，而不再僅僅是一門技術。相比其他傳統的藝術設計門類，它更突出藝術與技術的結合、形式與內容的統一、交互與情感的訴求。

在這種時代背景下，人們對網頁設計產生了更深層次的審美需求。網頁不僅是把各種信息簡單地堆積起來，能看或能表達清楚意思就行，還要考慮通過各種設計手段與技術技巧，讓受眾能更多、更有效地接收網頁上的信息，從而對網站留下深刻的印象，進而催生消費行為，提升企業品牌形象。

隨著互聯網技術的進一步發展與普及，當今時代的網站更注重審美的要求和個性化的視覺表達，這就對網頁設計師這一職業提出了更高層次的要求。一般來說，平面設計中的審美觀點都可以套用到網頁設計中，還可以利用各種色彩的搭配營造出不同氛圍、不同形式的美。

但網頁設計也有自己的獨特性，在顏色的使用上，它有自己的標準色——“安全色”；在界面設計上，要充分考慮到瀏覽者使用的不同瀏覽器、不同分辨率等各種情況；在元素的使用上，可以充分利用多媒體的長處，選擇最恰當的音頻與視頻相結合的表達方式，給用戶以身臨其境的感覺和比較直觀的印象。說到底，這還只是一個比較抽象的概念，在網絡世界中，有許多設計精美的網頁值得設計者欣賞和借鑒，如圖1-3所示。

以上的網頁也僅僅是互聯網上優秀網頁作品海洋中的一朵小浪花而已，但從以上作品不難看出，一般來說，好的網頁應該給人有這樣的感覺：干凈整潔、條理清晰、專業水準、引人入勝。優秀的網頁設計作品是藝術與技術的高度統一，它應該包含視聽元素與版式設計兩項內容；以為用戶考慮、主題突出、整體性、形式與內容統一、及時更新和維護為設計原則；具有即時交互性、版式設計的不可控性、技術與藝術結合的緊密性、多媒體的綜合性、多維性五個特點。

1.2.2 網頁設計和網頁制作

很多人對網頁設計和網頁制作的概念和界限不是很清楚，那么網頁設計和網頁制作之間到底有什么區別和聯系呢？

首先來看如下的兩則招聘廣告。

甲網絡公司：精通HTML和CSS代碼，能夠手工編寫和修改源代碼，并且熟練使用Photoshop等圖形設計軟件，有網站維護工作經驗者優先。

乙網絡公司：美術設計專業畢業，五年以上相關專業工作經驗，精通現在流行的各種平面設計、動畫、網頁制作技術。

這是從眾多招聘信息中挑出的具有代表性的兩則招聘廣告，這兩個公司對網頁制作的定位不同：甲網絡公司重點要求應聘者能夠編寫代碼；乙網絡公司則更傾向于要求應聘者具有一定水準的美術功底。

這樣可以試著給網頁設計與網頁制作下定義：

網頁設計=網頁技術+網頁設計

網頁制作=網頁技術

由以上兩個公式可知，網頁設計師需要掌握的技能顯然更加全面，優秀的網頁設計師肯定是網頁技術高手和網頁設計高手的結合，也就是說應該做到“網頁設計”和“網頁技術”兩手抓，這樣的人制作出來的網頁才既具備眾多交互性能、動態效果，也具有形式上的美感。

另外，我們說網站“設計”而不說網站“制作”，因為設計是一個思考的過程，而制作只是將思考的結果表現出來。成功的網站首先需要優秀的設計，然后需要輔以優秀的制作。設計是網站的核心和靈魂，一個相同的設計可以有多種制作的方式。

許多網站現在已不再設立專門的網頁制作職位，不過對于那些想要進入Web開發行業但又欠缺經驗的人來說，從網頁制作職位做起是很好的選擇。

1.2.3 網頁設計的特點

與從前純文字和數字的網頁相比，現在的網頁無論是在內容上還是在形式上，都已經得到了極大的豐富，網頁設計主要具有以下特點。

1．即時交互性

網絡媒體不同于傳統媒體的地方就在于信息的動態更新和即時交互性。具有即時交互性是網絡媒體成為熱點媒體的主要原因，進行網頁設計時也必須考慮即時交互性的問題。傳統媒體都以線性方式提供信息，即按照信息提供者的感覺、體驗和事先確定的格式來傳播信息，而信息接收者只能被動地接收。而在網絡環境下，人們不再是一個傳統媒體方式的被動信息接收者，而是以一個主動參與者的身份加入信息的加工處理和發布之中。這種持續的交互使網頁藝術設計不像印刷品設計那樣，出版之后就意味著設計的結束，而是由網頁設計人員根據網站各個階段的經營目標，配合網站不同時期的經營策略及用戶的反饋信息，經常對網頁進行調整和修改。例如，為了保持瀏覽者對網站的新鮮感，很多大型網站總是定期或不定期地進行改版，這就需要設計者在保持網站視覺形象統一的基礎上，不斷創作出新的網頁作品。

2．版式設計的不可控性

網頁的版式設計與傳統印刷品的版式設計有著極大的差異：一是印刷品設計者可以指定使用的紙張和油墨，而網頁設計者卻不能要求瀏覽者使用什么樣的計算機或瀏覽器；二是網絡正處于不斷發展之中，不像印刷那樣已經基本具備了成熟的印刷標準；三是網頁設計過程中有關Web的每一件事都可能隨時發生變化。

這就說明網絡應用尚處于發展中，很難針對網絡應用的各個方面制定出統一的標準，這必然導致網頁版式設計的不可控性。其具體表現：一是網頁頁面會根據當前瀏覽器窗口大小自動格式化輸出；二是網頁的瀏覽者可以控制網頁頁面在瀏覽器中的顯示方式；三是在不同種類、不同版本的瀏覽器中觀察同一個網頁時效果會有所不同；四是瀏覽者的瀏覽器工作環境不同，顯示效果也會有所不同。

把這些問題歸結為一點，即網頁設計者無法控制頁面在用戶端的最終顯示效果，這正是網頁版式設計的不可控性。

3．技術與藝術結合的緊密性

設計受主觀因素和客觀因素的共同作用，是在自由和不自由之間進行的，設計者不能超越自身已有的經驗和所處環境提供的客觀條件來進行設計。優秀的設計者正是在掌握客觀規律的基礎上，進行自由想象和創造。網絡技術主要表現為客觀因素，藝術創意主要表現為主觀因素，網頁設計者應該積極主動地掌握現有的各種網絡技術規律，注重技術和藝術的緊密結合，這樣才能發揮技術之長，實現藝術想象，滿足瀏覽者對網頁的高質量需求。

例如，瀏覽者欣賞一段音樂或一部電影，以前必須先將這段音樂或這部電影下載到自己的計算機上，然后再使用相應的程序來播放，由于音頻或視頻文件都比較大，需要較長的下載時間。但當媒體技術出現以后，網頁設計者充分、巧妙地應用此技術，讓瀏覽者在下載過程中就可以欣賞這段音樂或這部電影，實現了在線欣賞音樂服務和實時視頻播放服務，這無疑大大增強了頁面傳播信息的表現力和感染力。

4．多媒體的綜合性

目前網頁中使用的多媒體視聽元素主要有文字、圖像、動畫、音頻、視頻等。但網絡帶寬的增加、芯片處理速度的提高及跨平臺的多媒體文件格式的推廣，必將促使設計者綜合運用多媒體元素來設計網頁，以滿足瀏覽者對網頁的更高要求。目前，國內網頁已出現了模擬三維的操作界面，在數據壓縮技術和流媒體技術的推動下，互聯網上出現了實時音頻和視頻服務，如在線音樂、在線廣播、在線電影等。因此，多媒體的綜合運用已經成為網頁藝術設計的特點之一，也是網頁設計未來的發展方向之一。

5．多維性

多維性源于超鏈接，它主要體現在網頁設計中導航的設計上。由于超鏈接的出現，網頁的組織結構變得更加豐富，瀏覽者可以在各種主題之間自由跳轉，從而打破了以前人們接收信息的線性方式。例如，可以將頁面的組織結構分為序列結構、層次結構、網狀結構、復合結構等。但頁面之間的關系過于復雜，不僅增加了瀏覽者檢索和查找信息的難度，也給設計者帶來更大的挑戰。為了讓瀏覽者能在網頁上迅速找到所需的信息，設計者必須考慮設計快捷而完善的導航和超鏈接，如圖1-4所示。

在印刷品中，導航的問題不是很突出。例如，如果一個句子在頁尾還沒有結束，讀者會很自然地翻到下一頁查找剩余部分，而且印刷品還提供了目錄、索引和腳注等幫助讀者查閱。

然而，網頁設計者所要做的網頁導航工作就沒有那么簡單了。要在網頁中提供足夠的、不同角度的導航鏈接，以幫助瀏覽者在網頁的各個部分之間任意跳轉，并告知瀏覽者現在所在的位置、當前頁面與其他頁面之間的關系等。

每個網頁中都有一個返回主頁的按鈕或鏈接，如果頁面是按層次結構組織的，通常還有一個返回上級頁面的鏈接。網頁設計者面對的不是按順序排列的印刷品頁面，而是自由分散的網頁，因此，必須考慮更多的問題。例如，怎樣構建合理的頁面組織結構，將大量信息有條理地呈現給瀏覽者；怎樣建立包括站點索引、幫助頁面、查詢功能在內的導航系統。鏈接關系的處理對于信息類門戶網站來說尤為重要。國內某門戶網站對鏈接關系的處理，如圖1-5所示。

1.2.4 網頁設計的相關術語

在打開網頁時，瀏覽者可能有過這樣的經歷：在相同的條件下，有些網頁打開的速度非?？欤行┚W頁打開的速度卻非常慢。這就說明網頁設計不僅需要依賴設計者的審美觀，還要依賴網絡技術。因此，一個很簡單的網站不僅是設計者審美觀、閱歷的體現，還是設計者知識面、技術等綜合素質的展示。

下面介紹一些與網頁設計有關的術語，只有了解了網頁設計的相關術語，才能制作出具有藝術性和技術性的網頁。

1．互聯網

互聯網，英文為Internet，整個互聯網是由遍布全世界的計算機組成的，當一臺計算機在連接上網絡的一瞬間，就已經是互聯網的一部分了。網絡是沒有國界的，人們可以通過互聯網隨時傳遞文件信息到世界上任何互聯網能接觸的地方，當然也可以接收來自世界各地的實時信息。

搜索是在互聯網上查找信息最好的辦法，如可以使用百度搜索引擎。它提供了強大的搜索能力，讀者只需要在如圖1-6所示的文本框中輸入幾個想要查找的內容的關鍵字，就可以找到成千上萬與之相關的信息。

2．瀏覽器

瀏覽器是安裝在計算機中用來查看互聯網中網頁的一種工具，每一個互聯網的用戶都要在計算機中安裝瀏覽器才能“閱讀”網頁中的信息，這是使用互聯網的最基本的條件。目前大多數用戶所用的Windows操作系統中已經內置了瀏覽器。

目前人們常用的瀏覽器主要分為5種，如圖1-7所示。以下是5款瀏覽器的簡單介紹。

（1）Microsoft Internet Explorer瀏覽器，簡稱IE瀏覽器，由微軟公司開發，使用了Trident作為瀏覽器內核。

（2）Google Chrome瀏覽器，由Google公司開發，之前使用的是Webkit內核，現在使用的是Blink內核。

（3）Firefox瀏覽器，由Mozilla公司開發，簡稱Fx，是一個自由及開放源代碼的網頁瀏覽器，使用了Gecko作為瀏覽器內核。

（4）Safari瀏覽器，是蘋果系統中很優秀的瀏覽器，使用了Webkit作為瀏覽器內核。

（5）Opera瀏覽器，是挪威Opera Software ASA公司制作的支持多頁面標簽式的瀏覽器，現使用Blink作為瀏覽器內核。

雖然這5款瀏覽器的開發公司不同，但使用界面大致相同。這5款瀏覽器占有了網絡瀏覽器市場的絕大部分份額。還有一些其他公司的瀏覽器，因為其占有的市場份額相對太小，本書不做介紹。

需要注意的是，盡管這5款瀏覽器的使用界面大致相同，但是瀏覽使用了特效的同一個網頁時，顯示的效果也可能不同，即便是同一款瀏覽器的不同版本也有這樣的狀況。因此，在網頁設計制作過程中應該考慮到瀏覽對象的不同而選擇不同的設計制作方式。

例如，如果網站主要面向的是國內用戶，而國內用戶大多使用UC瀏覽器或者360瀏覽器，設計師就可以選擇目標瀏覽器是IE，同時要兼顧還在使用低版本瀏覽器的用戶；如果主要面向的是海外用戶，而海外用戶大多習慣使用Google Chrome瀏覽器，設計師就可以選擇適配Chrome的瀏覽器特性。

3．網頁

網頁，英文名為Web Page。隨著科學技術的飛速發展，互聯網在人們的工作和生活中發揮的作用越來越大。當人們接入互聯網后，首先打開瀏覽器窗口，其次在地址欄中輸入網址，就可以打開一張網頁。

在現實世界里，人們可以看到的是多彩的世界；而在網絡世界里，人們可以看到的就是一張張漂亮的網頁，它可以帶瀏覽者“周游世界”?；ヂ摼W最重要的功能之一就是“資源共享”，由此可見，網頁作為展現互聯網豐富資源的基礎是非常重要的。

網頁一般是由許多元素構成的。最基本的元素就是文字，文字是人類最基礎的表達方式，因此不可缺少。但是網頁中不可能只有文字，這樣就太枯燥了，因此還要增加一些圖像、動畫、影片等元素來豐富網頁內容，給人們以生動、直接的感覺。網易首頁如圖1-8所示。

4．網站

網站，英文名為Web Site。簡單來說，網站就是多個網頁的集合，其中包括一個首頁和若干個分頁。那什么是首頁呢？非常好理解，首頁即瀏覽者訪問某個網站時第一個打開的網頁，除首頁之外的其他網頁就是分頁。中國鐵路12306的主頁如圖1-9所示。

網站是多個網頁的集合，但不是簡單的集合，這要根據網站的內容來決定，如由多少個網頁構成、如何分類等。

5．HTML

HTML是Hypertext Markup Language的縮寫，中文為“超文本標記語言”。它是制作網頁的一種標準語言，以代碼的方式來進行網頁的設計，如圖1-10所示。用HTML設計網頁和用Dreamweaver設計網頁相比，設計過程截然不同，但本質和結果卻是基本相同的。所以，學習好HTML，對于讀者從根本上了解網頁設計和使用Dreamweaver十分有益。

6．URL

URL是Universal Resource Locater的縮寫，中文為“統一資源定位器”。它表示網頁在互聯網中的地址，如果要訪問某個網站，需要URL才能夠找到該網頁的地址。例如，360搜索的URL是www.so.com，也就是它的網址，如圖1-11所示。

7．HTTP

HTTP是Hypertext Transfer Protocol的縮寫，中文為“超文本傳送協議”。它是一種最常用的網絡通信協議，若想鏈接到某個特定的網頁，就必須通過HTTP，無論你是用哪一種網頁編輯軟件在網頁中加入什么資料，還是使用哪一種瀏覽器，通過HTTP都可以看到正確的網頁效果。

8．TCP/IP

TCP/IP是Transmission Control Protocol/Internet Protocol的縮寫，中文為“傳輸控制協議/互聯網協議”。它是互聯網采用的標準協議，因此只要遵循TCP/IP，不管計算機是什么系統或平臺，均可以在互聯網的世界中暢行無阻?？梢栽凇氨镜剡B接 屬性”對話框中進行設置，如圖1-12所示，勾選“Internet協議版本4（TCP/IPv4）”和“Internet協議版本6（TCP/IPv6）”復選框即可。

9．FTP

FTP是File Transfer Protocol的縮寫，中文為“文件傳輸協議”。與HTTP相同，它也是URL使用的一種協議名稱，以指定傳輸某一種互聯網資源。HTTP用于鏈接到某個網頁，而FTP則用于上傳或下載文件。

10.IP地址

IP地址是分配給網絡中的計算機的一組由32位二進制數值組成的編號，用來對網絡中的計算機進行標識。

為了便于人們記憶，IP地址采用了點分十進制表示，每個數值小于或等于225，數值中間用“．”隔開，一個IP地址對應一臺計算機并且是唯一的。

需要注意的是，所謂的唯一是指在某個時間段內唯一。如果使用動態IP，那么每一次分配的IP地址是不同的，在使用網絡的這一時段內，這個IP地址是唯一指向正在使用的計算機的。而靜態IP是指將這個IP地址固定分配給某計算機使用。網絡中的服務器使用的就是靜態IP。

11．域名

IP地址是一組數字，不方便人們記憶，因此人們給每個計算機賦予了一個具有代表性的名字，即主機名，主機名由英文字母或數字組成，將主機名和IP對應起來，就是域名，方便了大家記憶。

域名和IP地址是可以交替使用的，但一般情況下域名要轉換成IP地址才能找到相應的主機，這就是上網時經常用到的DNS域名解析服務。

12．靜態網頁

靜態網頁是相對于動態網頁而言的，并不是說網頁中的元素都是靜止不動的。靜態網頁是指瀏覽器與服務器端不發生交互的網頁，網頁中的GIF動畫及按鈕等都會發生變化。

靜態網頁的執行過程大致如下。

（1）瀏覽器向網絡中的服務器發出指向某個靜態網頁的請求。

（2）服務器接收到請求后將其傳輸給瀏覽器，此時傳送的只是文本文件。

（3）瀏覽器接收到服務器傳來的文件后解析HTML標簽，將結果顯示出來。

13．動態網頁

動態網頁除了包括靜態網頁中的元素，還包括一些應用程序，這些程序需要瀏覽器與服務器之間發生交互行為，而且應用程序的執行需要依靠服務器中的應用程序服務器才能完成。

14．虛擬主機

虛擬主機（Virtual Host/Virtual Server）是使用特殊的軟件和硬件技術，把一臺計算機主機分成多臺“虛擬”的主機，每一臺虛擬主機都具有獨立的域名和IP地址（或共享的IP地址），有完整的互聯網服務器（WWW、FTP、Email等）功能。在同一臺硬件、同一個操作系統上，運行著為多個用戶打開的不同網頁的服務器程序，互不干擾；而各個用戶擁有自己的一部分系統資源（IP地址、文件存儲空間、內存、CPU時間等）。虛擬主機之間完全獨立，并可由用戶自行管理，在外界看來，每一臺虛擬主機和一臺獨立的主機的表現完全一樣。

虛擬主機屬于企業在網絡營銷中比較簡單的應用，適合初級建站的小型企事業單位使用。通過虛擬主機可以進行企業宣傳、發布比較簡單的產品和經營信息等。

15．租賃服務器

用戶可以通過租賃ICP的網絡服務器來建立自己的網站。

使用這種建站方式，用戶無須購置服務器，只需租用它們的線路、端口、機器設備和所提供的信息發布平臺就能夠發布企業信息，開展電子商務。它能幫助用戶減輕初期投資的壓力，減少長期對硬件進行維護所帶來的人員及機房設備投入，使用戶不必承擔硬件升級負擔就可以建立一個功能齊全的網站。

16．主機托管

主機托管是企業將自己的服務器放在ICP的專用托管服務器機房，利用它們的線路、端口、機房設備為信息平臺建立自己的宣傳基地和窗口。

使用獨立主機是企業開展電子商務的基礎。虛擬主機會被共享環境下的操作系統資源限制，因此，當用戶的站點需要滿足日益發展的要求時，虛擬主機將不再能滿足用戶的需要，這時候用戶需要選擇使用獨立的主機。