響應(yīng)式Web開(kāi)發(fā)項(xiàng)目化教程（HTML5+CSS3） 孫曉娟 教學(xué)計(jì)劃

,,學(xué)期授課計(jì)劃進(jìn)程表,,,,,,

,,,,,,,,,

周次,課次,教學(xué)內(nèi)容,教學(xué)目標(biāo),時(shí)數(shù),課堂類(lèi)型,教學(xué)手段,作業(yè)或成果,備注

1,1,"項(xiàng)目1制作HBuilder百科頁(yè)面

子項(xiàng)目一網(wǎng)頁(yè)基礎(chǔ)知識(shí)

子項(xiàng)目二HTML5概述",知識(shí)目標(biāo)：了解HTML5發(fā)展史；熟悉HTML5瀏覽器支持情況能力目標(biāo)：能夠創(chuàng)建HTML5頁(yè)面素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,2,"項(xiàng)目1制作HBuilder百科頁(yè)面

子項(xiàng)目三HBuilder軟件的使用

子項(xiàng)目四文本控制元素",知識(shí)目標(biāo)：掌握HBuilder軟件的使用方法；掌握文本控制元素的語(yǔ)法格式能力目標(biāo)：能夠使用文本控制元素素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

2,3,"項(xiàng)目1制作HBuilder百科頁(yè)面

子項(xiàng)目五圖像元素

子項(xiàng)目六超鏈接元素",知識(shí)目標(biāo)：掌握?qǐng)D像標(biāo)記、超鏈接標(biāo)記能力目標(biāo)：能夠熟練運(yùn)用圖像及超鏈接標(biāo)記素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,4,"項(xiàng)目1制作HBuilder百科頁(yè)面

子項(xiàng)目七列表元素

子項(xiàng)目八結(jié)構(gòu)元素",知識(shí)目標(biāo)：掌握列表標(biāo)記、結(jié)構(gòu)標(biāo)記能力目標(biāo)：能夠熟練運(yùn)用列表標(biāo)記、結(jié)構(gòu)標(biāo)記素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),作業(yè)一HTML階段案例,

3,5,"項(xiàng)目1制作HBuilder百科頁(yè)面

子項(xiàng)目九分組元素

子項(xiàng)目十內(nèi)容交互元素",知識(shí)目標(biāo)：掌握分組標(biāo)記、內(nèi)容交互標(biāo)記能力目標(biāo)：能夠熟練運(yùn)用分組標(biāo)記、內(nèi)容交互標(biāo)記素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,6,子項(xiàng)目十一綜合項(xiàng)目——制作HBuilder百科頁(yè)面,知識(shí)目標(biāo)：掌握HTML5的標(biāo)記的使用能力目標(biāo)：能夠熟練運(yùn)用HTML5的標(biāo)記素質(zhì)目標(biāo)：培養(yǎng)學(xué)生創(chuàng)新意識(shí),2,實(shí)訓(xùn)課,微機(jī),,

4,7,"項(xiàng)目2制作化妝品展示列表頁(yè)面

子項(xiàng)目一初識(shí)CSS3

子項(xiàng)目二引入CSS樣式與CSS語(yǔ)法格式",知識(shí)目標(biāo)：掌握CSS3語(yǔ)法格式能力目標(biāo)：能夠熟練運(yùn)用CSS語(yǔ)法素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,8,"項(xiàng)目2制作化妝品展示列表頁(yè)面

子項(xiàng)目三CSS基礎(chǔ)選擇器","知識(shí)目標(biāo)：了解CSS3發(fā)展歷史

掌握CSS基礎(chǔ)選擇器能力目標(biāo)：能夠運(yùn)用CSS選擇器選擇頁(yè)面元素

素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)",2,新授課,微機(jī),作業(yè)二CSS階段案例,

5,9,"項(xiàng)目2制作化妝品展示列表頁(yè)面

子項(xiàng)目四偽元素選擇器

子項(xiàng)目五鏈接偽類(lèi)

子項(xiàng)目六結(jié)構(gòu)化偽類(lèi)選擇器（一）

","知識(shí)目標(biāo)：掌握偽元素選擇器、鏈接偽類(lèi)、結(jié)構(gòu)化偽類(lèi)選擇器的使用能力目標(biāo)：能夠熟練運(yùn)用偽元素選擇器、鏈接偽類(lèi)、結(jié)構(gòu)化偽類(lèi)選擇器

素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)",2,新授課,微機(jī),,

,10,"項(xiàng)目2制作化妝品展示列表頁(yè)面

子項(xiàng)目六結(jié)構(gòu)化偽類(lèi)選擇器（二）

子項(xiàng)目七CSS層疊性與繼承性

子項(xiàng)目八CSS優(yōu)先級(jí)

","知識(shí)目標(biāo)：理解CSS優(yōu)先級(jí)能力目標(biāo)：能夠運(yùn)用CSS選擇器選擇頁(yè)面元素

能夠運(yùn)用相應(yīng)的屬性定義文本樣式

能夠區(qū)分復(fù)合選擇器權(quán)重的大小素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)",2,新授課,微機(jī),,

6,11,"項(xiàng)目2制作化妝品展示列表頁(yè)面

子項(xiàng)目九字體樣式屬性與文本樣式屬性",知識(shí)目標(biāo)：掌握字體樣式屬性與文本樣式屬性能力目標(biāo)：能夠正確運(yùn)用字體樣式屬性與文本樣式屬性素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,12,子項(xiàng)目十綜合實(shí)踐——制作化妝品展示列表頁(yè)面,知識(shí)目標(biāo)：掌握CSS3語(yǔ)法規(guī)則能力目標(biāo)：能夠正確運(yùn)用CSS3語(yǔ)法素質(zhì)目標(biāo)：培養(yǎng)學(xué)生創(chuàng)新意識(shí),2,實(shí)訓(xùn)課,微機(jī),作業(yè)三HTML5頁(yè)面元素及屬性階段案例,

7,13,"項(xiàng)目3制作電商主播排行榜頁(yè)面

子項(xiàng)目一初識(shí)盒模型

子項(xiàng)目二邊框?qū)傩?,知識(shí)目標(biāo)：了解盒模型的概念能力目標(biāo)：能夠制作簡(jiǎn)單的盒子模型效果素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,14,"項(xiàng)目3制作電商主播排行榜頁(yè)面

子項(xiàng)目三邊距屬性

子項(xiàng)目四box-sizing屬性

子項(xiàng)目五陰影屬性",知識(shí)目標(biāo)：掌握盒模型的相關(guān)屬性能力目標(biāo)：能夠制作常見(jiàn)的盒子模型效果素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

8,15,"項(xiàng)目3制作電商主播排行榜頁(yè)面

子項(xiàng)目六漸變屬性

子項(xiàng)目七背景屬性",知識(shí)目標(biāo)：掌握背景屬性的設(shè)置方法能力目標(biāo)：能夠設(shè)置背景顏色和圖像素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,16,子項(xiàng)目八綜合項(xiàng)目——制作電商主播排行榜頁(yè)面,知識(shí)目標(biāo)：了解盒模型的概念；掌握盒模型的相關(guān)屬性能力目標(biāo)：能夠制作簡(jiǎn)單的盒子模型效果素質(zhì)目標(biāo)：培養(yǎng)學(xué)生創(chuàng)新意識(shí),2,實(shí)訓(xùn)課,微機(jī),作業(yè)四盒模型階段案例,

9,17,"項(xiàng)目4制作家裝行業(yè)產(chǎn)品展示頁(yè)面

子項(xiàng)目一過(guò)渡

子項(xiàng)目二變形",知識(shí)目標(biāo)：掌握過(guò)渡和變形的制作方法能力目標(biāo)：能夠制作過(guò)渡和變形效果素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,18,"項(xiàng)目4制作家裝行業(yè)產(chǎn)品展示頁(yè)面

子項(xiàng)目三動(dòng)畫(huà)",知識(shí)目標(biāo)：掌握動(dòng)畫(huà)的制作方法能力目標(biāo)：能夠制作動(dòng)畫(huà)效果素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

10,19,子項(xiàng)目四綜合項(xiàng)目——制作家裝行業(yè)產(chǎn)品展示頁(yè)面,知識(shí)目標(biāo)：理解漸變屬性的原理能力目標(biāo)：能夠設(shè)置漸變背景素質(zhì)目標(biāo)：培養(yǎng)學(xué)生創(chuàng)新意識(shí),2,實(shí)訓(xùn)課,微機(jī),,

,20,"項(xiàng)目5制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊

子項(xiàng)目一元素的浮動(dòng)屬性float

子項(xiàng)目二元素的清除浮動(dòng)屬性clear",知識(shí)目標(biāo)：掌握盒模型相關(guān)知識(shí)能力目標(biāo)：能夠制作盒子模型效果素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),作業(yè)五動(dòng)畫(huà)案例,

11,21,"項(xiàng)目5制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊

子項(xiàng)目三元素的位置定位屬性

子項(xiàng)目四元素的類(lèi)型轉(zhuǎn)換","知識(shí)目標(biāo)：理解元素的浮動(dòng)

熟悉清除浮動(dòng)的方法能力目標(biāo)：能夠?yàn)樵卦O(shè)置浮動(dòng)樣式

能夠使用不同方法清除浮動(dòng)素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)",2,新授課,微機(jī),,

,22,子項(xiàng)目五綜合項(xiàng)目——制作旅游網(wǎng)站的導(dǎo)航欄和banner版塊,"知識(shí)目標(biāo)：理解元素的浮動(dòng)

熟悉清除浮動(dòng)的方法能力目標(biāo)：能夠?yàn)樵卦O(shè)置浮動(dòng)樣式

能夠使用不同方法清除浮動(dòng)素質(zhì)目標(biāo)：培養(yǎng)學(xué)生創(chuàng)新意識(shí)",2,實(shí)訓(xùn)課,微機(jī),,

12,23,"項(xiàng)目6制作視頻播放頁(yè)面

子項(xiàng)目一嵌入視頻

子項(xiàng)目二嵌入音頻",知識(shí)目標(biāo)：掌握元素的類(lèi)型與相互轉(zhuǎn)換的方法能力目標(biāo)：能夠區(qū)分元素類(lèi)型素質(zhì)目標(biāo)：培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí),2,新授課,微機(jī),,

,24,"項(xiàng)目7制作垃圾分類(lèi)頁(yè)面

子項(xiàng)目一視口

子項(xiàng)目二簡(jiǎn)單媒體查詢(xún)","知識(shí)目標(biāo)：掌握視口的概念，掌握簡(jiǎn)單媒體查詢(xún)的方法

能力目標(biāo)：能夠運(yùn)用媒體查詢(xún)解決實(shí)際問(wèn)題素質(zhì)目標(biāo)：培養(yǎng)學(xué)生創(chuàng)新意識(shí)",2,新授課,微機(jī),作業(yè)六元素定位和浮動(dòng)案例,

13,25,"項(xiàng)目7制作垃圾分類(lèi)頁(yè)面

子項(xiàng)目三復(fù)雜媒體查詢(xún)

子項(xiàng)目四百分比布局","知識(shí)目標(biāo)：掌握復(fù)雜媒體查詢(xún)的方法，掌握百分比布局的方法

能力目標(biāo)：能夠運(yùn)用百分比布局解決實(shí)際問(wèn)題素質(zhì)目標(biāo)：培養(yǎng)學(xué)生創(chuàng)新意識(shí)",2,新授課,微機(jī),,

,26,"項(xiàng)目8制作個(gè)人信息頁(yè)面

子項(xiàng)目一柵格系統(tǒng)

子項(xiàng)目二彈性盒子","知識(shí)目標(biāo)：掌握柵格系統(tǒng)的概念，掌握彈性盒子的設(shè)置方法

能力目標(biāo)：能夠運(yùn)用柵格系統(tǒng)，彈性盒子解決實(shí)際問(wèn)題素質(zhì)目標(biāo)：培養(yǎng)學(xué)生創(chuàng)新意識(shí)",2,新授課,微機(jī),,

14,27,"項(xiàng)目9制作簡(jiǎn)單響應(yīng)式網(wǎng)站

子項(xiàng)目一項(xiàng)目描述

子項(xiàng)目二頁(yè)面結(jié)構(gòu)的搭建

子項(xiàng)目三頂部通欄的實(shí)現(xiàn)

子項(xiàng)目四導(dǎo)航欄的實(shí)現(xiàn)","知識(shí)目標(biāo)：掌握站點(diǎn)的建立方法；掌握媒體查詢(xún)和彈性盒布局的應(yīng)用方法能力目標(biāo)：能夠?qū)崿F(xiàn)簡(jiǎn)單的CSS3動(dòng)畫(huà)效果；會(huì)設(shè)置媒體查詢(xún)，進(jìn)行響應(yīng)式設(shè)計(jì)

素質(zhì)目標(biāo)：培養(yǎng)學(xué)生獨(dú)立分析問(wèn)題、解決問(wèn)題的能力",2,實(shí)訓(xùn)課,微機(jī),,

,28,"項(xiàng)目9制作簡(jiǎn)單響應(yīng)式網(wǎng)站

子項(xiàng)目五主體內(nèi)容的實(shí)現(xiàn)（一）

","知識(shí)目標(biāo)：掌握媒體查詢(xún)和彈性盒布局的應(yīng)用方法能力目標(biāo)：能夠?qū)崿F(xiàn)簡(jiǎn)單的CSS3動(dòng)畫(huà)效果；會(huì)設(shè)置媒體查詢(xún)，進(jìn)行響應(yīng)式設(shè)計(jì)

素質(zhì)目標(biāo)：培養(yǎng)學(xué)生獨(dú)立分析問(wèn)題、解決問(wèn)題的能力",2,實(shí)訓(xùn)課,微機(jī),作業(yè)七彈性盒布局動(dòng)案例,

15,29,"項(xiàng)目9制作簡(jiǎn)單響應(yīng)式網(wǎng)站

子項(xiàng)目六主體內(nèi)容的實(shí)現(xiàn)（二）

子項(xiàng)目七版尾的實(shí)現(xiàn)","知識(shí)目標(biāo)：掌握媒體查詢(xún)和彈性盒布局的應(yīng)用方法能力目標(biāo)：能夠?qū)崿F(xiàn)簡(jiǎn)單的CSS3動(dòng)畫(huà)效果；會(huì)設(shè)置媒體查詢(xún)，進(jìn)行響應(yīng)式設(shè)計(jì)

素質(zhì)目標(biāo)：培養(yǎng)學(xué)生獨(dú)立分析問(wèn)題、解決問(wèn)題的能力",2,實(shí)訓(xùn)課,微機(jī),,

,30,"項(xiàng)目10制作復(fù)雜響應(yīng)式網(wǎng)站

子項(xiàng)目一項(xiàng)目描述

子項(xiàng)目二頁(yè)面結(jié)構(gòu)的搭建

子項(xiàng)目三頂部通欄的實(shí)現(xiàn)

子項(xiàng)目四導(dǎo)航欄的實(shí)現(xiàn)","知識(shí)目標(biāo)：掌握站點(diǎn)的建立方法；掌握媒體查詢(xún)和彈性盒布局的應(yīng)用方法能力目標(biāo)：能夠?qū)崿F(xiàn)簡(jiǎn)單的CSS3動(dòng)畫(huà)效果；會(huì)設(shè)置媒體查詢(xún)，進(jìn)行響應(yīng)式設(shè)計(jì)

素質(zhì)目標(biāo)：培養(yǎng)學(xué)生獨(dú)立分析問(wèn)題、解決問(wèn)題的能力",2,實(shí)訓(xùn)課,微機(jī),,

16,31,"項(xiàng)目10制作復(fù)雜響應(yīng)式網(wǎng)站

子項(xiàng)目五復(fù)雜主體內(nèi)容的實(shí)現(xiàn)（一）

","知識(shí)目標(biāo)：掌握媒體查詢(xún)和彈性盒布局的應(yīng)用方法