網(wǎng)頁交互行為

1、網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)第第9章章 網(wǎng)頁交互行為網(wǎng)頁交互行為第1頁本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)本章概述本章概述l在制作網(wǎng)頁時，為了豐富網(wǎng)頁內(nèi)容，可以在網(wǎng)頁在制作網(wǎng)頁時，為了豐富網(wǎng)頁內(nèi)容，可以在網(wǎng)頁中添加特效與交互。這樣制作出來的網(wǎng)頁，不但中添加特效與交互。這樣制作出來的網(wǎng)頁，不但新穎、有風(fēng)格，而且也能增加網(wǎng)站的訪問量。利新穎、有風(fēng)格，而且也能增加網(wǎng)站的訪問量。利用行為可以高效地實現(xiàn)網(wǎng)頁的互動效果，用行為可以高效地實現(xiàn)網(wǎng)頁的互動效果，jQuery框架也可以實現(xiàn)網(wǎng)頁的交互功能，而表單則是網(wǎng)框架也可以實現(xiàn)網(wǎng)頁的交互功能，而表單則是網(wǎng)

2、頁交互的入口。本章主要介紹行為的概念，頁交互的入口。本章主要介紹行為的概念，jQuery框架及表單的用法等內(nèi)容。框架及表單的用法等內(nèi)容。第2頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)本章的學(xué)習(xí)目標(biāo)本章的學(xué)習(xí)目標(biāo)l了解行為的概念了解行為的概念l掌握行為的應(yīng)用掌握行為的應(yīng)用l了解了解jQuery框架框架l掌握表單的概念掌握表單的概念l了解操作表單的各種標(biāo)簽了解操作表單的各種標(biāo)簽第3頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容9.1網(wǎng)頁行為概述網(wǎng)頁行為概述9.2網(wǎng)頁行為網(wǎng)頁行為9.3 jQuery框架框架9.4制作表單頁面制作表單頁面9.5本章小結(jié)本章小結(jié)第4頁網(wǎng)頁設(shè)計與制作教

3、程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)9.1 網(wǎng)頁行為概述網(wǎng)頁行為概述l行為是由一個事件（行為是由一個事件（Event）所觸發(fā)的動作（）所觸發(fā)的動作（Action），因此又把行為稱為事件的響應(yīng)，是被），因此又把行為稱為事件的響應(yīng)，是被用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種方法。事件是瀏覽器產(chǎn)生的執(zhí)行特定任務(wù)的一種方法。事件是瀏覽器產(chǎn)生的有效信息，也就是訪問者對網(wǎng)頁所做的事情。不有效信息，也就是訪問者對網(wǎng)頁所做的事情。不同的網(wǎng)頁元素定義了不同的事件。例如，在大多同的網(wǎng)頁元素定義了不同的事件。例如，在大多數(shù)瀏覽器中，數(shù)瀏覽器中，onMouseO

4、ver和和onClick是與鏈接是與鏈接關(guān)聯(lián)的事件，而關(guān)聯(lián)的事件，而onLoad是與圖像和文檔的是與圖像和文檔的body部分關(guān)聯(lián)的事件。部分關(guān)聯(lián)的事件。第5頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容9.1網(wǎng)頁行為概述網(wǎng)頁行為概述9.2網(wǎng)頁行為網(wǎng)頁行為9.3 jQuery框架框架9.4制作表單頁面制作表單頁面9.5本章小結(jié)本章小結(jié)第6頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)9.2 網(wǎng)頁行為網(wǎng)頁行為l在在Dreamweaver中，行為是一種可視化特效編輯中，行為是一種可視化特效編輯工具，可以使網(wǎng)頁動態(tài)地響應(yīng)用戶操作、改變當(dāng)工具，可以使網(wǎng)頁動態(tài)地響應(yīng)用戶操作、改變當(dāng)前頁面效

5、果或執(zhí)行某些特定的任務(wù)。前頁面效果或執(zhí)行某些特定的任務(wù)。Dreamweaver的行為是由的行為是由JavaScript代碼預(yù)先編代碼預(yù)先編寫成的代碼。這些代碼可以通過簡單的操作調(diào)用寫成的代碼。這些代碼可以通過簡單的操作調(diào)用并嵌入到網(wǎng)頁中，通過一些特定的事件觸發(fā)代碼并嵌入到網(wǎng)頁中，通過一些特定的事件觸發(fā)代碼執(zhí)行。執(zhí)行。第7頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)附加行為附加行為l行為可以附加到整個文檔，即附加行為可以附加到整個文檔，即附加到到標(biāo)簽，還可以附加到文標(biāo)簽，還可以附加到文字、圖像、字、圖像、AP元素、超鏈接、表元素、超鏈接、表單元素或多種其他單元素或多種其他HTML元素中的元素中

6、的任何一種。任何一種。l添加行為的方法添加行為的方法l修改行為修改行為第8頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)附加行為附加行為l行為應(yīng)用實例行為應(yīng)用實例網(wǎng)頁加載時彈出公網(wǎng)頁加載時彈出公告頁告頁第9頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)內(nèi)置行為內(nèi)置行為lDreamweaver CC內(nèi)置了許多行為動作，下面說內(nèi)置了許多行為動作，下面說明一些動作的功能。明一些動作的功能。第10頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)行為的應(yīng)用行為的應(yīng)用l標(biāo)簽檢查器面板與行為標(biāo)簽檢查器面板與行為第11頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)行為的應(yīng)用行為的應(yīng)用l文本信息行為文本信息行為

7、設(shè)置文本域文字設(shè)置文本域文字設(shè)置容器文本設(shè)置容器文本設(shè)置狀態(tài)欄文本設(shè)置狀態(tài)欄文本第12頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)行為的應(yīng)用行為的應(yīng)用l窗口信息行為窗口信息行為窗口信息行為也是一種比較常見的瀏覽器特效。該特窗口信息行為也是一種比較常見的瀏覽器特效。該特效主要包括兩種窗口信息，即彈出對話框和彈出窗口。效主要包括兩種窗口信息，即彈出對話框和彈出窗口?！皬棾鲂畔棾鲂畔ⅰ毙袨橛糜趶棾鲆粋€顯示預(yù)設(shè)信息的行為用于彈出一個顯示預(yù)設(shè)信息的JavaScript警告框。由于該警告框只有一個警告框。由于該警告框只有一個 “確定確定”按鈕，所以使用此行為可以為用戶提供信息，但不能按鈕，所以使用此行

8、為可以為用戶提供信息，但不能提供選擇操作。提供選擇操作。使用使用 “打開瀏覽器窗口打開瀏覽器窗口”行為可以在一個新的窗口中行為可以在一個新的窗口中打開頁面。同時，還可以指定該新窗口的屬性、特性打開頁面。同時，還可以指定該新窗口的屬性、特性和名稱。和名稱。第13頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)行為的應(yīng)用行為的應(yīng)用l圖像效果行為圖像效果行為 交換圖像交換圖像 交換圖像行為是通過更改交換圖像行為是通過更改標(biāo)簽的標(biāo)簽的src屬性將一個圖像屬性將一個圖像和另一個圖像進行交換，或者交換多個圖像。和另一個圖像進行交換，或者交換多個圖像。第14頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)行為的

9、應(yīng)用行為的應(yīng)用l圖像效果行為圖像效果行為 增大增大/收縮收縮Scale（增大（增大/收縮）行為可以將網(wǎng)頁中指定的對象按收縮）行為可以將網(wǎng)頁中指定的對象按照百分比放大或縮小。并且，在用事件觸發(fā)該行為后，照百分比放大或縮小。并且，在用事件觸發(fā)該行為后，其效果是逐漸進行增大或收縮的。其效果是逐漸進行增大或收縮的。第15頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)行為的應(yīng)用行為的應(yīng)用l圖像效果行為圖像效果行為 膨脹膨脹/擠壓擠壓 為網(wǎng)頁對象設(shè)置為網(wǎng)頁對象設(shè)置puff（膨脹（膨脹/擠壓）行為可以將網(wǎng)頁對象縮擠壓）行為可以將網(wǎng)頁對象縮放至消失。放至消失。第16頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基

10、礎(chǔ)行為的應(yīng)用行為的應(yīng)用l效果行為效果行為 改變屬性改變屬性 “改變屬性改變屬性”行為可以用來動態(tài)地改變某個網(wǎng)頁對象的屬性。行為可以用來動態(tài)地改變某個網(wǎng)頁對象的屬性。第17頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)行為的應(yīng)用行為的應(yīng)用l效果行為效果行為 拖動拖動AP元素元素 “拖動拖動AP元素元素”行為是一種交互性的行為。其作用是創(chuàng)建行為是一種交互性的行為。其作用是創(chuàng)建可拖動的可拖動的AP元素。使用此行為可創(chuàng)建拼板游戲、滑塊控件元素。使用此行為可創(chuàng)建拼板游戲、滑塊控件和其它可移動的界面元素。和其它可移動的界面元素。第18頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)行為的應(yīng)用行為的應(yīng)用l效果

11、行為效果行為 顯示顯示-隱藏元素隱藏元素 “顯示顯示-隱藏元素隱藏元素”行為也是一種交互行為。為行為也是一種交互行為。為AP元素設(shè)置元素設(shè)置該行為后，可以通過單擊超鏈接、圖像、按鈕等對象控制該行為后，可以通過單擊超鏈接、圖像、按鈕等對象控制AP元素的顯示或隱藏。元素的顯示或隱藏。第19頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容9.1網(wǎng)頁行為概述網(wǎng)頁行為概述9.2網(wǎng)頁行為網(wǎng)頁行為9.3 jQuery框架框架9.4制作表單頁面制作表單頁面9.5本章小結(jié)本章小結(jié)第20頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)9.3 jQuery框架框架ljQuery框架是一個框架是一個Jav

12、aScript庫，用來構(gòu)建能夠庫，用來構(gòu)建能夠向站點訪問者提供更豐富體驗的向站點訪問者提供更豐富體驗的Web頁。有了頁。有了jQuery，就可以使用，就可以使用HTML、CSS和極少量的和極少量的JavaScript將將XML數(shù)據(jù)合并到數(shù)據(jù)合并到HTML文檔中，還文檔中，還可以創(chuàng)建可以創(chuàng)建jQuery部件（如折疊部件和選項卡部件部件（如折疊部件和選項卡部件），向各種頁面元素中添加不同種類的效果。在），向各種頁面元素中添加不同種類的效果。在設(shè)計上，設(shè)計上，jQuery框架的標(biāo)記非常簡單且便于那些框架的標(biāo)記非常簡單且便于那些具有具有HTML、CSS和和JavaScript基礎(chǔ)知識的用戶基礎(chǔ)知識的用

13、戶使用。使用。第21頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)jQuery效果效果ljQuery效果具有視覺增效果具有視覺增強功能，可以將它們應(yīng)強功能，可以將它們應(yīng)用于使用用于使用JavaScript的的HTML頁面上幾乎所有頁面上幾乎所有的元素。效果通常用于的元素。效果通常用于在一段時間內(nèi)高亮顯示在一段時間內(nèi)高亮顯示信息，創(chuàng)建動畫過渡或信息，創(chuàng)建動畫過渡或者以可視方式修改頁面者以可視方式修改頁面元素?？梢詫⑿Ч苯釉?。可以將效果直接應(yīng)用于應(yīng)用于HTML元素，而元素，而無需其他自定義標(biāo)簽。無需其他自定義標(biāo)簽。第22頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)jQuery部件部件ljQu

14、ery Widget（部件）是以（部件）是以 DHTML 和和 JavaScript 等語言編寫的小型等語言編寫的小型 Web 應(yīng)用程序。應(yīng)用程序。在利用在利用Dreamweaver制作網(wǎng)頁時，可以在網(wǎng)頁內(nèi)制作網(wǎng)頁時，可以在網(wǎng)頁內(nèi)插入和執(zhí)行，然后設(shè)置部件的樣式。此外，插入和執(zhí)行，然后設(shè)置部件的樣式。此外，Web Widget 幫助提供了一種將桌面體驗復(fù)制到網(wǎng)頁幫助提供了一種將桌面體驗復(fù)制到網(wǎng)頁上的方法。上的方法。l插入插入jQuery部件部件第23頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)jQuery部件部件l選擇和編輯選擇和編輯jQuery部件部件第24頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)

15、計與制作基礎(chǔ)jQuery部件部件l設(shè)置設(shè)置jQuery部件的樣式部件的樣式第25頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容9.1網(wǎng)頁行為概述網(wǎng)頁行為概述9.2網(wǎng)頁行為網(wǎng)頁行為9.3 jQuery框架框架9.4制作表單頁面制作表單頁面9.5本章小結(jié)本章小結(jié)第26頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)9.4 制作表單頁面制作表單頁面l互聯(lián)網(wǎng)向瀏覽者提供豐富的資源，在交互式的網(wǎng)互聯(lián)網(wǎng)向瀏覽者提供豐富的資源，在交互式的網(wǎng)絡(luò)中，表單是一個不可缺少的元素，是交互的一絡(luò)中，表單是一個不可缺少的元素，是交互的一個入口。只要有交互出現(xiàn)的地方，就會有表單。個入口。只要有交互出現(xiàn)的地方，

16、就會有表單。l表單的概念表單的概念l創(chuàng)建表單創(chuàng)建表單l創(chuàng)建表單對象創(chuàng)建表單對象l表單的應(yīng)用表單的應(yīng)用第27頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)表單的概念表單的概念l表單是網(wǎng)頁上用于輸入信息的區(qū)域，例如，向文表單是網(wǎng)頁上用于輸入信息的區(qū)域，例如，向文本框中輸入文字或數(shù)字；在方框中打勾；使用單本框中輸入文字或數(shù)字；在方框中打勾；使用單選按鈕選中一個選項；或從一個列表中選擇一個選按鈕選中一個選項；或從一個列表中選擇一個選項等。選項等。表單標(biāo)簽表單標(biāo)簽表單域表單域表單按鈕表單按鈕第28頁網(wǎng)易免費郵箱注冊表單網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)創(chuàng)建表單創(chuàng)建表單l表單相當(dāng)于一個容器，其容

17、納的是承載數(shù)據(jù)的表單對象，表單相當(dāng)于一個容器，其容納的是承載數(shù)據(jù)的表單對象，如文本框、復(fù)選框等，因此一個完整的表單至少包括表單如文本框、復(fù)選框等，因此一個完整的表單至少包括表單及表單對象，二者缺一不可。及表單對象，二者缺一不可。l表單的屬性表單的屬性l插入表單域插入表單域第29頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)創(chuàng)建表單對象創(chuàng)建表單對象l插入表單對象插入表單對象 在在Dreamweaver CC中提供了多種表單對象類型，有中提供了多種表單對象類型，有“文文本本”對象、對象、“電子郵件電子郵件”對象、對象、“密碼密碼”對象等。下面以文對象等。下面以文本域?qū)ο笳f明插入表單對象的方法。本域

18、對象說明插入表單對象的方法。第30頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)創(chuàng)建表單對象創(chuàng)建表單對象l插入單選按鈕插入單選按鈕 單選按鈕是指從一組選項中只能選擇一個選項。單選按鈕是指從一組選項中只能選擇一個選項。l插入復(fù)選框插入復(fù)選框 復(fù)選框是指從一組選項中選擇多個選項。復(fù)選框是指從一組選項中選擇多個選項。第31頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)創(chuàng)建表單對象創(chuàng)建表單對象l插入列表插入列表/菜單菜單 列表和菜單可以在有限的空間內(nèi)為用戶提供更多的選項。列列表和菜單可以在有限的空間內(nèi)為用戶提供更多的選項。列表在滾動條中顯示選項值，并可允許用戶在列表中選擇多個表在滾動條中顯示選項值，并

19、可允許用戶在列表中選擇多個選項。菜單在下拉式菜單中顯示選項值，只允許用戶選擇一選項。菜單在下拉式菜單中顯示選項值，只允許用戶選擇一個選項。個選項。第32頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)創(chuàng)建表單對象創(chuàng)建表單對象l插入跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單 跳轉(zhuǎn)菜單與菜單跳轉(zhuǎn)菜單與菜單/列表對象有所不同，跳轉(zhuǎn)菜單的每一個列列表對象有所不同，跳轉(zhuǎn)菜單的每一個列表項目都鏈接到一個表項目都鏈接到一個URL地址。一般常用于友情鏈接。地址。一般常用于友情鏈接。第33頁網(wǎng)頁設(shè)計與制作教程第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)表單的應(yīng)用表單的應(yīng)用l插入其他常用表單域插入其他常用表單域 插入文件域插入文件域：文件域的作用是用戶在表單中選擇文件，然后文件域的作用是用戶在表單中選擇文件，然后將選中的文件內(nèi)容發(fā)送到服務(wù)器。將選中的文件內(nèi)容發(fā)送到服務(wù)器。 插入隱藏域插入隱藏域：隱藏域通常用來在表單之間傳遞數(shù)據(jù)，一般只隱藏域通常用來在表單之間傳遞數(shù)據(jù)，一般只用于腳本編程。用于腳本編程。 插入按鈕插入按鈕：按鈕的作用是控制表單操作。按鈕有提交按鈕和按鈕的作用是控制表單操作。按鈕有提交按鈕和重置按鈕之分。重置按鈕之分。 插入圖像按鈕插入圖像按鈕：圖像按鈕實質(zhì)上是以圖像形式顯示的按鈕，圖像按鈕實質(zhì)上是以圖像形式顯示的按鈕，例如例如“提交提交”或或“重置重置”按鈕。按鈕。第34頁網(wǎng)