fireworks 圖形切片與熱點(diǎn)

1、第五講 切片、變換圖像和熱點(diǎn)1切片是用于在 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)2一、切片、變換圖像和熱點(diǎn)切片將一個(gè)文檔分割成多個(gè)部分，它們都以單獨(dú)文件的形式導(dǎo)出。3一、切片、變換圖像和熱點(diǎn)將圖像切片有三個(gè)主要優(yōu)點(diǎn)：優(yōu)化圖像獲得最快的下載速度。增加交互性使圖像能夠

2、快速響應(yīng)鼠標(biāo)事件。易于更新適用于經(jīng)常更改的網(wǎng)頁(yè)部分（例如， “ 本月雇員” 頁(yè)上的照片和姓名）。4一、切片、變換圖像和熱點(diǎn)創(chuàng)建矩形切片可以通過(guò)使用“ 切片” 工具進(jìn)行繪制或基于所選對(duì)象插入切片來(lái)創(chuàng)建矩形切片。使用切片輔助線（從切片對(duì)象延伸的線）確定導(dǎo)出文檔時(shí)將文檔拆分成的單獨(dú)圖像文件的邊界。5一、切片、變換圖像和熱點(diǎn)繪制矩形切片對(duì)象1 選擇“ 切片” 工具。切片、變換圖像和熱點(diǎn)2 拖動(dòng)以繪制切片對(duì)象?；谒x對(duì)象創(chuàng)建矩形切片1 選擇“ 編輯”“ 插入”“ 矩形切片”。該切片是一個(gè)矩形，它的區(qū)域包括所選對(duì)象最外面的邊緣。2 如果選擇了多個(gè)對(duì)象，請(qǐng)選擇“單個(gè)”以創(chuàng)建覆蓋全部所選對(duì)象的單個(gè)切片對(duì)象，

3、或選擇“多個(gè)”為每個(gè)選定對(duì)象創(chuàng)建一個(gè)切片對(duì)象。6一、切片、變換圖像和熱點(diǎn)創(chuàng)建非矩形切片使用“ 多邊形切片” 工具創(chuàng)建非矩形切片。在嘗試將交互性附加到非矩形圖像時(shí)，非矩形切片非常有用。7一、切片、變換圖像和熱點(diǎn)繪制多邊形切片對(duì)象1 選擇“ 多邊形切片” 工具。2 單擊以放置多邊形的矢量點(diǎn)。這是必要的，因?yàn)椤?多邊形切片” 工具繪制直線段。3 當(dāng)在具有柔邊的對(duì)象周圍繪制多邊形切片對(duì)象時(shí)，請(qǐng)包括整個(gè)對(duì)象以免在切片圖形中創(chuàng)建多余的實(shí)邊。4 若要停止使用“ 多邊形切片” 工具，請(qǐng)從“ 工具” 面板中選擇另一個(gè)工具。您不必單擊第一個(gè)點(diǎn)來(lái)關(guān)閉多邊形8一、切片、變換圖像和熱點(diǎn)從矢量對(duì)象或路徑創(chuàng)建多邊形切片1

4、選擇一個(gè)矢量路徑。2 選擇“ 編輯”“ 插入”“ 多邊形切片”。創(chuàng)建 HTML 文本切片HTML 切片指定瀏覽器中出現(xiàn)普通 HTML 文本的區(qū)域。然后，它會(huì)導(dǎo)出在切片定義的表單元格中顯示的 HTML 文本。9一、切片、變換圖像和熱點(diǎn)1 繪制切片對(duì)象。2 在選定了切片對(duì)象時(shí)，從“ 屬性” 檢查器的“ 類型” 彈出菜單中選擇“HTML”。3 單擊“ 編輯”。4 在“ 編輯 HTML 切片” 窗口中鍵入文本，然后通過(guò)添加 HTML 文本格式設(shè)置標(biāo)簽來(lái)設(shè)置文本的格式。注： 或者，在導(dǎo)出 HTML 之后應(yīng)用 HTML 文本格式設(shè)置標(biāo)簽。5 單擊“ 確定” 以應(yīng)用更改并關(guān)閉“ 編輯 HTML 切片” 窗口

5、。10一、切片、變換圖像和熱點(diǎn)查看并選擇切片“ 網(wǎng)頁(yè)層” 顯示文檔中的所有網(wǎng)頁(yè)對(duì)象。1 選擇“ 窗口”“ 層”。2 單擊三角形展開“ 網(wǎng)頁(yè)層”。3 單擊一個(gè)切片名稱以選擇該切片。11一、切片、變換圖像和熱點(diǎn)顯示和隱藏切片隱藏一個(gè)切片時(shí)可使該切片在 Fireworks PNG 文件中不可見(jiàn)?？梢栽?HTML 中導(dǎo)出隱藏的切片對(duì)象。 若要隱藏個(gè)別切片，請(qǐng)?jiān)凇?層” 面板中單擊各個(gè)網(wǎng)頁(yè)對(duì)象旁邊的眼睛圖標(biāo)。 若要顯示隱藏的切片，請(qǐng)?jiān)凇?眼晴” 列中單擊以重新打開可見(jiàn)性。 若要隱藏或顯示所有熱點(diǎn)、切片和輔助線，請(qǐng)?jiān)凇肮ぞ摺泵姘宓摹癢eb”工具部分中單擊相應(yīng)的“隱藏/顯示切片”按鈕， 或單擊“ 層” 面板

6、中“ 網(wǎng)頁(yè)層” 旁邊的眼睛圖標(biāo)。12一、切片、變換圖像和熱點(diǎn)更改切片對(duì)象和輔助線的顏色“ 編輯”“ 首選參數(shù)”的“ 輔助線和網(wǎng)格” 類別中選擇新的切片輔助線顏色13二、編輯切片通過(guò)移動(dòng)切片輔助線來(lái)編輯切片如果多個(gè)切片對(duì)象沿單個(gè)切片輔助線對(duì)齊，則可以拖動(dòng)該切片輔助線來(lái)同時(shí)調(diào)整全部切片對(duì)象的大小。14二、編輯切片調(diào)整一個(gè)或多個(gè)切片的大小1 將“ 指針” 或“ 部分選定” 工具放在切片輔助線上。指針會(huì)變?yōu)檩o助線移動(dòng)指針。2 將切片輔助線拖動(dòng)到所需位置。切片以及所有相鄰切片的大小都會(huì)被調(diào)整。15三、交互切片對(duì)于簡(jiǎn)單的交互，請(qǐng)使用拖放變換圖像方法。 對(duì)于更復(fù)雜的交互，請(qǐng)使用“ 行為” 面板。Firewo

7、rks 中的行為與 Adobe Dreamweaver 行為兼容。在將 Fireworks 變換圖像導(dǎo)出到 Dreamweaver 時(shí)，可以使用 Dreamweaver 的“ 行為” 面板編輯 Fireworks 行為。16三、交互切片使切片具有簡(jiǎn)單的交互效果17三、交互切片使切片具有簡(jiǎn)單的交互效果通過(guò)從觸發(fā)切片拖動(dòng)行為手柄并將其放置在目標(biāo)切片上，可以輕松地創(chuàng)建變換圖像和交換圖像效果。觸發(fā)器和目標(biāo)可以是同一切片。18三、交互切片關(guān)于變換圖像變換圖像的工作方式都相同：當(dāng)鼠標(biāo)指針滑過(guò)一個(gè)圖形時(shí)，該操作將觸發(fā)另一個(gè)圖形的顯示。觸發(fā)器始終是一個(gè)網(wǎng)頁(yè)對(duì)象（切片、熱點(diǎn)或按鈕）19三、交互切片20三、交互切

8、片創(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ài)。4 創(chuàng)建、粘貼或?qū)胗米餍聽顟B(tài)上的交換圖像的圖像。將該圖像放在步驟 2 中創(chuàng)建的切片的下方。即使您現(xiàn)在位于狀態(tài) 2 中，該切片也可見(jiàn)。5 在“ 狀態(tài)” 面板中選擇“ 狀態(tài) 1” 返回到包含原始圖像的狀態(tài)。6 選擇切片并將指針?lè)旁谛袨槭直戏?1三、交互切片創(chuàng)建并附加不相交變換圖像當(dāng)指針在一個(gè)網(wǎng)頁(yè)對(duì)象上方滾動(dòng)時(shí)

9、，不相交變換圖像交換另一個(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)。22三、交互切片將多個(gè)變換圖像應(yīng)用到切片23四、使切片具有復(fù)雜的交互效果將多個(gè)變換圖像應(yīng)用到切片簡(jiǎn)單變換圖像通過(guò)將“ 狀態(tài) 1” 用作“ 彈起” 狀態(tài)以及將“ 狀態(tài) 2” 用作“ 滑過(guò)” 狀態(tài)來(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)航欄” 等

10、行為的行為組。24四、使切片具有復(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)前所選切片指定“ 按下” 狀態(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)欄文本使您能

11、夠定義在大多數(shù)瀏覽器窗口底部的狀態(tài)欄中顯示的文本。25四、使切片具有復(fù)雜的交互效果將行為附加到所選切片1 單擊“ 行為” 面板中的“ 添加行為” 按鈕2 選擇一個(gè)或多個(gè)行為。26四、使切片具有復(fù)雜的交互效果更改激活行為的鼠標(biāo)事件1 選擇包含要修改的行為的觸發(fā)器切片或熱點(diǎn)。與該切片或熱點(diǎn)關(guān)聯(lián)的所有行為都顯示在“ 行為” 面板中。2 選擇要編輯的行為。3 單擊事件旁邊的箭頭，然后從彈出菜單中選擇一個(gè)新事件?！?簡(jiǎn)單變換圖像” 行為沒(méi)有該選項(xiàng)。onMouseOver 在指針滑過(guò)觸發(fā)器區(qū)域時(shí)觸發(fā)行為。onMouseOut 在指針離開觸發(fā)器區(qū)域時(shí)觸發(fā)行為。onClick 在單擊觸發(fā)器對(duì)象時(shí)觸發(fā)行為。on

12、Load 在載入網(wǎng)頁(yè)時(shí)觸發(fā)行為。27四、使切片具有復(fù)雜的交互效果使用外部圖像文件作為交換圖像可以將當(dāng)前 Fireworks 文檔外部的圖像用作交換圖像的來(lái)源。源圖像可以是 GIF、GIF 動(dòng)畫、JPEG 或 PNG 格式。如果選擇將外部文件作為圖像源，則在 Web 瀏覽器中觸發(fā)交換圖像時(shí)， Fireworks 會(huì)將該文件與目標(biāo)切片相交換。1 在“ 交換圖像”、“ 滑過(guò)導(dǎo)航欄” 或“ 按下導(dǎo)航欄” 對(duì)話框中，選擇“ 圖像文件”，然后單擊文件夾圖標(biāo)。2 定位到要使用的文件，然后單擊“ 打開”。3 如果外部文件是 GIF 動(dòng)畫，請(qǐng)取消選擇“ 預(yù)先載入圖像”。這樣做可以防止在將 GIF 動(dòng)畫顯示為變換

13、圖像狀態(tài)時(shí)出現(xiàn)問(wèn)題。28五、準(zhǔn)備切片以供導(dǎo)出使用“ 屬性” 檢查器準(zhǔn)備要導(dǎo)出的切片。為切片指定 URL為切片指定 URL 后，用戶可通過(guò)在其 Web 瀏覽器中單擊切片所定義的區(qū)域來(lái)定位到該地址。要指定 URL，請(qǐng)?jiān)凇?屬性” 檢查器的“ 鏈接” 文本框中輸入 URL29五、準(zhǔn)備切片以供導(dǎo)出輸入替換文本對(duì)于越來(lái)越多使用屏幕朗讀應(yīng)用程序的視覺(jué)障礙人士，輸入簡(jiǎn)短而有意義的替換文本對(duì)他們非常重要。當(dāng)用戶將指針移過(guò)網(wǎng)頁(yè)上的圖形時(shí)，這些應(yīng)用程序會(huì)將替換文本轉(zhuǎn)換為計(jì)算機(jī)生成的語(yǔ)音。 在“ 屬性” 檢查器的“ 替換文本” 框中鍵入文本。30五、準(zhǔn)備切片以供導(dǎo)出設(shè)置默認(rèn)替換文本可以選擇尚未為其輸入替換文本的切片

14、和熱點(diǎn)，并為所有這些切片和熱點(diǎn)設(shè)置默認(rèn)替換文本。 選擇“ 命令”“ 網(wǎng)頁(yè)”“ 設(shè)置替換文本”，并輸入默認(rèn)替換文本。31五、準(zhǔn)備切片以供導(dǎo)出為所選切片或熱點(diǎn)指定目標(biāo)目標(biāo)是在其中打開鏈接文檔的替換網(wǎng)頁(yè)狀態(tài)或網(wǎng)頁(yè)瀏覽器。 在“ 目標(biāo)” 文本框中鍵入 HTML 狀態(tài)的名稱或從“ 目標(biāo)” 彈出菜單中選擇一個(gè)保留目標(biāo)：_blank 將鏈接文檔加載到一個(gè)新的未命名瀏覽器窗口中。_parent 將鏈接的文檔加載到包含該鏈接的狀態(tài)的父狀態(tài)集或窗口中。如果包含鏈接的狀態(tài)不是嵌套的，則鏈接文檔會(huì)加載到整個(gè)瀏覽器窗口中。_self 將鏈接的文檔加載到鏈接所在的同一狀態(tài)或窗口中。由于此目標(biāo)是默認(rèn)的，因此您通常不需要指定

15、它。_top 將鏈接的文檔加載到整個(gè)瀏覽器窗口中，從而刪除所有狀態(tài)。32五、準(zhǔn)備切片以供導(dǎo)出命名切片切片即是將一個(gè)圖像分割成多個(gè)部分。由于狀態(tài)的每個(gè)部分都分別導(dǎo)出，因此每個(gè)部分都必須有唯一的名稱。使用默認(rèn)的命名約定或指定自定義名稱。33五、準(zhǔn)備切片以供導(dǎo)出更改默認(rèn)的自動(dòng)命名約定 選擇“ 文件”“HTML 設(shè)置” 以打開“HTML 設(shè)置” 對(duì)話框。34五、準(zhǔn)備切片以供導(dǎo)出定義導(dǎo)出 HTML 表的方式選擇“ 文件”“HTML 設(shè)置”，或者單擊“ 導(dǎo)出” 對(duì)話框中的“ 選項(xiàng)” 按鈕。35六、熱點(diǎn)和圖像映射Web 設(shè)計(jì)人員可以使用熱點(diǎn)來(lái)使較大圖形中的各個(gè)小部分產(chǎn)生交互，并將網(wǎng)頁(yè)圖形的區(qū)域鏈接到 URL

16、。通過(guò)從包含熱點(diǎn)的文檔中導(dǎo)出 HTML，您可以在 Fireworks 中創(chuàng)建圖像映射。36六、熱點(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)。37六、熱點(diǎn)和圖像映射創(chuàng)建矩形或圓形熱點(diǎn)1 從“ 工具” 面板的“Web” 部分選擇“ 矩形熱點(diǎn)” 工具或“ 圓形熱點(diǎn)” 工具。創(chuàng)建非常規(guī)形狀熱點(diǎn)