1、第4章 網頁的圖像學習要點 網頁中常用的圖像格式 網頁中圖像與文字的搭配 插入圖像 交互式圖像 網頁背景 圖像映射圖片帶給我們豐富的色彩與強烈的沖擊力，正是圖片給了網頁修飾與點綴。合理的利用圖片，會給人們帶來美的享受。如果網頁中沒有了圖片，光是純文字頁面該是多么的單調。圖片有多種格式，如：JPG、BMP、TIF、GIF、PNG等。互聯網上大部分使用JPG和GIF兩種格式，因為它們具有壓縮比例高的優點，而且各個操作系統都可使用。下面簡單介紹一下常用的圖像文件存儲格式。1GIF2JPG3PNG4.1 網頁中常用的圖像格式 網頁主要由文字和圖像構成，并且因為文字與圖像在版面中所處的地位和主次不同，而

2、有大小之分。作為標題的文字相對較大，正文文字則較小；作為宣傳的圖像較大小，作為欄目的圖像較小，作為項目的圖像則更小，同時圖像因受空間和位置限制而有橫豎之分。 圖像和文字體現出網頁的內容，因此圖像的有序編排和布局就顯示得尤為重要，否則就會產生混亂界面。要使圖像與文字成為一個有機整體，需遵照以下幾條規則。1主次分明，中心突出2大小搭配，相互呼應3圖文并茂，相得益彰4.2 網頁中圖像與文字的搭配4.3 插入圖像一個好的網頁除了文本之外，還應該有絢麗的圖片來進行渲染，在頁面中恰到好處的使用圖像能使網頁更加生動、形象和美觀。圖像是網頁中不可缺少的元素。1在網頁中插入圖像2設置圖像屬性 在Dreamwea

3、ver CC中，可以插入交互式導航圖像。所謂交互式導航是指當鼠標經過一幅圖像時，它會變成另外一幅圖像，并且帶有鏈接功能。因此導航條圖像需要由兩幅圖組成：一幅初始圖像，一幅替換圖像。在網頁中使用交互式圖像，可使網頁具有動態性與交互性。4.4 交互式導航圖像即學即用：創建變換導航條學習使用插入鼠標經過圖像功能制作變換導航條的方法。在Dreamweaver中，設置網頁背景有兩種方法：一種是設置背景顏色，另一種是設置背景圖像。4.5 設置網頁背景4.5.1 設置網頁背景顏色通過設置網頁背景顏色，可以使網頁看起來色彩感更強，頁面更加漂亮。設置網頁背景顏色的操作步驟如下。 如果覺得網頁中的背景顏色太過單一

4、，可以為網頁文檔設置背景圖像，設置網頁背景圖像的操作步驟如下。4.5.2 設置網頁背景圖像當把選擇好的外部圖片插入到Dreamweaver CC中時，可能這些圖片與網頁中其他元素不能很好地協調搭配。換句話說，就是不能美化網頁的整體效果，頁面看起來不是那么美觀。而Dreamweaver CC雖然在圖像屬性設置功能上有所加強，但它畢竟不是專門的圖像編輯軟件，這時就需要應用到外部圖像編輯器來對圖像的源文件進行處理。設置外部圖像編輯器的操作步驟如下。 4.6 設置外部圖像編輯器4.7 圖像映射 圖像映射是將圖像劃分為若干個區域，每個區域被稱為一個熱區，每個熱區分別設置不同的超級鏈接。在Dreamweaver CC中，熱區可以是不同的形狀，比如圓形、矩形、不規則多邊形等。 設置圖像映射的具體操作如下。即學即用：將圖像鏈接到不同網站學習使用圖像映射將圖像鏈接到不同網站的方法。4.8 章節小結 本章主要介紹了在網頁中插入圖像的知識，對交互式圖像和網頁的背景設置進行了詳細的講解。需要注意的是，在同一個網頁中不能同時設置網頁背景與網頁背景圖像。熟練掌握網頁圖像和圖像的設置，在以后的實際網頁制作中會有很大的幫助。4.9 課后習題4.9.1 課后練習：制作娛樂網站導航制作一個