(教學(xué)課件)chapter12-為頁(yè)面元素添加行為

1、第12章 為頁(yè)面元素添加行為增加“設(shè)計(jì)”頁(yè)面動(dòng)感效果計(jì)算機(jī)工程學(xué)院計(jì)算機(jī)基礎(chǔ)教學(xué)部學(xué)習(xí)目標(biāo)了解腳本語(yǔ)言的基本用途了解行為的基本概念和構(gòu)成了解動(dòng)作和事件的含義掌握“行為”面板的使用方法掌握常用內(nèi)置行為的操作方法網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）2深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室實(shí)訓(xùn)項(xiàng)目為了讓“深圳慧衡科技有限公司”網(wǎng)站的二級(jí)頁(yè)面“設(shè)計(jì)”更富有動(dòng)感效果，需要：(1) 頁(yè)面中的文本和圖像之間能有一些豐富的交互式動(dòng)態(tài)效果。(2) 在網(wǎng)站上發(fā)布活動(dòng)通知。網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）3深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室項(xiàng)目分析設(shè)計(jì)思路：（1）本頁(yè)面的功能是讓頁(yè)面和其中的文本和圖像具有動(dòng)感效果，因而，已完成

2、的版面布局、配色方案無(wú)需改變。（2）主要工作是針對(duì)不同的頁(yè)面對(duì)象，利用系統(tǒng)提供的多種內(nèi)置行為設(shè)計(jì)出豐富、和諧、動(dòng)感的效果。網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）4深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室設(shè)計(jì)目標(biāo)（1）網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室設(shè)計(jì)目標(biāo)（2）網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）6深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室頁(yè)面頁(yè)面對(duì)象效果要求內(nèi)置行為“活動(dòng)通知”design_note.html“關(guān)閉窗口”圖像單擊之后，會(huì)關(guān)閉所在頁(yè)面。調(diào)用JavaScript “設(shè)計(jì)”design_behavior.html頁(yè)面打開(kāi)頁(yè)面的同時(shí)，彈出“活動(dòng)通知”頁(yè)面。打開(kāi)瀏覽器窗口“im-

3、drupal-4.jpg”等5個(gè)圖像鼠標(biāo)移至某個(gè)圖像上時(shí)，“text”AP DIV就顯示出來(lái)。顯示元素鼠標(biāo)移出某個(gè)圖像時(shí)，“text”AP DIV就會(huì)隱藏。隱藏元素鼠標(biāo)移至某個(gè)圖像上，“text”AP DIV中就顯示與圖像相對(duì)應(yīng)的文本。設(shè)置容器的文本鼠標(biāo)單擊某個(gè)圖像時(shí)，“text”AP DIV中顯示的文本的字形、字號(hào)會(huì)改變。改變屬性鼠標(biāo)雙擊某個(gè)圖像時(shí)，“text”AP DIV中顯示的文本的字形、字號(hào)恢復(fù)。改變屬性鼠標(biāo)移至某個(gè)圖像上時(shí)，圖像本身大小恢復(fù)、并逐漸清晰。顯示、遮簾效果鼠標(biāo)移出某個(gè)圖像時(shí)，圖像本身縮短、并逐漸模糊。漸隱、遮簾效果預(yù)備知識(shí)：腳本語(yǔ)言簡(jiǎn)介（1）1. 基本特點(diǎn)：（1）腳本語(yǔ)言

4、介于HTML與C、Java及C#等編程語(yǔ)言之間，它也是一種由程序代碼組成的語(yǔ)言。（2）腳本語(yǔ)言是一種解釋性的語(yǔ)言，它不用像C、Java等編程語(yǔ)言需要編譯成二進(jìn)制代碼、以可執(zhí)行文件的形式存在，腳本語(yǔ)言無(wú)需編譯，可以直接使用，由解釋器來(lái)負(fù)責(zé)解釋。2. JavaScript：（1）JavaScript是一種內(nèi)置支持類型的解釋型腳本語(yǔ)言，其解釋器（稱為JavaScript引擎）為瀏覽器的一部分，能給客戶提供更流暢的瀏覽效果。（2）在Dreamweaver中向頁(yè)面的HTML插入腳本的方法包括使用Dreamweaver命令、直接將腳本插入到HTML文檔中以及寫(xiě)成單獨(dú)的js文件以利于結(jié)構(gòu)和行為的分離。網(wǎng)頁(yè)設(shè)

5、計(jì)與制作實(shí)用教程（第3版）7深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室預(yù)備知識(shí)：腳本語(yǔ)言簡(jiǎn)介（2）2. JavaScript：（3）將JavaScript代碼直接插入到HTML文檔中時(shí)，必須使用HTML標(biāo)簽來(lái)標(biāo)明所嵌入的是JavaScript代碼。這種標(biāo)簽格式為： JavaScript代碼（4）對(duì)于一些復(fù)雜的腳本，為了維護(hù)方便，可以將它們單獨(dú)放在一個(gè)源文件中，并將其命名為*.js。在HTML文檔中可以通過(guò)以下方法來(lái)調(diào)用.js文件：網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）8深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室預(yù)備知識(shí)：行為行為（Behaviors）集成在Dreamweaver中用來(lái)自動(dòng)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互的Jav

6、aScript腳本程序。1.動(dòng)作：預(yù)先編寫(xiě)好的JavaScript腳本，用于執(zhí)行指定的任務(wù)。Dreamweaver中內(nèi)置了一些行為動(dòng)作。網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）9深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室預(yù)備知識(shí)：行為2.事件：可以被 JavaScript 偵測(cè)到的用戶行為，網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。一些常用的事件。（1）Window 事件：window對(duì)象觸發(fā)的事件onLoad、onUnload事件：當(dāng)用戶進(jìn)入或離開(kāi)頁(yè)面時(shí)會(huì)觸發(fā)；onFocus、OnBlur事件：當(dāng)窗口獲得或失去焦點(diǎn)時(shí)會(huì)觸發(fā)；onError事件：當(dāng)錯(cuò)誤發(fā)生時(shí)會(huì)觸發(fā)。（2）鼠標(biāo)事件：由

7、鼠標(biāo)或相似的用戶動(dòng)作觸發(fā)的事件onClick、onDblclick事件：當(dāng)單擊或雙擊鼠標(biāo)時(shí)會(huì)觸發(fā)；onMouseMove、onMouseOver、onMouseOut事件：當(dāng)鼠標(biāo)指針移動(dòng)、移至元素之上或移出元素時(shí)會(huì)觸發(fā)；onMouseUp、onMouseDown事件：當(dāng)松開(kāi)或按下鼠標(biāo)按鈕時(shí)會(huì)觸發(fā)。網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）10深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室制作流程任務(wù)1：使用“打開(kāi)瀏覽器窗口”行為彈出“活動(dòng)通知”頁(yè)面任務(wù)4：使用“設(shè)置容器的文本”行為改變AP DIV中的文本任務(wù)5：使用“改變屬性”行為改變AP DIV中文本的格式任務(wù)3：使用“顯示-隱藏元素”行為改變AP DIV的可見(jiàn)性

8、任務(wù)2：使用“調(diào)用JavaScript”行為關(guān)閉當(dāng)前窗口任務(wù)6：使用“效果”行為改變圖像的顯示方式網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）11深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)1 使用“打開(kāi)瀏覽器窗口”行為彈出“活動(dòng)通知”頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）12深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP：深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）13在打開(kāi)“設(shè)計(jì)”頁(yè)面的同時(shí)，彈出“活動(dòng)通知”頁(yè)面窗口。任務(wù)2 使用“調(diào)用JavaScript”行為關(guān)閉當(dāng)前窗口網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）14深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP：深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)

9、用教程（第3版）15在“活動(dòng)通知”頁(yè)面中，單擊“關(guān)閉窗口”圖像，可以將該頁(yè)面關(guān)閉。任務(wù)3 使用“顯示-隱藏元素”行為改變AP DIV的可見(jiàn)性網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）16深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP：深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）17在“設(shè)計(jì)”頁(yè)面中，當(dāng)鼠標(biāo)移至“im-drupal-4.jpg”圖像上時(shí)，“text”AP DIV（“文字素材”）就顯示出來(lái)；而當(dāng)鼠標(biāo)移出該圖像時(shí)，“text”AP DIV就會(huì)隱藏。用相同的方法，為“WWF_image004.jpg”、“magento_meckey.jpg”、“ShopEx_G8.jpg”、“WW

10、F_image006.jpg”等其它4個(gè)圖像添加相同的“顯示-隱藏元素”行為，達(dá)到相同的效果。任務(wù)4 使用“設(shè)置容器的文本”行為改變AP DIV中的文本網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）18深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP：深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）19在“設(shè)計(jì)”頁(yè)面中，隨著鼠標(biāo)移至不同的圖像上，“text”AP DIV中就顯示與圖像相對(duì)應(yīng)的文本。任務(wù)5 使用“改變屬性”行為改變AP DIV中文本的格式網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）20深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室事件元素ID屬性值說(shuō)明onClickDIV “text”fontStyleital

11、ic字形：斜體onClickDIV “text”fontSize12pt字號(hào)：12ptonDblClickDIV “text”fontStylenormal字形：常規(guī)onDblClickDIV “text”fontSize10pt字號(hào)：10ptSTEP：深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）21在“設(shè)計(jì)”頁(yè)面中，當(dāng)鼠標(biāo)單擊“im-drupal-4.jpg”圖像時(shí)，“text”AP DIV顯示的文本變成斜體、大小為12pt；而當(dāng)鼠標(biāo)雙擊該圖像時(shí)，顯示的文本恢復(fù)正常、大小也變?yōu)?0pt；這需要增加4個(gè)“更改屬性”行為。用相同的方法，為其它4個(gè)圖像添加“改變屬性”行為，可以

12、自行設(shè)計(jì)，嘗試選擇不同的頁(yè)面對(duì)象和相應(yīng)的需要修改的屬性。任務(wù)6 使用“效果”行為改變圖像的顯示方式網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）22深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室事件目標(biāo)元素效果持續(xù)時(shí)間效果詳細(xì)onMouseOverdiv “img3_drupal”500顯示顯示自30%到100%onMouseOverdiv “img3_drupal”500向下遮簾向下遮簾自70%到100%onMouseOutdiv “img3_drupal”1500漸隱漸隱自100%到30%onMouseOutdiv “img3_drupal”1500向上遮簾向上遮簾自100%到70%STEP：深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基

13、礎(chǔ)教研室網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第3版）23在“設(shè)計(jì)”頁(yè)面中，當(dāng)鼠標(biāo)移至“im-drupal-4.jpg”圖像上時(shí)，圖像本身大小恢復(fù)、并逐漸清晰；而當(dāng)鼠標(biāo)移出該圖像時(shí)，圖像本身縮短、并逐漸模糊；這需要增加4個(gè)“效果”行為。用相同的方法，為其它4個(gè)圖像添加“效果”行為，可以自行設(shè)計(jì)，嘗試選擇不同的效果和相應(yīng)的參數(shù)。項(xiàng)目總結(jié)為頁(yè)面元素添加行為以增加網(wǎng)頁(yè)動(dòng)感效果使用“打開(kāi)瀏覽器窗口”行為彈出“活動(dòng)通知”頁(yè)面使用“調(diào)用JavaScript”行為關(guān)閉當(dāng)前窗口使用“顯示-隱藏元素”行為改變AP DIV的可見(jiàn)性使用“設(shè)置容器的文本”行為改變AP DIV中的文本使用“改變屬性”行為改變AP DIV中文本的格式使用“效果”行為改變圖像的顯