教學(xué)設(shè)計(jì)一、基本信息課程名稱Web前端開發(fā)技術(shù)課題名稱HTML圖像應(yīng)用——美化《七律·長(zhǎng)征》古詩(shī)文網(wǎng)頁(yè)授課班級(jí)授課時(shí)間授課類型理實(shí)一體化、新授課授課地點(diǎn)機(jī)房（有網(wǎng)絡(luò)，接入超星教學(xué)平臺(tái)）授課學(xué)時(shí)40分鐘*2學(xué)時(shí)教材分析本節(jié)選自單元2核心內(nèi)容，聚焦HTML圖像知識(shí)點(diǎn)，是網(wǎng)頁(yè)美化、增強(qiáng)視覺表現(xiàn)力的關(guān)鍵技術(shù)，承接上一課時(shí)超鏈接應(yīng)用，為后續(xù)表格布局奠定基礎(chǔ)。教材結(jié)合素材案例講解圖像插入，需補(bǔ)充圖像屬性配置、路徑排查案例，結(jié)合古詩(shī)文情境強(qiáng)化實(shí)操，貼合職校生“實(shí)操落地”的學(xué)習(xí)需求。學(xué)情分析1.前置基礎(chǔ)：已掌握HTML文檔結(jié)構(gòu)、文本標(biāo)簽、超鏈接使用，能獨(dú)立編寫帶跳轉(zhuǎn)功能的古詩(shī)文網(wǎng)頁(yè)，熟練操作VSCode，具備基礎(chǔ)路徑認(rèn)知與故障排查能力，可銜接圖像實(shí)操。

2.學(xué)情特點(diǎn)：動(dòng)手能力強(qiáng)、具象思維突出，對(duì)圖像美化網(wǎng)頁(yè)的效果興趣濃厚；抽象邏輯較弱，對(duì)圖像路徑、尺寸屬性的配置邏輯需實(shí)例引導(dǎo)。

3.潛在不足：易混淆圖像相對(duì)路徑書寫規(guī)則，對(duì)alt屬性的語(yǔ)義化作用認(rèn)知不足，圖像顯示異常時(shí)排查能力薄弱，需通過(guò)分步實(shí)操與故障模擬化解。教學(xué)目標(biāo)【知識(shí)目標(biāo)】：

1.掌握HTML圖像標(biāo)簽<img>的語(yǔ)法結(jié)構(gòu)、核心屬性（src、alt、width、height）及取值規(guī)范。

2.理解圖像絕對(duì)路徑、相對(duì)路徑的應(yīng)用場(chǎng)景，掌握本地圖像、網(wǎng)絡(luò)圖像的插入方法。

【能力目標(biāo)】：

1.能為古詩(shī)文網(wǎng)頁(yè)插入本地、網(wǎng)絡(luò)圖像，合理配置屬性優(yōu)化顯示效果，實(shí)現(xiàn)圖文結(jié)合。

2.能排查圖像不顯示、尺寸失真等問題，提升自主故障排查能力。

【素質(zhì)目標(biāo)】：

1.結(jié)合長(zhǎng)征主題圖像，深化文化認(rèn)知，培養(yǎng)網(wǎng)頁(yè)視覺美化意識(shí)。

2.養(yǎng)成規(guī)范配置圖像屬性、注重語(yǔ)義化的實(shí)操習(xí)慣。教學(xué)重點(diǎn)1.圖像標(biāo)簽<img>的語(yǔ)法結(jié)構(gòu)及src、alt屬性的正確使用。

2.本地圖像插入的相對(duì)路徑書寫規(guī)范與圖像尺寸屬性配置。教學(xué)難點(diǎn)1.相對(duì)路徑在圖像插入中的精準(zhǔn)應(yīng)用，避免因路徑錯(cuò)誤導(dǎo)致圖像不顯示。

2.圖像尺寸屬性的合理配置，兼顧網(wǎng)頁(yè)美觀與圖像比例不失真。教學(xué)準(zhǔn)備1.硬件：機(jī)房計(jì)算機(jī)、投影儀、音響，每人準(zhǔn)備1-2張長(zhǎng)征主題本地圖像素材（如紅軍行軍圖、雪山草地圖）。

2.軟件：超星教學(xué)平臺(tái)（上傳教材案例源碼、路徑手冊(cè)、AI提示詞模板）、VSCode。

3.素材：長(zhǎng)征主題網(wǎng)絡(luò)圖像URL、圖像屬性對(duì)照表、路徑示例圖、常見圖像故障對(duì)照表、實(shí)操任務(wù)單。教學(xué)方法1.主導(dǎo)方法：項(xiàng)目引領(lǐng)任務(wù)驅(qū)動(dòng)教學(xué)法。

2.輔助方法：理實(shí)一體化教學(xué)法、案例演示法、講練結(jié)合法、故障模擬法。板書設(shè)計(jì)核心內(nèi)容：1.圖像<imgsrc=""alt=""width=""height="">；2.路徑（絕對(duì)/相對(duì)）；3.要點(diǎn)：路徑正確、比例不失真、語(yǔ)義化alt。二、教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)設(shè)計(jì)意圖/時(shí)間環(huán)節(jié)一：復(fù)習(xí)銜接，項(xiàng)目升級(jí)（亮點(diǎn)：情境延續(xù)+問題導(dǎo)向）1.復(fù)習(xí)回顧：抽查上節(jié)課帶超鏈接的古詩(shī)文網(wǎng)頁(yè)，提問超鏈接三種類型及路徑書寫規(guī)則，點(diǎn)評(píng)作業(yè)中鏈接故障排查情況，銜接圖像知識(shí)點(diǎn)。

2.情境升級(jí)：展示兩張網(wǎng)頁(yè)對(duì)比案例（純文本古詩(shī)文頁(yè)、圖文結(jié)合古詩(shī)文頁(yè)），提問“如何為網(wǎng)頁(yè)添加圖像實(shí)現(xiàn)美化？圖像不顯示該如何排查？”，引出本節(jié)課核心內(nèi)容。

3.項(xiàng)目發(fā)布：明確本課時(shí)核心項(xiàng)目“為古詩(shī)文網(wǎng)頁(yè)添加圖像實(shí)現(xiàn)圖文美化”，拆解為3個(gè)子任務(wù)——插入網(wǎng)絡(luò)圖像、插入本地圖像、優(yōu)化圖像屬性與排版。

4.AI輔助：更新超星平臺(tái)AI提示詞模板（如“HTML圖像路徑書寫規(guī)則”“圖像尺寸配置技巧”），引導(dǎo)學(xué)生自主查詢疑難問題。教師：抽查作業(yè)，點(diǎn)評(píng)亮點(diǎn)與不足；展示對(duì)比案例，演示圖像顯示與不顯示的差異，講解項(xiàng)目目標(biāo)與子任務(wù)；指導(dǎo)學(xué)生運(yùn)用AI提示詞梳理圖像標(biāo)簽基礎(chǔ)用法。

學(xué)生：展示上節(jié)課作品，回憶超鏈接知識(shí)；觀察案例差異，明確學(xué)習(xí)目標(biāo)；借助AI提示詞預(yù)習(xí)圖像標(biāo)簽語(yǔ)法，記錄核心要點(diǎn)。設(shè)計(jì)意圖：延續(xù)古詩(shī)文情境，以問題導(dǎo)向激發(fā)思考，銜接前置知識(shí)；AI輔助貼合教學(xué)風(fēng)格，以具象對(duì)比激發(fā)學(xué)生實(shí)操興趣。時(shí)間：10分鐘。環(huán)節(jié)二：理論精講，案例演示（亮點(diǎn)：實(shí)例拆解+易錯(cuò)點(diǎn)標(biāo)注）1.圖像標(biāo)簽基礎(chǔ)語(yǔ)法：

（1）標(biāo)簽結(jié)構(gòu)：講解<img>自閉合標(biāo)簽特性，核心屬性用法——src（指定圖像路徑）、alt（圖像加載失敗時(shí)的替代文本）、width/height（設(shè)置尺寸，單位px），標(biāo)注“src不能為空、alt不可省略”易錯(cuò)點(diǎn)。

（2）alt屬性語(yǔ)義化：強(qiáng)調(diào)alt屬性對(duì)網(wǎng)頁(yè)可訪問性的作用，演示圖像加載失敗時(shí)alt文本的顯示效果。

2.圖像路徑講解：

（1）網(wǎng)絡(luò)圖像：演示通過(guò)網(wǎng)絡(luò)圖像URL插入長(zhǎng)征主題圖，講解絕對(duì)路徑（完整URL）的適用場(chǎng)景，標(biāo)注“需加http:///https://”易錯(cuò)點(diǎn)。

（2）本地圖像：演示插入本地素材，講解相對(duì)路徑——同一文件夾直接寫文件名、子文件夾寫“文件夾名/文件名”，結(jié)合路徑示例圖強(qiáng)化邏輯，對(duì)比絕對(duì)路徑與相對(duì)路徑差異。

3.尺寸屬性配置：

（1）演示僅設(shè)置width或height（自動(dòng)保持比例）、同時(shí)設(shè)置寬高（易失真）的效果差異，強(qiáng)調(diào)“僅設(shè)置單維度尺寸”的規(guī)范用法。教師：采用理實(shí)一體化教學(xué)法，在VSCode中逐行編寫代碼，實(shí)時(shí)預(yù)覽圖像顯示效果；標(biāo)注易錯(cuò)點(diǎn)，引導(dǎo)學(xué)生對(duì)比不同路徑、尺寸配置的差異。

學(xué)生：跟隨演示仿寫代碼，測(cè)試圖像顯示效果；記錄語(yǔ)法規(guī)則、路徑寫法及易錯(cuò)點(diǎn)，梳理圖像屬性配置邏輯。設(shè)計(jì)意圖：以實(shí)例拆解抽象路徑與屬性邏輯，易錯(cuò)點(diǎn)標(biāo)注降低失誤率，貼合職校生具象思維，夯實(shí)重點(diǎn)知識(shí)。時(shí)間：20分鐘。環(huán)節(jié)三：分步實(shí)操，突破難點(diǎn)（亮點(diǎn)：分層實(shí)操+故障排查）分步實(shí)操任務(wù)（獨(dú)立完成，分層設(shè)計(jì)，基于上節(jié)課網(wǎng)頁(yè)優(yōu)化）：

1.基礎(chǔ)層（必做）：

（1）插入網(wǎng)絡(luò)圖像：為網(wǎng)頁(yè)頭部添加長(zhǎng)征主題網(wǎng)絡(luò)圖像，配置src（網(wǎng)絡(luò)URL）、alt（“長(zhǎng)征主題圖”）屬性，設(shè)置width屬性（500px），測(cè)試顯示效果。

（2）插入本地圖像：將個(gè)人準(zhǔn)備的本地素材放入網(wǎng)頁(yè)同級(jí)文件夾，插入圖像并配置屬性，確保路徑正確、圖像正常顯示。

2.提高層（選做）：

（1）優(yōu)化排版：調(diào)整圖像與文本的位置關(guān)系（如圖像后換行），為圖像添加水平線分隔，優(yōu)化圖文排版美觀度。

（2）故障排查：故意植入路徑錯(cuò)誤（如文件名拼寫錯(cuò)誤、路徑層級(jí)錯(cuò)誤）、尺寸配置失誤（寬高比例失衡），引導(dǎo)學(xué)生結(jié)合故障對(duì)照表自主排查修正。教師：巡視指導(dǎo)，重點(diǎn)幫扶路徑書寫、尺寸配置困難的學(xué)生；提供故障對(duì)照表，引導(dǎo)學(xué)生通過(guò)“檢查路徑、核對(duì)屬性、預(yù)覽調(diào)試”排查問題；針對(duì)共性問題（如本地圖像不顯示）集中講解。

學(xué)生：按分層任務(wù)編寫代碼，逐一對(duì)圖像顯示效果測(cè)試；自主排查并修正錯(cuò)誤，記錄故障解決方法；完成基礎(chǔ)任務(wù)后嘗試提高層內(nèi)容。設(shè)計(jì)意圖：分層任務(wù)兼顧不同水平學(xué)生，故障排查針對(duì)性突破路徑、尺寸難點(diǎn)，強(qiáng)化自主實(shí)操與問題解決能力。時(shí)間：25分鐘。環(huán)節(jié)四：小組互評(píng)，優(yōu)化提升（亮點(diǎn)：互評(píng)清單+圖文適配）小組任務(wù)（4人一組）：

1.成果互評(píng)：每組對(duì)照互評(píng)清單（圖像顯示正常、路徑正確、屬性完整、尺寸比例協(xié)調(diào)、排版美觀），交叉檢查網(wǎng)頁(yè)，標(biāo)注問題并提出修改建議。

2.優(yōu)化完善：根據(jù)小組建議修改代碼，補(bǔ)充alt屬性細(xì)節(jié)，調(diào)整圖像尺寸與排版，確保圖文適配、網(wǎng)頁(yè)美觀；關(guān)聯(lián)上節(jié)課超鏈接，可為圖像添加跳轉(zhuǎn)鏈接（如鏈接到圖像來(lái)源頁(yè)面）。

3.成果分享：每組推選1份優(yōu)秀作品，上傳至超星平臺(tái)，由作者分享圖像插入與故障排查思路。教師：明確互評(píng)清單標(biāo)準(zhǔn)，引導(dǎo)小組聚焦路徑書寫、尺寸配置、圖文排版等重難點(diǎn)；點(diǎn)評(píng)優(yōu)秀作品，講解典型錯(cuò)誤（如alt缺失、尺寸失真）的修正方法；總結(jié)圖像屬性使用技巧。

學(xué)生：小組內(nèi)交叉測(cè)試互評(píng)，主動(dòng)發(fā)現(xiàn)并修正問題；學(xué)習(xí)優(yōu)秀作品的圖文排版亮點(diǎn)，優(yōu)化自身網(wǎng)頁(yè)；分享編寫與排查心得，深化知識(shí)理解。設(shè)計(jì)意圖：通過(guò)互評(píng)強(qiáng)化圖像規(guī)范意識(shí)，借助同伴互助解決個(gè)性化問題，成果分享提升表達(dá)與總結(jié)能力，鞏固難點(diǎn)知識(shí)。時(shí)間：15分鐘。環(huán)節(jié)五：課堂小結(jié)，布置作業(yè)1.小結(jié)：梳理本節(jié)課核心內(nèi)容（圖像標(biāo)簽語(yǔ)法、屬性用法、路徑規(guī)則、尺寸配置），回顧重難點(diǎn)與易錯(cuò)點(diǎn)，強(qiáng)化“編寫-預(yù)覽-排查”的實(shí)操流程，強(qiáng)調(diào)圖文適配與語(yǔ)義化。

2.作業(yè)布置：明確課后任務(wù)要求，預(yù)告下一課時(shí)HTML表格知識(shí)點(diǎn)，引導(dǎo)思考如何用表格優(yōu)化網(wǎng)頁(yè)布局。教師：引導(dǎo)學(xué)生自主總結(jié)，補(bǔ)充完善知識(shí)框架；通過(guò)超星平臺(tái)發(fā)布作業(yè)，附上圖像故障排查手冊(cè)供課后復(fù)習(xí)。

學(xué)生：梳理知識(shí)要點(diǎn)與實(shí)操流程，記錄作業(yè)要求；保存網(wǎng)頁(yè)文件，預(yù)習(xí)HTML表格相關(guān)內(nèi)容，思考表格在古詩(shī)文網(wǎng)頁(yè)中的應(yīng)用場(chǎng)景。設(shè)計(jì)意圖：固化知識(shí)體系，強(qiáng)化實(shí)操思維；通過(guò)作業(yè)延伸鞏固重難點(diǎn)，為下一課時(shí)表格布局鋪墊。時(shí)間：10分鐘。三、課后作業(yè)和教學(xué)反思課后作業(yè)1.優(yōu)化本節(jié)課圖文網(wǎng)頁(yè)，新增1張本地圖像（配置完整屬性），調(diào)整尺寸與排版，確保圖文美觀，將網(wǎng)頁(yè)文件上傳至超星平臺(tái)。

2.梳理HTM