網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程 教案 項(xiàng)目4 制作包含表單的網(wǎng)頁

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

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

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

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

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

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