第九章切片、變換圖像和熱點

第9章切片、變換圖像和熱點

切片9.1使切片交互9.2將準備的切片導出9.3使用熱點和圖像映射9.49.1切片9.1.1創(chuàng)建切片9.1.2查看并顯示切片和切片輔助線9.1.3編輯切片9.2使切片交互9.2.1使切片具有簡單的交互效果9.2.2使用“行為”面板向切片添加交互效果9.3將準備的切片導出9.3.1指定URL9.3.2

輸入替換文本9.3.3

指定目標9.3.4命名切片9.4使用熱點和圖像映射9.4.1創(chuàng)建熱點9.4.2編輯熱點9.4.3用熱點創(chuàng)建圖像映射9.4.4用熱點創(chuàng)建變換圖像9.4.5在切片上使用熱點9.1切片

切片是Fireworks中用于創(chuàng)建交互效果的基本構(gòu)造，它是最終以HTML代碼形式存在的網(wǎng)頁對象。9.1.1創(chuàng)建切片

“工具”面板“Web”工具組中的“切片”工具，可以創(chuàng)建切片對象。使用“切片”工具，可以在對象上創(chuàng)建矩形切片和多邊形切片。創(chuàng)建矩形切片選擇“切片”工具后，拖動，即可繪制切片對象。創(chuàng)建的切片對象出現(xiàn)在“網(wǎng)頁層”中，從切片對象延伸的線是切片輔助線。切片輔助線可以確定導出文檔時將文檔拆分成的單獨圖像文件的邊界。創(chuàng)建多邊形切片從矢量對象或路徑創(chuàng)建多邊形切片時，首先選擇矢量路徑，然后單擊“編輯”菜單中的“插入”→“插入多邊形切片”命令，即可創(chuàng)建。創(chuàng)建HTML切片HTML切片不導出圖像，它導出由切片定義的表格單元格中的HTML文本。創(chuàng)建HTML切片，則首先繪制切片對象并將其保留為選定狀態(tài)，在“屬性”檢查器的“類型”下拉菜單中選擇“HTML”，然后單擊“編輯”按鈕，在“編輯HTML切片”對話框中編輯完成后，單擊“確定”。9.1.2查看并顯示切片和切片輔助線當在文檔的對象上創(chuàng)建切片后，對文檔進行編輯，將會影響編輯效果。因此，可以通過“圖層”面板和“工具”面板將文檔中的切片對象進行隱藏，當隱藏切片時，切片輔助線也將被隱藏，還可以為每個切片對象指定唯一的顏色或更改切片輔助線的顏色。查看切片切片要在“圖層”面板中點擊查看。首先展開“網(wǎng)頁層”，在“網(wǎng)頁層”內(nèi)單擊切片名稱，選中該切片。此時該切片在“網(wǎng)頁層”中高亮顯示，并且在畫布上處于選定狀態(tài)。單擊“網(wǎng)頁層”右上角的按鈕，可以選中文檔中所有的切片。顯示和隱藏切片

隱藏切片時可使該切片在FireworksPNG文件中不可見，但可以在HTML中導出隱藏的切片對象。

單擊單個網(wǎng)頁對象左側(cè)的眼睛圖標，可以將該切片隱藏，此時眼睛圖標位置顯示為空，再單擊該位置，可以使切片重新可見。單擊“網(wǎng)頁層”左側(cè)的眼睛圖標，可以將在“網(wǎng)頁層”的所有切片隱藏。更改切片對象和輔助線的顏色

更改所選切片對象的顏色，在“屬性”檢查器的顏色框中選擇新顏色。

更改切片輔助線的顏色，單擊“編輯”菜單中的“首選參數(shù)”命令，在“首選參數(shù)”對話框左側(cè)的“輔助線和網(wǎng)格”類別中選擇新的切片輔助線顏色。9.1.3編輯切片

在Fireworks中，可以對切片的布局進行設計，可以直接拖動切片輔助線調(diào)整其大小。

Fireworks會自動調(diào)整所有相鄰的矩形切片的大小。另外，可以通過使用“屬性”檢查器調(diào)整切片大小以及將切片變形。移動切片輔助線調(diào)整切片的大小

調(diào)整一個或多個切片的大小時，首先將“指針”或“部分選定”工具放在切片輔助線上，此時指針變?yōu)檩o助線移動指針；然后將切片輔助線拖動到所需位置，切片大小即被調(diào)整，并且所有相鄰切片也自動調(diào)整大小。使用工具編輯切片對象

使用“指針”、“部分選定”和“變形”工具可以更改切片的形狀和切片的大小。但是對于多邊形切片，只能使用“傾斜”和“扭曲”工具編輯。對切片的形狀進行編輯時，首先選擇切片，然后選擇“指針”或“部分選定”工具，拖動切片的角點，修改其形狀或者使用變形工具執(zhí)行所需的變形。刪除切片

需要刪除切片時，在“圖層”面板的“網(wǎng)頁層”中，選擇要刪除的切片，單擊面板底部的“刪除所選”按鈕。

使用“指針”工具在畫布上選擇了切片并將該切片刪除時，會刪除整個按鈕元件。若要保留底層圖形，先使用“指針”工具在畫布上選擇切片/對象，然后單擊“修改”菜單中的“元件”→“分離”命令。該切片消失，但會保留該按鈕圖形。9.2使切片交互

Fireworks提供了兩種使切片交互的方式：（一）拖放變換圖像方法，只需要拖動切片的行為手柄并將其放在目標切片中，即可快速創(chuàng)建簡單的交互效果；（二）在“行為”面板中創(chuàng)建更復雜的交互，“行為”面板包含各種交互行為，可以將它們附加到切片中。9.2.1使切片具有簡單的交互效果當選定切片時，拖動行為手柄并將其放置在目標切片上，可以輕松地創(chuàng)建變換圖像和交換圖像效果。觸發(fā)器和目標可以是同一切片。熱點也具有用于結(jié)合變換圖像效果的行為手柄。創(chuàng)建簡單的交換圖像

變換圖像的工作方式是當指針滑過一個圖形時，該圖形將觸發(fā)另一個圖形的顯示，創(chuàng)建簡單的變換圖像是將兩個重疊的狀態(tài)進行交換，并且只涉及一個切片。創(chuàng)建簡單的交換圖像將簡單變換圖像附加到切片，單擊“編輯”菜單中的“插入”→“矩形切片”或“多邊形切片”命令，在觸發(fā)器對象上方創(chuàng)建切片。接著在“狀態(tài)”面板中創(chuàng)建一個新的狀態(tài)，在“狀態(tài)”面板中返回到包含原始圖像的狀態(tài)。選擇切片，并將指針放在行為手柄上方，用鼠標右鍵單擊行為手柄，在彈出的快捷菜單中單擊“添加簡單變換圖像行為”命令。

9.2.2使用“行為”面板向切片添加交互效果通過使用“行為”面板，可以向切片中附加其他類型的交互效果。通過編輯現(xiàn)有行為創(chuàng)建自定義交互?！靶袨椤表毥?jīng)過“行為”面板應用于“切片”或“熱點”對象中。行為面板使用外部圖像文件作為交換圖像要選擇外部圖像文件作為交換圖像的來源，可以在“交換圖像”對話框、“滑過導航欄”對話框或“按下導航欄”對話框中，選擇“圖像文件”單選項，然后單擊文件夾按鈕，從圖像文件導航到要使用的文件，然后單擊“打開”按鈕。9.3將準備的切片導出

將準備好的切片導出時，要在“屬性”檢查器中，為切片指定鏈接和目標框架；也可以指定圖像在載入時，瀏覽器中顯示的替換文本，還可選擇一種導出文件格式優(yōu)化所選切片。

“屬性”檢查器或“圖層”面板可以為切片提供唯一的名稱，在導出文件時會使用指定的名稱來命名。如果未輸入切片名稱，在導出文件時，F(xiàn)ireworks將自動命名切片。將切片導出到CSSSprite將切片與圖像文件一起導出為CSSSprite圖像時，會生成包含位移值的CSS文件。右鍵單擊切片或切片組，選擇“導出CSSSprite”，在“導出”對話框中，輸入PNG文件名，單擊“導出”命令。9.3.1指定URL

為所選切片指定URL，可以在“屬性”檢查器的“鏈接”文本框中輸入一個URL。

如果文件包含多個要導出的頁面，則使用“鏈接”下拉菜單為URL選擇一個頁面。9.3.2輸入替換文本選擇不含替換文本的切片或熱點為尚未輸入替換文本的切片和熱點，設置空白替換文本。單擊“命令”菜單下的“網(wǎng)頁”→“選擇空白替換文本”命令。設置默認替換文本為尚未輸入替換文本的切片和熱點，設置默認替換文本。單擊“命令”菜單下的“網(wǎng)頁”子菜單“設置替換文本”，輸入默認替換文本。9.3.3指定文本

目標是在其中打開鏈接文檔的替換網(wǎng)頁框架或網(wǎng)頁瀏覽器窗口。在“屬性”檢查器中為所選切片或熱點指定目標，在“目標”文本框中，輸入HTML框架的名稱，或直接從“目標”下拉菜單中，選擇一個目標。9.3.4命名切片輸入自定義切片名稱，在畫布上選擇切片，然后在“屬性”檢查器的“對象名稱”框中輸入一個名稱后按“Enter”鍵；或者在“網(wǎng)頁層”中雙擊切片，在彈出的文本框中輸入一個新名稱，然后按“Enter”鍵。9.4使用熱點和圖像映射使用熱點可以將圖像的某些區(qū)域鏈接到其他網(wǎng)頁，不需要這些區(qū)域為響應鼠標的移動或動作，而高亮顯示或者產(chǎn)生變換圖像效果。9.4.1創(chuàng)建熱點

使用“矩形熱點”工具、“圓形熱點”工具或“多邊形熱點”（非常規(guī)形狀）工具，可以在圖形的目標區(qū)域周圍繪制熱點；也可以在選擇對象上插入熱點。創(chuàng)建矩形或圓形熱點

創(chuàng)建矩形或圓形熱點，則首先從“工具”面板的“Web”工具區(qū)選擇“矩形熱點”工具或“圓形熱點”工具，然后拖動熱點工具，在圖形的某個區(qū)域上進行繪制。按住“Alt”鍵可以從中心點開始繪制。創(chuàng)建非常規(guī)形狀熱點

創(chuàng)建非常規(guī)形狀熱點，選擇“多邊形熱點”工具，單擊，以放置矢量點。這與使用“鋼筆”工具繪制直線段類似，不管路徑是開口的還是閉合的，填充都可以定義熱點區(qū)域。通過跟蹤選定對象創(chuàng)建熱點當通過跟蹤一個或多個選定對象創(chuàng)建熱點時，單擊“編輯”菜單中的“插入”→“熱點”命令。9.4.2編輯熱點

使用“指針”工具、“部分選定”工具或者“變形”工具點可以編輯熱點。熱點的形狀有：“矩形”、“圓形”

和“多邊形”。

在“屬性”檢查器中，可以為熱點指定URL、替換文本、目標和自定義名稱。9.4.3用熱點創(chuàng)建圖像映射

導出圖像映射或?qū)⑵鋸椭频郊糍N板中時，首先對圖形進行優(yōu)化，使其做好導出準備。單擊“文件”菜單中的“導出”命令。指定要存放HTML文件的文件夾，并為文件命名，在“導出”下拉列表中，選擇“HTML和圖像”，設置完成后，單擊“瀏覽”按鈕，選擇適當?shù)奈募A。最后單擊“保存”按鈕，關閉“導出”對話框。9.4.4用熱點創(chuàng)建圖像映射

導出圖像映射或?qū)⑵鋸椭频郊糍N板中時，首先對圖形進行優(yōu)化，使其做好導出準備。單擊“文件”菜單中的“導出”命令。指定要存放HTML文件的文件夾，并為文件命名，在“導出”下拉列表中，選擇“HTM