臨摩Fireworks完成一網頁的步驟，藉以認識Fireworks 的對網頁編排中的圖像做分割、按鈕製作及動畫。
前置作業
在你的www資料夾內新增work4資料夾。你在本練習的內容要放置在該資料夾內。
步驟
一、預想圖
網頁的版面及內容（可以徒手畫概念圖，或直接在畫圖軟體內完成。）
二、開啟新檔，設頁大小。
對於800x600大小的螢幕，扣除瀏覽器的外框及圖示，真正可以置放內容的空間為760x420。
三、匯入圖像
圖像可以是點陣圖和∕或向量圖。在點陣式軟體如Photoshop或向量軟體如Illustrator或Freehand或CorelDraw做好圖片檔案，存成PNG檔案格式或JPEG檔。
然後在Fireworks選File > Import，匯入所需的圖像檔案。以箭頭工具做好圖像的編排。
四、使用繪圖工具
(一) 影像工具
以箭頭工具點按影像圖二下即可進入影像編輯模式。此時作業視窗下方緣的「Exit Image Edit Mode」會呈紅色實彩，點按之即可切換到向量工具模式，此時該「Exit Image Edit Mode」圖示會變成半實彩狀態。
(二)向量工具
如畫矩形、橢圓及具茲曲線等。
使用上三項模式時，可用到Stroke，Fill及Effect等功能來增加圖像的特效。例如：利用Fill及Effect等功能，一圓形變成一凸起的圓鈕；或一矩形變成有底紋的按鈕。
五、製作按鈕（button)
- 以向量工具（如圓或矩形）畫一按鈕外形。
- 點選上一步驟之向量圖形，選擇Insert > Convert to Symbol...，將它轉換成symbol。
- 此時會出現Symbol Properties對話框，選擇Button，並在Name文字框內命名。
- 選擇Window > Library，於Library視窗內點按該Button二下。
- 在Button編輯器內修改symbol，鍵入文字。
- 點選「Over」標頭，點按視窗下方的「Copy Up Graphic（拷貝Up標頭內的圖像）」，將Up標籤內的圖像拷貝到Over關鍵影格內。
- 改變「Over」標頭內之圖像的外框與內填色彩。
- 點選「Over」標頭，點按視窗下方的「Copy Up Graphic」，將Up標籤內的圖像拷貝到「Down」標籤內。
- 改變「Down」標頭內之圖像的外框與內填色彩。
- 指定URL：點選「Active Area」標頭，點按視窗下方的「Link Wizard...」，在「Link Wizard...」視窗內點選「Link」標頭，在「URL」內鍵入指定的位址如http://cd.ntit.edu.tw。
- 關閉Button編輯器。
- 按住Alt鍵（Windows）或Option鍵（Machintosh），把前一按鈕下拉複製之。
- 在「Object」功能盤之「Button Text」欄位內前一按鈕之文字更新，壓下「Current」鈕。
- 點按「Link Wizard」鈕
- 點按「Link」標頭，更改URL。
- 點按「OK」鈕。
URL分絕對URL與相對URL兩種，前者是完完整整標示出如http://www.cd.ntit.edu.tw/news/01.html。
而相對URL表示該URL與當下使用的html之間的相對位址關係。
檔名.htm是指在同一個資料夾內。
./../file.htm是在往上二階的資料夾內的檔案。
htmldocs/file.htm是在下一階名為htmldocs的資料夾內的檔案。
七、Rollover
此處的rollover除了使按鈕外觀起變化之外，也可以使頁面中的某個區域會起變化。這類型的rollover在Fireworks稱之為 disjoint rollover。例如：頁面上有二個按鈕，滑鼠移到其中一個時，除了按鈕會起視覺變化外，頁面的固定區塊會立即出現該按鈕所對應的訊息或圖像。
- 開啟Layers視窗，點選Layer 1。
- 開啟Frame面板，上面出現Frame 1。
- 點按面板下方之「New/Duplicate Frame」圖示，如此會產生Frame 2。
- 在Frames面板內點按Frame 2。除按鈕之外，其餘的任何東西都消失了，因為圖像在Frame 1，然而按鈕是每一個Frame都會共享的。
接下來，你要將圖像安置在Frame 2，它作為滑鼠滑過時的資訊源。你需要開啟洋蔥皮（onion skin）以幫助在Frame 1與Frame 2的作品。洋蔥皮讓你同一時間內以略為退色的方式展出一個frame以上的圖像。 - 在Frame面板上點按Frame 1左側的柱列。Fireworks展出Frame 1的內容，好像它是在透明的洋蔥皮上面。
- 開啟Library。
- 從Library內選取名單內的Swap Text。該作品的預視圖出現在Library面板的最上方。
- 從Library面板上的預視區拖移，並與歡迎的訊息文字對齊。
- 點按Frame面板的Frame 1使其活化。
- 使用指位器去選取在歡迎訊息文字後面的楬色矩形，並選Insert > Slice。
Fireworks在圖像的上面插入一個亮綠、透明的矩形以代表切面。 - 在Object inspector內，棄選Auto-Name這個選項，並在面板底部之文字框內鍵入text_slice。為分割取個易辨識的名稱有助於在維護及更新網站時易於指認該分割圖像。
- 選取Gift按鈕。
- 在Behaviors inspector內點按附有+符號的按鈕，並從彈現式選單內選擇Swap Image。Swap Image對話框出現。
- 確定在對話框左方的slice名單內選取了text_slice，然後點按OK。
- 在工具箱內點按Hide Hotspots and Slices鈕。點按作業區的Preview活頁標籤，並將指位器移到按鈕上。指到Gifts鈕，並注意右邊的訊息改變了。
- 點按Original活頁標籤並將圖像存檔。
Fireworks包含著許多能在向量圖及點陣圖上用到的特效及圖像處理指令。當你使用Effect面板時，已施用到物件的特效仍時可以加以編輯的，當然，也是可以被移除的。本節中，我們要為一個按鈕加上凸起及陰影的特效。
- 選取一按鈕。
- 開啟Effect面板。
- 點按面板上方的彈現式選單並選擇Bevel and Emboss > Inner Bevel。
- 設定beveled的寬度為3個pixel。
- 點按Effect面板上方的彈現式選單並選擇Shadow and Glow > Drop Shadow。
- 點按彈現式選單的外邊，表示接受內定的設定。
當你在一個文件內作業時，Fireworks把你用到的步驟記錄在History面板上，你能夠使用History面板來取消所做過的步驟以回到之前的狀態，你也能夠再次播放該面板的步驟來使你的工作自動化。
- 選取另一按鈕。
- 在History面板，按下Shift鍵，並點選最後兩個步驟，兩者均取名為Effect，這兩個竹特效是用在上一個按鈕的，包含Bevel and Drop Shadow。
- 點按History面板內的Replay鈕，Fireworks會將Bevel and Drop Shadow兩特效施用在本節所選取的按鈕。
- 畫出一個白色的向量封閉圖形，比方說圓，置之於另一圖像之前，以該白色圖形當做Mask。
- 將前二圖形一併選取。
- Modify > Mask Group > Mask to Path。
- 拖移mask把手，使mask之後的圖像可以適當地露出。
在Fireworks，要將一個圖像區與URL搭上關連是很容易的。當你要製作一個連結但不要按鈕的互動狀態時，hotspot就可派上用場。在Fireworks 製作hotspot就是在做圖像地圖（map）了。本節中，我們要為一張圖片製作一個hotspot。
- 點選一圖像。
- Insert > Hotspot，可插入透明的藍色圖形代表hotspot。
- 在Object面盤上之文字欄內鍵入URL。
- 在Link文字欄內鍵內一個URL。
- 鍵入一個替代描述。
- 鍵入HRML的頁框名或選擇保用的target。
Fireworks讓你的文件的各個部份最佳化。每一文件有內定的最佳化設定，但你能夠將文件中的個別區域最佳化。例如文件中只有二個區域是用JPG格式，而其餘的用GIF格式。
首先，確認要為該文件最佳化的設定，它們是為文件中未在分割物件之下的圖像而設的。
1. 選擇Edit > Deselect棄選所有的物件。
2. 現出Optimize面板。
3. 確定GIF WebSnap 128是面板內之Settings彈現式選單內的選項。
現在你將在咖啡杯上製作一個分割。
4. 用工具列中的指位器點按咖啡杯圖像，並選擇Insert > Slice。Fireworks製作出分割物件，它與所選取的物件同樣尺寸。
5. 從Optimize面板上之Settings彈現式選單選擇JPEG - Smaller File。
6. 點按作業區上的2-Up活頁標籤。必要的适，選取Hand工具，並在左方拖移，如此你可以看到咖咖杯。
Fireworks展出文件的兩種版本。左方是原始圖像，右方是最佳化的版本。當你改變原始檔時，Fireworks會即時更新最佳化的圖像。若Web物件（hotspot及slice）被展出，則選取在左方的分割將會使其他的圖像褪色，讓你聚焦在最佳化的受選分割。
7. 在咖啡杯被選取的情況下，對Optimize面板的最佳化設定做修改，並注意這些修改能夠對右方的圖像改變到什麼情況。
8. 存檔
補充：
在Fireworks將圖像最佳化涉及三項工作
* 選擇最好的格式（format）：各種格式有不同的壓縮色彩方式，為特定類型的圖像選擇合適的格式可以大幅降低圖像檔的大小。
* 設定專屬格式選項：每一網頁檔案格式具有特定的選項以控制圖像的壓縮。例如，對GIF圖檔使用遞色（dither）就可以把較少色彩的圖像做點補償。對JPEG圖檔採用平順（smooth）方式即可讓圖像輕微模糊，如此將使該圖像在壓縮時減低檔案的大小。
* 調整圖像的色彩：把圖像的色彩設限在色盤內所指定的一群色彩，然後把色盤內未用到的色彩刪掉。色盤內的色彩越少表示該圖像用較少的色彩，這會使該圖像的檔案變得更小。減少色彩數量會降低圖像的品質，因此必須試試不同的色盤以找出圖像品質與圖檔大小間的最佳平衡。
在作業區內將圖像最佳化的方法有三種：
* 在Optimize面板（Window > Optimize）內有許多讓圖像最佳化的關鍵控制。
* 現用色盤呈現Color Table面板。
* Preview視窗會表現出轉存的圖像的樣子。
選擇預先設好的最佳化
十三、輸出圖像、HTML 及JavaScript
當你轉存（export）你的文件時， Fireworks為所有的分割轉存為個別的檔案。它也同時產生在瀏覽器所需的所有的HTML及JavaScript碼。Fireworks輕易將將這些圖像、Fireworks的轉存到你以Dreamweaver來製作和管理的網站上。
- 選擇File > Export。轉存文件會製作一個HTML檔也為每一分割製作一圖像檔。為了易於之後移除這些檔，將它們轉存到新的資料夾。
- 選擇儲存位置，點按New Folder鈕，並為該資料夾取名，要確定該新資料夾的名稱出現在對話框的上方。
- 接受內定base name（基底名稱）之設定，Fireworks以該名稱來做HTML檔的名稱，並以該名稱為基底來為因分割所產生的GIF及JPEG檔命名。
- 你能夠點按Setup鈕來修改Fireworks為檔案命名的方式，以及設定轉存HTML的其他特性。
從Slicing的彈現式選單內選擇Use Slice Objects，這會確保所有的按鈕、behavior及最佳化於瀏覽器內展現時會正常運作。 - 從Style彈現式選單內選擇Dreamweaver 3，這會產生在Dreamweaver 3使用該檔時的最適佳化HTML碼。
- 確定Location彈現式選單被設在Same Directory（同一目錄）。此一選項讓你指定所儲存的HTML檔與轉存的圖像之關係。你也能夠將所有的HTML拷貝到Clipboard（剪貼板）並將之直接貼到Dreameweaver檔內。
- 點按Save (Windows) or Export (Macintosh)將該檔轉存。該HTML檔現在能夠在瀏覽器內來觀看或者在Dreamweaver內做進一步的修改。
若你想一睹為快，可在Web瀏覽器內預看該HTML。 - 開啟一個網頁瀏覽器，選擇File > Open > Page in Navigator (Netscape Navigator)或File > Open (Microsoft Internet Explorer)，並選擇你所轉存的HTML檔。
- 你也能夠直接從Firewroks選擇File > Preview in Browser，並選定瀏覽器直接來看。若未見瀏覽器，則選Set Browser加入Primary（第一）及 Second (第二 ）個瀏覽器的名單內。
- 試完該轉存的HTML檔，回到Fireworks並關閉該檔。
Fireworks利用frame來產生GIF動畫，每一個frame內存置不同的圖像。要出現在frame中的元素被安置於同一layer內。當frame逐格呈現，就會產生動作的錯覺。
- Window > Layer，出現Layer面版。
- 點按New/Duplicate Layer按鈕。
- 將欲產生動畫的小圖像移到新的layer，則這些小圖像將可以先前的layer做背景。
- 在Layers面版上之Layer 1最右側的藍色小方塊表示選項是該layer上。
- 將靠在Layer 1的藍色小方塊拖移到新增的Layer 2。
- 如此能夠把Layer 1分享出去，所以其上的文字可以出現在動畫上的每一個frame。
- 開啟Layers面板上的的options彈現式選單，並點選Share Layer。一個影片圖示出現在layer名稱右側，表示該層分享到frames。
- 選取要分享出去的layer（本例中是layer 1）
- 將欲產生動畫之圖像拖移到背景圖並與加以排列。
- 現出Frames面板，點按該板面下方的Distribute to Frames按鈕。
- 現出Optimize面板，從export彈現式清單上點選Animated GIF，妳必須使用Animated GIF將frame輸出到檔案中。使用GIF將只會把第一個frame輸出而已。
- 按下Shift鍵，將在Frames面板的全部frame選取，並在options選單上選Properties。
- 設定Frame Delay設定為50並按下Enter鍵（Ｗindows）或Return鍵（Macintosh）。
- 決定動畫的播放次數或循環播放，點按Frame面板左下緣的循環次數選項。
- 點按Play按鈕；點按Stop按鈕中止動畫。
在Fireworks完成的作品必須加以存檔。
選擇File > Save As，取好名並選擇檔案的儲放位置，儲存之。
註：Fireworks存檔的格式是PNG（portable network graphic）檔。它是Netscape 5.0及IE4.0直接支援的格式，優點如下：
* 支援各種色彩模式。
* 高品質壓縮。
* 支援複雜的交錯。
* 支援gamma校正。
* 支援alpha channel。
* 支援註解。
補充
slice與hotspot的比較
slice（分割）物件是透明綠；hotspot（熱點）是透明藍，兩者均會出現在Web Layer內。前者會將圖像切割並有利於將圖像的歸類，並能做出按鈕等功能及超連結。而hotspot的目的是要提示一個圖像區，讓該區可以做超連結。
hotspot做超連結
- 在Web Layer內做好hotspot。
- 點取所要的hotspot。
- 選擇Window > Object以開啟Object檢查器。
- 在Link文字欄內鍵內一個URL。
- 鍵入一個替代描述。
- 鍵入HRML的頁框名或選擇保用的target。
