DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks設計案例 >> Fireworks教程:制作精致英文網頁導航
Fireworks教程:制作精致英文網頁導航
編輯:Fireworks設計案例     
效果如圖

Fireworks教程:制作精致英文網頁導航

  1、選擇矢量工具中的圓角矩形工具,繪制一個170px×60px的矩形;

Fireworks教程:制作精致英文網頁導航

  2、使用垂直線性填充;

Fireworks教程:制作精致英文網頁導航

  3、給矩形添加外部投影效果,得到如下效果;

Fireworks教程:制作精致英文網頁導航


  4、再給矩形添加內部投影,得到如下效果;

Fireworks教程:制作精致英文網頁導航


  5、添加文字,選擇字體Verdana。9px大小並添加外部投影,得到如下效果;

Fireworks教程:制作精致英文網頁導航

  6、添加分割線。效果如圖;

Fireworks教程:制作精致英文網頁導航

  7、擺放好文字並調整間距;

Fireworks教程:制作精致英文網頁導航

  8、如果想給Menu添加高光,則繼續步驟,在最上方圖層添加一個實心填充白色的橢圓,效果如圖;

Fireworks教程:制作精致英文網頁導航

  9、選擇最開始的圓角矩形,復制一個,點選白色橢圓,反鍵->編輯->粘貼為蒙板。並在屬性欄選擇灰度外觀;

Fireworks教程:制作精致英文網頁導航

  10、最終效果。

Fireworks教程:制作精致英文網頁導航
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved