响应式Web开发项目化教程（HTML5+CSS3） 孙晓娟 教学计划

,,学期授课计划进程表,,,,,,

,,,,,,,,,

周次,课次,教学内容,教学目标,时数,课堂类型,教学手段,作业或成果,备注

1,1,"项目1制作HBuilder百科页面

子项目一网页基础知识

子项目二HTML5概述",知识目标：了解HTML5发展史；熟悉HTML5浏览器支持情况能力目标：能够创建HTML5页面素质目标：培养学生团队合作意识,2,新授课,微机,,

,2,"项目1制作HBuilder百科页面

子项目三HBuilder软件的使用

子项目四文本控制元素",知识目标：掌握HBuilder软件的使用方法；掌握文本控制元素的语法格式能力目标：能够使用文本控制元素素质目标：培养学生团队合作意识,2,新授课,微机,,

2,3,"项目1制作HBuilder百科页面

子项目五图像元素

子项目六超链接元素",知识目标：掌握图像标记、超链接标记能力目标：能够熟练运用图像及超链接标记素质目标：培养学生团队合作意识,2,新授课,微机,,

,4,"项目1制作HBuilder百科页面

子项目七列表元素

子项目八结构元素",知识目标：掌握列表标记、结构标记能力目标：能够熟练运用列表标记、结构标记素质目标：培养学生团队合作意识,2,新授课,微机,作业一HTML阶段案例,

3,5,"项目1制作HBuilder百科页面

子项目九分组元素

子项目十内容交互元素",知识目标：掌握分组标记、内容交互标记能力目标：能够熟练运用分组标记、内容交互标记素质目标：培养学生团队合作意识,2,新授课,微机,,

,6,子项目十一综合项目——制作HBuilder百科页面,知识目标：掌握HTML5的标记的使用能力目标：能够熟练运用HTML5的标记素质目标：培养学生创新意识,2,实训课,微机,,

4,7,"项目2制作化妆品展示列表页面

子项目一初识CSS3

子项目二引入CSS样式与CSS语法格式",知识目标：掌握CSS3语法格式能力目标：能够熟练运用CSS语法素质目标：培养学生团队合作意识,2,新授课,微机,,

,8,"项目2制作化妆品展示列表页面

子项目三CSS基础选择器","知识目标：了解CSS3发展历史

掌握CSS基础选择器能力目标：能够运用CSS选择器选择页面元素

素质目标：培养学生团队合作意识",2,新授课,微机,作业二CSS阶段案例,

5,9,"项目2制作化妆品展示列表页面

子项目四伪元素选择器

子项目五链接伪类

子项目六结构化伪类选择器（一）

","知识目标：掌握伪元素选择器、链接伪类、结构化伪类选择器的使用能力目标：能够熟练运用伪元素选择器、链接伪类、结构化伪类选择器

素质目标：培养学生团队合作意识",2,新授课,微机,,

,10,"项目2制作化妆品展示列表页面

子项目六结构化伪类选择器（二）

子项目七CSS层叠性与继承性

子项目八CSS优先级

","知识目标：理解CSS优先级能力目标：能够运用CSS选择器选择页面元素

能够运用相应的属性定义文本样式

能够区分复合选择器权重的大小素质目标：培养学生团队合作意识",2,新授课,微机,,

6,11,"项目2制作化妆品展示列表页面

子项目九字体样式属性与文本样式属性",知识目标：掌握字体样式属性与文本样式属性能力目标：能够正确运用字体样式属性与文本样式属性素质目标：培养学生团队合作意识,2,新授课,微机,,

,12,子项目十综合实践——制作化妆品展示列表页面,知识目标：掌握CSS3语法规则能力目标：能够正确运用CSS3语法素质目标：培养学生创新意识,2,实训课,微机,作业三HTML5页面元素及属性阶段案例,

7,13,"项目3制作电商主播排行榜页面

子项目一初识盒模型

子项目二边框属性",知识目标：了解盒模型的概念能力目标：能够制作简单的盒子模型效果素质目标：培养学生团队合作意识,2,新授课,微机,,

,14,"项目3制作电商主播排行榜页面

子项目三边距属性

子项目四box-sizing属性

子项目五阴影属性",知识目标：掌握盒模型的相关属性能力目标：能够制作常见的盒子模型效果素质目标：培养学生团队合作意识,2,新授课,微机,,

8,15,"项目3制作电商主播排行榜页面

子项目六渐变属性

子项目七背景属性",知识目标：掌握背景属性的设置方法能力目标：能够设置背景颜色和图像素质目标：培养学生团队合作意识,2,新授课,微机,,

,16,子项目八综合项目——制作电商主播排行榜页面,知识目标：了解盒模型的概念；掌握盒模型的相关属性能力目标：能够制作简单的盒子模型效果素质目标：培养学生创新意识,2,实训课,微机,作业四盒模型阶段案例,

9,17,"项目4制作家装行业产品展示页面

子项目一过渡

子项目二变形",知识目标：掌握过渡和变形的制作方法能力目标：能够制作过渡和变形效果素质目标：培养学生团队合作意识,2,新授课,微机,,

,18,"项目4制作家装行业产品展示页面

子项目三动画",知识目标：掌握动画的制作方法能力目标：能够制作动画效果素质目标：培养学生团队合作意识,2,新授课,微机,,

10,19,子项目四综合项目——制作家装行业产品展示页面,知识目标：理解渐变属性的原理能力目标：能够设置渐变背景素质目标：培养学生创新意识,2,实训课,微机,,

,20,"项目5制作旅游网站的导航栏和banner版块

子项目一元素的浮动属性float

子项目二元素的清除浮动属性clear",知识目标：掌握盒模型相关知识能力目标：能够制作盒子模型效果素质目标：培养学生团队合作意识,2,新授课,微机,作业五动画案例,

11,21,"项目5制作旅游网站的导航栏和banner版块

子项目三元素的位置定位属性

子项目四元素的类型转换","知识目标：理解元素的浮动

熟悉清除浮动的方法能力目标：能够为元素设置浮动样式

能够使用不同方法清除浮动素质目标：培养学生团队合作意识",2,新授课,微机,,

,22,子项目五综合项目——制作旅游网站的导航栏和banner版块,"知识目标：理解元素的浮动

熟悉清除浮动的方法能力目标：能够为元素设置浮动样式

能够使用不同方法清除浮动素质目标：培养学生创新意识",2,实训课,微机,,

12,23,"项目6制作视频播放页面

子项目一嵌入视频

子项目二嵌入音频",知识目标：掌握元素的类型与相互转换的方法能力目标：能够区分元素类型素质目标：培养学生团队合作意识,2,新授课,微机,,

,24,"项目7制作垃圾分类页面

子项目一视口

子项目二简单媒体查询","知识目标：掌握视口的概念，掌握简单媒体查询的方法

能力目标：能够运用媒体查询解决实际问题素质目标：培养学生创新意识",2,新授课,微机,作业六元素定位和浮动案例,

13,25,"项目7制作垃圾分类页面

子项目三复杂媒体查询

子项目四百分比布局","知识目标：掌握复杂媒体查询的方法，掌握百分比布局的方法

能力目标：能够运用百分比布局解决实际问题素质目标：培养学生创新意识",2,新授课,微机,,

,26,"项目8制作个人信息页面

子项目一栅格系统

子项目二弹性盒子","知识目标：掌握栅格系统的概念，掌握弹性盒子的设置方法

能力目标：能够运用栅格系统，弹性盒子解决实际问题素质目标：培养学生创新意识",2,新授课,微机,,

14,27,"项目9制作简单响应式网站

子项目一项目描述

子项目二页面结构的搭建

子项目三顶部通栏的实现

子项目四导航栏的实现","知识目标：掌握站点的建立方法；掌握媒体查询和弹性盒布局的应用方法能力目标：能够实现简单的CSS3动画效果；会设置媒体查询，进行响应式设计

素质目标：培养学生独立分析问题、解决问题的能力",2,实训课,微机,,

,28,"项目9制作简单响应式网站

子项目五主体内容的实现（一）

","知识目标：掌握媒体查询和弹性盒布局的应用方法能力目标：能够实现简单的CSS3动画效果；会设置媒体查询，进行响应式设计

素质目标：培养学生独立分析问题、解决问题的能力",2,实训课,微机,作业七弹性盒布局动案例,

15,29,"项目9制作简单响应式网站

子项目六主体内容的实现（二）

子项目七版尾的实现","知识目标：掌握媒体查询和弹性盒布局的应用方法能力目标：能够实现简单的CSS3动画效果；会设置媒体查询，进行响应式设计

素质目标：培养学生独立分析问题、解决问题的能力",2,实训课,微机,,

,30,"项目10制作复杂响应式网站

子项目一项目描述

子项目二页面结构的搭建

子项目三顶部通栏的实现

子项目四导航栏的实现","知识目标：掌握站点的建立方法；掌握媒体查询和弹性盒布局的应用方法能力目标：能够实现简单的CSS3动画效果；会设置媒体查询，进行响应式设计

素质目标：培养学生独立分析问题、解决问题的能力",2,实训课,微机,,

16,31,"项目10制作复杂响应式网站

子项目五复杂主体内容的实现（一）

","知识目标：掌握媒体查询和弹性盒布局的应用方法