Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版）-教案-教学指南

课程信息课程名称：web前端开发任务驱动式教程适用对象：高等院校、高等职业院校学生，前端与移动开发培训学员，网页制作、网站开发、网页编程和美工设计工作者教材版本：第2版（微课版）总学时：64学时先修课程：计算机基础、网页设计基础课程简介本课程以“采用网页新标准技术、突破传统知识体系结构、基于工作能力培养、置身真实工作情境”为标准，通过任务驱动的教学方式，全面讲解HTML5、CSS3、JavaScript等Web前端开发技术。课程包含8个单元、18个任务、18个实战演练、18个强化训练和18个课后实训，旨在深入剖析网页布局及样式美化的思路和方法，使学生掌握Web前端核心技术，启发并引导学生自主学习，并形成良好的职业素养。课程教学要求理论与实践相结合：通过实战演练、强化训练和课后实训，将理论知识应用于实际项目中。注重能力培养：培养学生的动手能力、问题解决能力和团队协作能力。强调职业素养：引导学生形成良好的编码习惯、项目管理和团队协作意识。鼓励自主学习：利用微课资源，鼓励学生自主探索和深入学习。课程教学内容单元任务主要内容重难点学时第一单元任务1：搭建开发环境1.1Web与Internet

1.2Web的工作原理

1.3Web页的类型

1.4HTML5概述

1.5实战演练：搭建开发环境

1.6强化训练：创建第一个HTML5页面

1.7课后实训重点：Web工作原理、HTML5概述

难点：搭建开发环境4第二单元任务2：文字与段落排版2.1HTML5文档格式

2.2标签的属性

2.3文本标签

2.4分隔标签

2.5序列标签

2.6实战演练：制作“科技馆参观须知”网页

2.7强化训练：制作“我家菜馆”点菜单网页

2.8课后实训重点：文本标签、分隔标签

难点：序列标签的应用6第二单元任务3：图像和超链接3.1图像标签

3.2绝对路径和相对路径

3.3超链接标签

3.4锚点链接

3.5实战演练：制作“网页技术介绍”网页

3.6强化训练：制作“文章故事网”网页

3.7课后实训重点：图像标签、超链接标签

难点：锚点链接的应用6第三单元任务4：结构标签和分组标签4.1结构标签

4.2分组标签

4.3实战演练：制作“唐诗欣赏”网页

4.4强化训练：制作“温州地标性建筑”网页

4.5课后实训重点：结构标签、分组标签

难点：结构标签的合理使用6第三单元任务5：页面交互标签、层次语义标签和全局属性5.1页面交互标签

5.2层次语义标签

5.3全局属性

5.4实战演练：制作“书评网”网页

5.5强化训练：制作“面试应答技巧”网页

5.6课后实训重点：页面交互标签、层次语义标签

难点：全局属性的应用6第四单元任务6：标记选择器和类选择器6.1CSS简介

6.2CSS样式规则

6.3CSS样式的引入

6.4CSS样式的优先级

6.5标记选择器

6.6类选择器

6.7实战演练：制作“美化文章”网页

6.8强化训练：制作“图文混排”网页

6.9课后实训重点：CSS样式规则、标记选择器和类选择器

难点：CSS样式的优先级6第四单元任务7：链接伪类和CSS样式面板7.1链接伪类

7.2CSS样式面板

7.3实战演练：制作“散文欣赏”网页

7.4强化训练：制作“热点新闻”列表

7.5课后实训重点：链接伪类、CSS样式面板的使用

难点：链接伪类的应用4第四单元任务8：id选择器、伪选择器和表格样式8.1id选择器

8.2伪选择器

8.3表格

8.4实战演练：制作“鞋子尺码对照单”网页

8.5强化训练：制作“婴儿身高体重标准表”网页

8.6课后实训重点：id选择器、伪选择器

难点：表格样式的应用6第四单元任务9：复合选择器和通配符选择器9.1复合选择器

9.2通配符选择器

9.3同时应用多个样式

9.4实战演练：制作“寓言故事”网页

9.5强化训练：制作“诗词欣赏”网页

9.6课后实训重点：复合选择器、通配符选择器

难点：多个样式的应用6第五单元任务10：盒子模型及应用10.1盒子模型的概念

10.2边框的设置

10.3内边距的设置

10.4外边距的设置

10.5实战演练：制作“古诗文欣赏”网页

10.6强化训练：制作“散文赏析”网页

10.7课后实训重点：盒子模型的概念、边框和内边距的设置

难点：外边距的折叠与清除6第五单元任务11：元素的浮动11.1元素的类型及转换

11.2overflow属性

11.3元素的浮动

11.4清除浮动

11.5实战演练：制作“网站导航条”网页

11.6强化训练：制作“浪漫花语百科网”网页

11.7课后实训重点：元素的浮动、清除浮动

难点：overflow属性的应用6第五单元任务12：元素的定位12.1元素的定位模式与边偏移

12.2静态定位

12.3相对定位

12.4绝对定位

12.5固定定位

12.6z-index层叠等级属性

12.7实战演练：制作“旅游景点推荐网”banner

12.8强化训练：制作“个人博客首页”网页

12.9课后实训重点：相对定位、绝对定位、固定定位

难点：z-index层叠等级属性的应用6第五单元任务13：阴影与渐变属性13.1box-shadow属性

13.2box-sizing属性

13.3线性渐变

13.4径向渐变

13.5重复渐变

13.6Web字体图标

13.7实战演练：制作“网站广告栏”网页

13.8强化训练：制作“旅游攻略网”网页

13.9课后实训重点：阴影属性、渐变属性

难点：Web字体图标的应用6第五单元任务14：过渡与变形属性14.1过渡属性

14.2变形属性

14.3实战演练：制作“产品展示”网页

14.4强