《Dreamweaver 8案例教程》課件第5章

本章學(xué)習(xí)目標(biāo)

Web圖像格式簡(jiǎn)介5.1插入圖像5.2設(shè)置圖像屬性5.3外部圖像編輯器5.5動(dòng)態(tài)圖像5.45.1Web圖像格式簡(jiǎn)介圖像通常用來添加圖形界面、具有視覺感染力的內(nèi)容或交互式設(shè)計(jì)元素，Web頁中通常使用的只有三種，即GIF、JPEG和PNG。返回5.2插入圖像在“文檔”窗口中，將插入點(diǎn)放置在您要顯示圖像的地方。在插入面板中的常用面板單擊圖標(biāo)，或在單擊“插入”→“圖像”菜單彈出如圖5-1所示“選擇圖像源”對(duì)話框。

圖5-1“選擇圖像源”對(duì)話框在“選擇圖像源”對(duì)話框中選擇要插入的圖像，或直接在URL：文本框中輸入文件的鏈接地址。選擇好圖像后，單擊“確定”按鈕。圖像插入在網(wǎng)頁文檔的相應(yīng)位置中。

返回5.3設(shè)置圖像屬性選中圖片，屬性面板轉(zhuǎn)為如圖5-4所示圖像面板。圖5-4圖像屬性面板單擊面板右下角的按鈕圖像屬性面板轉(zhuǎn)為如圖5-5所示圖像屬性面板。圖5-5圖像屬性面板設(shè)置圖像的相應(yīng)的屬性。返回5.4動(dòng)態(tài)圖像在Dreamweaver8中，可以利用系統(tǒng)自帶的圖片設(shè)置工具創(chuàng)建簡(jiǎn)單的動(dòng)態(tài)圖像。使鼠標(biāo)經(jīng)過圖片時(shí)，可以產(chǎn)生一些類似按鈕的動(dòng)態(tài)效果來豐富網(wǎng)頁，而不用過分地追求Flash的動(dòng)態(tài)按鈕或是JavaScript特效。5.4.1圖像熱點(diǎn)創(chuàng)建圖像熱點(diǎn)的步驟如下用鼠標(biāo)在文檔窗口中選中要?jiǎng)?chuàng)建圖片熱點(diǎn)的圖片。選擇圖片熱點(diǎn)工具欄的任一熱點(diǎn)工具。在圖像上任意位置拖動(dòng)鼠標(biāo)，創(chuàng)建熱點(diǎn)。在熱點(diǎn)工具欄中，矩形熱點(diǎn)，創(chuàng)建效果如圖5-25所示；圓形熱點(diǎn)，創(chuàng)建效果如圖5-26所示；多邊形熱點(diǎn)，創(chuàng)建效果如圖5-27所示。

圖5-25矩形熱點(diǎn)圖5-26圓形熱點(diǎn)圖5-27多邊形熱點(diǎn)創(chuàng)建圖片熱點(diǎn)后，在屬性面板中出現(xiàn)如圖5-28所示熱點(diǎn)屬性設(shè)置面板?？梢詫?duì)熱點(diǎn)的鏈接等方面進(jìn)行設(shè)置。5.4.2輪替圖像具體步驟如下：在文檔窗口選擇要輪替的主圖像。在菜單欄中選擇選擇“插入”→“交互式圖像”→“鼠標(biāo)經(jīng)過圖像”選項(xiàng)；或在“插入”面板中選擇“常用”面板中的“鼠標(biāo)經(jīng)過圖像”圖標(biāo)，彈出如圖5-34所示對(duì)話框。圖5-34鼠標(biāo)經(jīng)過圖像設(shè)定好各項(xiàng)參數(shù)之后，單擊“確定”按鈕完成替換圖像的設(shè)置。5.4.3占位圖像圖像占位符是在準(zhǔn)備好將最終圖形添加到Web頁之前使用的圖形，使用圖像占位還可以更方便地布局網(wǎng)頁結(jié)構(gòu)。下面，來介紹一下如何使用圖像占位符。5.4.3占位圖像插入圖像占位符在文檔編輯窗口中，將鼠標(biāo)放置到插入占位符圖像的位置。選擇“插入”→“圖像對(duì)象”→“圖像占位符”選項(xiàng)；或在“插入”面板中選擇“常用”面板中的占位符圖標(biāo)。彈出如圖5-35所示圖像占位符“對(duì)話框。設(shè)置圖像占位符各屬性（例名稱、高度、寬度）后，單擊按鈕完成替換圖像的設(shè)置。當(dāng)在瀏覽器窗口中查看時(shí)，不顯示標(biāo)簽文字和大小文本。5.4.3占位圖像設(shè)置占位符屬性選中圖像占位符，屬性面板變?yōu)檎嘉环麑傩?，如圖5-37所示。圖5-37占位符屬性設(shè)置在點(diǎn)位符屬性面板白色文本框中設(shè)置或修改占位符屬性（如地圖文本框等灰色文本框表示屬性不可設(shè)置）5.4.3占位圖像替換占位符在Dreamweaver8的文檔編輯窗口中雙擊圖像占位符，或選中圖像占位符，在占位符屬性面板中，單擊“源文件”文本框旁的圖標(biāo)。出現(xiàn)如圖5-38所示的選擇圖像源窗口。選擇要替換圖像占位符的圖像，單擊“確定”按鈕即可。返回5.5外部圖像編輯器用戶可以使用外部圖像編輯器（Fireworks、photoshop等）來編輯Dreamweaver8文檔窗口中的圖像，當(dāng)在圖像編輯器中編輯圖像后保存并返回Dreamweaver8時(shí)，文檔編輯區(qū)中的圖像也會(huì)隨著被更新。5.5.1設(shè)置外部圖像編輯參數(shù)在“編輯”菜單中選擇使用“外部編輯器編輯”子菜單，彈出如圖5-39所示的設(shè)置外部圖像編輯窗口；也可以在“編輯”菜單中選擇“參數(shù)選擇”子菜單，在弱出的“參數(shù)選擇”對(duì)話框的分類列表中選擇“文件類型/編輯器”。圖5-39首選參數(shù)設(shè)置對(duì)話框可以在代碼視圖中打開文本框架中添加要用Dreamweaver8代碼窗口打開的文件后綴名。單擊按鈕，可以選擇其他的代碼編輯器。當(dāng)然前提是計(jì)算機(jī)里要裝有編輯器。在擴(kuò)展名列表中可以選擇需要設(shè)置外部編輯器的文件擴(kuò)展名?？梢酝ㄟ^單擊按鈕添加、━按鈕刪除文件擴(kuò)展名；在編輯器列表中可以選擇此文件所需要的外部編輯器。也可以通過單擊按鈕添加、━按鈕刪除所使用的外部編輯器。單擊“確定”銨鈕完成設(shè)置5.5.2使用外部圖像編輯器方法一：在文檔窗口中選中要進(jìn)行編輯的圖片。在屬性面板中單擊編輯按鈕。方法二：選中要進(jìn)行編輯的圖片，單擊鼠標(biāo)右鍵，選擇“編輯方式”選項(xiàng)。也可以單擊“編輯”選項(xiàng)。選擇非默認(rèn)的圖片編輯器。方法三：在“文件”面板中“站點(diǎn)”選項(xiàng)，直接雙擊要編輯的文件的圖片文件。5.5.3在Dreamweaver8中使用Fireworks8插入Firework8圖像

與一般圖像插入的方式一樣，可以將Firework8導(dǎo)出圖形直接插入Dreamweaver文檔，也可以利用Dreamweaver圖像占位符創(chuàng)建新的Firework8圖形。如果該Fireworks8文件不在當(dāng)前的Dreamweaver站點(diǎn)中，將顯示詢問是否要將該文件拷貝到根文件夾消息。編輯Fireworks8圖像在Dreamweaver8中可以啟動(dòng)Fireworks8來編輯在Dreamweaver8文檔插入圖像。若設(shè)置了圖像的默認(rèn)編輯器為Fireworks8后，啟動(dòng)并編輯圖像或?qū)儆贔ireworks8表的一部分的圖像切片時(shí)，Dreamweaver8會(huì)自動(dòng)啟動(dòng)Fireworks8并從其中導(dǎo)出該圖像的PNG文件。優(yōu)化圖像Dreamweaver8中可以啟動(dòng)Fireworks8來對(duì)放置Fireworks8圖像和動(dòng)畫，并進(jìn)行快速的導(dǎo)出和更改操作，利用Fireworks8可以更改導(dǎo)出圖像的優(yōu)化設(shè)置、動(dòng)畫設(shè)置以及大小和區(qū)域等等。5.5.3在Dreamweaver8中使用Fireworks8插入Fireworks8HTML具體如下：在Dreamweaver8文檔中，將光標(biāo)放置在要插入Fireworks8HTML代碼開始的地方。在選擇“插入”→“交互式圖像”→“Fireworks8HTML”選項(xiàng)；或在“插入”面板中選擇常用面板中的按鈕。彈出如圖5-40所示“插入FireworksHTML”對(duì)話框。單擊瀏覽---按鈕選擇所需的FireworksHTML文件地址。圖5-40插入FireoworksHTML對(duì)話框若插入Fireworks8HTML文件后不再需要該文件，可以選擇“插入后刪除文件”選項(xiàng)，在FireworksHTML在文