第13章多媒體與網(wǎng)頁特效(編輯修改稿)
2025-02-26 12:46 本頁面
【文章內(nèi)容簡介】 veScript代碼相關(guān)聯(lián)，單擊鼠標(biāo)時就可以執(zhí)行相應(yīng)的 JaveScript代碼(動作 )。一個事件可以同多個動作相關(guān)聯(lián) (1： n)，即發(fā)生事件時可以執(zhí)行多個動作。為了實現(xiàn)需要的效果，我們還可以指定和修改動作發(fā)生的順序。 ? 2. 應(yīng)用行為 ? 在 Dreamwaever中，對行為的添加和控制主要通過 【 行為 】 面板來實現(xiàn)。執(zhí)行 “ 窗口 ” → “ 行為 ” 菜單命令，打開行為面板，如圖 1315所示。 ? 在行為面板上可以進(jìn)行如下操作： ? （ 1）單擊 【 +】 按鈕，打開動作菜單，添加行為；單擊 【 】 按鈕，刪除行為。添加行為時，從動作菜單中選擇一個行為項。 ? （ 2）單擊事件列右方的三角，打開事件菜單，可以選擇事件。 ? （ 3）單擊向上箭頭或向下箭頭，可將動作項向前移或向后移，改變動作執(zhí)行的順序。 ? 3. 創(chuàng)建行為 ? 一般創(chuàng)建行為有三個步驟：選擇對象、添加動作、調(diào)整事件。 ? 我們通過一個 “ 打開瀏覽器窗口 ” 實例說明如何創(chuàng)建行為。我們需要的效果是，在網(wǎng)頁上單擊一幅小圖像，打開一個新窗口顯示放大的圖像。 ? （ 1）打開 ，選中圖片。 ? （ 2）單擊行為面板上的 +按鈕，打開動作菜單。從動作菜單中選擇 “ 打開瀏覽器 ” 命令，在彈出的對話框中設(shè)置參數(shù)。 ? 在 “ 要顯示的 URL”文本框中，單擊 “ 瀏覽按鈕 ” 選擇在新窗口中載入的目標(biāo)的 URL地址 (可以是網(wǎng)頁也可以是圖像 )。窗口寬度設(shè)為 900px，窗口高度設(shè)為 900px。窗口名稱為 “ 放大圖片 ” 。 ? ( 3）當(dāng)我們添加行為時，系統(tǒng)自動為我們選擇了事件 onClick(單擊鼠標(biāo) )，現(xiàn)在，我們單擊行為面板上的事件菜單按鈕，打開事件菜單，重新選擇一個觸發(fā)行為的事件。把 onClick(單擊鼠標(biāo) )的事件改為onMouseOver(鼠標(biāo)滑過 )，如圖 1316所示 ： 顯示 隱藏層 ? 行為是實現(xiàn)網(wǎng)頁上交互的一種捷徑，行為將 javascript 代碼放置在文檔中，以允許訪問者與 Web 頁進(jìn)行交互，從而以多種方式更改頁面動作或執(zhí)行某些任務(wù)。行為是事件和由該事件觸發(fā)的動作的組合。 ? 【 實例 】 光標(biāo)移到圖片上面。在它的右側(cè)即顯示一段其它內(nèi)容（動畫）。 ? 這是兩個行為：行為一：移入 +顯示；行為二：移出 +隱藏。 ? 事件是：鼠標(biāo)移入和移出。動作是：顯示和隱藏。 ? 具體操作如下： ? 1. 在頁面中插入一張圖片，本例為蘭花圖片。 ? 2. 在頁面中插入一個層，貼入幾個動畫。具體操作是：打開 【 插入 】 面板單擊 【 布局 】 選項卡中的 【 繪制層 】 按鈕，在蘭花圖片右邊繪制層，并在層里面插入幾個動畫，如圖 1317所示： ? 3. 在層面板中，將該層設(shè)置成為隱藏。打開頁面的時候不顯示層面板狀態(tài)，具體操作是：執(zhí)行 “ 窗口 ” → “ 層 ” 菜單命令，打開層面板，在 layer1左邊的眼鏡關(guān)閉，如圖 1318所示： ? 4. 單擊圖片，打開行為面板（執(zhí)行 “ 窗口 ” → “ 行為 ” 菜單命令）。在行為面板按 “ +”號，在彈出菜單中選中顯示 隱藏層，系統(tǒng)彈出 “ 顯示－隱藏層 ” 對話框。單擊該層，然后單擊 “ 隱藏 ” 按鈕。確定。如圖 1319所示： 打開“行為”面板，我們可以在面板中看到事件和行為。需進(jìn)一步對事件進(jìn)行設(shè)置。單擊“ onLoad”，在下拉菜單中選擇“ onMouseOut”，如圖 1320所示 上述方法是鼠標(biāo)移出事件行為的設(shè)置，重復(fù)以上 45的方法再對鼠標(biāo)移上事件行為進(jìn)行設(shè)置，把顯示－隱藏層設(shè)為（顯示），如圖 1321所示： 7. 行為事件設(shè)置，單擊“ onLoad”，在下拉菜單中選擇“ onMouseOver”，設(shè)置后的“行為”面板最終結(jié)果，如圖 1322所示： 保存頁面，預(yù)覽網(wǎng)頁?？梢钥吹焦鈽?biāo)移動到蘭花圖片上就出現(xiàn)右側(cè)的內(nèi)容。 設(shè)置狀態(tài)欄文本 ? 網(wǎng)頁瀏覽器的狀態(tài)欄位于瀏覽器的下方，可以通過瀏覽器菜單欄上 “ 查看 ” → “ 狀態(tài)欄 ” 選項將其打開或關(guān)閉。網(wǎng)頁的狀態(tài)欄顧名思義就是顯示網(wǎng)頁的狀態(tài)信息。 ? 【 實例 】 在網(wǎng)頁狀態(tài)欄里顯示自定義的一行文字信息。 ? 操作步驟 ? （ 1） 新建空白網(wǎng)頁 ，在設(shè)計視圖中輸入文本 “ 顯示狀態(tài)欄文本 ” 。 ? （ 2） 執(zhí)行 “ 窗口 ” → “ 行為 ” 菜單命令，打開行為面板，選擇文本 “ 顯示狀態(tài)欄文本 ” 單擊行為面板中 【 +】 按鈕，在彈出的菜單中執(zhí)行 “ 設(shè)置文本 ” → “ 設(shè)置狀態(tài)欄文本 ” 菜單命令，彈出 “ 設(shè)置狀態(tài)欄文本 ” 對話框，如圖 1323所示。在消息中輸入 “ 我在下面呢！ ” 后單擊 【 確定 】 按鈕。 （ 3） 選擇行為面板的事件為 “ onClick”事件，最終的行為面板的界面如圖 1324所示： （ 4） 按快捷鍵 F12 ，就可以預(yù)覽到如圖 1325所示的狀態(tài)欄文字效果了。 設(shè)置層文本 ? “設(shè)置層文本 ” 動作用您指定的內(nèi)容替換頁上現(xiàn)有層的內(nèi)容和格式設(shè)置。該內(nèi)容可以包括任何有效的 HTML 源代碼。通過在“ 設(shè)置層文本 ” 對話框的 “ 新建 HTML”文本框中包括 HTML 標(biāo)簽，可對內(nèi)容進(jìn)行格式設(shè)置。 ? ? 【 實例 】 設(shè)置層文本。 ? （ 1） 新建空白網(wǎng)頁 ，打開 【 插入 】 面板單擊 【 布局 】選項卡中的 【 繪制層 】 按鈕，在設(shè)計視圖中繪制層，在層中輸入文本信息。 ? （ 2） 執(zhí)行 “ 窗口 ” → “ 行為 ” 菜單命令，打開行為面板，選擇設(shè)計視圖中的層，單擊行為面板中 【 +】 按鈕，在彈出的菜單中執(zhí)行 “ 設(shè)置文本 ” → “ 設(shè)置層文本 ” 菜單命令，彈出 “ 設(shè)置層文本 ” 對話框，如圖 1326所示。在消息中輸入文本信息后單擊【 確定 】 按鈕。 （ 3） 選擇行為面板的事件為“ onClick”事件，最終的行為面板的界面如圖 1327所示： ? （ 4） 按快捷鍵 F12 ，就可以預(yù)覽到如圖 1328所示的設(shè)置層效果了。
數(shù)學(xué)相關(guān)推薦
鄂ICP備17016276號-1