教你用Fireworks制作簡(jiǎn)潔清爽的網(wǎng)站頁(yè)面

發(fā)布時(shí)間：2014-07-15 09:03:41 作者：佚名

本教程是向大家介紹利用Fireworks制作簡(jiǎn)潔清爽的網(wǎng)站頁(yè)面，制作出來(lái)的網(wǎng)站頁(yè)面很不錯(cuò)，方法也很簡(jiǎn)單，希望大家通過(guò)這篇教程能學(xué)會(huì)如何設(shè)計(jì)一個(gè)好的網(wǎng)站

本教程是向大家介紹利用Fireworks制作簡(jiǎn)潔清爽的網(wǎng)站頁(yè)面，制作出來(lái)的網(wǎng)站頁(yè)面很不錯(cuò)，方法也很簡(jiǎn)單，希望大家通過(guò)這篇教程能學(xué)會(huì)如何設(shè)計(jì)一個(gè)好的網(wǎng)站。

1. 啟動(dòng)Fireworks，新建一個(gè)大小為180*200像素的畫布，設(shè)置畫布顏色為 #EFEFEF。

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

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

回到畫布上，調(diào)整一下漸變方向，現(xiàn)在你的圖看起來(lái)應(yīng)該像是下圖那樣。

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

選中下邊的矩形，在屬性檢查器的效果菜單中，選擇“陰影和光暈”>“投影”，為矩形添加一個(gè)陰影效果，具體參數(shù)如圖所示。

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

6. 加入標(biāo)題列的文字，字體為 elektr_02_5，大小為 10，不消除鋸齒，加入內(nèi)容區(qū)的文字，字體為 04b03b，大小為 8，不消除鋸齒，

7. 在幀面板，單擊“新建/重制幀”按紐，新增一幀。返回到第一幀，按“Ctrl”+“A”全選中畫布上的所有對(duì)象，按“Ctrl” +“C” 復(fù)制，然后到第二幀，按 “Ctrl” +“V” 粘貼，然后按住SHIFT鍵不放，選擇將幀二上的 HOME、FIREWORKS、DREAMWEAVER 文字，往上及往左各偏移 1 個(gè)像素，這是要制造當(dāng)鼠標(biāo)移到文字上時(shí)，使其產(chǎn)生偏移的效果。

8. 回到第一幀，選擇工具欄上的切片工具，將文字鏈結(jié)的區(qū)切割出來(lái)。