6-8 制作網頁翻轉按鈕

在完成以上5個步驟后，我們就可以開始制作鼠標翻轉效果了。開始之前我們先簡要介紹一下制作的原理。范例網頁大家也看過，是隨著鼠標的接觸而發生的。這里涉及一種概念，叫事件和方法。我們的日常生活就是由許多事件和方法組成的，比如口渴是事件，喝水就是解決這個事件的方法。肚子餓是事件，吃東西就是方法。想學習是事件，看《大師之路》就是方法等等。

這其實就是一種編程的思想，和人一樣，電腦也是由事件和方法組成的一套邏輯系統。所以下面我們也要按照這種思路，去創建一個事件和解決方法。這個事件就是鼠標接觸事件。平時鼠標不接觸，我們只顯示暗色按鈕層(背景層)。而在鼠標接觸的事件發生后，顯示亮色按鈕層(背景副本層)。

點擊Web內容調板下方的新建按鈕，將建立一個翻轉設定。位于上方的s060101代表正常狀態，因此我們要在圖層調板中隱藏背景副本層，如下左圖。

位于下方的Over代表鼠標接觸事件，因此我們在圖層調板中顯示背景副本層并隱藏背景層(在這里由于圖層的遮蓋關系即使不隱藏也不影響最終效果)。如下右圖?？梢詮腤eb內容調板中看到平時和鼠標接觸兩種不同的效果。

-

好，這樣我們就已經完成了制作，記得保存文件。現在點擊工具欄上的按鈕即可在ImageReady中預覽將來做成網頁后的實際效果。注意有可能在圖像窗口可能會出現如下圖的標有序號的橙色外框，這是切片的序號。如果覺得有礙視覺可點擊工具欄中的按鈕隱藏切片。有關切片的概念和使用我們將在以后介紹?，F在大家不必深究。

如果要做成實際的可以在網頁瀏覽器中打開的網頁，就要使用【文件>將優化結果存儲為】〖CTRLALTSHIFTS〗。在出現的保存對話框中，保存類型要選擇為“HTML和圖像”，設置選項為“默認設置”，切片選項為“所有切片”。文件名可自行決定，但不要使用中文。保存的位置默認是個人文檔的位置，可自行更改(如桌面)。確定之后可能會出現一個如下右圖的警告框，提示文件名兼容性問題，可不必理會，按下好按鈕即可。這樣將會在指定的目錄中會產生一個.html文件和一個images目錄，如果要移動目錄位置必須兩者一起移動，否則圖片無法在網頁中顯示。因為網頁文件并不能包含圖片，圖片存放在images目錄中。