《網(wǎng)頁制作案例教程（HTML5+CSS3）》課程單元教學(xué)設(shè)計（2023~2024學(xué)年第2學(xué)期）課程名稱：網(wǎng)頁制作授課年級：2023年級授課學(xué)期：2023-2024學(xué)年第二學(xué)期教師姓名：某某老師2024年2月1日

目錄13779項(xiàng)目1網(wǎng)頁制作入門 項(xiàng)目1網(wǎng)頁制作入門授課信息教學(xué)課題網(wǎng)頁制作入門所屬課程網(wǎng)頁制作學(xué)時4學(xué)時任務(wù)目標(biāo)教學(xué)任務(wù)隨著互聯(lián)網(wǎng)的不斷發(fā)展，前端開發(fā)崗位受到越來越多的關(guān)注，網(wǎng)頁制作是前端開發(fā)的基礎(chǔ)課程。本項(xiàng)目將通過"航天任務(wù)"網(wǎng)頁制作，介紹VSCode開發(fā)工具的安裝和使用，對web基本概念、HTML5的基本結(jié)構(gòu)和語法進(jìn)行詳細(xì)講解。根據(jù)學(xué)習(xí)內(nèi)容同學(xué)們制作"大賽獲獎網(wǎng)頁"頁面。課堂案例課后實(shí)訓(xùn)教學(xué)目標(biāo)素質(zhì)目標(biāo)1.自覺遵守中國軟件行業(yè)基本公約；2.有良好的知識產(chǎn)權(quán)保護(hù)觀念和意識，自覺抵制各種違反知識產(chǎn)權(quán)保護(hù)法規(guī)的行為；3.能自覺遵守企業(yè)規(guī)章制度與產(chǎn)品開發(fā)保密制度；4.遵守有關(guān)隱私信息的政策和規(guī)程，保護(hù)客戶隱私。思政目標(biāo)1.通過“航天任務(wù)”網(wǎng)頁制作，激發(fā)同學(xué)們攀科技高峰的航天夢；2.通過制作“大賽獲獎網(wǎng)頁”的頁面，介紹大賽，激勵學(xué)生努力學(xué)習(xí)。能力目標(biāo)1.會安裝和使用Web開發(fā)工具；2.能夠使用VSCode工具創(chuàng)建簡單的網(wǎng)頁。知識目標(biāo)1.理解網(wǎng)頁基本概念和Web標(biāo)準(zhǔn)；2.熟悉HTML5頁面文檔結(jié)構(gòu)。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)教學(xué)重點(diǎn)VSCode開發(fā)工具的使用，制作網(wǎng)頁步驟。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)難點(diǎn)教學(xué)難點(diǎn)：HTML5頁面基礎(chǔ)。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)策略依據(jù)標(biāo)準(zhǔn)教學(xué)標(biāo)準(zhǔn)1.高等職業(yè)學(xué)校計算機(jī)應(yīng)用技術(shù)專業(yè)教學(xué)標(biāo)準(zhǔn)；2.學(xué)校計算機(jī)應(yīng)用技術(shù)專業(yè)人才培養(yǎng)方案；3.《Web前端開發(fā)》課程大綱；4.《Web前端開發(fā)》--1+X職業(yè)技能等級證書（初級）要求。行業(yè)標(biāo)準(zhǔn)1.GB/T8567-2006計算機(jī)軟件文檔編制規(guī)范。2.GB/T30971-2014軟件工程用于互聯(lián)網(wǎng)的推薦實(shí)踐網(wǎng)站工程、網(wǎng)站管理和網(wǎng)站生存周期。教學(xué)策略教學(xué)方法講授演示為主，案例教學(xué)法、分組討論法、任務(wù)驅(qū)動法。教材選用教材《網(wǎng)頁制作案例教程（HTML5+CSS3）》西安電子科技大學(xué)出版社，王淑敏主編。參考教材《Web前端開發(fā)實(shí)訓(xùn)案例教程（初級）》、《Web前端開發(fā)實(shí)訓(xùn)案例教程（中級）》1+x證書Web前端開發(fā)職業(yè)技能等級考試實(shí)訓(xùn)案例教程北京新奧時代科技有限責(zé)任公司編寫，中國工信出版集團(tuán)，電子工業(yè)出版社2019。活動安排教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖與資源課前探索網(wǎng)頁基本概念、VsCode的安裝與使用、頁面文檔結(jié)構(gòu)1.教師教學(xué)平臺下發(fā)《初識HTML5》錄課視頻，下發(fā)測試題；2.學(xué)生了解航天飛行史。1.學(xué)生思考《網(wǎng)頁制作》課程是做什么的；2.接收學(xué)習(xí)任務(wù)，自主觀看視頻，對網(wǎng)頁制作有初步了解1.通過制作“航天飛行任務(wù)”網(wǎng)頁，激發(fā)同學(xué)們勇攀科技高峰的夢想。2.教師借助信息化手段和資源，激發(fā)學(xué)生主動學(xué)習(xí)的意識，提高課堂效率；3.課前練習(xí)題可以預(yù)習(xí)新知，根據(jù)數(shù)據(jù)及時了解學(xué)生知識掌握情況，并及時調(diào)整教學(xué)內(nèi)容。課堂教學(xué)項(xiàng)目引入（10min）引入案例：“航天飛行任務(wù)”網(wǎng)頁1.引入案例：“航天飛行任務(wù)”頁面；2.老師扮演客戶，向?qū)W生詢問項(xiàng)目進(jìn)展，提出項(xiàng)目新需求。學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識。1.能夠與客戶和主管及時溝通前端開發(fā)任務(wù)需求和項(xiàng)目進(jìn)度狀況；2.能及時收集用戶反饋，提升前端開發(fā)成果的實(shí)用性、易用性。什么是網(wǎng)頁，什么是網(wǎng)站。1.對新課進(jìn)行講解前，先讓學(xué)生分組討論；2.教師對上述問題進(jìn)行解釋。小組代表對以上問題發(fā)表見解、分享討論結(jié)果。以學(xué)生為中心，啟發(fā)學(xué)生思考通過小組討論、分組匯報的方式調(diào)動學(xué)生的學(xué)習(xí)積極性。新知講解與實(shí)訓(xùn)（15min）Web的基本概念：網(wǎng)頁和網(wǎng)站（5min）教師總結(jié)網(wǎng)頁、網(wǎng)站。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式及細(xì)致講解，使學(xué)生熟悉Web前端開發(fā)基本概念。Web的基本概念：瀏覽器、Web標(biāo)準(zhǔn)（5min）以提問和補(bǔ)充的方式學(xué)習(xí)瀏覽器、Web標(biāo)準(zhǔn)概念。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。Web的基本概念：URL地址（5min）以提問和補(bǔ)充的方式學(xué)習(xí)URL概念。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。新知講解與實(shí)訓(xùn)（15min）HTML和HTML5：HTML發(fā)展歷程（）1．教師展示PPT對“HTML語言”的概念及發(fā)展歷史進(jìn)行簡單介紹。2.教師展示PPT對HTML從2.0版到3.2版、4.0版，再到1999年的4.01版的各個版本的區(qū)別與聯(lián)系。3.教師展示PPT對HTML5的出現(xiàn)與發(fā)展進(jìn)行講解，并分析其優(yōu)缺點(diǎn)。

學(xué)生自主提問，教師對疑難問題進(jìn)行解答。學(xué)生了解HTML發(fā)展歷程、HTML5及HTML5的優(yōu)勢HTML和HTML5：HTML5教師展示PPT指出HTML5增加了很多新功能和新特性。學(xué)生自主提問，教師對疑難問題進(jìn)行解答。HTML和HTML5：HTML5優(yōu)勢教師展示PPT，針對HTML5的“解決了跨瀏覽器問題、新增了多個新特性、用戶優(yōu)先的原則、化繁為簡的優(yōu)勢”優(yōu)勢分別進(jìn)行講解，并聯(lián)系實(shí)際舉例說明。學(xué)生自主提問，教師對疑難問題進(jìn)行解答。總結(jié)評價（5min）總結(jié)該節(jié)課所講的知識點(diǎn)。對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息引入開發(fā)工具（5min）Web前端開發(fā)工具1.教師和學(xué)生互動：我們知道，創(chuàng)建文檔可以使用word，創(chuàng)建數(shù)據(jù)表可以使用excel，那么創(chuàng)建HTML網(wǎng)頁可以使用哪些工具呢？網(wǎng)頁制作過程中，創(chuàng)建HMTL5網(wǎng)頁源代碼的工具很多，介紹Notepad++、WebStorm、Dreamweaver、VSCode。1.認(rèn)真聽講；2.學(xué)生實(shí)際操作。通過教師的講解，學(xué)生進(jìn)行實(shí)際操作，在實(shí)踐中掌握知識點(diǎn)新知講解（15min）VSCode的下載和安裝1.演示VSCode工具的下載和安裝；2.演示VSCode工具的配置和使用。1.認(rèn)真聽講；2.學(xué)生實(shí)際操作。通過講解VSCode的使用，促使同學(xué)重視軟件開發(fā)工具，并有意識的選擇高效的開發(fā)工具實(shí)訓(xùn)練習(xí)（15min）學(xué)生安裝配置VSCode1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題。總結(jié)評價（10min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向。1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人。1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息引入任務(wù)（3min）航天飛行任務(wù)通過播放“央視虎年春晚，神十三三位航天員在除夕零點(diǎn)鐘聲敲響時刻，與地面視頻連線，共同迎接春節(jié)”視頻，回顧2021年我國在航天航空方面的輝煌成就。2021年中國航天一次又一次挺進(jìn)太空，完成了震驚世界的歷史性壯舉。學(xué)生觀看視頻回顧啟發(fā)學(xué)生民族自豪感和愛國熱情。動手實(shí)踐（20min）“航天飛行任務(wù)”頁面1.教師分析網(wǎng)頁內(nèi)容；2.通過編寫第一個HTML頁面；2.教師講解第一個html網(wǎng)頁。學(xué)生認(rèn)真聽講并理解相關(guān)概念；通過案例講解，使學(xué)生網(wǎng)頁編程有初步的了解，引起學(xué)生的興趣。實(shí)訓(xùn)練習(xí)（22min）學(xué)生動手編寫第一個HTML頁面1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況2.對實(shí)訓(xùn)中的問題進(jìn)行解答1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度。課間休息總結(jié)評價（10min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向。1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人。1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。動手探索（5min）HTML5默認(rèn)文檔結(jié)構(gòu)引導(dǎo)學(xué)生分析默認(rèn)網(wǎng)頁的構(gòu)成學(xué)生使用VSCode工具新建一個默認(rèn)文檔的網(wǎng)頁，分組觀察、討論頁面代碼構(gòu)成，以及每個部分的作用<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>無標(biāo)題文檔</title></head><body></body></html>熟悉HTML5文檔基本結(jié)構(gòu)，對后期寫代碼做鋪墊。新知講解（10min）HTML5文檔基本格式1.教師分析默認(rèn)文檔結(jié)構(gòu)，講解HTML5文檔的基本格式及構(gòu)成標(biāo)記。2.教師展示PPT對“HTML文檔頭部相關(guān)標(biāo)記”進(jìn)行講解。3.教師分別對<title>標(biāo)記、<meta/>標(biāo)記、<link>標(biāo)記及<style>標(biāo)記的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。學(xué)生自主提問，教師對疑難問題進(jìn)行解答。HTML5語法1.教師展示PPT對“HTML5語法”進(jìn)行簡單介紹；2.教師展示PPT，對“HTML5語法”規(guī)則進(jìn)行分析，并與之前的各種版本進(jìn)行對比分析；3.教師針對HTML5語法中的“標(biāo)簽不區(qū)分大小寫、允許屬性值不使用引號、允許部分屬性值的屬性省略”通過代碼演示，并舉例說明。新知講解（15min）HTML標(biāo)記1.教師展示PPT對“單標(biāo)記與雙標(biāo)記”、“注釋標(biāo)記”的概念進(jìn)行講解，并指出“單標(biāo)記與雙標(biāo)記”的不同；2.教師舉例說明常見的單標(biāo)記、雙標(biāo)記以及注釋標(biāo)記；3.教師通過代碼對“單標(biāo)記與雙標(biāo)記”、“注釋標(biāo)記”的使用方法進(jìn)行演示。學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。標(biāo)記的屬性1.教師和學(xué)生互動：在網(wǎng)頁制作時，如果大家想要控制標(biāo)記的樣式，比如：希望標(biāo)題文本的字體為“微軟雅黑”且居中顯示，或者段落文本中的某些名詞顏色突出顯示等問題。此時僅僅依靠HTML標(biāo)記的默認(rèn)顯示樣式已經(jīng)不能滿足需求了，需要使用“HTML標(biāo)記的屬性”進(jìn)行控制。2.教師展示PPT對“標(biāo)記的屬性”進(jìn)行講解，并使用代碼進(jìn)行實(shí)時演示。注釋1.教師和學(xué)生互動2.教師展示PPT對“注釋”進(jìn)行講解，并使用代碼進(jìn)行實(shí)時演示?？偨Y(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向。1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人。1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題。多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課后實(shí)踐如圖，完成“大賽獲獎”網(wǎng)頁的主要內(nèi)容部。教師通過學(xué)習(xí)通下發(fā)課后任務(wù)。學(xué)生按照要求編寫程序，并提交答案。通過拓展任務(wù)強(qiáng)化課堂內(nèi)容；通過制作“大賽獲獎網(wǎng)頁”的頁面，介紹職業(yè)技能大賽，激勵學(xué)生努力學(xué)習(xí)。反思與改進(jìn)

項(xiàng)目2添加網(wǎng)頁內(nèi)容授課信息教學(xué)課題添加網(wǎng)頁內(nèi)容所屬課程網(wǎng)頁制作學(xué)時8學(xué)時任務(wù)目標(biāo)教學(xué)任務(wù)文本、圖像、超鏈接是網(wǎng)頁中的重要元素，使用列表頁面布局更整齊，列表也是常見的網(wǎng)頁元素。本項(xiàng)目通過在頁面上面添加文本、圖像和列表等元素，制作了“念奴嬌·赤壁懷古”詩詞網(wǎng)頁，并通過在頁面上面添加超鏈接元素，實(shí)現(xiàn)不同頁面之間的跳轉(zhuǎn)。根據(jù)學(xué)習(xí)內(nèi)容同學(xué)們完成制作寫作背景介紹網(wǎng)頁。課堂案例課后實(shí)訓(xùn)教學(xué)目標(biāo)素質(zhì)目標(biāo)1.自覺遵守中國軟件行業(yè)基本公約；2.有良好的知識產(chǎn)權(quán)保護(hù)觀念和意識，自覺抵制各種違反知識產(chǎn)權(quán)保護(hù)法規(guī)的行為；3.能自覺遵守企業(yè)規(guī)章制度與產(chǎn)品開發(fā)保密制度；4.遵守有關(guān)隱私信息的政策和規(guī)程，保護(hù)客戶隱私。思政目標(biāo)通過“念奴嬌·赤壁懷古”詩詞網(wǎng)頁制作，感受作者博大的胸襟和豪邁的氣概。能力目標(biāo)1.會使用標(biāo)題、段落、圖像、列表標(biāo)記制作簡單的網(wǎng)頁；2.能夠通過在頁面上面添加超鏈接元素，實(shí)現(xiàn)不同頁面之間的跳轉(zhuǎn)。知識目標(biāo)1.掌握標(biāo)題、段落等文本標(biāo)記的使用；2.了解文本格式化標(biāo)記，會輸入特殊字符；3.掌握圖像標(biāo)記，會在網(wǎng)頁中插入圖像，設(shè)置圖像屬性；4.熟悉超鏈接標(biāo)記，知道超鏈接分類；5.熟悉列表標(biāo)記，能夠定義列表，了解列表嵌套。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)教學(xué)重點(diǎn)：標(biāo)題標(biāo)記、段落標(biāo)記、超鏈接標(biāo)記和列表標(biāo)記措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)難點(diǎn)教學(xué)難點(diǎn)：定義列表措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固?；顒影才沤虒W(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖與資源課前探索標(biāo)題、段落、文本格式化、圖像等標(biāo)記的使用1.教師教學(xué)平臺下發(fā)《文本和圖像》錄課視頻，下發(fā)測試題；2.引導(dǎo)學(xué)生思考：一篇結(jié)構(gòu)清晰的文章通常都有標(biāo)題和段落，那么如何使用HTML5語言創(chuàng)建網(wǎng)頁中的標(biāo)題和段落呢？3.引導(dǎo)學(xué)生思考：在網(wǎng)站中，我們可以看到絢麗多彩的圖片。那么，目前網(wǎng)頁上的圖片怎么添加呢？1.接收學(xué)習(xí)任務(wù)，自主觀看視頻，對網(wǎng)頁中使用文本和圖像有初步了解；2.學(xué)生上網(wǎng)準(zhǔn)備“念奴嬌·赤壁懷古”相關(guān)資料，準(zhǔn)備做詩詞網(wǎng)頁。1.通過“念奴嬌·赤壁懷古”詩詞網(wǎng)頁制作，感受作者博大的胸襟和豪邁的氣概。2.教師借助信息化手段和資源，激發(fā)學(xué)生主動學(xué)習(xí)的意識，提高課堂效率；3.課前練習(xí)題可以預(yù)習(xí)新知，根據(jù)數(shù)據(jù)及時了解學(xué)生知識掌握情況，并及時調(diào)整教學(xué)內(nèi)容。課堂教學(xué)項(xiàng)目引入（10min）引入案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁制作（5min）1.引入案例：“念奴嬌·赤壁懷古”詩詞頁面2.老師扮演客戶，向?qū)W生詢問項(xiàng)目進(jìn)展，提出項(xiàng)目新需求學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識。1.能夠與客戶和主管及時溝通前端開發(fā)任務(wù)需求和項(xiàng)目進(jìn)度狀況；2.能及時收集用戶反饋，提升前端開發(fā)成果的實(shí)用性、易用性。引入什么是文本標(biāo)記和圖像標(biāo)記？（5min）1.教師拋出問題：在瀏覽網(wǎng)頁時，我們可以看到圖文并茂的頁面。那么，這些頁面是如何實(shí)現(xiàn)的呢？引導(dǎo)學(xué)生積極參與課堂介紹和討論；3.教師對上述問題進(jìn)行解釋。分享討論結(jié)果。請小組代表對以上問題發(fā)表見解。通過過觀察頁面，討論分析文本和圖像分布。新知講解與實(shí)訓(xùn)（20min）標(biāo)題標(biāo)記（10min）1.教師展示標(biāo)題樣式，文檔結(jié)構(gòu)；2．教師和學(xué)生分析標(biāo)題格式；<hn屬性名=“屬性值”>標(biāo)題文本</hn>3.教師演示標(biāo)題標(biāo)記的使用。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握標(biāo)題及常用屬性，會使用標(biāo)題標(biāo)記及常用屬性。標(biāo)題標(biāo)記中屬性（10min）1.教師拋出問題：在word文檔中標(biāo)題不一定都是左對齊的，可以通過文字的對齊方式改變標(biāo)題在文檔中的位置。在網(wǎng)頁中如何實(shí)現(xiàn)？2.教師演示標(biāo)題標(biāo)記常用屬性align的使用。實(shí)訓(xùn)練習(xí)（10min）實(shí)現(xiàn)案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁中的標(biāo)題效果1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度?？偨Y(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向。1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人。1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。 課間休息引入段落標(biāo)記、換行及水平線標(biāo)記（5min）段落標(biāo)記、換行及水平線標(biāo)記1.拋出問題：在網(wǎng)頁中展現(xiàn)一篇新聞，除了上述學(xué)到的標(biāo)題外，還有什么元素？2.對拋出的問題進(jìn)行解答1.學(xué)生思考問題并回答；2.按照教師的解答思考如何實(shí)現(xiàn)。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解（10min）段落標(biāo)記及常用屬性1.教師展示段落樣式；2.教師和學(xué)生分析格式<p屬性名="屬性值">段落文本</p>3.教師演示段落標(biāo)記及屬性的使用學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握標(biāo)題及常用屬性，會使用標(biāo)題標(biāo)記及常用屬性。實(shí)訓(xùn)練習(xí)（5min）實(shí)現(xiàn)案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁中的段落效果1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度。新知講解（15min）換行標(biāo)記（5min）1.教師展示換行樣式；2.講解換行標(biāo)記；<br/>標(biāo)記用來進(jìn)行換行，不產(chǎn)生一個新段落；3.教師講解演示換行標(biāo)記的使用。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握換行標(biāo)記，會使用換行標(biāo)記。水平線標(biāo)記（10min）1.教師展示水平線樣式；2.講解水平線標(biāo)記；<hr屬性名="屬性值"/>；3.教師講解演示水平線標(biāo)及常用屬性的使用。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握水平線標(biāo)記及常用屬性，會使用水平線標(biāo)記及常用屬性。實(shí)訓(xùn)練習(xí)（8min）實(shí)現(xiàn)案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁中的換行和水平線效果1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度。總結(jié)評價（2min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息新知講解及實(shí)訓(xùn)（15min）文本格式化標(biāo)記（8min）1.教師展示文本特殊樣式，引入文本格式化標(biāo)記；2.講解文本格式化標(biāo)記；3.教師講解演示水平線標(biāo)及常用屬性的使用。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速了解文本格式化標(biāo)記。特殊字符（7min）1.以版權(quán)符號為例引入特殊字符；特殊字符指普通鍵盤上不存在的符號2.講解演示常用特殊字符；1.教師展示文本特殊樣式；2.講解文本格式化標(biāo)記；3.展示w3school網(wǎng)站上其它特殊字符。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉特殊字符，會在網(wǎng)頁中插入特殊字符。分組討論（5min）引入圖像格式1.教師拋出問題：在網(wǎng)站中，我們可以看到絢麗多彩的圖片。那么，目前網(wǎng)頁上常用的圖像格式有哪些呢，請結(jié)合它們的優(yōu)缺點(diǎn)進(jìn)行說明；1.對上述問題進(jìn)行解釋：簡而言之，在網(wǎng)頁中小圖片或網(wǎng)頁基本元素如圖標(biāo)、按鈕等考慮GIF或PNG-8，半透明圖像考慮PNG-24，類似照片的圖像則考慮JPG。分享討論結(jié)果；請小組代表對以上問題發(fā)表見解。以學(xué)生為中心，啟發(fā)學(xué)生思考通過小組討論、分組匯報的方式調(diào)動學(xué)生的學(xué)習(xí)積極性。新知講解（15min）常用圖像格式（2min）1.教師帶領(lǐng)學(xué)生查看網(wǎng)頁中的圖像，總結(jié)網(wǎng)頁中常用的圖像格式；2.教師展示PPT對GIF、JPG和PNG三種常用的圖像格式進(jìn)行講解，比較三種格式的異同，并指出其優(yōu)缺點(diǎn)；3.提問學(xué)生，三種圖像的使用場合。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速了解常見圖像格式。圖像標(biāo)記（13min）1.教師和學(xué)生互動：在網(wǎng)頁中隨處可見各種各樣的圖像，比如：廣告圖、推廣圖、輪播圖等。大家在網(wǎng)頁中都見過哪些圖片呢？然后，教師使用PPT展示網(wǎng)頁中各式各樣的圖片效果；2.教師展示PPT對“圖像標(biāo)記”及其屬性進(jìn)行講解，并使用代碼進(jìn)行實(shí)時演示。<imgsrc=“圖像url”屬性名=“屬性值”/>學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握圖像標(biāo)記，會使用圖像標(biāo)記，制作圖文并茂的網(wǎng)頁。實(shí)訓(xùn)練習(xí)（8min）實(shí)現(xiàn)案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁中的圖像效果1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度?？偨Y(jié)評價（2min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息引入圖像地址（5min）問題引入圖像地址1.教師拋出問題：上節(jié)課案例中，我們在如何在網(wǎng)頁中找到圖片的？思考下為什么這樣做？2.對拋出的問題進(jìn)行解答1.學(xué)生思考問題并回答；2.按照教師的解答思考如何實(shí)現(xiàn)。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（5min）絕對路徑1.教師通過文件夾的層級關(guān)系對“路徑”進(jìn)行講解，并指出網(wǎng)頁中的路徑通常分為“相對路徑與絕對路徑”兩種；2.教師展示PPT對“絕對路徑”進(jìn)行講解，并舉例說明。學(xué)生練習(xí)，教師對疑難問題進(jìn)行解答。了解絕對路徑新知講解與實(shí)訓(xùn)（10min）相對路徑：圖片與html文件在同一個文件夾。教師展示PPT對“相對路徑”進(jìn)行講解，并對“圖片與html文件在同一個文件夾”情況進(jìn)行演示。學(xué)生練習(xí)，教師對疑難問題進(jìn)行解答。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握圖像路徑，會使用圖像路徑引入不同位置的圖片。新知講解與實(shí)訓(xùn)（10min）相對路徑：圖像文件位于html文件的下一級文件夾。教師展示PPT對“相對路徑”進(jìn)行講解，并對“圖像文件位于html文件的下一級文件夾”情況進(jìn)行演示。學(xué)生練習(xí)，教師對疑難問題進(jìn)行解答。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握圖像路徑，會使用圖像路徑引入不同位置的圖片。新知講解與實(shí)訓(xùn)（10min）相對路徑：圖像文件位于html文件的上一級文件夾。教師展示PPT對“相對路徑”進(jìn)行講解，并對“圖像文件位于html文件的上一級文件夾”情況進(jìn)行演示。學(xué)生練習(xí)，教師對疑難問題進(jìn)行解答。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握圖像路徑，會使用圖像路徑引入不同位置的圖片。實(shí)訓(xùn)練習(xí)（5min）實(shí)現(xiàn)案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁中的圖像在不同位置引入刀網(wǎng)頁中1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度。課間休息課堂教學(xué)項(xiàng)目引入（10min）引入案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁實(shí)現(xiàn)頁面跳轉(zhuǎn)（5min）1.引入案例：“念奴嬌·赤壁懷古”詩詞頁面實(shí)現(xiàn)頁面跳轉(zhuǎn)2.老師扮演客戶，向?qū)W生詢問項(xiàng)目進(jìn)展，提出項(xiàng)目新需求學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識。1.能夠與客戶和主管及時溝通前端開發(fā)任務(wù)需求和項(xiàng)目進(jìn)度狀況；2.能及時收集用戶反饋，提升前端開發(fā)成果的實(shí)用性、易用性。引入什么是超鏈接？（5min）1.教師拋出問題：當(dāng)我們打開一個網(wǎng)站時，例如許昌職業(yè)技術(shù)學(xué)院官網(wǎng)“/”，通過點(diǎn)擊頁面中的導(dǎo)航或者帶有鏈接地址的文字就可以跳轉(zhuǎn)到不同的頁面，那么如何實(shí)現(xiàn)網(wǎng)站中的頁面跳轉(zhuǎn)呢？2.教師對上述問題進(jìn)行解釋。分享討論結(jié)果。請小組代表對以上問題發(fā)表見解。以學(xué)生為中心，啟發(fā)學(xué)生思考通過小組討論、分組匯報的方式調(diào)動學(xué)生的學(xué)習(xí)積極性。新知講解（20min）超鏈接標(biāo)記（10min）講解創(chuàng)建超鏈接：1.教師和學(xué)生互動：教師打開360導(dǎo)航網(wǎng)址/，點(diǎn)擊頁面中的導(dǎo)航文字，就可以跳轉(zhuǎn)到相應(yīng)的頁面，這就是通過給文字創(chuàng)建超鏈接來實(shí)現(xiàn)的。2.教師針對超鏈接的作用以及基本語法格式進(jìn)行講解，并進(jìn)行演示說明。<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">文本或圖像</a>3.教師展示PPT對“創(chuàng)建超鏈接”進(jìn)行講解，并使用代碼進(jìn)行實(shí)時演示。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握超鏈接標(biāo)記，會使用超鏈接標(biāo)記實(shí)現(xiàn)頁面的跳轉(zhuǎn)。超鏈接常用屬性（10min）1.講解超鏈接常用屬性；在上面的語法中，<a>標(biāo)記是一個行內(nèi)標(biāo)記，用于定義超鏈接，href和target為其常用屬性，具體解釋如下：引入超鏈接?href：用于指定鏈接目標(biāo)的url地址，當(dāng)為<a>標(biāo)記應(yīng)用href屬性時，它就具有了超鏈接的功能。?target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，意為在原窗口中打開，_blank為在新窗口中打開。2.演示超鏈接的常用屬性。學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握超鏈接標(biāo)記的常用屬性，會使用超鏈接標(biāo)記常用屬性。實(shí)訓(xùn)練習(xí)（10min）實(shí)現(xiàn)案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁與作者生平頁面跳轉(zhuǎn)1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度?？偨Y(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。 課間休息引入錨點(diǎn)鏈接（5min）引入錨點(diǎn)鏈接1.教師和學(xué)生互動：如果網(wǎng)頁內(nèi)容較多，頁面過長，瀏覽網(wǎng)頁時就需要不斷地拖動滾動條，來查看所需要的內(nèi)容，這樣效率較低且不方便。那么如何提高信息的檢索速度呢？2.對拋出的問題進(jìn)行解答。1.學(xué)生思考問題并回答；2.按照教師的解答思考如何實(shí)現(xiàn)。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（10min）錨點(diǎn)鏈接1.教師針對“錨點(diǎn)鏈接”的作用及創(chuàng)建方法進(jìn)行講解，并進(jìn)行演示說明。2.教師對“創(chuàng)建超鏈接”與“錨點(diǎn)鏈接”進(jìn)行對比分析，并總結(jié)其注意事項(xiàng)。認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握錨點(diǎn)鏈接，在網(wǎng)頁中會使用錨點(diǎn)鏈接。實(shí)訓(xùn)練習(xí)（10min）在案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁中添加錨點(diǎn)鏈接1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況2.對實(shí)訓(xùn)中的問題進(jìn)行解答1.提出問題；2.按照教師的解答修改問題；通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度。分組討論（5min）為了使網(wǎng)頁更易讀，經(jīng)常將網(wǎng)頁信息以列表的形式呈現(xiàn)，例如，微博熱搜，淘寶首頁商品分類、排列有序，呈現(xiàn)為列表的形式。實(shí)，在HTML5中，提供了3種常用的列表，分別為無序列表、有序列表和定義列表。那么，請舉例說明什么是“無序列表”和“有序列表”？它們之間有什么區(qū)別？教師對上述問題進(jìn)行解釋：?無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因?yàn)槠涓鱾€列表項(xiàng)之間為并列關(guān)系，沒有順序級別之分。?有序列表即為有排列順序的列表，其各個列表項(xiàng)會按照一定的順序排列，例如網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。1.學(xué)生思考問題并討論；2.小組代表對以上問題發(fā)表見解。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（15min）列表標(biāo)記——ul元素1.教師展示PPT對“無序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說明。2.教師展示PPT，對“無序列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼演示。<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li></ul>3.教師指出定義“無序列表”時需要注意的問題，并給與解答。學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握無序列表及相關(guān)屬性，會使用無序列表。課間休息新知講解與實(shí)訓(xùn)（15min）列表標(biāo)記——ol元素1.教師展示PPT對“有序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說明。2.教師展示PPT，對“有序列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼演示。<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li></ol>3.教師指出定義“有序列表”時需要注意的問題，并給與解答。學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握有序列表及相關(guān)屬性，會使用有序列表。新知講解與實(shí)訓(xùn)（15min）列表標(biāo)記——dl元素1.教師展示PPT對“自定義列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說明。2.教師展示PPT，對“自定義列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼演示。<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd><dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋2</dd></dl>3.教師指出定義“自定義列表”時需要注意的問題，并給與解答。學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握無序列表及相關(guān)屬性，會使用無序列表。實(shí)訓(xùn)練習(xí)（10min）實(shí)現(xiàn)案例：“念奴嬌·赤壁懷古”詩詞網(wǎng)頁中的列表效果1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度。總結(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課后實(shí)踐如圖，制作“寫作背景”網(wǎng)頁下面我們通過制作”寫作背景”網(wǎng)頁，實(shí)現(xiàn)單擊“返回主頁”超鏈接時，跳轉(zhuǎn)到“念奴嬌·赤壁懷古”網(wǎng)頁。教師通過學(xué)習(xí)通下發(fā)課后任務(wù)。學(xué)生按照要求編寫程序，并提交答案。通過拓展任務(wù)強(qiáng)化課堂內(nèi)容。反思與改進(jìn)

項(xiàng)目3CSS基礎(chǔ)授課信息教學(xué)課題CSS基礎(chǔ)所屬課程網(wǎng)頁制作學(xué)時6學(xué)時任務(wù)目標(biāo)教學(xué)任務(wù)通過前面的學(xué)習(xí)和實(shí)踐，我們已經(jīng)認(rèn)識了HTML標(biāo)記，雖然早期的HTML中帶有一些用于設(shè)置樣式的標(biāo)記和屬性，但是它們遠(yuǎn)遠(yuǎn)不能滿足網(wǎng)頁設(shè)計的要求。CSS的出現(xiàn)解決了這個問題，它提供了豐富的樣式屬性，能夠精確定義頁面樣式，并且能夠使樣式與內(nèi)容進(jìn)行分離。本項(xiàng)目通過制作“藥王-孫思邈”網(wǎng)頁使同學(xué)們理解CSS的規(guī)則，掌握CSS引入方式，運(yùn)用基本CSS選擇器設(shè)置網(wǎng)頁樣式。根據(jù)學(xué)習(xí)內(nèi)容同學(xué)們完成“故宮”網(wǎng)頁制作。。課堂案例課后實(shí)訓(xùn)教學(xué)目標(biāo)素質(zhì)目標(biāo)1.自覺遵守中國軟件行業(yè)基本公約；2.有良好的知識產(chǎn)權(quán)保護(hù)觀念和意識，自覺抵制各種違反知識產(chǎn)權(quán)保護(hù)法規(guī)的行為；3.能自覺遵守企業(yè)規(guī)章制度與產(chǎn)品開發(fā)保密制度；4.遵守有關(guān)隱私信息的政策和規(guī)程，保護(hù)客戶隱私。思政目標(biāo)1.通過“藥王-孫思邈”頁面制作，激發(fā)學(xué)生向偉大的歷史人物學(xué)習(xí)，樹立正確的人生觀，價值觀，不斷的積極進(jìn)取、努力奮斗。2.通過“故宮”網(wǎng)頁制作，使同學(xué)們對我國古代建筑有一定的認(rèn)識，感受中國悠久的歷史文化，提升民族自豪感。能力目標(biāo)1.能夠根據(jù)實(shí)際情況選擇合適的選擇器和引入方式定義CSS樣式；2.能夠解決頁面中優(yōu)先級、繼承性和層疊性問題。知識目標(biāo)1.了解CSS標(biāo)準(zhǔn)及發(fā)展歷史；2.掌握CSS樣式規(guī)則及引入方式；3.熟悉CSS基本選擇器；4.理解CSS的優(yōu)先級、繼承性和層疊性。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)教學(xué)重點(diǎn)：樣式規(guī)則、引入方式和基礎(chǔ)選擇器。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)難點(diǎn)教學(xué)難點(diǎn)：CSS層疊性與繼承性、CSS優(yōu)先級。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固?；顒影才沤虒W(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖與資源課前探索CSS的發(fā)展史、CSS樣式規(guī)則、CSS樣式表引入方式以及CSS基礎(chǔ)選擇器、優(yōu)先級1.教師教學(xué)平臺下發(fā)《CSS入門》錄課視頻，下發(fā)測試題；2.學(xué)生思考，在網(wǎng)頁設(shè)計中，運(yùn)用CSS3技術(shù)能夠讓原有的網(wǎng)站變得趣味盎然，很多站點(diǎn)都為自己的頁面添加了各種炫酷的CSS3效果。但是CSS3技術(shù)是怎樣發(fā)展起來的？哪些瀏覽器能夠很好的兼容CSS3呢？1.接收學(xué)習(xí)任務(wù)，自主觀看視頻，對網(wǎng)頁中使用文本和圖像有初步了解；2.學(xué)生上網(wǎng)準(zhǔn)備“藥王-孫思邈”相關(guān)資料。1.通過制作“藥王-孫思邈”網(wǎng)頁，激發(fā)學(xué)生向偉大的歷史人物學(xué)習(xí)，樹立正確的人生觀，價值觀，不斷的積極進(jìn)取、努力奮斗。2.教師借助信息化手段和資源，激發(fā)學(xué)生主動學(xué)習(xí)的意識，提高課堂效率；3.課前練習(xí)題可以預(yù)習(xí)新知，根據(jù)數(shù)據(jù)及時了解學(xué)生知識掌握情況，并及時調(diào)整教學(xué)內(nèi)容。課堂教學(xué)項(xiàng)目引入（10min）引入案例：“藥王-孫思邈”網(wǎng)頁（5min）1.引入案例：“藥王-孫思邈”頁面。2.老師扮演客戶，向?qū)W生詢問項(xiàng)目進(jìn)展，提出項(xiàng)目新需求3.學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識。1.能夠與客戶和主管及時溝通前端開發(fā)任務(wù)需求和項(xiàng)目進(jìn)度狀況；2.能及時收集用戶反饋，提升前端開發(fā)成果的實(shí)用性、易用性。引入什么是CSS，以及CSS都有哪些作用？CSS里面都有什么？（5min）1.制作網(wǎng)頁的時候，我們經(jīng)常需要使用CSS制作更多的字體選擇、更方便的樣式效果、更絢麗的圖形動畫。那么，請同學(xué)們討論下：什么是“CSS”，以及CSS都有哪些作用，有什么？3.教師對上述問題進(jìn)行解釋：?CSS基礎(chǔ)選擇器主要包括四種，具體如下：20世紀(jì)90年代初，HTML語言的誕生，各種形式的樣式表也隨之出現(xiàn)。1994年哈坤·利提出了CSS的最初建議，CSS發(fā)展至今出現(xiàn)了4個版本，對它們的具體介紹如下：（1）CSS11996年12月W3C發(fā)布了第一個有關(guān)樣式的標(biāo)準(zhǔn)CSS1。這個版本中，已經(jīng)包含了font的相關(guān)屬性、顏色與背景的相關(guān)屬性、文字的相關(guān)屬性、box的相關(guān)屬性等。（2）CSS21985年5月，CSS2正式推出，這個版本開始使用樣式表結(jié)構(gòu)，該版本也是目前正在使用的版本。（3）CSS2.12004年2月，CSS2.1正式推出。它在CSS2的基礎(chǔ)上略微做了改動，刪除了許多不被瀏覽器支持的屬性。（4）CSS3早在2001年，W3C就著手開始準(zhǔn)備開發(fā)CSS第三版規(guī)范。雖然完整的、規(guī)范權(quán)威的CSS3標(biāo)準(zhǔn)還沒有塵埃落定。但是各主流瀏覽器已經(jīng)開始支持其中的絕大部分特性。?CSS3給我們帶來了眾多全新的設(shè)計體驗(yàn)，但是并不是所有的瀏覽器都完全支持它。其中，谷歌（Chrome）和Safari瀏覽器對從CSS3的支持較好。小組代表對以上問題發(fā)表見解。以學(xué)生為中心，啟發(fā)學(xué)生思考通過小組討論、分組匯報的方式調(diào)動學(xué)生的學(xué)習(xí)積極性。新知講解（10min）CSS概述、CSS樣式規(guī)則1.教師展示PPT對“CSS樣式規(guī)則”的具體格式進(jìn)行講解，并使用代碼進(jìn)行演示；2．教師和學(xué)生分析CSS樣式規(guī)則：選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}3.教師演示CSS樣式的使用。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉CSS樣式規(guī)則新知講解（25min）CSS引入方式：“行內(nèi)式”、“內(nèi)嵌式”1.教師展示PPT對“HTML文檔中引入CSS樣式表”進(jìn)行說明，并指出“引入CSS樣式表”的三種方式。2.教師對“行內(nèi)式”、“內(nèi)嵌式”及“外鏈?zhǔn)健币隒SS樣式表進(jìn)行講解并通過代碼進(jìn)行演示。3.教師指出“行內(nèi)式”、“內(nèi)嵌式”及“外鏈?zhǔn)健钡幕A(chǔ)語法格式及其優(yōu)缺點(diǎn)。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握引入CSS樣式得兩種方式“行內(nèi)式”、“內(nèi)嵌式”及“外鏈?zhǔn)健钡母袷剑瑫褂谩靶袃?nèi)式”、“內(nèi)嵌式”及“外鏈?zhǔn)健币隒SS樣式。課間休息實(shí)訓(xùn)練習(xí)（20min）學(xué)生動手實(shí)現(xiàn)“行內(nèi)式”、“內(nèi)嵌式”及“外鏈?zhǔn)健?種CSS引入樣式表1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況2.對實(shí)訓(xùn)中的問題進(jìn)行解答1.提出問題；2.按照教師的解答修改問題；通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度?？偨Y(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。分組討論（5min）什么是CSS基礎(chǔ)選擇器？都有哪些分類？1.分組討論（5min）什么是CSS基礎(chǔ)選擇器？都有哪些分類？2.教師對上述問題進(jìn)行解釋：CSS基礎(chǔ)選擇器有：“標(biāo)記選擇器”、“類選擇器”、“id選擇器”及“通配符選擇器”小組代表對以上問題發(fā)表見解。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（15min）CSS基礎(chǔ)選擇器：標(biāo)記選擇器1.教師展示PPT對“CSS選擇器”的概念及用法進(jìn)行講解；2.教師對“標(biāo)記選擇器”的基本語法格式進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。標(biāo)記名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;……}1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握標(biāo)記選擇器，在網(wǎng)頁中會使用標(biāo)記選擇器引入樣式。課間休息新知講解與實(shí)訓(xùn)（10min）CSS基礎(chǔ)選擇器：類選擇器教師對“類選擇器”的基本語法格式進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;……}1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握類選擇器，在網(wǎng)頁中會使用類選擇器引入樣式。新知講解與實(shí)訓(xùn)（10min）CSS基礎(chǔ)選擇器：id選擇器教師對“id選擇器”的基本語法格式進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握id選擇器，在網(wǎng)頁中會使用id選擇器引入樣式。實(shí)訓(xùn)練習(xí)（20min）使用三種選擇器結(jié)合實(shí)現(xiàn)案例：“藥王-孫思邈”網(wǎng)頁的樣式效果1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況；2.對實(shí)訓(xùn)中的問題進(jìn)行解答。1.提出問題；2.按照教師的解答修改問題；通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度?？偨Y(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息新知講解與實(shí)訓(xùn)（10min）CSS基礎(chǔ)選擇器：通配符選擇器教師對“通配符選擇器”的基本語法格式進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握通配符選擇器，在網(wǎng)頁中會使用通配符選擇器引入樣式。新知講解與實(shí)訓(xùn)（15min）后代選擇器教師對“后代選擇器”的基本語法格式進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握交集選擇器，在網(wǎng)頁中會使用后代選擇器引入樣式。新知講解與實(shí)訓(xùn)（15min）并集選擇器教師對“類選擇器”的基本語法格式進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握并集選擇器，在網(wǎng)頁中會使用并集選擇器引入樣式?？偨Y(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息引入任務(wù)（2min）藥王-孫思邈我們古代有很多偉大的人物，他們不計個人得失，一輩子默默奉獻(xiàn)，以造福民眾為己任，把自己的一生奉獻(xiàn)給人民。是我們學(xué)習(xí)的榜樣，下面我們制作“藥王-孫思邈”網(wǎng)頁，介紹一位這樣古代醫(yī)學(xué)家。學(xué)生觀看視頻回顧啟發(fā)學(xué)生民族自豪感和愛國熱情。教師演示（17min）“藥王-孫思邈”頁面1.教師分析網(wǎng)頁內(nèi)容；2.通過vscode頁面創(chuàng)建網(wǎng)頁；學(xué)生認(rèn)真聽講并理解相關(guān)概念；通過案例講解，使學(xué)生網(wǎng)頁編程有初步的了解，引起學(xué)生的興趣。實(shí)訓(xùn)練習(xí)（20min）學(xué)生動手編寫第一個HTML頁面1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況2.對實(shí)訓(xùn)中的問題進(jìn)行解答1.提出問題；2.按照教師的解答修改問題。通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度?？偨Y(jié)評價（10min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向。1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人。1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息引入選擇器的優(yōu)先級（5min）問題引入選擇器優(yōu)先級、繼承及層疊1.拋出問題：在網(wǎng)頁中針對同一標(biāo)記如果前后使用不同的選擇器設(shè)置相同樣式屬性不同屬性值，該樣式在頁面中該如何顯示？2.對拋出的問題進(jìn)行解答。1.學(xué)生思考問題并回答；2.按照教師的解答思考如何實(shí)現(xiàn)。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（15min）選擇器的優(yōu)先級教師對選擇器的優(yōu)先級進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。選擇器的優(yōu)先級從低到高排序?yàn)椋簶?biāo)記樣式<類（class）樣式<id樣式<行內(nèi)樣式<!Important。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速理解選擇器的優(yōu)先級。新知講解與實(shí)訓(xùn)（10min）樣式繼承教師對樣式繼承進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。繼承性是指子元素可以繼承父元素的屬性。但是并不是所有的屬性都可以繼承，不可繼承的屬性：display、border、padding、margin、background、height、width、overflow、position、left、right、top、bottom、z-index、float、clear等。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握樣式的繼承。新知講解與實(shí)訓(xùn)（10min）樣式層疊教師對樣式層疊進(jìn)行詳細(xì)講解并通過代碼進(jìn)行演示。CSS層疊是指多種CSS樣式的疊加，CSS樣式在針對同一元素配置同一屬性時，依據(jù)層疊規(guī)則（權(quán)重）來處理沖突，選擇應(yīng)用權(quán)重高的CSS選擇器所指定的屬性。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速理解樣式層疊?？偨Y(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課后實(shí)踐如圖，制作“故宮”網(wǎng)頁。教師通過學(xué)習(xí)通下發(fā)課后任務(wù)。學(xué)生按照要求編寫程序，并提交答案。通過拓展任務(wù)強(qiáng)化課堂內(nèi)容。反思與改進(jìn)

項(xiàng)目4設(shè)置文本字體樣式授課信息教學(xué)課題設(shè)置文本字體樣式所屬課程網(wǎng)頁制作學(xué)時6學(xué)時任務(wù)目標(biāo)教學(xué)任務(wù)網(wǎng)頁中的文本在設(shè)置樣式之前，看起來有些呆板、擁擠，還需要設(shè)置文字大小，顏色、粗細(xì)、行距、首行縮進(jìn)等樣式。CSS提供了字體樣式屬性、文本外觀屬性等用來設(shè)置文本樣式，本次課將通過制作預(yù)防電信詐騙網(wǎng)頁學(xué)習(xí)設(shè)置CSS字體樣式屬性、文本外觀屬性、服務(wù)器字體、CSS3新增樣式。根據(jù)學(xué)習(xí)內(nèi)容同學(xué)們制作HTML標(biāo)記介紹網(wǎng)頁。課堂案例課后實(shí)訓(xùn)教學(xué)目標(biāo)素質(zhì)目標(biāo)1.自覺遵守中國軟件行業(yè)基本公約；2.有良好的知識產(chǎn)權(quán)保護(hù)觀念和意識，自覺抵制各種違反知識產(chǎn)權(quán)保護(hù)法規(guī)的行為；3.能自覺遵守企業(yè)規(guī)章制度與產(chǎn)品開發(fā)保密制度；4.遵守有關(guān)隱私信息的政策和規(guī)程，保護(hù)客戶隱私。思政目標(biāo)通過預(yù)防電信詐騙網(wǎng)頁制作，使同學(xué)們了解詐騙手段，增強(qiáng)安全意識。能力目標(biāo)會根據(jù)網(wǎng)頁需求靈活設(shè)置文本字體樣式。知識目標(biāo)1.熟悉CSS字體屬性，能夠運(yùn)用相應(yīng)的屬性定義字體樣式；2.熟悉CSS文本屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式；3.會設(shè)置文字陰影效果；4.了解特殊字體的使用。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)教學(xué)重點(diǎn)：常用的字體屬性、文本屬性措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)難點(diǎn)教學(xué)難點(diǎn)：文字陰影和特殊字體措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固?；顒影才沤虒W(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖與資源課前探索CSS字體樣式屬性、文本外觀屬性、CSS3新增文本樣式1.教師教學(xué)平臺下發(fā)《設(shè)置文本字體樣式》錄課視頻，下發(fā)測試題；2.學(xué)生思考：在平時瀏覽網(wǎng)頁時，經(jīng)常會見到網(wǎng)頁上面有各種酷炫的文字等效果，這些如何實(shí)現(xiàn)呢？1.接收學(xué)習(xí)任務(wù)，自主觀看視頻，對網(wǎng)頁中使用文本和圖像有初步了解；2.學(xué)生上網(wǎng)準(zhǔn)備“預(yù)防電信詐騙”網(wǎng)頁相關(guān)資料。1.通過制作“預(yù)防電信詐騙”網(wǎng)頁，提醒同學(xué)們提高警惕，謹(jǐn)防上當(dāng)受騙。2.教師借助信息化手段和資源，激發(fā)學(xué)生主動學(xué)習(xí)的意識，提高課堂效率；3.課前練習(xí)題可以預(yù)習(xí)新知，根據(jù)數(shù)據(jù)及時了解學(xué)生知識掌握情況，并及時調(diào)整教學(xué)內(nèi)容。課堂教學(xué)項(xiàng)目引入（10min）引入案例：“預(yù)防電信詐騙”網(wǎng)頁（5min）1.引入案例：“預(yù)防電信詐騙”頁面。2.老師扮演客戶，向?qū)W生詢問項(xiàng)目進(jìn)展，提出項(xiàng)目新需求3.學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識。1.能夠與客戶和主管及時溝通前端開發(fā)任務(wù)需求和項(xiàng)目進(jìn)度狀況；2.能及時收集用戶反饋，提升前端開發(fā)成果的實(shí)用性、易用性。引入CSS如何對文字進(jìn)行美化？如何實(shí)現(xiàn)CSS嵌套（5min）1.瀏覽網(wǎng)頁時，我們可以看到字號大小不同，字體顏色各異以及不同形態(tài)的字體效果。那么，CSS字體樣式中的哪些屬性可以設(shè)置網(wǎng)頁中的字體效果呢？請分別列舉。3.教師對上述問題進(jìn)行解釋：CSS字體樣式屬性主要包括：?font-size:字號大??；?font-family:字體；?font-weight:字體粗細(xì)；?font-variant:變體；?font-style:字體風(fēng)格；?font:綜合設(shè)置字體樣式；小組代表對以上問題發(fā)表見解。以學(xué)生為中心，啟發(fā)學(xué)生思考通過小組討論、分組匯報的方式調(diào)動學(xué)生的學(xué)習(xí)積極性。新知講解與實(shí)訓(xùn)（15min）CSS字體樣式屬性：文本大小、字體、粗細(xì)1.教師和學(xué)生互動：瀏覽網(wǎng)頁的時候，我們經(jīng)常看到一些特殊的字體效果，比如：控制字體的字號、將字體進(jìn)行加粗，或者設(shè)置字體傾斜等。為了更方便的控制網(wǎng)頁中各種各樣的字體，CSS提供了一系列的字體樣式屬性。2.教師展示PPT對“網(wǎng)頁中常見的字體效果”進(jìn)行展示及說明；教師分別對“font-size、font-family、font-weight”進(jìn)行講解，并進(jìn)行代碼演示；3.教師分別對使用CSS設(shè)置字體樣式時需要注意的問題進(jìn)行說明。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉設(shè)置CSS字體樣式，會使用font-size、font-family、font-weight屬性設(shè)置字體樣式。新知講解（15min）CSS字體樣式屬性：文本是否斜體、文本是否為小型的大寫字母、文本樣式綜合設(shè)置1.教師展示PPT對“網(wǎng)頁中常見的字體效果”進(jìn)行展示及說明；教師分別對“font-variant、font-style及font綜合設(shè)置屬性”進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用CSS設(shè)置字體樣式時需要注意的問題進(jìn)行說明。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉設(shè)置CSS字體樣式，會使用font-variant、font-style及font綜合設(shè)置字體樣式。總結(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。 課間休息引入文本外觀屬性（5min）引入文本外觀屬性1.拋出問題：除了設(shè)置文字的樣式，對于一段文字，我們通常還會設(shè)置什么樣式？2.對拋出的問題進(jìn)行解答。使用CSS不僅可以設(shè)置一些特殊的字體效果，還可以設(shè)置一些段落文本的外觀顯示效果，比如：設(shè)置文本顏色、字間距、行間距、文本裝飾效果等。使用HTML只能進(jìn)行簡單的控制，但是效果并不理想，為此CSS提供了一系列的文本外觀樣式屬性。1.學(xué)生思考問題并回答；2.按照教師的解答思考如何實(shí)現(xiàn)。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（20min）CSS文本外觀屬性：顏色的3種表現(xiàn)的方式、文本顏色1.教師展示PPT對“網(wǎng)頁中常見的文本外觀效果”進(jìn)行展示及說明；2.教師對“color”等文本外觀屬性進(jìn)行講解，并進(jìn)行代碼演示。3.教師分別對使用CSS設(shè)置文本外觀時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速了解顏色的3中表現(xiàn)方式，掌握文本顏色的設(shè)置，在網(wǎng)頁中會使用文本顏色設(shè)置樣式。新知講解與實(shí)訓(xùn)（17min）CSS文本外觀屬性：文本對齊方式、行高、文本內(nèi)容縮進(jìn)。1.教師對“text-align、line-height、text-indent”等文本外觀屬性進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用CSS設(shè)置文本外觀時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握文本對齊方式、行高、文本內(nèi)容縮進(jìn)，在網(wǎng)頁中會使用文本對齊方式、行高、文本內(nèi)容縮進(jìn)設(shè)置樣式。總結(jié)評價（3min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息新知講解與實(shí)訓(xùn)（25min）CSS文本外觀屬性：文本大小寫轉(zhuǎn)換、文本裝飾種類、段落間距1.教師對“text-transform、text-decoration、margin”等文本外觀屬性進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用CSS設(shè)置文本外觀時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握文本大小寫轉(zhuǎn)換、文本裝飾種類、段落間距，在網(wǎng)頁中會使用文本大小寫轉(zhuǎn)換、文本裝飾種類、段落間距設(shè)置樣式。新知講解與實(shí)訓(xùn)（15min）CSS文本外觀屬性：空白符的處理方式、單詞之間的間隙、字符之間的間隙1.教師對“white-space、word-spacing、letter-spacing”等文本外觀屬性進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用CSS設(shè)置文本外觀時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉空白符的處理方式、單詞之間的間隙、字符之間的間隙。新知講解與實(shí)訓(xùn)（15min）CSS3新增文本樣式1.教師對CSS3新增文本樣式：text-shadow進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用CSS設(shè)置CSS3新增文本樣式時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉新增的文本樣式text-shadow。課間休息新知講解與實(shí)訓(xùn)（15min）使用服務(wù)器字體。1.教師對CSS3服務(wù)器字體進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用服務(wù)器字體時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速了解服務(wù)器字體。案例演示（30min）制作“預(yù)防電信詐騙”網(wǎng)頁教師分析網(wǎng)頁結(jié)構(gòu)進(jìn)行總體布局插入內(nèi)容設(shè)置樣式1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟。通過教師提問和演示，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度。課間休息實(shí)訓(xùn)練習(xí)（40min）制作“預(yù)防電信詐騙”網(wǎng)頁1.教師巡回指導(dǎo)學(xué)生的實(shí)訓(xùn)情況2.對實(shí)訓(xùn)中的問題進(jìn)行解答1.提出問題；2.按照教師的解答修改問題；通過師生單獨(dú)的互動，督促學(xué)生端正學(xué)習(xí)的態(tài)度，養(yǎng)成認(rèn)真、嚴(yán)謹(jǐn)、踏實(shí)的學(xué)習(xí)態(tài)度?？偨Y(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息引入超鏈接（5min）問題引入超鏈接樣式1.拋出問題：在網(wǎng)頁里面有很多超鏈接，這些超鏈接有默認(rèn)的樣式，是否可以修改默認(rèn)樣式？2.對拋出的問題進(jìn)行解答。1.學(xué)生思考問題并回答；2.按照教師的解答思考如何實(shí)現(xiàn)。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（15min）超鏈接樣式：未訪問、已點(diǎn)擊的超鏈接樣式1.教師對未訪問、已點(diǎn)擊的超鏈接樣式進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用CSS設(shè)置文本外觀時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握未訪問、已點(diǎn)擊的超鏈接樣式，能夠在頁面中使用未訪問、已點(diǎn)擊的超鏈接樣式。新知講解與實(shí)訓(xùn)（20min）超鏈接樣式：鼠標(biāo)懸浮在超鏈接、鼠標(biāo)點(diǎn)擊時刻的超鏈接的樣式1.教師對鼠標(biāo)懸浮在超鏈接、鼠標(biāo)點(diǎn)擊時刻的超鏈接的樣式進(jìn)行代碼演示。2.教師分別對使用CSS設(shè)置CSS3新增文本樣式時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速掌握鼠標(biāo)懸浮在超鏈接、鼠標(biāo)點(diǎn)擊時刻的超鏈接的樣式，能夠在頁面中使用鼠標(biāo)懸浮在超鏈接、鼠標(biāo)點(diǎn)擊時刻的超鏈接的樣式。總結(jié)評價（10min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課后實(shí)踐如圖，制作“標(biāo)記介紹”網(wǎng)頁網(wǎng)頁。教師通過學(xué)習(xí)通下發(fā)課后任務(wù)。學(xué)生按照要求編寫程序，并提交答案。通過拓展任務(wù)強(qiáng)化課堂內(nèi)容。反思與改進(jìn)

項(xiàng)目5盒子模型授課信息教學(xué)課題盒子模型所屬課程網(wǎng)頁制作學(xué)時8學(xué)時任務(wù)目標(biāo)教學(xué)任務(wù)網(wǎng)頁內(nèi)容包含不同的模塊，每一個模塊可以看作一個盒子。盒子模型（boxmodel）是網(wǎng)頁布局的基礎(chǔ)，用來設(shè)計和布局網(wǎng)頁。本項(xiàng)目通過制作“四有青年”網(wǎng)頁將對盒子模型的概念和相關(guān)屬性進(jìn)行詳細(xì)講解。根據(jù)所學(xué)內(nèi)容同學(xué)們完成制作“媒體播放器按鈕”網(wǎng)頁。課堂案例課后實(shí)訓(xùn)教學(xué)目標(biāo)素質(zhì)目標(biāo)1.自覺遵守中國軟件行業(yè)基本公約；2.有良好的知識產(chǎn)權(quán)保護(hù)觀念和意識，自覺抵制各種違反知識產(chǎn)權(quán)保護(hù)法規(guī)的行為；3.能自覺遵守企業(yè)規(guī)章制度與產(chǎn)品開發(fā)保密制度；4.遵守有關(guān)隱私信息的政策和規(guī)程，保護(hù)客戶隱私。思政目標(biāo)通過“四有青年”頁面制作，讓學(xué)生了解四有青年的具體含義，努力提升自己水平與素質(zhì)，積極為國家做貢獻(xiàn)；通過“媒體播放器按鈕”的頁面制作，激發(fā)同學(xué)們學(xué)習(xí)HTML5代碼的熱情，能將所學(xué)到的知識應(yīng)用到具體的生活中來。能力目標(biāo)能夠使用盒子模型進(jìn)行簡單的頁面布局。知識目標(biāo)1.熟悉盒子模型及其常用的屬性；2.理解行內(nèi)元素、塊元素和行內(nèi)塊元素，能夠在各類元素間進(jìn)行轉(zhuǎn)換；3.熟悉盒子的新增樣式，能夠使用新增樣式；4.熟悉表格標(biāo)記，能夠創(chuàng)建簡單表格；5.熟悉HTML5新增文檔結(jié)構(gòu)元素。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)教學(xué)重點(diǎn)：盒子模型、<div>標(biāo)記、盒子模型相關(guān)屬性措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)難點(diǎn)教學(xué)難點(diǎn)：背景屬性、CSS3漸變屬性措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固?；顒影才沤虒W(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖與資源項(xiàng)目引入（10min）引入案例：“四有青年”網(wǎng)頁（5min）1.引入案例：“四有青年”頁面；2.老師扮演客戶，向?qū)W生詢問項(xiàng)目進(jìn)展，提出項(xiàng)目新需求；3.學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識。學(xué)生與客戶溝通，了解客戶需求，帶著問題學(xué)習(xí)相關(guān)知識。1.能夠與客戶和主管及時溝通前端開發(fā)任務(wù)需求和項(xiàng)目進(jìn)度狀況；2.能及時收集用戶反饋，提升前端開發(fā)成果的實(shí)用性、易用性。引入什么是“盒子模型”，以及如何理解“CSS盒子模型”？（5min）1.隨著信息化的迅速發(fā)展，手機(jī)已經(jīng)成為人們?nèi)粘Ｉ钪械谋匦杵?。一個完整的手機(jī)盒子通常包含手機(jī)、填充泡沫和盛裝手機(jī)的紙盒。其實(shí)，在CSS中也存在著盒子模型，利用CSS盒子模型能夠更好的對網(wǎng)頁進(jìn)行排版。那么，如何理解“CSS盒子模型”呢？3.教師對上述問題進(jìn)行解釋：小組代表對以上問題發(fā)表見解。以學(xué)生為中心，啟發(fā)學(xué)生思考通過小組討論、分組匯報的方式調(diào)動學(xué)生的學(xué)習(xí)積極性。新知講解（5min）認(rèn)識盒子模型1.教師展示PPT對“CSS盒子模型”的概念進(jìn)行講解，并以生活中常見的快遞盒子的構(gòu)成進(jìn)行演示；2.教師展示PPT，對CSS盒子模型的構(gòu)成元素進(jìn)行具體講解。3.教師使用CSS盒子模型控制網(wǎng)頁中的元素，并進(jìn)行代碼演示。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉設(shè)置CSS字體樣式，會使用font-size、font-family、font-weight屬性設(shè)置字體樣式。新知講解與實(shí)訓(xùn)（10min）盒子模型：內(nèi)容1.教師展示PPT對盒子模型中內(nèi)容進(jìn)行展示及說明；1.教師對盒子模型內(nèi)容content進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用盒子模型內(nèi)容時需要注意的問題進(jìn)行說明。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉設(shè)置盒子模型的內(nèi)容，會設(shè)置盒子模型內(nèi)容的大小。新知講解與實(shí)訓(xùn)（15min）盒子模型：邊框1.教師展示PPT對盒子模型中邊框進(jìn)行展示及說明；2.教師對盒子模型邊框border進(jìn)行講解，并進(jìn)行代碼演示。3.教師分別對使用盒子模型邊框時需要注意的問題進(jìn)行說明；4.教師給出要求，在原來的盒子上添加邊框，觀察盒子的大小1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉設(shè)置盒子模型的邊框，會設(shè)置盒子模型邊框。總結(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。 課間休息引入內(nèi)邊距、外邊距（5min）問題引入盒子內(nèi)邊距、外邊距1.拋出問題：除了設(shè)置盒子的邊框外，觀察現(xiàn)實(shí)生活中的盒子，我們通常還會設(shè)置什么樣式？2.對拋出的問題進(jìn)行解答。內(nèi)邊距、外邊距1.學(xué)生思考問題并回答；2.按照教師的解答思考如何實(shí)現(xiàn)。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（20min）盒子模型：內(nèi)邊距（15min）1.教師展示PPT對盒子模型中內(nèi)邊距進(jìn)行展示及說明；2.教師對盒子模型內(nèi)邊距padding進(jìn)行講解，并進(jìn)行代碼演示。3.教師分別對使用盒子模型內(nèi)邊距時需要注意的問題進(jìn)行說明；4.教師給出要求，在原來的盒子上添加內(nèi)邊距，觀察盒子的大小1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉設(shè)置盒子模型的內(nèi)邊距，會設(shè)置盒子模型內(nèi)邊距?？刂坪凶哟笮。鹤詣觾?nèi)減（5min）教師對自動內(nèi)減的方式進(jìn)行講解，并進(jìn)行代碼演示。1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉自動內(nèi)減，會設(shè)置盒子模型自動內(nèi)減。新知講解與實(shí)訓(xùn)（15min）盒子模型：外邊距1.教師展示PPT對盒子外邊距進(jìn)行展示及說明；2.教師對盒子外邊距進(jìn)行講解，并進(jìn)行代碼演示。3.教師分別對使用盒子外邊距時需要注意的問題進(jìn)行說明；4.教師給出要求，分別給上下、左右盒子上添外邊距1.學(xué)生跟隨老師認(rèn)真聽講并回答問題理解相關(guān)概念；2.學(xué)生及時練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓學(xué)生能夠快速熟悉設(shè)置盒子外邊距，會設(shè)置上下、左右盒子的外邊距。總結(jié)評價（5min）1.分析學(xué)生個人編程時遇到到問題；2.總結(jié)易錯點(diǎn)和難點(diǎn)；3.存在問題及改進(jìn)方向；1.對學(xué)生概念理解存在的共性問題、易錯問題進(jìn)行總結(jié)；2.評價成績優(yōu)異的個人；1.學(xué)生聽講并理解相關(guān)概念；2.自查是否出現(xiàn)共性問題；多元化評價貫穿整個教學(xué)過程，讓學(xué)生養(yǎng)成自學(xué)能力，規(guī)范操作編寫代碼。課間休息引入盒子背景屬性（5min）問題引入盒子背景屬性1.拋出問題：在網(wǎng)頁設(shè)計中，元素的背景起著關(guān)鍵的作用，它直接決定了網(wǎng)站的風(fēng)格。其實(shí)，我們除了可以為背景設(shè)置不同的顏色，還可以設(shè)置哪些相關(guān)屬性？2.對拋出的問題進(jìn)行解答。通過元素的背景屬性可以為元素設(shè)置背景色、背景圖像、平鋪方式、定位方式、背景圖片大小、背景顯示區(qū)域等樣式。1.學(xué)生思考問題并回答；2.按照教師的解答思考如何實(shí)現(xiàn)。引導(dǎo)學(xué)生主動思考問題，加強(qiáng)學(xué)生的主觀能動性。新知講解與實(shí)訓(xùn)（15min）盒子背景屬性：背景顏色、背景圖像1.教師對“background-color、background-image”等盒子背景屬性進(jìn)行講解，并進(jìn)行代碼演示。2.教師分別對使用CSS設(shè)置盒子背景時需要注意的問題進(jìn)行說明。1.認(rèn)真學(xué)習(xí)并思考教師提出的問題，找到解決方法；2.認(rèn)真觀看教師操作演示，領(lǐng)會關(guān)鍵操作步驟，學(xué)生練習(xí)。以學(xué)生為中心，通過圖文結(jié)合的方式，讓