《Dreamweaver-6(ppt文檔).ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《Dreamweaver-6(ppt文檔).ppt（60頁(yè)珍藏版）》請(qǐng)?jiān)趨R文網(wǎng)上搜索。

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í)1 16.1 圖像文件格式6.1.16.1.1圖像格式圖像格式圖像格式圖像格式1.1.JPG/JPEG JPG/JPEG 圖像圖像圖像圖像JPG/JPEGJPG/JPEG（joint photographic experts groupjoint photographic experts group，聯(lián)合圖像專家組）圖像是一種壓縮格式的圖像，文聯(lián)合圖像專家組）圖像是一種壓縮格式的圖像，文聯(lián)合

2、圖像專家組）圖像是一種壓縮格式的圖像，文聯(lián)合圖像專家組）圖像是一種壓縮格式的圖像，文件擴(kuò)展名為件擴(kuò)展名為件擴(kuò)展名為件擴(kuò)展名為jpgjpg或或或或jpeg,jpeg,它采用有損壓縮算法，在損它采用有損壓縮算法，在損它采用有損壓縮算法，在損它采用有損壓縮算法，在損失了原圖像中不易為人眼察覺(jué)部分的情況下，獲得失了原圖像中不易為人眼察覺(jué)部分的情況下，獲得失了原圖像中不易為人眼察覺(jué)部分的情況下，獲得失了原圖像中不易為人眼察覺(jué)部分的情況下，獲得較小的文件，從而減少下載時(shí)間。較小的文件，從而減少下載時(shí)間。較小的文件，從而減少下載時(shí)間。較小的文件，從而減少下載時(shí)間。JPG/JPEGJPG/JPEG圖像圖像圖像

3、圖像的另一特點(diǎn)是它支持的另一特點(diǎn)是它支持的另一特點(diǎn)是它支持的另一特點(diǎn)是它支持2424位真彩色。所以在網(wǎng)頁(yè)中，位真彩色。所以在網(wǎng)頁(yè)中，位真彩色。所以在網(wǎng)頁(yè)中，位真彩色。所以在網(wǎng)頁(yè)中，如果要顯示的圖像特別重視色彩，則可以使用如果要顯示的圖像特別重視色彩，則可以使用如果要顯示的圖像特別重視色彩，則可以使用如果要顯示的圖像特別重視色彩，則可以使用JPG/JPEG JPG/JPEG 類型的圖像。類型的圖像。類型的圖像。類型的圖像。2 22.2.GIFGIF圖像圖像圖像圖像GIFGIF（graphics interchange formatgraphics interchange format，圖像交換格

4、式）圖圖像交換格式）圖圖像交換格式）圖圖像交換格式）圖像采用無(wú)損壓縮格式，因此，原始圖像是什么樣子，壓像采用無(wú)損壓縮格式，因此，原始圖像是什么樣子，壓像采用無(wú)損壓縮格式，因此，原始圖像是什么樣子，壓像采用無(wú)損壓縮格式，因此，原始圖像是什么樣子，壓縮后的縮后的縮后的縮后的GIFGIF圖像也是什么樣子。但是圖像也是什么樣子。但是圖像也是什么樣子。但是圖像也是什么樣子。但是GIFGIF有一個(gè)致命的弱有一個(gè)致命的弱有一個(gè)致命的弱有一個(gè)致命的弱點(diǎn)，就是它僅支持點(diǎn)，就是它僅支持點(diǎn)，就是它僅支持點(diǎn)，就是它僅支持8 8位的顏色（位的顏色（位的顏色（位的顏色（256256色），適用于顯示卡色），適用于顯示卡色）

5、，適用于顯示卡色），適用于顯示卡通等對(duì)色彩數(shù)目要求不高的地方。通等對(duì)色彩數(shù)目要求不高的地方。通等對(duì)色彩數(shù)目要求不高的地方。通等對(duì)色彩數(shù)目要求不高的地方。GIFGIF圖像之所以在網(wǎng)絡(luò)圖像之所以在網(wǎng)絡(luò)圖像之所以在網(wǎng)絡(luò)圖像之所以在網(wǎng)絡(luò)上流行的原因之一是它支持動(dòng)畫格式，網(wǎng)頁(yè)中的動(dòng)畫圖上流行的原因之一是它支持動(dòng)畫格式，網(wǎng)頁(yè)中的動(dòng)畫圖上流行的原因之一是它支持動(dòng)畫格式，網(wǎng)頁(yè)中的動(dòng)畫圖上流行的原因之一是它支持動(dòng)畫格式，網(wǎng)頁(yè)中的動(dòng)畫圖像、交錯(cuò)圖像、透明圖像都是像、交錯(cuò)圖像、透明圖像都是像、交錯(cuò)圖像、透明圖像都是像、交錯(cuò)圖像、透明圖像都是GIFGIF格式，這是格式，這是格式，這是格式，這是JPG/JPEGJPG/

6、JPEG圖像做不到的。圖像做不到的。圖像做不到的。圖像做不到的。3.3.PNGPNG圖像圖像圖像圖像PNGPNG（portable network graphicportable network graphic，便攜網(wǎng)絡(luò)圖像）圖像便攜網(wǎng)絡(luò)圖像）圖像便攜網(wǎng)絡(luò)圖像）圖像便攜網(wǎng)絡(luò)圖像）圖像由于受到由于受到由于受到由于受到W3CW3C（World Wide Web ConsortiumWorld Wide Web Consortium）組織組織組織組織的大力推薦，目前已經(jīng)在網(wǎng)絡(luò)上逐漸推廣。它既可以采的大力推薦，目前已經(jīng)在網(wǎng)絡(luò)上逐漸推廣。它既可以采的大力推薦，目前已經(jīng)在網(wǎng)絡(luò)上逐漸推廣。它既可以采的大力推

7、薦，目前已經(jīng)在網(wǎng)絡(luò)上逐漸推廣。它既可以采用無(wú)損壓縮算法，又可以采用有損壓縮算法，以期在質(zhì)用無(wú)損壓縮算法，又可以采用有損壓縮算法，以期在質(zhì)用無(wú)損壓縮算法，又可以采用有損壓縮算法，以期在質(zhì)用無(wú)損壓縮算法，又可以采用有損壓縮算法，以期在質(zhì)量與文件大小之間找到最好的平衡，同時(shí)又支持真彩色。量與文件大小之間找到最好的平衡，同時(shí)又支持真彩色。量與文件大小之間找到最好的平衡，同時(shí)又支持真彩色。量與文件大小之間找到最好的平衡，同時(shí)又支持真彩色。目前較高版本的瀏覽器，都支持目前較高版本的瀏覽器，都支持目前較高版本的瀏覽器，都支持目前較高版本的瀏覽器，都支持PNG PNG 格式的圖像。格式的圖像。格式的圖像。格式

8、的圖像。3 36.1.2 6.1.2 動(dòng)畫格式動(dòng)畫格式動(dòng)畫格式動(dòng)畫格式目前目前目前目前InternetInternet上的動(dòng)畫主要有上的動(dòng)畫主要有上的動(dòng)畫主要有上的動(dòng)畫主要有GIFGIF動(dòng)畫和動(dòng)畫和動(dòng)畫和動(dòng)畫和FlashFlash動(dòng)畫。動(dòng)畫。動(dòng)畫。動(dòng)畫。GIFGIF動(dòng)畫文件小，瀏覽方便，不需任何插件，與普動(dòng)畫文件小，瀏覽方便，不需任何插件，與普動(dòng)畫文件小，瀏覽方便，不需任何插件，與普動(dòng)畫文件小，瀏覽方便，不需任何插件，與普通圖像的使用相同，因此廣泛應(yīng)用于網(wǎng)頁(yè)中的廣告通圖像的使用相同，因此廣泛應(yīng)用于網(wǎng)頁(yè)中的廣告通圖像的使用相同，因此廣泛應(yīng)用于網(wǎng)頁(yè)中的廣告通圖像的使用相同，因此廣泛應(yīng)用于網(wǎng)頁(yè)中的廣

9、告條。條。條。條。FlashFlash動(dòng)畫功能強(qiáng)大，可以有復(fù)雜的動(dòng)作，還動(dòng)畫功能強(qiáng)大，可以有復(fù)雜的動(dòng)作，還動(dòng)畫功能強(qiáng)大，可以有復(fù)雜的動(dòng)作，還動(dòng)畫功能強(qiáng)大，可以有復(fù)雜的動(dòng)作，還可以交互操作，但文件相對(duì)較大，故播放可以交互操作，但文件相對(duì)較大，故播放可以交互操作，但文件相對(duì)較大，故播放可以交互操作，但文件相對(duì)較大，故播放FlashFlash動(dòng)動(dòng)動(dòng)動(dòng)畫需要相應(yīng)的插件。畫需要相應(yīng)的插件。畫需要相應(yīng)的插件。畫需要相應(yīng)的插件。4 46.2 在文檔中插入圖像6.2.1 6.2.1 插入圖像插入圖像插入圖像插入圖像【例【例【例【例6.16.1】在頁(yè)面中插入圖像】在頁(yè)面中插入圖像】在頁(yè)面中插入圖像】在頁(yè)面中插入

10、圖像 將插入點(diǎn)放到文檔中需要插入圖像的位置。將插入點(diǎn)放到文檔中需要插入圖像的位置。將插入點(diǎn)放到文檔中需要插入圖像的位置。將插入點(diǎn)放到文檔中需要插入圖像的位置。執(zhí)行執(zhí)行執(zhí)行執(zhí)行Insert|Images(Insert|Images(插入插入插入插入|圖像圖像圖像圖像)命令，或單擊命令，或單擊命令，或單擊命令，或單擊Common(Common(普通）對(duì)象面板上的普通）對(duì)象面板上的普通）對(duì)象面板上的普通）對(duì)象面板上的Insert Image(Insert Image(插入插入插入插入圖像圖像圖像圖像)按鈕，打開按鈕，打開按鈕，打開按鈕，打開Select Image Source(Select Ima

11、ge Source(選擇圖像選擇圖像選擇圖像選擇圖像來(lái)源來(lái)源來(lái)源來(lái)源)對(duì)話框（見圖對(duì)話框（見圖對(duì)話框（見圖對(duì)話框（見圖6.16.1），可以從磁盤上選擇圖像），可以從磁盤上選擇圖像），可以從磁盤上選擇圖像），可以從磁盤上選擇圖像文件。文件。文件。文件。5 5圖圖6.16 6 選擇需要的文件。在選擇需要的文件。在選擇需要的文件。在選擇需要的文件。在URLURL文本框中，顯示當(dāng)前選中文件文本框中，顯示當(dāng)前選中文件文本框中，顯示當(dāng)前選中文件文本框中，顯示當(dāng)前選中文件的的的的URLURL地址。在地址。在地址。在地址。在Relative ToRelative To（相對(duì)于）下拉列表框中，相對(duì)于）下拉列表框

12、中，相對(duì)于）下拉列表框中，相對(duì)于）下拉列表框中，選擇文件選擇文件選擇文件選擇文件URLURL地址的類型，選擇地址的類型，選擇地址的類型，選擇地址的類型，選擇DocumentDocument（文檔），文檔），文檔），文檔），則使用相對(duì)地址；選擇則使用相對(duì)地址；選擇則使用相對(duì)地址；選擇則使用相對(duì)地址；選擇Site RootSite Root（站點(diǎn)根目錄）則使用站點(diǎn)根目錄）則使用站點(diǎn)根目錄）則使用站點(diǎn)根目錄）則使用基于根目錄的地址；選中基于根目錄的地址；選中基于根目錄的地址；選中基于根目錄的地址；選中Preview ImagesPreview Images（預(yù)覽圖像）預(yù)覽圖像）預(yù)覽圖像）預(yù)覽圖像）復(fù)

13、選框，則可以在對(duì)話框左邊預(yù)覽圖像。復(fù)選框，則可以在對(duì)話框左邊預(yù)覽圖像。復(fù)選框，則可以在對(duì)話框左邊預(yù)覽圖像。復(fù)選框，則可以在對(duì)話框左邊預(yù)覽圖像。選中圖像文件后，單擊選中圖像文件后，單擊選中圖像文件后，單擊選中圖像文件后，單擊SelectSelect（選擇）按鈕。選擇）按鈕。選擇）按鈕。選擇）按鈕。如果選擇的圖像文件位于本站點(diǎn)的目錄中，即可將圖像如果選擇的圖像文件位于本站點(diǎn)的目錄中，即可將圖像如果選擇的圖像文件位于本站點(diǎn)的目錄中，即可將圖像如果選擇的圖像文件位于本站點(diǎn)的目錄中，即可將圖像插入到文檔。插入到文檔。插入到文檔。插入到文檔。如果選擇的圖像沒(méi)有位于本地站點(diǎn)的目錄中，則會(huì)彈出一如果選擇的圖像

14、沒(méi)有位于本地站點(diǎn)的目錄中，則會(huì)彈出一如果選擇的圖像沒(méi)有位于本地站點(diǎn)的目錄中，則會(huì)彈出一如果選擇的圖像沒(méi)有位于本地站點(diǎn)的目錄中，則會(huì)彈出一個(gè)對(duì)話框，詢問(wèn)是否要將該圖像文件復(fù)制到本地站點(diǎn)中。個(gè)對(duì)話框，詢問(wèn)是否要將該圖像文件復(fù)制到本地站點(diǎn)中。個(gè)對(duì)話框，詢問(wèn)是否要將該圖像文件復(fù)制到本地站點(diǎn)中。個(gè)對(duì)話框，詢問(wèn)是否要將該圖像文件復(fù)制到本地站點(diǎn)中。單擊單擊單擊單擊YesYes按鈕，則會(huì)將選中的圖像復(fù)制到站點(diǎn)目錄中，按鈕，則會(huì)將選中的圖像復(fù)制到站點(diǎn)目錄中，按鈕，則會(huì)將選中的圖像復(fù)制到站點(diǎn)目錄中，按鈕，則會(huì)將選中的圖像復(fù)制到站點(diǎn)目錄中，同時(shí)會(huì)出現(xiàn)一個(gè)文件選擇對(duì)話框，提示從站點(diǎn)中選擇目同時(shí)會(huì)出現(xiàn)一個(gè)文件選擇對(duì)話框

15、，提示從站點(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í)際上是錄，將圖像復(fù)制到站點(diǎn)中，這樣文檔中引用的實(shí)際上是錄，將圖像復(fù)制到站點(diǎn)中，這樣文檔中引用的實(shí)際上是位于站點(diǎn)中的圖像文件；如果不希望復(fù)制圖像文件，可位于站點(diǎn)中的圖像文件；如果不希望復(fù)制圖像文件，可位于站點(diǎn)中的圖像文件；如果不希望復(fù)制圖像文件，可位于站點(diǎn)中的圖像文件；如果不希望復(fù)制圖像文件，可以單擊以單擊以單擊以單擊NoNo。7 7一般來(lái)說(shuō)，建議將圖像文件復(fù)制到站點(diǎn)目錄中，以便于管一般來(lái)說(shuō)，

16、建議將圖像文件復(fù)制到站點(diǎn)目錄中，以便于管一般來(lái)說(shuō)，建議將圖像文件復(fù)制到站點(diǎn)目錄中，以便于管一般來(lái)說(shuō)，建議將圖像文件復(fù)制到站點(diǎn)目錄中，以便于管理。理。理。理。在文檔窗口中插入圖像后，就會(huì)將該圖像以原始大小顯在文檔窗口中插入圖像后，就會(huì)將該圖像以原始大小顯在文檔窗口中插入圖像后，就會(huì)將該圖像以原始大小顯在文檔窗口中插入圖像后，就會(huì)將該圖像以原始大小顯示出來(lái)（見圖示出來(lái)（見圖示出來(lái)（見圖示出來(lái)（見圖6.26.2）。）。）。）。在文檔窗口中單擊圖像，圖像四周出現(xiàn)黑色方形控制柄，在文檔窗口中單擊圖像，圖像四周出現(xiàn)黑色方形控制柄，在文檔窗口中單擊圖像，圖像四周出現(xiàn)黑色方形控制柄，在文檔窗口中單擊圖像，圖像四周出現(xiàn)黑色方形控制柄，可以在圖像屬性面板中修改圖像的屬性，包括圖像大小、可以在圖像屬性面板中修改圖像的屬性，包括圖像大小、可以在圖像屬性面板中修改圖像的屬性，包括圖像大小、可以在圖像屬性面板中修改圖像的屬性，包括圖像大小、邊框大小、對(duì)齊方式、超鏈接路徑等（見圖邊框大小、對(duì)齊方式、超鏈接路徑等（見圖邊框大小、對(duì)齊方式、超鏈接路徑等（見圖邊框大小、對(duì)齊方式、超鏈接路徑等（見圖6.36.3）。）。）。