DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> 關於Fireworks >> 教你用Fireworks制作簡潔清爽的網站頁面
教你用Fireworks制作簡潔清爽的網站頁面
編輯:關於Fireworks     

本教程是向大家介紹利用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 交換圖像的行為。

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

教程結束,以上就是利用Fireworks制作簡潔清爽的網站頁面過程,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved