DIV CSS 佈局教程網

有的時候，你可能需要創建一種比按鈕更為復雜的互動效果，例如當鼠標從某張圖片上劃過時，不但這張圖片本身發生變化，在頁面其他位置的另一張圖片也發生變化，按鈕編輯器對此無能為力，我們需要通過另外的途徑來解決。學習這一節你會需要用到以前按鈕、導航條、熱區和切割的知識，如果你對這些概念還不是很了解，那麼就先回去復習一下。

　　首先，我們來做一個簡單翻轉（Simple Rollovers）的按鈕，雖然我們可以使用按鈕編輯器很輕松的做出相同的效果，但是我還是建議你們用另一種方法來創建它，因為以後的復雜交互效果也要用這種方法來創建。

　　先在畫板上畫一個按鈕的形狀，如圖：

　　選擇Insert->Slice，在網絡層（Web Layer）上建立一個和按鈕大小相同的切割。

　　打開幀面版（Window->Frames），你會看到當前只有一幀，點擊New Frame手工添加一幀，並使這幀處於被選中的狀態。

　　在這幀上畫另一個按鈕，因為切割的邊緣有吸附功能，所以很容易畫出和第一幀一樣大小的按鈕，或者直接拷貝第一幀上的圖形到第二幀再修改它的屬性。為了區別這2幀，我在這裡使用不同的顏色對它進行填充。

　　打開Behaviors面版（Windows->Behaviors），點擊左上角的加號在彈出的菜單裡選擇Simple Rollovers，這樣一個簡單的翻轉效果就創建好了，預覽一下。

?

　　說到Behaviors有必要說明一下相關的概念：用一個簡單的公式來表達就是行為（Behaviors）=事件（Events）+動作（Actions），即一個行為需要先由事件來觸發，觸發後完成一系列動作，這樣就是一個完整的行為。

　　剛才大家在Behaviors面版的彈出菜單裡也看到了，除了Simple Rollovers之外還有其他的交互動作，他們分別是：

Simple Rollover：簡單翻轉，使用第一幀做為Up的圖象，使用第二幀作為Over的圖象，並且使用相同的切割 ，事實上簡單翻轉是交換圖的一種特殊形式。 Swap Image：交換圖，當鼠標觸發了一些事件時，使用其他幀上的圖象替換當前的圖象。 Swap Image Restore：交換圖還原，當鼠標離開觸發事件的區域後，還原為默認的圖象。 Set Nav Bar Image：設置為導航條圖片，定義一個切割為導航條的一部分，事實上設置為導航條圖片就是以下3中行為的組合（Nav Bar Over, Nav Bar Down, Nav Bar Restore） Nav Bar Over：當一個切割作為導航條的一部分時處於Over（鼠標經過）的狀態。 Nav Bar Down：當一個切割作為導航條的一部分時處於Down（鼠標點擊）的狀態。 Nav Bar Restore：將導航條其他部分的切割還原到Up（默認）的狀態。 Set Pop-Up Menu：創建彈出式菜單。 Set Text of Status Bar：在浏覽器的狀態欄裡顯示指定的文字。

　　注意：彈出式菜單可以很好的被插入到Dreamweaver中，但是必須在Fireworks中完成對它的編輯。

　　選擇了動作（Actions）之後就可以在Behaviors面版中修改觸發的事件。

　　這一節就先到這兒，請接著看下一節。