博學(xué)谷——讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效PAGE12PAGE2《響應(yīng)式Web開(kāi)發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）（第3版）》教學(xué)設(shè)計(jì)課程名稱(chēng)：授課年級(jí)：授課學(xué)期：教師姓名：年月課題名稱(chēng)第3章表格和表單計(jì)劃課時(shí)4課時(shí)教學(xué)引入在網(wǎng)頁(yè)中，我們常常使用表格來(lái)清晰地展示各種信息。表格的應(yīng)用場(chǎng)景非常廣泛，如展示統(tǒng)計(jì)數(shù)據(jù)、產(chǎn)品比較情況以及價(jià)格列表等。此外，我們還經(jīng)常使用表單來(lái)收集用戶(hù)反饋的信息。表單適用于多種場(chǎng)景，如用戶(hù)注冊(cè)、用戶(hù)登錄、聯(lián)系我們以及調(diào)查問(wèn)卷填寫(xiě)等。通過(guò)合理運(yùn)用表格和表單，我們可以提高網(wǎng)頁(yè)的用戶(hù)體驗(yàn)和交互性，使得網(wǎng)頁(yè)內(nèi)容更加豐富、有序且易于操作。本章將詳細(xì)講解如何使用表格和表單。教學(xué)目標(biāo)使學(xué)生掌握表格標(biāo)簽的使用方法，能夠使用表格標(biāo)簽創(chuàng)建表格使學(xué)生掌握CSS控制表格樣式，能夠使用CSS設(shè)置表格的樣式使學(xué)生掌握表格標(biāo)簽屬性的使用方法，能夠使用colspan和rowspan屬性來(lái)合并單元格使學(xué)生掌握表單標(biāo)簽的使用方法，能夠使用表單標(biāo)簽創(chuàng)建表單使學(xué)生掌握<form>標(biāo)簽的使用方法，能夠使用<form>標(biāo)簽創(chuàng)建表單使學(xué)生掌握<input>標(biāo)簽的使用方法，能夠定義不同的表單控件使學(xué)生掌握<label>標(biāo)簽的使用方法，能夠定義表單控件的標(biāo)簽文本使學(xué)生掌握<textarea>標(biāo)簽的使用方法，能夠定義多行文本輸入框使學(xué)生掌握<select>、<optgroup>、<option>標(biāo)簽的使用方法，能夠定義下拉菜單使學(xué)生掌握?qǐng)D書(shū)列表頁(yè)面的制作方法，能夠完成圖書(shū)列表頁(yè)面的開(kāi)發(fā)使學(xué)生掌握安全教育活動(dòng)調(diào)查問(wèn)卷頁(yè)面的制作方法，能夠完成安全教育活動(dòng)調(diào)查問(wèn)卷頁(yè)面的開(kāi)發(fā)教學(xué)重點(diǎn)表格標(biāo)簽<input>標(biāo)簽<textarea>標(biāo)簽<select>、<optgroup>、<option>標(biāo)簽教學(xué)難點(diǎn)表格標(biāo)簽<input>標(biāo)簽<select>、<optgroup>、<option>標(biāo)簽教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過(guò)程第一課時(shí)（表格標(biāo)簽、CSS控制表格樣式、表格標(biāo)簽屬性、項(xiàng)目3-1圖書(shū)列表頁(yè)面）一、復(fù)習(xí)鞏固教師通過(guò)上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過(guò)直接引入的方式導(dǎo)入新課網(wǎng)頁(yè)中的表格由一系列單元格組成，每個(gè)單元格用于展示一項(xiàng)數(shù)據(jù)。在HTML中，可以使用表格標(biāo)簽完成表格的創(chuàng)建。本節(jié)課將對(duì)表格標(biāo)簽、CSS控制表格樣式、表格標(biāo)簽屬性、項(xiàng)目3-1圖書(shū)列表頁(yè)面進(jìn)行講解。三、新課講解知識(shí)點(diǎn)1-表格標(biāo)簽教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解表格標(biāo)簽。表格標(biāo)簽的作用。常用的表格標(biāo)簽。創(chuàng)建表格結(jié)構(gòu)的完整語(yǔ)法格式。知識(shí)點(diǎn)2-CSS控制表格樣式教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解CSS控制表格樣式。border屬性。border-collapse屬性。padding屬性。width屬性和height屬性。知識(shí)點(diǎn)3-表格標(biāo)簽屬性教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解表格標(biāo)簽屬性。colspan屬性。rowspan屬性。知識(shí)點(diǎn)4-項(xiàng)目3-1圖書(shū)列表頁(yè)面教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解項(xiàng)目3-1圖書(shū)列表頁(yè)面。創(chuàng)建項(xiàng)目目錄。編寫(xiě)圖書(shū)列頁(yè)面的結(jié)構(gòu)。編寫(xiě)頁(yè)面樣式。訪問(wèn)測(cè)試。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過(guò)測(cè)試題的方式引導(dǎo)學(xué)生解答問(wèn)題并給予指導(dǎo)。五、布置作業(yè)教師通過(guò)高校教輔平臺(tái)（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第二課時(shí)（表單標(biāo)簽、<form>標(biāo)簽、<input>標(biāo)簽、<label>標(biāo)簽）一、復(fù)習(xí)鞏固教師通過(guò)上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過(guò)直接引入的方式導(dǎo)入新課表單主要用于收集用戶(hù)輸入的信息。<form>標(biāo)簽用于創(chuàng)建表單，可以包含多種表單元素來(lái)接收用戶(hù)的輸入；<label>標(biāo)簽用于定義表單控件的標(biāo)簽文本，即顯示在控件旁邊的文字描述。本節(jié)課將對(duì)表單標(biāo)簽、<form>標(biāo)簽、<input>標(biāo)簽、<label>標(biāo)簽進(jìn)行講解。三、新課講解知識(shí)點(diǎn)1-表單標(biāo)簽教師通過(guò)PPT的方式講解表單標(biāo)簽。表單標(biāo)簽的作用。常用的表單標(biāo)簽。知識(shí)點(diǎn)2-<form>標(biāo)簽教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解<form>標(biāo)簽。<form>標(biāo)簽的作用。<form>標(biāo)簽的常用屬性。演示如何使用<form>標(biāo)簽。知識(shí)點(diǎn)3-<input>標(biāo)簽教師通過(guò)PPT的方式講解<input>標(biāo)簽。<input>標(biāo)簽的作用。<input>標(biāo)簽的常用屬性。type屬性的屬性值。知識(shí)點(diǎn)4-<label>標(biāo)簽教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解<label>標(biāo)簽。<label>標(biāo)簽的作用。將<label>標(biāo)簽與表單控件關(guān)聯(lián)的方式。<label>標(biāo)簽的常用屬性。演示如何使用<input>標(biāo)簽和<label>標(biāo)簽。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過(guò)測(cè)試題的方式引導(dǎo)學(xué)生解答問(wèn)題并給予指導(dǎo)。五、布置作業(yè)教師通過(guò)高校教輔平臺(tái)（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第三課時(shí)（<textarea>標(biāo)簽，<select>、<optgroup>、<option>標(biāo)簽，項(xiàng)目3-2安全教育活動(dòng)調(diào)查問(wèn)卷頁(yè)面）一、復(fù)習(xí)鞏固教師通過(guò)上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過(guò)直接引入的方式導(dǎo)入新課<textarea>標(biāo)簽用于定義多行文本輸入框。<select>、<option>、<optgroup>標(biāo)簽用于定義下拉菜單。本節(jié)課將對(duì)<textarea>標(biāo)簽，<select>、<optgroup>、<option>標(biāo)簽以及項(xiàng)目3-2安全教育活動(dòng)調(diào)查問(wèn)卷頁(yè)面進(jìn)行講解。三、新課講解知識(shí)點(diǎn)1-<textarea>標(biāo)簽教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解<textarea>標(biāo)簽。<textarea>標(biāo)簽的作用。<textarea>標(biāo)簽的常用屬性。演示如何使用<textarea>標(biāo)簽。知識(shí)點(diǎn)2-<select>、<optgroup>、<option>標(biāo)簽教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解<select>、<optgroup>、<option>標(biāo)簽。下拉菜單的作用。<select>標(biāo)簽的作用和常用屬性。<option>標(biāo)簽的作用和常用屬性。<optgroup>標(biāo)簽的作用。演示如何定義下拉菜單。知識(shí)點(diǎn)3-項(xiàng)目3-2安全教育活動(dòng)調(diào)查問(wèn)卷頁(yè)面教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解項(xiàng)目3-2安全教育活動(dòng)調(diào)查問(wèn)卷頁(yè)面。創(chuàng)建安全教育活動(dòng)調(diào)查問(wèn)卷頁(yè)面的樣式文件。編寫(xiě)安全教育活動(dòng)調(diào)查問(wèn)卷頁(yè)面的結(jié)構(gòu)并引入樣式文件。編寫(xiě)安全教育活動(dòng)調(diào)查問(wèn)卷的頁(yè)面樣式。訪問(wèn)測(cè)試。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過(guò)測(cè)試題的方式引導(dǎo)學(xué)生解答問(wèn)題并給予指導(dǎo)。五、布置作業(yè)教師通過(guò)高校教輔平臺(tái)（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第四課時(shí)（上