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

教案名稱單元6制作非遺項(xiàng)目申報指南頁面—CSS高級應(yīng)用計劃學(xué)時4學(xué)時本次授課類型□理論□實(shí)驗(yàn)?理實(shí)一體□實(shí)訓(xùn)□實(shí)習(xí)教學(xué)目標(biāo)知識目標(biāo)1.學(xué)會有序列表和無序列表的創(chuàng)建。2.掌握列表的嵌套使用及樣式設(shè)置。3.掌握超鏈接、邊框、背景的樣式設(shè)置。4.理解CSS高級應(yīng)用在實(shí)際項(xiàng)目中的整合與美化。能力目標(biāo)1.能夠獨(dú)立創(chuàng)建和美化列表、導(dǎo)航欄及頁面區(qū)域。2.能夠運(yùn)用CSS高級樣式解決實(shí)際頁面設(shè)計問題。素質(zhì)目標(biāo)1.培養(yǎng)持續(xù)學(xué)習(xí)、深度學(xué)習(xí)的能力。2.關(guān)注前沿技術(shù)，培養(yǎng)創(chuàng)新思維。思政目標(biāo)1.激發(fā)學(xué)生對傳統(tǒng)文化的興趣，增強(qiáng)文化自信。2.培養(yǎng)團(tuán)隊(duì)協(xié)作精神，提升解決問題的能力。教學(xué)重點(diǎn)列表的創(chuàng)建與樣式設(shè)置（有序列表、無序列表、嵌套列表）。邊框與背景的樣式設(shè)置。超鏈接的樣式設(shè)置與水平導(dǎo)航欄的美化。教學(xué)難點(diǎn)列表嵌套的邏輯與樣式?jīng)_突解決。多瀏覽器環(huán)境下邊框與背景樣式的兼容性問題。頁面整體布局與樣式整合的協(xié)調(diào)性。教學(xué)設(shè)計思路教學(xué)效果及改進(jìn)思路絕大部分學(xué)生能夠掌握本項(xiàng)目中的知識點(diǎn)和技能，針對個別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對一的幫扶，努力做到每名學(xué)生不掉隊(duì)。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動的做好課前準(zhǔn)備，可以適當(dāng)提高這部分的考評比率，在課上有更多的獎勵手段。教學(xué)實(shí)施過程要有詳細(xì)教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動、信息化資源、教學(xué)方法等方面進(jìn)行撰寫備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開發(fā)》MOOC課程里的單元6的相關(guān)微課視頻，完成在線測試。（二）學(xué)生嚴(yán)格遵守預(yù)習(xí)要求，詳細(xì)記錄需要解惑的要點(diǎn)。（三）教師科學(xué)分析學(xué)習(xí)成效曲線，為特殊需求學(xué)員提供定制化輔導(dǎo)方案，營造全員共進(jìn)的學(xué)習(xí)氛圍。二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入小新計劃為非遺網(wǎng)站制作非遺項(xiàng)目申報指南頁面，并決定通過列表來實(shí)現(xiàn)非遺項(xiàng)目申報指南區(qū)域和水平導(dǎo)航欄的設(shè)計。他意識到，僅憑之前掌握的入門技能無法實(shí)現(xiàn)更加美觀的網(wǎng)頁效果，因此需要深入學(xué)習(xí)CSS3的高級應(yīng)用，包括列表樣式、背景樣式和邊框樣式等，以提升頁面的整體視覺效果。為此，小新制定了詳細(xì)的任務(wù)規(guī)劃：首先設(shè)計非遺項(xiàng)目申報指南頁面的整體框架，接著創(chuàng)建列表并完成申報指南區(qū)域的制作，然后通過設(shè)置邊框樣式完善文件下載區(qū)域，再制作并美化水平導(dǎo)航欄，最后通過背景樣式的調(diào)整進(jìn)一步優(yōu)化頁面效果。（二）任務(wù)1認(rèn)識網(wǎng)頁1.任務(wù)描述2.任務(wù)準(zhǔn)備具備非遺項(xiàng)目申報指南頁面原型圖3.任務(wù)實(shí)施1.主要內(nèi)容：根據(jù)網(wǎng)頁內(nèi)容來規(guī)劃和設(shè)計頁面布局。打開Axurc，建立非遺項(xiàng)目申報指南頁面原型，設(shè)計頁面，原型圖如圖所示。2.師生活動：教師提供操作指導(dǎo)手冊，巡回檢查學(xué)生操作規(guī)范，進(jìn)行過程性評價。學(xué)生按照步驟完成實(shí)踐任務(wù)，拍攝操作視頻進(jìn)行自我檢查。3.教學(xué)方法：采用翻轉(zhuǎn)課堂教學(xué)模式，課前提供學(xué)習(xí)資料，課中重點(diǎn)指導(dǎo)實(shí)踐操作。任務(wù)2邊框樣式設(shè)置—制作非遺項(xiàng)目文件下載區(qū)域1.任務(wù)描述使用列表制作申報指南區(qū)域的側(cè)邊欄，通過列表間的嵌套形成二級目錄結(jié)構(gòu)，并設(shè)置列表的CSS屬性以美化列表樣式。2.任務(wù)準(zhǔn)備(1)能夠創(chuàng)建有序無序兩種列表(2)能夠設(shè)置列表的樣式屬性(3)能夠使用overflow屬性用于控制內(nèi)容溢出元素邊框時顯示的方式(4)能夠使用white-space屬性用于指定元素內(nèi)空白的處理方式(5)能夠使用text-overflow屬性用于指定當(dāng)文本溢出包含它的元素時應(yīng)該如何顯示3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在站點(diǎn)目錄下新建非遺項(xiàng)目申報指南頁面。(2)在頁面中創(chuàng)建一級標(biāo)題元素“申報指南”，令其居中顯示。(3)使用無序列表創(chuàng)建第一級申報指南目錄。(4)使用有序列表創(chuàng)建第二級申報指南目錄。在第3步無序列表的{<}li{>}{<}/i{>}標(biāo)記中插入用有序列表表示的二級目錄。(5)使用iist-style-image屬性設(shè)置無序列表的列表項(xiàng)符號為箭頭圖片。這樣，.級目錄的列表項(xiàng)符號也會隨之變化，需要同時設(shè)置有序列表的list-style-image為none。(6)右側(cè)正文部分放置在層{<}divid=“right”>}中，設(shè)置固定的大小，當(dāng)長文本出現(xiàn)時需要進(jìn)行文本的溢出控制，在右側(cè)添加滾動條以便查看全文。(7)為了使網(wǎng)頁更加美觀，將側(cè)邊欄和正文部分放置在不同的層中，實(shí)現(xiàn)左右分布顯示，實(shí)現(xiàn)方法將在單元7的任務(wù)中詳細(xì)介紹。非遺項(xiàng)目申報指南區(qū)域參考代碼如下2.師生活動：教師通過項(xiàng)目分析引入知識點(diǎn)，指導(dǎo)學(xué)生完成需求分析文檔。

學(xué)生以小組為單位進(jìn)行需求討論，繪制功能流程圖。3.教學(xué)方法：采用項(xiàng)目導(dǎo)向教學(xué)法，結(jié)合企業(yè)真實(shí)案例，引導(dǎo)學(xué)生完成項(xiàng)目規(guī)劃。任務(wù)3列表應(yīng)用—制作與美化水平導(dǎo)航欄1.任務(wù)描述使用列表制作文件下載區(qū)域，每個列表項(xiàng)都是超鏈接，單擊文件下載鏈接可以下載相關(guān)文件。通過CSS設(shè)置列表項(xiàng)的邊框樣式、背景樣式、超鏈接樣式等。文件下載區(qū)域網(wǎng)頁效果如圖所示。2.任務(wù)準(zhǔn)備(1)了解邊框樣式的設(shè)計(2)了解CSS新增邊框?qū)傩?.任務(wù)實(shí)施1.主要內(nèi)容：(1)在站點(diǎn)目錄下新建文件下載區(qū)域頁面。(2)在頁面上創(chuàng)建一級標(biāo)題"文件下載"和無序列表，每個列表項(xiàng)即文件下載項(xiàng)，單擊文件下載鏈接可以下載對應(yīng)文件。(3)設(shè)置標(biāo)題文字居中顯示。(4)設(shè)置無序列表樣式。不顯示無序列表的列表項(xiàng)符號。(5)設(shè)置邊框樣式。每個列表項(xiàng)的下邊框樣式為點(diǎn)線、1像素、灰色(#b2b2b2)。(6)設(shè)置超鏈接樣式。文字顏色為黑色，無下劃線。(7)當(dāng)鼠標(biāo)指針懸停在某個文件下載項(xiàng)上方時，其背景顏色變?yōu)榛疑?。文件下載區(qū)域參考代碼如下2.師生活動：教師現(xiàn)場演示代碼調(diào)試技巧，巡回解答學(xué)生編程問題。

學(xué)生獨(dú)立完成代碼編寫，通過單元測試驗(yàn)證功能。3.教學(xué)方法：采用案例教學(xué)法，通過典型錯誤分析，培養(yǎng)學(xué)生debug能力。任務(wù)4背景樣式設(shè)置1.任務(wù)描述對列表進(jìn)行文字樣式設(shè)置、超鏈接樣式設(shè)置等。導(dǎo)航欄的網(wǎng)頁效果如圖所示2.任務(wù)準(zhǔn)備能夠使用width與height設(shè)置元素的寬度與高度3.任務(wù)實(shí)施1.主要內(nèi)容：(1)創(chuàng)建導(dǎo)航容器。創(chuàng)建一個id為"nav"的層作為導(dǎo)航欄容器，設(shè)置容器寬度為1000px，高度為60px，使容器在頁面上水平居中，添加灰色背景便于查看容器范圍。(2)添加導(dǎo)航列表結(jié)構(gòu)。在容器內(nèi)添加無序列表<ul>作為導(dǎo)航欄主體，列表包含5個導(dǎo)航項(xiàng)：首頁、機(jī)構(gòu)、資訊、名錄、指南，每個導(dǎo)航項(xiàng)使用<li>標(biāo)記包裹超鏈接，設(shè)置<ul>的寬度和高度與容器一致。(3)設(shè)置列表項(xiàng)浮動。由于<li>是塊級元素，需要使用浮動屬性使其橫向排列，設(shè)置所有<li>元素向左浮動。(4)調(diào)整列表項(xiàng)樣式，設(shè)置每個<li>寬度為200px，移除列表項(xiàng)符號，添加紅色背景便于觀察元素范圍。(5)清除默認(rèn)邊距。清除<ul>元素的默認(rèn)外邊距和內(nèi)邊距，確保列表與容器完全貼合。(6)設(shè)置垂直居中。調(diào)整<li>高度與容器一致，通過設(shè)置行高實(shí)現(xiàn)文字垂直居中，設(shè)置文字水平居中顯示。(7)美化超鏈接樣式。設(shè)置導(dǎo)航文字大小為20px，文字顏色設(shè)為白色，移除超鏈接下劃線，統(tǒng)一鼠標(biāo)移入移出的視覺效果。(8)最終優(yōu)化建議?？商砑邮髽?biāo)懸停效果（如背景變黑），可進(jìn)一步調(diào)整間距和交互效果，可考慮響應(yīng)式設(shè)計適配不同設(shè)備。2.師生活動：教師逐步演示講解操作，巡回指導(dǎo)學(xué)生進(jìn)行上機(jī)練習(xí)，完成學(xué)生操作過程評價。學(xué)生跟練，完成自評與互評。3.教學(xué)方法：采用項(xiàng)目驅(qū)動法優(yōu)化教學(xué)過程，通過真實(shí)軟件環(huán)境演練，播放視頻等多種形式組織教學(xué)活動。任務(wù)5整合美化非遺項(xiàng)目申報指南頁面1.任務(wù)描述制作頁面頭部區(qū)域，放置網(wǎng)站10g0、網(wǎng)站名稱、水平導(dǎo)航欄，增加頁面的背景樣式設(shè)置，對CSS代碼和HTML代碼進(jìn)行有效整合優(yōu)化。設(shè)置水平導(dǎo)航欄背景2.任務(wù)準(zhǔn)備(1)了解背景顏色設(shè)置(2)了解背景圖片設(shè)置(3)了解背景圖片平鋪設(shè)置(4)了解背景圖片附著設(shè)置(5)了解背景圖片位置設(shè)置(6)了解背景組合屬性3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在站點(diǎn)目錄下新建網(wǎng)頁文件(2)將網(wǎng)頁劃分為三個內(nèi)容區(qū)塊：頁面頭部區(qū)域、申報指南區(qū)域和文件下載區(qū)域，分別放置在不同層中(3)整合優(yōu)化三個內(nèi)容區(qū)塊的CSS代碼，避免樣式?jīng)_突(4)設(shè)置頁面背景圖片，大小為50×50像素并默認(rèn)平鋪(5)在頁面頭部區(qū)域左上角顯示網(wǎng)站logo和名稱，logo設(shè)為背景圖片并向右偏移100像素(6)設(shè)置網(wǎng)站名稱的文字樣式（顏色、大小、間距）并與logo保持垂直居中(7)統(tǒng)一調(diào)整各區(qū)域樣式風(fēng)格，提升頁面整體美觀度2.師生活動：教師組織課堂辯論，引導(dǎo)學(xué)生探討技術(shù)方案優(yōu)劣。

學(xué)生分組準(zhǔn)備論據(jù)，進(jìn)行技術(shù)方案答辯。3.教學(xué)方法：采用研討式教學(xué)法，通過頭腦風(fēng)暴激發(fā)創(chuàng)新思維。三、課后拓展練習(xí)1.列表在網(wǎng)頁上的默認(rèn)樣式有序列表和無序列表是組合標(biāo)記，由{<}ul{>}{<}/ul{>}或{<}o|{>}{<}/ol{>}與{<}li{>}{<}/i{>}組成，都不能單獨(dú)使用。這3種標(biāo)記都是塊級標(biāo)記，即獨(dú)占一行