《网页制作技术》混合教学改革课程教学设计

《网页制作技术》课程单元教学设计——单元1

项目1-任务1：制作“诚聘英才”页面-

课次1课次名称课时2学时

步骤1:页面内容添加

技能目标知识目标素质目标

1.了解的HTML文档的基本结构及标签1.具备良好的规范化命名意

1.能利用Hbuilder编辑器完成

教学目标特点识；

文字页的内容添加及页面效果浏2.熟练掌握文本段落相关标签、常用结

览：构化标签语法及其意义2.具备敏锐的观察及检查能

力。

重点和重点：1.文本段落相关标签；2.常用结构化标签；

难点难点：1.标签语法及应用

工作任务步骤1：添加网页页面内容；

1.任务单卡、图片及文字资料；

教学准备

2.题库、测试活动、课时资源上传。

教学进程教学内容信息化手段应用说明教学方法和手段时间分配

一、课前

1.学生通过线上教学平台进

行PPT、微课视频的学习利用平台统计、分析学生学超星学习能平台

课前导学自主学习

2.学生在线进行课前小测试习情况在线学习

3.完成课前练习任务

二、课中

利用平台点击签到，及时结采用平台信息化

1.考勤通过平台进行考勤1分钟

束签到活动。教学手段

1.通报学生学习微课情况（平1.根据平台数据统计功能通

2.检查、解台自动统计）;报学生学习微课情况：采用平台信息化

10分钟

析2.对平台测试题中的错误之2.通过PC端演示测试情况并教学手段

处进行解析进行学习内容解析

运用课前练习任务对其中的

3.实例解析教学广播软件案例法，比较法10分钟

标签含义进行解析

4.告知学生

明确任务1效果，根据任务单利用红蜘蛛广播软件浏览观察效

任务，学生任务驱动法15分钟

「实例完成源码构建1.2步果

动手

5.点评课中平台抽取三位学生的作品进利用红蜘蛛广播软件浏览观察效

演示法，讲授法10分钟

作业效果行点评果，点评制作效果

6.教师讲授结构化标签及实例解析教学广播软件讲授法15分钟

利用红蜘蛛广播软件浏览观察效

7.学生动手按照任务卡完成第3步任务驱动法10分钟

果，点评效果

运用flashfxp上传工具将本任务

8.任务提交虚拟网络空间实训平台任务驱动法10分钟

效果上传至虚拟空间

9.点评及总教师对上交的页面进行点评，给出职业素养训导：规范代码排版格对比法、归纳总结

1()分钟

结修改意见，学生完善式法

三、课后

1.学生通过学习通巩固学习

平台资源在线学

巩固及拓展课程资源，进行知识内化和拓利用平台巩固学习

习与作业提交

展

《网页制作技术》课程单元教学设计——单元2

项目1-任务1：制作“诚聘英才”页面-

课次2课次名称课时2学时

步骤2：页面美化

技能目标知识目标素质目标

1.能在网页中添加CSS样式修饰

1.掌握样式表的三种应用方式及优先级1.具备良好的规范化命名意

网页对象

教学目标别区分识；

2.能完成简单文字内容页的制作

2,掌握CSS定义的基础语法:

及对象样式定义2.具备敏锐的观察及检查能

3.掌握CSS中文本属性及属性值含义

力。

重点和重点：1.样式表的三种应用方式：2.文本属性及属性值含义。

难点难点：1.样式表的三种应用方式、文本样式的综合应用。

工作任务步骤2：网页页面美化。

1.任务单卡、图片及文字资料；

教学准备

2.题库、测试活动、课时资源上传。

教学进程教学内容信息化手段应用说明教学方法和手段时间分配

一、课前

1.学生通过线上教学平台进

行PPT、微课视频的学习利用平台统计、分析学生学超星学习能平台

课前导学自主学习

2.学生在线进行课前小测试习情况在线学习

3.完成课前练习任务

二、课中

利用平台点击签到，及时结采用平台信息化

1.考勤通过平台进行考勤1分钟

束签到活动。教学手段

1.通报学生学习微课情况(平1.根据平台数据统计功能通

2.检查、解台自动统计);报学生学习微课情况：采用平台信息化

10分钟

析2.对平台测试题中的错误之2.通过PC端演示测试情况并教学手段

处进行解析进行学习内容解析

3.告知学生

明确任务效果，完成样式添加利用红蜘蛛广播软件浏览观察效

任务，学生任务驱动法15分钟

步骤果

动手

4.演示讲授对三种添加方式进行对比教学广播软件、录屏软件讲授、录屏10分钟

5.点评课中平台抽取三位学生H勺作品进利用红蜘蛛广播软件浏览观察效

演示法，讲授法10分钟

作业效果行点评果，点评制作效果

6.微视频学

文本属性实例解析微视频、教学广播软件演示法1()分钟

习

《网页制作技术》课程单元教学设计——单元3

项目1一任务2：制作“新闻中心”页面-

课次3课次名称课时2学时

步骤1：页面内容添加

技能目标知识目标素质目标

掌握列表图文页常用标签：＜3＞、＜。1＞、1.具备良好的规范化命名意

教学目标1.能进行列表图文页制作＜li＞、＜dl＞、＜dt＞x＜dd＞、＜span＞识；

2.能在网页中插入各类媒体资料掌握多媒体资源插入常用标签：＜img＞.

2.具备敏锐的观察及检查能

＜embvd＞、＜vidcu＞'.＜audiu＞'.＜$ouice＞

力。

重点和重点：1.列表标签：2.媒体标签。

难点难点：1.嵌套列表、img。

工作任务步骤1:添加网页页面内容；

1.任务单卡、图片及文字资料；

教学准备

2.题库、测试活动、课时资源上传。

教学进程教学内容信息化手段应用说明教学方法和手段时间分配

一、课前

1.学生通过超星学习通进行

PPT、微课视频的学习利用平台统计、分析学生学超星学习能平台

课前导学自主学习

2.学生在线进行课前小测试习情况在线学习

3.完成课前练习任务

二、课中

利用平台点击签到，及时结采用平台信息化

1.考勤通过平台进行考勤1分钟

束签到活动。教学手段

1.通报学生学习微课情况（平1.根据平台数据统计功能通

2.检查、解台自动统计）;报学生学习微课情况：采用平台信息化

10分钟

析2.对平台测试题中的错误之2.通过PC端演示测试情况并教学手段

处进行解析进行学习内容解析

对嵌套列表进行解析，化解难

3.讲授教学广播软件案例法10分钟

点

4.告知学生

明确任务效果，完成页面：利用红蜘蛛广播软件浏览观察效

任务，学生任务驱动法15分钟

news.hLml果

动手

5.点评课中平台抽取三位学生的作品进利用红蜘蛛广播软件浏览观察效

演示法，讲授法10分钟

作业效果行点评,并讲授关联的知识点果，点评制作效果

6.讲授媒体标签教学广播软件演示法，讲授法15分钟

7.告知学

明确任务效果，完成页面：

生任务，学教学广播软件任务驱动法10分钟

ncws_media.html

生动手

运用flashfxp上传工具将本任务

8.任务提交虚拟网络空间实训平台任务驱动法10分钟

效果上传至虚拟空间

9.点评及总教师对上交的页面进行点评，给出职业素养训导：规范代码排版格对比法、归纳总结

10分钟

结修改意见，学生完善式法

三、课后

1.学生通过学习通巩固学习

平台资源在线学

巩固及拓展课程资源，进行知识内化和拓利用平台巩固学习

习与作业提交

展

《网页制作技术》课程单元教学设计——单元4

项目1一任务2：制作“新闻中心”页面

课次4课次名称课时2学时

步骤2：美化页面

技能目标知识目标素质目标

1.能对各类CSS选择器的功能进1.掌握CSS基础选择器的类型及其各自1.具备良好的规范化命名意

教学目标行区分并灵活应用定义语法规则识；

2能.计算CSS选择器的灰重2.掌握CSS选择器的权重设置

2.具备敏锐的观察及检查能

3.能对列表进行样式;设置掌握CSS中列表的属性及属性值含义

力。

重点和重点：1.基础选择器：2选择器权重。

难点难点：基础选择器的应用

工作任务步骤1：页面美化；

1.任务单卡、图片及文字资料；

教学准备

2.题库、测试活动、课时资源上传。

教学进程教学内容信息化手段应用说明教学方法和手段时间分配

一、课前

1.学生通过超星学习通进行

PPT、微课视频的学习利用平台统计、分析学生学超星学习能平台

课前导学自主学习

2.学生在线进行课前小测试习情况在线学习

3.完成课前练习任务

二、课中

利用平台点击签到，及时结采用平台信息化

1.考勤通过平台进行考勤1分钟

束签到活动。教学手段

1.通报学生学习微课情况（平1.根据平台数据统计功能通

2.检查、解台自动统计）;报学生学习微课情况：采用平台信息化

10分钟

析2.对平台测试题中的错误之2.通过PC端演示测试情况并教学手段

处进行解析进行学习内容解析

播放基础选择器实例微视频

3.知识学习微视频、平台抢答功能案例法15分钟

并抢答

3.任务驱动完成课中任务的一、二步骤教学广播软件案例法15分钟

对任务中出现的问题进行解

4.答疑教学广播软件演示法5分钟

析

5.讲授列表属性及属性值教学广播软件、录屏软件演示法，案例法10分钟

7.任务驱

完成课中任务的步骤三任务驱动法10分钟

动

8.讲授及应讲授Css优先级，并运用录屏

录屏软件讲授法1()分钟

用软件进行录制

运用flashfxp上传工具将本任务

8.任务提交虚拟网络空间实训平台任务驱动法10分钟

效果上传至虚拟空间

9.点评及总教师对上交的页面进行点评，给出职业素养训导：规范代码排版格对比法、归纳总结

5分钟

结修改意见，学生完善式法

三、课后

1.学生通过学习通巩固学习

平台资源在线学

巩固及拓展课程资源，进行知识内化和拓利用平台巩固学习

习与作业提交

展

《网页制作技术》课程单元教学设计一一单元

课次6课次名称阶段实务考试1课时2学时

技能目标知识目标素质目标

1.具备良好的规范化命名意

教学目标能综合应用1-5单元的知识识；

理解并掌握1-5单元的知识

进行

2.具备敏锐的观察及检查能

力。

重点和重点：文本段落、歹J表标签、css引入、基础选择器

难点难点：标签的准确选择及样式的灵活应用

工作任务页面效果制作

教学准备1.试题及素材；

教学进程教学内容信息化手段应用说明教学方法和手段时间分配

一、课前

超星学习通平台

课前导学复习前五单元的内容超星学习通平台自主学习

在线学习

二、课中

利用平台点击签到，及时结采用平台信息化

1.考勤通过平台进行考勤1分钟

束签到活动。教学手段

2.考试发放试题并进行考试教学广播软件45分钟

运用门ashfxp上传工具将本任务

虚拟网络空间实训平台、超

3.作品提交效果上传至虚拟空间，并运用学习仿真法、测试法10分钟

星学习通考试功能

通进行网址提交

教师完成阶段实务考试，并录

4.演示教学广播软件、录屏软件演示法，案例法15分钟

屏

教师运用平台抽取五位同学

5.作品点评教学广播软件案例法15分钟

的作品

6.点评及总教师对上交的页面进行点评，给出职业素养训导：规范代码排版格对比法、归纳总结

5分钟

结修改意见，学生完善式法

三、课后

平台资源在线学

巩固及拓展完善阶段实务考试作品利用平台巩固学习

习与作业提交

《网页制作技术》课程单元教学设计——单元5

项目1一任务3：制作“新闻详情”图文页-

课次5课次名称课时2学时

步骤1：页面内容添加

技能目标知识目标素质目标

1.具备良好的规范化命名意

教学目标能用标签建立不同类型的超级熟练掌握常用标签：＜a＞及其各种类型语识；

链接法

2.具备敏锐的观察及检查能

力。

重点和重点：La标签及属性；

难点难点：1.属性设置。

工作任务步骤1:添加网页页面内容；

1.任务单卡、图片及文字资料；

教学准备

2.题库、测试活动、课时资源上传。

教学进程教学内容信息化手段应用说明教学方法和手段时间分配

一、课前

1.学生通过超星学习通进行

利用平台统计、分析学生学超星学习能平台

课前导学PPT、微课视频的学习自主学习

习情况在线学习

2.完成课前练习任务

二、课中

利用平台点击签到，及时结采用平台信息化

1.考勤通过平台进行考勤1分钟

束签到活动。教学手段

1.根据平台数据统计功能通

1.通报学生学习微课情况（平

2.检查、解报学生学习微课情况；采用平台信息化

台自动统计）；10分钟

析2.通过PC端演示课前任务情教学手段

2.抽查课前任务完成效果

况并进行学习内容解析

对链接类型进行解析，化解难

3.讲授教学广播软件案例法10分钟

占

4.告知学生

明确任务效果，完成页面：利用红蜘蛛广播软件浏览观察效

任务，学生任务驱动法20分钟

newsinfo,html果

动手

5.点评课中平台抽取三位学生的作品进利用红蜘蛛广播软件浏览观察效

演示法，讲授法10分钟

作业效果行点评，并讲授关联的知识点果，点评制作效果

6.完善完善页面效果学生电脑任务驱动法10分钟

运用flashfxp上传工具将本任务

7.任务提交虚拟网络空间实训平台任务驱动法10分钟

效果上传至虚拟空间

8.点评及总教师对上交的页面进行点评，给出职业素养训导：规范代码排版格对比法、归纳总结

9分钟

结修改意见，学生完善式法

9.讲授拓展知识：锚点标签教学广播软件演示法，讲授法10分钟

三、课后

1.学生通过学习通巩固学习

平台资源在线学

巩固及拓展课程资源，完成拓展知识相关利用平台巩固学习

习与作业提交

的练习，进行知识内化和拓展

《网页制作技术》课程单元教学设计一一单元6

项目1一任务3：制作“新闻详情”图文页-

课次6课次名称课时2学时

步骤2：美化页面

技能目标知识目标素质目标

1.能利用CSS字体样式丰富的文1.掌握CSS字体样式其属性含义1.具备良好的规范化命名意

教学目标字格式设置识：

2.掌握伪类选择符的四种状态

2能.设置丰富的超级链接样式

3.掌握边框基础属性及属性含2.具备敏锐的观察及检查能

3能.对网页对象进行边框设置

义力。

重点和重点：1.字体样式；2伪类选择符；3边框基础属性。

难点难点：基础选择器的应用

工作任务步骤1：页面美化；

1.任务单卡、图片及文字资料；

教学准备

2.题库、测试活动、课时资源上传。

教学进程教学内容信息化手段应用说明教学方法和手段时间分配

一、课前

1.学生通过超星学习通进行

PPT、微课视频的学习利用平台统计、分析学生学超星学习能平台

课前导学自主学习

2.学生在线进行课前小测试习情况在线学习

3.完成课前练习任务

二、课中

利用平台点击签到，及时结采用平台信息化

1.考勤通过平台进行考勤1分钟

束签到活动。教学手段

1.通报学生学习微课情况（平1.根据平台数据统计功能通

2.检查、解台自动统计）;报学生学习微课情况：采用平台信息化

10分钟

析2.对平台测试题中的错误之2.通过PC端演示测试情况并教学手段

处进行解析进行学习内容解析

3.知识学习字体属性微视频、平台抢答功能演示法10分钟

4.任务驱动完成字体设置案例学生电脑案例法10分钟

5.知识学习伪类选择符录屏软件、教学广播软件演示法10分钟

案例法、任务驱动

6.任务驱动完成伪类选择符案例学生电脑10分钟

法

7.知识学习基础边框样式微视频、平台抢答功能演示法10分钟

8.任务驱

完成课中任务教学广播软件任务驱动法10分钟

动

9.点评及总教师对上交的页面进行点评，给出职业素养训导：规范代码排版格对比法、归纳总结

10分钟

结修改意见，学生完善式法

10.任务提运用flashfxp上传工具将本任务

虚拟网络空间实训平台任务驱动法5分钟

交效果上传至虚拟空间

三、课后

1.学生通过学习通巩固学习

平台资源在线学

巩固及拓展课程资源，进行知识内化和拓利用平台巩固学习

习与作业提交

展

《网页制作技术》课程单元教学设计——单元9

项目1一任务4：制作“产品展示”表格页一步

课次9课次名称课时2学时

骤1：表格建立及美化

技能目标知识目标素质目标

1.掌握表格常用标签＜〔able＞、＜tr＞、

1.能综合利用表格各类标签＜td＞、＜th＞及其属性意义

1.具备良好的规范化命名意

进行复杂表格制作

教学目标2.掌握CSS样式中表格相关的属性及识；

2.能利用边框、表格、边框、

属性值含义

填充属性样式对网页对象进