6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

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

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

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

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

-

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

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