Fireworks_切片、變換圖像和熱點(diǎn).ppt

1、第五講 切片、變換圖像和熱點(diǎn),教學(xué)目標(biāo),通過(guò)本講的學(xué)習(xí)掌握創(chuàng)建編輯位圖圖像,1、,教學(xué)內(nèi)容：,重點(diǎn)：了解Firworks的使用范圍,教學(xué)重難點(diǎn)：,切片是用于在 Adobe Fireworks 中創(chuàng)建交互效果的基本構(gòu)造塊。切片是最終以 HTML 代碼形式存在的網(wǎng)頁(yè)對(duì)象?？梢酝ㄟ^(guò) “ 層” 面板中的“ 網(wǎng)頁(yè)層” 查看、選擇和重命名它們。 切片將 Fireworks 文檔分割成多個(gè)較小的部分并將每部分導(dǎo)出為單獨(dú)的文件。導(dǎo)出時(shí)，F(xiàn)ireworks 會(huì)創(chuàng)建一個(gè)包含表格代碼的 HTML 文件，以便在瀏覽器中重新組合圖形。,一、切片、變換圖像和熱點(diǎn),一、切片、變換圖像和熱點(diǎn),切片將一個(gè)文檔分割成多個(gè)部分，它

2、們都以單獨(dú)文件的形式導(dǎo)出。,一、切片、變換圖像和熱點(diǎn),將圖像切片有三個(gè)主要優(yōu)點(diǎn)： 優(yōu)化圖像獲得最快的下載速度。 增加交互性使圖像能夠快速響應(yīng)鼠標(biāo)事件。 易于更新適用于經(jīng)常更改的網(wǎng)頁(yè)部分（例如， “ 本月雇員” 頁(yè)上的照片和姓名）。,一、切片、變換圖像和熱點(diǎn),創(chuàng)建矩形切片 可以通過(guò)使用“ 切片” 工具進(jìn)行繪制或基于所選對(duì)象插入切片來(lái)創(chuàng)建矩形切片。使用切片輔助線（從切片對(duì)象延伸的線）確定 導(dǎo)出文檔時(shí)將文檔拆分成的單獨(dú)圖像文件的邊界。,一、切片、變換圖像和熱點(diǎn),繪制矩形切片對(duì)象 1 選擇“ 切片” 工具。 切片、變換圖像和熱點(diǎn) 2 拖動(dòng)以繪制切片對(duì)象。 基于所選對(duì)象創(chuàng)建矩形切片 1 選擇“ 編輯”“

3、 插入”“ 矩形切片”。該切片是一個(gè)矩形，它的區(qū)域包括所選對(duì)象最外面的邊緣。 2 如果選擇了多個(gè)對(duì)象，請(qǐng)選擇“單個(gè)”以創(chuàng)建覆蓋全部所選對(duì)象的單個(gè)切片對(duì)象，或選擇“多個(gè)”為每個(gè)選定對(duì)象創(chuàng)建一個(gè)切片 對(duì)象。,一、切片、變換圖像和熱點(diǎn),創(chuàng)建非矩形切片 使用“ 多邊形切片” 工具創(chuàng)建非矩形切片。在嘗試將交互性附加到非矩形圖像時(shí)，非矩形切片非常有用。,一、切片、變換圖像和熱點(diǎn),繪制多邊形切片對(duì)象 1 選擇“ 多邊形切片” 工具。 2 單擊以放置多邊形的矢量點(diǎn)。這是必要的，因?yàn)椤?多邊形切片” 工具繪制直線段。 3 當(dāng)在具有柔邊的對(duì)象周圍繪制多邊形切片對(duì)象時(shí)，請(qǐng)包括整個(gè)對(duì)象以免在切片圖形中創(chuàng)建多余的實(shí)邊。

4、 4 若要停止使用“ 多邊形切片” 工具，請(qǐng)從“ 工具” 面板中選擇另一個(gè)工具。您不必單擊第一個(gè)點(diǎn)來(lái)關(guān)閉多邊形,一、切片、變換圖像和熱點(diǎn),從矢量對(duì)象或路徑創(chuàng)建多邊形切片 1 選擇一個(gè)矢量路徑。 2 選擇“ 編輯”“ 插入”“ 多邊形切片”。 創(chuàng)建 HTML 文本切片 HTML 切片指定瀏覽器中出現(xiàn)普通 HTML 文本的區(qū)域。然后，它會(huì)導(dǎo)出在切片定義的表單元格中顯示的 HTML 文本。,一、切片、變換圖像和熱點(diǎn),1 繪制切片對(duì)象。 2 在選定了切片對(duì)象時(shí)，從“ 屬性” 檢查器的“ 類型” 彈出菜單中選擇“HTML”。 3 單擊“ 編輯”。 4 在“ 編輯 HTML 切片” 窗口中鍵入文本，然后通

5、過(guò)添加 HTML 文本格式設(shè)置標(biāo)簽來(lái)設(shè)置文本的格式。 注： 或者，在導(dǎo)出 HTML 之后應(yīng)用 HTML 文本格式設(shè)置標(biāo)簽。 5 單擊“ 確定” 以應(yīng)用更改并關(guān)閉“ 編輯 HTML 切片” 窗口。,一、切片、變換圖像和熱點(diǎn),查看并選擇切片 “ 網(wǎng)頁(yè)層” 顯示文檔中的所有網(wǎng)頁(yè)對(duì)象。 1 選擇“ 窗口”“ 層”。 2 單擊三角形展開(kāi)“ 網(wǎng)頁(yè)層”。 3 單擊一個(gè)切片名稱以選擇該切片。,一、切片、變換圖像和熱點(diǎn),顯示和隱藏切片 隱藏一個(gè)切片時(shí)可使該切片在 Fireworks PNG 文件中不可見(jiàn)?？梢栽?HTML 中導(dǎo)出隱藏的切片對(duì)象。 若要隱藏個(gè)別切片，請(qǐng)?jiān)凇?層” 面板中單擊各個(gè)網(wǎng)頁(yè)對(duì)象旁邊的眼睛圖

6、標(biāo)。 若要顯示隱藏的切片，請(qǐng)?jiān)凇?眼晴” 列中單擊以重新打開(kāi)可見(jiàn)性。 若要隱藏或顯示所有熱點(diǎn)、切片和輔助線，請(qǐng)?jiān)凇肮ぞ摺泵姘宓摹癢eb”工具部分中單擊相應(yīng)的“隱藏/顯示切片”按鈕， 或單擊“ 層” 面板中“ 網(wǎng)頁(yè)層” 旁邊的眼睛圖標(biāo)。,一、切片、變換圖像和熱點(diǎn),更改切片對(duì)象和輔助線的顏色 “ 編輯”“ 首選參數(shù)”的“ 輔助線和網(wǎng)格” 類別中選擇新的切片輔助線顏色,二、編輯切片,通過(guò)移動(dòng)切片輔助線來(lái)編輯切片,如果多個(gè)切片對(duì)象沿單個(gè)切片輔助線對(duì)齊，則可以拖動(dòng)該切片輔助線來(lái)同時(shí)調(diào)整全部切片對(duì)象的大小。,二、編輯切片,調(diào)整一個(gè)或多個(gè)切片的大小 1 將“ 指針” 或“ 部分選定” 工具放在切片輔助線上。

7、 指針會(huì)變?yōu)檩o助線移動(dòng)指針。 2 將切片輔助線拖動(dòng)到所需位置。 切片以及所有相鄰切片的大小都會(huì)被調(diào)整。,三、交互切片,對(duì)于簡(jiǎn)單的交互，請(qǐng)使用拖放變換圖像方法。 對(duì)于更復(fù)雜的交互，請(qǐng)使用“ 行為” 面板。Fireworks 中的行為與 Adobe Dreamweaver 行為兼容。在將 Fireworks 變換圖像導(dǎo)出到 Dreamweaver 時(shí)，可以使用 Dreamweaver 的“ 行為” 面板編輯 Fireworks 行為。,三、交互切片,使切片具有簡(jiǎn)單的交互效果,三、交互切片,使切片具有簡(jiǎn)單的交互效果,通過(guò)從觸發(fā)切片拖動(dòng)行為手柄并將其放置在目標(biāo)切片上，可以輕松地創(chuàng)建變換圖像和交換圖像效

8、果。觸發(fā)器和目標(biāo)可以是同一 切片。,三、交互切片,關(guān)于變換圖像 變換圖像的工作方式都相同：當(dāng)鼠標(biāo)指針滑過(guò)一個(gè)圖形時(shí)，該操作將觸發(fā)另一個(gè)圖形的顯示。觸發(fā)器始終是一個(gè)網(wǎng)頁(yè)對(duì)象（切片、熱點(diǎn)或按鈕）,三、交互切片,三、交互切片,創(chuàng)建并附加簡(jiǎn)單的變換圖像 簡(jiǎn)單變換圖像在頂部狀態(tài)正下方的狀態(tài)中進(jìn)行交換，并且只涉及一個(gè)切片。 1 確保該觸發(fā)器對(duì)象不在共享層上。 2 選擇“ 編輯”“ 插入”“ 矩形切片” 或“ 多邊形切片” 以在觸發(fā)器對(duì)象上方創(chuàng)建切片。 3 在“ 狀態(tài)” 面板中單擊“ 新建/ 重制狀態(tài)” 按鈕創(chuàng)建一個(gè)新?tīng)顟B(tài)。 4 創(chuàng)建、粘貼或?qū)胗米餍聽(tīng)顟B(tài)上的交換圖像的圖像。 將該圖像放在步驟 2 中創(chuàng)建的

9、切片的下方。即使您現(xiàn)在位于狀態(tài) 2 中，該切片也可見(jiàn)。 5 在“ 狀態(tài)” 面板中選擇“ 狀態(tài) 1” 返回到包含原始圖像的狀態(tài)。 6 選擇切片并將指針?lè)旁谛袨槭直戏?三、交互切片,創(chuàng)建并附加不相交變換圖像 當(dāng)指針在一個(gè)網(wǎng)頁(yè)對(duì)象上方滾動(dòng)時(shí)，不相交變換圖像交換另一個(gè)網(wǎng)頁(yè)對(duì)象下方的圖像。當(dāng)指針滑過(guò)或單擊一個(gè)觸發(fā)器圖像時(shí)，作為響應(yīng)，在網(wǎng)頁(yè)的另一個(gè)位置中出現(xiàn)一個(gè)圖像。鼠標(biāo)滑過(guò)的圖像為觸發(fā)器；發(fā)生更改的圖像為目標(biāo)。,三、交互切片,將多個(gè)變換圖像應(yīng)用到切片,四、使切片具有復(fù)雜的交互效果,將多個(gè)變換圖像應(yīng)用到切片 簡(jiǎn)單變換圖像通過(guò)將“ 狀態(tài) 1” 用作“ 彈起” 狀態(tài)以及將“ 狀態(tài) 2” 用作“ 滑過(guò)” 狀態(tài)

10、來(lái)向所選切片添加變換圖像行為。 設(shè)置導(dǎo)航欄圖像允許切片成為 Fireworks 導(dǎo)航欄的一部分。作為導(dǎo)航欄一部分的每個(gè)切片都必須具有此行為。“ 設(shè)置導(dǎo)航欄圖 像” 選項(xiàng)實(shí)際上是一個(gè)包含“ 滑過(guò)導(dǎo)航欄”、“ 按下導(dǎo)航欄” 和“ 恢復(fù)導(dǎo)航欄” 等行為的行為組。,四、使切片具有復(fù)雜的交互效果,交換圖像使用另一個(gè)狀態(tài)的內(nèi)容或外部文件的內(nèi)容來(lái)替換指定切片下面的圖像。 恢復(fù)交換圖像將目標(biāo)對(duì)象恢復(fù)為它在“ 狀態(tài) 1” 中的默認(rèn)外觀。 滑過(guò)導(dǎo)航欄為作為導(dǎo)航欄一部分的當(dāng)前所選切片指定“ 滑過(guò)” 狀態(tài)，還可根據(jù)需要指定“ 預(yù)先載入圖像” 狀態(tài)和“ 包括按下時(shí) 的滑過(guò)” 狀態(tài)。 按下導(dǎo)航欄為作為導(dǎo)航欄一部分的當(dāng)前所

11、選切片指定“ 按下” 狀態(tài)，還可根據(jù)需要指定“ 預(yù)先載入圖像” 狀態(tài)。 恢復(fù)導(dǎo)航欄將導(dǎo)航欄中的所有其它切片恢復(fù)到它們的“ 彈起” 狀態(tài)。 設(shè)置彈出菜單將彈出菜單附加到切片或熱點(diǎn)上。當(dāng)應(yīng)用彈出菜單行為時(shí)，您可以使用“ 彈出菜單編輯器”。 設(shè)置狀態(tài)欄文本使您能夠定義在大多數(shù)瀏覽器窗口底部的狀態(tài)欄中顯示的文本。,四、使切片具有復(fù)雜的交互效果,將行為附加到所選切片 1 單擊“ 行為” 面板中的“ 添加行為” 按鈕,2 選擇一個(gè)或多個(gè)行為。,四、使切片具有復(fù)雜的交互效果,更改激活行為的鼠標(biāo)事件 1 選擇包含要修改的行為的觸發(fā)器切片或熱點(diǎn)。 與該切片或熱點(diǎn)關(guān)聯(lián)的所有行為都顯示在“ 行為” 面板中。 2 選

12、擇要編輯的行為。 3 單擊事件旁邊的箭頭，然后從彈出菜單中選擇一個(gè)新事件?！?簡(jiǎn)單變換圖像” 行為沒(méi)有該選項(xiàng)。 onMouseOver 在指針滑過(guò)觸發(fā)器區(qū)域時(shí)觸發(fā)行為。 onMouseOut 在指針離開(kāi)觸發(fā)器區(qū)域時(shí)觸發(fā)行為。 onClick 在單擊觸發(fā)器對(duì)象時(shí)觸發(fā)行為。 onLoad 在載入網(wǎng)頁(yè)時(shí)觸發(fā)行為。,四、使切片具有復(fù)雜的交互效果,使用外部圖像文件作為交換圖像 可以將當(dāng)前 Fireworks 文檔外部的圖像用作交換圖像的來(lái)源。源圖像可以是 GIF、GIF 動(dòng)畫、JPEG 或 PNG 格式。如果選擇將外部文件作為圖像源，則在 Web 瀏覽器中觸發(fā)交換圖像時(shí)， Fireworks 會(huì)將該文件

13、與目標(biāo)切片相交換。 1 在“ 交換圖像”、“ 滑過(guò)導(dǎo)航欄” 或“ 按下導(dǎo)航欄” 對(duì)話框中，選擇“ 圖像文件”，然后單擊文件夾圖標(biāo)。 2 定位到要使用的文件，然后單擊“ 打開(kāi)”。 3 如果外部文件是 GIF 動(dòng)畫，請(qǐng)取消選擇“ 預(yù)先載入圖像”。這樣做可以防止在將 GIF 動(dòng)畫顯示為變換圖像狀態(tài)時(shí)出現(xiàn)問(wèn)題。,五、準(zhǔn)備切片以供導(dǎo)出,使用“ 屬性” 檢查器準(zhǔn)備要導(dǎo)出的切片。,為切片指定 URL 為切片指定 URL 后，用戶可通過(guò)在其 Web 瀏覽器中單擊切片所定義的區(qū)域來(lái)定位到該地址。 要指定 URL，請(qǐng)?jiān)凇?屬性” 檢查器的“ 鏈接” 文本框中輸入 URL,五、準(zhǔn)備切片以供導(dǎo)出,輸入替換文本 對(duì)于越

14、來(lái)越多使用屏幕朗讀應(yīng)用程序的視覺(jué)障礙人士，輸入簡(jiǎn)短而有意義的替換文本對(duì)他們非常重要。當(dāng)用戶將指針移過(guò)網(wǎng)頁(yè) 上的圖形時(shí)，這些應(yīng)用程序會(huì)將替換文本轉(zhuǎn)換為計(jì)算機(jī)生成的語(yǔ)音。 在“ 屬性” 檢查器的“ 替換文本” 框中鍵入文本。,五、準(zhǔn)備切片以供導(dǎo)出,設(shè)置默認(rèn)替換文本 可以選擇尚未為其輸入替換文本的切片和熱點(diǎn)，并為所有這些切片和熱點(diǎn)設(shè)置默認(rèn)替換文本。 選擇“ 命令”“ 網(wǎng)頁(yè)”“ 設(shè)置替換文本”，并輸入默認(rèn)替換文本。,五、準(zhǔn)備切片以供導(dǎo)出,為所選切片或熱點(diǎn)指定目標(biāo) 目標(biāo)是在其中打開(kāi)鏈接文檔的替換網(wǎng)頁(yè)狀態(tài)或網(wǎng)頁(yè)瀏覽器。 在“ 目標(biāo)” 文本框中鍵入 HTML 狀態(tài)的名稱或從“ 目標(biāo)” 彈出菜單中選擇一個(gè)保留

15、目標(biāo)： _blank 將鏈接文檔加載到一個(gè)新的未命名瀏覽器窗口中。 _parent 將鏈接的文檔加載到包含該鏈接的狀態(tài)的父狀態(tài)集或窗口中。如果包含鏈接的狀態(tài)不是嵌套的，則鏈接文檔會(huì)加 載到整個(gè)瀏覽器窗口中。 _self 將鏈接的文檔加載到鏈接所在的同一狀態(tài)或窗口中。由于此目標(biāo)是默認(rèn)的，因此您通常不需要指定它。 _top 將鏈接的文檔加載到整個(gè)瀏覽器窗口中，從而刪除所有狀態(tài)。,五、準(zhǔn)備切片以供導(dǎo)出,命名切片 切片即是將一個(gè)圖像分割成多個(gè)部分。由于狀態(tài)的每個(gè)部分都分別導(dǎo)出，因此每個(gè)部分都必須有唯一的名稱。使用默認(rèn)的命名 約定或指定自定義名稱。,五、準(zhǔn)備切片以供導(dǎo)出,更改默認(rèn)的自動(dòng)命名約定 選擇“

16、文件”“HTML 設(shè)置” 以打開(kāi)“HTML 設(shè)置” 對(duì)話框。,五、準(zhǔn)備切片以供導(dǎo)出,定義導(dǎo)出 HTML 表的方式 選擇“ 文件”“HTML 設(shè)置”，或者單擊“ 導(dǎo)出” 對(duì)話框中的“ 選項(xiàng)” 按鈕。,六、熱點(diǎn)和圖像映射,Web 設(shè)計(jì)人員可以使用熱點(diǎn)來(lái)使較大圖形中的各個(gè)小部分產(chǎn)生交互，并將網(wǎng)頁(yè)圖形的區(qū)域鏈接到 URL。通過(guò)從包含熱點(diǎn)的文 檔中導(dǎo)出 HTML，您可以在 Fireworks 中創(chuàng)建圖像映射。,六、熱點(diǎn)和圖像映射,創(chuàng)建熱點(diǎn) 如果希望圖像的某些區(qū)域鏈接到其它網(wǎng)頁(yè)，但不需要這些區(qū)域?yàn)轫憫?yīng)鼠標(biāo)的移動(dòng)或動(dòng)作而高亮顯示或者產(chǎn)生變換圖像效果， 則使用熱點(diǎn)是理想的解決方案。 如果要將放置了熱點(diǎn)的圖形最好導(dǎo)出為單個(gè)圖形文件，換句話說(shuō)，就是最好使用相同的文件格式和優(yōu)化設(shè)置導(dǎo)出整個(gè)圖形， 則使用熱點(diǎn)和圖像映射也是理想的解決方案。 熱點(diǎn)可以是矩形、圓形或多邊形。在處理復(fù)雜的圖像時(shí)，多邊形非常有用。 可以選擇一個(gè)對(duì)象，然后在該對(duì)象上插入熱點(diǎn)。,六、熱點(diǎn)和圖像映射,創(chuàng)建矩形或圓形熱點(diǎn) 1 從“ 工具” 面板的“Web” 部分選擇“ 矩形熱點(diǎn)” 工具或“ 圓形熱點(diǎn)” 工具。 創(chuàng)建非常