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