课程信息
课程名称：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强化训练：