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

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

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

3、drupal-4.jpg”等5個圖像鼠標移至某個圖像上時，“text”AP DIV就顯示出來。顯示元素鼠標移出某個圖像時，“text”AP DIV就會隱藏。隱藏元素鼠標移至某個圖像上，“text”AP DIV中就顯示與圖像相對應的文本。設置容器的文本鼠標單擊某個圖像時，“text”AP DIV中顯示的文本的字形、字號會改變。改變屬性鼠標雙擊某個圖像時，“text”AP DIV中顯示的文本的字形、字號恢復。改變屬性鼠標移至某個圖像上時，圖像本身大小恢復、并逐漸清晰。顯示、遮簾效果鼠標移出某個圖像時，圖像本身縮短、并逐漸模糊。漸隱、遮簾效果預備知識：腳本語言簡介（1）1. 基本特點：（1）腳本語言

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

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

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

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

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

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

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

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

12、自行設計，嘗試選擇不同的頁面對象和相應的需要修改的屬性。任務6 使用“效果”行為改變圖像的顯示方式網(wǎng)頁設計與制作實用教程（第3版）22深圳職業(yè)技術學院計算機基礎教研室事件目標元素效果持續(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è)技術學院計算機基

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