切片變換圖像和熱點

切片變換圖像和熱點第一頁，共三十三頁，2022年，8月28日第12課：切片、變換圖像和熱點切片是MacromediaFireworks8中用于創(chuàng)建交互性的基本構造塊。切片是網頁對象,它們不是以圖像的形式存在，而是最終以HTML代碼的形式出現(xiàn)。可以通過“層”面板中的“網頁層”查看、選擇和重命名它們。本章描述切片的主要概念，并提供了使用切片將交互性結合到網頁中的步驟。使用拖放變換圖像方法將交互性附加到切片，可以在工作區(qū)中快速創(chuàng)建變換圖像和交換圖像效果?？梢栽凇靶袨椤泵姘逯胁榭粗付ǖ男袨椴⑹褂么嗣姘鍎?chuàng)建更復雜的交互。還可以使用熱點將交互性結合到網頁中。熱點用于創(chuàng)建圖像映射，即在HTML文檔中定義熱區(qū)的HTML代碼。這些區(qū)域不一定鏈接到某個地方；它們可能只是觸發(fā)一個行為或定義替代文本。熱點還可以接收鼠標事件，使得JavaScript行為在切片中起作用。本章包含以下主題：創(chuàng)建和編輯切片使切片交互準備切片以供導出使用熱點和圖像映射第二頁，共三十三頁，2022年，8月28日創(chuàng)建和編輯切片切片將Fireworks文檔分割成多個較小的部分并將每部分導出為單獨的文件。導出時，F(xiàn)ireworks還創(chuàng)建一個包含表格代碼的HTML文件，以便在瀏覽器中重新組合圖形。

切片將一個文檔分割成多個部分，它們都以單獨文件的形式導出。將圖像切片至少有三個主要優(yōu)點：“優(yōu)化”

網頁圖形設計的挑戰(zhàn)之一是在確保圖像快速下載的同時保證質量。切片使您可以使用最適合的文件格式和壓縮設置來優(yōu)化每個獨立切片。有關更多信息，請參閱優(yōu)化和導出?！敖换バ浴?/p>

您可以使用切片來創(chuàng)建響應鼠標事件的區(qū)域。有關如何使切片具有交互性的信息，請參閱使切片交互?！案戮W頁的某些部分”

切片使您可以輕松地更新網頁中經常更改的部分。例如，貴公司的網頁中可能包含每月更改一次的“本月雇員”部分。切片使您可以快速更改雇員的姓名和照片而不用更換整個網頁。第三頁，共三十三頁，2022年，8月28日創(chuàng)建HTML切片HTML切片指定瀏覽器中出現(xiàn)普通HTML文本的區(qū)域。HTML切片不導出圖像，它導出出現(xiàn)在由切片定義的表格單元格中的HTML文本。若要創(chuàng)建HTML切片：繪制切片對象并將其保留為選定狀態(tài)。在“屬性”檢查器中，從“類型”彈出菜單中選擇“HTML”。單擊“編輯”。在“編輯HTML切片”窗口中鍵入文本，如果需要，通過添加HTML文本格式設置標記來設置文本的格式。注意：或者，可以在使用文本編輯器或HTML編輯器（如MacromediaDreamweaver）導出HTML后，將HTML文本格式設置標記添加到HTML。單擊“確定”以應用更改并關閉“編輯HTML切片”窗口。您輸入的文本和HTML標記以原始HTML代碼的形式出現(xiàn)在FireworksPNG文件中切片的正文上。注意：在不同的瀏覽器以及不同的操作系統(tǒng)中查看HTML文本切片時，它們的外觀可能會有所變化，這是因為瀏覽器中可以設置字體大小和類型。第四頁，共三十三頁，2022年，8月28日創(chuàng)建非矩形切片當試圖將交互性附加到非矩形圖像時，矩形切片可能無法滿足需要。例如，如果打算將變換圖像行為附加到切片，而切片對象互相重疊或者形狀不規(guī)則，則矩形切片可能會與交換圖像交換出非您所要的背景圖形。Fireworks解決此問題的方法是：允許您使用“多邊形切片”工具繪制任何多邊形形狀的切片。您也可以在矢量路徑的頂部插入切片，以便創(chuàng)建不規(guī)則的切片形狀。若要繪制多邊形切片對象：選擇“多邊形切片”工具。單擊以放置多邊形的矢量點?！岸噙呅吻衅惫ぞ邇H繪制直線段。當在具有柔邊的對象周圍繪制多邊形切片對象時，請確保包括整個對象，以免在切片圖形中創(chuàng)建多余的實邊。若要停止使用“多邊形切片”工具，請從“工具”面板中選擇另一個工具。不必再次單擊第一個點以關閉多邊形。注意：請小心不要過度使用多邊形切片，這是因為與類似的矩形切片相比，它們需要更多的JavaScript代碼。使用太多的多邊形切片可能會增加Web瀏覽器的處理時間。若要從矢量對象或路徑創(chuàng)建矩形切片或多邊形切片：選擇一個矢量路徑。選擇“編輯”>“插入”>“插入矩形切片”或“插入多邊形切片”（具體取決于需要的形狀）。第五頁，共三十三頁，2022年，8月28日查看并顯示切片和切片輔助線可以使用“層”面板和“工具”面板控制文檔中切片和其它網頁對象的可見性。當關閉整個文檔的切片可見性時，切片輔助線也將被隱藏。使用“屬性”檢查器，可以通過為每個切片對象指定唯一的顏色來組織切片。您也可以通過“視圖”菜單更改切片輔助線的顏色。第六頁，共三十三頁，2022年，8月28日在“層”面板中查看切片“網頁層”顯示文檔中的所有網頁對象，以便可以選擇并查看每個網頁對象。若要在“層”面板中查看并選擇切片：選擇“窗口”>“層”以打開“層”面板。單擊加號(+)按鈕（在Windows中）或三角形（在Macintosh中）展開“網頁層”?！熬W頁層”顯示文檔中當前網頁對象的完整列表。單擊一個切片名稱以選擇該切片。切片在“網頁層”中高亮顯示，并且在畫布上處于選定狀態(tài)。第七頁，共三十三頁，2022年，8月28日顯示和隱藏切片隱藏一個切片時可使該切片在FireworksPNG文件中不可見?？梢躁P閉全部或某些網頁對象。由于切片是網頁對象，因此它們在“層”面板中的“網頁層”下面列出，在此處可以打開或關閉所選切片的可見性。也可以通過“工具”面板控制切片可見性。隱藏一個切片對象時并不會阻止將該切片導出到HTML。若要隱藏和顯示特定的切片和熱點：在“層”面板中單擊各個網頁對象旁邊的眼睛圖標。在“眼睛”列中單擊以重新打開可見性。當網頁對象再次可見時，眼睛圖標將重新出現(xiàn)。若要隱藏或顯示所有熱點、切片和輔助線，請執(zhí)行下列操作之一：在“工具”面板的“Web”工具部分中單擊適當?shù)摹半[藏/顯示切片”按鈕。

在“層”面板中，單擊“網頁層”旁邊的眼睛圖標。若要在任何文檔視圖中隱藏或顯示切片輔助線：選擇“視圖”>“切片輔助線”。第八頁，共三十三頁，2022年，8月28日更改切片和切片輔助線顏色如果文檔中使用的顏色與切片顏色相似，則在文檔中區(qū)分對象和切片會很困難。為了易于查看，您可以為選定的切片指定一個新顏色。為各個切片指定唯一的顏色還有助于對它們進行組織。您也可以改變切片輔助線的顏色。注意：當預覽文檔時，取消選擇的切片顯示為白色層疊。若要更改所選切片對象的顏色：在“屬性”檢查器中，從顏色框中選擇一種新顏色。若要更改切片輔助線的顏色：選擇“視圖”>“輔助線”>“編輯輔助線”。從“輔助線”對話框的“切片顏色”部分中選擇新顏色，并單擊“確定”。第九頁，共三十三頁，2022年，8月28日編輯切片在Fireworks中，可以像處理文字處理應用程序中的表格一樣處理切片布局。當拖動切片輔助線以調整切片大小時，F(xiàn)ireworks也將自動調整所有相鄰的矩形切片的大小。另外，可以使用“屬性”檢查器來調整切片大小以及將切片變形，就像對待矢量對象和位圖對象一樣。移動切片輔助線以編輯切片使用工具編輯切片對象:可以使用“指針”、“部分選定”和“變形”工具更改切片的形狀或調整切片的大小。您只能傾斜和扭曲多邊形切片。使用“屬性”檢查器或“信息”面板編輯切片對象第十頁，共三十三頁，2022年，8月28日使切片具有簡單的交互效果拖放變換圖像方法是創(chuàng)建變換圖像和交換圖像效果的快速而有效的方法。具體說來，拖放變換圖像方法使您可以確定指針經過一個切片時該切片所發(fā)生的變化。最終結果通常稱為變換圖像。變換圖像是在網頁瀏覽器中當指針經過其上方移動時，其外觀發(fā)生更改的圖形。當選定切片時，一個帶有十字的圓圈出現(xiàn)在切片的中央。這稱為行為手柄。通過從觸發(fā)切片拖動行為手柄并將其放置在目標切片上，可以輕松地創(chuàng)建變換圖像和交換圖像效果。觸發(fā)器和目標可以是同一切片熱點也具有用于結合變換圖像效果的行為手柄。

第十一頁，共三十三頁，2022年，8月28日變換圖像變換圖像的工作方式都是一樣的。當指針滑過一個圖形時，該圖形將觸發(fā)另一個圖形的顯示。觸發(fā)器始終是一個網頁對象—切片、熱點或按鈕。最簡單的變換圖像是將第1幀中的一個圖像與緊挨著它的下面第2幀中的圖像交換。您還可以生成更復雜的變換圖像。交換圖像的變換圖像可以交換來自任何幀的圖像；不相交變換圖像交換來自除觸發(fā)器切片之外的切片中的圖像。當在Fireworks中選擇一個使用行為手柄或“行為”面板創(chuàng)建的觸發(fā)器網頁對象時，將顯示它的所有行為關系。默認情況下，變換圖像交互由一條藍色行為線表示。

第十二頁，共三十三頁，2022年，8月28日創(chuàng)建簡單的變換圖像簡單變換圖像在頂部幀正下方的幀中進行交換，并且只涉及一個切片。簡單變換圖像附加到切片：確保該觸發(fā)器對象不在共享層上。選擇“編輯”>“插入”>“切片”以在觸發(fā)器對象上方創(chuàng)建切片。單擊“新建/復制幀”按鈕在“幀”面板中創(chuàng)建一個新幀。創(chuàng)建、粘貼或導入用作新幀上的交換圖像的圖像。將該圖像放在步驟2中創(chuàng)建的切片的下方（即使您現(xiàn)在位于第2幀中，該切片仍然可見）。切片在所有幀中都是可見的。在“幀”面板中選擇“第1幀”返回到包含原始圖像的幀。選擇切片并將指針放在行為手柄上方。指針隨即變?yōu)槭中巍?/p>

注意：您可在任何幀中選擇該切片。單擊行為手柄，并從菜單中選擇“簡單變換圖像”。單擊“預覽”選項卡并測試簡單變換圖像，或者按F12鍵在瀏覽器中預覽它。

第十三頁，共三十三頁，2022年，8月28日創(chuàng)建不相交變換圖像當指針在一個網頁對象上方滾動時，不相交變換圖像交換另一個網頁對象下方的圖像。當指針滑過或單擊一個觸發(fā)器圖像時，作為響應，在網頁的另一個位置中出現(xiàn)一個圖像。鼠標滑過的圖像被視為觸發(fā)器；發(fā)生更改的圖像被視為目標。與僅使用一個切片的簡單變換圖像一樣，首先必須對觸發(fā)器、目標切片和交換圖像所駐留的幀進行設置。然后，可以使用一條行為線將觸發(fā)器鏈接到目標切片。若要將不相交變換圖像附加到所選圖像：選擇“編輯”>“插入”>“切片”或“熱點”，將切片或熱點附加到觸發(fā)器圖像。注意：如果所選對象是按鈕，或者如果切片或熱點已經覆蓋圖像，則無需執(zhí)行此步驟。單擊“幀”面板中的“新建/復制幀”按鈕創(chuàng)建一個新幀。在畫布上所需位置的新幀中再放置一個用作目標的圖像?？蓪⒃搱D像放在任何位置（除了在步驟1創(chuàng)建的切片下方以外）。選擇圖像，然后選擇“編輯”>“插入”>“切片”將切片附加到圖像。在“幀”面板中選擇“第1幀”返回到包含原始圖像的幀。選擇覆蓋觸發(fā)器區(qū)域（原始圖像）的切片、熱點或按鈕，然后將指針放在行為手柄上。指針隨即變?yōu)槭中?。將觸發(fā)器切片或熱點的行為手柄拖到在步驟4中創(chuàng)建的目標切片。出現(xiàn)一條從觸發(fā)器中心延伸到目標切片左上角的行為線，同時打開“交換圖像”對話框。從“交換圖像自”彈出菜單中，選擇在步驟2中創(chuàng)建的幀，然后單擊“確定”。單擊“預覽”按鈕以預覽和測試不相交變換圖像。第十四頁，共三十三頁，2022年，8月28日將多個變換圖像應用到切片您可以從單個切片中拖動多個行為手柄來創(chuàng)建多個變換行為。例如，您可以從同一切片中觸發(fā)一個變換圖像和一個不相交變換圖像。若要將多個變換圖像應用到所選切片：將行為手柄從所選切片拖到同一切片的邊緣或其它切片上。將手柄拖動到同一切片的左上邊緣時可創(chuàng)建一個交換圖像，將手柄拖動到其它切片時可創(chuàng)建不相交變換圖像。選擇交換圖像的幀，然后單擊“確定”。根據(jù)需要，重復執(zhí)行步驟1和2可以創(chuàng)建多個變換圖像。第十五頁，共三十三頁，2022年，8月28日刪除拖放變換圖像您可以輕松地從切片、熱點或按鈕中刪除拖放變換圖像。若要從所選網頁對象或按鈕中刪除拖放變換圖像：單擊要刪除的藍色行為線。單擊“確定”即可刪除交換圖像行為。第十六頁，共三十三頁，2022年，8月28日用“行為”面板向切片添加交互效果除變換圖像以外，還可使用“行為”面板向切片中附加其它類型的交互效果?？赏ㄟ^編輯現(xiàn)有行為來創(chuàng)建自定義交互。注意：盡管可以使用“行為”面板創(chuàng)建簡單、不相交和復雜的變換圖像，但還是建議使用拖放變換圖像的方法?！昂唵巫儞Q圖像”通過將“第1幀”用作“彈起”狀態(tài)以及將“第2幀”用作“滑過”狀態(tài)來向所選切片添加變換圖像行為。選擇此行為后，需要使用同一切片在第2幀中創(chuàng)建一個圖像以創(chuàng)建“滑過”狀態(tài)?！昂唵巫儞Q圖像”選項實際上是包含“交換圖像”和“恢復交換圖像”行為的行為組。“交換圖像”使用另一個幀的內容或外部文件的內容來替換指定切片下面的圖像?！盎謴徒粨Q圖像”將目標對象恢復為它在“第1幀”中的默認外觀。“設置導航欄圖像”將切片設置為Fireworks導航欄的一部分。作為導航欄一部分的每個切片都必須具有此行為。“設置導航欄圖像”選項實際上是一個包含“滑過導航欄”、“按下導航欄”和“恢復導航欄”等行為的行為組。當使用按鈕編輯器創(chuàng)建一個包含“包括按下時滑過”狀態(tài)或“載入時顯示按下圖像”狀態(tài)的按鈕時，在默認情況下自動為您設置此行為。當創(chuàng)建兩種狀態(tài)的按鈕時，會為其切片指定簡單變換圖像行為。當創(chuàng)建三種或四種狀態(tài)的按鈕時，會為其切片指定“設置導航欄圖像”行為。有關按鈕的更多信息，請參閱創(chuàng)建按鈕元件?！盎^導航欄”為作為導航欄一部分的當前所選切片指定“滑過”狀態(tài)，還可根據(jù)需要指定“預先載入圖像”狀態(tài)和“包括按下時的滑過”狀態(tài)?！鞍聪聦Ш綑凇睘樽鳛閷Ш綑谝徊糠值漠斍八x切片指定“按下”狀態(tài)，并根據(jù)需要指定“預先載入圖像”狀態(tài)。“恢復導航欄”將導航欄中的所有其它切片恢復到它們的“彈起”狀態(tài)?！霸O置彈出菜單”將彈出菜單附加到切片或熱點上。當應用彈出菜單行為時，您可以使用“彈出菜單編輯器”。有關更多信息，請參閱創(chuàng)建彈出菜單?！霸O置狀態(tài)欄文本”使您能夠定義在大多數(shù)瀏覽器窗口底部的狀態(tài)欄中顯示的文本。第十七頁，共三十三頁，2022年，8月28日附加行為使用“行為”面板，可以向切片附加行為。還可以附加多個行為。若要使用“行為”面板向所選切片附加行為：單擊“行為”面板中的“添加行為”按鈕（“加號”按鈕）。通過“添加行為”按鈕選擇一個行為。第十八頁，共三十三頁，2022年，8月28日編輯行為“行為”面板還使您能夠對現(xiàn)有行為進行編輯?？梢灾付ㄓ|發(fā)該行為的鼠標事件類型（如onClick）。注意：不能更改“簡單變換圖像”和“設置導航欄圖像”事件。若要更改激活該行為的鼠標事件：選擇包含要修改的行為的觸發(fā)器切片或熱點。與該切片或熱點關聯(lián)的所有行為都顯示在“行為”面板中。選擇要編輯的行為。單擊事件旁邊的箭頭，然后從彈出菜單中選擇一個新事件：

“onMouseOver”在指針滑過觸發(fā)器區(qū)域時觸發(fā)行為?！皁nMouseOut”在指針離開觸發(fā)器區(qū)域時觸發(fā)行為。“onClick”在單擊觸發(fā)器對象時觸發(fā)行為?！皁nLoad”在載入網頁時觸發(fā)行為。第十九頁，共三十三頁，2022年，8月28日使用外部圖像文件作為交換圖像可以將當前Fireworks文檔外部的圖像用作交換圖像的來源。源圖像可以是GIF、GIF動畫、JPEG或PNG格式。如果選擇將外部文件作為圖像源，則在Web瀏覽器中觸發(fā)交換圖像時，F(xiàn)ireworks會將該文件與目標切片相交換。該文件的寬度和高度必須與它交換到的切片相同。如果不相同，則瀏覽器將調整該文件的大小使之適合切片對象。調整文件大小時可能降低文件質量，尤其是GIF動畫的質量。若要選擇外部圖像文件作為交換圖像的來源：在“交換圖像”、“滑過導航欄”或“按下導航欄”對話框中，選擇“圖像文件”，然后單擊文件夾圖標。注意：如果在“交換圖像”對話框中未看到此選項，請選擇“更多選項”，然后執(zhí)行步驟1。導航到要使用的文件，然后單擊“打開”。如果需要，請取消選擇“預先載入圖像”（如果外部文件是GIF動畫）。預緩存可能妨礙將GIF動畫顯示為變換圖像狀態(tài)。為了避免此問題，請在設置變換圖像時取消選擇“預先載入圖像”。第二十頁，共三十三頁，2022年，8月28日準備切片以供導出使用“屬性”檢查器，可通過向切片指定鏈接和目標框架來使它們具有交互效果。還可以指定在圖像正在載入時瀏覽器中顯示的替換文本。此外，還可選擇一種導出文件格式來優(yōu)化所選切片。如果“屬性”檢查器處于最小化狀態(tài)，單擊右下角的擴展箭頭可看到所有切片屬性?！皩傩浴睓z查器中的切片屬性使用“屬性”檢查器或“層”面板，可以為切片提供唯一的名稱。Fireworks使用您指定的名稱來命名在導出時從切片生成的文件。如果您未在“屬性”檢查器或“層”面板中輸入切片名稱，則Fireworks將在導出時自動命名切片?？赏ㄟ^“HTML設置”對話框更改Fireworks使用的自動命名慣例。Fireworks將經過切片的Fireworks文檔導出為一個HTML文件和一系列圖形文件?？梢允褂谩癏TML設置”對話框定義導出的HTML文件的屬性。第二十一頁，共三十三頁，2022年，8月28日指定URLURL（即統(tǒng)一資源定位器）是Internet上特定頁或文件的地址。為切片指定URL后，用戶可通過在其Web瀏覽器中單擊切片所定義的區(qū)域來導航到該地址。若要為所選切片指定URL：在“屬性”檢查器的“鏈接”文本框中輸入一個URL。第二十二頁，共三十三頁，2022年，8月28日輸入替換文本從網頁中下載圖像時，替換文本出現(xiàn)在圖像占位符上；替換文本還替換未能下載的圖形。在某些較新版本的瀏覽器中，該文本還出現(xiàn)在指針旁邊作為工具提示。輸入簡短而有意義的替換文本在網頁設計中已經變得越來越重要。越來越多的視覺障礙人士在使用屏幕朗讀應用程序，當指針經過網頁上的圖形時，該應用程序將替換文本轉換為計算機生成的語音。若要為所選切片或熱點指定替換文本：在“屬性”檢查器的“替換文本”框中鍵入文本。第二十三頁，共三十三頁，2022年，8月28日指定目標目標是在其中打開鏈接文檔的替換網頁框架或網頁瀏覽器窗口?？梢栽凇皩傩浴睓z查器中為所選切片指定目標。如果“屬性”檢查器處于最小化狀態(tài)，單擊擴展箭頭可看到所有屬性。若要在“屬性”檢查器中為所選切片或熱點指定目標：在“目標”文本框中鍵入HTML框架的名稱或從“目標”彈出菜單中選擇一個保留目標：“blank”將鏈接文檔加載到一個新的未命名瀏覽器窗口中?！皃arent”將鏈接的文檔加載到包含該鏈接的框架的父框架集或窗口中。如果包含該鏈接的框架不是嵌套的，則將鏈接的文檔加載到整個瀏覽器窗口?！皊elf”將鏈接的文檔加載到鏈接所在的框架或窗口中。此目標是隱含的，因此通常無須指定它?！癬top”將鏈接的文檔加載到整個瀏覽器窗口，從而刪除所有框架。第二十四頁，共三十三頁，2022年，8月28日導出設置可以通過從“屬性”檢查器或“優(yōu)化”面板的“導出設置”彈出菜單中選擇一個選項來優(yōu)化切片。第二十五頁，共三十三頁，2022年，8月28日命名切片切片即是將一個圖像分割成多個部分。Fireworks將每個幀上的每個部分都導出為單獨的文件，因此每個文件都必須有一個名稱。Fireworks在導出時自動對每個切片文件進行命名。可以接受默認的命名慣例、更改此慣例或者為每個切片輸入一個自定義名稱。更改默認的自動命名慣例您可以在“HTML設置”對話框的“文檔特定信息”選項卡中更改切片的命名慣例。第二十六頁，共三十三頁，2022年，8月28日定義導出HTML表的方式切片定義了在導出Fireworks文檔以供在網頁上使用時HTML表結構的顯示方式。將一個經過切片的Fireworks文檔導出到HTML中時，文檔將使用HTML表重新裝配。Fireworks文檔中的每個切片元素都駐留在一個表單元格中。導出后，F(xiàn)ireworks切片就轉換到HTML中的表單元格?？梢灾付ㄔ跒g覽器中重建Fireworks表的方式。除了其它選項以外，還可以選擇在導出到HTML時是使用間隔符還是使用嵌套表格：間隔符是指在瀏覽器中查看表格單元格時，有助于表格單元格正確對齊的圖像。嵌套表格是指表格內的表格。嵌套表格不使用間隔符。它們在瀏覽器中的加載速度可能更慢，但由于沒有間隔符，編輯其HTML也會更加容易。第二十七頁，共三十三頁，2022年，8月28日使用熱點和圖像映射Web設計人員可以使用熱點來使較大圖形中的各個小部分產生交互，并將網頁圖形的區(qū)域鏈接到URL。通過從包含熱點的文檔中導出HTML，您可以在Fireworks中創(chuàng)建圖像映射。包含熱點的圖像映射熱點和圖像映射通常要比切片圖形要求的資源少。對于Web瀏覽器來說，切片要求的資源會更多，因為它們必須下載附加的HTML代碼，并且需要重新裝配切片圖形所需的處理能力。第