动态网页与行为面板的运用 - 亚洲大学.PDF

動態網頁與行為面板的運用 林佳漢 亞洲大學 資訊傳播學系 大綱 動態網頁概念 行為面板的操作 動態效果的套用 能力指標 動態網頁概念 所謂動態網頁就是讓網頁隨著使用者的一些動作（通 常是滑鼠操作）來產生出一些動態效果出來。例如： 游標移到某個區域會跳出一段說明文字。 這些網頁的動態效果通常是透過程式來完成（例如： JavaScript ），而在 Dreamweaver 中，利用行為面板 整理了幾種簡單的動態效果，讓我們不需要辛苦的撰 寫程式就可以透過一些屬性的設定來完成這些動態效 果。請注意，這些效果事實上還是透過 JavaScript 來 完成，只是程式碼是由 Dreamweaver 來幫我們產生的 。 動態網頁概念 行為面板可以透過功能表「視窗 / 行為」來開啟，接 著於右方面板區找到行為面板。 動態網頁概念 按下加號（新增行為），可以看到目前標籤所在位置 可以新增的行為有哪些。 動態網頁概念 假如我們選擇了某個特定的行為，並完成其屬性設定 ，那麼將會在我們的網頁內容中加上一段程式碼來完 成這個動態效果。 行為面板的操作 選擇行為作用的對象 選擇欲產生的行為 設定屬性以及對應的事件 行為面板的操作 選擇行為作用的對象 所謂「行為作用的對象」，不是指動態效果發生的對象 ，而是指當使用者對這個元件做了某個特定的動作之後 將會觸發行為（動態效果）。舉例而言，當使用者滑鼠 經過某張圖片（ A ）時，另一張圖片（B ）產生變化； 此時，「行為作用的對象」指的是圖片 A 而非產生效果 的圖片 B 。 行為面板的操作 選擇欲產生的行為 當選定了「行為作用的對象」之後，接著要從行為面板 中選擇適當的行為來產生出動態效果。在選擇的時候， Dreamweaver 會依照指定的元件來過濾掉不可使用的行 為（灰色字體）。 行為面板的操作 設定屬性以及對應的事件 在完成了行為的選擇之後，接著要考慮的便是相關屬性 的設定以及事件的選擇。屬性設定會依照所選擇的行為 有所不同，例如要顯示的文字、產生變化的圖片等等。 至於事件，則是指瀏覽者對於「行為作用的對象」做了 什麼事情，例如滑鼠經過、敲擊一下滑鼠、載入等等。 換言之，當瀏覽者對於「行為作用的對象」做了某個動 作就會觸發行為的產生。 動態效果的套用 - 歡迎訊息 選擇行為作用的對象 由於我們希望載入網頁時產生出這個行為，因此作用的 對象應為網頁本體亦即 body 標籤。 動態效果的套用 - 歡迎訊息 選擇欲產生的行為 我們可以按下 選擇 「彈出訊息」這個行為 。 動態效果的套用 - 歡迎訊息 接著可以輸入欲顯示的文字，也就是這個行為可供設 定的屬性。 完成之後在行為面板可以看到新增的這個行為。 動態效果的套用 - 歡迎訊息 如需修改，只須在行為上雙擊滑鼠即可開啟設定視窗。 行為列表中左側欄位即為對應的事件，每個行為都會 有預設的對應事件，我們不需特別指定，但如果我們 希望的效果不同於預設事件，則須加以修改以符合我 們的需求。 動態效果的套用 - 歡迎訊息 舉例而言，若我們希望這個彈出訊息是離開網頁之後 才會出現而非載入時出現，此時可以用滑數點選事件 （onLoad ），之後透過下拉式選單出現的事件列表 來選擇。其中可以看到有各種滑鼠與鍵盤事件可供選 擇，在此例我們要找到「 onUnLoad 」事件。 動態效果的套用 - 開啟不含工具列的瀏覽 視窗 在為文字或影像設定連結時，只要把目標設為「_bla nk 」就可以將網頁開啟在新的視窗之中。但大家有時 候可能看過開啟的新視窗是不