1.1　網頁制作基礎知識

網絡現已成為人們生活和工作中不可缺少的一部分，所以，網頁制作也成為了備受大家關注的技術。在開始學習網頁制作之前，先了解一下什么是網頁，以及與網頁相關的設計知識，是十分有必要的。

1.1.1　認識網頁

網頁是Internet中最基本的信息單位，其中包括各種各樣的網頁元素，網頁可以把文字、圖形、聲音及動畫等各種多媒體信息相互聯系起來而構成一種信息表達出來。

網頁又稱為Web頁，是通過瀏覽器來閱讀網絡信息的文件。瀏覽網頁時，在瀏覽器中看到的一個個頁面就是網頁。如圖1-1所示。

1.1.2　認識網站

網站就是Internet上通過超級鏈接的形式構成的相關網頁的集合。網站由一個或多個網頁組成，如新浪、優酷、京東等。瀏覽者可以通過網頁瀏覽器來訪問網站，以獲取需要的資源或享受網絡提供的服務。按網站內容的不同，可將網站分為門戶網站、企業網站、個人網站等幾種類型，其各自的特點如下。

1．門戶類網站

所謂門戶類網站，就是諸如新浪、雅虎、搜狐等網站（圖1-2），能將各種數據資源和互聯網資源集成為一個信息管理平臺，并以統一的用戶接口提供給用戶及企業，在企業和企業、企業和客戶及內部員工之間建立信息通道，且能夠釋放存儲在企業內部和外部的各種信息的整合式站點。

門戶網站又可分為包羅萬象型和內容專一型。

（1）包羅萬象型。以搜狐為例，通過首頁中名目繁多的導航欄就可以發現，這是一個包羅萬象的網站，如圖1-3所示。在這里不僅可以看到政治、軍事、財經類的時事新聞，同時還可以看到像彩鈴、星座、動漫這樣的生活休閑類內容。

這一類的門戶網站給人的整體感覺通常是內容多、文字多，沒有很多的空隙，所以它們多以白色（新浪、雅虎、搜狐）或較深的單色作為背景，這樣不僅可以襯托出琳瑯滿目的內容，也可以使整個版面顯得干凈利落，不會讓訪問者感覺擁擠和眼暈。這一類網頁通常使用三種顏色的文本，這樣更易于體現出自己想推薦的內容。

（2）內容專一型。這一類門戶網站分為很多類型，在設計的時候可以根據所要面對的用戶群，進行“量體裁衣”式的設計，根據用戶不同的要求制作出不同的門戶網站，如圖1-4所示。

例如，IT類專門網站是以IT行業及相關產品為主題的門戶型網站。這類網站除了在網站中能夠找到有關IT方面的內容外，還有的網站專門登載IT信息，這就是IT門戶網。

2．企業類網站

所謂企業類網站不用進行過多的解釋，誰都能舉出一兩個例子，例如：微軟、聯想、海爾等企業的網站（圖1-5）。這一類的網站一般來說結構較為簡單，因為內容有限，所以不需要繁瑣的多層頁面。網站要實現的功能也比較少，主要以共享企業信息、宣傳企業形象為主。因此在設計時不僅可以采用莊重、嚴謹的風格，也可以像設計個人網站一樣體現強烈的個性，制作起來也比較容易發揮出設計者的風格。

企業類網站又可分為電子商務型和宣傳形象型

（1）電子商務型。在網絡世界中，電子商務網站比比皆是，既有像百貨商場那樣經營各類商品的網站，也有專門經營服裝服飾、農產品等的網站（圖1-6）。它們與門戶網站不同，不僅提供相應的搜索引擎，同時還可以在網上集體競價、實時買賣。這一類網站在設計時要注意讓訪問者保持愉悅的心情，以及對新鮮事物的關注。清新亮麗的顏色和便于訪問的頁面布局，將會大大提高網頁在用戶心目中的價值。

　

圖　1-6

（2）宣傳形象型。這一類的企業網站，主要功能是充分宣傳企業文化和企業形象（圖1-7）。頁面上除了突出的企業Logo和企業名稱外，還會有相應的口號等與企業形象有關的構成要素。這類網站可以把頁面的風格做得鮮明一些，但是要符合其行業特征。

3．個人網站

相信很多讀者都希望擁有一個制作精良的個人網站，因為這是體現自己個性的一個不錯的途徑，如果有一個精彩的個人網站出現在互聯網上，一定會很高興。個人網站如圖1-8所示。

個人網站中的“個人”不完全是指某個人，也可以是幾個人組成的一個團體（工作室類網站）。取材通常來源于個人的愛好，因此涉及面非常廣泛。現在有許多個人網站會提供blog（博客）的模板，又因為擁有屬于自己的網站需要申請空間，因此越來越多的人選擇了blog來體現自己的個性。

1.1.3　網頁的類型

網頁的類型有多種，可按其在網站中的位置進行分類，也可按表現形式進行分類，下面分別進行講解。

1．按位置分類

網頁按其在網站中的位置可分為主頁和內頁。主頁一般指進入網站時看到的第一個頁面，也稱為首頁，有時也稱為形象頁；內頁是指與主頁相鏈接的其他頁面，也稱為網站的內部頁面。

2．按表現形式分類

按網頁的表現形式分類，可將網頁分為靜態網頁和動態網頁兩類。靜態網頁是指用HTML語言編寫的網頁，其制作方法簡單易學，但缺乏靈活性；動態網頁是指用ASP、PHP、JSP等語言編寫的網頁，該類網頁先在Web服務器端執行，然后再將執行結果返回客戶端并通過瀏覽器進行顯示。動態網頁最大的特點是可以動態生成網頁內容，可根據客戶端提交的不同信息而動態地生成不同的網頁內容。

1.1.4　網頁設計前的考慮

網頁版式設計的優劣直接關系到網站的成功與否。在開始版式設計之前，首先要考慮整個網站成功的幾個重點因素。

1．用戶因素

無論是著手設計之前，還是正在設計之中，或是設計完畢之后，都有一個最高行動準則，一定要牢記在心，那就是用戶優先。因為如果沒有用戶去光顧，任何自認為設計得再好的網頁都是沒有意義的。因此，就要求網頁設計者不僅要站在經營者的角度，同時也要站在訪問者的角度開展設計工作，將最有用、最實際的內容放在網頁的首要位置，并盡可能迎合多數用戶的瀏覽習慣，因為網頁是服務于大眾的。

2．內容因素

“內容是第一位的”，這句話不僅適合書籍，同樣適合網頁。在制作網頁之前，要先想好頁面中要放置的內容，也就是網站所有者要告訴訪問者， 且訪問者最想知道的信息。網站的內容可以包括文字、圖片、影像、聲音等，但一定要與這個網站將要提供給訪問者的信息有關系。

3．瀏覽器因素

在設計網頁時，必須考慮網站訪問者使用的瀏覽器。如果想讓所有的訪問者都可以毫無障礙地瀏覽頁面，那么最好使用所有瀏覽器都可以閱讀的格式或程序技巧。在頁面中設置幾種不同的觀賞模式選項（例如純文字模式、框架模式、Flash模式等），供訪問者自行選擇，就可以避免許多潛在的用戶流失。另外，現在的顯示器分辨率一般為1366×768像素，但是仍有一部分用戶在使用1280×768像素的分辨率，因此在制作網頁時，還要考慮網站瀏覽的兼容性。因為不同的顯示器分辨率不同，所以，同一個頁面的大小可能出現1280×768像素、1024×768像素等不同尺寸。由于現在顯示器的分辨率一般都在1024×768像素以上，所以想要達到瀏覽網頁的最佳效果，可以設置寬為1000像素，網頁的高度可不做限制。

1.1.5　基本版式設計風格

對于一個網站來說，除了網頁內容外，還要對網站進行整體規劃設計。要設計出一個精美的網站，前期規劃的確是必不可少的。頁面布局按照基本版式可分為兩種基本形式，上下分割型和左右分割型，但也有一些富有個性的版式設計類型，如半包圍型和全包圍型。一般情況下，頁面布局皆以導航欄為界。

1．上下分割型

上下分割型是最為常見的一種網頁結構，通常上方為導航欄，或者是企業動態形象（Flash），下方是內容，如圖1-9所示。

部分網站只將這種形式用于網站的首頁，而二級頁面會更換為其他的結構（圖1-10）。

2．左右分割型

在左右分割型頁面中，左側通常是導航欄，右側則是正文。這種結構非常清晰，一目了然。如圖1-11所示。大部分的大型論壇都采用這種結構，一些企業網站和個人網站也喜歡采用這種結構（圖1-12）。

3．半包圍型

該類頁面的布局在頁面頂部放置主導航欄(主菜單），在頁面的左右兩側分別列出二級欄目欄或綜合性熱點區（如廣告條、搜索引擎、友情鏈接、登錄面板、注冊按鈕等），如圖1-13和圖1-14所示。這種是互聯網中常見的布局，其優點是直觀、條理清晰、均衡，缺陷是版式呆板、僵化。在采用這種布局時要注意色彩的和諧搭配，通過巧妙的用色，能夠調節頁面的整體韻律。

4．全包圍型

全包圍型頁面以半包圍型布局為基礎，在頁面的底部增加了一條橫向的菜單（廣告條，或者本站另一大板塊的超級鏈接區），如圖1-15和圖1-16所示。這樣做的目的是為了充分利用有限的頁面空間，增大主頁面的信息量，縮短正文鏈接的路徑，使訪問者比較便捷、直觀地瀏覽所需要的信息，少走彎路。其缺點是頁面擁擠、四面封閉，不夠靈活。

1.1.6　網頁頁面的基本組成元素

網頁是由多種元素組成的，文本和圖像是網頁中最基本的元素，它們在網頁中起著非常重要的作用，是網頁主要的信息載體。除文本和圖像外，網頁中還經常包含動畫、音樂等多媒體元素。

1．文字

文字是網站最基本的內容，是網頁主要的信息載體，因此文字素材是制作網站之前必須要準備好的。就企業網站而言，關于公司概況、公司新聞、公司宗旨以及口號這一類的文字，企業都會提供，有時也會提供平面的宣傳材料。

2．圖像（圖片）

圖像也是網頁不可或缺的元素，它具有比文本更直觀和生動的表現形式，并且可以傳遞一些文本不能傳遞的信息。網頁中支持的圖像格式主要包括JPEG、GIF和PNG三種，其中，JPEG格式用于照片圖像時使用，GIF格式支持動畫和背景透明，PNG格式也支持背景透明，但一般不太常用。

幾乎所有素材圖片在應用到網頁中之前，都要經過圖形圖像軟件的輔助處理。無論是圖片的顏色、大小還是形狀等，都需要使用軟件進行調節。通常情況下Photoshop是最為常用的圖片處理軟件之一，當然還有Fireworks等其他輔助工具。

3．多媒體

音樂、動畫等多媒體元素是豐富網頁效果和內容的常用元素，在網頁中運用非常廣泛。多媒體元素的加入，可以使平靜的網頁變得生機勃勃。

網頁中常用的音樂格式有MID和MP3，MID為通過軟件合成的音樂，不能被錄制；MP3為壓縮文件，其壓縮率非常高，且音質也不錯，是背景音樂的首選。不一定所有的網頁都有背景音樂，要視網站類型而定。

網頁中常用的動畫格式主要有兩種：一種是GIF動畫；另一種是SWF動畫。GIF動畫是逐幀動畫，相對比較簡單，而SWF動畫則更富表現力和視學沖擊力，還可以結合聲音和互動功能，給瀏覽者強烈的視聽感受。