網頁互動按鈕的製作
互動按鈕有一個突出的優點是它給瀏覽者一個訊號:這裡可以點選!並且如果製作精美,也會給人以視覺上的享受。筆者在這裡介紹很“酷”的按鈕導航系統。在滑鼠移動到按鈕上後,按鈕會自動轉起來,而且在旁邊提示這部分有什麼內容。下面介紹的是網頁互動按鈕的製作:
一、製作流程
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的步驟,為其他按鈕進行同樣的設定。
,大功告成,按F12鍵預覽效果。
二、製作說明
在本例中,由於按鈕需要放到背景影象上的某個位置,所以要求背景影象應該相對於瀏覽器左上角固定。考慮到兩個瀏覽器中頁邊距的不同,故頁邊距設成0。如果在高解析度瀏覽器下觀看,影象偏在左上方,嚴重影響了視覺效果,所以需要給頁面加上一個和影象顏色比較接近的背景顏色。