網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 第 9章 網(wǎng)頁交互行為 第 1頁 本章概述 本章的學(xué)習(xí)目標(biāo) 主要內(nèi)容 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 本章概述 在制作網(wǎng)頁時(shí)，為了豐富網(wǎng)頁內(nèi)容，可以在網(wǎng)頁中添加特效與交互。這樣制作出來的網(wǎng)頁，不但新穎、有風(fēng)格，而且也能增加網(wǎng)站的訪問量。利用行為可以高效地實(shí)現(xiàn)網(wǎng)頁的互動(dòng)效果， 表單則是網(wǎng)頁交互的入口。本章主要介紹行為的概念， 第 2頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 本章的學(xué)習(xí)目標(biāo) 了解行為的概念 掌握行為的應(yīng)用 了解 掌握表單的概念 了解操作表單的各種標(biāo)簽 第 3頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 頁行為概述 頁行為 作表單頁面 章小結(jié) 第 4頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 網(wǎng)頁行為概述 行為是由一個(gè)事件（ 觸發(fā)的動(dòng)作（因此又把行為稱為事件的響應(yīng)，是被用來動(dòng)態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種方法。事件是瀏覽器產(chǎn)生的有效信息，也就是訪問者對(duì)網(wǎng)頁所做的事情。不同的網(wǎng)頁元素定義了不同的事件。例如，在大多數(shù)瀏覽器中， 第 5頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 頁行為概述 頁行為 作表單頁面 章小結(jié) 第 6頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 網(wǎng)頁行為 在 為是一種可視化特效編輯工具，可以使網(wǎng)頁動(dòng)態(tài)地響應(yīng)用戶操作、改變當(dāng)前頁面效果或執(zhí)行某些特定的任務(wù)。些代碼可以通過簡單的操作調(diào)用并嵌入到網(wǎng)頁中，通過一些特定的事件觸發(fā)代碼執(zhí)行。 第 7頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 附加行為 行為可以附加到整個(gè)文檔，即附加到 標(biāo)簽，還可以附加到文字、圖像、 鏈接、表單元素或多種其他 添加行為的方法 修改行為 第 8頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 附加行為 行為應(yīng)用實(shí)例 網(wǎng)頁加載時(shí)彈出公告頁 第 9頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 內(nèi)置行為 面說明一些動(dòng)作的功能。 第 10頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 標(biāo)簽檢查器面板與行為 第 11頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 文本信息行為 設(shè)置文本域文字 設(shè)置容器文本 設(shè)置狀態(tài)欄文本 第 12頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 窗口信息行為 窗口信息行為也是一種比較常見的瀏覽器特效。該特效主要包括兩種窗口信息，即彈出對(duì)話框和彈出窗口。 “彈出信息”行為用于彈出一個(gè)顯示預(yù)設(shè)信息的于該警告框只有一個(gè) “確定”按鈕，所以使用此行為可以為用戶提供信息，但不能提供選擇操作。 使用 “打開瀏覽器窗口”行為可以在一個(gè)新的窗口中打開頁面。同時(shí)，還可以指定該新窗口的屬性、特性和名稱。 第 13頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 圖像效果行為 交換圖像 交換圖像行為是通過更改 標(biāo)簽的 者交換多個(gè)圖像。 第 14頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 圖像效果行為 增大 /收縮 大 /收縮）行為可以將網(wǎng)頁中指定的對(duì)象按照百分比放大或縮小。并且，在用事件觸發(fā)該行為后，其效果是逐漸進(jìn)行增大或收縮的。 第 15頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 圖像效果行為 膨脹 /擠壓 為網(wǎng)頁對(duì)象設(shè)置 脹 /擠壓）行為可以將網(wǎng)頁對(duì)象縮放至消失。 第 16頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 效果行為 改變屬性 “改變屬性”行為可以用來動(dòng)態(tài)地改變某個(gè)網(wǎng)頁對(duì)象的屬性。 第 17頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 效果行為 拖動(dòng) “拖動(dòng) 為是一種交互性的行為。其作用是創(chuàng)建可拖動(dòng)的 用此行為可創(chuàng)建拼板游戲、滑塊控件和其它可移動(dòng)的界面元素。 第 18頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 行為的應(yīng)用 效果行為 顯示 “顯示 為也是一種交互行為。為 以通過單擊超鏈接、圖像、按鈕等對(duì)象控制 第 19頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 頁行為概述 頁行為 作表單頁面 章小結(jié) 第 20頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 來構(gòu)建能夠向站點(diǎn)訪問者提供更豐富體驗(yàn)的 了可以使用 可以創(chuàng)建 折疊部件和選項(xiàng)卡部件），向各種頁面元素中添加不同種類的效果。在設(shè)計(jì)上， 第 21頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 以將它們應(yīng)用于使用 果通常用于在一段時(shí)間內(nèi)高亮顯示信息，創(chuàng)建動(dòng)畫過渡或者以可視方式修改頁面元素?？梢詫⑿Ч苯討?yīng)用于 無需其他自定義標(biāo)簽。 第 22頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 件）是以 語言編寫的小型 用程序。在利用 以在網(wǎng)頁內(nèi)插入和執(zhí)行，然后設(shè)置部件的樣式。此外， 助提供了一種將桌面體驗(yàn)復(fù)制到網(wǎng)頁上的方法。 插入 第 23頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 選擇和編輯 第 24頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 設(shè)置 第 25頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 頁行為概述 頁行為 作表單頁面 章小結(jié) 第 26頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 制作表單頁面 互聯(lián)網(wǎng)向?yàn)g覽者提供豐富的資源，在交互式的網(wǎng)絡(luò)中，表單是一個(gè)不可缺少的元素，是交互的一個(gè)入口。只要有交互出現(xiàn)的地方，就會(huì)有表單。 表單的概念 創(chuàng)建表單 創(chuàng)建表單對(duì)象 表單的應(yīng)用 第 27頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 表單的概念 表單是網(wǎng)頁上用于輸入信息的區(qū)域，例如，向文本框中輸入文字或數(shù)字；在方框中打勾；使用單選按鈕選中一個(gè)選項(xiàng)；或從一個(gè)列表中選擇一個(gè)選項(xiàng)等。 表單標(biāo)簽 表單域 表單按鈕 第 28頁 網(wǎng)易免費(fèi)郵箱注冊(cè)表單 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 創(chuàng)建表單 表單相當(dāng)于一個(gè)容器，其容納的是承載數(shù)據(jù)的表單對(duì)象，如文本框、復(fù)選框等，因此一個(gè)完整的表單至少包括表單及表單對(duì)象，二者缺一不可。 表單的屬性 插入表單域 第 29頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 創(chuàng)建表單對(duì)象 插入表單對(duì)象 在 “文本”對(duì)象、“電子郵件”對(duì)象、“密碼”對(duì)象等。下面以文本域?qū)ο笳f明插入表單對(duì)象的方法。 第 30頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 創(chuàng)建表單對(duì)象 插入單選按鈕 單選按鈕是指從一組選項(xiàng)中只能選擇一個(gè)選項(xiàng)。 插入復(fù)選框 復(fù)選框是指從一組選項(xiàng)中選擇多個(gè)選項(xiàng)。 第 31頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 創(chuàng)建表單對(duì)象 插入列表 /菜單 列表和菜單可以在有限的空間內(nèi)為用戶提供更多的選項(xiàng)。列表在滾動(dòng)條中顯示選項(xiàng)值，并可允許用戶在列表中選擇多個(gè)選項(xiàng)。菜單在下拉式菜單中顯示選項(xiàng)值，只允許用戶選擇一個(gè)選項(xiàng)。 第 32頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 創(chuàng)建表單對(duì)象 插入跳轉(zhuǎn)菜單 跳轉(zhuǎn)菜單與菜單 /列表對(duì)象有所不同，跳轉(zhuǎn)菜單的每一個(gè)列表項(xiàng)目都鏈接到一個(gè) 般常用于友情鏈接。 第 33頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 表單的應(yīng)用 插入其他常用表單域 插入文件域 ： 文件域的作用是用戶在表單中選擇文件，然后將選中的文件內(nèi)容發(fā)送到服務(wù)器。 插入隱藏域 ： 隱藏域通常用來在表單之間傳遞數(shù)據(jù)，一般只用于腳本編程。 插入按鈕 ： 按鈕的作用是控制表單操作。按鈕有提交按鈕和重置按鈕之分。 插入圖像按鈕 ： 圖像按鈕實(shí)質(zhì)上是以圖像形式顯示的按鈕，例如“提交”或“重置”按鈕。 第 34頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 表單的應(yīng)用 表單應(yīng)用實(shí)例 完成會(huì)員注冊(cè)頁面，練習(xí)表單及表單的各種對(duì)象文本框、密碼框、單選按鈕組、復(fù)選框、下拉列表和菜單、提交按鈕等的使用。 第 35頁 網(wǎng)頁設(shè)計(jì)與制作教程 第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 主要內(nèi)容 頁行為概述 頁行為 作表單頁面 章小結(jié) 第 36頁 網(wǎng)頁設(shè)計(jì)與制作