1.2 認(rèn)識(shí)網(wǎng)頁

網(wǎng)頁是網(wǎng)絡(luò)信息發(fā)布與表現(xiàn)的一種主要形式。網(wǎng)頁的內(nèi)容與發(fā)布信息的目的及要求相關(guān)，網(wǎng)頁的表現(xiàn)形式與制作工具和創(chuàng)意水平有關(guān)。

1.2.1 網(wǎng)頁的基本概念

網(wǎng)頁是用HTML語言編寫的、通過WWW網(wǎng)絡(luò)傳輸并被瀏覽器翻譯成可以顯示出來的一個(gè)頁面文件，它集合了文本、圖片、聲音和數(shù)字電影等信息。

網(wǎng)頁的本質(zhì)是什么呢？在瀏覽器窗口中任意打開一個(gè)網(wǎng)頁，選擇“頁面＞查看源文件”命令，如圖1-2所示，系統(tǒng)會(huì)啟動(dòng)“記事本”程序，顯示其中包含的一些文本信息，如圖1-3所示。

這些文本就是網(wǎng)頁的本質(zhì)——HTML源代碼。網(wǎng)頁是用HTML寫成的文檔，在Internet中通過瀏覽器查看。

根據(jù)頁面內(nèi)容，可以把網(wǎng)頁分為首頁、主頁、專欄網(wǎng)頁、內(nèi)容網(wǎng)頁和功能網(wǎng)頁等類型，在這些網(wǎng)頁中最重要的是網(wǎng)站的主頁。在訪問一個(gè)網(wǎng)站時(shí)，首先看到的網(wǎng)頁稱為該網(wǎng)站的首頁。有的網(wǎng)站首頁只起到歡迎訪問者的作用，是網(wǎng)站的開場頁。單擊該頁面上的鏈接文字或圖片，即可進(jìn)入網(wǎng)站主頁。網(wǎng)站主頁與首頁的主要區(qū)別在于主頁設(shè)有網(wǎng)站的導(dǎo)航欄，是站點(diǎn)中所有網(wǎng)頁的鏈接中心。目前，多數(shù)網(wǎng)站都把首頁與主頁合并為一個(gè)頁面，直接顯示主頁。這種向來訪者同時(shí)傳遞歡迎與引導(dǎo)信息的網(wǎng)站頁面，既是主頁也是首頁，專欄網(wǎng)頁也稱主題網(wǎng)頁，用于對(duì)網(wǎng)站內(nèi)容做進(jìn)一步細(xì)化和歸類，是主頁和內(nèi)容網(wǎng)頁的中轉(zhuǎn)站。內(nèi)容網(wǎng)頁是網(wǎng)站所傳達(dá)信息的具體體現(xiàn)，位于網(wǎng)站鏈接結(jié)構(gòu)的終端。功能網(wǎng)頁是指一些專門用于訪問者的信息反饋和網(wǎng)站用戶注冊(cè)等方面的、為網(wǎng)站用戶服務(wù)的網(wǎng)頁。

1.2.2 網(wǎng)頁的類型

通常網(wǎng)頁都是以.htm或.html結(jié)尾的文件，也有以.cgi、.asp、.php和.jsp等其他后綴結(jié)尾的網(wǎng)頁文件，不同的后綴代表使用不同技術(shù)制作出的不同類型的網(wǎng)頁文件。根據(jù)制作網(wǎng)頁的技術(shù)不同，可以將網(wǎng)頁分成靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁。

靜態(tài)網(wǎng)頁

Internet最早出現(xiàn)時(shí)，站點(diǎn)內(nèi)容都是以HTML靜態(tài)頁面形式存放在服務(wù)器上的，這里所說的靜態(tài)，并不是指網(wǎng)頁中的元素都是靜止不動(dòng)的，而是指網(wǎng)頁制作完成后，靜態(tài)網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無論是否有用戶訪問，每個(gè)靜態(tài)網(wǎng)頁的內(nèi)容都保存在網(wǎng)站服務(wù)器上不再發(fā)生動(dòng)態(tài)改變。也就是說，靜態(tài)網(wǎng)頁是指保存在服務(wù)器上的內(nèi)容不變的文件，每個(gè)網(wǎng)頁都是一個(gè)獨(dú)立的文件。

瀏覽器“閱讀”靜態(tài)網(wǎng)頁的執(zhí)行過程較為簡單，如圖1-4所示。首先瀏覽器向網(wǎng)絡(luò)中的Web服務(wù)器發(fā)出請(qǐng)求，指向某一個(gè)普通網(wǎng)頁。Web服務(wù)器接收到請(qǐng)求信號(hào)后，將該網(wǎng)頁傳回瀏覽器，此時(shí)傳送的只是文本文件。瀏覽器接到Web服務(wù)器送來的信號(hào)后開始解讀html標(biāo)簽，然后進(jìn)行轉(zhuǎn)換，將結(jié)果顯示出來。

由于靜態(tài)網(wǎng)頁的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎搜索到。但是，靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時(shí)，完全依靠靜態(tài)網(wǎng)頁的制作方式比較困難。靜態(tài)網(wǎng)頁的交互性也較差，在功能方面有較大的限制。

動(dòng)態(tài)網(wǎng)頁

動(dòng)態(tài)網(wǎng)頁是指瀏覽器可以和服務(wù)器數(shù)據(jù)庫進(jìn)行實(shí)時(shí)數(shù)據(jù)交互的網(wǎng)頁。動(dòng)態(tài)網(wǎng)頁并不是指加上了動(dòng)畫等效果的動(dòng)感網(wǎng)頁，動(dòng)態(tài)網(wǎng)頁中除了普通網(wǎng)頁中的元素外，還包括一些應(yīng)用程序，這些應(yīng)用程序可以使瀏覽器與Web服務(wù)器之間發(fā)生交互行為。

應(yīng)用程序服務(wù)器讀取網(wǎng)頁上的代碼，根據(jù)代碼中的指令形成發(fā)送給客戶端的網(wǎng)頁，然后將代碼從網(wǎng)頁中去掉，所得的結(jié)果就是一個(gè)靜態(tài)網(wǎng)頁。應(yīng)用程序服務(wù)器將該網(wǎng)頁傳遞回Web服務(wù)器，然后再由Web服務(wù)器將該網(wǎng)頁傳回瀏覽器，當(dāng)該網(wǎng)頁到達(dá)客戶端時(shí)，瀏覽器得到的內(nèi)容是HTML格式，如圖1-5所示。

1.2.3 網(wǎng)頁的構(gòu)成元素

網(wǎng)頁由文本、圖像、動(dòng)畫和超鏈接等基本元素構(gòu)成，本節(jié)將對(duì)這些基本元素進(jìn)行簡單介紹，為后面各章中運(yùn)用這些元素制作網(wǎng)頁奠定基礎(chǔ)。

文本

通常情況下網(wǎng)頁中最多的內(nèi)容是文本，文本不如圖像那樣能很快吸引瀏覽者的目光，但卻能準(zhǔn)確地表達(dá)消息的內(nèi)容和含義。為了使文字變得美觀或突出，可以根據(jù)需要對(duì)其字體、大小、顏色、底紋和邊框等屬性進(jìn)行設(shè)置，從而給網(wǎng)頁中的文本賦予新的生命力。

在編輯網(wǎng)頁中的文本時(shí)要注意網(wǎng)頁正文的字號(hào)一般不要太大，一般使用9磅或12像素左右即可。另外，網(wǎng)頁中也不要使用過多的字體，為了避免同一網(wǎng)頁在不同計(jì)算機(jī)或不同瀏覽器中的顯示效果有較大差異，中文文字一般可以使用宋體和黑體。

圖像

豐富多彩的圖像是美化網(wǎng)頁必不可少的元素，圖像在網(wǎng)頁中具有提供信息、展示作品、裝飾網(wǎng)頁和表示風(fēng)格的作用。網(wǎng)頁中的圖像主要是用于點(diǎn)綴標(biāo)題的小圖片，介紹性的圖片，代表企業(yè)形象或欄目內(nèi)容的標(biāo)志性圖片，以及用于宣傳廣告等多種形式。用于網(wǎng)頁上的圖像一般為JPG、PNG和GIF格式。

圖像雖然在網(wǎng)頁中起到非常重要的作用，但如果網(wǎng)頁中加入的圖像過多，不僅會(huì)影響網(wǎng)頁整體的視覺效果，而且下載速度也會(huì)下降。

超鏈接

超鏈接是Web網(wǎng)頁的主要特色，是萬維網(wǎng)方便實(shí)用的主要原因。超鏈接是指從一個(gè)網(wǎng)頁指向另一個(gè)目的端的鏈接，這個(gè)目的端通常是另一個(gè)網(wǎng)頁，也可以是一個(gè)下載的文件、一幅圖片、一個(gè)E-mail或相同網(wǎng)頁上的不同位置等。超鏈接的載體可以是文本、按鈕或圖片等。

當(dāng)瀏覽者單擊超鏈接時(shí)，其目的端將顯示在Web瀏覽器上，并根據(jù)目的端的類型以不同方式進(jìn)行鏈接。例如，如果單擊的是一個(gè)指向AVI文件的超鏈接，該文件將在媒體播放軟件中打開；如果單擊的是一個(gè)指向網(wǎng)頁的超鏈接，則該網(wǎng)頁將顯示在Web瀏覽器上。

導(dǎo)航欄

導(dǎo)航欄是一組超鏈接，用來方便地瀏覽站點(diǎn)。導(dǎo)航欄一般由多個(gè)按鈕或者多個(gè)文本超鏈接組成。導(dǎo)航欄的作用就是要讓瀏覽者在瀏覽站點(diǎn)時(shí)不會(huì)“迷路”。在設(shè)計(jì)站點(diǎn)的每個(gè)網(wǎng)頁時(shí)，可以在每個(gè)網(wǎng)頁都顯示導(dǎo)航欄，這樣瀏覽者可以方便地轉(zhuǎn)向站點(diǎn)的其他網(wǎng)頁。網(wǎng)頁中的導(dǎo)航菜單示例如圖1-6所示。

表格和框架

表格是HTML語言中的一種元素，主要用于網(wǎng)頁內(nèi)容的布局，以及組織整個(gè)網(wǎng)頁的外觀，通過表格可以精確地控制各網(wǎng)頁元素在網(wǎng)頁中的位置。用表格定位的示例如圖1-7所示。

框架是網(wǎng)頁的一種組織形式，將相互關(guān)聯(lián)的多個(gè)網(wǎng)頁內(nèi)容組織在一個(gè)瀏覽器窗口中顯示。例如，在一個(gè)框架內(nèi)放置導(dǎo)航欄，另一個(gè)框架中的內(nèi)容可以隨著單擊導(dǎo)航欄中的鏈接而改變。

表單

表單用于接受用戶在瀏覽器上的輸入，然后將信息打包發(fā)送到用戶的目標(biāo)端，如圖1-8所示。這個(gè)目標(biāo)可以是文本文件、網(wǎng)頁或電子郵件，也可以是服務(wù)器端程序。用戶填寫表單的方式是輸入文本、選擇單選按鈕或復(fù)選框，以及從下拉列表框中選擇選項(xiàng)等。表單的用途通常有以下幾個(gè)方面。

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

（2）接受用戶要求。

（3）收集訂單、出貨和收費(fèi)細(xì)則。

（4）獲得反饋意見。

（5）讓瀏覽者輸入關(guān)鍵字，在站點(diǎn)中搜索相關(guān)網(wǎng)頁。

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

動(dòng)畫、聲音和視頻

動(dòng)畫是網(wǎng)頁中最活躍的元素，創(chuàng)意出眾、制作精致的動(dòng)畫是吸引瀏覽者眼球的最有效方法之一。但是如果網(wǎng)頁動(dòng)畫太多，也會(huì)物極必反，使人眼花繚亂，進(jìn)而產(chǎn)生視覺疲勞。

聲音是多媒體網(wǎng)頁的一個(gè)重要組成部分。當(dāng)前存在著一些不同類型的聲音文件和格式，也有不同的方法將這些聲音加到網(wǎng)頁中，在決定添加的聲音格式和方式之前，要考慮聲音的用途、格式和文件大小等。不同瀏覽器對(duì)聲音文件的處理方式是不同的。

用于網(wǎng)絡(luò)的聲音文件格式非常多，常用的有MIDI、WAV和MP3等，設(shè)計(jì)者在使用這些格式的文件時(shí)要加以區(qū)分。很多瀏覽器不用插件也可以支持MIDI、WAV等文件，而MP3和RM格式的聲音文件則需要專門的瀏覽器才能播放。

通常不建議使用聲音文件作為背景音樂，因?yàn)檫@樣會(huì)影響網(wǎng)頁的下載速度。視頻文件的格式也非常多，常見的有RealPlayer、MPEG和AVI等，視頻文件的采用讓網(wǎng)頁變得精彩生動(dòng)，許多插件的出現(xiàn)也使得在網(wǎng)頁中插入視頻文件的操作變得更加簡單。

其他特效

網(wǎng)頁中除了以上幾種最基本的元素外，還有一些其他元素，如懸停按鈕、Java特效和ActiveX等各種特效。它們不僅能點(diǎn)綴網(wǎng)頁，使網(wǎng)頁變得生動(dòng)活潑，而且在網(wǎng)頁游戲、電子商務(wù)等方面有著不可忽視的作用。

1.2.4 網(wǎng)頁的制作工具

目前有許多設(shè)計(jì)Web頁面的工具軟件，總體上可以分為兩大類。一類為用HTML語言直接編制Web的編輯軟件，另一類為使用Dreamweaver等頁面設(shè)計(jì)軟件。直接編寫HTML語言要求掌握大量的HTML標(biāo)記，制作效率低，但制作的頁面簡潔，可用各種文本編輯工具直接制作，適合于對(duì)HTML語法比較熟悉的用戶。使用Dreamweaver這類軟件制作網(wǎng)頁不要求掌握大量復(fù)雜的HTML標(biāo)記，用多種可視化專用工具進(jìn)行制作，制作效率高，但是用這種方法形成的頁面最終都要被翻譯為HTML源文。

Dreamweaver是一個(gè)專業(yè)的網(wǎng)頁設(shè)計(jì)軟件，它包括可視化編輯和HTML代碼編輯的軟件包，支持ActiveX、JavaScript、Java、Flash和ShockWave等特性，并支持動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)，而且Dreamweaver與Flash和Fireworks實(shí)現(xiàn)了無縫鏈接，可以方便地調(diào)用Fireworks進(jìn)行網(wǎng)頁圖像的處理，也可以方便地把Flash設(shè)計(jì)的動(dòng)畫插入到網(wǎng)頁中，從而形成了一個(gè)完美的網(wǎng)頁設(shè)計(jì)開發(fā)環(huán)境。