動態按鈕製作

 


 

動態按鈕

動態按鈕就是滑鼠移到按鈕上面,或是按下去時,或是按下後再移過去時的情況,讓按鈕產生變化

請建立一個batman的資料夾,用Dreamweaver或Frontpage先隨便做 4 個網頁,分別命名為 per.htm、equ.htm、story.htm、char.htm

請先下載本課程教材所需圖片,在Fireworks開啟此圖片,如圖 1所示


圖 1

 

 

請設計一個立體的矩形,再輸入文字,同時選取矩形及文字,再執行修改元件轉換為元件,如圖 2所示


圖 2

 

 

在元件屬性視窗給予這個新元件適當的名稱,類型請選擇按鈕,如圖 3所示


圖 3

 

在圖庫面板就會有一個按鈕元件了,請在圖庫面板點選該按鈕,再按三角鈕來選擇編輯元件,如圖 4所示


圖 4

就會出現按鈕的編輯視窗了,如 圖 5所示


圖 5

 

請按該視窗的滑過選項,進入滑過狀態,請先按拷貝一般圖像,將一般狀態的按鈕複製過來後,再改變外形及文字顏色等變化,如圖 6所示


圖 6

 

相同道理,請再點選按下按下後滑過選項,來設計按鈕在該狀態時的變化。


「按下」狀態:為您的按鈕建立一個「被按下」的影像。這個狀態是用於導覽列,而不是用於簡易變換影像。
「按下後滑過」狀態:按下按鈕時,只要您的滑鼠滑過按鈕,外觀仍然會改變。請在具有多個按鈕的導覽列中使用這種按鈕狀態。
「按下後滑過」無法用於簡易變換影像。

 

最後再點選作用區域選項,進入作用區域狀態
綠色半透明的區域就是作用區域,可以用縮放工具來調整作用區域至適當大小 ,最後按完成圖 7所示


圖 7

 

完成後,請在屬性面板來設計按鈕的連結,如圖 8所示


圖 8


請再以同樣的方式設計其他 3個動態按鈕,如圖 9所示


圖 9

如果按鈕的樣式相同的話,其實可以在圖庫面板用複製元件的方式,再修改新元件,這樣會節省很多時間


轉存為網頁

請點選文件右上方的Dreamweaver→轉存HTML,如圖 10


圖 10

在轉存視窗做以下設定,就完成了,如圖 14所示


圖 14

 

同學將滑鼠移至下面的完成品,來做試驗

個人檔案
裝備介紹
故事背景
重要角色

 

回課程目錄