第4章 設計豐富多彩的圖像和多媒體網頁

本章導讀

圖像是網頁上最常用的對象之一，制作精美的圖像可以大大增強網頁的視覺效果，令網頁更加生動多彩。在網頁中恰當地使用圖像，能夠極大地吸引瀏覽者的眼球。因此，利用好圖像，也是網頁設計的關鍵。本章主要介紹在網頁中插入圖像、網頁圖像的應用和網頁鏈接的創建等，通過本章的學習可以創建出精美的圖文混排網頁。利用Dreamweaver還可以迅速、方便地為網頁添加聲音和影片。可以插入和編輯多媒體對象，如Java Applet小程序、Flash影片、音樂文件、視頻對象等。

內容要點

◎ 熟悉網頁中圖像的常見格式

◎ 掌握插入圖像

◎ 掌握網頁圖像的應用

◎ 了解在網頁中插入聲音

◎ 掌握視頻的插入

◎ 掌握Flash的插入

◎ 插入Java Applet

◎ 了解網頁鏈接的創建

◎ 圖文混排網頁的創建

◎ 掌握創建網頁錨點鏈接

學習流程

4.1 在網頁中插入圖像

在網頁適當位置處放置一些圖像，比單純使用文字能夠使網頁更具有吸引力，這些圖像是文本的說明及解釋，不僅可以使文本清晰易讀，而且可以使文檔更具吸引力。

4.1.1 網頁中圖像的常見格式

網頁中圖像的格式通常有3種，即GIF、JPEG和PNG。目前GIF和JPEG文件格式的支持情況最好，大多數瀏覽器都可以查看它們。由于PNG文件具有較大的靈活性并且文件較小，所以它對于幾乎任何類型的網頁圖形都是最適合的。但是Microsoft Internet Explorer和Netscape Navigator只能部分支持PNG圖像的顯示。建議使用GIF或JPEG格式以滿足更多人的需求。

1.GIF

GIF是Graphic Interchange Format的縮寫，即圖像交換格式，文件最多使用256種顏色，最適合顯示色調不連續或具有大面積單一顏色的圖像，例如導航條、按鈕、圖標、徽標或其他具有統一色彩和色調的圖像。

GIF格式最大優點就是制作動態圖像，可以將數張靜態文件作為動畫幀串聯起來，轉換成一張動畫文件。

GIF格式的另一優點就是可以將圖像以交錯的方式在網頁中呈現。所謂交錯顯示，就是當圖像尚未下載完成時，瀏覽器會先以馬賽克的形式將圖像慢慢顯示，讓瀏覽者可以大略猜出下載圖像的雛形。

2.JPEG

JPEG是Joint Photographic Experts Group的縮寫，它是一種圖像壓縮格式，文件格式是用于攝影或連續色調圖像的高級格式，這是因為JPEG文件可以包含數百萬種顏色。隨著JPEG文件品質的提高，文件的大小和下載時間也會隨之增加。通常可以通過壓縮JPEG文件在圖像品質和文件大小之間達到良好的平衡。

3.PNG

PNG是英文單詞Portable Network Graphic的縮寫，即便攜網絡圖像，文件格式是一種替代GIF格式的無專利權限制的格式，它包括對索引色、灰度、真彩色圖像以及Alpha通道透明的支持。PNG是Fireworks固有的文件格式。PNG文件可保留所有原始層、矢量、顏色和效果信息，并且在任何時候所有元素都可以完全編輯。

4.1.2 上機練習——插入圖像

美觀的網頁是圖文并茂的，一幅幅圖像和一個個漂亮的按鈕、標記不但使網頁更加美觀、形象和生動，而且使網頁中的內容更加豐富多彩。可見，圖像在網頁中的作用是非常重要的。

在Dreamweaver中插入圖像的效果如圖4-1所示，具體操作步驟如下。

圖4-1 插入圖像的效果

CD-ROM/實例素材/練習文件/04/4.1.2/index.htm

CD-ROM/實例素材/完成文件/04/4.1.2/index1.htm

（1）打開網頁文檔，將光標置于要插入圖像的位置，如圖4-2所示。

圖4-2 打開網頁文檔

（2）執行“插入”|“圖像”命令，彈出“選擇圖像源文件”對話框，在對話框中選擇圖像文件，如圖4-3所示。

圖4-3 “選擇圖像源文件”對話框

（3）單擊“確定”按鈕，即可插入圖像，如圖4-4所示。

圖4-4 插入圖像

（4）執行“文件”|“保存”命令，保存文檔，在瀏覽器中預覽，效果如圖4-1所示。

4.1.3 上機練習——設置圖像屬性

在“屬性”面板中顯示出關于圖像的屬性設置，這時就可以根據需要設置圖像屬性，設置圖像屬性后的效果如圖4-5所示，具體操作步驟如下。

圖4-5 設置圖像屬性的效果

CD-ROM/實例素材/練習文件/04/4.1.3/index.htm

CD-ROM/實例素材/完成文件/04/4.1.3/index1.htm

（1）打開網頁文檔，選中圖像，如圖4-6所示。

圖4-6 打開網頁文檔

（2）執行“窗口”|“屬性”命令，打開“屬性”面板，將“對齊”設置為“右對齊”，如圖4-7所示。

（3）在面板中將“垂直邊距”和“水平邊距”分別設置為“5”，如圖4-8所示。

圖4-7 設置圖像的對齊方式

圖4-8 設置圖像的“垂直邊距”和“水平邊距”

（4）在“邊框”文本框中輸入“1”，如圖4-9所示。

圖4-9 設置邊框

（5）保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖4-5所示。

圖像的“屬性”面板中主要有以下參數。

● 圖像：設置圖像的名稱。

● 寬和高：以像素為單位設定圖像的寬度和高度。

● 源文件：指定圖像的具體路徑。單擊按鈕選擇源文件或直接輸入。

● 鏈接：為圖像設置超級鏈接。可以單擊按鈕選擇要鏈接的文件，或者直接輸入URL路徑。

● 目標：鏈接時的目標窗口或框架。在其下拉列表中包括以下4個選項。

blank：將鏈接的對象在一個未命名的新瀏覽器窗口中打開。

parent：將鏈接的對象在含有該鏈接的框架的父框架集或父窗口中打開。

self：將鏈接的對象在該鏈接所在的同一框架或窗口中打開。_self是默認選項，通常不需要指定它。

top：將鏈接的對象在整個瀏覽器窗口中打開，因而會替代所有框架。

● 替換：圖片的注釋。當瀏覽器不能正常顯示圖像時，便在圖像的位置用這個注釋代替圖像。

● 編輯：啟動“外部編輯器”首選參數中指定的圖像編輯器并使用該圖像編輯器打開選定的圖像。

● 地圖：名稱和“熱點工具”標注和創建客戶端圖像地圖。

● 垂直邊距：圖像在垂直方向與文本域或其他頁面元素的間距。

● 水平邊距：圖像在水平方向與文本域或其他頁面元素的間距。

● 原始：指定在載入主圖像之前應該載入的圖像。

● 邊框：以像素為單位的圖像邊框的寬度。默認為無邊框。

● 對齊：設置圖像的對齊方式。

4.1.4 上機練習——插入圖像占位符

有時候沒有已制作好的圖片，而根據頁面布局的需要，要在網頁中插入一幅圖片，這時可以使用占位符來代替圖片位置。插入圖像占位符的效果如圖4-10所示，具體操作步驟如下。

CD-ROM/實例素材/練習文件/04/4.1.4/index.htm

CD-ROM/實例素材/完成文件/04/4.1.4/index1.htm

圖4-10 插入圖像占位符的效果

（1）打開網頁文檔，將光標放置在要插入圖像占位符的位置，如圖4-11所示。

圖4-11 打開網頁文檔

（2）執行“插入”|“圖像對象”|“圖像占位符”命令，彈出“圖像占位符”對話框，在對話框中進行相應的設置，如圖4-12所示。

（3）單擊“確定”按鈕，插入圖像占位符，如圖4-13所示。

圖4-12 “圖像占位符”對話框

圖4-13 插入圖像占位符

（4）保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖4-10所示。

4.2 網頁圖像的應用

在網頁中不僅可以插入圖像，還可以插入鼠標經過圖像等，下面具體講解。

4.2.1 上機練習——鼠標經過圖像

鼠標經過圖像就是當鼠標經過圖像時，原圖像會變成另外一張圖像。鼠標經過圖像其實是由兩張圖像組成的：原始圖像（頁面顯示時候的圖像）和鼠標經過圖像（當鼠標經過時顯示的圖像）。組成鼠標經過圖像的兩張圖像必須有相同的大小；如果兩張圖像的大小不同，Dreamweaver CS5會自動將第二張圖像大小調整成與第一張圖像同樣大小。

下面講解如何插入鼠標經過圖像，在網頁中插入鼠標經過圖像前的效果如圖4-14所示，鼠標經過圖像時的效果如圖4-15所示，具體操作步驟如下。

圖4-14 鼠標經過圖像的前的效果

圖4-15 鼠標經過圖像時的效果

CD-ROM/實例素材/練習文件/04/4.2.1/index.htm

CD-ROM/實例素材/完成文件/04/4.2.1/index1.htm

（1）打開網頁文檔，如圖4-16所示。

（2）執行“插入”|“圖像對象”|“鼠標經過圖像”命令，彈出“插入鼠標經過圖像”對話框，如圖4-17所示。

圖4-16 打開網頁文檔

圖4-17 “插入鼠標經過圖像”對話框

（3）在對話框中單擊“原始圖像”文本框右側的“瀏覽”按鈕，彈出“原始圖像”對話框，在對話框中選擇圖像文件，如圖4-18所示。

（4）單擊“確定”按鈕，添加原始圖像。單擊“鼠標經過圖像”文本框右側的“瀏覽”按鈕，在彈出的“鼠標經過圖像”對話框中選擇圖像文件，如圖4-19所示。

圖4-18 “原始文件”對話框

圖4-19 “鼠標經過圖像”對話框

（5）單擊“確定”按鈕，添加鼠標經過圖像，如圖4-20所示。

在“插入鼠標經過圖像”對話框中主要設置以下參數。

圖4-20 添加圖像

● 在“圖像名稱”文本框中，輸入名稱。

● 在“原始圖像”文本框中，單擊“瀏覽”按鈕選擇圖像源文件或直接輸入圖像路徑。

● 在“鼠標經過圖像”文本框中，單擊“瀏覽”按鈕選擇圖像文件或直接輸入圖像路徑設置鼠標經過時顯示的圖像。

● 勾選“預載鼠標經過圖像”復選框，讓圖像預先加載到瀏覽器的緩存中使圖像顯示速度快一點。

● 在“按下時，前往的URL”文本框中，單擊“瀏覽”按鈕選擇文件或者直接輸入當單擊鼠標經過圖像時打開的文件路徑。如果沒有設置鏈接，Dreamweaver CS5會自動在HTML代碼中為鼠標經過圖像加上一個空鏈接（#）。如果將這個空鏈接除去，鼠標經過圖像將無法工作。

（6）單擊“確定”按鈕，插入鼠標經過圖像。選中圖像，在“屬性”面板中將“對齊”設置為“右對齊”，效果如圖4-21所示。

（7）保存文檔，按【F12】鍵在瀏覽器中瀏覽效果，當鼠標經過圖像前的效果如圖4-14 所示和鼠標經過圖像時的效果如圖4-15所示。

圖4-21 插入鼠標經過圖像

4.2.2 上機練習——網頁背景漸變效果

實現網頁背景漸變的具體操作步驟如下。用一張漸變背景圖作為漸變背景的效果如圖4-22所示。

CD-ROM/實例素材/練習文件/04/4.2.2/index.htm

CD-ROM/實例素材/完成文件/04/4.2.2/index1.htm

圖4-22 漸變背景圖作漸變背景的效果

（1）打開網頁文檔，如圖4-23所示。

（2）執行“修改”|“頁面屬性”命令，彈出“頁面屬性”對話框，如圖4-24所示。

圖4-23 打開網頁文檔

圖4-24 “頁面屬性”對話框

（3）在對話框中單擊“背景圖像”文本框右側的“瀏覽”按鈕，彈出“選擇圖像源文件”對話框，在對話框中選擇相應的漸變背景圖像，如圖4-25所示。

（4）單擊“確定”按鈕，添加背景圖像文件，如圖4-26所示。

圖4-25 “選擇圖像源文件”對話框

圖4-26 添加背景圖像文件

（5）單擊“確定”按鈕，插入漸變背景圖像，如圖4-27所示。

圖4-27 插入漸變背景圖像

（6）保存文件，在瀏覽器中預覽，效果如圖4-22所示。

4.3 插入聲音

聲音文件由很多種，目前在網頁中運用的音樂文件主要是MP3、MID、WMA格式，在網頁中對音樂文件的應用一般有3 種方式背景音樂、音樂連接和音樂嵌入。

4.3.1 關于音頻文件格式

.midi或 .mid（樂器數字接口）格式用于器樂。許多瀏覽器都支持MIDI文件并且不要求插件。盡管其聲音品質非常好，但根據訪問者聲卡的不同，聲音效果也會有所不同。很小的MIDI文件也可以提供較長時間的聲音剪輯。MIDI文件不能被錄制并且必須使用特殊的硬件和軟件在計算機上合成。

.wav（Waveform擴展名）格式文件具有較好的聲音品質，許多瀏覽器都支持此類格式文件并且不要求插件。可以從CD、磁帶、麥克風等錄制你自己的WAV文件。但是，其較大的文件大小嚴格限制了可以在Web頁面上使用的聲音剪輯的長度。

.aif（音頻交換文件格式，即AIFF）格式與WAV格式類似，也具有較好的聲音品質，大多數瀏覽器都可以播放它并且不要求插件；還可以從CD、磁帶、麥克風等錄制AIFF文件。但是，其較大的文件大小嚴格限制了可以在Web頁面上使用的聲音剪輯的長度。

.mp3（運動圖像專家組音頻，即MPEG-音頻層-3）格式是一種壓縮格式，它可令聲音文件明顯縮小，其聲音品質也非常好，如果正確錄制和壓縮MP3文件，其質量甚至可以和CD質量相媲美。這一新技術可以對文件進行“流式處理”，以便訪問者不必等待整個文件下載完成即可收聽該文件。但是，其文件大小要大于Real Audio文件，因此通過普通電話線連接下載整首歌曲可能仍要花較長的時間。若要播放MP3文件，訪問者必須下載并安裝輔助應用程序或插件，例如QuickTime、Windows Media Player或RealPlayer等。

.ra、.ram、.rpm或Real Audio格式具有非常高的壓縮程度，文件大小要小于MP3。全部歌曲文件可以在合理的時間范圍內下載。因為可以在普通的Web服務器上對這些文件進行“流式處理”，所以訪問者在文件完全下載完之前即可聽到聲音。其聲音品質比MP3文件聲音品質要差，但新推出的播放器和編碼器在聲音品質方面已有顯著改善。訪問者必須下載并安裝RealPlayer輔助應用程序或插件才可以播放這些文件。

4.3.2 上機練習——添加背景音樂

通過代碼提示，可以在代碼視圖中插入代碼。在輸入某些字符時，將顯示一個列表，列出完成條目所需要的選項。下面通過代碼提示講解背景音樂的插入，效果如圖4-28所示，具體操作步驟如下。

圖4-28 使用代碼提示添加背景音樂的效果

CD-ROM/實例素材/練習文件/04/4.3.2/index.htm

CD-ROM/實例素材/完成文件/04/4.3.2/index1.htm

（1）在使用代碼之前，首先執行“編輯”|“首選參數”命令，彈出“首選參數”對話框，在“分類”列表框中選擇“代碼提示”選項，將“首選參數”對話框中的所有復選框選中，并將“延遲”選項右側的指針移動至最左端，設置為“0”秒，如圖4-29所示。

（2）打開網頁文檔，如圖4-30所示。

圖4-29 “首選參數”對話框

圖4-30 打開網頁文檔

（3）切換到拆分視圖，在代碼視圖中找到標簽<body>，并在其后面輸入“<”以顯示標簽列表，輸入“<”時會自動彈出一個下拉列表框，雙擊標簽bgsound以插入該標簽，如圖4-31所示。

圖4-31 插入bgsound標簽

（4）如果該標簽支持屬性，則按空格鍵以顯示該標簽允許的屬性列表，從中選擇屬性“src”，如圖4-32所示。這個屬性用來設置背景音樂文件的路徑。

（5）雙擊出現的“瀏覽”字樣，彈出“選擇文件”對話框，從對話框中選擇音樂文件，如圖4-33所示。選擇音樂文件后，單擊“確定”按鈕。

圖4-32 在代碼視圖中選擇屬性“src”

圖4-33 “選擇文件”對話框

（6）在新插入的代碼后按空格鍵，在屬性列表中選擇屬性“loop”，如圖4-34所示。

圖4-34 在代碼視圖中選擇屬性“loop”

（7）單擊選中loop，出現“-1”并選中。在最后的屬性值后，為該標簽輸入“>”，如圖4-35所示。

圖4-35 代碼中的聲音標簽

（8）保存文檔，按【F12】鍵在瀏覽器中預覽，即可聽到音樂。

4.4 插入視頻

在Dreamweaver中能夠輕松地在網頁中插入Flash視頻，無須使用Flash創作工具。Dreamweaver插入Flash視頻組件，在瀏覽器中查看該組件時，它將顯示選擇的Flash視頻內容及一組播放控件。

4.4.1 視頻的文件格式

如果經常上網，一定見到過Real Audio或Real Video，這是Internet上的一種多媒體文件。Real是一種高壓縮率的數據流，可以在Internet上實時播放帶聲音和動態圖像的Real文件，就像在看電影一樣。這種文件格式現在己經在Internet上廣泛使用了。可以用制作Real文件的工具把WAV、AVI、MOV、QT、AU等文件壓縮成Real特有的RM文件。

可以通過不同的方式和使用不同格式將視頻添加到Web頁中。視頻可以被用戶下載，或者可以對視頻進行視頻流式處理以便在下載它的同時播放。Web上用于視頻文件傳輸的最常見流式處理格式有RealMedia、QuickTime和Windows Media。必須下載輔助幫助應用程序以查看這些格式。使用這些格式，可同時對音頻和視頻進行流式處理。

如果想包括可被下載而不是流式處理簡短的剪輯，則可以鏈接到該剪輯或將該剪輯嵌入到頁面中。這些剪輯通常采用AVI或MPEG文件格式。

4.4.2 上機練習——在網頁中插入視頻

插入Flash視頻的效果如圖4-36所示，具體操作步驟如下。

圖4-36 插入Flash視頻的效果

CD-ROM/實例素材/練習文件/04/4.4.2/index.htm

CD-ROM/實例素材/完成文件/04/4.4.2/index1.htm

（1）打開網頁文檔，如圖4-37所示。

圖4-37 打開網頁文檔

（2）將光標置于插入視頻文件的位置，執行“插入”|“媒體”|“Flash視頻”命令，彈出“插入FLV”對話框，如圖4-38所示。

（3）在對話框中單擊“瀏覽”按鈕，彈出“選擇FLV”對話框，在對話框中選擇視頻文件“shipin.flv”，如圖4-39所示。

圖4-38 “插入FLV”對話框

圖4-39 “選擇FLV”對話框

（4）單擊“確定”按鈕，添加視頻文件，如圖4-40所示。

（5）單擊“確定”按鈕，插入視頻文件，如圖4-41所示。

圖4-40 添加視頻文件

圖4-41 插入視頻文件

（6）保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖4-36所示。

4.5 插入其他媒體文件

在網頁中插入Flash影片、Java Applet等，可以增加網頁的動感性，使網頁更具吸引力，因此多媒體元素在網頁中應用越來越廣泛。

4.5.1 上機練習——插入Flash

Flash影片是在專門的Flash軟件中完成的，在Dreamweaver CS5中能將現有的Flash動畫插入到文檔中。

在網頁中插入Flash影片，下面通過圖4-42所示的效果講解網頁中Flash影片的插入，具體操作步驟如下。

圖4-42 插入Flash影片的效果

CD-ROM/實例素材/練習文件/04/4.5.1/index.htm

CD-ROM/實例素材/完成文件/04/4.5.1/index1.htm

（1）打開網頁文檔，如圖4-43所示。

圖4-43 打開網頁文檔

（2）將光標置于要插入Flash影片的位置，執行“插入”|“媒體”|“Flash”命令，彈出“選擇SWF”對話框，在對話框中選擇Flash，如圖4-44所示。

（3）單擊“確定”按鈕，插入Flash，選中插入的Flash，打開Flash的“屬性”面板，如圖4-45所示。

圖4-44 “選擇SWF”對話框

圖4-45 插入Flash

Flash的“屬性”面板中可以進行如下設置。

● 名稱：用來標識影片的名稱。

● 寬和高：以像素為單位設置影片的寬和高。

● 文件：指定Flash文件的路徑。單擊按鈕以瀏覽某一文件，或直接在文本框中輸入文件的路徑。

● 源文件：指向Flash源文檔的路徑。

● 循環：勾選該復選框，動畫將在瀏覽器端循環播放。

● 自動播放：勾選該復選框，則文檔被瀏覽器載入時，自動播放Flash動畫。

● 垂直邊距和水平邊距：指定影片上、下、左、右空白的像素數。

● 品質：在影片播放期間控制失真。設置越高，影片的觀看效果就越好，但要求更快的處理器以使影片在屏幕上正確顯示。

● 比例：用來設置顯示比例，有“默認（全部顯示）”、“無邊框”和“嚴格匹配”3個選項。

● 對齊：設置Flash影片的對齊方式。

● 背景顏色：為當前Flash動畫設置背景顏色

● 編輯：用于自動打開Flash軟件對源文件進行處理。

● 播放：用于在設計視圖中播放Flash動畫。

● 參數：單擊該按鈕，在彈出的對話框中輸入能使該Flash順利運行的附加參數。

（4）保存文檔，按【F12】鍵在瀏覽器中瀏覽效果，如圖4-42所示。

4.5.2 上機練習——插入Java Applet

Java是一款允許開發、可以嵌入Web頁面的輕量級應用程序（小程序）的編程語言。在創建Java小程序后，可以使用Dreamweaver將該程序插入到HTML文檔中，Dreamweaver使用<applet>標簽來標識對小程序文件的引用。

插入Java Applet影片的效果如圖4-46所示，具體操作步驟如下。

圖4-46 插入Java Applet影片的效果

CD-ROM/實例素材/練習文件/04/4.5.2/index.htm

CD-ROM/實例素材/完成文件/04/4.5.2/index1.htm

（1）打開網頁文檔，如圖4-47所示。

圖4-47 打開網頁文檔

（2）將光標置于要插入Applet影片的位置，執行“插入”|“媒體”|“Applet”命令，彈出“選擇文件”對話框，在對話框中選擇相應的文件，如圖4-48所示。

（3）單擊“確定”按鈕，插入Applet影片，如圖4-49所示。

圖4-48 “選擇文件”對話框

圖4-49 插入Applet影片

Java Applet“屬性”面板中可以進行如下設置。

● 寬和高：設置Java Applet的寬度和高度，可以輸入數值，單位是像素。

● 代碼：設置程序的Java Applet路徑。

● 基址：指定包含這個程序的文件夾。

● 對齊：設置程序的對齊方式。

● 替代：設置當程序無法顯示時，將顯示的替換圖像。

● 垂直邊距：設置程序上方及上方其他頁面元素，程序下方及下方其他頁面元素的距離。

● 水平邊距：設置程序左側及左側其他頁面元素，程序右側及右側其他頁面元素的距離。

（4）打開代碼視圖，在代碼視圖中修改代碼，如圖4-50所示。

圖4-50 修改代碼

    <applet code="Lake.class" width="250" height="220" align="right"><PARAM NAME=
"image" VALUE="mihoutao.jpg">
    // mihoutao.jpg換為你的圖像名
    </applet>

（5）保存文檔，按【F12】鍵在瀏覽器中瀏覽效果，如圖4-46所示。

4.6 網頁鏈接的創建

網站就是由若干個網頁組成的，這些網頁之間就是通過超鏈接的方式鏈接起來的，在Dreamweaver中，利用超鏈接不僅可以進行網頁之間的相互鏈接，還可以使網頁鏈接到相關的圖像文件、多媒體文件及下載程序等。

4.6.1 網頁鏈接的基本類型

鏈接即網頁的橋梁。通過鏈接，可以從當前網頁跳轉到站點中另外一頁，或從當前站點跳轉到網絡上另外一個站點。有了鏈接，才使得網頁、網站、網絡成為一個有機體。在網頁中制作超鏈接的方法很多，幾乎每個網頁元素都能創建鏈接。

● 圖像熱點鏈接：一般一張圖像只能鏈接一個文件路徑。如果在該圖像的不同區域建立不同的鏈接，這個時候就會應用到“圖像熱點鏈接”了。圖像熱點鏈接可以用在地圖對區域的鏈接介紹、人體圖對肢體的鏈接介紹，以及在制作的一張整圖中進行各部分鏈接的導航等。

● 錨記鏈接：通過錨記鏈接，可以迅速在一個頁面中尋找已定義的某內容。

● 電子郵件鏈接：在網頁中單擊電子郵件鏈接時，網頁瀏覽器會自動調用Microsoft Outlook郵件程序，使用該程序可以進行郵件的即時發送。

● 空鏈接很多時，在網頁中需要一種超級鏈接的樣式效果，但不需要其鏈接跳轉到任何其他頁面或者站點。此時，空鏈接無疑是最合適的。空鏈接指向的被鏈接文件是文件本身。

● 下拉菜單鏈接：多個超級鏈接使用一個下拉菜單，單擊菜單選擇其中的鏈接文本即可打開對應的超級鏈接，多應用在超級鏈接較多、超級鏈接分類的頁面中。

● 框架網頁鏈接：主要應用在框架結構的網頁中，在效果方面的顯示是這樣的一個頁面，在某塊區域為頁面的鏈接導航，某塊區域為內容的顯示，單擊不同的超級鏈接，該區域顯示不同的信息內容。

4.6.2 上機練習——圖像熱點鏈接

當需要對一張圖像的特定部位進行鏈接時就用到了熱區鏈接，當用戶單擊某個熱點時，會鏈接到相應的網頁，矩形主要針對圖像輪廓較規則，且呈方形的圖像；橢圓形主要針對圓形規則的輪廓；不規則多邊形則針對復雜的輪廓外形，在這里以矩形為例介紹熱區鏈接的創建，在創建過程中，首先選中圖像，然后在“屬性”面板中選擇熱點工具在圖像上繪制熱區。

在網頁中創建圖像熱點鏈接方法非常簡單，下面講解網頁中圖像熱點鏈接，效果如圖4-51所示，具體操作步驟如下。

圖4-51 圖像的熱點鏈接效果

CD-ROM/實例素材/練習文件/04/4.6.2/index.htm

CD-ROM/實例素材/完成文件/04/4.6.2/index1.htm

（1）打開網頁文檔，如圖4-52所示。

圖4-52 打開網頁文檔

（2）選中圖像，打開“屬性”面板，在“屬性”面板中選擇矩形熱點工具，如圖4-53所示。

圖4-53 選擇矩形熱點工具

（3）將光標置于圖像“首頁”上，繪制一個矩形熱點，在“屬性”面板中的“鏈接”文本框中輸入鏈接的文件，如圖4-54所示。

圖4-54 繪制熱區

在“熱點”的“屬性”面板中主要有以下設置參數。

● 鏈接：輸入相應的鏈接地址。

● 替換：填寫了說明文字以后，光標移到熱點就會顯示相應的說明文字。

● 目標：不進行選擇則默認在瀏覽器窗口打開。

（4）使用同樣的方法繪制其他的熱點鏈接，如圖4-55所示。

（5）保存網頁文檔，在瀏覽器中預覽效果，如圖4-51所示。

圖4-55 繪制其他的熱點鏈接

4.6.3 上機練習——E-mail鏈接

電子郵件地址作為超鏈接的鏈接目標與其他鏈接目標不同。當用戶在瀏覽器上單擊指向電子郵件地址的超鏈接時，將會打開默認的郵件管理器的新郵件窗口，其中會提示用戶輸入信息并將該信息傳送給指定的E-mail地址。在網頁中創建E-mail鏈接的效果如圖4-56所示。

圖4-56 E-mail鏈接的效果

CD-ROM/實例素材/練習文件/04/4.6.3/index.htm

CD-ROM/實例素材/完成文件/04/4.6.3/index1.htm

（1）打開網頁文檔，如圖4-57所示。

圖4-57 打開網頁文檔

（2）將光標放置在要插入E-mail鏈接的位置，執行“插入”|“電子郵件鏈接”命令，彈出“電子郵件鏈接”對話框，在該對話框的“文本”文本框中輸入“聯系我們”，在“電子郵件”文本框中輸入“mailto：sdhzmdq@163.com”，如圖4-58所示。

（3）單擊“確定”按鈕，插入E-mail鏈接，如圖4-59所示。

圖4-58 “電子郵件鏈接”對話框

圖4-59 插入E-mail鏈接

（4）保存網頁文檔，在瀏覽器中瀏覽時單擊“聯系我們”文字鏈接，效果如圖4-56所示。

4.6.4 上機練習——下載文件鏈接

如果要在網站中提供下載資料，就需要為文件提供下載鏈接，如果超級鏈接指向的不是一個網頁文件，而是其他文件例如ZIP、MP3、EXE文件等，單擊鏈接的時候就會下載文件。

在網頁中添加下載文件的鏈接的方法非常簡單，下面通過圖4-60所示的效果講解網頁中添加下載文件的鏈接，具體操作步驟如下。

圖4-60 下載文件鏈接的效果

CD-ROM/實例素材/練習文件/04/4.6.4/index.htm

CD-ROM/實例素材/完成文件/04/4.6.4/index1.htm

（1）打開網頁文檔，如圖4-61所示。

圖4-61 打開網頁文檔

（2）選中要創建鏈接的文字，在“屬性”面板中單擊“鏈接”文本框右邊的瀏覽文件按鈕，彈出“選擇文件”對話框，選擇要下載的文件，如圖4-62所示。

（3）單擊“確定”按鈕，將文件鏈接到“屬性”面板的“鏈接”文本框中，如圖4-63所示。

圖4-62 “選擇文件”對話框

圖4-63 添加鏈接文件

（4）保存文檔，按【F12】鍵預覽，單擊“文件下載”文字鏈接，效果如圖4-60所示。

4.6.5 上機練習——錨點鏈接

在制作網頁時，有些頁面內容較多，頁面就可能變長。為了方便瀏覽，可以在頁面的底部增加返回到頂部的鏈接。在網頁中創建錨點鏈接的效果如圖4-64所示。

圖4-64 錨點鏈接的效果

CD-ROM/實例素材/練習文件/04/4.6.5/index.htm

CD-ROM/實例素材/完成文件/04/4.6.5/index1.htm

（1）打開網頁文檔，如圖4-65所示。

圖4-65 打開網頁文檔

（2）將光標置于文字“公司介紹”的前面執行“插入”|“命名錨記”命令，彈出“命名錨記”對話框，在對話框中的“錨記名稱”文本框中輸入“jianjie”，如圖4-66所示。

（3）單擊“確定”按鈕，插入命名錨記jianjie，如圖4-67所示。

圖4-66 “命名錨記”對話框

圖4-67 插入命名錨記

（4）選中文字“公司簡介”，在“屬性”面板中的“鏈接”文本框中輸入“#jianjie”，如圖4-68所示。

圖4-68 輸入鏈接

（5）同理插入其他的命名錨記，并設置鏈接，如圖4-69所示。

圖4-69 插入其他的命名錨記

（6）保存文檔，按“F12”鍵在瀏覽器中預覽，效果如圖4-64所示。

4.6.6 上機練習——腳本鏈接

腳本鏈接是一種特殊的鏈接，訪問者單擊這類鏈接可以執行相應的JavaScript程序。在網頁中創建腳本鏈接的效果如圖4-70所示。

CD-ROM/實例素材/練習文件/04/4.6.6/index.htm

CD-ROM/實例素材/完成文件/04/4.6.6/index1.htm

（1）打開網頁文檔，如圖4-71所示。

圖4-70 腳本鏈接的效果

圖4-71 打開網頁文檔

（2）選中文本“關閉網頁”，在“屬性”面板中的“鏈接”文本框中輸入腳本“javascript:window.close()”，如圖4-72所示。

圖4-72 腳本鏈接

（3）保存文檔，按【F12】鍵在瀏覽器中預覽，單擊腳本鏈接的效果如圖4-70所示。

4.6.7 上機練習——空鏈接

在網頁中為了保持頁面文本效果的統一或者給一些文本或圖像應用行為，就需要創建一些空鏈接。在網頁中創建空鏈接的方法非常簡單，打開網頁文檔，選中文本，打開“屬性”面板，在“屬性”面板中的“鏈接”文本框中輸入“#”，進行空鏈接，如圖4-73所示。

圖4-73 進行空鏈接

4.7 實例精講

在網頁中添加精美的圖像可以使網頁更吸引人，而且能夠使它表達出很多文字難以說明的意思。在設計和處理網頁圖像時就要求圖像有盡可能高的清晰度與盡可能小的尺寸，從而保證圖像的質量。

實例1——圖文混排網頁

圖文混排恰當的網頁總是讓人得到視覺上的享受，作為一名網頁設計者，掌握好網頁圖像和文本的運用就顯得尤為重要。下面就通過具體的實例來講述網頁中圖像和文本的排版。

圖文混排網頁的最終效果如圖4-74所示。

CD-ROM/實例素材/練習文件/04/綜合實例1/index.htm

CD-ROM/實例素材/完成文件/04/綜合實例1/index1.htm

圖4-74 圖文混排效果

（1）打開網頁文檔，如圖4-75所示。

圖4-75 打開網頁文檔

（2）將光標置于要輸入文字的位置，輸入文字，如圖4-76所示。

圖4-76 輸入文字

（3）選中輸入文字的，在“屬性”面板中單擊“大小”下拉列表，彈出“新建CSS規則”對話框，在“選擇器名稱”中輸入名稱，如圖4-77所示。

（4）單擊“確定”按鈕，設置字體大小為12，如圖4-78所示。

圖4-77 設置文字的屬性

圖4-78 設置字體大小

（5）單擊“顏色”按鈕，在彈出的顏色列表中選擇要設置字體的顏色，如圖4-79所示。

（6）將光標置于文字中，執行“插入”|“圖像”命令，彈出“選擇圖像源文件”對話框，在對話框中選擇相應的圖像文件，如圖4-80所示。

圖4-79 設置字體顏色

圖4-80 “選擇圖像源文件”對話框

（7）單擊“確定”按鈕，插入圖像，如圖4-81 所示。保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖4-74所示。

圖4-81 插入圖像

實例2——創建網頁錨點鏈接

在制作網頁時，有些頁面內容較多，頁面就可能變長。為了方便瀏覽，可以在頁面的底部增加返回到頂部的鏈接。在網頁中創建錨點鏈接的效果如圖4-82所示。

圖4-82 錨點鏈接的效果

CD-ROM/實例素材/練習文件/04/綜合實例2/index.htm

CD-ROM/實例素材/完成文件/04/綜合實例2/index1.htm

（1）打開網頁文檔，如圖4-83所示。

圖4-83 打開網頁文檔

（2）將光標置于文字“公司介紹”的前面，執行“插入”|“命名錨記”命令，彈出“命名錨記”對話框，在“錨記名稱”文本框中輸入“jieshao”，如圖4-84所示。

圖4-84 “命名錨記”對話框

（3）單擊“確定”按鈕，插入命名錨記jieshao，如圖4-85所示。

圖4-85 插入命名錨記jieshao

（4）選中文字“公司介紹”，在“屬性”面板中的“鏈接”文本框中輸入“#jieshao”，如圖4-86所示。

圖4-86 輸入鏈接

（5）將光標置于文字“大記事”的前面，執行“插入”|“命名錨記”命令，彈出“命名錨記”對話框，在“錨記名稱”文本框中輸入“dajishi”，如圖4-87所示。

圖4-87 “命名錨記”對話框

（6）單擊“確定”按鈕，插入命名錨記，如圖4-88所示。

圖4-88 插入命名錨記

（7）選中文字“大記事”，在“屬性”面板中的“鏈接”文本框中輸入“#dajishi”，如圖4-89所示。

圖4-89 輸入鏈接

（8）將光標置于文字“企業文化”的前面，執行“插入”|“命名錨記”命令，彈出“命名錨記”對話框，在“錨記名稱”文本框中輸入“qiyewenhua”，如圖4-90所示。

圖4-90 “命名錨記”對話框

（9）單擊“確定”按鈕，插入命名錨記，如圖4-91所示。

圖4-91 插入命名錨記

（10）選中文字“企業文化”，在“屬性”面板中的“鏈接”文本框中輸入“#qiyewenhua”，如圖4-92所示。

圖4-92 輸入鏈接

（11）將光標置于文字“公司榮譽”的前面，執行“插入”|“命名錨記”命令，彈出“命名錨記”對話框，在“錨記名稱”文本框中輸入“gongsirongyu”，如圖4-93所示。

圖4-93 “命名錨記”對話框

（12）單擊“確定”按鈕，插入命名錨記，如圖4-94所示。

（13）選中文字“公司榮譽”，在“屬性”面板中的“鏈接”文本框中輸入“#gongsirongyu”，如圖4-95所示。

圖4-94 插入命名錨記

圖4-95 輸入鏈接

（14）保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖4-82所示。