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