第 7 章

Size: px

Start display at page:

Download "第 7 章"

楚劳褚
5 years ago
Views:

1 行為面板的應用 17-1 行為面板的操作 17-2 開啟不含工具列的瀏覽視窗 17-3 在狀態列顯示文字 1

2 17-1 行為面板的操作 Dreamweaver 所謂的行為, 是指瀏覽器及網頁上各元件的行為例如瀏覽器的狀態列訊息交談窗網頁上的影像表單等都可各自進行不同的行為, 以產生動態效果 2

3 行為面板的操作 3

4 行為面板的操作首先來認識一下行為面板的操作方式請開啟一份新網頁, 然後執行視窗 / 行為命令以顯示行為面板 4

5 行為面板的操作加入行為的方法行為的效果說明事件與動作的概念選擇事件與瀏覽器相容性各種事件的意義刪除及修改行為調整行為的執行順序 5

6 加入行為的方法要在網頁上加入行為效果, 有 3 個主要步驟 : 1. 選取要產生行為的目標元件, 該元件的 HTML 標籤會顯示在行為面板的標題列上可以選擇影像連結文字等元件如果要在網頁一載入時就出現效果, 則可按一下狀態列上的 <body> 標籤 2. 按下新增行為鈕選擇一種效果, 此時可使用的效果會依選取的元件而有差異接著在隨後出現的交談窗中, 設定此效果的屬性 3. 選擇事件, 以決定什麼時候要發生所設定的效果例如 : 按下滑鼠或移開滑鼠時等 6

7 行為的效果說明由於內建的行為多達二十餘種, 礙於篇幅所限無法全部加以介紹, 底下列出每個行為的效果簡介, 並在後面 2 節介紹幾種應用 ( 許多行為效果會在其它章節中應用到, 請見下圖標示 ) 至於未提到的部份, 就請自己試看看 7

8 行為的效果說明 8

9 事件與動作的概念假設現在已經加入一個行為效果 ( 實際操作請見稍後的說明 ), 在行為面板中就會顯示事件和動作的資訊 : 9

10 事件與動作的概念事件和動作都是 Script 中的用語, 意思就是 : 當瀏覽者做了什麼事件之後, 就會發生您所設定好的動作例如在現實生活中, 當按下電燈開關時, 燈泡就會發光, 這正是典型的事件與動作關係 : 電燈開關就是讓使用者觸發事件的介面, 對應在網頁上就是指加入行為的目標元件, 例如影像文字 10

11 事件與動作的概念按下則是事件, 如果您只是盯著開關看, 那並不會發生什麼事情, 一旦按下開關後, 才算觸發了事件在網頁上, 事件的類型有很多種, 例如滑鼠移過按下或離開目標元件時網頁載入時按下鍵盤時, 依瀏覽器版本的不同, 所支援的事件項目也有所差異燈泡發光代表動作, 也就是所預期的網頁效果, 例如跳出一個訊息交談窗 11

12 事件與動作的概念 12

13 選擇事件與瀏覽器相容性當您加入了一個行為後, 事件欄位就會自動選擇一個適當的事件, 如果出現的不是您想要的事件, 可以點選事件欄位, 然後按下拉箭頭, 從選單中選擇其它的事件 13

14 事件與動作的概念有些人的事件選單可能和上圖不同, 這是因為您所能選擇的事件會被許多因素影響, 例如不同的行為效果, 可供選擇的事件就可能會不同 ; 而同一個行為加在不同的元件上, 也會使得事件項目有所增減而影響可選擇事件多寡的最大因素, 則是瀏覽器版本, 因為瀏覽器版本越新, 支援的事件就越多, 所以若選擇 IE 6.0, 則在事件選單將有一大串的事件可用, 不過用其它瀏覽器來觀看此網頁時, 可能就看不到設定的效果了 14

15 事件與動作的概念按下鈕由選單中的顯示特定事件子功能表中選擇瀏覽器版本 : 15

16 各種事件的意義列在事件選單中的事件, 都是以 Script 中的語法來命名, 所以您會看到一堆 onmouseover onmousedown 之類的名稱, 從字面上就可以輕易判斷每個事件的意義, 常見的有 : onmouseover: 滑鼠移到目標上時 onmouseup: 按下滑鼠再放開左鈕時 onmouseout: 滑鼠移開時 onmousedown: 按下滑鼠時 ( 不必放開滑鼠左鈕 ) 16

17 事件與動作的概念 onclick: 用滑鼠點選物件時 ( 按下滑鼠左鈕並放開 ) ondblclick: 用滑鼠雙按物件時 onload: 載入網頁時 onunload: 離開目前網頁時 onfocus: 滑鼠移入表單元件時 ( 或網頁視窗被置於前景時 ) onblur: 滑鼠移出表單元件時 ( 或網頁視窗被置於背景時 ) 17

18 事件與動作的概念至於其它的事件屬性, 可參考市面上的 JavaScript 書籍 ; 若稍微懂得一點 Script 語法, 在使用行為時會更得心應手 18

19 刪除及修改行為已加入的行為還是可以修改內容, 只要雙按動作欄位, 即可開啟對應的交談窗, 讓您修改其屬性設定, 而按下鈕, 則可刪除目前選取的行為 : 19

20 刪除及修改行為有時您可能明明加入了行為, 但是在面板中卻看不到蹤影, 這多半是因為您沒有選取到已加上行為的元件 ; 例如在某張影像上加入行為, 那麼一定要選取該影像, 面板中才會顯示對應的行為項目 20

21 調整行為的執行順序若對同一個事件設定好幾個動作, 就有必要調整其先後順序, 讓想要的效果能按順序出現 21

22 17-2 開啟不含工具列的瀏覽視窗在為文字或影像設定連結時, 只要把目標設為 _blank, 就可以使網頁開啟在新的視窗之中開啟的新視窗並不包含功能表狀態列網址列等元件這是由於設計者使用 Script 語法命令瀏覽器不要將這些工具列顯示出來 ; Dreamweaver 已內建了這種行為, 不用自己去撰寫 JavaScript, 就能做出這種效果 22

23 開啟不含工具列的瀏覽視窗範例觀賞範例實作連結設為 "javascript:;" 或 "#" 的差異 23

24 範例觀賞請用瀏覽器開啟範例網站的日本簡介網頁 (aboutjapan.html) 然後任意點選地圖上的顏色區域, 便可以開啟不含工具列的瀏覽視窗 : 24

25 範例觀賞 25

26 範例觀賞 26

27 範例實作在 6-5 節製作影像地圖時, 已經練習過替日本地圖設置超連結, 而那時的做法是直接連到細部地圖的網頁但是實際上希望可以將細部地圖開啟在不含工具列寬高更符合圖片的新視窗 1. 請開啟練習檔 Ex17-01.html, 然後任意選取一塊含有超連結的影像地圖區域 : 27

28 範例實作 28

29 範例實作 2. 按下行為面板的鈕, 執行開啟瀏覽器視窗命令, 開啟如下交談窗進行設定 : 29

30 範例實作 3. 按下確定鈕後, 回到行為面板, 在事件欄中將事件改成 onclick, 也就是當滑鼠按下時便開啟新視窗 4. 請按下 F12 鍵來預覽結果當指標移到剛剛設定的地圖區域時, 會出現手形的指標按下後即會開啟新視窗, 顯示剛才設定的連結內容 30

31 連結設為 "javascript:;" 或 "#" 的差異當在沒有設定超連結的元件上設定行為時, 若希望當瀏覽者將滑鼠移到元件上時, 滑鼠指標會變成手指形狀, 以方便瀏覽者辨識可將屬性面板的連結欄設為 javascript:; 或 # 讓該元件具有不會連結目標的超連結屬性如此一來, 此元件就可以具有超連結屬性, 雖然不會連結到其它地方, 但當瀏覽者將滑鼠移上來時, 滑鼠指標卻會變成手指形狀, 表示這個元件是可以點選的 31

32 連結設為 "javascript:;" 或 "#" 的差異那麼究竟該使用 javascript:; 還是使用 #? 兩者的差異在於使用 # 做為超連結時, 若點選位在網頁下方的超連結, 該網頁畫面位置會跳回最上面 ; 使用 " javascript:;" 做為超連結時, 點選超連結後網頁畫面位置會保持不變 32

33 連結設為 "javascript:;" 或 "#" 的差異因此若希望點選超連結後, 網頁畫面保持不變, 使用 "javascri pt:;" 會比較適合 33

34 範例觀賞請開啟完成檔 Ch17-02.html, 並按下 F12 鍵預覽此頁效果, 會發現狀態列顯示了一行文字本節就要教各位如何在狀態列顯示自己想要的文字 34

35 17-3 在狀態列顯示文字想要在瀏覽器的狀態列顯示文字, 使用內建的行為效果, 即可輕鬆完成範例觀賞範例實作另一種狀態列文字的顯示做法 35

36 範例觀賞 36

37 範例實作 1. 請利用練習檔 Ex17-02.html 來進行如下操作範是讓網頁在一載入時就產生動作所以請先點選編輯視窗狀態列的 <body> 標籤, 然後在行為面板中執行設定文字 / 設定狀態列文字命令 37

38 範例實作 38

39 範例實作 2. 在交談窗中輸入想要顯示在狀態列的文字, 並按下確定鈕 3. 回到行為面板, 記得將事件改成 onload, 這樣就輕輕鬆鬆設定完畢啦! 39

40 另一種狀態列文字的顯示做法若將事件改成 onmouseover, 則可做出當滑鼠移到圖片上時, 狀態列才出現文字的效果如果希望當滑鼠離開圖片時, 狀態列文字會跟著消失, 則必須要再另外設定 onmouseout ( 滑鼠移開時 ) 的事件效果 1. 請開啟練習檔 Ex13-03.html, 這個例子是希望當指標移到圖片上時, 在狀態列會顯示文字, 指標移開後狀態列的文字則會消失所以請先點選圖片, 然後在行為面板中執行設定文字 / 設定狀態列文字命令 : 40

41 另一種狀態列文字的顯示做法 41

42 另一種狀態列文字的顯示做法 2. 在交談窗中輸入想要顯示在狀態列的文字, 並按下確定鈕回到行為面板, 再將事件改成 onmouseover, 即可完成指標移到圖片上時出現狀態列會出現文字的設定 : 42

43 另一種狀態列文字的顯示做法 3. 接著再比照上述步驟插入另一個設定狀態列文字的行為, 然後交談窗中什麼字都不要輸入, 直接按確定鈕, 最後再把事件設為 onmouseout, 這樣當滑鼠移開目標時, 狀態列就不會顯示任何文字了 : 43

44 另一種狀態列文字的顯示做法 4. 請按下 F12 鍵來預覽結果, 當指標移到剛剛設定的圖片時, 狀態列即會出現設定的文字, 移開後文字就會消失 : 44

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

$輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4$ JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling