1.1 網頁制作概述

網頁制作基本流程一般可以分為3步：準備（構思網頁主題，搜集素材，規劃內容）；制作（利用各種網頁制作工具，制作網頁）；維護（網頁制作完成后，根據需要進行更新與維護）。對于制作網頁，可以編寫HTML源代碼，也可以使用專門的網頁制作工具軟件來實現。這一節將介紹網頁的基本元素，以及與其相關的一些技術。

1.1.1 網頁的元素

制作網頁之前，首先要了解構成網頁的基本元素，以便根據需要合理地組織和安排網頁的內容。網頁的基本元素包括文本、圖像、表格、表單、超級鏈接等，下面對這些基本元素一一介紹。

文本：文本是網頁最基本的元素，也是網頁中主要的信息載體與交流工具，能夠準確地傳達網頁要表達的信息。為了改善文字表現形式單一的缺點，在網頁制作時，可通過字體、字型、字號、顏色、底紋和邊框等屬性來美化網頁。

圖像：圖像是網頁的又一最基本的元素，同樣可以傳達網頁信息。由于圖像自身具有可觀賞的特點，所以經常在網頁中美化元素，起到裝飾的效果。同時，圖像還可以體現網頁的風格。常用的圖像文件格式有JEPG、GIF和PNG三種。其中，JPEG格式可支持全彩和灰度的圖形，而GIF文件只能儲存256色的圖片。圖像雖然可以美化網頁，但如果在同一個網頁中加入的圖片過多，反而會影響網頁整體的視覺效果，網頁的下載速度也將明顯降低，所以在設計網頁時要注意適當的使用圖像。

表格：表格作為一種基本的數據組織形式，可以簡潔、直觀地表示出數據的組織關系。但是在網頁設計中，表格更多的被用來控制網頁中信息的布局方式。表格可以把不同的網頁元素包括文本、圖像、鏈接、表單及其他表格等，作為表格的單元格內容。使用行和列的形式來布局網頁的各種內容，同時還可以使用表格來精確控制各種元素在頁面中的位置。

表單：在網頁中，表單作為一個交互工具，接收用戶輸入的數據然后提交給Web服務器，以實現用戶端與服務器端的交互。表單的主要設計模式是數據的處理，其可以搜集用戶所需要的信息并將信息傳送到服務器上。表單由兩部分組成：一是描述表單元素的HTML源代碼；一是客戶端腳本或者服務器端用于處理表單信息的程序。實際上，表單只是一個容器，由具有不同功能的表單域組成。最簡單的表單可以只包含一個輸入區域和一個提交按鈕。瀏覽者填寫表單的方式通常是輸入文本、選中單選按鈕與復選框及從下拉列表中選擇選項等。常見的表單有用戶反饋表單、留言簿表單、搜索表單和用戶注冊表單等類型。例如，申請電子郵箱時需要填寫的用戶資料表就是一個表單，當單擊“注冊”按鈕后，首先表單收集用戶填寫的信息，然后將收集到的信息傳到表單處理程序，表單處理程序會返回一條用戶“注冊”成功或失敗的信息。

超級鏈接：超級鏈接是網頁互聯的基礎，可以將萬維網中無數的網頁連接在一起。可以說超級鏈接是“因特網”的“互聯”的意義所在。超級鏈接是從一個網頁指向一個特定的目標位置的鏈接，這個目標位置通常是另一個網頁，但也可以是一幅圖片、一個電子郵件地址、一個文件、一個程序或者本網頁中的其他位置。超級鏈接的載體通常是文本、圖片或圖片中的區域，也可以是一些不可見的程序腳本。當瀏覽者單擊設置為超級鏈接的對象時，鏈接目標將根據類型的不同，以特定方式顯示在Web瀏覽器上。例如，當單擊指向某網頁的圖片鏈接時，鏈接到的網頁將在Web瀏覽器上以規定的方式打開。

多媒體元素：在現代的多媒體網頁中，聲音和視頻也是重要的組成部分。網頁中常見的聲音文件的格式有MIDI、WAV、MP3、RM和AIF等，不同的瀏覽器對各種格式的聲音文件的處理方法是不同的。很多瀏覽器可以直接支持MIDI、WAV和AIF格式的聲音文件，而MP3和RM格式的聲音文件則需要專門的插件來播放。

網頁中常見的視頻文件的格式有RealPlayer、MPEG、AVI和DivX等。聲音和視頻文件的添加讓網頁更加精彩，特別是網絡上許多插件的應用，使得向網頁中插入聲音和視頻文件的操作變得十分簡單，所以聲音和視頻文件在網頁中得到了越來越多的應用，如圖1-1 所示即是一個多媒體網頁中使用視頻播放插件播放視頻文件。

網頁中除了以上幾種最基本的元素之外，還有一些其他的網頁內容，例如，導航欄和各種網頁特效等，這些內容極大地豐富了網頁效果，同時增加網頁的動感。現在網頁內容豐富，在設計時，只有合理地安排各種內容，才能準確地表達網頁要傳達的信息，同時使網頁更具吸引力。

1.1.2 網頁的技術

一個成功的網頁通常需要結合使用多種技術，例如，使用HTML編輯網頁的基本內容、使用CSS來布局和設計網頁樣式、使用Flash來設計網頁動畫、使用JavaScript來編寫腳本、響應網頁的各種動作，等等。下面將介紹網頁制作過程中常用的幾種相關技術。

HTML：HTML是Hyppertext Markup Language的縮寫，即通常所說的超文本標記語言。HTML是編寫網頁的主要語言，是一種文本類、解釋執行的標記語言。HTML對Web頁面中顯示內容的屬性以標簽的形式進行描述，客戶機上的瀏覽器對這些描述進行解釋，并將相應的結果正確顯示在顯示器上。通常一個Web頁面就是一個HTML文檔。編寫HTML不需要特殊的工具，任何可以進行文本編輯的工具都可以用來編寫HTML文檔。

CSS：CSS是Cascading Style Sheets的縮寫，又稱層疊樣式表。CSS是由W3C的CSS工作組制定和維護的，也是一種標記語言。CSS可以更加精確地控制網頁內容的表現形式，例如，控制傳統的文本屬性，如字體、字號、顏色等，還可以控制網頁的背景、網頁對象的位置、圖片的顯示效果、鼠標指針的形狀等其他網頁效果。CSS最大的功能是使網頁內容與形式相分離。使用CSS可以統一控制網頁的樣式，對層疊樣式表CSS的內容做一些簡單地修改，即可同時改變網頁多處的樣式或多個網頁的表現形式。CSS可以嵌套在HTML標簽中使用，也可以定義為外部CSS文件在網頁中引入。

JavaScript：JavaScript是Netscape公司開發的腳本語言，其前身是Livescript。在Java語言發展起來以后，Netscape公司引進Java的程序概念，將Livescript重新設計為JavaScript。JavaScript和Java是兩個作用大不相同的產品，不能混淆。JavaScript是一種Script腳本語言，所謂的腳本是一種能夠完成某些特殊功能的“小程序”。這種程序和一般程序不同，一般程序必須先經過編譯，然后再執行，而腳本是一種解釋式語言，不必事先編譯，在程序運行過程中被逐行地解釋并執行。JavaScript作為HTML文件的一部分由瀏覽器解釋執行，可以直接打開HTML文件來編輯JavaScript語句，維護方便，并且可以立即看到改變后的效果。

JavaScript和VBScript：兩者都是常用的Script腳本語言，其中VBScript是ASP（Active Server Pages）默認使用的語言。

ASP：ASP是Active Server Page的縮寫，意為“動態服務器頁面”。ASP是微軟公司開發的代替CGI腳本程序的一種應用，可以與數據庫和其他程序進行交互，是一種簡單、方便的編程工具。ASP實際上是編譯成ISAPI（Internet Server Application Programming Interface），然后再生成文本發送到客戶端。ASP與標準HTML文件一樣包含HTML對象并且在同一個瀏覽器上解釋并顯示。任何可以放在HTML中的內容都可以放在ASP中。ASP是一種服務器端腳本編寫環境，可以用來創建和運行動態網頁或Web應用程序。利用ASP可以向網頁中添加交互式內容（如在線表單），也可以創建使用HTML網頁作為用戶界面的Web應用程序。

PHP、JSP和ASP.NET：這是另外3種常見的網絡編程技術。PHP是一種服務器端HTML嵌入式腳本描述語言，其最強大和最重要的特征是其數據庫集成層，使用其完成一個含有數據庫功能的網頁非常簡單。JSP是用Java語言作為腳本語言的一種技術，通過其為整個服務器端的Java庫單元提供了一個接口來服務于HTTP的應用程序。ASP.NET采用面向對象的方法來創建動態Web應用程序。

Flash：Flash是Macromedia公司出品的一個矢量動畫制作軟件，由于該軟件基于矢量圖形系統，因此用其制作的Flash動畫可以根據需要縮放大小而不會影響畫面質量。同時，Flash動畫的數據存儲量小，所占空間少，適合在網絡上使用。但是，Flash動畫文件維護更新不方便，不適宜用于一些信息量大、更新頻繁的網站。

DHTML：DHTML是Dynamic HTML的縮寫，即通常所說的動態HTML。其實DHTML并不是一門新的語言，而是HTML、CSS和客戶端腳本的一種集成，是一種通過各種技術的綜合發展而得以實現的概念。這些技術包括JavaScript、VBScript、Document Object Model (文檔對象模型)、Layers和Cascading Style Sheets（CSS樣式表）等。DHTML的目的在于加強網頁的交互性，對用戶的操作在本地就可做實時處理，從而得到更快的用戶響應，即當網頁從Web服務器下載后無需再經過服務器的處理，而在瀏覽器中直接動態地更新網頁的內容、排版樣式、動畫。

要區分動態HTML與動態網頁這兩個不同的概念，動態HTML能使網頁上的元素動態地改變（如文字的變色，圖片位置的移動）；而動態網頁，則是在服務器端動態地生成網頁。