Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元5 制作非遺活動詳情頁面-CSS 基礎(chǔ)_第1頁
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元5 制作非遺活動詳情頁面-CSS 基礎(chǔ)_第2頁
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元5 制作非遺活動詳情頁面-CSS 基礎(chǔ)_第3頁
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元5 制作非遺活動詳情頁面-CSS 基礎(chǔ)_第4頁
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元5 制作非遺活動詳情頁面-CSS 基礎(chǔ)_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

教案名稱單元5制作非遺活動詳情頁面—CSS基礎(chǔ)計(jì)劃學(xué)時(shí)4學(xué)時(shí)本次授課類型□理論□實(shí)驗(yàn)?理實(shí)一體□實(shí)訓(xùn)□實(shí)習(xí)教學(xué)目標(biāo)知識目標(biāo)1.掌握CSS基本語法，能正確編寫CSS語句。

2.理解CSS選擇器的作用及使用方法。

3.掌握文本字體樣式的設(shè)置方法。

4.學(xué)習(xí)文本精細(xì)排版的技巧。能力目標(biāo)1.能夠在網(wǎng)頁中正確引入CSS代碼。

2.能夠使用CSS美化網(wǎng)頁頭部和正文區(qū)域。

3.能夠制作并美化非遺活動詳情頁面。素質(zhì)目標(biāo)1.培養(yǎng)用戶導(dǎo)向的設(shè)計(jì)思維。2.提升網(wǎng)頁審美能力和藝術(shù)修養(yǎng)。3.培養(yǎng)精益求精的職業(yè)素養(yǎng)。思政目標(biāo)1.激發(fā)學(xué)生對傳統(tǒng)文化的興趣，增強(qiáng)文化自信。

2.培養(yǎng)學(xué)生團(tuán)隊(duì)協(xié)作和溝通能力。教學(xué)重點(diǎn)1.CSS基本語法與選擇器的使用。

2.文本字體樣式和精細(xì)排版的實(shí)現(xiàn)方法。教學(xué)難點(diǎn)1.CSS選擇器的靈活運(yùn)用。2.多瀏覽器兼容性問題處理。3.響應(yīng)式設(shè)計(jì)的初步實(shí)踐。教學(xué)設(shè)計(jì)思路教學(xué)效果及改進(jìn)思路絕大部分學(xué)生能夠掌握本項(xiàng)目中的知識點(diǎn)和技能，針對個(gè)別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對一的幫扶，努力做到每名學(xué)生不掉隊(duì)。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動的做好課前準(zhǔn)備，可以適當(dāng)提高這部分的考評比率，在課上有更多的獎(jiǎng)勵(lì)手段。教學(xué)實(shí)施過程要有詳細(xì)教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動、信息化資源、教學(xué)方法等方面進(jìn)行撰寫備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開發(fā)》MOOC課程里的單元5的相關(guān)微課視頻，完成在線測試。（二）學(xué)生主動完成預(yù)習(xí)任務(wù)，系統(tǒng)整理需要深化的知識模塊。（三）教師精準(zhǔn)識別學(xué)習(xí)薄弱環(huán)節(jié)，開展有針對性的線上助學(xué)活動，確保教學(xué)起點(diǎn)公平一致。二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入通過前期的學(xué)習(xí)，小新已經(jīng)掌握了網(wǎng)頁內(nèi)容搭建的基礎(chǔ)技能，但在實(shí)際制作非遺網(wǎng)站時(shí)發(fā)現(xiàn)，自己設(shè)計(jì)的頁面在美觀度和用戶體驗(yàn)方面與主流網(wǎng)站存在明顯差距。為了提升網(wǎng)頁質(zhì)量，小新決定通過學(xué)習(xí)CSS技術(shù)來優(yōu)化頁面樣式，包括調(diào)整字體顏色、段落間距等視覺效果。為此，他制定了分階段的任務(wù)規(guī)劃：首先設(shè)計(jì)完整的非遺活動詳情頁面框架；接著通過CSS美化頁面頭部區(qū)域的字體樣式；然后對正文部分的文本進(jìn)行精細(xì)排版；最終完成整個(gè)頁面的制作與美化，從而打造出更具吸引力和專業(yè)感的非遺網(wǎng)站頁面。（二）任務(wù)1CSS基礎(chǔ)與選擇器（1課時(shí)）1.任務(wù)描述2.任務(wù)準(zhǔn)備打開Axure，建立非遺活動詳情頁面原型，設(shè)計(jì)頁面。根據(jù)任務(wù)描述給出以下3種版式設(shè)計(jì)版式設(shè)計(jì)1:左上區(qū)域?yàn)楫?dāng)前位置區(qū)域，中間靠上區(qū)域是標(biāo)題區(qū)域，中間部分顯示正文，右下區(qū)域顯示編輯部信息。頁面上的圖片可以放在正文中間顯示。非遺活動詳情頁面版式設(shè)計(jì)1如所示。版式設(shè)計(jì)2:頁面上的圖片放在正文下面顯示，一行顯示多張圖片。非遺活動詳情頁面版式設(shè)計(jì)2如圖所示。版式設(shè)計(jì)3:正文內(nèi)容只顯示文字。非遺活動詳情頁面版式設(shè)計(jì)3如圖所示。3.任務(wù)實(shí)施1.主要內(nèi)容：根據(jù)要求進(jìn)行操作。2.師生活動：教師提供操作檢查清單，指導(dǎo)學(xué)生進(jìn)行自我評估。學(xué)生對照清單檢查操作結(jié)果，完善實(shí)踐報(bào)告。3.教學(xué)方法：采用案例教學(xué)法，分析典型工作案例，引導(dǎo)學(xué)生舉一反三。任務(wù)2CSS字體樣式—美化非遺活動詳情頁面頭部區(qū)域（1課時(shí)）1.任務(wù)描述設(shè)置網(wǎng)頁文字的樣式。非遺活動詳情頁面頭部區(qū)域的網(wǎng)頁效果如圖所示2.任務(wù)準(zhǔn)備(1)了解CSS基本語法如下selector<{>property:value;property:value。(2)了解CSS基本選擇器：類選擇器、id選擇器、標(biāo)記選擇器。(3)了解CSS復(fù)合選擇器：交集選擇器、并集選擇器、包含選擇器。(4)了解CSS代碼的四種方式：鏈入外部樣式表、導(dǎo)入外部樣式表、內(nèi)部樣式表、行內(nèi)樣式表。(5)了解字體樣式的設(shè)計(jì)。(6)了解文本對齊方式。3.任務(wù)實(shí)施1.主要內(nèi)容：(1)創(chuàng)建新網(wǎng)頁文件。打開HBuilderX，在非遺項(xiàng)目站點(diǎn)中創(chuàng)建網(wǎng)頁文件。(2)在<body></body>標(biāo)記之間創(chuàng)建網(wǎng)頁元素。(3)使用內(nèi)部樣式表引人CSS代碼。在當(dāng)前編輯的網(wǎng)頁文件頭部插人{(lán)<}style{>}{<}/style{>}標(biāo)記，設(shè)置type屬性。(4)設(shè)置當(dāng)前位置信息和標(biāo)題區(qū)域的文字樣式。2.師生活動：教師建立學(xué)習(xí)小組，安排組長協(xié)助指導(dǎo)組員練習(xí)。學(xué)生互幫互助，共同完成實(shí)踐任務(wù)。3.教學(xué)方法：運(yùn)用模擬仿真教學(xué)，通過虛擬實(shí)訓(xùn)平臺強(qiáng)化操作技能。任務(wù)3精細(xì)排版文本—美化非遺活動詳情頁面正文區(qū)域（1課時(shí)）1.任務(wù)描述非遺活動詳情頁面的正文區(qū)域使用{<}p{>}標(biāo)記和{<}span{>}標(biāo)記來創(chuàng)建HTML內(nèi)容，使用CSS來設(shè)置正文的字體樣式，并進(jìn)行文本的精細(xì)排版，包括段落首行縮進(jìn)、段落的行高、字詞間距、文本修飾等。正文區(qū)域網(wǎng)頁效果如圖所示。2.任務(wù)準(zhǔn)備(1)了解文本縮進(jìn)中文正文段落的排版習(xí)慣是將每個(gè)段落的首行縮進(jìn)(2)了解行高調(diào)整。可以使用CSS屬性lime-height控制行高、調(diào)整行間距。(3)文本修飾主要包括給文字添加下劃線、刪除線、上劃線等。(4)了解字間距跟詞間距。3.任務(wù)實(shí)施1.主要內(nèi)容：(1)創(chuàng)建新的網(wǎng)頁文件。(2)在網(wǎng)頁文件主體中創(chuàng)建多個(gè)正文段落和“編輯部”段落。(3)設(shè)置正文段落的字體大小為20像素，首行縮進(jìn)兩個(gè)字符、調(diào)整行高為1.5借。(4)設(shè)置“編輯部”段落的文本對齊方式為向右對齊。該段落為特殊段落，在該段落元素的HTML標(biāo)記中設(shè)置id屬性為edit。非遺活動詳情頁面正文區(qū)域參考代碼如下。2.師生活動：教師組織技能競賽活動，評選優(yōu)秀操作案例。學(xué)生參與競賽展示，互相觀摩學(xué)習(xí)。3.教學(xué)方法：采用工作過程導(dǎo)向教學(xué)法，按照行業(yè)標(biāo)準(zhǔn)流程設(shè)計(jì)實(shí)踐環(huán)節(jié)。任務(wù)4制作并美化非遺活動詳情頁面（1課時(shí)）1.任務(wù)描述按照網(wǎng)頁的設(shè)計(jì),可以適當(dāng)增加圖片使網(wǎng)頁更加美觀,非遺活動詳情頁面效果如圖。2.任務(wù)準(zhǔn)備(1)在CSS中，設(shè)置透明度主要有以下4種方式：使用opacity屬性設(shè)置透明度、使用rgba()設(shè)置透明度、使用hsla()設(shè)置透明度、使用filter屬性設(shè)置透明度。(2)了解CSS五種選擇器：關(guān)系、屬性、偽類、結(jié)構(gòu)偽類、偽元素。3.任務(wù)實(shí)施1.主要內(nèi)容：(1)創(chuàng)建網(wǎng)頁文件打開HBuilderX，創(chuàng)建非遺活動詳情網(wǎng)頁(2)設(shè)置“編輯部”元素為半透明(3)整合頁面頭部區(qū)域、正文區(qū)域，并調(diào)試和美化代碼。非遺活動詳情頁面參考代碼如下2.師生活動：教師設(shè)置分級練習(xí)任務(wù)，根據(jù)學(xué)生水平提供差異化指導(dǎo)。學(xué)生自主選擇練習(xí)難度，完成相應(yīng)實(shí)踐作業(yè)。3.教學(xué)方法：運(yùn)用項(xiàng)目教學(xué)法，以完整的工作流程組織教學(xué)活動，培養(yǎng)綜合實(shí)踐能力。課后拓展練習(xí)1.CSS代碼調(diào)試方法總結(jié)：在網(wǎng)頁開發(fā)過程中，CSS代碼調(diào)試是確保頁面樣式正確顯示的關(guān)鍵環(huán)節(jié)。開發(fā)者應(yīng)當(dāng)優(yōu)先選擇真實(shí)瀏覽器（如Chrome）進(jìn)行調(diào)試，而非僅依賴開發(fā)工具內(nèi)置的預(yù)覽功能。調(diào)試時(shí)，可以通過右鍵點(diǎn)擊頁面元素并選擇"檢查"來打開開發(fā)者工具。該工具包含兩個(gè)核心功能面板：Elements面板用于查看和定位HTML代碼，會高亮顯示當(dāng)前選中的頁面元素；Styles面板則完整展示該元素應(yīng)用的所有CSS樣式，包括瀏覽器默認(rèn)樣式和開發(fā)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論