Dreamweaver-CC第5章-表單和行為課件

1、網(wǎng)頁制作案例教程第5章 表單和行為了解表單和行為的基本概念。掌握插入和設置表單的基本方法。了解常用事件和常用行為。掌握添加和設置行為的基本方法。學習目標5.1.1 認識表單5.1 使用表單 表單提供了從用戶那里收集信息的方法。表單通常由兩部分組成，一部分是用來搜集數(shù)據(jù)的表單頁面，另一部分是用來處理數(shù)據(jù)的應用程序。表單輸入類型稱為表單對象，表單對象是允許用戶輸入數(shù)據(jù)的機制。表單對象名稱可以使用字母、數(shù)字、字符和下劃線的任意組合，但不能包含空格或特殊字符。使用Dreamweaver CC 2017可以制作表單頁面，在表單頁面上插入表單對象通常有兩種方法，一種是選擇菜單命令【插入】/【表單】中的相應

2、選項，另一種是在【插入】面板的【表單】類別中單擊相應按鈕。 5.1.2 插入和設置表單域5.1 使用表單 選擇菜單命令【插入】/【表單】/【表單】，在頁面中插入一個表單。在【設計】視圖中，表單輪廓線以紅色虛線表示?？筛鶕?jù)需要直接在【屬性】面板中設置其屬性。 5.1.3 插入文本類表單對象5.1 使用表單 一、文本。文本（Text）是可以輸入單行文本的表單對象，可選擇菜單命令【插入】/【表單】/【文本】來插入文本表單對象。 5.1.3 插入文本類表單對象5.1 使用表單 二、電子郵件。電子郵件（Email）是用于輸入電子郵件地址列表的表單對象，可選擇菜單命令【插入】/【表單】/【電子郵件】來插入

3、電子郵件表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 三、密碼。密碼（Password）是用于輸入電子郵件地址列表的表單對象，可選擇菜單命令【插入】/【表單】/【密碼】來插入密碼表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 四、Url。地址（Url）是用于輸入絕對Url的表單對象，可選擇菜單命令【插入】/【表單】/【Url】來插入地址表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 五、Tel。電話（Tel）是用于輸入Tel的表單對象，可選擇菜單命令【插入】/【表單】/【T

4、el】來插入電話表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 六、搜索。搜索（Search）是用于輸入一個或多個搜索詞的表單對象，可選擇菜單命令【插入】/【表單】/【搜索】來插入搜索表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 七、數(shù)字。數(shù)字（Number）是用于僅輸入數(shù)字的表單對象，可選擇菜單命令【插入】/【表單】/【數(shù)字】來插入數(shù)字表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 八、范圍。范圍（Range）是用于輸入僅包含某個數(shù)字范圍內(nèi)值的表單對象，可選擇菜單命令【插

5、入】/【表單】/【范圍】來插入范圍表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 九、顏色。顏色（Color）是用于輸入僅包含顏色值的表單對象，可選擇菜單命令【插入】/【表單】/【顏色】來插入顏色表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 十、月。月（Month）是供用戶輸入月和年的表單對象，可選擇菜單命令【插入】/【表單】/【月】來插入月表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 十一、周。周（Week）是供用戶輸入周的表單對象，可選擇菜單命令【插入】/【表單】/【

6、周】來插入周表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 十二、日期。日期（Date）是供用戶輸入日期（年月日）的表單對象，可選擇菜單命令【插入】/【表單】/【日期】來插入日期表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 十三、時間。時間（Time）是供用戶輸入時間（時分秒）的表單對象，可選擇菜單命令【插入】/【表單】/【時間】來插入時間表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 十四、日期時間。日期時間（datetime）是供用戶輸入日期時間（年月日時分秒，帶時區(qū)）

7、的表單對象，可選擇菜單命令【插入】/【表單】/【日期時間】來插入日期時間表單對象，并可根據(jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 十五、日期時間（當?shù)兀Ｈ掌跁r間（當?shù)兀╠atetime-local）是供用戶輸入當?shù)厝掌跁r間（年月日時分秒，無時區(qū)）的表單對象，可選擇菜單命令【插入】/【表單】/【日期時間（當?shù)兀縼聿迦肴掌跁r間（當?shù)兀┍韱螌ο?，并可根?jù)需要設置其相關屬性。 5.1.3 插入文本類表單對象5.1 使用表單 十六、文本區(qū)域。文本區(qū)域（Textarea）是可以輸入多行文本的表單對象，可選擇菜單命令【插入】/【表單】/【文本區(qū)域】來插入文本區(qū)域表單對象，

8、并可根據(jù)需要設置其相關屬性。 5.1.4 插入選擇類表單對象5.1 使用表單 一、單選按鈕。單選按鈕（radio）主要用于標記一個選項是否被選中，它只允許用戶從所提供的選項中選擇唯一答案。選擇菜單命令【插入】/【表單】/【單選按鈕】，將在文檔中插入一個單選按鈕表單對象，反復執(zhí)行該操作可插入多個單選按鈕。 5.1.4 插入選擇類表單對象5.1 使用表單 二、單選按鈕組。選擇菜單命令【插入】/【表單】/【單選按鈕】，一次只能插入一個單選按鈕。在實際應用中，單選按鈕至少要有兩個或者更多，因此可以選擇菜單命令【插入】/【表單】/【單選按鈕組】打開【單選按鈕組】對話框，經(jīng)過設置一次插入多個單選按鈕。 5

9、.1.4 插入選擇類表單對象5.1 使用表單 三、復選框。復選框（checkbox）常被用于有多個選項可以同時被選擇的情況。每個復選框都是獨立的，必須有一個唯一的名稱。選擇菜單命令【插入】/【表單】/【復選框】，將在文檔中插入一個復選框，反復執(zhí)行該操作將插入多個復選框。 5.1.4 插入選擇類表單對象5.1 使用表單 四、復選框組。選擇菜單命令【插入】/【表單】/【復選框】命令，一次只能插入一個復選框。在實際應用中，復選框通常是多個同時使用，因此可以選擇菜單命令【插入】/【表單】/【復選框組】命令一次插入多個復選框。 5.1.4 插入選擇類表單對象5.1 使用表單 五、選擇。選擇（Select

10、）可以顯示一個包含有多個選項的可滾動列表，在列表中可以選擇需要的項目。選擇菜單命令【插入】/【表單】/【選擇】，將在文檔中插入一個選擇域。 5.1.5 插入按鈕類表單對象5.1 使用表單 一、按鈕。按鈕（Button）是指網(wǎng)頁文件中表示按鈕時用到的表單對象。選擇菜單命令【插入】/【表單】/【按鈕】可插入一個普通按鈕。 5.1.5 插入按鈕類表單對象5.1 使用表單 二、“提交”按鈕。使用“提交”按鈕（Submit Button）可以將表單數(shù)據(jù)提交到服務器。選擇菜單命令【插入】/【表單】/【“提交”按鈕】，將插入一個“提交”按鈕。 5.1.5 插入按鈕類表單對象5.1 使用表單 三、重置”按鈕。

11、使用“重置”按鈕（Reset Button）可以刪除表單中輸入或設置的所有內(nèi)容，使其恢復到初始狀態(tài)。選擇菜單命令【插入】/【表單】/【“重置”按鈕】，將插入一個“重置”按鈕。 5.1.5 插入按鈕類表單對象5.1 使用表單 四、圖像按鈕。圖像按鈕（Image Button）用于在表單中插入一幅圖像從而生成圖形化按鈕，在網(wǎng)頁中使用圖形化按鈕要比單純使用按鈕美觀得多。選擇菜單命令【插入】/【表單】/【圖像按鈕】。 5.1.5 插入按鈕類表單對象5.1 使用表單 五、隱藏。隱藏（hidden）表單對象的作用主要是用來儲存并提交非用戶輸入信息，如注冊時間、認證號等，這些都需要使用JavaScript、

12、ASP等源代碼來編寫，隱藏域在網(wǎng)頁中一般不顯現(xiàn)。選擇菜單命令【插入】/【表單】/【隱藏】，將插入一個隱藏域。 5.1.5 插入按鈕類表單對象5.1 使用表單 六、文件。文件（File）表單對象的作用是允許用戶瀏覽并選擇本地計算機上的文件，以便將該文件作為表單數(shù)據(jù)進行上傳。但真正上傳文件還需要相應的上傳組件作支持，文件域僅僅是供用戶瀏覽并選擇文件使用，并不具有上傳功能。 5.1.6 插入域集和標簽5.1 使用表單 一、域集。使用域集可將表單內(nèi)的相關元素進行分組，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D效果等。首先選中要分組的表單對象，然后選擇菜單命令【插入】/【表單】/【域集】。

13、 5.1.6 插入域集和標簽5.1 使用表單 二、標簽。標簽為input等表單對象定義標注（標記）。標簽元素不會向用戶呈現(xiàn)任何特殊效果。但它為鼠標用戶改進了可用性。在瀏覽器中如果在標簽元素內(nèi)點擊文本，就會觸發(fā)此控件。也就是說，當用戶單擊表單對象前面的標簽文本時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽文本對應的表單對象上。選擇菜單命令【插入】/【表單】/【標簽】可以插入標簽。 5.2.1 認識行為5.2 使用行為 行為的基本元素有兩個：事件和動作，事件是觸發(fā)動作的原因，動作是事件觸發(fā)后要實現(xiàn)的效果。行為是事件和事件觸發(fā)的動作的組合，是用來動態(tài)響應用戶操作、改變當前頁面效果或是執(zhí)行特定任務的一種方法。 事

14、件是由瀏覽器生成的消息，它提示該頁的瀏覽者已執(zhí)行了某種操作。例如，當瀏覽者將鼠標光標移到某個鏈接上時，瀏覽器將為該鏈接生成一個“onMouseOver”事件，然后瀏覽器檢查在當前頁面中是否應該調(diào)用某段JavaScript代碼進行響應。不同的頁面元素定義不同的事件。例如，在大多數(shù)瀏覽器中，“onMouseOver”和“onClick”是與超級鏈接關聯(lián)的事件，而“onLoad”是與圖像和文檔的body部分關聯(lián)的事件。 動作是一段預先編寫的JavaScript代碼，可用于執(zhí)行諸如以下的任務：打開瀏覽器窗口、顯示或隱藏AP元素、轉(zhuǎn)到URL等。在將行為附加到某個頁面元素后，當該元素的某個事件發(fā)生時，行為

15、即會調(diào)用與這一事件關聯(lián)的動作。例如，如果將“彈出信息”動作附加到一個鏈接上，并指定它將由“onMouseOver”事件觸發(fā)，則只要某人將鼠標光標放到該鏈接上，就會彈出相應的信息。一個事件也可以觸發(fā)許多動作，用戶可以定義它們執(zhí)行的順序。 5.2.2 添加行為5.2 使用行為 一、域集。使用域集可將表單內(nèi)的相關元素進行分組，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D效果等。首先選中要分組的表單對象，然后選擇菜單命令【插入】/【表單】/【域集】。(1)在頁面上選擇一個對象。(2)選擇菜單命令【窗口】/【行為】，打開【行為】面板。 5.2.2 添加行為5.2 使用行為 (3)單擊+按鈕彈

16、出行為下拉菜單并從中選擇一個要添加的行為。 (4)當選擇某個行為時，如【彈出信息】，將打開一個對話框顯示相關參數(shù)和說明，根據(jù)要求進行參數(shù)設置。5.2.2 添加行為5.2 使用行為 (5)在添加的行為中觸發(fā)動作的默認事件顯示在【行為】面板的【事件】列表中，如果默認顯示的事件不是所預想的事件，可從【事件】下拉列表中選擇適合的事件。 (6)保存文件后在瀏覽器中預覽，當鼠標停留在文本上時，將彈出一個消息提示框。5.2.3 常用行為5.2 使用行為 一、彈出信息?！緩棾鲂畔ⅰ啃袨轱@示一個包含指定消息的提示框。當從一個文檔切換到另一個文檔或單擊特定鏈接或圖像時，想給用戶傳達特定信息，可以使用此功能。 5.

17、2.3 常用行為5.2 使用行為 二、調(diào)用JavaScript?！菊{(diào)用JavaScript】行為能夠在事件發(fā)生時執(zhí)行自定義的函數(shù)或JavaScript代碼行。用戶可以自己編寫JavaScript，也可以使用Web上各種免費的JavaScript庫中提供的代碼。當單擊頁面中帶有空鏈接的“關閉窗口”文本時關閉網(wǎng)頁。 5.2.3 常用行為5.2 使用行為 三、改變屬性?！靖淖儗傩浴啃袨橛脕砀淖兙W(wǎng)頁元素的屬性值，如文本大小和字體、背景色、圖像的來源以及表單的執(zhí)行等。當鼠標光標經(jīng)過含有圖像的Div標簽時，其邊框顏色由藍色變成紅色，當鼠標光標離開時其邊框顏色恢復為原來的藍色。（1）插入Div并設置CSS屬

18、性。 5.2.3 常用行為5.2 使用行為 （2）在Div標簽中插入圖像“tu01.jpg”。 （3）選中Div標簽，在【行為】面板中添加【改變屬性】行為。將觸發(fā)事件設置為“onMouseOver”。 5.2.3 常用行為5.2 使用行為 （4）給Div標簽再添加一個【改變屬性】行為，邊框顏色設置為藍色“#0000FF”，觸發(fā)事件設置為“onMouseOut”。 5.2.3 常用行為5.2 使用行為 （5）保存文檔并預覽網(wǎng)頁。 5.2.3 常用行為5.2 使用行為 四、交換圖像。【交換圖像】行為可以將一個圖像替換為另一個圖像，這是通過改變圖像的“src”屬性來實現(xiàn)的。雖然也可以通過為圖像添加【改變屬性】行為來改變圖像的“src”屬性，但是【交換圖像】行為更加復雜一些，可以使用這個行為來創(chuàng)建翻轉(zhuǎn)的按鈕及其他圖像效果（包括同時替換多個圖像）。當鼠標光標經(jīng)過圖像時，圖像變換為另一幅圖像，當鼠標光標離開時恢復為原來的圖像。 5.2.3 常用行為5.2 使用行為 預覽網(wǎng)頁。 5.2.3 常用行為5.2 使用行為 五、恢復交換圖像?！净謴徒粨Q圖像】行為就是將交換后的圖像恢復為它們以前的源文件。在添加【交換圖像】行為時，如果沒有選擇【鼠標滑開時恢復圖像】選項，以后可以通過添加【恢復交換圖像】行為達到這一目的。 5.2.3 常