DIV CSS 佈局教程網

本教程是向大家介紹利用Fireworks制作簡潔清爽的網站頁面，制作出來的網站頁面很不錯，方法也很簡單，希望大家通過這篇教程能學會如何設計一個好的網站。

1. 啟動Fireworks，新建一個大小為180*200像素的畫布，設置畫布顏色為 #EFEFEF。

2. 在工具欄中選擇矩形工具，繪制一個154* 183的矩形，在屬性面板中設置這個矩形的填充色為#A9B1BE，描邊設置為1像素的柔化，顏色為#677387，如圖所示。

3. 利用矩形工具繪制一個寬 152，高 19 的矩形，在屬性檢查器中設置描邊為無，填充類別改為線性， 修改線性填充的顏色樣本，第一個顏色樣本的顏色為#E6FFFF，然後單擊漸變色階下面的區域，新增 一個新的顏色樣本，顏色為 #A4BECF，最後一個顏色樣本為 #FFFFFF，具體設置如圖所示：

回到畫布上，調整一下漸變方向，現在你的圖看起來應該像是下圖那樣。

 4. 以步驟 3 同樣的方式制作下面的矩形。      選中下邊的矩形，在屬性檢查器的效果菜單中，選擇“陰影和光暈”>“投影”，為矩形添加一個陰影效果， 具體參數如圖所示。    

5.使用直線工具畫出兩條長為153的線段，顏色為 #677387，描邊種類為1 像素柔化，分別放在上方矩形的下邊及下方矩形的上邊。

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

   7. 在幀面板，單擊“新建/重制幀”按紐，新增一幀。返回到第一幀，按“Ctrl”+“A”全選中畫布上的所有對象，按“Ctrl” +“C” 復制，然後到第二幀，按 “Ctrl” +“V” 粘貼，然後按住SHIFT鍵不放，選擇將幀二上的 HOME、Fireworks、DREAMWEAVER 文字，往上及往左各偏移 1 個像素，這是要制造當鼠標移到文字上時，使其產生偏移的效果。  8. 回到第一幀，選擇工具欄上的切片工具，將文字鏈結的區切割出來。  

 然後切換到指針工具，單擊 HOME 的切片，在彈出的菜單中選擇“添加圖像交換行為…”，在彈出的交換圖像對話框中，選擇相對應的切片，單擊確定。  

 

用同樣的方法，分別制作 Fireworks、DREAMWEAVER 交換圖像的行為。

提示：你可以先切換到預覽視圖，將鼠標移到鏈結上察看效果。