DIV CSS 佈局教程網

網絡的已經成為人們日常生活中的一部分，就像生活中房子，大部分人也想擁有自己網絡空間，如果把自己的房子設計的漂亮大方呢？下面我們就以一個簡潔清爽的頁面為例來教大家如何設計一個好網頁。

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 交換圖像的行為。

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