1.1 網頁制作的基礎知識

隨著計算機技術的日益普及，瀏覽網頁、搜索信息成為我們工作、學習和生活中不可缺少的一部分。對于現今的網頁，簡單的文字與圖像組合已不再能滿足人們的需要，而是那些添加了各種設計元素，變得更加豐富多彩的網頁受到人們的青睞。

1.1.1 網站與網頁

網站是由網頁構成的一個具有相關聯系的頁面集合。一個網站少則由幾個網頁，多則由成百上千個網頁組成。

當訪問者在地址欄中輸入網址后，按【Enter】鍵就可以直接進入網站的首頁了。首頁是一個網站的門面，也是訪問量最大的一個頁面。因此，網站首頁的設計和制作就非常重要了，一定要把握好網站首頁的設計，使訪問者一看到首頁就能清楚地了解該網站想傳遞的信息。

如圖1.1所示是一個電影網站的首頁。

網站（Web Site）是多個網頁的集合，網頁（Web Page）是網站的重要組成部分，所有的信息都通過網頁這個載體傳遞給瀏覽者。如圖1.2所示的是一個典型的網頁。

1.1.2 網頁類型

從網頁是否執行程序來分，網頁可分為靜態網頁和動態網頁兩種類型。

1. 靜態網頁

所謂靜態網頁，就是網頁里面沒有程序代碼。運行于客戶端的程序、網頁、插件和組件等都屬于靜態網頁，在網絡中看到的靜態網頁通常是以htm或html為后綴名的，俗稱HTML文件。在瀏覽擴展名為htm的網頁時，網站服務器不會執行任何程序就直接把文件傳遞給客戶端的瀏覽器直接進行編譯工作，除非網站管理人員更新過網頁的內容，否則網頁是不會因為執行程序而出現不同的內容的。如圖1.3所示的就是以html為后綴名的靜態網頁。

2. 動態網頁

所謂動態網頁，就是網頁內含有后臺程序代碼。運行于服務器端的程序、網頁和組件等都屬于動態網頁，它們會隨客戶、時間及需求的不同，返回不同的網頁。通常以擴展名asp或aspx存儲，表示該網頁是Active Server Pages（ASP）動態網頁。在瀏覽這種網頁時，必須由服務器端先執行程序，再將執行完的結果下載給客戶端的瀏覽器。除有以asp作為后綴名的網頁外，還有以php或jsp作為后綴名的網頁。如圖1.4所示的是以asp為后綴名的動態網頁。

如何決定是使用靜態網頁還是動態網頁呢？這要根據網站的內容來決定，如果網站做好之后不需要做什么修改，就可以采用靜態網頁。靜態網頁的制作價格及網頁打開的速度更優。如果網站經常需要修改，那就做數據庫的動態網頁，方便管理，隨時可以進行后臺修改。

1.1.3 網頁的組成元素

構成網頁的基本元素包括文本、圖像、動畫、表格、表單、音頻及視頻等。下面分別介紹網頁的各構成元素。

1. 文本

因為網頁中的信息以文本為主，所以文本是網頁中運用最廣泛的元素之一。從某種意義上來說，文本是網頁存在的基礎。在網頁中，網頁的設計與制作者可以通過設置字體、字號、顏色和底紋等屬性來改變文本的視覺效果。如圖1.5所示的是以文本為主體的網頁。

2. 圖像

在網頁制作過程中適當地使用圖像，可以豐富網頁中的內容。雖然網頁中的圖像格式有很多種，但較適合國內傳輸網絡的圖像格式就只有JPEG和GIF這兩種。由于受網絡速度的限制，因此網頁中的很多圖像都被分割成多個部分，然后再利用排版技術，將分割的圖像拼合在一起，以提高圖像在瀏覽器中的顯示速度。如圖1.6所示的是以圖像為主的網頁。

在網頁中的圖像文件格式有很多種，如GIF，JPEG，BMP，TIFF和PNG等，其中應用最為廣泛的主要是GIF和JPEG這兩種格式。

GIF：為Graphics Interchange Format的首字母縮寫，被稱為圖像交換格式，采用LZW無損壓縮算法。

JPEG：為Joint Photographic Experts Group的首字母縮寫，是由聯合圖像專家組開發的圖形標準，采用有損的壓縮算法。

GIF圖像文件不僅支持透明的背景色和動畫格式，還支持256種顏色。由于GIF特定的存儲方式，故而它可以支持有大面積單色區域的圖像。通常網站中的LOGO、按鈕圖片和文字圖片都使用這種格式，例如，某筆記本電腦網站的LOGO使用的就是GIF圖像，如圖1.7所示。

JPEG圖像文件不支持透明的背景色和動畫格式，它只支持24位真彩色。JPEG用于表現色彩豐富、形狀復雜的圖像。如圖1.8所示的網站使用的就是JPEG格式圖像。

3. 動畫

網頁動畫主要分為Flash動畫和GIF動畫。目前在網頁制作過程中，Flash動畫運用得最廣泛，而GIF動畫則主要用于站標、廣告條等組件的動畫制作。如圖1.9所示是一個主要使用Flash制作的網頁。

在網頁中，使用的動畫格式主要包括Flash和GIF這兩種。

由于使用Flash制作出的動畫質量較好，因此許多網頁中的大型、復雜的動畫幾乎都用Flash來制作。不過，Flash動畫在瀏覽器中播放時需要安裝插件Macromedia Flash Player等，否則就不能播放。右擊屏幕上的Flash動畫，就會顯示有關插件的信息。

圖1.10就是右擊某網頁中的Flash動畫后顯示的相關信息。

GIF動畫在瀏覽器中播放時不需要插件。GIF動畫通常用于制作簡單的、只有幾幀圖片的交替動畫。例如，網頁中作為友情鏈接使用的LOGO通常都使用GIF動畫，如圖1.11所示。

4. 超鏈接

超鏈接是網頁中最常用的一種元素。所謂超鏈接是指從一個網頁指向一個目標的鏈接關系。這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一幅圖片、一個電子郵件地址、一個文件，甚至是一個應用程序。它表明了網頁文件之間的相互鏈接關系，使用超鏈接管理器可以清楚地看到各文件之間的鏈接關系，并且可以用來檢查站點中網頁鏈接是否正確。

超鏈接在本質上屬于一個網頁的一部分，它是一種允許同其他網頁或站點之間進行鏈接的元素。一個網站由若干個單獨的網頁文件組成，這些單獨的網頁由超鏈接結合起來，形成一個緊密聯系的整體。

按照使用對象的不同，網頁中的超鏈接可以分為文本超鏈接和圖像超鏈接，這是兩種最常用的超鏈接。除此之外，還有電子郵件超鏈接、錨點鏈接、多媒體文件超鏈接和空超鏈接等。

在網頁中，一般文本超鏈接下都有一條下畫線，當鼠標指針移動到該超鏈接上時，鼠標指針就會變成一只小手的形狀，如圖1.12所示。

超鏈接也可以定義在圖像上，甚至在圖像的局部位置上，如圖1.13所示為圖像超鏈接。

5. 表格

對網頁進行排版主要是用表格來完成的，通過表格可以精確地控制各網頁元素在網頁中的位置。這里所說的表格并不是直觀意義上的表格，它所指的范圍更廣泛。一般表格的邊框不在網頁中顯示，如圖1.14所示。

6. 表單

表單是網頁中實現交互的元素。網頁中的表單通常用來接收瀏覽者在瀏覽器端的輸入，然后將這些信息發送到設計者設置的目標端。這個目標既可以是文本文件、網頁、電子郵件，也可以是服務器端的應用程序。

表單主要應用于以下幾個方面：

收集聯系信息。

接收用戶要求。

收集訂單、出貨明細表和收費清單。

獲得反饋意見。

設置來賓簽名簿。

讓瀏覽者輸入關鍵字，以便在站點中搜索相關的網頁。

讓瀏覽者注冊為會員，并以會員身份登錄站點。

表單由具有不同功能的表單對象組成。最簡單的表單也要包含一個輸入區域和一個提交按鈕。瀏覽者填寫表單的方式通常是輸入文本、選中單選按鈕與復選框，以及從下拉列表中選擇選項等。

根據表單功能與處理方式的不同，通常可以將表單分為用戶反饋表單、留言簿表單、搜索表單和用戶注冊表單等類型。如圖1.15所示為一個最常見的用戶注冊表單。

7. 音頻

在網頁中插入背景聲音，可以提高網頁內容對訪問者的吸引力。網站設計者在添加網頁背景音樂的同時，也應該為訪問者提供一種關閉它的方法。如果總是不斷地重復播放背景音樂，則會使訪問者感到厭煩，從而選擇離開這個網站。

下面就是一個插入音頻的網頁，如圖1.16所示。有些網站提供了關閉背景音樂的按鈕，這樣不喜歡聽背景音樂的訪問者就可以直接單擊該關閉按鈕。

從目前來看，網絡上使用范圍最廣的音頻格式主要有MP3、MIDI和WAV等。如表1.1所示，列出了這些音頻格式的特點。

網絡中的音頻是非常常見的，尤其是在音樂網站中。

8. 視頻

視頻和音頻都是由與文件類型相適應的插件來進行播放的。視頻的直觀性可以給訪問者帶來很大的視覺沖擊。如圖1.17所示的是一個插入了視頻文件的網站。

隨著網絡帶寬的增加，網頁制作中應用的視頻和音頻文件也越來越多。如表1.2所示列出了網頁中常見的視頻文件格式及其特點。

1.1.4 了解網絡基本術語

在制作網頁中，經常會遇到一些網絡術語，如表1.3所示，列出了常見的網絡術語及其含義。