網頁設計與制作教案授課教師授課班級授課日期課題制作“詩人簡歷”模塊計劃學時教學目標知識目標掌握表格的基本結構（<table>、<tr>、<td>）理解合并單元格屬性rowspan和colspan掌握border-collapse與border-spacing的CSS應用能力目標能根據需求設計表格結構并實現內容排版能通過CSS美化表格樣式能完成“詩人簡歷”模塊的開發素質目標通過詩人簡歷制作，增強文化認同感培養耐心細致的職業素養教學重點表格的HTML結構與屬性設置單元格合并技巧表格邊框與間距的CSS控制教學難點復雜表格的結構設計CSS樣式對表格布局的影響教學模式及教學方法理實一體化、線上+線下混合教學模式項目教學法、任務驅動法、講授法。教學活動及主要環節素質培養課前導學1.觀看學習平臺相關微課視頻。2.讓學生搜集2-3位詩人的生平介紹及經典作品3.完成課前測試題。課中踐學【情景導入】互動提問：“同學們見過哪些用表格展示的信息？”（學生舉例）“如何用表格清晰展示詩人的簡歷信息？”任務發布：

展示“詩人簡歷”效果圖，明確開發要求【新知探究】活動1：表格結構初體驗教師演示：

用表格制作簡易簡歷，逐步添加<caption>、<th>、<td>學生操作：

用表格展示“詩人基本信息”，教師實時投屏優秀作品活動2：表格變形記小組競賽：

完成以下變形任務（每完成一項加10分）：將“性別”單元格合并2行將“代表作品”列合并3列用嵌套表格展示作品分類活動3：CSS樣式魔法屋創意任務：

為表格添加以下效果：去除默認邊框間隙設置斑馬線背景色添加懸停高亮效果【項目實戰】任務：完成“詩人簡歷”模塊1.結構搭建學生獨立完成HTML結構，教師提供代碼提示2.復雜布局教師引導：如何讓“作品風格”占據多行多列？如何在表格中插入詩句？學生實操：

應用rowspan="3"colspan="2"，并嵌套無序列表展示代表作3.創意美化小組合作：

為表格添加動畫效果（提示：使用transition），并嘗試響應式設計四、任務拓展布置拓展任務：用表格制作“詩人年表”，包含時間、事件、名句。（學生可在完成基本任務的前提下，完成拓展任務。）項目小結通過本項目的學習，小丁完成了“古詩詞”網站中“著名詩人”“詩詞推薦”“詩文釋義”“詩人簡歷”功能模塊。通過功能模塊的制作，我們一起學習了網頁中選擇器、盒子模型、浮動、列表和表格的相關知識，總結如?下。1．選擇器是用于選擇HTML元素并應用樣式的工具，了解和熟練運用選擇器可以精確地控制和定位特定的元素，并為其添加樣式和行?為。2．盒子模型是HTML中布局和定位元素的基礎，它由內容區、內邊距、邊框和外邊距組成。掌握盒子模型可以更好地控制元素的尺寸、邊距和定?位。3．浮動屬性允許元素在容器中左浮動或右浮動，使其他元素環繞在其周圍。浮動常用于創建多列布局和實現圖文混排的效?果。4．列表是用來組織和呈現項目清單的一種方式，HTML提供了無序列表（<ul>）、有序列表（<ol>）和定義列表（<dl>）3種類型的列表?？梢允褂?lt;li>標簽創建列表項，使用CSS來自定義列表樣?式。5．表格是一種常見的HTML元素，用于以行和列的形式呈現數據。使用<table>標簽創建表格，<tr>標簽定義表格行，<td>標簽定義單元格內?容。學習了以上知識，我們可以更加靈活和有效地設計和布局網頁，提升用戶體驗和頁面可讀性。同時，結合CSS來美化這些元素，可以創造出各種各樣的視覺效?果。項目延伸課后同學們可以根據所學知識，豐富網站內容，將完成的功能模塊進行整合，參考效果如圖3-36所?示。圖3-36“古詩詞”網站首頁參考效果通過學習平臺學習相關內容，讓學生養成自主學習的習慣。通過搜索學習詩人的生平介紹及經典作品，通過梳理詩人所處時代，讓學生能理解文學與歷史的互動關系，形成對民族文化脈絡的整體認知。通過任務分析，鍛煉學生分析問題的能力