第七章使用Fireworks創(chuàng)建Web對象

1、7.1.17.1.1創(chuàng)建元件創(chuàng)建元件 Fireworks MX 2004提供三種類型的元件：圖形、動畫和按鈕。 要創(chuàng)建元件，可使用菜單“編輯”“插入”“新建元件”或者在 “庫”面板的“選項”菜單中使用菜單“新建元件”，在彈出的 “元件屬性”對話框中輸入元件的名稱并選擇元件類型。 （1）要編輯元件，雙擊某個實例或選擇某個實例后使用菜單“修改”“元件”“編輯元件”。（2）在“庫”面板中選中某個元件后選擇“選項”菜單的“編輯元件”，打開“元件編輯器”窗口，對該元件進行修改后單擊“完成”按鈕關(guān)閉窗口?？蓪υM行 重命名，復(fù)制，更改其類型和刪除等操作。編輯元件的方法：編輯元件的方法：使用菜單“編輯”“

2、庫”，選擇相關(guān)的庫，打開“導(dǎo)入元件”對話框，選擇需要導(dǎo)入的元件，單擊“導(dǎo)入”按鈕，導(dǎo)入的元件隨即出現(xiàn)在“庫”面板中。 如果已在 Fireworks 文檔中創(chuàng)建或?qū)肓嗽?，希望將其保存以便重新使用，可以在“庫”面板的“選項”菜單中選擇“導(dǎo)出元件”，在彈出的 “導(dǎo)出元件”對話框中選擇要導(dǎo)出的元件，單擊“導(dǎo)出”按鈕，輸入文件名后單擊“保存”按鈕。切片將 Fireworks文檔分割成多個較小部分，并將每部分導(dǎo)出為單獨的文件。切片可以進一步優(yōu)化圖像、指定交互性，更新部分圖像。7.2.17.2.1創(chuàng)建切片創(chuàng)建切片如要基于所選對象插入矩形切片，可使用菜單“編輯”“插入”“切片”。該切片是一個矩形，它的區(qū)域

3、包括所選對象最外面的邊緣。 要從矢量路徑創(chuàng)建多邊形切片，先選擇一個矢量路徑，使用菜單“編輯”“插入”“熱點”，再使用菜單“編輯”“插入”“切片”，即可生成一個與該矢量對象形狀一致的切片。如要更改所選切片對象的顏色，可在“屬性”面板中從顏色框中選擇一種新顏色。 如要更改切片輔助線的顏色，可使用菜單“視圖”“輔助線”“編輯輔助線”，在彈出的如圖7.7所示的“輔助線”對話框的“切片顏色”中設(shè)置新顏色，單擊“確定”按鈕。 要調(diào)整切片的大小，可選擇“指針”工具或“部分選定”工具并放在切片引導(dǎo)線上，拖動切片引導(dǎo)線到所需位置，切片大小隨即被調(diào)整，并且所有相鄰的切片也自動調(diào)整大小。要移動相鄰輔助線，可按下Sh

4、ift 鍵并拖動一個切片輔助線經(jīng)過相鄰的切片輔助線，并在所需位置釋放該切片輔助線，則拖動時經(jīng)過的所有切片輔助線都將移到此位置。要編輯所選切片的形狀，可選擇“指針”工具或“部分選定”工具，然后拖動切片的角點修改其形狀，或者使用變形工具來執(zhí)行所需的變形。 拖放變換圖像方法是創(chuàng)建變換圖像和交換圖像效果的快速而有效的方法。 拖放變換圖像方法可以確定指針經(jīng)過一個切片時該切片所發(fā)生的變化，最終結(jié)果通常稱為變換圖像。 默認情況下，變換圖像交互由一條藍色行為線表示。 行為手柄行為手柄 如果使用“行為”面板向所選切片附加行為，可使用菜單“窗口”“行為”，單擊“行為”面板中的“添加行為” 刪除行為只需選中“行為”

5、面板中的行為，并單擊“刪除行為”按鈕 如果未在“屬性”面板或“層”面板中輸入切片名稱，則 Fireworks 將在導(dǎo)出時自動命名切片，可通過“HTML 設(shè)置”對話框更改自動命名慣例。 如要為所選切片指定替代文本，可在“屬性”面板的“Alt”文本框中鍵入文本。將一個經(jīng)過切片的 Fireworks 文檔導(dǎo)出到 HTML 中時，文檔將使用 HTML 表重新裝配。Fireworks 文檔中的每個切片元素都駐留在一個表單元格中。 導(dǎo)出后，F(xiàn)ireworks 切片就轉(zhuǎn)換到HTML 中的表單元格。可以指定在瀏覽器中重建 Fireworks 表的方式。 7.3.17.3.1 創(chuàng)建熱點創(chuàng)建熱點“矩形熱點矩形熱點

6、”工具工具 “圓形熱點圓形熱點”工具工具 “多邊形熱點多邊形熱點”工具工具 利用以上工具可以在圖像的目標(biāo)區(qū)域繪制熱點或者選擇一個對象后在該對象上插入熱點。 在圖形的某個區(qū)域上繪制熱點（按住Alt 鍵可從中心點開始繪制）。如要創(chuàng)建復(fù)雜形狀熱點，可選擇“工具”面板中的“多邊形熱點”工具，單擊圖像放置矢量節(jié)點，填充都將定義熱點區(qū)域。熱點是網(wǎng)頁對象，可使用“指針”工具、“部分選定”工具和“變形”工具對其進行編輯。也可使用“屬性”面板或“信息”面板，以數(shù)字方式更改熱點的位置和大小。 要將所選熱點轉(zhuǎn)換為矩形、圓形或多邊形熱點，可在“屬性”面板的“形狀”下拉列表框中選擇“矩形”、“圓形”或“多邊形”。 以使

7、用“屬性”面板為熱點指定鏈接、替代文本、目標(biāo)和自定義名稱。 在圖形上創(chuàng)建熱點之后，必須將該圖形導(dǎo)出為圖像映射，使其可以在 Web 瀏覽器中運行。 要導(dǎo)出圖像映射或?qū)⑵鋸?fù)制到剪貼板中，可使用菜單“文件”“導(dǎo)出”，在彈出的 “導(dǎo)出”對話框中的“文件名”文本框中輸入文件名，在“保存類型”下拉列表框中選擇“HTML 和圖像” 。一個熱點只能觸發(fā)一個不相交的變換圖像，它不能是來自其它熱點或切片的變換圖像的目標(biāo)。 如要使用切片上的熱點創(chuàng)建變換圖像效果的觸發(fā)器，可將一個切片插入到要交換出去的圖像上，再在圖像上的觸發(fā)器創(chuàng)建熱點，在“幀”面板中創(chuàng)建一個新幀，然后插入要用作被交換圖像的圖像，將一條行為線從熱點拖到

8、包含要交換的圖像的切片上，打開 “交換圖像”對話框，從“交換圖像自”下拉列表中選擇保存有變換圖像的幀，單擊“確定”按鈕。7.4.17.4.1創(chuàng)建按鈕元件創(chuàng)建按鈕元件 按鈕最多有四種不同的狀態(tài)，每種狀態(tài)都表示該按鈕在響應(yīng)鼠標(biāo)事件時的外觀： “彈起彈起”狀態(tài)是按鈕的默認外觀或靜止時的外觀； “滑過滑過”狀態(tài)是當(dāng)指針滑過按鈕時該按鈕的外觀； “按下按下”狀態(tài)表示單擊后的按鈕，按鈕的凹下圖像通常用于表示按鈕已按下； “按下時滑過按下時滑過”狀態(tài)是在用戶將指針滑過處于“按下”狀態(tài)的按鈕時按鈕的外觀。 （1）使用菜單“編輯”“插入”“新建按鈕”，打開按鈕編輯器窗口，制作一個按鈕。創(chuàng)建按鈕的方法： （2）單

9、擊“導(dǎo)入按鈕”按鈕在“導(dǎo)入元件：按鈕”對話框中選擇一個按鈕。 要編輯元件級的按鈕屬性，可雙擊工作區(qū)中的按鈕實例或在“庫”面板中雙擊按鈕元件圖標(biāo)，在彈出的按鈕編輯器中更改按鈕的特性，然后單擊“完成”按鈕。 如需編輯某個實例的屬性，可選擇單個實例后，在“屬性”面板編輯實例屬性，不會影響該元件的關(guān)聯(lián)元件或任何其它實例。7.4.37.4.3設(shè)置交互按鈕屬性設(shè)置交互按鈕屬性 使用 Fireworks 可以控制按鈕的交互元素，包括活動區(qū)域、鏈接、目標(biāo)和替代文本。 要編輯按鈕元件的活動區(qū)域中的切片或熱點，可雙擊工作區(qū)中的按鈕實例或在“庫”面板中雙擊元件圖標(biāo)。導(dǎo)航欄是指提供到網(wǎng)站不同區(qū)域鏈接的一組按鈕，它通常

10、在整個站點上保持一致，從而可以提供一種固定的導(dǎo)航方法，而不管用戶處在站點中的什么位置上。 如要創(chuàng)建導(dǎo)航欄，可先創(chuàng)建一個按鈕元件，然后從“庫”面板中將該元件的一個實例拖到工作區(qū)中，選擇該按鈕實例，然后使用菜單“編輯”“克隆”，用箭頭鍵移動或用鼠標(biāo)拖動實例到合適的位置。 7.5.17.5.1創(chuàng)建基本彈出菜單創(chuàng)建基本彈出菜單 （1）選擇一個熱點或切片作為彈出菜單的觸發(fā)器區(qū)域， 使用菜單“修改”“彈出菜單”“添加彈出菜單”。創(chuàng)建彈出菜單的基本步驟：（2）單擊“內(nèi)容“選項卡中的“添加菜單”按鈕 （3）雙擊每個單元格并輸入或選擇適當(dāng)?shù)男畔?（4）單擊“繼續(xù)”按鈕或“外觀”選項卡，在彈出的對話框中設(shè)置菜單的

11、方向為垂直菜單或水平菜單以及文本的字體、大小、顏色、對齊方式等。 （5）單擊“繼續(xù)”按鈕或“高級”選項卡，在彈出的對話框中設(shè)置菜單中單元格的大小、邊距、間距、文字縮進、菜單消失延時，以及邊框?qū)挾?、顏色、陰影和高亮等屬性?（6）單擊“繼續(xù)”按鈕或“高級”選項卡，在彈出的對話框中設(shè)置菜單中單元格的大小、邊距、間距、文字縮進、菜單消失延時，以及邊框?qū)挾?、顏色、陰影和高亮等屬性?（7）設(shè)置完成后，單擊“完成”按鈕，關(guān)閉“彈出菜單編輯器”。 在“彈出菜單編輯器”中，可以編輯或更新彈出菜單的內(nèi)容，重新排列菜單項，或者更改四個選項卡中任一選項卡上的其它屬性。 選擇彈出菜單所附加到的切片或熱點，在工作區(qū)中

12、雙擊彈出菜單的藍色輪廓或使用菜單“修改” “彈出菜單”“編輯彈出菜單”，也可單擊切片或熱點中間的行為手柄后使用菜單“編輯彈出菜單”，彈出“彈出菜單編輯器”，可在四個選項卡中的任一選項卡上進行所需修改，然后單擊“完成”按鈕。7.6.1 7.6.1 制作動畫制作動畫要在 Fireworks 中使用動畫元件制作動畫，既可從頭開始創(chuàng)建動畫元件，也可將現(xiàn)有對象轉(zhuǎn)換為動畫元件； 使用“屬性”面板或“動畫”對話框輸入動畫元件的設(shè)置，可以設(shè)置移動的角度和方向、縮放、不透明度以及旋轉(zhuǎn)的角度和方向； 使用“幀”面板中的“幀延時”控件設(shè)置動畫動作的速度； 動畫元件可以是創(chuàng)建或?qū)氲娜魏螌ο?，并且一個文件中可以有多個

13、元件，每個元件都有它自己的屬性并可獨立運動。 要創(chuàng)建動畫元件，可使用菜單“編輯”“插入”“新建元件”，在彈出的 “元件屬性”對話框中輸入新元件的名稱，選擇“動畫”并單擊“確定” 也可將已有的對象轉(zhuǎn)換為動畫元件，選擇該對象后，使用菜單“修改”“動畫”“選擇動畫”，在彈出的 “動畫”對話框中輸入所需的設(shè)置。當(dāng)選擇一個動畫元件時，它有一個唯一的定界框并附加了一個指示元件移動方向的運動路徑。運動路徑上的綠點表示起始點，而紅點表示結(jié)束點。路徑上的藍點代表幀。通過改變路徑的角度可以改變運動的方向。如要改變移動或方向，可將元件的一個動畫起始手柄或結(jié)束手柄拖到新位置。通過創(chuàng)建多個幀可以生成動畫。 “幀”面板是

14、創(chuàng)建和組織幀的地方，使用“幀”面板可以看到每個幀的內(nèi)容，每個幀也都有若干相關(guān)的屬性。 使用“洋蔥皮”可以查看當(dāng)前所選幀之前和之后的幀的內(nèi)容?！把笫[皮”打開后，當(dāng)前幀之前或之后的幀中的對象會變暗，以便與當(dāng)前幀中的對象區(qū)別開來。 補間的概念是只繪制關(guān)鍵幀（包含重大變化的幀），而由計算機繪制關(guān)鍵幀之間的幀。 可選擇畫布上同一圖形元件的兩個或更多的實例，不要選擇不同元件的實例，使用菜單“修改”“元件”“補間實例”，在彈出的 “補間實例”對話框中輸入要插入到原始幀之間的補間步驟的數(shù)目，要將補間對象分散到不同的幀中，請選擇“分散到幀”并單擊“確定”按鈕?！皫瑤泵姘逯械拿姘逯械摹把h(huán)循環(huán)”設(shè)置決定設(shè)置決定

15、動畫重復(fù)的次數(shù)。動畫重復(fù)的次數(shù)。 此功能可以使幀一遍又一遍地循環(huán)，因此可以將制作動畫所需要的幀數(shù)減到最少。如要設(shè)置所選動畫的循環(huán)，可單擊“幀”面板底部的“GIF 動畫循環(huán)”按鈕可以將動畫導(dǎo)出為 Flash SWF 文件，然后再將其導(dǎo)入 Flash，也可以跳過導(dǎo)出步驟而將 Fireworks PNG 源文件直接導(dǎo)入 Flash。可以導(dǎo)入動畫中的所有層和幀，然后在 Flash 中進一步編輯。還可以將動畫中的幀或?qū)幼鳛槎鄠€文件導(dǎo)出。如果打算將動畫導(dǎo)入到 Flash 中進一步編輯，就不需要將它導(dǎo)出，F(xiàn)lash 可直接導(dǎo)入Fireworks PNG 源文件。 7.7.17.7.1圖像的優(yōu)化圖像的優(yōu)化“G

16、IF”是一種很流行的網(wǎng)頁圖形格式。GIF 中最多包含 256 種顏色，還可以包含透明區(qū)域和動畫幀。在導(dǎo)出為 GIF 格式時，包含純色區(qū)域的圖像的壓縮質(zhì)量最好。GIF 通常適合于卡通、徽標(biāo)、包含透明區(qū)域的圖形以及動畫?！癑PEG”支持數(shù)百萬種顏色（24 位）。JPEG 格式最適合于掃描的照片、使用紋理的圖像、具有漸變顏色過渡的圖像和任何需要 256 種以上顏色的圖像?！癙NG”是一種通用的網(wǎng)頁圖形格式。但并非所有的網(wǎng)頁瀏覽器都能查看 PNG 圖形。PNG 最多可以支持 32 位的顏色，可以包含透明度或 Alpha 通道，并且可以是連續(xù)的。 對于導(dǎo)出，可以使用“導(dǎo)出”對話框或文檔窗口右上角的“快速導(dǎo)出”按鈕 1. 1.使用菜單使用菜單“導(dǎo)出