圖解:怎樣用Fireworks制作專業下拉導航條--IT地帶
 首頁 新聞 安徽 體育 財經 黃梅 旅游 軍事 娛樂 法治 教育 伊人 健康
繁體中文
 IT 彩信 讀書 汽車 演藝 音樂 徽商 書庫 郵件 論壇 賀卡 相冊 交友
簡體中文
精彩圖庫 業界動態 觀察分析 手機數碼 電腦教室 軟件下載 游戲人間 本地市場
精彩推薦
v數字電視傳輸拒絕歐洲標准 國標有望近期出臺
v據稱廣電總局有望於2005年發放網絡電視牌照
vQQ大面積癱瘓不能使用 疑為再次遭受軟綁架
v微軟NT 4.0退位 Linux可能成為昇級選擇
v中電信明年力推網絡電視 稱不存在政策障礙
v200萬像素 三星折疊旋屏新機V5100曝光
v公主的夜妝 60GB彩屏iPod多圖評測
v《生與死X》Kasumi比肩尼裝欣賞
v【組圖】《墨香》勁爆美圖,絕對經典
精彩圖片
  您當前的位置 :IT地帶 > 電腦教室 > 網頁制作 正文
圖解:怎樣用Fireworks制作專業下拉導航條

中安網  2004-12-30 13:03

  天極網12月29日報道 Fireworks MX 2004中的新增功能可以幫助我們非常方便地在網站上添加圖形和交互元素。對於對不太熟悉和了解代碼編寫或JavaScript的新手來說,Fireworks MX 2004可以最大限度地提高工作效率。

  今天我們用Fireworks MX 2004來設計一個很酷的彈出式下拉菜單,不需要掌握javascript編程語言,你只需要按照我給你的步驟做下去,你就可以隨心所欲地制作自己的彈出式下拉菜單了。

  步驟1:設計制作圖標按鈕

  運行Fireworks MX 2004,新建一個776*80的編輯區,設置背景顏色為#737e90,我們的目的是把這個編輯區打造成一個包含Javascript的下拉菜單導航條。在編輯區利用工具矢量區的矩形工具畫好按鈕的初始圖形,編輯重點在按鈕的視覺效果。我們首先用矩形工具畫6個80*22的矩形,矩形邊框顏色設置為透明,矩形背景顏色為#515764,然後選中所有的矩形,再在屬性窗口中設置矩形圓度為60,如圖:

  

創建按鈕:先設置好按鈕的矩形外觀

  為了達到很好的視覺效果,需要對按鈕進行加工,還是在屬性窗口中,在『效果』彈出列表中選擇『斜角和浮雕』,在『斜角和浮雕』彈出列表中選擇『凸起浮雕』,設置參數如下圖:

  

調整浮雕視覺效果讓按鈕呈現立體感

  你可以更改參數設置,達到你想要的效果,當然,你還可以選擇其它的效果如『凹入浮雕』等等,可以進行不同風格的嘗試。

  重復地對每一個矩形進行如上操作,設置好後將它們一字排開,間距為1,底線與編輯區底線重合。利用矩形工具再畫一個背景顏色與上面六個矩形背景一樣的矩形,長度與高度分別為485和10,將這個矩形拖到上面六個矩形的前面,底線與編輯區底線重合(這個矩形的作用在於遮擋上面六個矩形之間的間隙,形成一個倒弓狀的按鈕排列陣),效果視圖如下:

  

重復以上兩步操作按鈕導航的基本樣式出來了

  OK,基本工作已經完成,接下來編輯按鈕上的文字。

  一般認為,按鈕上的文字最好是在網頁中編輯,這樣以便靈活地更換鏈接名稱,但如果您所要做的鏈接名稱已經定了下來,也不妨把這些鏈接名稱直接做成圖片,下面我們來進行操作。

  鼠標選取文本工具,在第一個按鈕前定位並輸入『設計在線』四個字,設置字體為仿宋,字體大小為12,字體顏色為白色,如果你覺得色彩不夠鮮艷你可以選擇其它的顏色,或者選中剛纔輸入的文本,在屬性窗口中的『效果』列表框中將其銳化。分別對其他按鈕進行如上操作,得到如下視圖:

  

給按鈕加上文字

  接下來的操作就是要對編輯區進行切割使之形成熱點區,在工具的web欄中選擇『切片』工具,對每一個按鈕進行切割,其餘部分不用管它,切割時以按鈕的邊線為切割線,切割好後,整個編輯區形成9塊,如圖所示:

  

切割可是個考驗你細致、耐心的工作

  1  2  下一頁
編輯: 丁毅
 ?【相 關 報 道】?
-【圖文】用Fireworks實現照片撕裂效果   04-12-08 11:00
-Fireworks MX 2004繪制簡筆QQ企鵝   04-11-16 11:09
-Fireworks制作GIF動畫廣告BANNER   04-11-02 11:33
-Fireworks使用技巧及常見問題解答   04-09-28 14:11
-用Fireworks繪制紙折扇   04-08-04 17:52
 

中國安徽在線網站(中安在線)版權所有 未經允許 請勿復制或鏡像
皖ICP證 030106號