第九章切片、變換圖像和熱點(diǎn)

第9章切片、變換圖像和熱點(diǎn)

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

輸入替換文本9.3.3

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

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

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

隱藏切片時(shí)可使該切片在FireworksPNG文件中不可見，但可以在HTML中導(dǎo)出隱藏的切片對(duì)象。

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

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

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

在Fireworks中，可以對(duì)切片的布局進(jìn)行設(shè)計(jì)，可以直接拖動(dòng)切片輔助線調(diào)整其大小。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

和“多邊形”。

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

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

導(dǎo)出圖像映射或?qū)⑵鋸?fù)制到剪貼板中時(shí)，首先對(duì)圖形進(jìn)行優(yōu)化，使其做好導(dǎo)出準(zhǔn)備。單擊“文件”菜單中的“導(dǎo)出”命令。指定要存放HTML文件的文件夾，并為文件命名，在“導(dǎo)出”下拉列表中，選擇“HTM