《網(wǎng)頁設(shè)計(jì)》完整課件 網(wǎng)頁設(shè)計(jì)10-2

1、第十一講 行為事件(2) 在這節(jié)，我們繼續(xù)學(xué)習(xí)Dreamweaver系統(tǒng)提供的行為事件的應(yīng)用：7、檢查瀏覽器 優(yōu)秀的網(wǎng)站應(yīng)考慮到不同的訪問者在訪問網(wǎng)頁時(shí)，網(wǎng)頁是否能夠正常顯示。為了兼容不同版本和類型的瀏覽器，有的網(wǎng)站甚至為同一內(nèi)容的頁面制作了不同瀏覽器上運(yùn)行的版本，這樣做是非常麻煩的。使用“檢查瀏覽器”動(dòng)作，可以很快地解決這個(gè)問題。在使用“檢查瀏覽器”動(dòng)作，可以獲取用戶的瀏覽器版本和類型，根據(jù)瀏覽器的類型和版本的不同，將用戶轉(zhuǎn)到不同的網(wǎng)頁。例如設(shè)計(jì)者可以將使用N4或更高版本的瀏覽器的訪問者轉(zhuǎn)到第一頁，把IE4或更高版本的瀏覽器的訪問者轉(zhuǎn)到另一頁，而將其它類型的瀏覽器的訪問者留在當(dāng)前頁。此行為通

2、常被附加到頁面的標(biāo)簽上。操作步驟如下：1)、打開需要附加該動(dòng)作的頁面。2)、選中標(biāo)簽，打開系統(tǒng)行為面板，單擊“+”按鈕，在彈出的動(dòng)作菜單中選擇“檢查瀏覽器”動(dòng)作。彈出以下對(duì)話框：3)、在彈出的對(duì)話框中進(jìn)行相關(guān)設(shè)置，設(shè)置完畢，按“確定”。在相應(yīng)的下拉列表中選擇的各項(xiàng)的含義如下：留在此頁 停留在本頁面。轉(zhuǎn)到URL 跳轉(zhuǎn)到URL文本框中指定的頁面中去。前往代替URL 跳轉(zhuǎn)到代替URL文本框中指定的頁面中去。8、控制Shockwave或Flash使用【控制Shockwave或Flash 】動(dòng)作，可以控制Macromedia Shockwave或Macromedia Flash的播放、停止、重放。操作步

3、驟如下：1）、單擊插入欄中的常用面板的插入Flash對(duì)象按鈕，在文檔中插入一段Flash動(dòng)畫。2）、打開其屬性面板，在最左上方區(qū)域中為Flash影片命名（必須取名，才能用這個(gè)動(dòng)作來控制它）。3）、在文檔窗口中插入三個(gè)圖像按鈕，用來作為控制Flash影片的對(duì)象。4）、選定“播放”按鈕，然后打開行為面板，點(diǎn)擊“+”按鈕，從動(dòng)作彈出的菜單中選擇【控制Shockwave或Flash 】命令，打開【控制Shockwave或Flash 】對(duì)話框：5)、在對(duì)話框中的【動(dòng)作】選項(xiàng)中選擇【播放】選項(xiàng)，單擊“確定”按鈕。6）、重復(fù)步驟4）和5）為“倒退”、“停止”按鈕添加行為。7）、檢查默認(rèn)事件是否是“onCli

4、ck”。設(shè)置完成以后，預(yù)覽網(wǎng)頁，就可以使用這三個(gè)按鈕控制Flash 動(dòng)畫的播放。9、檢查表單表單數(shù)據(jù)的合法性檢驗(yàn)，有的可以在客戶端進(jìn)行，有的必須在服務(wù)器端進(jìn)行。例如，年齡不能小于0，電子郵件地址不能沒有符號(hào)等都可以在客戶端檢驗(yàn)，無須發(fā)送到服務(wù)器檢驗(yàn)。對(duì)于用戶的密碼，信用卡號(hào)等信息，可在客戶端檢查其合法性，如密碼的長(zhǎng)度是否滿足，但它的正確性必須送到服務(wù)器端進(jìn)行檢驗(yàn)。使用“檢查表單”動(dòng)作檢查指定文本域中的內(nèi)容，是否滿足合法性要求。具體做法是：使用onBlur事件將此動(dòng)作分別附加到各個(gè)文本域，在用戶填寫表單時(shí)對(duì)文本域進(jìn)行檢查；或使用onSubmit事件將其附加到表單，在用戶單擊“提交”按鈕時(shí)，同時(shí)對(duì)

5、多個(gè)文本域進(jìn)行檢查。只有表單的數(shù)據(jù)符合要求，才能將表單提交到服務(wù)器。若表單的數(shù)據(jù)不符合要求，必須重新輸入。下面用一個(gè)簡(jiǎn)單的例子介紹在客戶端檢驗(yàn)數(shù)據(jù)有效性的一般方法：1）、創(chuàng)建一個(gè)會(huì)員注冊(cè)表單。如下所示：2）、檢查年齡輸入的有效性，選擇“年齡”文本框，然后打開系統(tǒng)行為面板，單擊“+”按鈕，從彈出的菜單中選擇“檢查表單”動(dòng)作，彈出以下對(duì)話框：3）、在彈出的對(duì)話框的命名的欄位中，選擇“age”項(xiàng)進(jìn)行年齡輸入范圍的設(shè)置：勾選“必需的”復(fù)選框，然后選擇數(shù)字從17到70（限定會(huì)員大年齡在1770歲之間）。4）、選擇郵件地址“mail”項(xiàng)設(shè)置：勾選“必需的”復(fù)選框，然后選擇“電子郵件地址”。5）、在行為面板

6、中選擇【onBlur】事件。如下圖所示。6）、預(yù)覽網(wǎng)頁。在年齡文本框中輸入一個(gè)不在1770范圍的年齡，當(dāng)光標(biāo)移動(dòng)到下一個(gè)文本框時(shí)，就會(huì)彈出一個(gè)警告對(duì)話框，說明年齡的輸入范圍在1770之內(nèi)，單擊“確定”關(guān)閉該對(duì)話框，然后重新輸入。7）、用類似的方法檢查郵件地址輸入的合法性10、其它行為動(dòng)作 其它的行為動(dòng)作用些實(shí)際的例子來說明。具體的操作步驟如下：1）、時(shí)間軸2）、設(shè)置狀態(tài)欄文本3）、設(shè)置層文本4）、顯示彈出式菜單5）、拖動(dòng)層本節(jié)小結(jié) 知識(shí)點(diǎn)1：行為-是響應(yīng)某一事件而采取的一個(gè)動(dòng)作。當(dāng)把行為賦予文檔中的某個(gè)元素時(shí)，也就定義了一個(gè)動(dòng)作。 知識(shí)點(diǎn)2：動(dòng)作- 是行為中的那段Javascript代碼，用于完成某一組特定的操作，比如打開窗口，播放一段音樂等。