第16章 行為指令的應用 16-1　認識行為面板 16-2　常用的行為指令.

Presentation on theme: "第16章 行為指令的應用 16-1　認識行為面板 16-2　常用的行為指令."— Presentation transcript:

1 第16章 行為指令的應用 16-1　認識行為面板 16-2　常用的行為指令

2 16-1　認識行為面板 請各位執行「視窗/ 行為」指令，或按快速鍵「Shift」+「F4」，即可開啟行為面板。

3 加入與設定行為指令(1)

4 加入與設定行為指令(2) onBlur：設定滑鼠移出表單時。 onClick：按下滑鼠左鍵並放開。 onDbClick：用滑鼠按兩下左鍵。
onKeyDown：按下按鍵時。 onKeyUp：按下按鍵後再放開。 onMouseDown：按下滑鼠時。 onMouseOut：滑鼠移開時。 onMouseOver：滑鼠移到元件上時。 onMouseUp：按下滑鼠左鍵再放開。 onLoad：載入網頁時。 onUnload：離開網頁時。

5 刪除與修改行為指令 已加入的行為若要刪除，請按下面板上的 鈕即可移除事件。如果明明有加入行為指令，卻一時找不到它，那麼請您確定原先加入行為的網頁元素是否被選取中。

6 16-2　常用的行為指令 彈出訊息(1)

7

8 彈出訊息(2) 設定完成後，當各位預覽網頁畫面時，只要以滑鼠左鍵按下圖片，就會顯示如圖的訊息說明。

9

10 動態效果- 縮放、淡出、震動、擠壓(1)

11 動態效果- 縮放、淡出、震動、擠壓(2) 在「效果」的副選項中提供有多種的動態變化，這裡我們先為各位示範滑鼠移入圖片時，圖片可由左上角開始做放大的變化。

12

13

14 動態效果- 縮放、淡出、震動、擠壓(3) 設定完成後按「F12」鍵預覽網頁，就會看到如下的變化。

15

16 動態效果- 縮放、淡出、震動、擠壓(4) 出現/ 淡出
網頁在載入時，圖片由無漸漸淡入/ 出。完成範例請參閱「1605_ 出現效果ok.html」。

17 動態效果- 縮放、淡出、震動、擠壓(5) 震動

18 動態效果- 縮放、淡出、震動、擠壓(6)

19 標示效果(1)

20

21 標示效果(2) 如上所示的動態效果，只要從網頁上選取整個表格，再新增「效果/ 標示」的行為指令，事件的執行時機點設在「onMouseOver」。

22 開啟瀏覽器視窗(1)

23

24 開啟瀏覽器視窗(2) 要開啟另外一個瀏覽器視窗，我們利用「行為」面板來設定，其設定方式如下：

25

26

27 顯示隱藏元素(1)

28

29 顯示隱藏元素(2) 以「AP 元素」面板設定網頁元素的隱藏

30

31

32

33 顯示隱藏元素(3) 由行為指令設定網頁元素的隱藏或顯現

34

35

36

37 顯示隱藏元素(4) 完成如上動作，當各位預覽網頁時，就會發現滑鼠移入「速記教室」按鈕時，設定在apDiv6 的元素就會出現，不過滑鼠移開時，該元素並不會隱藏。

38 顯示隱藏元素(5) 因此我們還要在行為面板中再加入滑鼠移出（onMouseOut）時，所有的AP 元素都要隱藏起來。如圖示：

39 顯示隱藏元素(6) 接下來就是依此方式來設定其他按鈕區塊。而其對應元素的顯示/ 隱藏說明如下： 自訂字庫 電腦字典 說明 製作群
onMouseOver：apDiv7（顯示）、其餘apDiv 隱藏onMouseOut：隱藏所有apDiv 電腦字典 onMouseOver：apDiv8（顯示）、其餘apDiv 隱藏onMouseOut：隱藏所有apDiv 說明 onMouseOver：apDiv9（顯示）、其餘apDiv 隱藏onMouseOut：隱藏所有apDiv 製作群 onMouseOver：apDiv10（顯示）、其餘apDiv 隱藏onMouseOut：隱藏所有apDiv

40 前往URL(1)

41

42 前往URL(2) 設定完成後，預覽網頁並按下按鈕，就可以前往露天購買產品。

43

44 本章結束 Q&A討論時間