1.1 網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)

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

1.1.1 網(wǎng)站與網(wǎng)頁(yè)

網(wǎng)站是由網(wǎng)頁(yè)構(gòu)成的一個(gè)具有相關(guān)聯(lián)系的頁(yè)面集合。一個(gè)網(wǎng)站少則由幾個(gè)網(wǎng)頁(yè)，多則由成百上千個(gè)網(wǎng)頁(yè)組成。

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

如圖1.1所示是一個(gè)電影網(wǎng)站的首頁(yè)。

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

1.1.2 網(wǎng)頁(yè)類型

從網(wǎng)頁(yè)是否執(zhí)行程序來(lái)分，網(wǎng)頁(yè)可分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)兩種類型。

1. 靜態(tài)網(wǎng)頁(yè)

所謂靜態(tài)網(wǎng)頁(yè)，就是網(wǎng)頁(yè)里面沒(méi)有程序代碼。運(yùn)行于客戶端的程序、網(wǎng)頁(yè)、插件和組件等都屬于靜態(tài)網(wǎng)頁(yè)，在網(wǎng)絡(luò)中看到的靜態(tài)網(wǎng)頁(yè)通常是以htm或html為后綴名的，俗稱HTML文件。在瀏覽擴(kuò)展名為htm的網(wǎng)頁(yè)時(shí)，網(wǎng)站服務(wù)器不會(huì)執(zhí)行任何程序就直接把文件傳遞給客戶端的瀏覽器直接進(jìn)行編譯工作，除非網(wǎng)站管理人員更新過(guò)網(wǎng)頁(yè)的內(nèi)容，否則網(wǎng)頁(yè)是不會(huì)因?yàn)閳?zhí)行程序而出現(xiàn)不同的內(nèi)容的。如圖1.3所示的就是以html為后綴名的靜態(tài)網(wǎng)頁(yè)。

2. 動(dòng)態(tài)網(wǎng)頁(yè)

所謂動(dòng)態(tài)網(wǎng)頁(yè)，就是網(wǎng)頁(yè)內(nèi)含有后臺(tái)程序代碼。運(yùn)行于服務(wù)器端的程序、網(wǎng)頁(yè)和組件等都屬于動(dòng)態(tài)網(wǎng)頁(yè)，它們會(huì)隨客戶、時(shí)間及需求的不同，返回不同的網(wǎng)頁(yè)。通常以擴(kuò)展名asp或aspx存儲(chǔ)，表示該網(wǎng)頁(yè)是Active Server Pages（ASP）動(dòng)態(tài)網(wǎng)頁(yè)。在瀏覽這種網(wǎng)頁(yè)時(shí)，必須由服務(wù)器端先執(zhí)行程序，再將執(zhí)行完的結(jié)果下載給客戶端的瀏覽器。除有以asp作為后綴名的網(wǎng)頁(yè)外，還有以php或jsp作為后綴名的網(wǎng)頁(yè)。如圖1.4所示的是以asp為后綴名的動(dòng)態(tài)網(wǎng)頁(yè)。

如何決定是使用靜態(tài)網(wǎng)頁(yè)還是動(dòng)態(tài)網(wǎng)頁(yè)呢？這要根據(jù)網(wǎng)站的內(nèi)容來(lái)決定，如果網(wǎng)站做好之后不需要做什么修改，就可以采用靜態(tài)網(wǎng)頁(yè)。靜態(tài)網(wǎng)頁(yè)的制作價(jià)格及網(wǎng)頁(yè)打開(kāi)的速度更優(yōu)。如果網(wǎng)站經(jīng)常需要修改，那就做數(shù)據(jù)庫(kù)的動(dòng)態(tài)網(wǎng)頁(yè)，方便管理，隨時(shí)可以進(jìn)行后臺(tái)修改。

1.1.3 網(wǎng)頁(yè)的組成元素

構(gòu)成網(wǎng)頁(yè)的基本元素包括文本、圖像、動(dòng)畫(huà)、表格、表單、音頻及視頻等。下面分別介紹網(wǎng)頁(yè)的各構(gòu)成元素。

1. 文本

因?yàn)榫W(wǎng)頁(yè)中的信息以文本為主，所以文本是網(wǎng)頁(yè)中運(yùn)用最廣泛的元素之一。從某種意義上來(lái)說(shuō)，文本是網(wǎng)頁(yè)存在的基礎(chǔ)。在網(wǎng)頁(yè)中，網(wǎng)頁(yè)的設(shè)計(jì)與制作者可以通過(guò)設(shè)置字體、字號(hào)、顏色和底紋等屬性來(lái)改變文本的視覺(jué)效果。如圖1.5所示的是以文本為主體的網(wǎng)頁(yè)。

2. 圖像

在網(wǎng)頁(yè)制作過(guò)程中適當(dāng)?shù)厥褂脠D像，可以豐富網(wǎng)頁(yè)中的內(nèi)容。雖然網(wǎng)頁(yè)中的圖像格式有很多種，但較適合國(guó)內(nèi)傳輸網(wǎng)絡(luò)的圖像格式就只有JPEG和GIF這兩種。由于受網(wǎng)絡(luò)速度的限制，因此網(wǎng)頁(yè)中的很多圖像都被分割成多個(gè)部分，然后再利用排版技術(shù)，將分割的圖像拼合在一起，以提高圖像在瀏覽器中的顯示速度。如圖1.6所示的是以圖像為主的網(wǎng)頁(yè)。

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

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

JPEG：為Joint Photographic Experts Group的首字母縮寫(xiě)，是由聯(lián)合圖像專家組開(kāi)發(fā)的圖形標(biāo)準(zhǔn)，采用有損的壓縮算法。

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

JPEG圖像文件不支持透明的背景色和動(dòng)畫(huà)格式，它只支持24位真彩色。JPEG用于表現(xiàn)色彩豐富、形狀復(fù)雜的圖像。如圖1.8所示的網(wǎng)站使用的就是JPEG格式圖像。

3. 動(dòng)畫(huà)

網(wǎng)頁(yè)動(dòng)畫(huà)主要分為Flash動(dòng)畫(huà)和GIF動(dòng)畫(huà)。目前在網(wǎng)頁(yè)制作過(guò)程中，F(xiàn)lash動(dòng)畫(huà)運(yùn)用得最廣泛，而GIF動(dòng)畫(huà)則主要用于站標(biāo)、廣告條等組件的動(dòng)畫(huà)制作。如圖1.9所示是一個(gè)主要使用Flash制作的網(wǎng)頁(yè)。

在網(wǎng)頁(yè)中，使用的動(dòng)畫(huà)格式主要包括Flash和GIF這兩種。

由于使用Flash制作出的動(dòng)畫(huà)質(zhì)量較好，因此許多網(wǎng)頁(yè)中的大型、復(fù)雜的動(dòng)畫(huà)幾乎都用Flash來(lái)制作。不過(guò)，F(xiàn)lash動(dòng)畫(huà)在瀏覽器中播放時(shí)需要安裝插件Macromedia Flash Player等，否則就不能播放。右擊屏幕上的Flash動(dòng)畫(huà)，就會(huì)顯示有關(guān)插件的信息。

圖1.10就是右擊某網(wǎng)頁(yè)中的Flash動(dòng)畫(huà)后顯示的相關(guān)信息。

GIF動(dòng)畫(huà)在瀏覽器中播放時(shí)不需要插件。GIF動(dòng)畫(huà)通常用于制作簡(jiǎn)單的、只有幾幀圖片的交替動(dòng)畫(huà)。例如，網(wǎng)頁(yè)中作為友情鏈接使用的LOGO通常都使用GIF動(dòng)畫(huà)，如圖1.11所示。

4. 超鏈接

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

超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行鏈接的元素。一個(gè)網(wǎng)站由若干個(gè)單獨(dú)的網(wǎng)頁(yè)文件組成，這些單獨(dú)的網(wǎng)頁(yè)由超鏈接結(jié)合起來(lái)，形成一個(gè)緊密聯(lián)系的整體。

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

在網(wǎng)頁(yè)中，一般文本超鏈接下都有一條下畫(huà)線，當(dāng)鼠標(biāo)指針移動(dòng)到該超鏈接上時(shí)，鼠標(biāo)指針就會(huì)變成一只小手的形狀，如圖1.12所示。

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

5. 表格

對(duì)網(wǎng)頁(yè)進(jìn)行排版主要是用表格來(lái)完成的，通過(guò)表格可以精確地控制各網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的位置。這里所說(shuō)的表格并不是直觀意義上的表格，它所指的范圍更廣泛。一般表格的邊框不在網(wǎng)頁(yè)中顯示，如圖1.14所示。

6. 表單

表單是網(wǎng)頁(yè)中實(shí)現(xiàn)交互的元素。網(wǎng)頁(yè)中的表單通常用來(lái)接收瀏覽者在瀏覽器端的輸入，然后將這些信息發(fā)送到設(shè)計(jì)者設(shè)置的目標(biāo)端。這個(gè)目標(biāo)既可以是文本文件、網(wǎng)頁(yè)、電子郵件，也可以是服務(wù)器端的應(yīng)用程序。

表單主要應(yīng)用于以下幾個(gè)方面：

收集聯(lián)系信息。

接收用戶要求。

收集訂單、出貨明細(xì)表和收費(fèi)清單。

獲得反饋意見(jiàn)。

設(shè)置來(lái)賓簽名簿。

讓瀏覽者輸入關(guān)鍵字，以便在站點(diǎn)中搜索相關(guān)的網(wǎng)頁(yè)。

讓瀏覽者注冊(cè)為會(huì)員，并以會(huì)員身份登錄站點(diǎn)。

表單由具有不同功能的表單對(duì)象組成。最簡(jiǎn)單的表單也要包含一個(gè)輸入?yún)^(qū)域和一個(gè)提交按鈕。瀏覽者填寫(xiě)表單的方式通常是輸入文本、選中單選按鈕與復(fù)選框，以及從下拉列表中選擇選項(xiàng)等。

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

7. 音頻

在網(wǎng)頁(yè)中插入背景聲音，可以提高網(wǎng)頁(yè)內(nèi)容對(duì)訪問(wèn)者的吸引力。網(wǎng)站設(shè)計(jì)者在添加網(wǎng)頁(yè)背景音樂(lè)的同時(shí)，也應(yīng)該為訪問(wèn)者提供一種關(guān)閉它的方法。如果總是不斷地重復(fù)播放背景音樂(lè)，則會(huì)使訪問(wèn)者感到厭煩，從而選擇離開(kāi)這個(gè)網(wǎng)站。

下面就是一個(gè)插入音頻的網(wǎng)頁(yè)，如圖1.16所示。有些網(wǎng)站提供了關(guān)閉背景音樂(lè)的按鈕，這樣不喜歡聽(tīng)背景音樂(lè)的訪問(wèn)者就可以直接單擊該關(guān)閉按鈕。

從目前來(lái)看，網(wǎng)絡(luò)上使用范圍最廣的音頻格式主要有MP3、MIDI和WAV等。如表1.1所示，列出了這些音頻格式的特點(diǎn)。

網(wǎng)絡(luò)中的音頻是非常常見(jiàn)的，尤其是在音樂(lè)網(wǎng)站中。

8. 視頻

視頻和音頻都是由與文件類型相適應(yīng)的插件來(lái)進(jìn)行播放的。視頻的直觀性可以給訪問(wèn)者帶來(lái)很大的視覺(jué)沖擊。如圖1.17所示的是一個(gè)插入了視頻文件的網(wǎng)站。

隨著網(wǎng)絡(luò)帶寬的增加，網(wǎng)頁(yè)制作中應(yīng)用的視頻和音頻文件也越來(lái)越多。如表1.2所示列出了網(wǎng)頁(yè)中常見(jiàn)的視頻文件格式及其特點(diǎn)。

1.1.4 了解網(wǎng)絡(luò)基本術(shù)語(yǔ)

在制作網(wǎng)頁(yè)中，經(jīng)常會(huì)遇到一些網(wǎng)絡(luò)術(shù)語(yǔ)，如表1.3所示，列出了常見(jiàn)的網(wǎng)絡(luò)術(shù)語(yǔ)及其含義。