Fireworks_切片、變換圖像和熱點.ppt

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

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

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

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

5、過添加 HTML 文本格式設置標簽來設置文本的格式。 注： 或者，在導出 HTML 之后應用 HTML 文本格式設置標簽。 5 單擊“ 確定” 以應用更改并關閉“ 編輯 HTML 切片” 窗口。,一、切片、變換圖像和熱點,查看并選擇切片 “ 網頁層” 顯示文檔中的所有網頁對象。 1 選擇“ 窗口”“ 層”。 2 單擊三角形展開“ 網頁層”。 3 單擊一個切片名稱以選擇該切片。,一、切片、變換圖像和熱點,顯示和隱藏切片 隱藏一個切片時可使該切片在 Fireworks PNG 文件中不可見?？梢栽?HTML 中導出隱藏的切片對象。 若要隱藏個別切片，請在“ 層” 面板中單擊各個網頁對象旁邊的眼睛圖

6、標。 若要顯示隱藏的切片，請在“ 眼晴” 列中單擊以重新打開可見性。 若要隱藏或顯示所有熱點、切片和輔助線，請在“工具”面板的“Web”工具部分中單擊相應的“隱藏/顯示切片”按鈕， 或單擊“ 層” 面板中“ 網頁層” 旁邊的眼睛圖標。,一、切片、變換圖像和熱點,更改切片對象和輔助線的顏色 “ 編輯”“ 首選參數”的“ 輔助線和網格” 類別中選擇新的切片輔助線顏色,二、編輯切片,通過移動切片輔助線來編輯切片,如果多個切片對象沿單個切片輔助線對齊，則可以拖動該切片輔助線來同時調整全部切片對象的大小。,二、編輯切片,調整一個或多個切片的大小 1 將“ 指針” 或“ 部分選定” 工具放在切片輔助線上。

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

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

9、切片的下方。即使您現在位于狀態(tài) 2 中，該切片也可見。 5 在“ 狀態(tài)” 面板中選擇“ 狀態(tài) 1” 返回到包含原始圖像的狀態(tài)。 6 選擇切片并將指針放在行為手柄上方,三、交互切片,創(chuàng)建并附加不相交變換圖像 當指針在一個網頁對象上方滾動時，不相交變換圖像交換另一個網頁對象下方的圖像。當指針滑過或單擊一個觸發(fā)器圖像時，作為響應，在網頁的另一個位置中出現一個圖像。鼠標滑過的圖像為觸發(fā)器；發(fā)生更改的圖像為目標。,三、交互切片,將多個變換圖像應用到切片,四、使切片具有復雜的交互效果,將多個變換圖像應用到切片 簡單變換圖像通過將“ 狀態(tài) 1” 用作“ 彈起” 狀態(tài)以及將“ 狀態(tài) 2” 用作“ 滑過” 狀態(tài)

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

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

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

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

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

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

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