- 相關推薦
網頁互動按鈕的制作
互動按鈕有一個突出的優點是它給瀏覽者一個信號：這里可以點擊!并且如果制作精美，也會給人以視覺上的享受。筆者在這里介紹很“酷”的按鈕導航系統。在鼠標移動到按鈕上后，按鈕會自動轉起來，而且在旁邊提示這部分有什么內容。下面介紹的是網頁互動按鈕的制作：
一、制作流程
1.準備好制作按鈕的素材。兩個互動圖像中，平常狀態的是一個透明靜態GIF圖像，翻轉狀態的是一個透明的動態GIF圖像。
2.運行DW，新建一個HTML文檔。
3.再插入一個準備好的背景圖像。
4.設置此網頁的屬性，頁邊距設為0，背景顏色設置為和圖像右下角顏色接近的色彩。
5.單擊“Object”面板的“Common”子面板中的“Draw layer”按鈕，在適當的位置畫一個長方形的層。
6.將光標定位到層中，然后單擊“Object”面板中“Common”子面板中的“Insert Rollover Image”按鈕。
7.在彈出的“Insert Rollover Image”面板中，輸入按鈕的名稱，分別選擇兩個圖像作為互動圖像。
8.按照5～7的步驟插入所有的互動按鈕。
9.在按鈕后的空白處畫一個層，然后在層中輸入第一個按鈕的注釋。按照這樣的方法插入所有按鈕的注釋層。
10.打開“Window”菜單，選擇“Layers”命令。
11.將所有注釋層的屬性設置為“Hide”。
12.切換到“Behavior”面板。
13.在“Behavior”面板的“Events For”一欄中，選擇下拉列表中的“4.0 and Later Browser”。
14.選擇頁面中的第一個按鈕。
15.在“Behavior”面板中單擊“+”按鈕，在彈出的菜單中選擇“Show-Hide Layers”。
16.在彈出的設置面板中，保持按鈕層不變，把它自己的注釋層設為“Show”，把其余注釋層設為“Hide”，并把鼠標事件設為“MouseOver”。
17.再為第一個按鈕增加一個“Show-Hide Layers”的行為，保持其他層不變，把注釋層設為“Hide”，鼠標事件為“MouseOut”。
18.按照13～17的步驟，為其他按鈕進行同樣的設置。
19.OK，大功告成，按F12鍵預覽效果。
二、制作說明
在本例中，由于按鈕需要放到背景圖像上的某個位置，所以要求背景圖像應該相對于瀏覽器左上角固定。考慮到兩個瀏覽器中頁邊距的不同，故頁邊距設成0。如果在高分辨率瀏覽器下觀看，圖像偏在左上方，嚴重影響了視覺效果，所以需要給頁面加上一個和圖像顏色比較接近的背景顏色。
【網頁互動按鈕的制作】相關文章：
使用PhotoShop制作斜紋質感網頁導航按鈕教程06-03
網頁設計中如何設計按鈕07-29
網頁點擊按鈕返回頂部代碼11-05
怎樣制作網頁 制作網頁詳細操作步驟09-02
photoshop高光常用按鈕的制作方法09-02
Java標簽、按鈕和按鈕事件簡介09-09
網頁設計網頁制作的流程分析08-26
如何制作自己的網頁08-20