教學內容：網頁版型製作_2

0. 範例圖片： [ PreView ] [ Download PNG Files ]

1. 新增文件：寬 180，高 200，畫布顏色 #EFEFEF。

2. 利用矩形工具拉出寬 154，高 183 的矩形， 矩形的屬性設置如下：

3. 利用矩形工具拉出寬 152，高 19 的矩形，填色類別改為線性，取消畫筆填色， 修改線性填色的色塊，第一個顏色指標填入 #E6FFFF，新增 1 個新的顏色指標，填入 #A4BECF， 最後一個顏色指標填入 #FFFFFF， 回到畫布上，調整一下漸層方向，現在你的圖看起來應該像是下圖那樣。

4. 以步驟 3 同樣的方式製作下面的矩形。

5. 利用線段工具畫出兩條線段，線段顏色為 #677387，1 像素柔化， 分別置放於上方矩形的下緣及下方矩形的上緣。

6. 加入標題列的文字，字型為 elektr_02_5，大小為 10，不消除鋸齒， 加入內容區塊的文字，字型為 04b03b，大小為 8，不消除鋸齒，

7. 開啟影格視窗，新增一個影格， 回到影格一，圈選畫布上的所有物件，按 CTRL + C 複製， 然後到影格二，按 CTRL + V 貼上，配合 SHIFT 鍵的使用， 將影格二上的 HOME、FIREWORKS、DREAMWEAVER 文字一同選取， 往上及往左各偏移 1 個像素，這是要製造當滑鼠移到文字上時，使其產生偏移的效果。

8. 回到影格一上，點選工具列上的分割工具，我們要將文字連結的區域分割出來， 點選 HOME 的分割區，選取增加調換影像的行為， 在調換影像的對話框中，請選取相對應的分割，再按下確定， 以相同的方式，分別製作 FIREWORKS、DREAMWEAVER 調換影像的行為。 您可以先切換到預覽窗格，將滑鼠移到連結上看看， 由於我們剛剛在影格二上有製作文字偏移，您現在應可看到效果。

9. 綜合以上各步驟，您應該可以將整個網頁版型製作完成。 這個版型是我喜歡的類型，感覺清清爽爽的，希望您也會喜歡。 在 0. 範例圖片底下附有 [ Download PNG Files ] 的原始檔下載，是這個版型完整的 .png 檔， 您下載回去解壓縮之後，可以用 FireworksMX 開啟，裡面也有分割區資訊， 以及本範例中所使用的兩種字型，提供您參考。 若有做得不好的地方，或是您有更好的點子，歡迎提出來討論。

教學內容來源：http://homepage.eircom.net/~fmxtech/index.htm。