分割版面的方法

製作網頁時，許多頁面、按鈕及標題是用圖像來呈現的，請思考以下的網頁如何利用Fireworks或ImageReady來分割。
http://www.hothothot.com
Fireworks是為製作網頁編排而結合點陣式軟體與向量式軟體於一身的編輯器。此軟體方便對網頁編排中的圖像做分割以利傳輸，同時具有製作按鈕及動畫的功能。
利用Fireworks製作網頁頁面的步驟：
一、預想圖
網頁的版面及內容（可以徒手畫概念圖，或直接在畫圖軟體內完成。）
二、開啟新檔，設頁面大小。
對於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)
製作按鈕是網頁設計中很重要的一項，Fireworks所提供的製作按鈕之能力，是值得嘉許的。

1. 以向量工具（如圓或矩形）畫一按鈕外形。
2. 點選上一步驟之向量圖形，選擇Insert > Convert to Symbol...，將它轉換成symbol。
3. 此時會出現Symbol Properties對話框，選擇Button，並在Name文字框內命名。
4. 選擇Window > Library，於Library視窗內點按該Button二下。
5. 在Button編輯器內修改symbol，鍵入文字。
6. 點選「Over」標頭，點按視窗下方的「Copy Up Graphic（拷貝Up標頭內的圖像）」，將Up標籤內的圖像拷貝到Over關鍵影格內。
7. 改變「Over」標頭內之圖像的外框與內填色彩。
8. 點選「Over」標頭，點按視窗下方的「Copy Up Graphic」，將Up標籤內的圖像拷貝到「Down」標籤內。
9. 改變「Down」標頭內之圖像的外框與內填色彩。
10. 指定URL：點選「Active Area」標頭，點按視窗下方的「Link Wizard...」，在「Link Wizard...」視窗內點選「Link」標頭，在「URL」內鍵入指定的位址如http://cd.ntit.edu.tw。
11. 關閉Button編輯器。

六、複製按鈕

1. 按住Alt鍵（Windows）或Option鍵（Machintosh），把前一按鈕下拉複製之。
2. 在「Object」功能盤之「Button Text」欄位內前一按鈕之文字更新，壓下「Current」鈕。
3. 點按「Link Wizard」鈕
4. 點按「Link」標頭，更改URL。
5. 點按「OK」鈕。

七、加入分割

八、修改分割的名稱

九、加入超連結

URL分絕對URL與相對URL兩種，前者是完完整整標示出如
http://www.cd.ntit.edu.tw/news/01.html。
而相對URL表示該URL與當下使用的html之間的相對位址關係。
只列檔名，表示在同一個資料夾內。
/是在往下一階的資料夾內的檔案。
../是在往上一階的資料夾內的檔案。
htmldocs/file.htm是在下一階名為htmldocs的資料夾內的檔案。
十、匯出精靈