網(wǎng)頁制作項目實訓教程 教案 項目4 制作包含表單的網(wǎng)頁

PAGEPAGE0廣東省×××職業(yè)技術(shù)學校學科教案本TeachingPlan20年———20年學年度學期The(1st/2na)SemesteroftheAcademicYearfrom20to20____________________________________________網(wǎng)頁制作項目實訓教程網(wǎng)頁制作項目實訓教程學科（Subject）____________________________________________________________________________________________________________________________重慶大學出版社制

《網(wǎng)頁制作項目實訓教程》目錄注意：①按住Ctrl鍵后單擊每個任務即可跳轉(zhuǎn)到對應的教案②單擊注意：①按住Ctrl鍵后單擊每個任務即可跳轉(zhuǎn)到對應的教案②單擊按鈕可返回目錄③頁面設置參數(shù)為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務1HYPERLINK活動2制作QQ郵箱登錄頁任務2HYPERLINK\l"mk03"活動1制作調(diào)查問卷表單（一）HYPERLINK\l"mk04"活動2制作調(diào)查問卷表單（二）

教學課題任務1活動1了解表單元素課題類型理論+實作課時安排2上課時間教學目標1.了解表單及表單的屬性設置2.掌握常用表單元素的使用教學重點1、2教學難點2輔助資源課件、多媒體、網(wǎng)絡復習引入1.表格嵌套。2.使用表格嵌套布局網(wǎng)頁。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求了解表單以及表單中常用的文本域、按鈕等表單元素的添加、屬性設置等使用方法；利用表單元素制作一個留言板頁面，效果如下圖所示。二、師生討論學習新知識1、表單表單在頁面顯示的是一個紅色虛線框，我們可以把它理解成一個容器，我們可以向里面添加進各種表單元素。在實際使用中，表單有時候可以不需要單獨添加，因為當我們在頁面中添加第一個表單元素時，系統(tǒng)也會自動創(chuàng)建一個表單。2、表單屬性的設置常用屬性設置項目的含義是：（1）動作：指定用來處理表單數(shù)據(jù)的文件。（2）方法：用于設置表單數(shù)據(jù)提交給服務器的方法，兩種方法有所區(qū)別。POST：是將表單數(shù)據(jù)嵌入到HTTP請求中傳輸，傳輸?shù)臄?shù)據(jù)量沒有限制，可用于長表單。GET：將數(shù)據(jù)附加到請求頁的URL中，傳輸?shù)淖址麛?shù)量有限制，是默認的方式。（3）編碼類型：用于指定提交給服務器的數(shù)據(jù)使用的編碼類型，默認使用：application/x-www-form-urlencoded，如果要創(chuàng)建文件上傳表單，則使用：multipart/form-data。3、文本域文本域是表單中的一個基本元素，應用的非常廣泛，用戶可以利用它輸入文本類的信息，如用戶名、密碼、留言等，輸入的內(nèi)容可以是字符、數(shù)字等符號。文本域包括：單行、多行、密碼三種類型，以適合不同的需求，三種類型之間可以互相轉(zhuǎn)換。4、按鈕表單按鈕是一個非常重要的表單元素，當用戶在輸入完數(shù)據(jù)后單擊按鈕可以將數(shù)據(jù)提交給服務器處理。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6，新建一個HTML文檔，點擊“表單”按鈕，在頁面中添加一個表單。表單域?qū)儆诓豢梢娫兀绻迦牒鬅o法顯示紅色虛線框，可以按如下進行設置：依次點擊“編輯”->“首選參數(shù)”，在彈出的對話框中，選擇“不可見元素”選項卡，勾選“表單范圍”復選框即可。2、在表單中插入一個4行2列的表格，寬度設置400，表格邊框為0，將第一行與第四行的單元格進行合并，設置各行高度為30。3、在表格第一行輸入文字“留言板”，并設置居中，在第二行與第三行的左邊單元格中分別輸入標題內(nèi)容。4、選擇表格中第二行右邊單元格，點擊“文本字段”按鈕，在彈出的對話框中直接選擇“確定”，添加一個文本域。5、選擇文本域?qū)ο?，在屬性欄中按要求設置參數(shù)。6、選擇表格中第三行右邊單元格，單擊表單項中的“文本區(qū)域”按鈕，添加一個文本區(qū)域，在彈出的對話框中直接選擇“確定”。7、選中“文本區(qū)域”對象，在屬性欄中按要求設置參數(shù)。8、選擇表格第四行，單擊表單項中的“按鈕”，添加一個按鈕對象，設置居中。9、選擇“按鈕”對象，在屬性欄中按要求設置參數(shù)。10、將網(wǎng)頁保存文件為：task4-1-1.html，按F12鍵在瀏覽器中預覽效果。布置任務：讓學生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果閱讀知識窗：表單屬性；文本域；按鈕演示：教師演示活動實施過程實訓活動：學生練習及點評作業(yè)布置填寫提交實訓報告和實訓表格預習作業(yè)：預習下一節(jié)內(nèi)容教學后記

教學課題任務1活動2制作QQ郵箱登錄頁課題類型理論+實作課時安排2上課時間教學目標1.掌握密碼域及spry驗證密碼的使用2.掌握復選框的使用教學重點1、2教學難點1輔助資源課件、多媒體、網(wǎng)絡復習引入1.表單的屬性。2.常用表單元素：文本域、按鈕。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求創(chuàng)建一個模擬QQ郵箱登錄頁面，效果如下圖所示，并將頁面以文件名：task4-1-2.html保存。二、師生討論學習新知識1、密碼輸入表單制作在網(wǎng)頁制作過程中，在賬號登錄、用戶注冊等環(huán)節(jié)都會使用到密碼輸入項，在DreamweaveCS6中提供了幾種可以制作密碼輸入對象的工具，如文本字段、spry驗證密碼，下面分別進行介紹。（1）文本字段作密碼輸入項選中添加的文本域，在屬性欄中設置類型為“密碼”。當設置文本域為密碼模式時，在框內(nèi)的字符顯示為小數(shù)點。這種方法制作密碼輸入框的特點是方法簡單，但對密碼的驗證功能較少，只能限制密碼最大的位數(shù)。（2）用“spry驗證密碼”作密碼輸入項“spry驗證密碼”對象的密碼驗證功能比前面方法要復雜一些，通過合理設置參數(shù)，可以實現(xiàn)密碼位數(shù)控制、內(nèi)容控制、錯誤信息提示等功能。2、復選框可以讓用戶在預先定義好的一個選項中進行選擇。選中矩形的復選框，可以在屬性欄中設置屬性參數(shù)。三、教師演示活動實施過程并讓學生完成活動任務1、添加一個表單，在表單中添加一個2行1列的表格，寬度400，設置第一行的底紋為淺灰色，輸入文字“微信登錄”與“QQ登錄”，調(diào)整到合適位置。2、在第二行中添加一個4行1列的表格，寬度為300，設置邊框為0，設置單元格對齊方式為：水平居中和垂直居中。3、單擊選中表格，單元格高度設為40，點擊表單欄中的“文本字段”按鈕，在第一行中添加一個文本域，點擊選中文本域，按要求在屬性欄設置寬度及初始值。4、按照上一步的方法，在第二行的單元格中插入一個spry驗證密碼域，點擊選中白色文本框，按要求在屬性欄設置參數(shù)。5、點擊選中藍色框區(qū)域，密碼設置要求：位數(shù)在6-16位之間，包含大小寫字母或數(shù)字，且至少包括一位大寫字母。6、點擊預覽狀態(tài)按鈕，選擇“強度無效”項，將密碼框中后面出現(xiàn)的紅色字符修改為：“密碼不符合強度要求，須至少包括一個大寫字母”。這樣當用戶輸入密碼不符合強度要求時，給出提示信息。7、勾選驗證時間欄中的“onblur”項，設置用戶輸入密碼完成后進行檢查，如不符合要求則給出提示信息。8、單擊第三行單元格，單擊表單項中的“復選框”按鈕，添加一個復選框。9、單擊第四行單元格，設置背景顏色為藍色，單擊表單項中的“按鈕”，添加一個鈕銨，將屬性欄中的值改為：登錄。10、將頁面以文件名：task4-1-2.html保存并預覽。布置任務：讓學生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果閱讀知識窗：密碼域；spry驗證密碼；復選框演示：教師演示活動實施過程實訓活動：學生練習及點評作業(yè)布置填寫提交實訓報告和實訓表格預習作業(yè)：預習下一節(jié)內(nèi)容教學后記

教學課題任務2活動1制作調(diào)查問卷表單（一）課題類型理論+實作課時安排2上課時間教學目標1.掌握單選按鈕組與復選框組的使用2.掌握spry驗證文本域的使用教學重點1、2教學難點2輔助資源課件、多媒體、網(wǎng)絡復習引入1.密碼域及spry驗證密碼。2.復選框。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求了解掌握單選按鈕組、spry驗證文本域等表單元素的添加、屬性設置的方法；制作調(diào)查問卷頁面，完成后效果如下圖所示，并將頁面以文件名：task4-2-1.html為文件名保存。二、師生討論學習新知識1、單選按鈕組單選按鈕一般都是成組使用，可以讓用戶在預先定義好的可選項中選擇一項，這樣可以使收集的信息規(guī)范，便于信息的統(tǒng)計。在單選按鈕組添加對話框中，可根據(jù)需求單擊+號或-號可增添加或刪除選項，設置好每一個項的標簽符和值，每項的值不能相同。2、spry驗證文本域spry驗證文本域是帶有驗證功能的文本域，它可以作為有特殊格式要求的文本輸入項使用。點擊spry驗證文本域?qū)傩詸谥小邦愋汀卑粹o，彈出多種數(shù)據(jù)類型選項，根據(jù)“類型”項選擇的不同，“格式”項會出現(xiàn)相對應的選項，用戶可以選擇和設置。3、復選框組如果需要在用戶在預先定義好的多個選項中進行選擇，則可以使用復選框組，用戶可以從中選擇一項或多項。根據(jù)需求單擊+號或-號可增添加或刪除選項，設置好每一個項的標簽符和值（注意各復選框所設定的值不允許相同）。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6，新建一個HTML文件，點擊“表單”按鈕，添加一個表單對象。2、將光標移入表單中，點擊“表格”按鈕添加一個8行2列的表格，表格寬度400，邊框線設置為0，設置所有表格高度為40。3、設置左邊列單元格為右對齊，設置右邊列單元格為左對齊，合并第一行單元格，輸入標題：問卷調(diào)查，設置居中對齊，將其它行輸入相應的標題，調(diào)整列寬。4、選擇“姓名”行右邊單元格，單擊“文本字段”按鈕，添加一個文本字段表單，在屬性欄中按要求設置參數(shù)。5、選擇“性別”行右邊單元格，單擊“單選按鈕組”按鈕，在對話框中按要求設置參數(shù)后確定，最后調(diào)整兩行按鈕至一行中。6、選擇“出生日期”行右邊單元格，單擊“SPRY驗證文本域”按鈕，在彈出的對話框中直接按鈕確定，添加驗證文本域表單。7、選擇白色文本框，在屬性欄中按要求設置參數(shù)。8、選擇藍色區(qū)域，在屬性欄中按要求設置參數(shù)。9、選擇“電話”行右邊單元格，單擊“SPRY驗證文本域”按鈕，在彈出的對話框中直接按鈕確定，添加驗證文本域表單。10、選擇白色文本框，在屬性欄中按要求設置參數(shù)。11、選擇藍色區(qū)域，在屬性欄中按要求設置參數(shù)，其中最小值設置為最大值設置為：199999999999。12、選擇“愛好”行右邊單元格，單擊“復選框組”按鈕，在彈出的對話框中按要求設置參數(shù)，添加一個復選框組表單，然后調(diào)整各選項至同一行位置。13、選擇“自我介紹”行右邊單元格，單擊“文本區(qū)域”按鈕，在彈出的對話框中直接按鈕確定，添加一個文本區(qū)域表單，選中表單對象，設置寬度為40，行數(shù)10.14、選擇表格最后一行，合并單元格，設置水平方向居中對齊，點擊“按鈕”，添加一個“按鈕”表單，按要求設置參數(shù)。15、按F12鍵，將文件以TASK4-2-1.html為文件名保存，并預覽效果。布置任務：讓學生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果閱讀知識窗：單選按鈕組；spry驗證文本域；復選框組演示：教師演示活動實施過程實訓活動：學生練習及點評作業(yè)布置填寫提交實訓報告和實訓表格預習作業(yè)：預習下一節(jié)內(nèi)容教學后記

教學課題任務2活動2制作調(diào)查問卷表單（二）課題類型理論+實作課時安排2上課時間教學目標1.了解文件域表單元素的使用2.掌握列表與菜單表單元素的使用教學重點1、2教學難點2輔助資源課件、多媒體、網(wǎng)絡復習引入1.單選按鈕組與復選框組。2.spry驗證文本域。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求了解文件域、選擇（列表/菜單）等表單元素的添加、屬性設置的方法；完善上一節(jié)中制作的調(diào)查問卷頁面，完成后效果如下圖所示，并將頁面以文件名：task4-2-2.html為文件名保存。二、師生討論學習新知識1、列表與菜單列表與菜單均可以從預先定義的選項中選擇所需的對象，兩者適用于不同的情況。（1）菜單：在瀏覽器顯示時，只顯示一個可選項.（2）列表：在瀏覽器中顯示時，顯示一個多行的滾動列表，用戶可從列表中選擇1個或多個頂目。2、文件域當頁面中需要實現(xiàn)文件上傳功能時，可以使用文件域。文件域由一個文本框和一個“瀏覽”按鈕組成，可使用該按鈕選擇定位需要上傳的文件。文件域需要使用POST方法將文件從客戶端上傳到服務器。三、教師演示活動實施過程并讓學生完成活動任務1、在DreamweaverCS6中打開上一章節(jié)中制作的文件：task4-2-1.html。2、選擇“自我介紹”單元格，按Ctrl+M兩次，在表格中添加兩行，分別輸入標題：“就讀專業(yè)”和“照片