教學設計一、基本信息課程名稱Web前端開發(fā)技術課題名稱HTML表格應用——優(yōu)化《七律·長征》古詩文網(wǎng)頁布局授課班級授課時間授課類型理實一體化、新授課授課地點機房（有網(wǎng)絡，接入超星教學平臺）授課學時40分鐘*2學時教材分析本節(jié)選自單元2核心內容，聚焦HTML表格知識點，是網(wǎng)頁布局、規(guī)整內容排版的基礎技術，承接上一課時圖像應用，是單元知識整合的關鍵模塊。教材結合表格結構案例講解，需補充單元格合并、表格與圖文適配案例，結合古詩文情境強化實操，貼合職校生“實操落地、規(guī)整布局”的學習需求。學情分析1.前置基礎：已掌握HTML文檔結構、文本標簽、超鏈接、圖像插入技能，能獨立編寫圖文結合的古詩文網(wǎng)頁，熟練操作VSCode，具備基礎代碼糾錯能力，可銜接表格布局實操。

2.學情特點：動手能力強、具象思維突出，對“規(guī)整布局”的網(wǎng)頁效果興趣濃厚；抽象邏輯較弱，對表格嵌套、單元格合并的邏輯需實例引導。

3.潛在不足：易混淆表格標簽嵌套順序，對單元格合并的rowspan、colspan屬性用法模糊，需通過分步實操與案例拆解化解。教學目標【知識目標】：

1.掌握HTML表格核心標簽（<table>、<tr>、<td>、<th>）的語法結構與嵌套規(guī)則，理解表頭、表體的概念。

2.掌握單元格合并屬性（rowspan、colspan）的用法，能實現(xiàn)簡單的表格布局優(yōu)化。

【能力目標】：

1.能為古詩文網(wǎng)頁添加表格，實現(xiàn)詩句、注釋、圖像的規(guī)整布局，掌握表格與圖文的適配技巧。

2.能排查表格標簽嵌套錯誤、單元格合并異常等問題，提升自主故障排查能力。

【素質目標】：

1.結合表格規(guī)整布局，培養(yǎng)嚴謹?shù)脑O計思維與細節(jié)把控能力。

2.養(yǎng)成規(guī)范編寫表格代碼、注重網(wǎng)頁布局美觀性的實操習慣。教學重點1.HTML表格核心標簽的語法結構與正確嵌套規(guī)則。

2.運用表格實現(xiàn)古詩文網(wǎng)頁內容的規(guī)整布局，適配文本與圖像。教學難點1.表格標簽的嵌套邏輯，避免因標簽順序錯誤導致表格顯示異常。

2.rowspan（跨行合并）、colspan（跨列合并）屬性的精準應用，實現(xiàn)復雜布局。教學準備1.硬件：機房計算機、投影儀、音響。

2.軟件：超星教學平臺（上傳教材案例源碼、表格標簽對照表、AI提示詞模板）、VSCode。

3.素材：古詩文網(wǎng)頁表格布局示例圖、單元格合并案例、表格故障對照表、實操任務單、前節(jié)課圖文網(wǎng)頁源碼。教學方法1.主導方法：項目引領任務驅動教學法。

2.輔助方法：理實一體化教學法、案例演示法、講練結合法、糾錯訓練法。板書設計核心內容：1.表格標簽（table/tr/td/th）；2.合并屬性（rowspan/colspan）；3.要點：嵌套正確、合并精準、布局適配。二、教學設計教學環(huán)節(jié)教學內容師生活動設計意圖/時間環(huán)節(jié)一：復習銜接，項目升級（亮點：情境延續(xù)+布局對比）1.復習回顧：抽查上節(jié)課圖文結合的古詩文網(wǎng)頁，提問圖像屬性、路徑書寫規(guī)則，點評作業(yè)中圖文排版情況，銜接表格知識點。

2.情境升級：展示兩張網(wǎng)頁對比案例（無表格雜亂布局頁、表格規(guī)整布局頁），提問“如何用表格實現(xiàn)內容分類規(guī)整？單元格合并該如何操作？”，引出本節(jié)課核心內容。

3.項目發(fā)布：明確本課時核心項目“用表格優(yōu)化古詩文網(wǎng)頁布局”，拆解為3個子任務——創(chuàng)建基礎表格、實現(xiàn)單元格合并、適配圖文優(yōu)化布局。

4.AI輔助：更新超星平臺AI提示詞模板（如“HTML表格標簽嵌套規(guī)則”“rowspan與colspan用法”），引導學生自主查詢疑難問題。教師：抽查作業(yè)，點評亮點與不足；展示對比案例，講解表格布局的優(yōu)勢，明確項目目標與成果要求；指導學生運用AI提示詞梳理表格標簽基礎用法。

學生：展示上節(jié)課作品，回憶圖像相關知識；觀察案例差異，明確學習目標；借助AI提示詞預習表格標簽語法，記錄核心要點。設計意圖：延續(xù)古詩文情境，以布局對比激發(fā)興趣，銜接前置知識；AI輔助貼合教學風格，以具象差異引導學生聚焦表格核心作用。時間：10分鐘。環(huán)節(jié)二：理論精講，案例演示（亮點：分層演示+易錯點標注）1.表格基礎標簽：

（1）核心結構：講解<table>（表格容器）、<tr>（表格行）、<td>（表格單元格）、<th>（表頭單元格，默認加粗居中）的嵌套規(guī)則，標注“先table后tr，再td/th”易錯點，演示基礎2行2列表格編寫。

（2）標簽嵌套：強調“tr包含td/th，td/th內可放文本、圖像、鏈接”，演示在單元格中插入文本與圖像的效果。

2.單元格合并：

（1）跨列合并（colspan）：演示合并2列單元格，講解屬性用法（colspan=“合并列數(shù)”），標注“合并后需刪除對應數(shù)量的td標簽”易錯點。

（2）跨行合并（rowspan）：演示合并2行單元格，講解屬性用法（rowspan=“合并行數(shù)”），對比colspan與rowspan的差異，結合布局示例圖強化邏輯。

3.布局適配：演示表格與圖文的適配技巧，如調整單元格內文本對齊方式、控制圖像尺寸適配單元格。教師：采用理實一體化教學法，在VSCode中逐行編寫代碼，實時預覽表格顯示效果；標注易錯點，引導學生對比不同標簽、合并屬性的用法。

學生：跟隨演示仿寫代碼，測試表格顯示與合并效果；記錄語法規(guī)則、嵌套邏輯及易錯點，梳理單元格合并技巧。設計意圖：以分層演示拆解抽象表格邏輯，易錯點標注降低失誤率，貼合職校生具象思維，夯實重點知識，為實操鋪墊。時間：20分鐘。環(huán)節(jié)三：分步實操，突破難點（亮點：項目迭代+故障排查）分步實操任務（獨立完成，基于前節(jié)課圖文網(wǎng)頁迭代優(yōu)化）：

1.基礎層（必做）：

（1）創(chuàng)建基礎表格：新建表格（3行2列），表頭設置為“詩句”“注釋”，將古詩文詩句與注釋分別填入對應單元格，實現(xiàn)內容分類規(guī)整。

（2）適配圖文：在表格旁添加1行1列表格，插入前節(jié)課的長征主題圖像，控制圖像尺寸適配單元格，實現(xiàn)圖文與表格的協(xié)調布局。

2.提高層（選做）：

（1）單元格合并：運用colspan合并表頭單元格（合并2列），運用rowspan合并注釋單元格（合并2行），實現(xiàn)復雜布局優(yōu)化。

（2）故障排查：故意植入標簽嵌套錯誤（如td外直接寫table）、合并屬性錯誤（如colspan取值過大），引導學生結合故障對照表自主排查修正。教師：巡視指導，重點幫扶標簽嵌套、單元格合并困難的學生；提供故障對照表，引導學生通過“檢查嵌套順序、核對合并屬性、預覽調試”排查問題；針對共性問題（如合并后單元格冗余）集中講解。

學生：按分層任務編寫代碼，迭代優(yōu)化網(wǎng)頁布局；自主排查并修正錯誤，記錄故障解決方法；完成基礎任務后嘗試提高層內容，優(yōu)化表格布局美觀度。設計意圖：以項目迭代延續(xù)情境，分層任務兼顧不同水平學生，故障排查針對性突破嵌套、合并難點，強化自主實操與問題解決能力。時間：25分鐘。環(huán)節(jié)四：小組互評，整合提升（亮點：單元整合+成果展示）小組任務（4人一組）：

1.成果互評：每組對照互評清單（表格嵌套正確、合并屬性精準、布局規(guī)整、圖文適配、無語法錯誤），交叉檢查網(wǎng)頁，標注問題并提出修改建議。

2.整合優(yōu)化：根據(jù)小組建議修改代碼，完善表格布局細節(jié)，關聯(lián)前節(jié)課超鏈接（可為表格內文本添加鏈接），實現(xiàn)單元知識（文本、鏈接、圖像、表格）整合。

3.成果展示：每組推選1份優(yōu)秀作品（單元整合版網(wǎng)頁），上傳至超星平臺，由作者分享表格布局思路與單元知識整合技巧。教師：明確互評清單標準，引導小組聚焦嵌套規(guī)則、合并屬性、布局適配等重難點；點評優(yōu)秀作品，講解典型錯誤（如布局雜亂、合并異常）的修正方法；總結表格布局技巧與單元知識整合要點。

學生：小組內交叉測試互評，主動發(fā)現(xiàn)并修正問題；學習優(yōu)秀作品的布局亮點，優(yōu)化自身網(wǎng)頁；分享布局思路與整合心得，深化單元知識理解。設計意圖：通過互評強化表格規(guī)范意識，借助同伴互助解決個性化問題，成果展示提升表達與總結能力，實現(xiàn)單元知識閉環(huán)整合。時間：15分鐘。環(huán)節(jié)五：課堂小結，布置作業(yè)1.小結：梳理本節(jié)課核心內容（表格標簽嵌套、單元格合并、圖文適配），回顧單元知識（文本、鏈接、圖像、表格）的關聯(lián)邏輯，強化“編寫-預覽-排查-優(yōu)化”的實操流程。

2.作業(yè)布置：明確課后任務要求，引導學生梳理單元知識體系，為單元測試與后續(xù)CSS學習鋪墊。教師：引導學生自主總結，補充完善單元知識框架；通過超星平臺發(fā)布作業(yè)，附上單元知識梳理清單供課后復習。

學生：梳理表格知識點與單元知識關聯(lián)，記錄作業(yè)要求；保存單元整合版網(wǎng)頁文件，自主梳理單元知識，預習CSS相關內容。設計意圖：固化表格知識與單元知識體系，強化實操思維；通過作業(yè)延伸鞏固單元重難點，為后續(xù)學習做好銜接。時間：10分鐘。三、課后作業(yè)和教學反思課后作業(yè)1.優(yōu)化單元整合版網(wǎng)頁，完善表格布局與單元格合并效果，確保圖文適配、布局美觀，將網(wǎng)頁文件上傳至超星平臺。

2.梳理第二單元核心知識點（