web前端開發(fā)實(shí)例教程配套占東明教案第16講

1、 Web應(yīng)用設(shè)計(jì)基礎(chǔ)（A） 課程教案教學(xué)時(shí)數(shù)：2 授課類型： eq oac(,)理論課 實(shí)驗(yàn)(上機(jī)) 課授課章節(jié)：第17章列表和背景，第18章CSS盒子模型教學(xué)目的、要求：列表的樣式列表的背景列表的位置合作模型合作模型樣式教學(xué)重點(diǎn)：列表的樣式列表的背景合作模型合作模型樣式教學(xué)難點(diǎn)：合作模型合作模型樣式教學(xué)方法和手段：教學(xué)方式：講授、演示、實(shí)驗(yàn)、討論、案例分析、實(shí)作指導(dǎo)等。輔助手段：多媒體投影，筆記本電腦，網(wǎng)絡(luò)。教師提問：促進(jìn)學(xué)生積極思考，激發(fā)學(xué)生潛能。設(shè)定假設(shè)：培養(yǎng)學(xué)生興趣，看清事件本質(zhì)。師生互動(dòng)：能有效地調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性。教學(xué)內(nèi)容及過程新課導(dǎo)入：（可選）教學(xué)內(nèi)容與教學(xué)設(shè)計(jì)：第17章列表和

2、背景21117.1列表樣式list-style-type21217.2列表圖像list-style-image21517.3列表位置list-style-position21617.4設(shè)置背景顏色background-color21917.5設(shè)置背景圖片background-image22017.6設(shè)置背景附件background-attachment22217.7設(shè)置背景圖片重復(fù)background-repeat22417.8設(shè)置背景圖片位置background-position226第18章CSS盒子模型23218.1CSS盒子模型概述23218.2CSS內(nèi)邊距padding23318.3

3、CSS邊框border23518.3.1邊框樣式border-style23718.3.2邊框顏色border-color24118.3.3邊框?qū)挾萣order-width24418.4CSS外邊距margin24618.5盒子模型顯示display248作業(yè)布置：17.12上機(jī)練習(xí)利用背景和字體樣式制作精美網(wǎng)頁(yè)18.9上機(jī)練習(xí)利用盒子模型制作照片邊框效果備注課后小結(jié)：(教師完成本教學(xué)單元教學(xué)后對(duì)教學(xué)設(shè)計(jì)、教學(xué)重難點(diǎn)把握、教學(xué)方法應(yīng)用、教學(xué)效果等課堂教學(xué)過程情況的總結(jié)與分析，為以后教學(xué)提供經(jīng)驗(yàn)和素材)教學(xué)分組：1學(xué)生/組教學(xué)條件：（多媒體投影、筆記本電腦、網(wǎng)絡(luò)）參考資料：1 胡軍 劉伯成 劉曉強(qiáng)，Web前端開發(fā)案例教程HTML+CSS+JavaScript，人民郵電出版社，2015.52 張樹明，Web技術(shù)基礎(chǔ)XHTML、CSS、JavaScript，清華大學(xué)版社,2013.23 聶常紅，Web前端開發(fā)技術(shù)HTML、CSS、JavaScript， 人民郵電出版社，2013.94 儲(chǔ)久良，Web前端開發(fā)技術(shù)實(shí)驗(yàn)與實(shí)踐HTML、CSS、JavaScript，清華大學(xué)版社,201