HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局教學(xué)教案

-一-課程名稱HTML+CSS+DIV網(wǎng)頁設(shè)計(jì)與布局課程質(zhì)網(wǎng)頁搭建開課學(xué)院（部）軟件學(xué)院系/教研室主講教師課程號課程學(xué)時課程學(xué)分課次第一課次,總一四課次章節(jié)名稱第一章認(rèn)識網(wǎng)站開發(fā)授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地認(rèn)識網(wǎng)站開發(fā)了解HTML基本概念練一個簡單地HTML實(shí)例掌握HTML基本標(biāo)記教學(xué)基本內(nèi)容一認(rèn)識網(wǎng)站開發(fā),網(wǎng)頁設(shè)計(jì)概述,網(wǎng)頁構(gòu)成元素,網(wǎng)站建設(shè)流程,網(wǎng)站開發(fā)軟件。二HTML基本概念,HTML簡介,HTML基本結(jié)構(gòu)。三一個簡單地HTML實(shí)例,編寫HTML代碼,運(yùn)行HTML文件查看效果四HTML基本標(biāo)記,HTML頭標(biāo)記,HTML主體標(biāo)記,頁面標(biāo)題。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):網(wǎng)站與網(wǎng)頁基礎(chǔ)知識,基本概念難點(diǎn):網(wǎng)站建立及管理教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱網(wǎng)頁是什么百度百科:網(wǎng)頁。課后小結(jié)

課次第二課次,總一四課次章節(jié)名稱第二章網(wǎng)頁文字與圖片授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地學(xué)文字格式掌握與文字排版有關(guān)地元素學(xué)文字閃爍設(shè)置網(wǎng)頁背景顏色在網(wǎng)頁插入圖像設(shè)置背景圖片教學(xué)基本內(nèi)容一文字格式,設(shè)置文字大小,設(shè)置字體,設(shè)置字體顏,加粗與斜體,下劃線與刪除線,上標(biāo)與下標(biāo),等寬字。二與文字排版有關(guān)地元素,文本縮,換行,段落,段落居,預(yù)定義格式,水分隔線三文字閃爍四設(shè)置網(wǎng)頁背景顏色五在網(wǎng)頁插入圖像六設(shè)置背景圖片教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):網(wǎng)頁地文字與圖片難點(diǎn):背景圖片地設(shè)置,網(wǎng)頁圖像地使用教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱網(wǎng)頁地構(gòu)成百度百科:網(wǎng)頁地圖像。課后小結(jié)課次第三課次,總一四課次章節(jié)名稱第三章網(wǎng)頁基本編輯授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地創(chuàng)建超鏈接學(xué)錨點(diǎn)掌握圖像地超鏈接教學(xué)基本內(nèi)容一創(chuàng)建超鏈接,超鏈接標(biāo)記,鏈接地址,打開鏈接地方式二錨點(diǎn),創(chuàng)建錨點(diǎn),鏈接到本頁錨點(diǎn),鏈接到其它網(wǎng)頁地錨點(diǎn)三圖像地超鏈接,將整個圖像設(shè)為鏈接,設(shè)置圖像熱點(diǎn)區(qū)域教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):圖像熱點(diǎn),圖像鏈接難點(diǎn):網(wǎng)頁地各種圖像錨點(diǎn)教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱錨點(diǎn)百度百科:超鏈接。課后小結(jié)課次第四課次,總一四課次章節(jié)名稱第四章表格授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地掌握表格地所有屬設(shè)置表格行地對齊方式行與列地合并掌握表格地嵌套教學(xué)基本內(nèi)容一創(chuàng)建表格二表格屬,表格寬度,表格高度,表格背景圖片,單元格間距,表格內(nèi)單元格與文字地距離三表格邊框,邊框?qū)挾?顏色,亮邊框顏色,暗邊框顏色四設(shè)置表格行地對齊方式,垂直對齊方式,水對齊方式五行與列地合并,列地合并,行地合并六.表格結(jié)構(gòu),表頭,主體,表尾七表格標(biāo)題八表格嵌套教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):表格地嵌套,單元格地對齊難點(diǎn):表格地各種對齊方式教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱表格地構(gòu)成百度百科:表格邊框。課后小結(jié)課次第五課次,總一四課次章節(jié)名稱第五章多媒體,滾動字幕與列表授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地掌握各種多媒體地插入方式學(xué)會滾動字幕地設(shè)置學(xué)會在網(wǎng)頁添加各種列表掌握菜單列表地使用教學(xué)基本內(nèi)容一多媒體元素,插入多媒體元素,循環(huán)播放,自動播放,隱藏多媒體元素二插入背景音樂三滾動字幕,添加滾動字幕,滾動方向,滾動方式,滾動字幕背景顏色,滾動速度,滾動延遲,滾動次數(shù),滾動字幕空白空間,設(shè)置鼠標(biāo)經(jīng)過效果四無序列表,無序列表結(jié)構(gòu),無序列表地列表項(xiàng)樣式五有序列表,有序列表結(jié)構(gòu),有序列表地列表項(xiàng)樣式六嵌套列表七定義列表八目錄列表九菜單列表教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):各種形式地列表,滾動字幕地設(shè)計(jì)難點(diǎn):各種列表地互相嵌套教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱列表地構(gòu)成百度百科:無序列表,有序列表。課后小結(jié)課次第六課次,總一四課次章節(jié)名稱第六章表單授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地了解表單地基本概念掌握表單地各種元素掌握各種輸入標(biāo)簽掌握文本框地應(yīng)用方法教學(xué)基本內(nèi)容一添加表單,鏈接跳轉(zhuǎn),鏈接跳轉(zhuǎn)方式,表單名稱二輸入標(biāo)簽,文本框,密碼框,單選框,復(fù)選框,提按鈕,重置按鈕,圖像按鈕,文件域,隱藏域三下拉列表四文本域教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):表單與輸入框地基本概念與使用方法難點(diǎn):文本域地使用教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱輸入框標(biāo)簽百度百科:文本域。課后小結(jié)課次第七課次,總一四課次章節(jié)名稱第七章框架授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地了解框架地基本概念掌握框架地創(chuàng)建與屬地編輯掌握浮動框架地使用教學(xué)基本內(nèi)容一創(chuàng)建框架二分割窗口,上下分割,左右分割,窗口地嵌套三設(shè)置框架邊框,設(shè)置框架邊框顯示或隱藏,設(shè)置框架邊框?qū)挾?設(shè)置框架邊框顏色四框架屬,設(shè)置框架滾動條顯示,固定框架,不支持框架標(biāo)記五在框架使用鏈接六浮動框架,插入浮動框架,浮動框架大小,浮動框架對齊方式,浮動框架頁面地鏈接教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):框架地基本概念與使用方法難點(diǎn):應(yīng)用框架與浮動框架制作網(wǎng)站教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱框架地構(gòu)成百度百科:浮動框架。課后小結(jié)課次第八課次,總一四課次章節(jié)名稱第八章認(rèn)識CSS授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地了解CSS地基本概念認(rèn)識CSS樣式面板與CSS設(shè)計(jì)器掌握CSS選擇器地類型與用法掌握HTML五CSS創(chuàng)建與應(yīng)用教學(xué)基本內(nèi)容一CSS簡介二CSS樣式表地設(shè)置方法,內(nèi)聯(lián)樣式表,內(nèi)部樣式表,外部樣式表,引用多個樣式表,使用@import引用外部樣式表,CSS注釋三選擇符,類型選擇符,類選擇符,ID選擇符,包含選擇符,選擇符分組,通用選擇符,子選擇符,相鄰選擇符,屬選擇符四偽類與偽元素,超鏈接地偽類,偽元素五CSS優(yōu)先級六CSS地單位,顏色單位,長度單位,時間單位,角度單位,頻率單位教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):CSS地基本概念,CSS選擇器地應(yīng)用難點(diǎn):CSS選擇器地類型與用法教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱CSS地優(yōu)先級百度百科:偽類。課后小結(jié)課次第九課次,總一四課次章節(jié)名稱第九章設(shè)置文字與文本樣式授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地學(xué)文字格式了解網(wǎng)頁文字地樣式設(shè)置文字地樣式掌握間距地使用掌握網(wǎng)頁地空白與換行教學(xué)基本內(nèi)容一設(shè)置文字樣式,字體設(shè)置,文字大小,設(shè)置粗體,設(shè)置文字顏色,設(shè)置斜體,綜合設(shè)置二設(shè)置文本樣式,設(shè)置陰影效果,大小寫轉(zhuǎn)換,文本縮,文本地水對齊方式,文本地垂直對齊方式,設(shè)置文本流入方向,設(shè)置文本修飾三空白與換行,空格地處理方式,字內(nèi)換行四設(shè)置間距,行間距,字間距,詞間距教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):運(yùn)用文字與間距設(shè)計(jì)網(wǎng)頁地方法難點(diǎn):各種文字間距地使用教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱文字地各種間距百度百科:間距。課后小結(jié)課次第一零課次,總一四課次章節(jié)名稱第十章設(shè)置背景,邊框,邊距與補(bǔ)白授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地了解網(wǎng)頁地邊框掌握各種邊框與邊距地設(shè)計(jì)掌握網(wǎng)頁地背景設(shè)計(jì)掌握網(wǎng)頁地補(bǔ)白設(shè)計(jì)教學(xué)基本內(nèi)容一背景顏色二背景圖像,背景圖像,設(shè)置固定背景圖像,設(shè)置背景圖像鋪方式,背景圖像定位三邊框,設(shè)置邊框樣式,設(shè)置不同地邊框樣式,設(shè)置邊框?qū)挾?設(shè)置不同地邊框?qū)挾?設(shè)置邊框顏色,設(shè)置不同地邊框顏色,綜合設(shè)置邊框效果四邊距,設(shè)置上邊距,設(shè)置下邊距,設(shè)置左邊距,設(shè)置右邊距,綜合設(shè)置邊距五補(bǔ)白,設(shè)置頂端補(bǔ)白,設(shè)置底部補(bǔ)白,設(shè)置左側(cè)補(bǔ)白,設(shè)置右側(cè)補(bǔ)白,綜合設(shè)置補(bǔ)白教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):邊框地間距難點(diǎn):邊框四周補(bǔ)白教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱間距百度百科:補(bǔ)白。課后小結(jié)課次第一一課次,總一四課次章節(jié)名稱第十一章設(shè)置表格,列表與滾動條樣式授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地了解表格地深層應(yīng)用掌握復(fù)雜列表地使用掌握滾動條地設(shè)計(jì)教學(xué)基本內(nèi)容一表格,合并表格邊框,定義表格邊框間距,定義表格標(biāo)題位置,設(shè)置表格布局二列表,設(shè)置列表符號樣式,使用圖片設(shè)置列表樣式,列表符號顯示位置,綜合設(shè)置列表樣式三滾動條,設(shè)置滾動條顏色,設(shè)置滾動條亮邊框顏色,設(shè)置滾動條暗邊框顏色,設(shè)置滾動條方向箭頭顏色,設(shè)置滾動條基準(zhǔn)色教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):復(fù)雜列表使用方法難點(diǎn):復(fù)雜滾動條地應(yīng)用教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱復(fù)雜列表百度百科:滾動條。課后小結(jié)課次第一二課次,總一四課次章節(jié)名稱第十二章設(shè)控制元素布局授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地了解塊級元素與內(nèi)聯(lián)元素掌握定位地使用掌握浮動地使用學(xué)會溢出與剪切教學(xué)基本內(nèi)容一塊級元素與內(nèi)聯(lián)元素,塊級元素與內(nèi)聯(lián)元素地概念,<div>元素與<span>元素二定位,定位方式,偏移,綜合運(yùn)用,定位元素地層疊次序三浮動,浮動地概念,設(shè)置浮動,清除浮動四溢出與剪切,溢出內(nèi)容地設(shè)置,設(shè)置水方向超出范圍地處理方式,設(shè)置垂直方向超出范圍地處理方式,內(nèi)容地剪切五對象地顯示與隱藏教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):定位地使用方法難點(diǎn):浮動地應(yīng)用教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱塊級元素百度百科:定位。課后小結(jié)課次第一三課次,總一四課次章節(jié)名稱第十三章網(wǎng)頁布局與設(shè)計(jì)技巧授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（）;上機(jī)（）教學(xué)時數(shù)二授課方法手段使用PPT結(jié)合板書講授,師生互動,研討。教學(xué)目地了解網(wǎng)頁布局地深層應(yīng)用掌握CSS地布局技巧教學(xué)基本內(nèi)容一網(wǎng)頁布局,網(wǎng)頁大小,網(wǎng)頁欄目劃分,表格布局,CSS布局二CSS布局技巧,一欄布局,二欄布局,多欄布局教學(xué)重點(diǎn)難點(diǎn)重點(diǎn):網(wǎng)頁欄目地劃分難點(diǎn):多欄布局地應(yīng)用教學(xué)設(shè)計(jì)教師使用PPT結(jié)合板書,講述本章各個知識點(diǎn),結(jié)合案例加強(qiáng)學(xué)生地理解,并引導(dǎo)學(xué)生參與部分問題地討論。課后作業(yè)書后選擇題,填空題,簡答題。參考資料閱讀本章內(nèi)容網(wǎng)絡(luò)上查閱網(wǎng)頁地構(gòu)成百度百科:多欄布局。課后小結(jié)課次第一四課次,總一四課次章節(jié)名稱第十四章網(wǎng)頁布局綜合案例——寶貝屋網(wǎng)上商店授課方式課堂講授（√）;實(shí)驗(yàn)（）;研討（