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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

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

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

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

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

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論