教學(xué)設(shè)計(jì)一、基本信息課程名稱Web前端開發(fā)技術(shù)課題名稱CSS基礎(chǔ)應(yīng)用——美化公司簡介頁授課班級授課時(shí)間授課類型理實(shí)一體化、新授課授課地點(diǎn)機(jī)房（有網(wǎng)絡(luò)，接入超星教學(xué)平臺）教學(xué)方法主導(dǎo)：項(xiàng)目引領(lǐng)任務(wù)驅(qū)動教學(xué)法；輔助：理實(shí)一體化教學(xué)法、案例演示法、講練結(jié)合法、小組協(xié)作法教材分析本節(jié)選自教材第四單元4.1“美化公司簡介頁”實(shí)訓(xùn)內(nèi)容，是CSS基礎(chǔ)應(yīng)用的核心實(shí)操課。涵蓋超鏈接偽類、文本屬性、背景屬性、基礎(chǔ)選擇器等知識點(diǎn)，通過大灣區(qū)基建公司簡介頁美化實(shí)例，實(shí)現(xiàn)從HTML結(jié)構(gòu)到可視化頁面的轉(zhuǎn)化，是培養(yǎng)學(xué)生頁面美化能力的入門實(shí)訓(xùn)，為后續(xù)復(fù)雜頁面開發(fā)奠定基礎(chǔ)。學(xué)情分析1.前置基礎(chǔ)：已掌握HTML基礎(chǔ)標(biāo)簽、表格布局及CSS基本語法、外部樣式表引入方法，能編寫簡單HTML頁面結(jié)構(gòu)，具備VSCode基本操作能力。

2.學(xué)情特點(diǎn)：動手能力強(qiáng)、具象思維突出，對頁面美化效果興趣濃厚，抽象邏輯較弱，對偽類、屬性組合應(yīng)用理解較慢。

3.銜接需求：需通過具象案例強(qiáng)化屬性記憶，銜接后續(xù)CSS選擇器、權(quán)重等知識，培養(yǎng)規(guī)范編碼習(xí)慣。教學(xué)目標(biāo)【知識目標(biāo)】：

1.掌握CSS文本屬性、背景屬性及超鏈接偽類的用法，理解基礎(chǔ)選擇器應(yīng)用場景。

2.熟悉AI工具輔助編寫CSS代碼的流程，能優(yōu)化AI生成代碼。

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

1.能獨(dú)立完成公司簡介頁頁眉、banner、內(nèi)容區(qū)、頁腳的美化，實(shí)現(xiàn)指定交互效果。

2.能運(yùn)用AI工具排查代碼錯(cuò)誤，提升編碼效率。

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

1.培養(yǎng)頁面審美與細(xì)節(jié)把控能力，樹立規(guī)范編碼理念。

2.提升團(tuán)隊(duì)協(xié)作與問題解決能力，適應(yīng)AI輔助開發(fā)場景。教學(xué)重點(diǎn)1.CSS文本、背景屬性及超鏈接偽類的綜合應(yīng)用。

2.基于AI工具輔助編寫并優(yōu)化CSS代碼，完成頁面各模塊美化。教學(xué)難點(diǎn)1.超鏈接偽類狀態(tài)（默認(rèn)、hover、當(dāng)前狀態(tài)）的樣式區(qū)分與適配。

2.AI生成代碼的優(yōu)化與調(diào)試，解決樣式?jīng)_突及顯示異常問題。教學(xué)準(zhǔn)備1.硬件：機(jī)房計(jì)算機(jī)、投影儀、網(wǎng)絡(luò)環(huán)境。

2.軟件：VSCode（安裝通義靈碼插件）、超星教學(xué)平臺（上傳案例源碼、素材）。

3.素材：大灣區(qū)基建公司簡介頁HTML模板、背景圖、logo素材、樣式參考圖。板書設(shè)計(jì)核心：1.核心屬性（文本：縮進(jìn)/行高；背景：顏色/圖片；偽類：a:link/hover）；2.AI輔助：提詞→生成→優(yōu)化；3.模塊美化：頁眉→banner→內(nèi)容→頁腳。二、教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動設(shè)計(jì)意圖/時(shí)間環(huán)節(jié)一：情境導(dǎo)入，項(xiàng)目發(fā)布（亮點(diǎn)：AI協(xié)作+案例對比）1.情境展示：呈現(xiàn)大灣區(qū)基建公司簡介頁美化前后對比圖，左側(cè)為無樣式HTML頁面，右側(cè)為完成后效果，聚焦頁眉導(dǎo)航、banner、文本排版的差異。

2.任務(wù)拆解：明確本課時(shí)核心項(xiàng)目“美化公司簡介頁”，拆解為5個(gè)子任務(wù)：

（1）項(xiàng)目文件準(zhǔn)備（創(chuàng)建CSS文件并關(guān)聯(lián)HTML）；

（2）頁眉導(dǎo)航鏈接美化（偽類+邊框效果）；

（3）banner圖響應(yīng)式美化；

（4）內(nèi)容區(qū)文本及二級導(dǎo)航美化；

（5）頁腳美化（背景+居中）。

3.知識鋪墊：簡要回顧外部樣式表引入語法，介紹通義靈碼插件輔助編碼的優(yōu)勢，明確AI提詞核心要素。教師：展示對比案例，講解頁面美化的實(shí)用價(jià)值；拆解任務(wù)并明確每個(gè)子任務(wù)的成果標(biāo)準(zhǔn)；演示超星平臺素材下載方法，介紹AI工具基本用法。

學(xué)生：觀察案例差異，明確學(xué)習(xí)目標(biāo)；下載素材并解壓至指定目錄（D:\design\DawanquWebsite）；啟動VSCode并打開項(xiàng)目文件夾，熟悉素材結(jié)構(gòu)。設(shè)計(jì)意圖：通過視覺對比激發(fā)興趣，拆解任務(wù)降低難度，引入AI工具貼合實(shí)訓(xùn)需求。時(shí)間：10分鐘。環(huán)節(jié)二：新知講授，案例演示（亮點(diǎn)：精準(zhǔn)提詞+代碼優(yōu)化）1.核心知識點(diǎn)講解：

（1）超鏈接偽類：a:link（默認(rèn)）、a:hover（懸停）、.active（當(dāng)前狀態(tài)）的優(yōu)先級及樣式設(shè)置；

（2）文本屬性：text-indent（首行縮進(jìn)）、line-height（行高）、text-align（對齊）的應(yīng)用；

（3）背景與響應(yīng)式：background-color、background-image及min-width、width:100%的響應(yīng)式邏輯。

2.AI輔助編碼演示：

（1）演示頁眉導(dǎo)航美化提詞：復(fù)制導(dǎo)航表格代碼，提詞“為表格添加類menu，定義表格寬1200px居中，鏈接默認(rèn)無下劃線、18px#333，hover時(shí)背景#cc3333、文字白，當(dāng)前狀態(tài)類menu-active加3px下邊框”；

（2）講解AI生成代碼的優(yōu)化要點(diǎn)：補(bǔ)充注釋、調(diào)整line-height實(shí)現(xiàn)垂直居中、修正邊框樣式?jīng)_突。

3.難點(diǎn)提示：偽類樣式書寫順序、banner圖塊級元素設(shè)置避免底部間隙。教師：結(jié)合VSCode實(shí)時(shí)演示知識點(diǎn)，逐行講解屬性含義；示范AI精準(zhǔn)提詞方法，對比生成代碼與優(yōu)化后代碼的差異；標(biāo)注易錯(cuò)點(diǎn)并強(qiáng)調(diào)解決方案。

學(xué)生：跟隨演示記錄知識點(diǎn)，仿寫核心代碼片段；掌握AI提詞技巧，理解代碼優(yōu)化的必要性；記錄易錯(cuò)點(diǎn)及解決方法。設(shè)計(jì)意圖：具象化講解知識點(diǎn)，演示AI輔助流程，為實(shí)操奠定基礎(chǔ)，突破重點(diǎn)。時(shí)間：20分鐘。環(huán)節(jié)三：分層實(shí)操，小組協(xié)作（亮點(diǎn)：分步闖關(guān)+AI答疑）1.基礎(chǔ)任務(wù)（必做，獨(dú)立完成，40分鐘拆分）：

（1）文件準(zhǔn)備（5分鐘）：在css文件夾創(chuàng)建pub.css和about.css，在about.html中添加兩個(gè)CSS文件鏈接，保存并測試關(guān)聯(lián)有效性。

（2）頁眉美化（10分鐘）：復(fù)制導(dǎo)航表格代碼，用AI生成樣式并優(yōu)化，添加menu類及menu-active類，測試hover及當(dāng)前狀態(tài)效果。

（3）banner圖美化（5分鐘）：為img標(biāo)簽添加banner類，用AI生成min-width:1200px、width:100%樣式，設(shè)置為塊級元素。

（4）內(nèi)容區(qū)美化（12分鐘）：為二級導(dǎo)航添加menu-sub類，AI生成樣式；為正文td添加content類，設(shè)置文本縮進(jìn)、行高，優(yōu)化標(biāo)題樣式。

（5）頁腳美化（8分鐘）：為頁腳td添加footer類，設(shè)置背景#ADACAC、行高150px、文本居中，測試垂直居中效果。

2.提升任務(wù)（選做，小組協(xié)作）：

（1）優(yōu)化文本與背景對比度，調(diào)整顏色參數(shù)；

（2）用AI生成代碼注釋，規(guī)范編碼格式；

（3）排查樣式?jīng)_突，記錄解決過程。教師：巡視指導(dǎo)，重點(diǎn)幫扶AI提詞不精準(zhǔn)、樣式不生效的學(xué)生；針對共性問題（如路徑錯(cuò)誤、偽類順序）集中講解；組織小組內(nèi)互助，解答AI生成代碼的調(diào)試疑問。

學(xué)生：按步驟完成實(shí)操任務(wù)，獨(dú)立運(yùn)用AI工具生成代碼并優(yōu)化；實(shí)時(shí)預(yù)覽效果，排查顯示異常；小組協(xié)作完成提升任務(wù)，記錄實(shí)操心得。設(shè)計(jì)意圖：分步實(shí)操貼合職校生動手能力，分層任務(wù)適配差異，AI答疑提升效率，突破難點(diǎn)。時(shí)間：40分鐘。環(huán)節(jié)四：成果展示，點(diǎn)評優(yōu)化（亮點(diǎn)：多維點(diǎn)評+技巧分享）1.成果展示：隨機(jī)抽取4名學(xué)生作品，通過投影儀展示，聚焦三個(gè)維度：

（1）樣式完整性（是否完成所有模塊美化）；

（2）交互效果（偽類狀態(tài)是否正常）；

（3）代碼規(guī)范性（注釋、格式）。

2.點(diǎn)評優(yōu)化：肯定亮點(diǎn)作品的AI提詞技巧與代碼優(yōu)化方式，針對共性問題（如banner圖間隙、文本縮進(jìn)無效）現(xiàn)場演示修正方法。

3.技巧分享：邀請優(yōu)秀學(xué)生分享AI精準(zhǔn)提詞經(jīng)驗(yàn)，總結(jié)樣式?jīng)_突排查技巧。教師：組織展示活動，精準(zhǔn)點(diǎn)評優(yōu)缺點(diǎn)；現(xiàn)場調(diào)試錯(cuò)誤代碼，強(qiáng)化知識點(diǎn)應(yīng)用；整理核心技巧并上傳超星平臺。

學(xué)生：展示個(gè)人作品，傾聽點(diǎn)評意見；修正自身作品錯(cuò)誤，學(xué)習(xí)優(yōu)秀經(jīng)驗(yàn)；記錄技巧要點(diǎn)，完善代碼。設(shè)計(jì)意圖：通過展示暴露問題，點(diǎn)評強(qiáng)化知識點(diǎn)，同伴分享提升學(xué)習(xí)效率。時(shí)間：5分鐘。環(huán)節(jié)五：課堂小結(jié)，布置作業(yè)1.課堂小結(jié)：梳理核心知識點(diǎn)，包括超鏈接偽類、文本與背景屬性的綜合應(yīng)用，AI輔助編碼的“提詞-生成-優(yōu)化”流程，強(qiáng)調(diào)偽類順序、響應(yīng)式設(shè)置等易錯(cuò)點(diǎn)。

2.作業(yè)布置：

（1）獨(dú)立完善公司簡介頁美化，確保所有交互效果正常，添加完整代碼注釋，上傳超星平臺；

（2）總結(jié)10條AI輔助CSS編碼的精準(zhǔn)提詞技巧，結(jié)合本次實(shí)操案例編寫，字?jǐn)?shù)不限。教師：引導(dǎo)學(xué)生共同回顧知識點(diǎn)，構(gòu)建知識框架；明確作業(yè)要求與提交時(shí)間，預(yù)告下節(jié)課內(nèi)容（工匠技能認(rèn)證網(wǎng)頁制作）。

學(xué)生：跟隨回顧整理筆記；記錄作業(yè)要求，規(guī)劃完成時(shí)間；保存項(xiàng)目文件并備份。設(shè)計(jì)意圖：梳理知識體系，通過作業(yè)鞏固實(shí)操能力，強(qiáng)化AI工具應(yīng)用技巧。時(shí)間：5分鐘。三、課后作業(yè)和教學(xué)反思課后作業(yè)1.獨(dú)立完善大灣區(qū)基建公司簡介頁美化，確保頁眉、banner、內(nèi)容區(qū)、頁