《DreamweaverCS3動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與制作教程》課件第10章_第1頁
《DreamweaverCS3動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與制作教程》課件第10章_第2頁
《DreamweaverCS3動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與制作教程》課件第10章_第3頁
《DreamweaverCS3動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與制作教程》課件第10章_第4頁
《DreamweaverCS3動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與制作教程》課件第10章_第5頁
已閱讀5頁，還剩43頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

10.1項(xiàng)目1：網(wǎng)頁加載時(shí)彈出公告頁10.2項(xiàng)目2：狀態(tài)欄文本10.3項(xiàng)目3：交換圖像 10.4項(xiàng)目4：自動(dòng)跳轉(zhuǎn)頁面10.5項(xiàng)目5：調(diào)用JavaScript關(guān)閉網(wǎng)頁10.6項(xiàng)目6：調(diào)用JavaScript彈出提示信息10.7課堂綜合訓(xùn)練10.8小結(jié)習(xí)題

第10章行為和JavaScript的應(yīng)用

1.操作步驟

要?jiǎng)?chuàng)建樣式表，可以在“行為樣式”面板中創(chuàng)建。操作方法如下：

(1)在DreamweaverCS3主窗口中，選擇【窗口】→【行為】(快捷鍵為Shift+F4)命令，打開【行為】面板，如圖10.1所示。10.1項(xiàng)目1：網(wǎng)頁加載時(shí)彈出公告頁圖10.1【行為】面板

(2)制作如圖10.2所示的公告頁new.html，以便加載網(wǎng)頁時(shí)彈出。

(3)要添加行為，首先將光標(biāo)放在<body>標(biāo)簽中，或選中標(biāo)簽，【行為】面板上方的標(biāo)簽會(huì)出現(xiàn)“標(biāo)簽<body>”，如圖10.1所示。

(4)單擊按鈕，展開“添加行為”列表，選擇“打開瀏覽器窗口”，彈出【打開瀏覽器窗口】對(duì)話框，如圖10.3所示。圖10.2公告頁圖10.3【打開瀏覽器窗口】對(duì)話框

(5)按圖中設(shè)置“要顯示的URL”、“窗口寬度”和“窗口高度”，單擊【確定】按鈕。

(6)在【行為】面板中選擇“觸發(fā)事件”為“onload”，即“頁面加載時(shí)”，如圖10.4所示。

(7)按F12鍵預(yù)覽頁面，當(dāng)index.html頁面加載時(shí)，會(huì)彈出公告頁，如圖10.5所示。圖10.4【選擇觸發(fā)事件】對(duì)話框圖10.5預(yù)覽效果2.相關(guān)知識(shí)點(diǎn)

行為面板；

打開瀏覽器窗口行為；

頁面加載事件。

1.操作步驟

設(shè)置狀態(tài)欄文本的具體操作步驟如下：

(1)打開【行為】面板，將光標(biāo)放在<body>標(biāo)簽中，或選中標(biāo)簽，【行為】面板上方的標(biāo)簽會(huì)出現(xiàn)所選標(biāo)簽<body>，如圖10.1所示。

(2)單擊按鈕，展開“添加行為”列表，選擇“設(shè)置文本”→“狀態(tài)欄文本”。彈出【設(shè)置狀態(tài)欄文本】對(duì)話框，在“消息”后的文本框內(nèi)輸入文本，如圖10.6所示。10.2項(xiàng)目2：狀態(tài)欄文本圖10.6【設(shè)置狀態(tài)欄文本】對(duì)話框

(3)單擊【確定】按鈕，在【行為】面板中選擇“觸發(fā)事件”為“onload”，即“頁面加載時(shí)”。

(4)按F12鍵預(yù)覽頁面，頁面狀態(tài)欄出現(xiàn)歡迎信息，如圖10.7所示。

2.相關(guān)知識(shí)點(diǎn)

設(shè)置文本行為。圖10.7預(yù)覽效果1.操作步驟

交換圖像的具體操作步驟如下：

(1)在頁面中插入交換前的圖像，如圖10.8所示。10.3項(xiàng)目3：交換圖像圖10.8原始圖像

(2)打開【行為】面板，將光標(biāo)放在<img>標(biāo)簽中，或選中標(biāo)簽，【行為】面板上方的標(biāo)簽會(huì)出現(xiàn)所選標(biāo)簽<img>。

(3)單擊按鈕，展開“添加行為”列表，選擇“交換圖像”，彈出【交換圖像】對(duì)話框，“設(shè)定原始檔為”選擇交換圖像second.jpg，如圖10.9所示。單擊【瀏覽】按鈕，選中“預(yù)先載入圖像”和“鼠標(biāo)滑開時(shí)恢復(fù)圖像”。圖10.9【交換圖像】對(duì)話框

(4)【行為】面板中的觸發(fā)事件設(shè)置為“onMouseOut”時(shí)恢復(fù)交換圖像，“onMouseOver”時(shí)交換圖像，如圖10.10所示。

(5)按F12鍵預(yù)覽頁面，當(dāng)鼠標(biāo)經(jīng)過原始圖像時(shí)，圖像交換，如圖10.11所示。

2.相關(guān)知識(shí)點(diǎn)

設(shè)置交換圖像行為；

鼠標(biāo)經(jīng)過事件。圖10.10觸發(fā)事件圖10.11交換圖像效果圖

1.操作步驟

設(shè)置自動(dòng)跳轉(zhuǎn)頁面的具體操作步驟如下：

(1)在頁面中插入原始圖像。

(2)打開【行為】面板，選中<img>標(biāo)簽，單擊按鈕，展開“添加行為”列表，選擇“轉(zhuǎn)到URL”，彈出【轉(zhuǎn)到URL】對(duì)話框，單擊【確定】按鈕，如圖10.12所示。10.4項(xiàng)目4：自動(dòng)跳轉(zhuǎn)頁面圖10.12【轉(zhuǎn)到URL】對(duì)話框

(3)在【行為】面板中選擇“觸發(fā)事件”為“onMouseOver”，即“鼠標(biāo)滑過時(shí)”轉(zhuǎn)到URL，如圖10.13所示。

(4)按F12鍵預(yù)覽頁面，當(dāng)鼠標(biāo)經(jīng)過原始圖像時(shí)，頁面自動(dòng)跳轉(zhuǎn)到另一頁面second.htm。

2.相關(guān)知識(shí)點(diǎn)

設(shè)置轉(zhuǎn)到URL行為。圖10.13【設(shè)置觸發(fā)事件】對(duì)話框(1)

1.操作步驟

調(diào)用JavaScript關(guān)閉網(wǎng)頁的具體操作步驟如下：

(1)選取網(wǎng)頁中的一個(gè)對(duì)象，如文字、圖像等，打開【行為】面板。

(2)單擊按鈕，展開“添加行為”列表，選擇“調(diào)用JavaScript”行為。

(3)彈出【調(diào)用JavaScript】對(duì)話框，輸入語句“window.close()”，如圖10.14所示。10.5項(xiàng)目5：調(diào)用JavaScript關(guān)閉網(wǎng)頁圖10.14【調(diào)用JavaScript】對(duì)話框

(4)單擊【確定】按鈕，將觸發(fā)事件設(shè)置為“onMouseOver”，如圖10.15所示。

(5)按F12鍵預(yù)覽頁面，當(dāng)鼠標(biāo)經(jīng)過鏈接文字時(shí)，就會(huì)自動(dòng)關(guān)閉瀏覽器窗口。

2.相關(guān)知識(shí)點(diǎn)

調(diào)用JavaScript關(guān)閉瀏覽器窗口。圖10.15【設(shè)置觸發(fā)事件】對(duì)話框(2)

1.操作步驟

調(diào)用JavaScript彈出提示信息的具體操作步驟如下：

(1)選取網(wǎng)頁中的<body>標(biāo)簽，打開【行為】面板。

(2)單擊按鈕，展開“添加行為”列表，選擇“彈出信息”行為，彈出【彈出信息】對(duì)話框，如圖10.16所示，在對(duì)話框中輸入要提示的文字。10.6項(xiàng)目6：調(diào)用JavaScript彈出提示信息圖10.16【彈出信息】對(duì)話框

(3)單擊【確定】按鈕，將觸發(fā)事件設(shè)置為“onLoad”，如圖10.17所示。

(4)按F12鍵預(yù)覽頁面，當(dāng)頁面加載時(shí)，彈出提示信息，如圖10.18所示。

2.相關(guān)知識(shí)點(diǎn)

彈出信息行為。圖10.17【設(shè)置觸發(fā)事件】對(duì)話框(3)圖10.18彈出信息

3.知識(shí)拓展：調(diào)用JavaScript彈出輸入框

調(diào)用JavaScript彈出輸入框的具體操作步驟如下：

(1)選取網(wǎng)頁中的<body>標(biāo)簽，打開【行為】面板。

(2)單擊按鈕，展開“添加行為”列表，選擇“調(diào)用JavaScript”行為。

(3)彈出【調(diào)用JavaScript】對(duì)話框，輸入語句“prompt("請(qǐng)輸入生日，如0122")”，如圖10.19所示。圖10.19【調(diào)用JavaScript】對(duì)話框

(4)單擊【確定】按鈕，將觸發(fā)事件設(shè)置為“onLoad”，如圖10.20所示。

(5)按F12鍵預(yù)覽頁面，當(dāng)頁面加載時(shí)，彈出輸入框，如圖10.21所示。圖10.20【設(shè)置觸發(fā)事件】對(duì)話框(4)圖10.21【輸入框】窗口

1.訓(xùn)練內(nèi)容

進(jìn)行課堂綜合訓(xùn)練的具體內(nèi)容如下：

(1)在頁面中插入一個(gè)1?×?6的表格。

(2)準(zhǔn)備14張圖像，給7張鼠標(biāo)移出時(shí)顯示的圖像分別命名為“menu_0”加上1～7的數(shù)字再加上“.gif”，給7張鼠標(biāo)移入時(shí)顯示的圖像分別命名為“menu_0”加上1～7的數(shù)字再加上“_over.gif”。10.7課堂綜合訓(xùn)練

(3)將步驟(1)準(zhǔn)備的7張鼠標(biāo)移出時(shí)顯示的圖像按順序插入到頁面的表格中。

(4)選擇“menu_01.gif”圖像，打開【行為】面板，將光標(biāo)放在<img>標(biāo)簽中，或選中標(biāo)簽，【行為】面板上方的標(biāo)簽會(huì)出現(xiàn)所選標(biāo)簽。

(5)單擊按鈕，展開“添加行為”列表，選擇“交換圖像”。彈出【交換圖像】對(duì)話框，“設(shè)定原始檔為”選擇交換圖像“menu_01_over.gif”，單擊【瀏覽】按鈕。選中“預(yù)先載入圖像”和“鼠標(biāo)滑開時(shí)恢復(fù)圖像”。

(6)【行為】面板中的觸發(fā)事件設(shè)置為“onMouseOut”時(shí)恢復(fù)交換圖像，“onMouseOver”時(shí)交換圖像。

(7)依次選擇圖像“menu_02.gif”、“menu_07.gif”，重復(fù)步驟(4)～(6)，將交換圖像分別設(shè)置為“menu_02_over.gif”、“menu_07_over.gif“。

(8)按F12鍵預(yù)覽頁面，當(dāng)鼠標(biāo)經(jīng)過原始圖像時(shí)，圖像交換，實(shí)現(xiàn)了導(dǎo)航條的動(dòng)畫效果。

2.相關(guān)知識(shí)點(diǎn)

設(shè)置交換圖像行為；

鼠標(biāo)經(jīng)過事件。本章側(cè)重介紹了行為的添加方法，要求熟練運(yùn)用常用行為產(chǎn)生網(wǎng)頁中的特殊效果。

行為是事件和由該事件觸發(fā)的行為的組合體。動(dòng)作是由JavaScript代碼組成，事件是瀏覽器生成的消息，指示該頁的瀏覽者執(zhí)行某種操作。

通過對(duì)【行為】面板的操作完成對(duì)行為的添加和控制，可以將行為附加給整個(gè)文檔、鏈接、圖像或其他對(duì)象。10.8小結(jié)

1.選擇題

(1)在JavaScript語言的文件中，F(xiàn)ocus將觸發(fā)的事件是()。

A．元素失去焦點(diǎn) B．當(dāng)前焦點(diǎn)位于該元素

C．頁面被裝入 D．將當(dāng)前內(nèi)容提交

(2)下列屬于JavaScript元素的有()。(多選)

A．事件 B．事件處理句柄

C．函數(shù) D．類E．對(duì)象習(xí)題

(3)在客戶端網(wǎng)頁腳本語言中最為通用的是()。

A.?JavaScript B.?VB

C.?Perl D.?ASP

(4)下面屬于JavaScript對(duì)象的有()。

A.?Window

B.?Document

C.?form

D.?String

E.?Navigator

(5)行為的核心有兩個(gè)，即()。

A.效果+事件

B.事件+結(jié)構(gòu)

C.事件+動(dòng)作

(6)事件和動(dòng)作的關(guān)系是()。

A.動(dòng)作觸發(fā)事件

B.事件觸發(fā)動(dòng)作

2.填空題

(1)行為是由

和

構(gòu)成的。

(2)能夠建立網(wǎng)頁交互性的腳本語言有兩種，一種是只在

端運(yùn)行的語言，另一種是在網(wǎng)上經(jīng)常使用的

端語言。

(3)行為是

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論