DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 用 Fireworks 制作精彩按鈕
用 Fireworks 制作精彩按鈕
編輯:Fireworks基礎     
網頁中最常見的東西就要算是鏈接了。如果把互聯網比喻成信息高速路的話那麼浏覽器就可以說成是載著你的汽車,鏈接就要算是路邊的指路牌了。可見鏈接對於一名浏覽者的重要性。鏈接有很多種,最普通的鏈接應該說是文字加下劃線,簡單明了但不夠美觀。愛美之心人皆有之,誰不想讓自己的頁面更漂亮,又有誰不喜歡在外觀動人的主頁上駐足觀看。所以按扭越來越多的出現在了網頁上。一幅靜態的小圖案、一個可愛的小動畫,比起一行行帶著橫線的文字可要精彩的多。再加上它對鼠標的動作響應,也許幾個小小的按扭就會給你的主頁帶來無窮的生機。

我在開始做主頁的時候也是從下劃線開始的,後來看見別人的主頁上漂亮的按扭和導航欄真是羨慕不已。慢慢的在自己的主頁上加了圖形按扭,不過圖是拿別人的。後來自己用Photoshop畫,可還要用煩人的HtmlJavaScript真是麻煩。然後找到一些簡單的按扭制作工具,但畢竟是簡單,以至很難實現自己的構想。最後我發現了Fireworks這個不錯的軟件,Fireworks其它的優點就不說了,單講由於它是面向網頁制作而設計的,就使得我這個網頁作坊主對它愛不釋手。Macromedia的開發人員當然不會忘記在這個主頁圖形制作軟件中加入按扭制作這個功能。相比那些小型的按扭制作工具,由於它是基於fireworks的圖形處理的所以應該說Fireworks具有很強的按扭制作功能,而且同樣簡單,不需要掌握Javascript和Html就可以制作出所有浏覽器支持的關於鼠標響應的事件。下面我就一步步的介紹Fireworks的按扭制作過程。

首先打開Fireworks,當然要建立一個頁面。選擇Insert > New Button你會看到一個新窗口Button Editor。

我們可以看到在這個標簽板試的窗口中有五個標簽。依次代表的是Up,鼠標事件沒有發生時的按扭外觀。Over,鼠標在按扭上時的外觀。Down,鼠標左鍵按下時的外觀。Over while Down,當按扭已被按下後鼠標回到按扭上時的按扭外觀。最後一個標簽Active Area,是按扭的鼠標動作響應區,就是說只有你的鼠標在這個區域內才發生諸如Over定義的等等改變。它在你的Up標簽畫好後回自動定義一個區域,當然如果你的按扭不規則也可以自己改。在這個窗口正中間的是按扭外觀的編輯區,一般都是從Up標簽開始編輯,你就開動腦筋從左邊的工具欄中選取工具隨意地畫吧。畫完就點到Over標簽,看到這個標簽裡多了什麼嗎?就是右邊的copy up graphic按扭,點一下你回發現剛才Up標簽裡的按扭又出現在了Over裡。這個功能是因為大多數按扭在鼠標事件的響應中不會有什麼本質的外性變化,比如立體按扭,鼠標懸停或按下時都是產生按扭下陷等動作,所以沒必要從畫一個按扭,而用復制拷貝又很難對准位置。怎麼樣,Fireworks想的很周到吧,它還對那些要求高的用戶設計了“洋蔥頭”功能onion skinning,選上它你就可以看到前面畫完的按扭淡淡的身影了。也許你只需少做改動,Over也完成了。看看Down裡好象又多了個選項Include Nav Bar Over While Down State,它的功能就是制作類似新浪等大網站的導航條,當新的頁面被調出後按扭產生Down的變化。後面的Over while Down就沒什麼新東西了。最後的Active Area還是應該重點說說的,看到右邊的Link Wizard了嗎?點擊一下會跳出一個新窗口。

看來裡面的選項不比Button Editor少多少,Export Settings是用來設置輸出圖象格式的它可以單獨定義按扭的圖象輸出格式,用以區分同時輸出的其它圖象。Link中第一個框中No URL (noHREF)的地方填入你的鏈接地址。在左邊寫著的框中寫下的內容將會在鼠標懸停與按扭上時出現,也就是用作內容提示。最後一個框是浏覽器狀態欄(就是浏覽器左下角的那個框)的內容,當你的鼠標移到按扭上時狀態欄會顯示你輸入的內容。Target標簽裡有_blank _self _parent _top幾個選項,如果你不知道這是什麼,還是先學學FrontPage再來看fireworks吧,呵呵。Filename裡填寫的內容是你的按輸出時的按扭圖形文件名,如果你默認的話,它將會以你的Fireworks文件名命名。好了,這幾步完了,你的按扭就可以算是完成了。回到主編輯窗口,看到你的按扭了麼?當然你可以在主窗口中任意移動按扭位置。然後可以PrevIEw一下,看看是否滿意。如果覺得還要改雙擊你的按扭就可以回到Button Editor了。完成後輸出就行了,輸出按扭包括一個html頁,和幾個圖形文件。用一個html編輯器比如記事本打開它,按著上面的提示把Html語句粘貼到你的頁面中就大工告成了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved