第六講圖像——網(wǎng)頁制作

1、1第6章 圖 像6.1 圖像文件格式圖像文件格式6.2 在文檔中插入圖像在文檔中插入圖像6.3 創(chuàng)建翻轉(zhuǎn)圖像創(chuàng)建翻轉(zhuǎn)圖像6.4 建立圖像導(dǎo)航條建立圖像導(dǎo)航條6.5 建立圖像映像建立圖像映像思考與練習(xí)思考與練習(xí)26.1 圖像文件格式6.1.1圖像格式圖像格式1.JPG/JPEG 圖像圖像JPG/JPEG（joint photographic experts group，聯(lián)合圖像專家組）圖像是一種壓縮格式的圖像，聯(lián)合圖像專家組）圖像是一種壓縮格式的圖像，文件擴(kuò)展名為文件擴(kuò)展名為jpg或或jpeg,它采用有損壓縮算法，在它采用有損壓縮算法，在損失了原圖像中不易為人眼察覺部分的情況下，損失了原圖像中不

2、易為人眼察覺部分的情況下，獲得較小的文件，從而減少下載時(shí)間。獲得較小的文件，從而減少下載時(shí)間。JPG/JPEG圖像的另一特點(diǎn)是它支持圖像的另一特點(diǎn)是它支持24位真彩色。所以在網(wǎng)位真彩色。所以在網(wǎng)頁中，如果要顯示的圖像特別重視色彩，則可以頁中，如果要顯示的圖像特別重視色彩，則可以使用使用JPG/JPEG 類型的圖像。類型的圖像。32.GIF圖像圖像GIF（graphics interchange format，圖像交換格式）圖圖像交換格式）圖像采用無損壓縮格式，因此，原始圖像是什么樣子，壓像采用無損壓縮格式，因此，原始圖像是什么樣子，壓縮后的縮后的GIF圖像也是什么樣子。但是圖像也是什么樣子。但

3、是GIF有一個(gè)致命的弱有一個(gè)致命的弱點(diǎn)，就是它僅支持點(diǎn)，就是它僅支持8位的顏色（位的顏色（256色），適用于顯示卡色），適用于顯示卡通等對(duì)色彩數(shù)目要求不高的地方。通等對(duì)色彩數(shù)目要求不高的地方。GIF圖像之所以在網(wǎng)圖像之所以在網(wǎng)絡(luò)上流行的原因之一是它支持動(dòng)畫格式，網(wǎng)頁中的動(dòng)畫絡(luò)上流行的原因之一是它支持動(dòng)畫格式，網(wǎng)頁中的動(dòng)畫圖像、交錯(cuò)圖像、透明圖像都是圖像、交錯(cuò)圖像、透明圖像都是GIF格式，這是格式，這是JPG/JPEG圖像做不到的。圖像做不到的。3.PNG圖像圖像PNG（portable network graphic，便攜網(wǎng)絡(luò)圖像）圖像便攜網(wǎng)絡(luò)圖像）圖像由于受到由于受到W3C（World Wi

4、de Web Consortium）組織組織的大力推薦，目前已經(jīng)在網(wǎng)絡(luò)上逐漸推廣。它既可以采的大力推薦，目前已經(jīng)在網(wǎng)絡(luò)上逐漸推廣。它既可以采用無損壓縮算法，又可以采用有損壓縮算法，以期在質(zhì)用無損壓縮算法，又可以采用有損壓縮算法，以期在質(zhì)量與文件大小之間找到最好的平衡，同時(shí)又支持真彩色。量與文件大小之間找到最好的平衡，同時(shí)又支持真彩色。目前較高版本的瀏覽器，都支持目前較高版本的瀏覽器，都支持PNG 格式的圖像。格式的圖像。 46.1.2 動(dòng)畫格式動(dòng)畫格式目前目前Internet上的動(dòng)畫主要有上的動(dòng)畫主要有GIF動(dòng)畫和動(dòng)畫和Flash動(dòng)畫。動(dòng)畫。GIF動(dòng)畫文件小，瀏覽方便，不需任何插件，與普動(dòng)畫文

5、件小，瀏覽方便，不需任何插件，與普通圖像的使用相同，因此廣泛應(yīng)用于網(wǎng)頁中的廣告通圖像的使用相同，因此廣泛應(yīng)用于網(wǎng)頁中的廣告條。條。Flash動(dòng)畫功能強(qiáng)大，可以有復(fù)雜的動(dòng)作，還動(dòng)畫功能強(qiáng)大，可以有復(fù)雜的動(dòng)作，還可以交互操作，但文件相對(duì)較大，故播放可以交互操作，但文件相對(duì)較大，故播放Flash動(dòng)動(dòng)畫需要相應(yīng)的插件。畫需要相應(yīng)的插件。56.2 在文檔中插入圖像6.2.1 插入圖像插入圖像【例【例6.1】在頁面中插入圖像】在頁面中插入圖像 將插入點(diǎn)放到文檔中需要插入圖像的位置。將插入點(diǎn)放到文檔中需要插入圖像的位置。 執(zhí)行執(zhí)行Insert|Images(插入插入|圖像圖像)命令，或單擊命令，或單擊Com

6、mon(普通）對(duì)象面板上的普通）對(duì)象面板上的Insert Image(插入插入圖像圖像)按鈕，打開按鈕，打開Select Image Source(選擇圖像選擇圖像來源來源)對(duì)話框（見圖對(duì)話框（見圖6.1），可以從磁盤上選擇圖像），可以從磁盤上選擇圖像文件。文件。6圖圖6.17 選擇需要的文件。在選擇需要的文件。在URL文本框中，顯示當(dāng)前選中文件文本框中，顯示當(dāng)前選中文件的的URL地址。在地址。在Relative To（相對(duì)于）下拉列表框中，相對(duì)于）下拉列表框中，選擇文件選擇文件URL地址的類型，選擇地址的類型，選擇Document（文檔），文檔），則使用相對(duì)地址；選擇則使用相對(duì)地址；選擇Si

7、te Root（站點(diǎn)根目錄）則使用站點(diǎn)根目錄）則使用基于根目錄的地址；選中基于根目錄的地址；選中Preview Images（預(yù)覽圖像）預(yù)覽圖像）復(fù)選框，則可以在對(duì)話框左邊預(yù)覽圖像。復(fù)選框，則可以在對(duì)話框左邊預(yù)覽圖像。 選中圖像文件后，單擊選中圖像文件后，單擊Select（選擇）按鈕。選擇）按鈕。 如果選擇的圖像文件位于本站點(diǎn)的目錄中，即可將圖像如果選擇的圖像文件位于本站點(diǎn)的目錄中，即可將圖像插入到文檔。插入到文檔。如果選擇的圖像沒有位于本地站點(diǎn)的目錄中，則會(huì)彈出一如果選擇的圖像沒有位于本地站點(diǎn)的目錄中，則會(huì)彈出一個(gè)對(duì)話框，詢問是否要將該圖像文件復(fù)制到本地站點(diǎn)中。個(gè)對(duì)話框，詢問是否要將該圖像文

8、件復(fù)制到本地站點(diǎn)中。單擊單擊Yes按鈕，則會(huì)將選中的圖像復(fù)制到站點(diǎn)目錄中，按鈕，則會(huì)將選中的圖像復(fù)制到站點(diǎn)目錄中，同時(shí)會(huì)出現(xiàn)一個(gè)文件選擇對(duì)話框，提示從站點(diǎn)中選擇目同時(shí)會(huì)出現(xiàn)一個(gè)文件選擇對(duì)話框，提示從站點(diǎn)中選擇目錄，將圖像復(fù)制到站點(diǎn)中，這樣文檔中引用的實(shí)際上是錄，將圖像復(fù)制到站點(diǎn)中，這樣文檔中引用的實(shí)際上是位于站點(diǎn)中的圖像文件；如果不希望復(fù)制圖像文件，可位于站點(diǎn)中的圖像文件；如果不希望復(fù)制圖像文件，可以單擊以單擊No。8一般來說，建議將圖像文件復(fù)制到站點(diǎn)目錄中，以便于管一般來說，建議將圖像文件復(fù)制到站點(diǎn)目錄中，以便于管理。理。 在文檔窗口中插入圖像后，就會(huì)將該圖像以原始大小顯在文檔窗口中插入圖像

9、后，就會(huì)將該圖像以原始大小顯示出來（見圖示出來（見圖6.2）。）。 在文檔窗口中單擊圖像，圖像四周出現(xiàn)黑色方形控制柄，在文檔窗口中單擊圖像，圖像四周出現(xiàn)黑色方形控制柄，可以在圖像屬性面板中修改圖像的屬性，包括圖像大小、可以在圖像屬性面板中修改圖像的屬性，包括圖像大小、邊框大小、對(duì)齊方式、超鏈接路徑等（見圖邊框大小、對(duì)齊方式、超鏈接路徑等（見圖6.3）。）。提示：提示：插入的文件可以是插入的文件可以是jpg文件、文件、png文件、文件、gif文件，包括文件，包括gif動(dòng)畫文件。動(dòng)畫文件?？梢圆活A(yù)先設(shè)置插入點(diǎn)，直接將對(duì)象面板上的可以不預(yù)先設(shè)置插入點(diǎn)，直接將對(duì)象面板上的Insert Image（插入

10、）按鈕直接拖動(dòng)到文檔中希望插入圖像的插入）按鈕直接拖動(dòng)到文檔中希望插入圖像的位置上，即可在相應(yīng)位置上放置圖像；這時(shí)同樣會(huì)出現(xiàn)位置上，即可在相應(yīng)位置上放置圖像；這時(shí)同樣會(huì)出現(xiàn)圖圖6.1所示的選擇圖像文件對(duì)話框，提示選擇圖像文件。所示的選擇圖像文件對(duì)話框，提示選擇圖像文件。9圖圖6.210圖圖6.311如果插入圖像后尚未保存過文檔，則文檔中圖像的引用地如果插入圖像后尚未保存過文檔，則文檔中圖像的引用地址會(huì)采用址會(huì)采用file:/的前綴；在保存文件后，的前綴；在保存文件后，Dreamweaver會(huì)自動(dòng)將該引用地址改變?yōu)楹线m的相對(duì)路徑格式地址。會(huì)自動(dòng)將該引用地址改變?yōu)楹线m的相對(duì)路徑格式地址。在文檔窗口

11、中選擇圖像，按在文檔窗口中選擇圖像，按Del鍵可以從頁面刪除圖像。鍵可以從頁面刪除圖像。6.2.2 為圖像命名為圖像命名為了在為了在JavaScript、VBScript等腳本語言中引用圖像，可等腳本語言中引用圖像，可以為圖像起個(gè)名字。在圖像屬性面板（圖以為圖像起個(gè)名字。在圖像屬性面板（圖6.3）左上角，）左上角，圖像縮略圖的右邊有一個(gè)文本框，其中可以輸入圖像的圖像縮略圖的右邊有一個(gè)文本框，其中可以輸入圖像的名稱。名稱。提示：提示： 該操作設(shè)置該操作設(shè)置標(biāo)記的標(biāo)記的name屬性。屬性。注意：注意：圖像名稱為英文字母和數(shù)字，必須以字母開頭。圖像名稱為英文字母和數(shù)字，必須以字母開頭。該名稱與文件名

12、不同，它是腳本語言引用圖像的標(biāo)志。該名稱與文件名不同，它是腳本語言引用圖像的標(biāo)志。如果在腳本中沒有引用該圖像，則不必設(shè)置圖像的名稱。如果在腳本中沒有引用該圖像，則不必設(shè)置圖像的名稱。126.2.3 設(shè)置可替換文本和提示文本設(shè)置可替換文本和提示文本在瀏覽網(wǎng)頁時(shí)，當(dāng)圖像還沒有完全下載完時(shí)，或圖像不能在瀏覽網(wǎng)頁時(shí)，當(dāng)圖像還沒有完全下載完時(shí)，或圖像不能正確顯示時(shí)，為了讓用戶先了解圖像的內(nèi)容和意義，可正確顯示時(shí)，為了讓用戶先了解圖像的內(nèi)容和意義，可以在圖像的位置用文字說明，這就是替換文本（見圖以在圖像的位置用文字說明，這就是替換文本（見圖6.4）。）。設(shè)置替換文本，只需在圖像屬性面板右上部的設(shè)置替換文本

13、，只需在圖像屬性面板右上部的Alt(替換替換)文文本框中輸入要顯示的文字。本框中輸入要顯示的文字。替換文本除在不能正確顯示圖像時(shí)用作提示外，在正確顯替換文本除在不能正確顯示圖像時(shí)用作提示外，在正確顯示圖像的情況下，當(dāng)鼠標(biāo)移動(dòng)到圖像上停頓時(shí)，該信息示圖像的情況下，當(dāng)鼠標(biāo)移動(dòng)到圖像上停頓時(shí)，該信息還可在鼠標(biāo)右下方提示，又稱為提示文本（見圖還可在鼠標(biāo)右下方提示，又稱為提示文本（見圖6.5）。）。提示文本還可以在提示文本還可以在HTML中用中用標(biāo)記的標(biāo)記的Title屬性實(shí)屬性實(shí)現(xiàn)，如現(xiàn)，如，這樣可以設(shè)置的提示文本與替換文本不同。，這樣可以設(shè)置的提示文本與替換文本不同。就提示文本而言，就提示文本而言，T

14、itle屬性的設(shè)置優(yōu)先。屬性的設(shè)置優(yōu)先。13圖圖6.414圖圖6.5156.2.4 設(shè)置圖像邊框和邊空設(shè)置圖像邊框和邊空如果需要，可以在圖像周圍設(shè)置邊框，這樣可以清晰地判如果需要，可以在圖像周圍設(shè)置邊框，這樣可以清晰地判斷圖像的邊界。設(shè)置邊框需在圖像屬性面板右邊的斷圖像的邊界。設(shè)置邊框需在圖像屬性面板右邊的Border（邊界）文本框中設(shè)置邊框的寬度，單位為像素。邊界）文本框中設(shè)置邊框的寬度，單位為像素。寬度為寬度為0時(shí)表示無邊框。在時(shí)表示無邊框。在HTML中，邊框由中，邊框由標(biāo)記標(biāo)記的的Border屬性設(shè)置。屬性設(shè)置。當(dāng)在圖像的周圍編排文字時(shí)，屬性當(dāng)在圖像的周圍編排文字時(shí)，屬性Vspace和和

15、Hspace用來用來設(shè)置圖像上下和圖像左右的留出空白寬度。這兩個(gè)屬性設(shè)置圖像上下和圖像左右的留出空白寬度。這兩個(gè)屬性在圖像屬性面板的左下部。在在圖像屬性面板的左下部。在HTML中，這兩個(gè)參數(shù)由中，這兩個(gè)參數(shù)由標(biāo)記的標(biāo)記的Vspace和和Hspace屬性設(shè)置。屬性設(shè)置。圖圖6.6是是Border=10，Vspace=10，Hspace=20時(shí)的文檔時(shí)的文檔窗口效果。相應(yīng)的窗口效果。相應(yīng)的HTML語句為：語句為：16圖圖6.6176.2.5 設(shè)置圖像的大小設(shè)置圖像的大小圖像在網(wǎng)頁中可以根據(jù)需要進(jìn)行放大或縮小顯示。方圖像在網(wǎng)頁中可以根據(jù)需要進(jìn)行放大或縮小顯示。方法有兩種：法有兩種： 一是在文檔窗口中

16、單擊圖像，右下角和一是在文檔窗口中單擊圖像，右下角和右、下兩邊出現(xiàn)右、下兩邊出現(xiàn)3個(gè)控制柄，拖動(dòng)控制柄可以調(diào)節(jié)圖個(gè)控制柄，拖動(dòng)控制柄可以調(diào)節(jié)圖像的大小（見圖像的大?。ㄒ妶D6.7）。）。另一種方法是在圖像屬性面板的另一種方法是在圖像屬性面板的W（寬度）和寬度）和H（高度）高度）文本框中輸入圖像高度和寬度的數(shù)值，圖文本框中輸入圖像高度和寬度的數(shù)值，圖6.7用控制用控制柄調(diào)整圖像大小單位為像素。柄調(diào)整圖像大小單位為像素。如果調(diào)整的比例不合適，想恢復(fù)原始大小，可以單擊如果調(diào)整的比例不合適，想恢復(fù)原始大小，可以單擊屬性面板右下角的屬性面板右下角的Refresh Size（刷新大小）按鈕。刷新大?。┌粹o。

17、提示：提示： 按住按住Shift鍵拖動(dòng)右下角的控制柄可以按固定的鍵拖動(dòng)右下角的控制柄可以按固定的高寬比例縮放圖像。高寬比例縮放圖像。18圖圖6.7196.2.6 設(shè)置圖像的對(duì)齊方式設(shè)置圖像的對(duì)齊方式圖像在行中的相對(duì)位置以及與文字的相對(duì)關(guān)系，稱為圖像在行中的相對(duì)位置以及與文字的相對(duì)關(guān)系，稱為圖像的對(duì)齊方式。圖像的對(duì)齊方式。HTML中由中由標(biāo)記的標(biāo)記的Align屬屬性設(shè)置。在性設(shè)置。在Dreamweaver中，通過圖像屬性面板右中，通過圖像屬性面板右上角的上角的Align下拉列表設(shè)置下拉列表設(shè)置(見圖見圖6.8)。Browser Default（瀏覽器默認(rèn)）：瀏覽器默認(rèn)）： 選擇該項(xiàng)，則采選擇該項(xiàng)

18、，則采用瀏覽器默認(rèn)的圖像對(duì)齊方式，通常是基線對(duì)齊方用瀏覽器默認(rèn)的圖像對(duì)齊方式，通常是基線對(duì)齊方式。式。Baseline（基線）：基線）： 將文本的基線同圖像的底部（含將文本的基線同圖像的底部（含邊界）對(duì)齊。邊界）對(duì)齊。Top（頂端）：頂端）： 該選項(xiàng)將文本行中最高字符的頂端同該選項(xiàng)將文本行中最高字符的頂端同圖像（含邊界）的頂端對(duì)齊。圖像（含邊界）的頂端對(duì)齊。Middle（居中）：居中）： 該選項(xiàng)將文本行基線同圖像的中部該選項(xiàng)將文本行基線同圖像的中部對(duì)齊。對(duì)齊。20圖圖6.821Bottom（底端）：底端）： 該選項(xiàng)同該選項(xiàng)同Baseline（基線）對(duì)齊方式基線）對(duì)齊方式相同，將文本行基線同圖像

19、的底部對(duì)齊。相同，將文本行基線同圖像的底部對(duì)齊。Text Top（文本頂端）：文本頂端）： 該選項(xiàng)將文本行中最高字符同圖該選項(xiàng)將文本行中最高字符同圖像（不含邊界）的頂端對(duì)齊，注意同像（不含邊界）的頂端對(duì)齊，注意同Top對(duì)齊方式的差對(duì)齊方式的差別。別。Absolute Middle（絕對(duì)居中）：絕對(duì)居中）： 該選項(xiàng)將文本行的中部該選項(xiàng)將文本行的中部同圖像的中部對(duì)齊，注意同同圖像的中部對(duì)齊，注意同Middle （中部）對(duì)齊方式的中部）對(duì)齊方式的差別。差別。Absolute Bottom（絕對(duì)底端）：絕對(duì)底端）： 該選項(xiàng)將圖像（含邊界）該選項(xiàng)將圖像（含邊界）的底端同文本行的底端對(duì)齊，注意同的底端同文

20、本行的底端對(duì)齊，注意同Bottom 對(duì)齊方式對(duì)齊方式的差別。的差別。Left（左端）：左端）： 選中該項(xiàng)，圖像被居左，文本在圖像的右選中該項(xiàng)，圖像被居左，文本在圖像的右邊自動(dòng)回行，實(shí)現(xiàn)圖文混排。邊自動(dòng)回行，實(shí)現(xiàn)圖文混排。Right（右端）：右端）： 選中該項(xiàng)，圖像被居右，文本在圖像的選中該項(xiàng)，圖像被居右，文本在圖像的左邊自動(dòng)回行。左邊自動(dòng)回行。22在圖像屬性面板的右下方還有在圖像屬性面板的右下方還有3個(gè)對(duì)齊按鈕個(gè)對(duì)齊按鈕 ，它們是段落對(duì)齊按鈕，指段落在行中水平方向上的它們是段落對(duì)齊按鈕，指段落在行中水平方向上的位置，如果該行只有圖像，則可以實(shí)現(xiàn)圖像在行中位置，如果該行只有圖像，則可以實(shí)現(xiàn)圖像在

21、行中居左、居中、居右。居左、居中、居右。圖圖6.9圖圖6.20顯示了各種對(duì)齊方式的差別，圖中使用顯示了各種對(duì)齊方式的差別，圖中使用的圖是有邊框的。的圖是有邊框的。提示：提示： 盡管圖盡管圖6.9圖圖6.20列舉了許多關(guān)于圖像的對(duì)齊列舉了許多關(guān)于圖像的對(duì)齊方式，但要把一幅圖像精確地放到指定位置仍然是方式，但要把一幅圖像精確地放到指定位置仍然是一件不容易的事情。所以，要在網(wǎng)頁中精確定位圖一件不容易的事情。所以，要在網(wǎng)頁中精確定位圖像，常常利用表格或?qū)?，將圖像放到表格的一個(gè)單像，常常利用表格或?qū)?，將圖像放到表格的一個(gè)單元格中或放到一個(gè)層上，通過表格或?qū)拥亩ㄎ粊砭裰谢蚍诺揭粋€(gè)層上，通過表格或?qū)拥亩?/p>

22、位來精確定位圖像。確定位圖像。23圖圖6.924圖圖6.1025圖圖6.1126圖圖6.1227圖圖6.1328圖圖6.1429圖圖6.1530圖圖6.1631圖圖6.1732圖圖6.1833圖圖6.1934圖圖6.20356.2.7 圖像超鏈接圖像超鏈接【例【例6.2】建立圖像超鏈接】建立圖像超鏈接 選擇欲建立超鏈接的圖像。選擇欲建立超鏈接的圖像。 在圖像屬性面板在圖像屬性面板Link（鏈接）文本框中輸入圖像超鏈接）文本框中輸入圖像超鏈接的鏈接的URL地址。這時(shí)圖像被設(shè)置為一個(gè)超級(jí)鏈接。地址。這時(shí)圖像被設(shè)置為一個(gè)超級(jí)鏈接。在瀏覽器中，單擊該圖像，即可跳轉(zhuǎn)到相應(yīng)的位置在瀏覽器中，單擊該圖像，即

23、可跳轉(zhuǎn)到相應(yīng)的位置上。也可以通過單擊文本框右方的文件夾按鈕，打上。也可以通過單擊文本框右方的文件夾按鈕，打開開Select File(選擇文件選擇文件)對(duì)話框，從磁盤上選擇要鏈對(duì)話框，從磁盤上選擇要鏈接的文件。接的文件。 如果將圖像設(shè)置為超鏈接，則在如果將圖像設(shè)置為超鏈接，則在Target（目標(biāo)）文目標(biāo)）文本框中可以設(shè)置目標(biāo)文檔在哪個(gè)窗口中被打開?？杀究蛑锌梢栽O(shè)置目標(biāo)文檔在哪個(gè)窗口中被打開。可以輸入目標(biāo)窗口的名稱，也可以從下拉列表中選擇。以輸入目標(biāo)窗口的名稱，也可以從下拉列表中選擇。36提示：提示：鏈接地址可以是外部鏈接、內(nèi)部鏈接、局部鏈接、鏈接地址可以是外部鏈接、內(nèi)部鏈接、局部鏈接、Emai

24、l鏈接。鏈接。在在HTML中，該操作是將一個(gè)鏈接標(biāo)記中，該操作是將一個(gè)鏈接標(biāo)記和和放放置于置于標(biāo)記的兩端，即用標(biāo)記的兩端，即用標(biāo)記替換原先標(biāo)記替換原先在文本超鏈接中鏈接文字所在的位置。在文本超鏈接中鏈接文字所在的位置。376.3 創(chuàng)建翻轉(zhuǎn)圖像【例【例6.3】建立翻轉(zhuǎn)圖像】建立翻轉(zhuǎn)圖像 將插入點(diǎn)放在欲建立翻轉(zhuǎn)圖像的位置。將插入點(diǎn)放在欲建立翻轉(zhuǎn)圖像的位置。 執(zhí)行執(zhí)行Insert|Rollover Image（翻轉(zhuǎn)圖像）命令，翻轉(zhuǎn)圖像）命令，或是在普通對(duì)象面板上，單擊或是在普通對(duì)象面板上，單擊Insert Rollover Image（插入翻轉(zhuǎn)圖像）按鈕插入翻轉(zhuǎn)圖像）按鈕 ，打開，打開Insert

25、Rollover Image（插入翻轉(zhuǎn)圖像）對(duì)話框，提示插入翻轉(zhuǎn)圖像）對(duì)話框，提示輸入原始圖像和翻轉(zhuǎn)圖像的輸入原始圖像和翻轉(zhuǎn)圖像的URL地址（圖地址（圖6.21） 。 在在Image Name文本框中輸入圖像的名稱。這個(gè)文本框中輸入圖像的名稱。這個(gè)名稱是整個(gè)翻轉(zhuǎn)圖像效果的名稱，以便在腳本程名稱是整個(gè)翻轉(zhuǎn)圖像效果的名稱，以便在腳本程序，例如序，例如JavaScript或或VBScript中引用圖像，而中引用圖像，而不是圖像文件名。不是圖像文件名。38圖圖6.2139 在在Original Image（原始圖像）文本框中輸入原始圖像原始圖像）文本框中輸入原始圖像的的URL地址，也可以通過單擊地址，

26、也可以通過單擊Browse（瀏覽）按鈕，瀏覽）按鈕，從磁盤上選擇圖像文件。從磁盤上選擇圖像文件。 在在Rollover Image（翻轉(zhuǎn)圖像）文本框中輸入翻轉(zhuǎn)圖像翻轉(zhuǎn)圖像）文本框中輸入翻轉(zhuǎn)圖像的的URL地址。地址。 在在When Clicked，Go To URL（當(dāng)單擊時(shí)，跳轉(zhuǎn)到當(dāng)單擊時(shí)，跳轉(zhuǎn)到URL）文本框中，可以輸入單擊圖像時(shí)跳轉(zhuǎn)到哪個(gè)文本框中，可以輸入單擊圖像時(shí)跳轉(zhuǎn)到哪個(gè)URL地址中，即將圖像制作成一個(gè)超鏈接。該項(xiàng)也可以不填地址中，即將圖像制作成一個(gè)超鏈接。該項(xiàng)也可以不填寫。寫。 如果選中如果選中Preload Rollover Image（預(yù)載翻轉(zhuǎn)圖像）復(fù)預(yù)載翻轉(zhuǎn)圖像）復(fù)選框，則無論

27、是否用鼠標(biāo)指向過原始圖像來顯示翻轉(zhuǎn)圖選框，則無論是否用鼠標(biāo)指向過原始圖像來顯示翻轉(zhuǎn)圖像，瀏覽器都會(huì)將翻轉(zhuǎn)圖像下載到本地的緩存中，以便像，瀏覽器都會(huì)將翻轉(zhuǎn)圖像下載到本地的緩存中，以便加快網(wǎng)頁瀏覽速度；如果沒有選中該復(fù)選框，則只有當(dāng)加快網(wǎng)頁瀏覽速度；如果沒有選中該復(fù)選框，則只有當(dāng)在瀏覽器中用鼠標(biāo)指向原始圖像時(shí)，翻轉(zhuǎn)圖像才會(huì)被瀏在瀏覽器中用鼠標(biāo)指向原始圖像時(shí)，翻轉(zhuǎn)圖像才會(huì)被瀏覽器存放到緩存中。覽器存放到緩存中。40 設(shè)置完畢，單擊設(shè)置完畢，單擊OK按鈕，確定操作。按鈕，確定操作。圖圖6.22是一個(gè)翻轉(zhuǎn)圖像的例子，鼠標(biāo)在圖像區(qū)域之外是一個(gè)翻轉(zhuǎn)圖像的例子，鼠標(biāo)在圖像區(qū)域之外時(shí)，畫面為一扇關(guān)閉的門，當(dāng)鼠標(biāo)

28、指向圖像時(shí)，門時(shí)，畫面為一扇關(guān)閉的門，當(dāng)鼠標(biāo)指向圖像時(shí)，門被打開（顯示另一幅門開著的圖像），表示請(qǐng)進(jìn)，被打開（顯示另一幅門開著的圖像），表示請(qǐng)進(jìn)，這時(shí)單擊鼠標(biāo)可以鏈接到首都在線。這時(shí)單擊鼠標(biāo)可以鏈接到首都在線。提示：提示：翻轉(zhuǎn)在翻轉(zhuǎn)在Dreamweaver文檔窗口中顯示的是原始圖像，文檔窗口中顯示的是原始圖像，只有在瀏覽器中才能看其效果。只有在瀏覽器中才能看其效果?？梢韵褚话銏D像一樣通過圖像屬性面板修改其顯示屬可以像一般圖像一樣通過圖像屬性面板修改其顯示屬性。性。刪除圖像，在文檔窗口單擊圖像，再按刪除圖像，在文檔窗口單擊圖像，再按Del鍵。鍵。41圖圖6.22426.4 建立圖像導(dǎo)航條導(dǎo)航條是

29、一組具有不同超鏈接地址的文本或圖像，導(dǎo)航條是一組具有不同超鏈接地址的文本或圖像，【例【例6.4】創(chuàng)建圖像導(dǎo)航條】創(chuàng)建圖像導(dǎo)航條假設(shè)要用網(wǎng)頁制作一本電子圖書，需要提供一種導(dǎo)航工假設(shè)要用網(wǎng)頁制作一本電子圖書，需要提供一種導(dǎo)航工具能使讀者在閱讀時(shí)方便地轉(zhuǎn)到首頁、上一回、下一具能使讀者在閱讀時(shí)方便地轉(zhuǎn)到首頁、上一回、下一回、上一頁、下一頁?；?、上一頁、下一頁。在制作網(wǎng)頁導(dǎo)航之前，首先要制作在制作網(wǎng)頁導(dǎo)航之前，首先要制作4組有關(guān)的圖像文件以組有關(guān)的圖像文件以對(duì)應(yīng)鏈接操作的對(duì)應(yīng)鏈接操作的4種狀態(tài)，分別為正常顯示時(shí)的圖像、種狀態(tài)，分別為正常顯示時(shí)的圖像、鼠標(biāo)移過時(shí)的圖像、按下鼠標(biāo)時(shí)的圖像和按下鼠標(biāo)時(shí)鼠標(biāo)移過

30、時(shí)的圖像、按下鼠標(biāo)時(shí)的圖像和按下鼠標(biāo)時(shí)的翻轉(zhuǎn)圖像。這需要的翻轉(zhuǎn)圖像。這需要5種導(dǎo)航功能，共種導(dǎo)航功能，共20幅圖像，如幅圖像，如圖圖6.23所示，其中所示，其中4組圖像的不同之處是底色不同。下組圖像的不同之處是底色不同。下面就可以用面就可以用Dreamweaver制作導(dǎo)航條了。制作導(dǎo)航條了。43圖圖6.2344 執(zhí)行執(zhí)行Insert（插入）插入）|Interactive Images（交互圖像）交互圖像）|Navigation Bar（導(dǎo)航條）命令，或是單擊對(duì)象面板上導(dǎo)航條）命令，或是單擊對(duì)象面板上的的Insert Navigation Bar（插入導(dǎo)航條）按鈕（圖插入導(dǎo)航條）按鈕（圖6.24

31、），打開），打開Insert Navigation Bar（插入導(dǎo)航條）對(duì)插入導(dǎo)航條）對(duì)話框（圖話框（圖6.25）。）。 在在Element Name（元素名稱）文本框中，為導(dǎo)航條第元素名稱）文本框中，為導(dǎo)航條第一項(xiàng)選擇名稱，例如，可以輸入一項(xiàng)選擇名稱，例如，可以輸入Home。在在Up Image（彈起圖像）文本框中，輸入第一個(gè)按鈕圖像彈起圖像）文本框中，輸入第一個(gè)按鈕圖像彈起狀態(tài)（也即正常顯示狀態(tài)）時(shí)圖像文件的彈起狀態(tài)（也即正常顯示狀態(tài)）時(shí)圖像文件的URL。文文本框右邊的本框右邊的Browse按鈕，可以從磁盤上選取圖像文件。按鈕，可以從磁盤上選取圖像文件。 在在Over Image（翻轉(zhuǎn)圖像

32、）文本框中，輸入第一個(gè)按鈕圖翻轉(zhuǎn)圖像）文本框中，輸入第一個(gè)按鈕圖像翻轉(zhuǎn)狀態(tài)時(shí)的圖像文件像翻轉(zhuǎn)狀態(tài)時(shí)的圖像文件URL。在在Down Image（按下圖像）文本框中，輸入第一個(gè)按鈕按下圖像）文本框中，輸入第一個(gè)按鈕圖像按下狀態(tài)時(shí)的圖像文件圖像按下狀態(tài)時(shí)的圖像文件URL。45圖圖6.2446圖圖6.2547在在Over While Down Image（按下時(shí)的輪替圖像）文本框按下時(shí)的輪替圖像）文本框中，輸入第一個(gè)按鈕按下狀態(tài)時(shí)的翻轉(zhuǎn)圖像文件中，輸入第一個(gè)按鈕按下狀態(tài)時(shí)的翻轉(zhuǎn)圖像文件URL。在在When Clicked, Go To URL（當(dāng)單擊時(shí)，跳轉(zhuǎn)到當(dāng)單擊時(shí)，跳轉(zhuǎn)到URL）文本框中，輸入單擊

33、該導(dǎo)航按鈕圖像時(shí)跳轉(zhuǎn)的文本框中，輸入單擊該導(dǎo)航按鈕圖像時(shí)跳轉(zhuǎn)的URL地址。地址。單擊單擊Browse按鈕，可以從磁盤上選擇目標(biāo)端點(diǎn)文檔。按鈕，可以從磁盤上選擇目標(biāo)端點(diǎn)文檔。在在When Clicked, Go To URL文本框右端的下拉列表框中，文本框右端的下拉列表框中，可以選擇文檔被打開的目標(biāo)窗口。選擇可以選擇文檔被打開的目標(biāo)窗口。選擇Main Window，則表示在同一窗口中打開目標(biāo)端點(diǎn)文檔。如果當(dāng)前使用則表示在同一窗口中打開目標(biāo)端點(diǎn)文檔。如果當(dāng)前使用了框架，還可以從其中選擇目標(biāo)框架的名稱。如果希望了框架，還可以從其中選擇目標(biāo)框架的名稱。如果希望選擇的框架尚未命名，則需要先命名，然后再在

34、這里進(jìn)選擇的框架尚未命名，則需要先命名，然后再在這里進(jìn)行選擇。行選擇。選中選中Preload Image（預(yù)載圖像）復(fù)選框，則無論這些圖預(yù)載圖像）復(fù)選框，則無論這些圖像是否被顯示過，瀏覽器都會(huì)將所有的圖像下載到本地像是否被顯示過，瀏覽器都會(huì)將所有的圖像下載到本地的緩存中，以加快瀏覽速度。如果清除該復(fù)選框，則只的緩存中，以加快瀏覽速度。如果清除該復(fù)選框，則只有相應(yīng)的圖像被顯示時(shí)，才會(huì)被瀏覽器下載到本地緩存有相應(yīng)的圖像被顯示時(shí)，才會(huì)被瀏覽器下載到本地緩存中。中。48如果選中如果選中Show“Down Image” Initially（初始時(shí)顯示按下初始時(shí)顯示按下圖像）復(fù)選框，則在網(wǎng)頁被瀏覽器載入后

35、，就將該按鈕圖像）復(fù)選框，則在網(wǎng)頁被瀏覽器載入后，就將該按鈕圖像顯示為按下狀態(tài)。這主要用于該圖像對(duì)應(yīng)鏈接是當(dāng)圖像顯示為按下狀態(tài)。這主要用于該圖像對(duì)應(yīng)鏈接是當(dāng)前頁面的情形。例如，如果當(dāng)前的文檔是電子圖書的第前頁面的情形。例如，如果當(dāng)前的文檔是電子圖書的第一回，則一回，則“上一回上一回”按鈕應(yīng)該處于按下狀態(tài)，表示不能按鈕應(yīng)該處于按下狀態(tài)，表示不能再按。再按。在在Insert下拉列表中，可以設(shè)置導(dǎo)航條的放置方向，選擇下拉列表中，可以設(shè)置導(dǎo)航條的放置方向，選擇Horizontally，則水平放置導(dǎo)航條；選擇則水平放置導(dǎo)航條；選擇Vertically，則則垂直放置導(dǎo)航條。垂直放置導(dǎo)航條。如果希望將導(dǎo)航條

36、放置于表格中，可以選中如果希望將導(dǎo)航條放置于表格中，可以選中Use Tables（使用表格）復(fù)選框，這樣便于利用表格布局頁面中的使用表格）復(fù)選框，這樣便于利用表格布局頁面中的文本。文本。 第一個(gè)按鈕設(shè)置完畢，單擊對(duì)話框上面的第一個(gè)按鈕設(shè)置完畢，單擊對(duì)話框上面的“+”號(hào)按鈕，號(hào)按鈕，再按照上面的方法，繼續(xù)添加其他的按鈕圖像。再按照上面的方法，繼續(xù)添加其他的按鈕圖像。49 單擊對(duì)話框上的單擊對(duì)話框上的“-”按鈕，可以刪除當(dāng)前選中的（反白按鈕，可以刪除當(dāng)前選中的（反白顯示）導(dǎo)航條元素。顯示）導(dǎo)航條元素。 單擊右上角的上、下箭頭按鈕，可以改變導(dǎo)航條元素在單擊右上角的上、下箭頭按鈕，可以改變導(dǎo)航條元素在

37、導(dǎo)航條中的位置。導(dǎo)航條中的位置。 所有的導(dǎo)航條元素被設(shè)置完畢后，單擊所有的導(dǎo)航條元素被設(shè)置完畢后，單擊OK按鈕，確認(rèn)按鈕，確認(rèn)操作。文檔中就添加了導(dǎo)航條（圖操作。文檔中就添加了導(dǎo)航條（圖6.26）。可以使用）。可以使用File|Preview In Browser命令預(yù)覽效果。命令預(yù)覽效果。注意：注意：每個(gè)頁面只能添加一個(gè)導(dǎo)航條（一個(gè)導(dǎo)航條可以有多個(gè)按每個(gè)頁面只能添加一個(gè)導(dǎo)航條（一個(gè)導(dǎo)航條可以有多個(gè)按鈕）。鈕）。制作圖像時(shí)注意適當(dāng)?shù)卦谒闹芰艨瞻祝员銋^(qū)分各個(gè)按鈕。制作圖像時(shí)注意適當(dāng)?shù)卦谒闹芰艨瞻?，以便區(qū)分各個(gè)按鈕。對(duì)導(dǎo)航條的每一個(gè)按鈕，可以像普通圖像一樣在屬性面板對(duì)導(dǎo)航條的每一個(gè)按鈕，可以像普

38、通圖像一樣在屬性面板中修改其屬性，如大小、鏈接、四周空白、邊框?qū)挾鹊取Ｖ行薷钠鋵傩?，如大小、鏈接、四周空白、邊框?qū)挾鹊取?0圖圖6.26 要編輯導(dǎo)航條，除可以使用屬性面板外，還可以使用要編輯導(dǎo)航條，除可以使用屬性面板外，還可以使用Modify|Navigation Bar（修改修改|導(dǎo)航條）命令。打開導(dǎo)航條）命令。打開Modify Navigation Bar（修改導(dǎo)航條）對(duì)話框，其布局修改導(dǎo)航條）對(duì)話框，其布局和使用方法與圖和使用方法與圖6.25相同。相同。516.5 建立圖像映像在文檔中放置多個(gè)圖像，然后分別為這些圖像建立超鏈在文檔中放置多個(gè)圖像，然后分別為這些圖像建立超鏈接，就可以實(shí)現(xiàn)相

39、應(yīng)的導(dǎo)航功能。然而，有時(shí)給出的接，就可以實(shí)現(xiàn)相應(yīng)的導(dǎo)航功能。然而，有時(shí)給出的是一整幅較大圖像，希望單擊圖像中的不同區(qū)域，跳是一整幅較大圖像，希望單擊圖像中的不同區(qū)域，跳轉(zhuǎn)到不同的鏈接文檔，這時(shí)可以將這幅圖像分割成多轉(zhuǎn)到不同的鏈接文檔，這時(shí)可以將這幅圖像分割成多幅圖像，在網(wǎng)頁中將之拼接成一幅大圖像，分別對(duì)每幅圖像，在網(wǎng)頁中將之拼接成一幅大圖像，分別對(duì)每個(gè)小圖建立鏈接。但這顯得非常麻煩，利用圖像映像個(gè)小圖建立鏈接。但這顯得非常麻煩，利用圖像映像可以方便地實(shí)現(xiàn)這一功能。可以方便地實(shí)現(xiàn)這一功能。所謂圖像映像（所謂圖像映像（image map），），就是在一幅圖像中創(chuàng)建就是在一幅圖像中創(chuàng)建多個(gè)鏈接區(qū)域，

40、通過單擊不同的鏈接區(qū)域，可以跳轉(zhuǎn)多個(gè)鏈接區(qū)域，通過單擊不同的鏈接區(qū)域，可以跳轉(zhuǎn)到不同的鏈接目標(biāo)端點(diǎn)。將這種位于一幅圖像上的多到不同的鏈接目標(biāo)端點(diǎn)。將這種位于一幅圖像上的多個(gè)鏈接區(qū)域稱作熱區(qū)。個(gè)鏈接區(qū)域稱作熱區(qū)。52傳統(tǒng)實(shí)現(xiàn)圖像映像的方法是服務(wù)器端的圖像映像，其傳統(tǒng)實(shí)現(xiàn)圖像映像的方法是服務(wù)器端的圖像映像，其原理是在客戶端瀏覽器上單擊圖像熱區(qū)時(shí)，將熱區(qū)原理是在客戶端瀏覽器上單擊圖像熱區(qū)時(shí)，將熱區(qū)的坐標(biāo)值傳送給服務(wù)器，由服務(wù)器上的程序計(jì)算確的坐標(biāo)值傳送給服務(wù)器，由服務(wù)器上的程序計(jì)算確定應(yīng)鏈接到哪個(gè)頁面上。這種方式對(duì)服務(wù)器平臺(tái)的定應(yīng)鏈接到哪個(gè)頁面上。這種方式對(duì)服務(wù)器平臺(tái)的依賴性較大，針對(duì)不同的服務(wù)器平

41、臺(tái)，可能需要分依賴性較大，針對(duì)不同的服務(wù)器平臺(tái)，可能需要分別編寫不同的計(jì)算程序，因此通用性也較差。隨著別編寫不同的計(jì)算程序，因此通用性也較差。隨著Internet技術(shù)的發(fā)展，出現(xiàn)了客戶端圖像映像的技術(shù)。技術(shù)的發(fā)展，出現(xiàn)了客戶端圖像映像的技術(shù)。這種技術(shù)在客戶端實(shí)現(xiàn)圖像映像，熱區(qū)坐標(biāo)存儲(chǔ)在這種技術(shù)在客戶端實(shí)現(xiàn)圖像映像，熱區(qū)坐標(biāo)存儲(chǔ)在HTML文件中，熱區(qū)對(duì)應(yīng)的超鏈接文件中，熱區(qū)對(duì)應(yīng)的超鏈接URL也由也由HTML文文件提供，因此，只要瀏覽器支持，就不存在平臺(tái)不件提供，因此，只要瀏覽器支持，就不存在平臺(tái)不兼容的問題。兼容的問題。Dreamweaver能夠快捷地創(chuàng)建客戶端圖像映像。能夠快捷地創(chuàng)建客戶端圖像映像。53【例【例6.5】創(chuàng)建圖像映像】創(chuàng)建圖像映像 將圖像像普通圖像一樣插入文檔。如插入一幅圖將圖像像普通圖像一樣插入文檔。如插入一幅圖6.27所所示的圖像。示的圖像。 選定圖像。選定圖像。 在圖像屬性面板上的在圖像屬性面板上的Map Name （映像名稱）區(qū)域，輸映像名稱）區(qū)域，輸入需要的映像名稱（見圖入需要的映像名稱（見圖6.28）。這是整個(gè)圖像映像的）。這是整個(gè)圖像映像的名稱，而不是某個(gè)熱區(qū)的名稱。如果在同一篇文檔中使名稱，而不是某個(gè)熱區(qū)的