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

大家經(jīng)常在一些網(wǎng)頁中看到一種會隨著鼠標的接觸而變色的按鈕，參見范例網(wǎng)頁。這稱之為鼠標翻轉(zhuǎn)效果，這是根據(jù)英文rollover翻譯而來的，其實不是很符合中文的語境。其原理是利用兩張圖片，平時顯示一幅，當(dāng)鼠標接觸后換成另外一幅圖片。如下圖。這樣看起來好像是鼠標接觸的時候按鈕變亮了?，F(xiàn)在我們來動手制作，首先在Photoshop中將它們制作成圖片，然后再做成網(wǎng)頁。

首先新建一個400×300的白底圖像，新建一層，利用形狀工具橢圓〖U/SHIFTU〗，在公共欄選擇第3種繪圖方式(填充像素)，調(diào)出信息調(diào)板〖F8〗觀看數(shù)值，用任意顏色在新建層中間位置畫一個直徑40左右的正圓(按住SHIFT保持正圓)。如下左圖。
0614【窗口>樣式】調(diào)出樣式調(diào)板，點擊右上角圓三角按鈕，選擇“替換樣式”，在出來的樣式列表目錄中選擇“Web翻轉(zhuǎn)樣式”，確認目前選擇的是新建層，然后使用“選中狀態(tài)的藍色膠體按鈕”樣式。如下中圖紅色箭頭處。大家也可以自己選擇其他顏色的。
0615將新建層與背景層合并，然后【圖像>修整】，如下右圖所示。確定操作后圖像將被裁剪為和所畫的圓同等大小。這個命令的作用是根據(jù)左上角第一個像素處，或右下角最后一個像素處的顏色，在我們這幅圖像中這兩個地方都是白色。然后就將畫面中連續(xù)的白色部分裁剪掉。這就好像現(xiàn)實中打印圖像之后將紙張的邊緣裁剪掉一樣。

接著將背景圖層復(fù)制一層，對復(fù)制出來的圖層使用曲線工具，合并高光和暗調(diào)區(qū)域(高光點229,255；暗調(diào)點60,0)，形成加亮按鈕的效果。如下左圖。完成后我們得到兩個圖層，分別是暗色按鈕的背景層，和亮色按鈕的背景復(fù)制層。如果以上步驟無法完成，點此下載范例文件
0616使用【文件>在ImageReady中編輯】〖CTRLSHIFTM〗，或點擊工具欄最下方按鈕，將會跳轉(zhuǎn)到ImageReady中，這是Photoshop附帶的一個軟件，用來制作動畫和網(wǎng)頁。我們找到Web內(nèi)容和圖層兩個調(diào)板，如下右圖。后面的操作就是由這兩個調(diào)板配合完成。

-

在完成以上5個步驟后，我們就可以開始制作鼠標翻轉(zhuǎn)效果了。開始之前我們先簡要介紹一下制作的原理。范例網(wǎng)頁大家也看過，是隨著鼠標的接觸而發(fā)生的。這里涉及一種概念，叫事件和方法。我們的日常生活就是由許多事件和方法組成的，比如口渴是事件，喝水就是解決這個事件的方法。肚子餓是事件，吃東西就是方法。想學(xué)習(xí)是事件，看《大師之路》就是方法等等。
這其實就是一種編程的思想，和人一樣，電腦也是由事件和方法組成的一套邏輯系統(tǒng)。所以下面我們也要按照這種思路，去創(chuàng)建一個事件和解決方法。這個事件就是鼠標接觸事件。平時鼠標不接觸，我們只顯示暗色按鈕層(背景層)。而在鼠標接觸的事件發(fā)生后，顯示亮色按鈕層(背景副本層)。

0617點擊Web內(nèi)容調(diào)板下方的新建按鈕，將建立一個翻轉(zhuǎn)設(shè)定。位于上方的s060101代表正常狀態(tài)，因此我們要在圖層調(diào)板中隱藏背景副本層，如下左圖。
位于下方的Over代表鼠標接觸事件，因此我們在圖層調(diào)板中顯示背景副本層并隱藏背景層(在這里由于圖層的遮蓋關(guān)系即使不隱藏也不影響最終效果)。如下右圖。可以從Web內(nèi)容調(diào)板中看到平時和鼠標接觸兩種不同的效果。

-

0618好，這樣我們就已經(jīng)完成了制作，記得保存文件?，F(xiàn)在點擊工具欄上的按鈕即可在ImageReady中預(yù)覽將來做成網(wǎng)頁后的實際效果。注意有可能在圖像窗口可能會出現(xiàn)如下圖的標有序號的橙色外框，這是切片的序號。如果覺得有礙視覺可點擊工具欄中的按鈕隱藏切片。有關(guān)切片的概念和使用我們將在以后介紹?，F(xiàn)在大家不必深究。
0619如果要做成實際的可以在網(wǎng)頁瀏覽器中打開的網(wǎng)頁，就要使用【文件>將優(yōu)化結(jié)果存儲為】〖CTRLALTSHIFTS〗。在出現(xiàn)的保存對話框中，保存類型要選擇為“HTML和圖像”，設(shè)置選項為“默認設(shè)置”，切片選項為“所有切片”。文件名可自行決定，但不要使用中文。保存的位置默認是個人文檔的位置，可自行更改(如桌面)。確定之后可能會出現(xiàn)一個如下右圖的警告框，提示文件名兼容性問題，可不必理會，按下好按鈕即可。這樣將會在指定的目錄中會產(chǎn)生一個.html文件和一個images目錄，如果要移動目錄位置必須兩者一起移動，否則圖片無法在網(wǎng)頁中顯示。因為網(wǎng)頁文件并不能包含圖片，圖片存放在images目錄中。

這樣的操作就成為輸出操作，將Photoshop中的圖象輸出成為了其他的格式。同時大家也要保存好這個圖像的原始psd格式，因為以后我們還要“老瓶裝新酒”，在這個范例的基礎(chǔ)上增加動畫效果。參見范例網(wǎng)頁。大家也可自行打開s0603.psd文件研究一下。注意要退出預(yù)覽模式(按鈕)才可以保存文件。ImageReady可以直接保存psd格式，動畫設(shè)定也會隨之保存。

雖然曲線工具在這一小節(jié)只占有很少的部分，但也是很重要的，沒有曲線的加亮效果，后面的一切也都無從談起。曲線的類型運用在網(wǎng)頁設(shè)計制作中是很常見的。
這是我們第一次真實地將自己的作品做成網(wǎng)頁格式，大家肯定有很多地方不明白。有種云里霧里的感覺，這沒關(guān)系，隨著本系列教程在以后的課程逐步增加更多的網(wǎng)頁相關(guān)知識，這片迷霧也會逐漸散去，大家將會發(fā)現(xiàn)來到一個更廣闊的天地。

事實上Photoshop和ImageReady在網(wǎng)頁制作方面來說功能十分有限，如果要有更多更好的功能，還是要使用專門的網(wǎng)頁制作軟件才行。我們在以后課程將學(xué)習(xí)到一個專門與Photoshop和ImageReady配合的網(wǎng)頁制作軟件GoLive，它可以完全兼容ImageReady產(chǎn)生的網(wǎng)頁代碼。在其中我們也可以創(chuàng)建以上的翻轉(zhuǎn)效果，并且還能有更多的變化。在文字教程發(fā)布之前，大家可以先通過GoLiveCS2視頻教程來學(xué)習(xí)。