1.2 認識網頁

網頁是網絡信息發布與表現的一種主要形式。網頁的內容與發布信息的目的及要求相關，網頁的表現形式與制作工具和創意水平有關。

1.2.1 網頁的基本概念

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

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

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

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

1.2.2 網頁的類型

通常網頁都是以.htm或.html結尾的文件，也有以.cgi、.asp、.php和.jsp等其他后綴結尾的網頁文件，不同的后綴代表使用不同技術制作出的不同類型的網頁文件。根據制作網頁的技術不同，可以將網頁分成靜態網頁和動態網頁。

靜態網頁

Internet最早出現時，站點內容都是以HTML靜態頁面形式存放在服務器上的，這里所說的靜態，并不是指網頁中的元素都是靜止不動的，而是指網頁制作完成后，靜態網頁內容一經發布到網站服務器上，無論是否有用戶訪問，每個靜態網頁的內容都保存在網站服務器上不再發生動態改變。也就是說，靜態網頁是指保存在服務器上的內容不變的文件，每個網頁都是一個獨立的文件。

瀏覽器“閱讀”靜態網頁的執行過程較為簡單，如圖1-4所示。首先瀏覽器向網絡中的Web服務器發出請求，指向某一個普通網頁。Web服務器接收到請求信號后，將該網頁傳回瀏覽器，此時傳送的只是文本文件。瀏覽器接到Web服務器送來的信號后開始解讀html標簽，然后進行轉換，將結果顯示出來。

由于靜態網頁的內容相對穩定，因此容易被搜索引擎搜索到。但是，靜態網頁沒有數據庫的支持，在網站制作和維護方面工作量較大，因此當網站信息量很大時，完全依靠靜態網頁的制作方式比較困難。靜態網頁的交互性也較差，在功能方面有較大的限制。

動態網頁

動態網頁是指瀏覽器可以和服務器數據庫進行實時數據交互的網頁。動態網頁并不是指加上了動畫等效果的動感網頁，動態網頁中除了普通網頁中的元素外，還包括一些應用程序，這些應用程序可以使瀏覽器與Web服務器之間發生交互行為。

應用程序服務器讀取網頁上的代碼，根據代碼中的指令形成發送給客戶端的網頁，然后將代碼從網頁中去掉，所得的結果就是一個靜態網頁。應用程序服務器將該網頁傳遞回Web服務器，然后再由Web服務器將該網頁傳回瀏覽器，當該網頁到達客戶端時，瀏覽器得到的內容是HTML格式，如圖1-5所示。

1.2.3 網頁的構成元素

網頁由文本、圖像、動畫和超鏈接等基本元素構成，本節將對這些基本元素進行簡單介紹，為后面各章中運用這些元素制作網頁奠定基礎。

文本

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

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

圖像

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

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

超鏈接

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

當瀏覽者單擊超鏈接時，其目的端將顯示在Web瀏覽器上，并根據目的端的類型以不同方式進行鏈接。例如，如果單擊的是一個指向AVI文件的超鏈接，該文件將在媒體播放軟件中打開；如果單擊的是一個指向網頁的超鏈接，則該網頁將顯示在Web瀏覽器上。

導航欄

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

表格和框架

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

框架是網頁的一種組織形式，將相互關聯的多個網頁內容組織在一個瀏覽器窗口中顯示。例如，在一個框架內放置導航欄，另一個框架中的內容可以隨著單擊導航欄中的鏈接而改變。

表單

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

（1）收集聯系信息。

（2）接受用戶要求。

（3）收集訂單、出貨和收費細則。

（4）獲得反饋意見。

（5）讓瀏覽者輸入關鍵字，在站點中搜索相關網頁。

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

動畫、聲音和視頻

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

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

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

通常不建議使用聲音文件作為背景音樂，因為這樣會影響網頁的下載速度。視頻文件的格式也非常多，常見的有RealPlayer、MPEG和AVI等，視頻文件的采用讓網頁變得精彩生動，許多插件的出現也使得在網頁中插入視頻文件的操作變得更加簡單。

其他特效

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

1.2.4 網頁的制作工具

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

Dreamweaver是一個專業的網頁設計軟件，它包括可視化編輯和HTML代碼編輯的軟件包，支持ActiveX、JavaScript、Java、Flash和ShockWave等特性，并支持動態網頁的設計，而且Dreamweaver與Flash和Fireworks實現了無縫鏈接，可以方便地調用Fireworks進行網頁圖像的處理，也可以方便地把Flash設計的動畫插入到網頁中，從而形成了一個完美的網頁設計開發環境。