《HTML5 CSS3 網(wǎng)頁設(shè)計(jì)與制作》教案-24 第8章 第1 節(jié) 應(yīng)用CSS3布局網(wǎng)頁

課程教案-24課題名稱第8章應(yīng)用CSS3布局網(wǎng)頁第1節(jié)應(yīng)用CSS3布局網(wǎng)頁授課班級(jí)軟件技術(shù)等大一上學(xué)期授課班級(jí)授課學(xué)時(shí)2授課地點(diǎn)機(jī)房授課形式講解+上機(jī)練習(xí)參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識(shí)目標(biāo)：了解CSS布局網(wǎng)頁的相關(guān)知識(shí)；了解應(yīng)用CSS進(jìn)行布局的幾種模式；了解如何使用HbuilderX進(jìn)行CSS網(wǎng)頁布局。技能目標(biāo)：熟練掌握、正確使用HBuilderX進(jìn)行CSS網(wǎng)頁布局的幾種方法。素質(zhì)目標(biāo)：培養(yǎng)學(xué)生認(rèn)真、一絲不茍的學(xué)習(xí)態(tài)度教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)CSS布局語句的設(shè)計(jì)與實(shí)現(xiàn)教學(xué)難點(diǎn)熟練掌握CSS布局的具體實(shí)現(xiàn)方法學(xué)情分析本次所講內(nèi)容選自教材第8章第2節(jié)。本次課程是學(xué)習(xí)CSS網(wǎng)站布局應(yīng)用，學(xué)生必須熟練掌握CSS的相關(guān)知識(shí)和語句，才能接著學(xué)習(xí)CSS在布局中的應(yīng)用。教學(xué)過程課前：復(fù)習(xí)理論課講授的CSS3在網(wǎng)頁中的幾種應(yīng)用模式：一列固定寬度和高度、一列自適應(yīng)寬度和一列固定寬度居中。課中：講解實(shí)現(xiàn)CSS網(wǎng)頁布局的具體步驟，如下：使用div塊將要布局的內(nèi)容分類制成盒子模型給盒子模型進(jìn)行CSS樣式設(shè)置適當(dāng)調(diào)整格子的布局格式和顯示效果2、講解CSS3布局模式中各個(gè)CSS標(biāo)簽的修飾作用上機(jī)實(shí)戰(zhàn)，講解并完成以下作業(yè)上機(jī)實(shí)戰(zhàn)，講解并完成以下CSS布局結(jié)構(gòu)課后：根據(jù)本章的知識(shí)點(diǎn)完成css布局效果，針對(duì)3個(gè)不同的盒子進(jìn)行設(shè)置。題目：給冰墩墩?qǐng)D片分別制作三種不同的css布局效果。教學(xué)反思采用啟發(fā)式教學(xué)，通過多媒體課件現(xiàn)場(chǎng)演示更加生動(dòng)，與學(xué)生互動(dòng)效果更好；在上機(jī)課上學(xué)生學(xué)會(huì)了如何創(chuàng)建站點(diǎn)和簡(jiǎn)