使用創(chuàng)建對(duì)象第1頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月

7.1編輯元件7.1.1創(chuàng)建元件

FireworksMX2004提供三種類型的元件：圖形、動(dòng)畫和按鈕。要?jiǎng)?chuàng)建元件，可使用菜單“編輯”→“插入”→“新建元件”或者在“庫(kù)”面板的“選項(xiàng)”菜單中使用菜單“新建元件”，在彈出的“元件屬性”對(duì)話框中輸入元件的名稱并選擇元件類型。第2頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.1.2編輯元件

（1）要編輯元件，雙擊某個(gè)實(shí)例或選擇某個(gè)實(shí)例后使用菜單“修改”→“元件”→“編輯元件”。（2）在“庫(kù)”面板中選中某個(gè)元件后選擇“選項(xiàng)”菜單的“編輯元件”，打開“元件編輯器”窗口，對(duì)該元件進(jìn)行修改后單擊“完成”按鈕關(guān)閉窗口。可對(duì)元件進(jìn)行重命名，復(fù)制，更改其類型和刪除等操作。編輯元件的方法：第3頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.1.3導(dǎo)入、導(dǎo)出元件

使用菜單“編輯”→“庫(kù)”，選擇相關(guān)的庫(kù)，打開“導(dǎo)入元件”對(duì)話框，選擇需要導(dǎo)入的元件，單擊“導(dǎo)入”按鈕，導(dǎo)入的元件隨即出現(xiàn)在“庫(kù)”面板中。如果已在Fireworks文檔中創(chuàng)建或?qū)肓嗽Ｍ麑⑵浔４嬉员阒匦率褂茫梢栽凇皫?kù)”面板的“選項(xiàng)”菜單中選擇“導(dǎo)出元件”，在彈出的“導(dǎo)出元件”對(duì)話框中選擇要導(dǎo)出的元件，單擊“導(dǎo)出”按鈕，輸入文件名后單擊“保存”按鈕。第4頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.2編輯切片切片將Fireworks文檔分割成多個(gè)較小部分，并將每部分導(dǎo)出為單獨(dú)的文件。切片可以進(jìn)一步優(yōu)化圖像、指定交互性，更新部分圖像。7.2.1創(chuàng)建切片如要基于所選對(duì)象插入矩形切片，可使用菜單“編輯”→“插入”→“切片”。該切片是一個(gè)矩形，它的區(qū)域包括所選對(duì)象最外面的邊緣。第5頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月要從矢量路徑創(chuàng)建多邊形切片，先選擇一個(gè)矢量路徑，使用菜單“編輯”→“插入”→“熱點(diǎn)”，再使用菜單“編輯”→“插入”→“切片”，即可生成一個(gè)與該矢量對(duì)象形狀一致的切片。如要更改所選切片對(duì)象的顏色，可在“屬性”面板中從顏色框中選擇一種新顏色。如要更改切片輔助線的顏色，可使用菜單“視圖”→“輔助線”→“編輯輔助線”，在彈出的如圖7.7所示的“輔助線”對(duì)話框的“切片顏色”中設(shè)置新顏色，單擊“確定”按鈕。第6頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.2.2編輯切片要調(diào)整切片的大小，可選擇“指針”工具或“部分選定”工具并放在切片引導(dǎo)線上，拖動(dòng)切片引導(dǎo)線到所需位置，切片大小隨即被調(diào)整，并且所有相鄰的切片也自動(dòng)調(diào)整大小。要移動(dòng)相鄰輔助線，可按下[Shift]鍵并拖動(dòng)一個(gè)切片輔助線經(jīng)過(guò)相鄰的切片輔助線，并在所需位置釋放該切片輔助線，則拖動(dòng)時(shí)經(jīng)過(guò)的所有切片輔助線都將移到此位置。要編輯所選切片的形狀，可選擇“指針”工具或“部分選定”工具，然后拖動(dòng)切片的角點(diǎn)修改其形狀，或者使用變形工具來(lái)執(zhí)行所需的變形。第7頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月

7.2.3使用拖放方式添加交互拖放變換圖像方法是創(chuàng)建變換圖像和交換圖像效果的快速而有效的方法。拖放變換圖像方法可以確定指針經(jīng)過(guò)一個(gè)切片時(shí)該切片所發(fā)生的變化，最終結(jié)果通常稱為變換圖像。默認(rèn)情況下，變換圖像交互由一條藍(lán)色行為線表示。行為手柄

第8頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.2.4使用“行為“面板添加交互如果使用“行為”面板向所選切片附加行為，可使用菜單“窗口”→“行為”，單擊“行為”面板中的“添加行為”刪除行為只需選中“行為”面板中的行為，并單擊“刪除行為”按鈕第9頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.2.5導(dǎo)出切片如果未在“屬性”面板或“層”面板中輸入切片名稱，則Fireworks將在導(dǎo)出時(shí)自動(dòng)命名切片，可通過(guò)“HTML設(shè)置”對(duì)話框更改自動(dòng)命名慣例。如要為所選切片指定替代文本，可在“屬性”面板的“Alt”文本框中鍵入文本。將一個(gè)經(jīng)過(guò)切片的Fireworks文檔導(dǎo)出到HTML中時(shí)，文檔將使用HTML表重新裝配。Fireworks文檔中的每個(gè)切片元素都駐留在一個(gè)表單元格中。導(dǎo)出后，F(xiàn)ireworks切片就轉(zhuǎn)換到HTML中的表單元格。可以指定在瀏覽器中重建Fireworks表的方式。第10頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.3編輯熱點(diǎn)7.3.1創(chuàng)建熱點(diǎn)“矩形熱點(diǎn)”工具“圓形熱點(diǎn)”工具“多邊形熱點(diǎn)”工具利用以上工具可以在圖像的目標(biāo)區(qū)域繪制熱點(diǎn)或者選擇一個(gè)對(duì)象后在該對(duì)象上插入熱點(diǎn)。在圖形的某個(gè)區(qū)域上繪制熱點(diǎn)（按住[Alt]鍵可從中心點(diǎn)開始繪制）。如要?jiǎng)?chuàng)建復(fù)雜形狀熱點(diǎn)，可選擇“工具”面板中的“多邊形熱點(diǎn)”工具，單擊圖像放置矢量節(jié)點(diǎn)，填充都將定義熱點(diǎn)區(qū)域。第11頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.3.2編輯熱點(diǎn)

熱點(diǎn)是網(wǎng)頁(yè)對(duì)象，可使用“指針”工具、“部分選定”工具和“變形”工具對(duì)其進(jìn)行編輯。也可使用“屬性”面板或“信息”面板，以數(shù)字方式更改熱點(diǎn)的位置和大小。要將所選熱點(diǎn)轉(zhuǎn)換為矩形、圓形或多邊形熱點(diǎn)，可在“屬性”面板的“形狀”下拉列表框中選擇“矩形”、“圓形”或“多邊形”。以使用“屬性”面板為熱點(diǎn)指定鏈接、替代文本、目標(biāo)和自定義名稱。第12頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.3.3創(chuàng)建圖像映射在圖形上創(chuàng)建熱點(diǎn)之后，必須將該圖形導(dǎo)出為圖像映射，使其可以在Web瀏覽器中運(yùn)行。要導(dǎo)出圖像映射或?qū)⑵鋸?fù)制到剪貼板中，可使用菜單“文件”→“導(dǎo)出”，在彈出的“導(dǎo)出”對(duì)話框中的“文件名”文本框中輸入文件名，在“保存類型”下拉列表框中選擇“HTML和圖像”。第13頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.3.4用熱點(diǎn)創(chuàng)建變換圖像一個(gè)熱點(diǎn)只能觸發(fā)一個(gè)不相交的變換圖像，它不能是來(lái)自其它熱點(diǎn)或切片的變換圖像的目標(biāo)。如要使用切片上的熱點(diǎn)創(chuàng)建變換圖像效果的觸發(fā)器，可將一個(gè)切片插入到要交換出去的圖像上，再在圖像上的觸發(fā)器創(chuàng)建熱點(diǎn)，在“幀”面板中創(chuàng)建一個(gè)新幀，然后插入要用作被交換圖像的圖像，將一條行為線從熱點(diǎn)拖到包含要交換的圖像的切片上，打開“交換圖像”對(duì)話框，從“交換圖像自”下拉列表中選擇保存有變換圖像的幀，單擊“確定”按鈕。第14頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.4編輯按鈕7.4.1創(chuàng)建按鈕元件

按鈕最多有四種不同的狀態(tài)，每種狀態(tài)都表示該按鈕在響應(yīng)鼠標(biāo)事件時(shí)的外觀：“彈起”狀態(tài)是按鈕的默認(rèn)外觀或靜止時(shí)的外觀；“滑過(guò)”狀態(tài)是當(dāng)指針滑過(guò)按鈕時(shí)該按鈕的外觀；“按下”狀態(tài)表示單擊后的按鈕，按鈕的凹下圖像通常用于表示按鈕已按下；“按下時(shí)滑過(guò)”狀態(tài)是在用戶將指針滑過(guò)處于“按下”狀態(tài)的按鈕時(shí)按鈕的外觀。第15頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月（1）使用菜單“編輯”→“插入”→“新建按鈕”，打開按鈕編輯器窗口，制作一個(gè)按鈕。創(chuàng)建按鈕的方法：

（2）單擊“導(dǎo)入按鈕”按鈕在“導(dǎo)入元件：按鈕”對(duì)話框中選擇一個(gè)按鈕。第16頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.4.2編輯按鈕元件要編輯元件級(jí)的按鈕屬性，可雙擊工作區(qū)中的按鈕實(shí)例或在“庫(kù)”面板中雙擊按鈕元件圖標(biāo)，在彈出的按鈕編輯器中更改按鈕的特性，然后單擊“完成”按鈕。如需編輯某個(gè)實(shí)例的屬性，可選擇單個(gè)實(shí)例后，在“屬性”面板編輯實(shí)例屬性，不會(huì)影響該元件的關(guān)聯(lián)元件或任何其它實(shí)例。7.4.3設(shè)置交互按鈕屬性

使用Fireworks可以控制按鈕的交互元素，包括活動(dòng)區(qū)域、鏈接、目標(biāo)和替代文本。要編輯按鈕元件的活動(dòng)區(qū)域中的切片或熱點(diǎn)，可雙擊工作區(qū)中的按鈕實(shí)例或在“庫(kù)”面板中雙擊元件圖標(biāo)。第17頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.4.4創(chuàng)建導(dǎo)航欄導(dǎo)航欄是指提供到網(wǎng)站不同區(qū)域鏈接的一組按鈕，它通常在整個(gè)站點(diǎn)上保持一致，從而可以提供一種固定的導(dǎo)航方法，而不管用戶處在站點(diǎn)中的什么位置上。如要?jiǎng)?chuàng)建導(dǎo)航欄，可先創(chuàng)建一個(gè)按鈕元件，然后從“庫(kù)”面板中將該元件的一個(gè)實(shí)例拖到工作區(qū)中，選擇該按鈕實(shí)例，然后使用菜單“編輯”→“克隆”，用箭頭鍵移動(dòng)或用鼠標(biāo)拖動(dòng)實(shí)例到合適的位置。第18頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.5制作彈出菜單7.5.1創(chuàng)建基本彈出菜單

（1）選擇一個(gè)熱點(diǎn)或切片作為彈出菜單的觸發(fā)器區(qū)域，使用菜單“修改”→“彈出菜單”→“添加彈出菜單”。

創(chuàng)建彈出菜單的基本步驟：（2）單擊“內(nèi)容“選項(xiàng)卡中的“添加菜單”按鈕（3）雙擊每個(gè)單元格并輸入或選擇適當(dāng)?shù)男畔?/p>

（4）單擊“繼續(xù)”按鈕或“外觀”選項(xiàng)卡，在彈出的對(duì)話框中設(shè)置菜單的方向?yàn)榇怪辈藛位蛩讲藛我约拔谋镜淖煮w、大小、顏色、對(duì)齊方式等。第19頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月

（5）單擊“繼續(xù)”按鈕或“高級(jí)”選項(xiàng)卡，在彈出的對(duì)話框中設(shè)置菜單中單元格的大小、邊距、間距、文字縮進(jìn)、菜單消失延時(shí)，以及邊框?qū)挾取㈩伾㈥幱昂透吡恋葘傩浴?/p>

（6）單擊“繼續(xù)”按鈕或“高級(jí)”選項(xiàng)卡，在彈出的對(duì)話框中設(shè)置菜單中單元格的大小、邊距、間距、文字縮進(jìn)、菜單消失延時(shí)，以及邊框?qū)挾取㈩伾㈥幱昂透吡恋葘傩浴?/p>

（7）設(shè)置完成后，單擊“完成”按鈕，關(guān)閉“彈出菜單編輯器”。第20頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.5.2編輯、導(dǎo)出彈出菜單

在“彈出菜單編輯器”中，可以編輯或更新彈出菜單的內(nèi)容，重新排列菜單項(xiàng)，或者更改四個(gè)選項(xiàng)卡中任一選項(xiàng)卡上的其它屬性。

選擇彈出菜單所附加到的切片或熱點(diǎn)，在工作區(qū)中雙擊彈出菜單的藍(lán)色輪廓或使用菜單“修改”→“彈出菜單”→“編輯彈出菜單”，也可單擊切片或熱點(diǎn)中間的行為手柄后使用菜單“編輯彈出菜單”，彈出“彈出菜單編輯器”，可在四個(gè)選項(xiàng)卡中的任一選項(xiàng)卡上進(jìn)行所需修改，然后單擊“完成”按鈕。第21頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.6編輯動(dòng)畫7.6.1制作動(dòng)畫要在Fireworks中使用動(dòng)畫元件制作動(dòng)畫，既可從頭開始創(chuàng)建動(dòng)畫元件，也可將現(xiàn)有對(duì)象轉(zhuǎn)換為動(dòng)畫元件；使用“屬性”面板或“動(dòng)畫”對(duì)話框輸入動(dòng)畫元件的設(shè)置，可以設(shè)置移動(dòng)的角度和方向、縮放、不透明度以及旋轉(zhuǎn)的角度和方向；使用“幀”面板中的“幀延時(shí)”控件設(shè)置動(dòng)畫動(dòng)作的速度；第22頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.6.2使用動(dòng)畫元件

動(dòng)畫元件可以是創(chuàng)建或?qū)氲娜魏螌?duì)象，并且一個(gè)文件中可以有多個(gè)元件，每個(gè)元件都有它自己的屬性并可獨(dú)立運(yùn)動(dòng)。要?jiǎng)?chuàng)建動(dòng)畫元件，可使用菜單“編輯”→“插入”→“新建元件”，在彈出的“元件屬性”對(duì)話框中輸入新元件的名稱，選擇“動(dòng)畫”并單擊“確定”第23頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月也可將已有的對(duì)象轉(zhuǎn)換為動(dòng)畫元件，選擇該對(duì)象后，使用菜單“修改”→“動(dòng)畫”→“選擇動(dòng)畫”，在彈出的“動(dòng)畫”對(duì)話框中輸入所需的設(shè)置。當(dāng)選擇一個(gè)動(dòng)畫元件時(shí)，它有一個(gè)唯一的定界框并附加了一個(gè)指示元件移動(dòng)方向的運(yùn)動(dòng)路徑。運(yùn)動(dòng)路徑上的綠點(diǎn)表示起始點(diǎn)，而紅點(diǎn)表示結(jié)束點(diǎn)。路徑上的藍(lán)點(diǎn)代表幀。通過(guò)改變路徑的角度可以改變運(yùn)動(dòng)的方向。如要改變移動(dòng)或方向，可將元件的一個(gè)動(dòng)畫起始手柄或結(jié)束手柄拖到新位置。第24頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.6.3使用幀

通過(guò)創(chuàng)建多個(gè)幀可以生成動(dòng)畫。“幀”面板是創(chuàng)建和組織幀的地方，使用“幀”面板可以看到每個(gè)幀的內(nèi)容，每個(gè)幀也都有若干相關(guān)的屬性。使用“洋蔥皮”可以查看當(dāng)前所選幀之前和之后的幀的內(nèi)容。“洋蔥皮”打開后，當(dāng)前幀之前或之后的幀中的對(duì)象會(huì)變暗，以便與當(dāng)前幀中的對(duì)象區(qū)別開來(lái)。洋蔥皮按鈕新建/重制幀刪除幀

第25頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月補(bǔ)間的概念是只繪制關(guān)鍵幀（包含重大變化的幀），而由計(jì)算機(jī)繪制關(guān)鍵幀之間的幀。可選擇畫布上同一圖形元件的兩個(gè)或更多的實(shí)例，不要選擇不同元件的實(shí)例，使用菜單“修改”→“元件”→“補(bǔ)間實(shí)例”，在彈出的“補(bǔ)間實(shí)例”對(duì)話框中輸入要插入到原始幀之間的補(bǔ)間步驟的數(shù)目，要將補(bǔ)間對(duì)象分散到不同的幀中，請(qǐng)選擇“分散到幀”并單擊“確定”按鈕。第26頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月“幀”面板中的“循環(huán)”設(shè)置決定動(dòng)畫重復(fù)的次數(shù)。

此功能可以使幀一遍又一遍地循環(huán)，因此可以將制作動(dòng)畫所需要的幀數(shù)減到最少。如要設(shè)置所選動(dòng)畫的循環(huán)，可單擊“幀”面板底部的“GIF動(dòng)畫循環(huán)”按鈕第27頁(yè)，課件共29頁(yè)，創(chuàng)作于2023年2月7.6.4導(dǎo)出動(dòng)