Firework的主要用途
Fireworks是Macromedia公司發(fā)布的一款專(zhuān)為網(wǎng)絡(luò )圖形設計的圖形編輯軟件，它大大簡(jiǎn)化了網(wǎng)絡(luò )圖形設計的工作難度，無(wú)論是專(zhuān)業(yè)設計家還是業(yè)余愛(ài)好者，使用Fireworks都不僅可以輕松地制作出十分動(dòng)感的GIF動(dòng)畫(huà)，還可以輕易地完成大圖切割、動(dòng)態(tài)按鈕、動(dòng)態(tài)翻轉圖等，因此，對于輔助網(wǎng)頁(yè)編輯來(lái)說(shuō)，Fireworks將是最大的功臣。
新推出的Fireworks 3 更是增加了許多膾炙人口的新功能：
1. 可以輸出SWF和 Illustrator7文件；
2. 與Dreamweaver緊密的配合；
3. 與網(wǎng)頁(yè)編輯器的結合；
4. 可以直接編輯點(diǎn)陣圖；
5. 更方便的Roll over；
6. 向量模式編輯；
7. 即時(shí)預覽；
8. 允許加入Photoshop濾鏡；
9. 可以讀入Photoshop文件；
10. 提供MAC Gamme預覽功能；
11. 提供GIF編輯環(huán)境；
12. 提供History panel來(lái)記錄動(dòng)作；
13. 提供全新的按鈕制作工具；
14. 可編輯的操作環(huán)境；
15. 資料庫（Library）的運用；
16. 提供圖形與文字的樣式庫（Style）。
怎么樣？Firework 3如此強大的網(wǎng)頁(yè)編輯功能是不是很令人眼饞呀？！是不是恨不得馬上就掌握這個(gè)網(wǎng)頁(yè)編輯利器呀？！別急！就讓我們一起來(lái)深入地研究它吧！
第二節 基本概念firework的矢量圖像
一、 矢量圖像
矢量圖像是用包含顏色和位置屬性的直線(xiàn)或曲線(xiàn)（即稱(chēng)為矢量）來(lái)描述圖像屬性的一種方法。比如說(shuō)一個(gè)橢圓，它就包括由通過(guò)橢圓邊緣的一些點(diǎn)組成的輪廓和輪廓內的點(diǎn)兩部分。
對于矢量圖像，橢圓的顏色取決于橢圓輪廓曲線(xiàn)的顏色和輪廓封閉的區域顏色，與輪廓內單獨的點(diǎn)無(wú)關(guān)。我們可以通過(guò)修改描述橢圓輪廓的直線(xiàn)或曲線(xiàn)來(lái)更改橢圓的性質(zhì)，也可以移動(dòng)、放縮、變形，或者在不改變圖形顯示質(zhì)量的前提下，改變具有矢量性質(zhì)的橢圓的顏色。
矢量圖形具有獨立的分辨率，也就是說(shuō)我們以各式各樣的分辨率來(lái)顯示矢量圖形，它都不會(huì )失真。
二、 位圖圖像
位圖圖像是用每一個(gè)柵格內不同顏色的點(diǎn)來(lái)描述圖像屬性的，這些點(diǎn)就是我們常說(shuō)的像素。就拿前面的橢圓來(lái)說(shuō)吧，也可以由所有組成該橢圓的像素的位置和顏色來(lái)描述。因為編輯位圖時(shí)，修改的是像素，而不是直線(xiàn)和曲線(xiàn)。因此無(wú)法通過(guò)修改描述橢圓輪廓的直線(xiàn)或曲線(xiàn)來(lái)更改橢圓的性質(zhì)。
位圖圖像的分辨率不是獨立的，因為描述圖像的數據是對特定大小柵格中圖像而言的，因此，編輯位圖會(huì )改變它的顯示質(zhì)量，尤其是放縮圖像，會(huì )因為圖像在柵格內的重新分配而導致圖像邊緣粗糙。在比位圖圖像本身的分辨率低的輸出設備上顯示圖像也會(huì )降低圖像的顯示質(zhì)量。
對于矢量圖像和位圖圖像的轉化，可以舉一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明，在firework 3.0中將文字變?yōu)槁窂剑?/span>Convert to Path）時(shí)，可以看成是把文字變?yōu)槭噶繄D像，若在對象監控板中選擇Transform as Pixels，則可以轉化為位圖圖像。
第三節：初識Firework 3
啟動(dòng)Firework 3，我們就會(huì )發(fā)現它并不陌生，它長(cháng)得和Photoshop十分相像。
Firework 3視窗是由菜單欄、工具欄、工具箱和數個(gè)浮動(dòng)面板組成，當我們開(kāi)啟或建立一個(gè)新文件時(shí)，視窗內還會(huì )出現一個(gè)繪圖工作區，如圖1所示。
圖1 Firework視窗
一、 菜單欄
菜單欄位于Firework 3視窗的上方，當視窗內尚未開(kāi)啟任何文件時(shí)，菜單欄僅僅提供了“File（文件）”、“Edit（編輯）”、“View（視圖）”、“Commands（命令）”、“Window（窗口）”與“Help（幫助）”六個(gè)菜單，而且菜單中所提供的項目也不多。不過(guò)當我們新建或開(kāi)啟一個(gè)文件時(shí)，菜單欄中的項目就熱鬧了許多，除了上述的六個(gè)菜單外，還增加了“Modify（修改）”、“Text（文本）”與“Xtras（濾鏡）”三個(gè)菜單，而且菜單中的項目也增加了不少。
單擊菜單后，就會(huì )彈出一個(gè)下拉式菜單，如果其中項目的右方有一個(gè)如圖2的“箭頭”符號，則表示該項目還有一個(gè)子菜單，單擊該項目就會(huì )彈出它的子菜單，其中包含了更多的項目。
圖2 菜單欄
二、 工具箱
Firework 3工具箱的預設位置是在視窗的左方，它提供了一套極為專(zhuān)業(yè)的向量路徑繪制工具群，利用這些工具我們可以繪制出十分動(dòng)人的圖形。
將工具箱拖曳到空白的位置，就可以把它變成獨立的浮動(dòng)面板，除此之外，我們還可以將它拖曳到視窗的右方，這可依個(gè)人喜好而定。
如果我們想隱藏工具箱，可以單擊 “Window\Toolbox”窗口 下的 工具 選項，使Toolbox左方的對鉤消失即可，若想重新顯示工具箱，單擊選項，使對鉤出現即可。
三、 工具欄 （窗口/工具欄/主要，修改）
Firework 3工具欄（ Toolbars）（圖3）包括Main（主工具欄）、Modify（修改工具欄）和View Control（視域控制欄）三種工具欄，預設狀態(tài)下，它們都處于顯示狀態(tài)。
我們可以將這三個(gè)工具欄拖曳到任何位置，也可以將其拖曳成獨立的浮動(dòng)面板。
通過(guò)鉤選和取消鉤選 “Toolbars”菜單中的“Main、Modify或View Control”選項，我們可以將它們顯示和隱藏。
圖3 工具欄
四、 浮動(dòng)面板
Firework 3提供了許多浮動(dòng)面板來(lái)方便我們設計圖形，但是如果開(kāi)啟了所有的浮動(dòng)面板，則會(huì )占滿(mǎn)整個(gè)視窗。為了能夠獲得一個(gè)最佳的工作視窗，我們可以自行開(kāi)啟、關(guān)閉、縮放或移動(dòng)浮動(dòng)面板，甚至還可以將某個(gè)浮動(dòng)面板加入另一個(gè)面板群組中，來(lái)組合出適合自己的浮動(dòng)面板。
就拿“Stroke”面板來(lái)說(shuō)吧，我們鉤選“Window”中的“Stroke”項目，就可以將其開(kāi)啟；如果我們想要關(guān)閉它，只需單擊浮動(dòng)面板右上角的“關(guān)閉”按鈕即可。如果我們想要切換到“Fill”面板，只需單擊“Fill”選項卡即可；拖曳“Stroke”面板到“Frames”浮動(dòng)視窗中，就可以將它加入其中，或者將其拖曳到空白處，就可以獨立成一個(gè)浮動(dòng)視窗；如果我們覺(jué)得浮動(dòng)面板占用了太多空間，雙擊浮動(dòng)面板的標題欄，就可以將其最小化，再次雙擊就可將其還原（圖4）。
好啦！發(fā)揮你的想象力和創(chuàng )造力為自己設計一個(gè)最佳的工作視窗吧！
圖4 浮動(dòng)面板
五、 狀態(tài)欄
狀態(tài)欄位于Firework 3視窗的下方，它可以顯示我們所選取的菜單項目、工具箱內的工具或工具欄上的按鈕之簡(jiǎn)介，也可以顯示目前所選取的物件種類(lèi)，除此以外，它還包括了一個(gè)視窗檢視控制欄來(lái)切換我們所要檢視的Frame。
第四節：制作一個(gè)簡(jiǎn)單的例子
我們等不急了，能不能先演示一把！好吧，我們先來(lái)制作一個(gè)簡(jiǎn)單的動(dòng)畫(huà)（圖1）。
圖1 “閃爍的星”效果圖
一、 新建文件
單擊新建按鈕
圖2 新文件對話(huà)框
二、 選擇工具
左鍵按住工具箱中的形狀繪圖工具，我們就會(huì )看到有三種形狀可供選擇
1. 形狀（Shape）：Star
2. 棱角數目（Slides）：10
3. 內角角度（Angle）：15
圖3 “Options”浮動(dòng)面板
第四節：制作一個(gè)簡(jiǎn)單的例子
三、 繪制元件
圖4 繪制元件
在畫(huà)布上拖動(dòng)鼠標即可畫(huà)出一個(gè)十角星（如圖
1. 填充方式：Solid
2. 填充顏色：白色
3. 邊緣(Edge)：反鋸齒（Anti-Alias）
4. 填充紋理（Texture）：Fiber
5. 紋理亮度值：0%
同理打開(kāi)“Stroke”面板并將其設置為（如圖5b）。
圖5 Fill和Stroke屬性浮動(dòng)面板
用鼠標左鍵按住一個(gè)棱角的節點(diǎn)，拖動(dòng)鼠標即可改變棱角的位置和方向，這樣我們通過(guò)改變棱角的位置和方向就可以為十角星設計出一個(gè)新的形象（如圖
選中白色十角星，然后Ctrl+c、Ctrl+v復制兩個(gè)十角星，將它們的填充分別改為綠色、紅色，其他不變（如圖6b）。
圖6 改變外觀(guān) 復制圖形
選中白色十角星，按下F8鍵，出現了元件屬性對話(huà)框（Symbol Properties），我們?yōu)檫@個(gè)元件起一個(gè)名字，在名字（Name）欄中輸入“xing1”；類(lèi)型（Type）選擇Graphic，單擊“ok”按鈕如（圖
同理，將綠色、紅色十角星定義為xing2、xing3元件。
選取菜單指令“Window\Library”開(kāi)啟“Library（資料庫）”浮動(dòng)面板，就會(huì )發(fā)現我們所編輯的十角星已經(jīng)被加入到Library中了（圖7b）。
圖7 加入資料庫
另外，原來(lái)畫(huà)布內的圖形自動(dòng)轉換成了分身（Instance），當我們選取元件分身時(shí)，它的左下方會(huì )出現“箭頭”圖示。（如圖8）
圖8 元件的分身
如果對剛才的元件不是很滿(mǎn)意，我們還可以進(jìn)一步編輯，雙擊Library中的元件圖形，進(jìn)入元件編輯窗口，我們就可以按照自己的意愿去進(jìn)一步修改元件，編輯完元件后，將窗口關(guān)閉，這時(shí)我們就會(huì )發(fā)現不僅元件有了變化，而且分身也發(fā)生了相應的變化。
這種本體與分身的觀(guān)念，很適合用來(lái)制作動(dòng)畫(huà)，我們可以通過(guò)修改元件方便地修改所有的分身；另外，由于分身是元件的復制品，因此，使用分身還可以大量減少GIF動(dòng)畫(huà)文件大??；如果不想讓某個(gè)分身跟隨元件而改變，我們可以這樣來(lái)實(shí)現：選中該分身，然后選取菜單“Modify/Symbol/Break Link”切斷分身與元件之間的鏈接，這時(shí)，該分身就成了一個(gè)獨立的對象，將不再受元件的影響。
第四節：制作一個(gè)簡(jiǎn)單的例子
四、 制作動(dòng)畫(huà)
1. 選取“細部選取工具”
2. 選中一般選物工具
3. 首先單擊“變形工具”
圖8 變形與透明度的更改
4. 從Library拖拽白色十角星元件到畫(huà)布的左下角，就出現了一個(gè)白色十角星的分身，同理，我們將它的不透明度設置為45。
5. 按住Shift鍵，用細部選取工具選中我們剛才編輯的兩個(gè)白色十角星，選取菜單指令“Modify\Symbol\Tween Instances”，在彈出的Tween Instances對話(huà)框中，我們在Steps填入10，并鉤選Distribute to Frames復選框，單擊“ok”按鈕。（如圖
圖9 插入幀
五、 加入特效
1. 按住Shift鍵，選中第一幀到第十一幀，雙擊其中的一幀，在彈出的Frame Delay對話(huà)框中將時(shí)間延遲設置為“1/100 second”（0.01秒），這樣就加快了十角星的飛行速度，將產(chǎn)生一種流逝的效果。 （如圖10）
圖10 設置時(shí)間延遲
2. 左鍵按住第十二幀將它拖曳到“新建/復制幀”按鈕
3. 同理我們再復制第十二幀，卻發(fā)現原來(lái)的第十三幀被擠到了第十四幀（原來(lái)當前幀的復制幀會(huì )出現在當前幀的下一幀），好吧，現在就將它拽回來(lái)！按住第十四幀將它拖到第十三幀，第十三幀上邊線(xiàn)出現黑線(xiàn)時(shí)松手即可恢復原來(lái)幀的順序，同理，如果我們想要調整其他幀的位置，只需將它拖到相應的位置即可。 現在，大家可能會(huì )想，我們?yōu)楹尾恢苯訌椭频谑龓?？聰明！其?shí)這里直接復制第十三幀才是最佳方法；那我又為何復制第十二幀呢？其實(shí)我只是想告訴大家一種現象和調整位置的方法，提醒大家在編輯幀的時(shí)候，一定要有一個(gè)清晰的思路，否則，我們將不得不面對令人頭疼的幀的調整。
4. 單擊第十四幀，選中畫(huà)布中的圖片，將它的不透明度設置為100；選中“文字工具”按鈕
圖11 文本編輯器
圖12 十角星中的“洪”字
5. 選中第十四幀，然后單擊Frames 浮動(dòng)面板右上角的箭頭按鈕（如圖13），在彈出的菜單選擇“Add Frames”，彈出“Add Frames”窗口，在“Number”輸入7，在“Insert new frames”項中，我們選擇“After current frame”，單擊“ok”按鈕，這樣我們就在當前幀的后面新建了七個(gè)空幀，單擊第十四幀，選中畫(huà)布中的十角星，單擊Frames 浮動(dòng)面板中“Info”選項卡，開(kāi)啟信息面板，其中我們可以看到十角星的x（13）、y（43）坐標，然后切換到Frames 浮動(dòng)面板，選中第十六幀，接下來(lái)我們開(kāi)啟Library浮動(dòng)面板，選中xing2元件，并將其拖到畫(huà)布中，這樣就產(chǎn)生了一個(gè)xing2的分身，用鍵盤(pán)移動(dòng)它，信息面板中的x、y坐標也會(huì )隨之變化，我們將它移動(dòng)到x（13+35）、y（43）；接下來(lái)我們?yōu)榫G色十角星添加文字，那么怎樣才能保證第十六幀的文字屬性和第十四幀的一致呢？我們首先切換到第十四幀，選中“洪”，查看它的坐標信息，然后Ctrl+C，接下來(lái)我們再返回第十六幀，Ctrl+V，然后移動(dòng)“洪”，將它的x 坐標增加35，使它處于綠色十角星的中心，然后雙擊“洪”，開(kāi)啟文本編輯器，將“洪”改為“恩”，并將“恩”的顏色改為白色，單擊“ok”按鈕將文本編輯器關(guān)閉。
圖13 在當前幀后加入新的幀
6. 同理，我們可以分別在18、20幀完成相應的操作。
六、 調整時(shí)間延遲
為了能使動(dòng)畫(huà)更加具有“動(dòng)”感，我們可以調整每一幀的時(shí)間延遲，來(lái)控制動(dòng)畫(huà)的效果，雙擊某一幀，然后在彈出的Frame Delay對話(huà)框中輸入時(shí)間延遲，例如：“1/100 second”（0.01秒），設置完畢后，單擊任何空白處即可關(guān)閉對話(huà)框。具體時(shí)間延遲設置如圖14
圖14 設置各幀時(shí)間延遲
現在我們來(lái)預覽一下動(dòng)畫(huà)最終的效果，單擊“狀態(tài)欄”右方的播放按鈕（如圖15），畫(huà)布中的動(dòng)畫(huà)就動(dòng)了起來(lái)，如果我們覺(jué)得動(dòng)畫(huà)效果不夠理想，單擊“停止”按鈕或者單擊任何空白的地方將動(dòng)畫(huà)停止，然后調整不滿(mǎn)意的地方，通過(guò)不斷的修改和調試，我們就可以實(shí)現更加理想的動(dòng)畫(huà)效果。
圖15 播放按鈕
七、 輸出動(dòng)畫(huà)
現在我們可以將動(dòng)畫(huà)保存為GIF格式了，選取菜單指令“File\Export Preview”，開(kāi)啟Export Preview窗口，選擇“Option”選項卡，在“Format”欄中選擇“Animated GIF”（如圖16），然后切換到“Animation”選項卡，將動(dòng)畫(huà)效果設定為“反復播放”方式，最后單擊“Export”按鈕，在“Export”窗口中，選擇保存路徑，輸入文件名，例如：閃爍的星，單擊“保存”按鈕，動(dòng)畫(huà)就以 .gif的格式保存起來(lái)了。 到此為止，整個(gè)GIF動(dòng)畫(huà)就全部完成了，感覺(jué)怎么樣？是不是已經(jīng)可以制作動(dòng)畫(huà)了！如果是這樣，你已經(jīng)領(lǐng)會(huì )了Firework 3 強大的GIF動(dòng)畫(huà)功能，當然如果你想徹底地精通Firework 3，掌握它更為強大的網(wǎng)絡(luò )圖形編輯功能，那就趕快和我們一起踏上征服Firework 3的輕松之旅吧！
圖16 輸出動(dòng)畫(huà)
第一節：編輯向量圖形
我們先來(lái)看一看下邊的效果圖（如圖1）
圖1 蘋(píng)果中的笑臉
怎么樣？是不是很有意思！下面我們就來(lái)看一下它是如何制作的？
一. 繪制蘋(píng)果
首先，我們新建一個(gè)文件（300x300 Pixels；顏色為綠色），然后設置Stroke面板（如圖
圖2 初始設置
圖3 蘋(píng)果的最初輪廓
現在我們再來(lái)為蘋(píng)果添加一個(gè)小小的柄，按住自由格式工具，我們就會(huì )發(fā)現彈出了四種工具（其實(shí)，每個(gè)右下角帶有一個(gè)小三角形的工具（如圖
圖4 自由格式工具參數選擇
圖5 蘋(píng)果的基本輪廓
二. 美化蘋(píng)果
下面我們來(lái)為蘋(píng)果化妝一下，讓它更加漂亮、更加具有立體感，首先選擇“細部選取工具”并單擊畫(huà)布的空白處，取消對蘋(píng)果的選擇狀態(tài)，然后將筆刷的顏色設置為白色
圖6 填充和漆桶參數設置
圖7 對蘋(píng)果的美化
接下來(lái)，我們再為蘋(píng)果添加一個(gè)特效，使它更加具有立體感，首先選中蘋(píng)果，然后開(kāi)啟“Effect”面板，單擊“特效”按鈕并在彈出的菜單中選擇“Shadow and Glow\Drop Shadow”（如圖
圖8 立體效果設置
這樣，一個(gè)具有立體感、光澤鮮艷的蘋(píng)果就浮現在我們的眼前了。（如圖9）
圖9 立體效果的蘋(píng)果
三. 添加笑臉
怎樣才能為蘋(píng)果添加一副笑臉呢？
圖10 割圖
首先單擊“打開(kāi)文件”按鈕，雙擊“打開(kāi)”對話(huà)框我們預先準備好的“笑臉.jpg”，笑臉.jpg就在一個(gè)新的工作區域中打開(kāi)了；按下“形狀選擇工具”，選擇“割圖工具”
圖11 選擇笑臉
單擊“新建文件”按鈕
圖12 橡皮工具和添加笑臉
四. 調整畫(huà)布
為了便于編輯，我們可以將“笑臉”和“蘋(píng)果”合并，首先選中它們，然后選取菜單指令“Modify\Group”即可。
接下來(lái)，我們選中“一般選物工具”
圖13 畫(huà)布大小參數面板
同理，如果我們想要調整畫(huà)布的顏色，選取菜單指令“Modify\Canvas Color”，在彈出的窗口中選中Custom，并將顏色調整為最佳效果即可(如圖14)。
圖14 畫(huà)布顏色參數面板
到此為止，整個(gè)“蘋(píng)果中的笑臉”就編輯完了。
五. 保存文件（最佳化影像處理）
1、 保存為GIF格式
選取菜單指令“File\Export Preview”，開(kāi)啟Export Preview窗口，選擇“Option”選項卡；要轉存為GIF格式，我們首先必須在“Format”選項中選擇“GIF”選項；然后在“Palette”選擇適當的色盤(pán)，我們常用的色盤(pán)為：
Adaptive 色盤(pán)：Adaptive的意思為最適合的色彩，如果我們要轉存的圖片不只是漸進(jìn)式的色彩，那么這個(gè)色盤(pán)會(huì )先選用相對安全的色彩，然后再以延續漸進(jìn)的方式來(lái)加入非安全性的色彩，因此，轉存后的圖片將會(huì )有不錯的效果。
WebSnap Adaptive 的意思是接近網(wǎng)頁(yè)的最適合色彩，如果我們轉存的是相片圖形，它會(huì )使圖片獲得更平順的效果。
我們選擇Adaptive 色盤(pán)，然后再在“Loss”選項中設置一下壓縮比率，它的預設值為0，表示壓縮的品質(zhì)最好，但是圖片的體積最大，若設為100，則壓縮后的體積最小，但圖片品質(zhì)最差。我們可以根據需要設置適當的壓縮比率。
另外，色彩數量也是影響圖片大小的一個(gè)重要因素，色彩數量越少，圖片的體積就越小，但相對的圖片品質(zhì)就會(huì )降低，我們可以在如圖的選項中選擇系統提供的色彩數量，也可以手動(dòng)修改色彩數量，這樣我們就可以通過(guò)使用最少的色彩，達到最好的圖片品質(zhì)。
大家都知道GIF文件可以設置透明色，那么在Fireworks 3中它是如何設置的呢？
在窗口的下方，我們可以看到三個(gè)吸管狀的按鈕，使用它們就可以設置圖片的透明色：透明色選擇按鈕可以選取一個(gè)色彩作為透明色；增加透明色按鈕可以選取兩個(gè)以上的顏色；刪除透明色按鈕可以恢復色彩原來(lái)的顏色。
如果圖片已經(jīng)設置了透明色，我們只需選擇透明色下拉菜單中的“Index Transparency”或“Alpha Transparency”即可。
單擊“Export”按鈕就可以將圖片保存為GIF文件了。（如圖15）
圖15 保存為GIF格式
2、 保存為JPG格式
轉存為JPG要比GIF簡(jiǎn)單的多，首先在“Format”選項中選取“JPEG”格式，然后在“Quality”選項中指定圖片的壓縮品質(zhì)即可，數值越大則品質(zhì)越好，但相對的圖片體積會(huì )變大；數值越小將會(huì )獲得較小的文件，但圖片品質(zhì)會(huì )越差。（如圖16）
圖16 保存為JPG格式
另外，下面幾項也會(huì )大大影響圖片的大小和品質(zhì)：
光滑度：
光滑度（Smoothing）可以使圖片更加光滑，但同時(shí)會(huì )使圖片模糊化，在“Smoothing”選項中可以指定圖片的光華度，其中No Smoothing表示不使用光滑度的功能，而8 Maximum Smoothing為最大的光華度。（如圖17）
圖17 光滑度對比
漸進(jìn)式效果：
鉤選“Progressive”選項后會(huì )稍微增加文件的體積，其效果為瀏覽器下載這個(gè)文件時(shí)，會(huì )有從模糊到清晰般的漸進(jìn)效果。
銳化效果：
鉤選“Sharpen Color Edges”選項后，可以增加圖片色彩邊緣的銳化度。所謂色彩邊緣指的是圖片內因為色彩反差而形成的邊緣，因此銳化的結果將會(huì )產(chǎn)生更加清晰的圖片，但文件體積會(huì )變大。（如圖18）
圖18 銳化效果對比
3、 保存為png格式
gif是Firework 3的標準圖片格式，將圖片保存為png格式，其實(shí)就是保存一個(gè)源文件，以便于我們以后的進(jìn)一步修改。
單擊“保存按鈕”
第二節：編輯點(diǎn)陣式圖形
如果大家對Flash比較熟悉的話(huà)，那么對遮照效果肯定不會(huì )陌生。遮照效果就是將兩個(gè)對象組合在一起，而處于下層的對象只能透過(guò)上層對象才能看到的一種效果。
我們有時(shí)真的不得不佩服Macromedia的能力。如此酷的效果（如圖1），使用Firework我們只需要一條命令“Mask to Path”就可輕易實(shí)現。
圖1 遮照效果
具體操作步驟如下：
1、打開(kāi)一張圖片，例如：zhezhao.gif。（如圖2） 注意：在打開(kāi)圖片時(shí)，最好將“打開(kāi)”對話(huà)框下方的Open as “Untitled”選項選中，這樣文件將被復制成名字為“Untitled”的新文件，可以防止源文件被誤修改。
圖2 原圖
2、選中“文字工具”，單擊圖片，在彈出的文本編輯器中輸入“酷”字，具體設置如圖3，單擊“ok”按鈕即可。
圖3 輸入文字
3、單擊“一般選物工具”，將“酷”移到人物的頭部，拖動(dòng)鼠標將圖片和文字全部選中，然后選取菜單指令“Modify\Mask Group\Mask to Path”。 （如圖4）
圖4 Mask Group菜單
4、OK，一切搞定（如圖5）。
圖5 遮照效果
細心的朋友可能會(huì )發(fā)現，在菜單“Modify\Mask Group”中還有另外一個(gè)選項Mask to Image，其實(shí)，這是Firework3.0新增的功能。
以往我們要創(chuàng )作如圖的漸變效果，需要先對圖片作漸變特效，然后運用Mask to Path來(lái)實(shí)現?，F在有了Mask to Image，我們就再不用為此發(fā)愁了。
1、打開(kāi)一張圖片：zhezhao.gif。
2、創(chuàng )建漸變字：在圖片上輸入“酷”字并選中“酷”，將筆刷顏色設置為深色（例如：黑色），將漆桶顏色設置為淺色（例如：白色），將“Stroke”面板設置為“None”，將“Fill”面板填充屬性設置為Linear，然后選取“漆桶”對文字進(jìn)行漸變填充（如圖6）。
圖6 漸變填充
3、將文本對象移到圖片對象上合適的位置，按Ctrl+A將文本對象和圖片對象選中。
4、選取菜單“Modify\Mask Group\Mask to Image”。（如圖7）
圖7 漸變填充后的遮掩效果
如果想對已經(jīng)作了遮照處理的文字進(jìn)行修改，我們只需要打開(kāi)它的gif源文件，選中“一般選物工具”，單擊圖片，圖片就呈現選中狀態(tài)，并且圖片中心出現如圖標識；選中“文字工具”，單擊圖片，彈出文本編輯器，其中我們就可以按照自己的意愿進(jìn)行修改文字；如果單擊“漆桶”，畫(huà)布中就會(huì )出現填充手柄，通過(guò)拖動(dòng)圓形手柄和方形手柄就可以改變漸變效果。
另外，如果我們用“一般選物工具”選中圖片，然后選擇菜單“Modify\Ungroup”將圖形對象和文本對象分組，就回到了遮照處理前的效果，這樣我們就可以進(jìn)行大規模的修改和調整了。
Mask to Image和Mask to Path的區別：
Mask to Image：以上方對象作為遮色物件，顏色較深的部分會(huì )保留下方物件，而顏色較淺的區域則對下方物件產(chǎn)生淡化效果。 （如圖7）
Mask to Path：以上方的遮色物件來(lái)剪裁下方物件，因此，位于上方物件的尺寸應該比下方物件小，這樣才能產(chǎn)生剪裁的效果，Mask to Path僅對下方物件做剪裁，不會(huì )有其他效果。 （如圖8）
圖8 Mask to Path效果
第三節：文字
一、 文本特效
對于其它圖形軟件來(lái)說(shuō)，要創(chuàng )建空心字、各種填充色的描邊字或帶底紋的各種效果字，那不僅是件非常繁瑣的差事，甚至是無(wú)法做到的事情，但是在Firework中，我們輕而易舉便能實(shí)現。
首先輸入文字（例如：“洪恩在線(xiàn)”），選中文本對象，這時(shí)被選中的文本外圍會(huì )出現一個(gè)藍色的框（如圖
圖1 選擇文字 調整Stroke
?。?/span>. 筆型：Basic
?。?/span>. 筆的力度：SoftLine
?。?/span>. 羽化半徑：如圖所示
?。?/span>. 線(xiàn)條寬度：４
?。?/span>. 填充紋理（Texture）：顆粒
?。?/span>. 紋理亮度值：0%
至此，我們已經(jīng)可以看到字體多了層邊緣；開(kāi)啟Fill填充面板，在Fill填充面板中我們可以為字體選取不同的顏色填充效果，如漸變、加底紋、輻射效果等等。當然，如果將填充類(lèi)型設定為None，字體的實(shí)心部分就會(huì )消失，這樣我們就可以得到如圖的空心字。（如圖2）
圖2 字體效果
Firework 3還提供了方便有效的Styles面板，我們只需要選中文本對象，然后單擊Styles面板中的任何一種樣式，這時(shí)我們便能以最快捷的方法制作出各種各樣的特效字（如圖3）；如果配合其它面板如Fill面板、Effect面板等一起使用，我們還可以做出更多更美的的特效。
圖3 樣式效果
當然Styles面板中的樣式不僅對文字有效，而且對圖片同樣有效。
單擊Styles面板右上角的小三角形，在彈出的菜單中我們會(huì )發(fā)現其中包含有“New Style”、“Edit Style”等等選項，原來(lái)Firework還允許我們新建Style、編輯Style、導入／導出Style等功能。 （如圖4）
圖4 Styles浮動(dòng)面板
二、 制作文字路徑
Firework作為一種圖形處理軟件，集合了矢量、位圖等繪圖工具的優(yōu)點(diǎn)，它可以象其它矢量繪圖軟件一樣方便地編輯文字。
首先輸入文字：天，并選中文本對象；選取菜單“Text／Convert to Paths”，這時(shí)文本對象中的每個(gè)字符都被轉換成路徑；利用“細部選取工具”可以對字符進(jìn)行任意的拖拉變形。
如果我們想對多個(gè)或所有的字符進(jìn)行自由變形、旋轉、斜切、水平翻轉、垂直翻轉等處理，可以按住shift鍵來(lái)同時(shí)選取多個(gè)字符，然后選取菜單“Modify／Transform”中相應的選項即可。
三、 文字和路徑的結合
利用Firework中的“Attach to Path”，我們可以讓文本按照設定的路徑進(jìn)行排列；另外，為文本設定不同的對齊方式，我們還可以獲得風(fēng)格各異的文字排列效果，不僅如此，最令人驚嘆的是，附在路徑上的文本還仍然保留著(zhù)可以在Text Editor中編輯的特性。
將文本按照路徑進(jìn)行排列的具體步驟如下：
1、輸入文字，例如：洪恩在線(xiàn)www.hongen.com。
2、選取“鋼筆工具”
圖5 繪制弧形
3、按住Shift鍵同時(shí)選取文本對象和路徑對象。
4、選取菜單“Text／Attach to Path”，這時(shí)被選中的文本就會(huì )沿著(zhù)路徑排列。（如圖6）
圖6 文本沿路徑排列
5、選取菜單“Text／Align（對齊）”中上一欄的“Justified（左右兩端對齊）”對齊方式，選取菜單“Text／Orientation（方向）”中的“Rotate Around Path（繞著(zhù)路徑旋轉）”，“洪恩在線(xiàn)www.hongen.com”就搖身一變，成了另外一個(gè)樣子（如圖7）。
圖7 繞著(zhù)路徑旋轉
6、如果我們要修改文本，只需雙擊文本對象就可以在打開(kāi)的Text Editor中對文本進(jìn)行重新編輯，例如，我們單擊“文本排列順序”的反向按鈕，文本就變成了水平反向排序（如圖8）。
圖8 水平反向排列
?。?、如果我們想讓文本垂直反向排列，只需選中文本對象，然后選取菜單“Text／Reverse Direction（反方向）”即可。（如圖9）
圖9 垂直反向排列
?。?、如果我們想要改變路徑，就需要執行“Text／Detach from Path”將文本和路徑分離，然后才能對路徑做進(jìn)一步的編輯。
?。?、文本附加路徑通常是以路徑的起點(diǎn)作為文本環(huán)繞路徑的起點(diǎn)，我們可以通過(guò)改變“Object”面板中“Text Offset（文本偏移量）”來(lái)調整文本環(huán)繞路徑的位置，例如，將“Text Offset”改為20，效果如圖10。
圖10 起始位置變更的效果
合并已有圖片
第一節：制作GIF動(dòng)畫(huà)
當我們在網(wǎng)上沖浪時(shí)，看到形形色色的動(dòng)畫(huà)效果，一定會(huì )有一種沖動(dòng)，那就是將這個(gè)漂亮的動(dòng)畫(huà)存儲到自己的硬盤(pán)上，那么你知道這些動(dòng)畫(huà)是如何制作的的嗎？
其實(shí)動(dòng)畫(huà)的原理很簡(jiǎn)單，就是讓圖片有秩序地輪流顯示。
利用Firework 3制作動(dòng)畫(huà)總共有三種方法，由易到難分別為：合并已有圖片生成動(dòng)畫(huà)，利用Tween Instances生成動(dòng)畫(huà)和手工繪制。
一、 合并已有圖片生成動(dòng)畫(huà)
合并已有圖片形成動(dòng)畫(huà)，顧名思義就是將一系列圖片按順序排列在不同的幀中從而生成動(dòng)畫(huà)，當然，首先我們必須有一串連續的圖片，然后，在Fireworks中，選擇菜單指令“File/Open Multiple”，這時(shí)將彈出“打開(kāi)”對話(huà)框（如圖1）， 進(jìn)入所需圖片所在的目錄，然后按照動(dòng)畫(huà)中圖片顯示的順序依次選取圖片，并單擊“Add”按鈕將這三張圖片加入到對話(huà)框下面的窗口；注意：我們還必須勾選對話(huà)框最下面的“Open as Animation”（以動(dòng)畫(huà)打開(kāi)）選項，不然的話(huà)，我們打開(kāi)的將是三張分開(kāi)的靜態(tài)圖片；最后，單擊“Done”（完成）按鈕。
圖1 以動(dòng)畫(huà)打開(kāi)
單擊窗口右下角狀態(tài)欄的播放按鈕，怎么樣？效果還不錯吧！
現在只是一只海鷗在不停地飛，如果為它再添加一副背景，效果一定會(huì )更好，好吧，下面我們就為海鷗添加一副大海的背景。
添加背景的方法有兩種：自動(dòng)復制和共享圖層。
?。?/span>. 自動(dòng)復制
圖2 添加幀
首先，單擊“Frames”面板右上角如圖2按鈕，選擇“Add Frames”，在彈出的對話(huà)框中選擇“Number”為1和“At the end”，單擊“ok”按鈕。
圖3 編輯模式狀態(tài)
然后將畫(huà)布的大小改為200x150（Pixels）；接下來(lái)，打開(kāi)背景圖片，發(fā)現圖片周?chē)幸粋€(gè)如圖3的邊框，說(shuō)明圖片處于圖像編輯模式，選擇“Modify/Exit Image Edit (Ctrl+Shift+D)”，使圖片進(jìn)入對象編輯模式，如果想讓圖片打開(kāi)時(shí)總為對象編輯模式，我們將“File/Preferences”的“Editing”面板中“Open in Image Edit Mode”復選框前面的對鉤去掉即可。（如圖4）
圖4 Prefernces對話(huà)框
選中新添加的“Frame
圖4 拷貝幀
打開(kāi)“Frames”面板，我們發(fā)現前三幀的圖片都被背景圖片遮住了，單擊第一幀，然后選中畫(huà)布中的圖片，執行菜單指令“Modify/Arrange/Send”；或者單擊修改工具欄的置后工具（如圖5），將背景圖片移到動(dòng)畫(huà)圖片的后面，其它幀同理。
圖5 置后工具
最后雙擊“Frame
圖6 延時(shí)設置
至此，背景添加完畢，趕快預覽一下動(dòng)畫(huà)的效果吧！（如圖7）
圖7 動(dòng)畫(huà)效果圖
２. 共享圖層
共享圖層就是使用“Layers”圖層面板，將指定的背景圖片設定為共享圖層，如此即可在所有的幀中看到該背景。
我們有時(shí)可能會(huì )誤認為每一幀都擁有一個(gè)圖層，其實(shí)不論設定的幀有多少，這些幀都位于同一圖層上，只是出現的時(shí)間不同罷了。
下面我們就利用此方法為剛才的動(dòng)畫(huà)添加一個(gè)背景： 首先，將畫(huà)布的大小改為200x150（Pixels），然后開(kāi)啟“Layers”圖層面板，單擊“Layers”圖層面板右上角如圖按鈕，選擇“New Layer”，在彈出的“New Layer”對話(huà)框中，為新層起一個(gè)名字，例如：background，鉤選“Share Across Frames”復選框，單擊“ok”按鈕，“background”圖層就成了共享圖層，（如圖8）左鍵按住“background”圖層，將它拖到“Layer 1”圖層下面；然后打開(kāi)背景圖片，單擊“矩形選擇工具”
圖8 共享圖層
其他制作方法
二、 利用Tween Instances生成動(dòng)畫(huà)
利用Tween Instances生成動(dòng)畫(huà)是Firework 3十分強大的功能之一，它的原理是將圖片轉化為元件（symbol），然后，確定元件的初始和結束分身（instance），再利用Tween Instances將這些分身轉換為具有過(guò)渡效果的連續幀（frame）。
Tween Instances功能支持元件的位移、旋轉、縮放、扭曲、傾斜以及不透明度的過(guò)渡。
具體的動(dòng)畫(huà)制作過(guò)程我們可以參見(jiàn)第一章的第四節，這里就不再重復。
三、 手工繪制
如果我們要手工繪制動(dòng)畫(huà)，就需要用到Firework 3的洋蔥皮功能（Onion Skinning），它就象我們制作卡通用的半透明紙一樣，在編輯當前幀的同時(shí)，可以看到此前或此后幀中的內容，這樣，我們在手繪動(dòng)畫(huà)時(shí)就可以方便地繪制圖案。
下面我們就來(lái)認識一下洋蔥皮功能，開(kāi)啟“Frames”面板，單擊“洋蔥皮功能”按鈕（如圖９），彈出菜單中選項分別為：
· No Onion Skinning： 關(guān)閉洋蔥皮功能；
· Show Next Frame： 在當前幀中顯示下一幀的內容；
· Before and After： 在當前幀中顯示前一幀和下一幀的內容；
· Show All Frames： 在當前幀中顯示所有幀中的內容；
· Custom： 可以設置洋蔥皮的顯示功能；
· Multi-Frame Editing： 可以透過(guò)洋蔥皮編輯其他幀中的內容。
圖9 洋蔥皮功能菜單
空說(shuō)無(wú)用，打開(kāi)我們先前制作的“海鷗”動(dòng)畫(huà)，然后選中Show All Frames，我們不僅可以看到當前幀的海鷗，還可以看到其他兩幀中海鷗的淡化效果（如圖10）；Firework 3的洋蔥皮功能十分強大，而且方便高效，我們可以在以后的手工繪制動(dòng)畫(huà)中慢慢地體會(huì )。
圖10 淡化效果
第二節：外掛程序 Xtras
一、 基本特效
打開(kāi)“Xtras”菜單，我們就可以看到Firework 3的各種特效：（如圖1）
Adjust Color： 色彩特效；
Blur： 模糊特效；
Other： 其他特效；
Sharpen：清晰特效。
圖1 Xtras菜單
使用Xtras的特效指令，其效果和特效面板相同，但對圖片賦予的任何特效，基本上不會(huì )出現在特效面板上。
二、 Eye Candy 3.1 LE 濾鏡
Firework 3本身自帶有兩個(gè)特效濾鏡：Cutout濾鏡和Motion Trail濾鏡。
Cutout濾鏡
Cutout濾鏡可以將點(diǎn)陣式圖片背景透明化，并在圖片上加入陰影等特效。（如圖2）
圖2 Cutout濾鏡
具體操作步驟如下：
首先打開(kāi)一副圖片（例如：lanqiu.gif），然后單擊“魔術(shù)棒”工具，點(diǎn)擊圖片的背景；選取菜單指令“Xtras\Eye Candy 3.1 LE\Cutout”，進(jìn)入Cutout視窗，它的各個(gè)選項功能如下：
A 設定陰影方向；
B 設定陰影效果：Distance（像素間距）、Blur（模糊效果）、Opacity（淡化效果）；
C 設定陰影顏色和填充顏色；
D 設定陰影模式（共十一種）；
E 啟動(dòng)和關(guān)閉預覽效果；
F 圖片預覽比例。
設置完畢后，單擊視窗右上方的“對鉤”即可。
Motion Trail濾鏡
Motion Trail濾鏡可以讓圖片產(chǎn)生移動(dòng)痕跡，進(jìn)而產(chǎn)生視覺(jué)上的運動(dòng)效果。（如圖3）
圖3 Motion Trail濾鏡
具體的操作步驟如下：
首先打開(kāi)圖片lanqiu.gif ，然后單擊“魔術(shù)棒”工具，點(diǎn)擊圖片的背景，再按下Ctrl+Shift+I，從而將圖片反選，并將它復制到剪貼板中；新建一個(gè)240x220(Pixels)，畫(huà)布顏色為透明（Transparent）的文件，然后粘貼籃球圖片，并將它移到適當的位置，選取菜單命令“Xtras\Eye Candy 3.1 LE\Motion Trail”，進(jìn)入Motion Trail視窗，其中各個(gè)選項的功能如下：
A 軌跡效果設定：Length（軌跡長(cháng)度）、Opacity（淡化效果）；
B Direction：軌跡方向；
C Just Smear Edges： 加強軌跡模糊效果；
D 軌跡模式（共十一種）；
E 啟動(dòng)和關(guān)閉預覽效果；
F 圖片預覽比例。
設置完畢后，單擊視窗右上方的“對鉤”即可。
三、 Adobe Photoshop 增強模組
對于Photoshop的老手來(lái)說(shuō)，用慣了強大的濾鏡效果之后，如果換成另外一套圖形處理軟件，可能就無(wú)法發(fā)揮百分之百的創(chuàng )造力。當然Fireworks 3不會(huì )讓我們產(chǎn)生這方面的尷尬現象，我們可以將Photoshop內建的濾鏡效果加到Xtras菜單中（如圖4）。
圖4 菜單中的Photoshop濾鏡
接下來(lái)我們以Adobe Photoshop 5.5 版為例，將Photoshop的濾鏡加入到Fireworks 3中，當然，首先我們必須安裝有此套軟件，如果版本不同時(shí)，請參照以下步驟：
第一步：首先選取菜單指令“File\Preferences”，開(kāi)啟Preferences對話(huà)框，切換到Folders選項卡，然后鉤選Photoshop_Plug-Ins復選框。
第二步：?jiǎn)螕?/span>“Browse”按鈕，指定Photoshop濾鏡路徑。如果我們在安裝Photoshop時(shí)，采用預設目錄，請將路徑設定為\Adobe\Photoshop\Plug-Ins\Effects；然后單擊Select“Effects”按鈕。
第三步：回到Preferences對話(huà)框，在“Browse”按鈕下就會(huì )出現指定的濾鏡路徑；單擊“確定”按鈕。（如圖5）
圖5 Preferences對話(huà)框
重新啟動(dòng)Fireworks 3，打開(kāi)Xtras菜單，我們就可以看到外掛的濾鏡項目。
網(wǎng)頁(yè)強化
第一節：設置網(wǎng)頁(yè)超連接
一、 設置熱區
Fireworks 3提供了三種熱區設置工具：矩形熱區工具
下面我們就運用這三種工具分別為圖片設置熱區：
打開(kāi)一副圖片：llt.gif，單擊矩形熱區工具
圖1 熱區
切換至圓形熱區工具
圖2 變換熱區形狀
切換至多邊形熱區工具
圖3 多邊形熱區
如果我們想隱藏熱區該怎么辦呢？其實(shí)Fireworks 3預設了一個(gè)圖層----Web Layer層專(zhuān)門(mén)用來(lái)存放熱區；當Web Layer層最左方出現眼睛圖標（如圖4）時(shí)，表示該層處于顯示狀態(tài)，如果想隱藏熱區，只需單擊眼睛使它消失即可。
圖4 Layers浮動(dòng)面板
Web Layer層是一個(gè)十分特殊的圖層，我們無(wú)法更改它的名字，也無(wú)法刪除該圖層，但是可以任意調整該層的位置。
二、 設置URL鏈接
完成熱區設置后，我們就需要指定該熱區所鏈接的URL，這樣瀏覽者單擊鼠標后，才能開(kāi)啟指定的網(wǎng)頁(yè)畫(huà)面。
下面我們就為人物“李白”添加一個(gè)鏈接：?jiǎn)螕粼摕釁^，然后開(kāi)啟“Object”面板，在鏈接欄中輸入它的URL：http://www.hongen.com/edu/dgkt/index1.htm；我們還可以在“<alt>”欄中為此鏈接加上說(shuō)明文字：每日詩(shī)詞；為了讓瀏覽者在打開(kāi)熱區鏈接后，還保持有原來(lái)的頁(yè)面，我們可以將Link target選項選為：_blank ，這樣單擊熱區后，會(huì )打開(kāi)一個(gè)新的窗口。另外，單擊“Shape”下拉列表按鈕和熱區顏色下拉列表按鈕我們可以選擇熱區的形狀和顏色。（如圖5）
圖5 熱區鏈接設置
三、 善用URL面板
當網(wǎng)頁(yè)中有很多鏈接時(shí)，利用“Object”面板一一輸入就十分麻煩，這時(shí)我們就可以利用URL面板快速地為熱區指定鏈接。
在“Library”選項中所顯示的是目前使用的URL資料庫（URLs.htm），該資料庫所包含的URL都會(huì )列在下方的清單中，如果我們是第一次使用URL面板，則清單中并無(wú)任何URL資料。（如圖6）
圖6 URL浮動(dòng)面板
那么我們如何將URL輸入到資料庫中呢？
?。?/span>.從無(wú)到有輸入URL 單擊新建按鈕（如圖7），彈出“New URL”窗口，輸入URL后，單擊“ok”按鈕即可。
圖7 輸入URL
?。?/span>.從已有的URL來(lái)建立新的URL 選擇想要修改的URL，然后單擊“URL”面板右上角的如圖按鈕，在彈出菜單中選擇“Add URL”，將彈出“New URL”窗口，修改完URL后，單擊“ok”按鈕即可。（如圖8）
圖8 添加URL
?。?/span>.輸入網(wǎng)頁(yè)中的URL 我們可以將某個(gè)網(wǎng)頁(yè)中所有鏈接導入到目前的資料庫中。 首先選擇“選項”菜單中的“Import URLs”指令，然后在彈出的“打開(kāi)”窗口中選擇我們想要導入的html文件：index.htm，單擊“打開(kāi)”按鈕即可。
?。?/span>.將熱區的URL加入資料庫
如果想把用“Object”添加的URL導入到資料庫中，我們只需選取“選項”菜單中的“Add Used URLs to Library”指令即可。
現在我們就可以為熱區添加鏈接了，單擊熱區，然后選取資料庫中相應的URL即可，是不是很簡(jiǎn)單！此外，我們還可以配合“Object”面板來(lái)檢查URL是否添加正確。
第二節：大圖的切割
大家在上網(wǎng)的時(shí)候，可能會(huì )經(jīng)常碰到這種情況：瀏覽某個(gè)網(wǎng)頁(yè)的時(shí)候，大部分內容已經(jīng)下載完畢，唯獨一副大圖遲遲不肯露面，讓人等得很心煩！這也就是我們?yōu)槭裁匆懈畲髨D的原因了。
把大圖切割成幾個(gè)小圖，會(huì )大大加快圖片的下載速度；另外，切割圖片還可以用于鏈接設定。
Fireworks 3可以輕松地將大圖切割為幾個(gè)小圖：
首先打開(kāi)我們要切割的圖片，然后選擇“Slice Tool”
在如圖1的切割圖片中，紅色的線(xiàn)條代表的是切割線(xiàn)，而綠色的區塊，我們可以設置URL鏈接，設置方法如同熱區鏈接的設置。
圖1 切割圖片示例
如果我們不想在切割圖片的時(shí)候產(chǎn)生鏈接區塊，那么我們只需在選取“Slice Tool”
接下來(lái)，我們來(lái)調整一下切割區域的比例分配，選取“一般選物工具”，拖動(dòng)某個(gè)切割區域（必須是拖曳產(chǎn)生的Image可鏈接區域），即可改變區域的個(gè)數和比例；另外，使用“一般選物工具”拖曳切割區域的控制點(diǎn)，也可以調整切割區域的比例。（如圖2）
圖2 調整切割區域
大家可能會(huì )問(wèn)：熱區是存放在Web Layer層的，那么切割區域存放在什么地方呢？
其實(shí)，切割區域也存放在Web Layer層中，同樣我們單擊眼睛使它消失即可將切割區域隱藏；另外，單擊圖標
下面我們?yōu)閳D片添加一些文字：
首先我們在圖片的右下角拖曳出一個(gè)Image可鏈接區域，適當地調整它的大小和位置，然后開(kāi)啟“Object”面板，在“Type”選項中選擇“Text”（文本），輸入需要的文字（例如：li bai）即可（如圖3）。
圖3 輸入文字
第三節：文件內容的設定和轉存
在前兩節所介紹的熱區鏈接和大圖切割，其最終的目的還是要將它們轉存為指定的格式，從而應用于網(wǎng)頁(yè)中，而在轉存前，我們需要設定一下轉存的模式。
選取菜單指令“File\HTML Properties”，打開(kāi)“HTML Properties”對話(huà)框，進(jìn)行如下設置： （如圖1）
圖1 HTML Properties對話(huà)框
一、 分割選項（Slice Options）
分割選項欄主要用于設置分割圖片在轉存時(shí)的命名方式，以及分割圖片間隙的處理方式等
1. Auto-Naming（自動(dòng)命名）：用于設定分割圖片的命名方式，我們一般選擇為“Basename_Row#_Col#”，就是HTML文件名稱(chēng)+所在行+所在列，例如：HTML文件名稱(chēng)為：llt.htm，那么第一行、第一列的分割圖片名稱(chēng)就是llt_r1_c1.gif；但是我們必須鉤選“Object”面板中的“Auto-Name Slices”，這樣才能自動(dòng)命名。
2. Table（分割圖片的間隙）：當圖片被分割轉存后，Fireworks 3會(huì )自動(dòng)產(chǎn)生一個(gè)文件名為Shim的填空圖片，我們選擇間隙模式為“1-Pixel Transparent Shim”，表示1Pixel寬度的透明圖片。
3. Export Undefined Slice：選中此項后，才會(huì )轉存所有分割的區域。
4. Multiple Nav Bar HTML Pages（轉存為可變換的圖片）：我們暫且不用理會(huì )。
二、 圖片對應（Image Map）
1. Map Type（對應類(lèi)型）：圖片對應的方式可分為Client-side（客戶(hù)端）和Server-side（服務(wù)端）兩種，我們一般選擇Client-side（客戶(hù)端），Client-side設定方便，而且執行時(shí)反應較快，而Server-side必須配合服務(wù)器的支持。
2. Background URL：用于設定背景圖片的鏈接URL，如：http://www.hongen.com/edu/dgkt/index1.htm。
3. Alternate Image Description：設置圖片的說(shuō)明文字，如：每日詩(shī)詞。
為了能夠讓其它網(wǎng)頁(yè)編輯器使用，我們需要將它轉換成HTML格式文件。 首先選取菜單指令“File\Export”，打開(kāi)“Export”對話(huà)框；然后指定圖片保存路徑和輸入HTML文件名稱(chēng)，在Style（HTML文件類(lèi)型）選項中選擇我們常用的Dreamweaver 3，這樣轉存后的HTML文件就可以在Dreamweaver 3中被順利地打開(kāi)了。 （如圖2）
圖2 輸出切割圖片
單擊“保存”按鈕，圖片就被轉存成了一個(gè)HTML文件和八個(gè)GIF圖片，還有一個(gè)shim.gif圖片，它就是我們在前面提到的分割間隙圖片（如圖3）。
圖3 輸出的圖片文件
第四節：與網(wǎng)頁(yè)編輯器的緊密結合
一、 與Dreamweaver的結合
如何才能將Fireworks 3轉存的HTML格式文件插入到Dreamweaver 3中呢？其實(shí)十分簡(jiǎn)單：
首先開(kāi)啟Dreamweaver 3，選擇好插入位置，打開(kāi)“Object”面板，然后單擊“Insert Fireworks HTML”按鈕
圖1 Insert Fireworks HTML對話(huà)框
網(wǎng)頁(yè)中常用的圖片格式不外乎GIF、JPG、PNG，由于Dreamweaver無(wú)法編輯這類(lèi)圖片，我們可以調用Fireworks 3來(lái)修改網(wǎng)頁(yè)中的圖片，當然我們應當首先將Fireworks 3設置為Dreamweaver的外部編輯器，具體步驟如下：
選取菜單指令“Edit\Preferences”，然后在“Category”清單中選擇GIF、JPG、PNG，發(fā)現它們的主外部編輯器為：iexplore，我們選擇Fireworks 3，然后單擊“Make Primary”按鈕，Fireworks 3就設置成了主外部編輯器。 （如圖2）
圖2 Preferences對話(huà)框
下面就來(lái)使用Fireworks 3編輯Dreamweaver中的圖片，單擊想要編輯的圖片，然后單擊“Properties（屬性）”面板中的“Edit”按鈕，彈出“Find Source”對話(huà)框，我們單擊“No”，圖片就在Fireworks 3中打開(kāi)了。（如圖3）
圖3 編輯圖片
我們選擇菜單指令“Xtras\Blur\Gaussian Blur”，彈出“Gaussian Blur”對話(huà)框，我們將“Blur Radius（模糊半徑）”適當地調整一下，單擊“ok”按鈕，圖片就被模糊化了；（如圖４）
圖4 圖片模糊效果
然后選擇菜單指令“File\Update”；切換回Dreamweaver中，我們就發(fā)現圖片已經(jīng)被自動(dòng)更新了。（如圖５）
圖5 圖片的更新
我們在Dreamweaver中還可以不打開(kāi)Fireworks 3，就執行它的最佳化功能，首先選擇菜單指令“Commands\Optimize Image in Fireworks”，單擊“Find Source”對話(huà)框中“No”按鈕，彈出Fireworks 3 的“Optimize”窗口，我們將圖片的壓縮比調到50，這樣圖片就小了許多，單擊“Update”按鈕，Dreamweaver中的圖片就變成了另外一副樣子。（如圖6）
圖6 50％壓縮比的畫(huà)質(zhì)
二、 與FrontPage 2000的結合
我們同樣可以將Fireworks 3文件轉存為適合FrontPage 2000的HTML文件，只需在轉存文件時(shí)，將“Style”選項選為FrontPage即可。
將Fireworks 3轉存的HTML格式文件插入到FrontPage 2000也十分簡(jiǎn)單，首先選好插入點(diǎn)，然后選擇“插入\文件”，在彈出的“選擇文件”窗口選擇我們需要的文件，單擊“打開(kāi)”按鈕即可。
動(dòng)態(tài)按鈕制作
第一節：動(dòng)態(tài)按鈕的制作
我們先來(lái)欣賞一下動(dòng)態(tài)按鈕的效果，移動(dòng)鼠標到如圖的按鈕上并單擊它，然后再次移動(dòng)鼠標到按鈕上，再次單擊，我們就會(huì )發(fā)現這個(gè)按鈕有四種狀態(tài)：
Up狀態(tài)：鼠標尚未經(jīng)過(guò)按鈕時(shí)的狀態(tài)；
Over狀態(tài)：鼠標移到按鈕上的狀態(tài)；
Down狀態(tài)：?jiǎn)螕舭粹o后的狀態(tài)；
Over While Down狀態(tài)：當按鈕被單擊過(guò)之后，鼠標移到按鈕上時(shí)的狀態(tài)。
所謂動(dòng)態(tài)按鈕其實(shí)就是將按鈕分成這四種不同的狀態(tài)，從而產(chǎn)生了動(dòng)態(tài)的視覺(jué)效果。
下面我們就一起來(lái)嘗試著(zhù)制作一個(gè)動(dòng)態(tài)按鈕：
首先我們新建一個(gè)文件（大?。?/span>120x40 Pixels；顏色為：Transparent（透明）），然后選取菜單指令“Insert\New Button”，彈出“Button”對話(huà)框，我們可以看到“Button”對話(huà)框共有Up、Over、Down、Over While Down與Active Area五個(gè)選項卡，其中的Up、Over、Down、Over While Down就是用來(lái)設置按鈕的四種變換狀態(tài)的；而Active Area則是用來(lái)為按鈕設置鏈接的。 （如圖1）
圖1 Button對話(huà)框
動(dòng)態(tài)按鈕其實(shí)是由四個(gè)Frame（幀）組合而成的，開(kāi)啟“Frame”面板，就會(huì )發(fā)現新按鈕擁有四個(gè)Frame，也就是Up、Over、Down、Over While Down四個(gè)狀態(tài)。（如圖2）
圖2 四個(gè)狀態(tài)
接下來(lái)，我們就按照按鈕的狀態(tài)設置順序來(lái)一步一步制作：
Up 狀態(tài)
首先切換至Up選項卡，然后將漆桶的顏色設置為藍色，同時(shí)將“Stroke”面板設置為“None”，將“Fill”面板設置為“Solid”；雙擊“矩形繪圖工具”，在彈出的“Options”面板將“Conner”設置為“50”；然后在畫(huà)布中繪制一個(gè)矩形；接下來(lái) ，我們?yōu)閳D片添加一些特效，首先選中圖片，然后開(kāi)啟“Effect”面板，單擊效果下拉菜單按鈕，在彈出的菜單中，我們選擇“Bevel and Emboss\Inner Bevel”；下面我們再來(lái)調整一下效果，雙擊“Effect”面板下方列表框中“Inner Bevel”特效，在彈出的菜單中，選擇特效設置。 （如圖3）
圖3 Up狀態(tài)設置
Over狀態(tài)
切換至“Over”選項卡，當然此時(shí)它為空，我們單擊
圖4 Over狀態(tài)設置
注意：由于合并后的圖片無(wú)法再回到原來(lái)的狀態(tài)進(jìn)行編輯，所以我們一定要確定無(wú)誤時(shí)再將它們合并。
Down狀態(tài)
首先我們將“Up”選項卡的圖片復制到“Down”選項卡中，然后將它的特效設置改為如圖5；然后將它的填充方式改為“Web Dither（網(wǎng)頁(yè)混色效果）”----可以選擇兩種顏色混合成一個(gè)新的顏色，我們雙擊四個(gè)顏色表格之一，將其中的一種顏色設置為如圖的顏色。
圖5 Down狀態(tài)設置
這樣，按鈕Down狀態(tài)就變成了另外一副模樣！
注意：我們千萬(wàn)要鉤選“Include Nav Bar Down State”復選框，否則我們單擊按鈕后，將不會(huì )看到Down狀態(tài)，而是仍然停留在“Up”狀態(tài)。 （如圖6）
圖6 Down選項卡
Over While Down狀態(tài)
Over While Down的表現時(shí)機是在按鈕被單擊過(guò)后，在將鼠標放在按鈕上的時(shí)候；一般來(lái)講，Over和Over While Down狀態(tài)的動(dòng)作方式都一樣，差別在于Over是當按鈕未被單擊過(guò)所表現的按鈕外觀(guān)，而Over While Down則是不管按鈕被單擊過(guò)幾次，只要將鼠標放到按鈕上，按鈕都會(huì )呈現的外觀(guān)。
我們首先將“Up”選項卡中的圖片復制過(guò)來(lái)，然后將它的特效改為高亮狀態(tài)（如圖7）；接下來(lái)，我們再為它輸入文字“再點(diǎn)一次”。
圖7 Over While Down狀態(tài)設置
至此，我們已將按鈕的四種狀態(tài)編輯完畢，下面我們來(lái)預覽一下按鈕的效果，切換回編輯視窗，然后單擊“Preview”選項卡或按下F12即可預覽我們的作品。
Active Area 設置
如圖8，Fireworks 3已經(jīng)自動(dòng)為我們設置好了感應區域，當然，如果我們不滿(mǎn)意，可以用熱區設置工具和大圖切割工具設置自己喜歡的感應區域；然后我們單擊“Link Wizard”按鈕
圖8 Link Wizard對話(huà)框
至此，動(dòng)態(tài)按鈕制作完畢，我們就可以將它轉存為HTML文件了。
如圖9中的四副GIF圖分別對應按鈕的四種狀態(tài)。
圖9 保存的文件
現在，我們打開(kāi)button.htm文件，就可以看到我們設置的各種效果了。
第二節：簡(jiǎn)單翻轉圖
簡(jiǎn)單翻轉圖的工作原理與動(dòng)態(tài)按鈕的一樣，而且同樣具備超鏈接的功能，不過(guò)它們的制作方法卻大不相同。簡(jiǎn)單翻轉圖只包括Up與Over兩種變化，因此只需要兩個(gè)Frame。
區別動(dòng)態(tài)按鈕制作過(guò)程的是：我們需要使用Behaviors與Frames兩種面板，不過(guò)制作出來(lái)的效果會(huì )與使用“Insert\New Button”指令所制作出的動(dòng)態(tài)按鈕相同。
下面我們就來(lái)制作一個(gè)簡(jiǎn)單的翻轉圖；
首先打開(kāi)圖片“llt.gif”，然后Ctrl+Shift+D使它進(jìn)入對象編輯模式，然后選取菜單指令“Insert\Hotspot”；下面我們?yōu)閳D片添加翻轉動(dòng)作，首先開(kāi)啟“Behaviors”面板，單擊“添加動(dòng)作”按鈕，在彈出的菜單中我們選擇“Simple Rollover”。（如圖1）
圖1 Behaviors浮動(dòng)面板
這時(shí)，雙擊“Behaviors”面板中剛剛產(chǎn)生的“onMouseOver”選項，就彈出了“Simple Rollover”信息框，提示我們要執行“Simple Rollover”功能必須在Frame1建立Up狀態(tài)圖，以及在Frame2建立Over狀態(tài)圖。（如圖2）
圖2 Simple Rollover信息框
接下來(lái)，我們就來(lái)編輯一下Frame1和Frame2中的圖片，打開(kāi)Frames面板，復制Frame1產(chǎn)生Frame2，單擊隱藏切割區按鈕，選中圖片，然后選取菜單命令“Xtras\Blur\Gaussian Blur”，彈出“Gaussian Blur”對話(huà)框，我們將“Blur Radius（模糊半徑）”適當地調整一下，單擊“ok”按鈕，圖片就被模糊化了。（如圖3）
圖3 模糊的llt.gif圖片效果
好了，現在按下F12就可以看到翻轉圖的效果了。
另外，我們還可以通過(guò)“Object”面板或“URL”面板來(lái)為它設置URL鏈接，在這里就不再贅述，請參看第四章的第一節。
第三節：動(dòng)態(tài)翻轉圖
動(dòng)態(tài)翻轉圖和簡(jiǎn)單翻轉圖的表現方法大不相同，簡(jiǎn)單翻轉圖是在圖片的原位置上變換圖片，而動(dòng)態(tài)翻轉圖則可以在其它位置顯示出不同的圖片，如下所示，當鼠標移到“電腦教育”上，就會(huì )顯示出我們預設的圖片，另外，如果單擊“電腦教育”還可以鏈接到指定的URL。說(shuō)到這里，大家一定已經(jīng)猜到這是切割圖片（Slice）的衍生功能了。
首先新建一個(gè)180x80的文件，然后建立如圖1的三個(gè)文本并將它們全部選中，選取菜單指令“Insert\Slice”，彈出“Fireworks”信息框(如圖2)，由于我們需要建立三個(gè)分割區塊，因此，我們單擊“Multiple”按鈕，這樣我們就建立了三個(gè)分割區塊（如圖1）。
圖1 分割區塊
圖2 Fireworks信息框
對應三個(gè)切割區域，我們需要編輯三個(gè)調換圖片，首先我們先來(lái)編輯“電腦教育”所需要的調換圖片。
開(kāi)啟“Frames”面板，新建并選中Frame2，然后使用“文字工具”和“矩形工具”繪制出如圖的圖片群，選取菜單指令“Modify\Group”將它們群組起來(lái)，并適當地調整一下位置，最后執行菜單指令“Insert\Slice”即可。 （如圖3）
圖3 所要調換的圖片
如何才能讓切割區域和調換圖片產(chǎn)生關(guān)聯(lián)呢？這就需要借助“Behaviors”面板的力量了。
首先切換至Frame1，選取“電腦教育”，然后單擊“Behaviors”面板的添加動(dòng)作按鈕，在彈出的菜單中選擇“Swap Image”，彈出“Swap Image”對話(huà)框，其中我們需要進(jìn)行以下操作： （如圖4）
圖4 Swap Image對話(huà)框
1. 首先我們需要確定調換圖片的來(lái)源，在“Show the swapped image from”欄中，我們鉤選“Frame No.”，并指定Frame2幀；
2. 選取需要的調換圖片；
3. 鉤選“Restore image onMouseOut”選項，這樣當鼠標離開(kāi)“電腦教育”后就會(huì )自動(dòng)關(guān)閉調換圖片；
?。?/span>. 單擊“ok”按鈕，在“Behaviors”面板中顯示出了Fireworks 3預設的調換圖片的打開(kāi)方式------“onMouseOver”。 （如圖5）
圖5 Benhaviors浮動(dòng)面板
至此，“電腦教育”的動(dòng)態(tài)翻轉圖已經(jīng)設置完畢，我們按下F12來(lái)欣賞一下（插入dongfan1.html）。
另外，Fireworks 3還為我們提供了其它三種動(dòng)作變換的方式：onMouseOut、onClick和onLoad，下面我們就來(lái)認識一下它們：
onMouseOut
onMouseOut是指當鼠標先移入感應區內，再移出感應區時(shí)才會(huì )顯示調換圖片，不過(guò)使用此功能時(shí)，我們必須在“Swap Image”對話(huà)框中取消鉤選“Restore image onMouseOut”選項，否則調換圖片將無(wú)法顯示出來(lái)。 (如圖6)
圖6 Swap Image對話(huà)框中的選項
話(huà)又說(shuō)回來(lái)，一旦我們取消鉤選“Restore image onMouseOut”選項，我們就會(huì )發(fā)現不管鼠標移到何處，調換圖片將一直顯示著(zhù)，別擔心，Fireworks 3還為我們提供了“Swap Image Restore”，它也將提供四種方式來(lái)關(guān)閉調換圖片。 （如圖7）
圖7 behaviors浮動(dòng)面板中的菜單
onClick
onClick是指當我們感應區內單擊鼠標時(shí)，調換圖片才會(huì )顯示出來(lái)；如果在“Swap Image”對話(huà)框中鉤選“Restore image onMouseOut”選項，則當鼠標離開(kāi)感應區后，會(huì )自動(dòng)關(guān)閉調換圖片。 （如圖8）
圖8 onClick事件
onLoad
onLoad是指當圖片下載后就會(huì )立即顯示調換圖片，如果我們想要關(guān)閉調換圖片，只要將鼠標移入再移出感應區即可（條件：必須在“Swap Image”對話(huà)框中鉤選“Restore image onMouseOut”選項）。
前面我們提到了“Swap Image Restore”，它可以將顯示中的調換圖片運用onMouseOver 、onMouseOut、onClick和onLoad的方式予以關(guān)閉；不過(guò)當我們在使用這個(gè)功能時(shí)，一定要在“Swap Image”對話(huà)框中取消鉤選“Restore image onMouseOut”選項，否則，一旦鼠標離開(kāi)感應區后，調換圖片也會(huì )自動(dòng)關(guān)閉的。
下面我們就為“電腦教育”添加一個(gè)關(guān)閉動(dòng)作：
選中“電腦教育”，雙擊onMouseOver，彈出“Swap Image”對話(huà)框，然后我們取消鉤選“Restore image onMouseOut”選項，單擊“ok”按鈕；單擊“Behaviors”面板的添加動(dòng)作按鈕，在彈出的菜單中選擇“Swap Image Restore”，這時(shí)在“Behaviors”面板中出現了Fireworks 3 預設的關(guān)閉方式“onMouseOut”，我們單擊它右邊的下拉按鈕，并選擇“onClick”，ok，按下F12 ，在瀏覽器窗口中我們將鼠標移到“電腦教育”上，這時(shí)有關(guān)教育的產(chǎn)品就呈現在我們的眼前；將鼠標移出“電腦教育”，產(chǎn)品介紹并不消失，但當我們單擊“電腦教育”時(shí)，產(chǎn)品介紹就會(huì )消失。
在“Behaviors”面板中還提供了一個(gè)顯示Message（信息）的功能，這個(gè)Message會(huì )顯示在瀏覽器下方的狀態(tài)欄中，如圖9所示。
圖8 設置狀態(tài)欄中的文字
單擊“Behaviors”面板中添加動(dòng)作按鈕，然后從菜單中選擇“Set Text of Status Bar”指令，（如圖8）彈出“Set Text of Status Bar”對話(huà)框，接著(zhù)在Message框內輸入要在狀態(tài)欄中顯示的文字，例如：Gold Human，單擊“ok”按鈕即可。（如圖9）
圖8 Set Text of Status Bar對話(huà)框
新建立的狀態(tài)欄信息其作用方式為onMouseOver，也就是當鼠標移到感應區后，就會(huì )將指定的文字顯示在瀏覽器的狀態(tài)欄上。
如果我們想重新編輯信息文字，只要雙擊“Set Text of Status Bar”，這樣就會(huì )顯示“Set Text of Status Bar”對話(huà)框讓我們編輯信息文字；另外，狀態(tài)欄信息文字的出現方式也可以加以改變，其設定方式和Swap Image一樣。首先選取“Set Text of Status Bar”，然后單擊下拉按鈕，從下拉菜單中選取onMouseOver 、onMouseOut、onClick和onLoad指令即可。
自動(dòng)化處理
第一節：查找和替換
相信大家都十分熟悉WORD等文字處理軟件的查找、替換功能，可是你見(jiàn)過(guò)圖形處理軟件具有此項功能嗎？Fireworks 3就是這么一款獨到的圖形處理軟件，它提供了強大的查找、替換功能，我們可以方便地查找、替換已有文件的文字、字體、顏色等等。
下面我們就試著(zhù)將上次制作的動(dòng)態(tài)翻轉圖中的“教育”替換為“軟件”：
首先打開(kāi)動(dòng)態(tài)翻轉圖.png，然后選取菜單指令“Window\Find and Replace”開(kāi)啟“Find and Replace”浮動(dòng)面板，接下來(lái)，我們就對查找、替換進(jìn)行具體的設置（如圖1）：
圖1 Find and Replace浮動(dòng)面板
1. 設定搜尋范圍：?jiǎn)螕羲褜し秶吕粹o，選取“Search Document”（當前開(kāi)啟的所有文件）；
2. 設置搜尋類(lèi)型：?jiǎn)螕羲褜ゎ?lèi)型下拉按鈕，選取“Find Text”；
3. 在“Find”框中輸入“教育”；
4. 在“Change to”框中輸入“軟件”；
單擊“Find”按鈕，“教育”就變成了另外一種顏色，單擊“Replace”按鈕，“教育”就被替換成了“軟件”，這樣我們可以以手動(dòng)加上自動(dòng)的方式，來(lái)一一過(guò)濾要替換的文字；如果我們確定不需要過(guò)濾而直接替換文字，單擊“Replace All”按鈕即可。（如圖2）
圖2 替換完成
當替換完成后就會(huì )彈出信息框，我們可以從中了解到有多少文字被替換過(guò)了。（如圖3）
圖3 替換完成時(shí)的信息框
當然Fireworks 3查找替換功夫不止這么膚淺，現在，我們就來(lái)看一下它的兵器譜：
一、 搜尋范圍 （如圖4）
圖4 搜尋范圍
1. Search Selection：由我們自己選擇搜尋范圍；
2. Search Frame：表示將目前所編輯文件中的所有Frame作為搜尋范圍；
3. Search Document：表示將目前開(kāi)啟的所有文件作為搜尋范圍，當然所有文件中的Frame都會(huì )成為搜尋的目標；
4. Search Project Log：將記錄在“Project Log”面板中的所有文件作為搜尋范圍。
5. Search Files：將我們指定的文件群作為查找的范圍，選取這個(gè)選項后會(huì )彈出“打開(kāi)”對話(huà)框，然后選取我們要查找的文件并單擊“Add”按鈕來(lái)加入列表中，文件選取完后，最后單擊“Done”按鈕即可。
二、 搜尋類(lèi)型 （如圖5）
圖5 搜尋類(lèi)型
1. Find Text：表示搜尋的類(lèi)型為指定的文字；
2. Find Font：搜尋條件可以設置為字體、字體樣式與字號大小。
3. Find Color：表示搜尋的類(lèi)型為指定的顏色。另外，我們還可以在“Apply to”欄中設置它的應用范圍。
4. Find URL：選擇它，我們可以搜尋鏈接的URL。
5. Find Non-Web216：搜尋文件中非Web216的顏色，并將這些顏色轉換成相容于瀏覽器的Web216色彩。注：所謂Web216就是Web的安全色彩，其數量為216色。
三、 替換條件 （如圖6）
圖6 替換條件
1. Whole Word：整詞都符合替換內容時(shí)才替換，比如：“abc”是一同鍵入的且相連，與其它詞有空格分開(kāi)，就被判斷為一個(gè)單詞，若選中該項，則只替換其中任何兩個(gè)或一個(gè)字母都是不行的，必須三個(gè)字母同時(shí)替換，但若不選中此項，則可以只替換其中一個(gè)或兩個(gè)字母。
2. Match Case：大小寫(xiě)匹配即區分大小寫(xiě)；
3. Regular Expressions：查找、替換的是表達式。
前面我們提到了“Project Log”浮動(dòng)面板，那你知道它究竟是干什么的嗎？
“Project Log”（項目清單）面板可以自動(dòng)存儲查找、替換過(guò)的文件，如圖7所示；使用項目清單面板，可以方便地按照上次的導出設置將選中的文件導出，或者對被選文件進(jìn)行批處理等。單擊右上角如圖的按鈕，將彈出一個(gè)菜單，其中的具體內容為：
圖7 Project Log浮動(dòng)面板
1. Export Again：按照上次的導出設置，重新導出文件。
2. Add Files to Log：將要查找、替換或者要批處理的文件加入到該面板的文件列表中。
3. Clear Selection：從項目清單面板中刪除當前選中的文件。
4. Clear All：清除項目清單面板中的所有文件。
第二節：批處理
如果說(shuō)“查找、替換”功能可以迅速地完成文件編輯的工作，那么“批處理”將會(huì )使編輯工作更加出神入化。
第一步：選取菜單指令“File\Batch Process”開(kāi)啟“Batch Process”對話(huà)框；
第二步：選擇要處理的文件，我們可以在“Files to Process”選項清單中選擇文件來(lái)源：（如圖1）
圖1 選擇文件來(lái)源
“Current Open Files”：將目前開(kāi)啟的所有文件作為要處理的文件；
“Project Log（All Files）”：將“Project Log”面板中所列出的文件作為文件來(lái)源；
“Project Log（Selected Files）”：將“Project Log”面板中所選取的文件作為文件來(lái)源；
“Custom”：使用Custom選項時(shí)，會(huì )彈出“打開(kāi)”對話(huà)框，我們將要處理的文件加入文件清單即可。注：我們可以單擊“Batch Process”對話(huà)框中瀏覽按鈕來(lái)直接打開(kāi)“打開(kāi)”對話(huà)框。
第三步：指定批處理要執行的操作，在“Action（操作）”有兩個(gè)選項：
“Find and Replace”（成批替換）：鉤選“Find and Replace”選項后，會(huì )彈出“Batch Replace”對話(huà)框，它和“Find and Replace”面板設定方式一樣，不過(guò)它僅供我們設定搜尋條件和替換內容，當設定完后，單擊“ok”按鈕即回到“Batch Replace”對話(huà)框。（如圖2）
圖2 成批替換操作
要注意的是：在“Batch Replace”對話(huà)框中所有選項的應用范圍，只局限于Fireworks和Freehand文件，如果只是純圖片文件（如：GIF或JGG文件）則無(wú)法應用。除此以外，鉤選“Update Project Log”可以將“Project Log”面板內的文件一并更新，因此建議鉤選此項。 （如圖3）
圖3 Batch Replace對話(huà)框
“Export”（批處理轉存）： （如圖4）
圖4 批處理轉存操作
鉤選“Export”選項后，彈出“Batch Export”對話(huà)框，其中有三項設置：（如圖5）
圖5 Batch Export對話(huà)框
“Export Settings”：用于設置轉存的圖片類(lèi)型；
“File Name”：設定轉存后的文件名稱(chēng)，它的三項設置如下： （如圖6）
圖6 File Name選項
1. Original Name：使用原來(lái)的文件名；
2. Add Prefix：在原文件名前添加文字；
3. Add Suffix：在原文件名尾端添加文字。
如果我們選用“Add Prefix”和“Add Suffix”，則必須在選項后方的方塊中輸入文字。
下面這一項用于設定轉存時(shí)的文件縮放大小，其預設值為“No Scaling”，表示不縮放文件。
在執行批處理時(shí)，Fireworks 3可以同時(shí)備份原來(lái)的文件，鉤選“Batch Process”對話(huà)框中的“Backup Files”選項，會(huì )彈出“Save Backups”對話(huà)框（如圖7），其中我們可以設定文件備份的形式，若鉤選“Overwrite Existing Backups”選項，則會(huì )覆蓋原來(lái)的備份；若鉤選“Incremental Backups”選項，則會(huì )將上一次的備份重新命名。
圖7 Save Backups對話(huà)框
一切設置完畢后，我們單擊“ok”按鈕，Fireworks 3開(kāi)始批處理文件，批處理結束后，會(huì )彈出一個(gè)“Batch Process”信息框告訴我們有多少個(gè)文件被處理過(guò)，單擊“ok”按鈕即可。 （如圖8）
圖8 Batch Process消息框
第三節：腳本的儲存和使用
我們可以將批處理的所有設定存儲為腳本文件（.jsf），這樣以后我們還可以將這個(gè)腳本內的所有設定加以執行，使得編輯工作更加輕松。
當我們“Batch Process”對話(huà)框中設定完所有選項后，單擊“Script”按鈕，將彈出“另存為”對話(huà)框，輸入腳本文件名稱(chēng)，然后單擊“保存”按鈕即可。
下面先來(lái)看一下腳本文件是怎樣的一個(gè)文件，用記事本打開(kāi)Script.jsf腳本文件（如圖1），我們就發(fā)現腳本文件就和程序一樣，里面包含了一堆指令和參數，我們不需要去了解腳本文件內的指令和語(yǔ)法，因為Fireworks 3會(huì )自動(dòng)生成我們在“Batch Process”對話(huà)框中所有設置的Script。
圖1 腳本文件內容
那么如何執行腳本文件呢？
首先我們選取菜單指令“File\Run Script”，然后在彈出的“打開(kāi)”對話(huà)框中選中需要的腳本文件，單擊“打開(kāi)”按鈕，這時(shí)會(huì )彈出“Files to Process”對話(huà)框，從中我們指定文件的來(lái)源，單擊“ok”按鈕即可開(kāi)始執行腳本文件。 （如圖2）
圖2 Files to Process對話(huà)框
好了，到終點(diǎn)了，謝謝大家和一起度過(guò)美好的Fireworks 3之旅！
聯(lián)系客服
