網(wǎng)頁(yè)互動(dòng)按鈕的制作

互動(dòng)按鈕有一個(gè)突出的優(yōu)點(diǎn)是它給瀏覽者一個(gè)信號(hào)：這里可以點(diǎn)擊!并且如果制作精美，也會(huì)給人以視覺(jué)上的享受。筆者在這里介紹很“酷”的按鈕導(dǎo)航系統(tǒng)。在鼠標(biāo)移動(dòng)到按鈕上后，按鈕會(huì)自動(dòng)轉(zhuǎn)起來(lái)，而且在旁邊提示這部分有什么內(nèi)容。下面介紹的是網(wǎng)頁(yè)互動(dòng)按鈕的制作：

一、制作流程

(資料圖片僅供參考)

1.準(zhǔn)備好制作按鈕的素材。兩個(gè)互動(dòng)圖像中，平常狀態(tài)的是一個(gè)透明靜態(tài)GIF圖像，翻轉(zhuǎn)狀態(tài)的是一個(gè)透明的動(dòng)態(tài)GIF圖像。

2.運(yùn)行DW，新建一個(gè)HTML文檔。

3.再插入一個(gè)準(zhǔn)備好的背景圖像。

4.設(shè)置此網(wǎng)頁(yè)的屬性，頁(yè)邊距設(shè)為0，背景顏色設(shè)置為和圖像右下角顏色接近的色彩。

5.單擊“Object”面板的“Common”子面板中的“Draw layer”按鈕，在適當(dāng)?shù)奈恢卯?huà)一個(gè)長(zhǎng)方形的層。

6.將光標(biāo)定位到層中，然后單擊“Object”面板中“Common”子面板中的“Insert Rollover Image”按鈕。

7.在彈出的`“Insert Rollover Image”面板中，輸入按鈕的名稱(chēng)，分別選擇兩個(gè)圖像作為互動(dòng)圖像。

8.按照5～7的步驟插入所有的互動(dòng)按鈕。

9.在按鈕后的空白處畫(huà)一個(gè)層，然后在層中輸入第一個(gè)按鈕的注釋。按照這樣的方法插入所有按鈕的注釋層。

10.打開(kāi)“Window”菜單，選擇“Layers”命令。

11.將所有注釋層的屬性設(shè)置為“Hide”。

12.切換到“Behavior”面板。

13.在“Behavior”面板的“Events For”一欄中，選擇下拉列表中的“4.0 and Later Browser”。

14.選擇頁(yè)面中的第一個(gè)按鈕。

15.在“Behavior”面板中單擊“+”按鈕，在彈出的菜單中選擇“Show-Hide Layers”。

16.在彈出的設(shè)置面板中，保持按鈕層不變，把它自己的注釋層設(shè)為“Show”，把其余注釋層設(shè)為“Hide”，并把鼠標(biāo)事件設(shè)為“MouseOver”。

17.再為第一個(gè)按鈕增加一個(gè)“Show-Hide Layers”的行為，保持其他層不變，把注釋層設(shè)為“Hide”，鼠標(biāo)事件為“MouseOut”。

18.按照13～17的步驟，為其他按鈕進(jìn)行同樣的設(shè)置。

19.OK，大功告成，按F12鍵預(yù)覽效果。

二、制作說(shuō)明

在本例中，由于按鈕需要放到背景圖像上的某個(gè)位置，所以要求背景圖像應(yīng)該相對(duì)于瀏覽器左上角固定?？紤]到兩個(gè)瀏覽器中頁(yè)邊距的不同，故頁(yè)邊距設(shè)成0。如果在高分辨率瀏覽器下觀看，圖像偏在左上方，嚴(yán)重影響了視覺(jué)效果，所以需要給頁(yè)面加上一個(gè)和圖像顏色比較接近的背景顏色。