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

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

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

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

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

-

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

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