PAGE2《Web前端開發(fā)技術(shù)》課程教案適用專業(yè)：授課班級：授課教師：編制日期：

教案名稱單元7制作精彩非遺資訊頁面—網(wǎng)頁布局計劃學(xué)時4學(xué)時本次授課類型□理論□實驗?理實一體□實訓(xùn)□實習(xí)教學(xué)目標(biāo)知識目標(biāo)1.掌握文檔流與盒子模型的基本原理。2.掌握元素的填充和邊距設(shè)置。3.掌握塊級元素的浮動應(yīng)用。4.學(xué)會使用絕對定位和相對定位。5.能夠使用DIV+CSS進(jìn)行網(wǎng)頁布局。能力目標(biāo)1.能夠熟練運用盒子模型進(jìn)行頁面布局。2.能夠解決浮動和定位中的常見問題。3.能夠獨立完成非遺資訊頁面的布局設(shè)計。素質(zhì)目標(biāo)1.培養(yǎng)耐心細(xì)致的職業(yè)素養(yǎng)。2.培養(yǎng)精益求精的工匠精神。思政目標(biāo)1.激發(fā)學(xué)生對傳統(tǒng)文化的興趣，增強(qiáng)文化自信。2.培養(yǎng)學(xué)生團(tuán)隊協(xié)作和解決問題的能力。教學(xué)重點1.盒子模型的基本原理與應(yīng)用。2.浮動與定位的實現(xiàn)方法。3.DIV+CSS布局技巧。教學(xué)難點1.浮動引起的布局問題及解決方法。2.絕對定位與相對定位的靈活運用。3.多設(shè)備兼容性布局設(shè)計。教學(xué)設(shè)計思路教學(xué)效果及改進(jìn)思路絕大部分學(xué)生能夠掌握本項目中的知識點和技能，針對個別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對一的幫扶，努力做到每名學(xué)生不掉隊。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動的做好課前準(zhǔn)備，可以適當(dāng)提高這部分的考評比率，在課上有更多的獎勵手段。教學(xué)實施過程要有詳細(xì)教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動、信息化資源、教學(xué)方法等方面進(jìn)行撰寫備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開發(fā)》MOOC課程里的單元7的相關(guān)微課視頻，完成在線測試。（二）學(xué)生完成預(yù)習(xí)階段配套練習(xí)題，標(biāo)注理解不透徹的知識點

（三）教師收集整理學(xué)生共性疑問，在課堂中針對性講解重點難點二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入計算機(jī)系學(xué)生小新在網(wǎng)頁制作實踐中發(fā)現(xiàn)，隨著網(wǎng)頁內(nèi)容逐漸豐富，他對元素位置控制和頁面排版布局感到力不從心。面對這一挑戰(zhàn)，小新沒有退縮，而是采取系統(tǒng)化的解決思路：首先設(shè)計精彩非遺資訊頁面的整體框架，接著深入理解盒子模型原理并搭建頁面基礎(chǔ)布局；然后學(xué)習(xí)浮動技術(shù)制作資訊推介區(qū)域，掌握定位技術(shù)完成專題報道區(qū)域的設(shè)計；最后將所有模塊整合優(yōu)化，實現(xiàn)頁面的整體美化。（二）任務(wù)1設(shè)計精彩非遺咨詢頁面1.任務(wù)描述2.任務(wù)準(zhǔn)備(1)明確頁面分為頭部層、內(nèi)容層（資訊推介+專題報道）、底部層三大區(qū)塊。(2)復(fù)習(xí)盒子模型、浮動（實現(xiàn)圖文左右布局）、定位（專題區(qū)塊排列）等CSS布局技術(shù)。3.任務(wù)實施1.主要內(nèi)容：根據(jù)任務(wù)工單中的要求，使用UI原型圖工具Axure完成精彩非遺資訊頁面U設(shè)計任務(wù)。精彩非遺資訊頁面原型圖如圖所示。2.師生活動：教師逐步演示講解操作，巡回指導(dǎo)學(xué)生進(jìn)行上機(jī)練習(xí)，完成學(xué)生操作過程評價。學(xué)生跟練，完成自評與互評。3.教學(xué)方法：采用項目驅(qū)動法優(yōu)化教學(xué)過程，通過真實軟件環(huán)境演練，播放視頻等多種形式組織教學(xué)活動。任務(wù)2盒子模型和搭建資訊頁面整體布局1.任務(wù)描述參照設(shè)計圖將網(wǎng)頁內(nèi)容劃分為3個區(qū)塊，分別為頭部層、內(nèi)容層、底部層，每個區(qū)塊使用層{<}div{>}來實現(xiàn)。其中內(nèi)容層分為上下兩部分，即資訊推介和專題報道。為了直觀了解網(wǎng)頁的整體布局，會增加背景等樣式來突出不同的區(qū)塊。頁面整體布局如圖所示。2.任務(wù)準(zhǔn)備(1)文檔流：網(wǎng)頁元素默認(rèn)按代碼順序從上到下、從左到右排列，塊級元素獨占一行，行內(nèi)元素同行排列。(2)元素顯示方式：display屬性可改變元素顯示類型（如block、inline、inline-block），控制布局行為。(3)盒子模型：元素由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）組成，box-sizing屬性決定寬度/高度的計算方式。(4)填充與邊距：padding控制內(nèi)容與邊框間距，margin控制元素間距離；百分比值相對于父元素寬度計算。(5)層元素：<div>是塊級容器，用于劃分網(wǎng)頁區(qū)塊，結(jié)合CSS實現(xiàn)靈活布局（DIV+CSS）。3.任務(wù)實施1.主要內(nèi)容：(1)在站點目錄下創(chuàng)建網(wǎng)頁文件7-2.html(2)在body標(biāo)記中創(chuàng)建三個層元素：頭部層、內(nèi)容層和底部層(3)在內(nèi)容層中嵌套創(chuàng)建資訊推介和專題報道兩個子層(4)使用CSS設(shè)置各區(qū)塊的寬度和固定高度(5)為各區(qū)塊設(shè)置不同的背景顏色以便區(qū)分(6)為每個區(qū)塊添加下邊距以產(chǎn)生間距效果(7)設(shè)置網(wǎng)頁內(nèi)容在頁面上水平居中顯示。2.師生活動：教師逐步演示講解操作，巡回指導(dǎo)學(xué)生進(jìn)行上機(jī)練習(xí)，完成學(xué)生操作過程評價。學(xué)生跟練，完成自評與互評。3.教學(xué)方法：采用項目驅(qū)動法優(yōu)化教學(xué)過程，通過真實軟件環(huán)境演練，播放視頻等多種形式組織教學(xué)活動。任務(wù)3設(shè)置元素浮動1.任務(wù)描述資訊推介區(qū)域的制作需要使用CSS文字樣式、元素填充和邊距等。資訊推介區(qū)域的效果如圖所示2.任務(wù)準(zhǔn)備(1)元素浮動：使用float屬性（left/right）使塊級元素脫離文檔流，實現(xiàn)橫向排列，寬度自適應(yīng)內(nèi)容。(2)浮動影響：浮動元素會脫離文檔流，可能影響相鄰元素的布局，導(dǎo)致父元素高度塌陷。(3)清除浮動：通過clear屬性（如both）禁止指定側(cè)出現(xiàn)浮動元素，常用于解決父元素高度塌陷問題。(4)圖文排版：利用float實現(xiàn)左右結(jié)構(gòu)布局，需控制元素寬度避免文字環(huán)繞或重疊。(5)布局技巧：優(yōu)先用CSS調(diào)整顯示位置（而非HTML順序），保持內(nèi)容邏輯清晰。3.任務(wù)實施1.主要內(nèi)容：(1)創(chuàng)建網(wǎng)頁文件7-3.html并設(shè)置基本結(jié)構(gòu)(2)在news層中添加"資訊推介"標(biāo)題和newscontent內(nèi)容層