網(wǎng)頁制作案例教程HTML5+CSS3教學(xué)大綱

課程編號：學(xué)分：4學(xué)分學(xué)時(shí)：64學(xué)時(shí)(其中：講課學(xué)時(shí)：37學(xué)時(shí)上機(jī)學(xué)時(shí)：27學(xué)時(shí))第一章網(wǎng)頁制作入門網(wǎng)頁制作入門學(xué)時(shí)1.了解Web標(biāo)準(zhǔn)3.熟悉HTML5頁面文檔結(jié)構(gòu)。4.會安裝和使用Web開發(fā)工具，能夠使用VSCode工具創(chuàng)建簡單知識點(diǎn)重點(diǎn)難點(diǎn)網(wǎng)站和網(wǎng)頁√瀏覽器√√√√√√√√√√√注釋√第二章添加網(wǎng)頁內(nèi)容添加網(wǎng)頁內(nèi)容3.掌握圖像標(biāo)記，會在網(wǎng)頁中插入圖像，設(shè)6.會使用標(biāo)題、段落、圖像、列表標(biāo)記制作7.能夠通過在頁面上面添加超鏈接元素，實(shí)現(xiàn)不同頁面知識點(diǎn)重點(diǎn)難點(diǎn)√√√√√網(wǎng)頁中常用的圖像格式√圖像標(biāo)記和屬性√圖像地址√√√√√定義列表√列表嵌套√學(xué)習(xí)單元6學(xué)時(shí)1.了解CSS標(biāo)準(zhǔn)及發(fā)展歷史；2.掌握CSS樣式規(guī)則及引入方式；3.熟悉CSS基本選擇器；4.理解CSS的優(yōu)先級、繼承性和層疊性。知識點(diǎn)重點(diǎn)難點(diǎn)√CSS樣式規(guī)則√引入CSS樣式表√√√CSS優(yōu)先級√√第四章設(shè)置文本字體樣式1.熟悉CSS字體屬性，能夠運(yùn)用相應(yīng)的屬性定義字體樣2.熟悉CSS文本屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣知識點(diǎn)重點(diǎn)難點(diǎn)√√設(shè)置文字陰影及模糊效果√√√第五章盒子模型盒子模型1.熟悉盒子模型及其常用的屬性；2.理解行內(nèi)元素、塊元素和行內(nèi)塊元素，能夠在各類元素間進(jìn)行轉(zhuǎn)換；3.熟悉盒子的新增樣式，能夠使用新增樣式；4.熟悉表格標(biāo)記，能夠創(chuàng)建簡單表格；5.熟悉HTML5新增文檔結(jié)構(gòu)元素。知識點(diǎn)重點(diǎn)難點(diǎn)認(rèn)識盒子模型√√√√√√√行內(nèi)元素√√行內(nèi)塊元素√√圓角邊框√√√√素√第六章元素的浮動和定位1.理解元素的浮動，能為元素設(shè)置浮動效果；2.熟悉清除浮動的方法，可以使用不同方法清除浮動；知識點(diǎn)重點(diǎn)難點(diǎn)設(shè)置浮動效果√√清除浮動√相對定位relative√√絕對定位absolute√√固定定位fixed√√第七章多媒體元素多媒體元素學(xué)時(shí)2學(xué)時(shí)1.了解HTML5支持的音頻和視頻格式；2.掌握HTML5中音頻的相關(guān)屬性，能夠在HTML5中添加音頻文件；3.掌握HTML5中視頻的相關(guān)屬性，能夠在HTML5頁面中添學(xué)習(xí)內(nèi)容知識點(diǎn)重點(diǎn)難點(diǎn)√√√√source標(biāo)記√第八章表單的應(yīng)用表單的應(yīng)用1.理解表單的構(gòu)成，能夠根據(jù)不同情況選擇相應(yīng)的表單元素；知識點(diǎn)重點(diǎn)難點(diǎn)√Input控件√√√label控件√多行文本控件√√√√√1.理解CSS關(guān)系選擇器，能夠準(zhǔn)確判斷元素與元素間的關(guān)系；2.熟悉CSS屬性選擇器，能夠運(yùn)用屬性選擇器為頁面中的元素添加樣式；知識點(diǎn)重點(diǎn)難點(diǎn)√√√√√兄弟選擇器√√√第十章CSS3過渡、變形和動畫效果1.掌握CSS3變形和過渡屬性的設(shè)置；2.掌握@keyframes語法規(guī)則；3.掌握animate動畫屬性的使用。知識點(diǎn)重點(diǎn)設(shè)置變形√更改變形的中心√transition屬性√√√√√√√√√綜合實(shí)例1.了解網(wǎng)頁的整體結(jié)構(gòu)；2.了解分析、規(guī)劃、設(shè)計(jì)、制作網(wǎng)頁的流程；3.掌握HTML5基本元素的使用；4.掌握文字字體樣式、基本選擇器、盒子模型、浮動、定位的使用；5.掌握表單、高級選擇器、過渡、變形及知識點(diǎn)重點(diǎn)難點(diǎn)√網(wǎng)頁布局規(guī)劃實(shí)現(xiàn)√√頭部內(nèi)容制作√√內(nèi)容欄目制作√√底部內(nèi)容制作√上機(jī)合計(jì)2學(xué)時(shí)2學(xué)時(shí)4學(xué)時(shí)5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)第三章CSS基礎(chǔ)2學(xué)時(shí)6學(xué)時(shí)2學(xué)時(shí)6學(xué)時(shí)5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)1學(xué)時(shí)1學(xué)時(shí)2學(xué)時(shí)第八章表單的應(yīng)用2學(xué)時(shí)6學(xué)時(shí)2學(xué)時(shí)2學(xué)時(shí)4學(xué)時(shí)第十章CSS3過渡、變形和動畫效果1學(xué)時(shí)3學(xué)時(shí)4學(xué)時(shí)頁綜合實(shí)例8學(xué)時(shí)合計(jì)37學(xué)時(shí)27學(xué)時(shí)64學(xué)時(shí)績(40%)和期末考試(60%)組成，其中，平時(shí)成績包括出勤(5%)、作業(yè)(15%)、上機(jī)成績(20%)