网页设计与制作教程教学设计 项目二（任务4 导入式样式）.doc
课程单元教学设计
任课教师：科目：
授课班级：
单元
标题
项目二css3样式基础
任务4导入式样式
授课
时间
2021年月日
（第周，周，第节）
授课地点
教学学时
2课时
教学
目标
能力目标：
能使用导入式样式表；
知识目标：导入式表样式的写法；
教学
资源
黑板板书、多媒体课件、电脑
教学进程
步骤
教学内容
教师、学生
活动
教学方法
与手段
时间
分配
一、复习提问
1.链接式样式表如何使用？
教师活动：教师提问
学生活动：回答问题
提问法
5分钟
二、任务发布
课堂案例——css3结构组成
教师活动：1.发布任务并引导学生思考实习效果需要用到的工具、方法。
学生活动：
1.通过教师讲解，学生积极完成任务。
讲授法、演示法、
练习法
15分钟
讲授新课
1.使用导入样式表。
导入式：导入样式表与链接样式表的功能基本相同，只是语法和运作方式上略有区别。采用import方式导入的样式表，在HTML文件初使化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式导入。在HTML文件导入样式表，常用的有如下几种@import语句，可以选择任意一种放在style与/style标记之间。其语法格式如下：
head
styletype=“text/css”
@importurl（外部样式表文件地址）;
/style
/head
在@import关键字后面，利用ulr()函数包含具体的外部样式表文件的地址。
外部样式表文件的文件扩展名必须为.css。
外部样式表地址可以是绝地址，也可以是相对地址。
例2-4:启动VisualStudioCode编辑器输入以下的代码，文件名保存为2-4.html。
!DOCTYPEhtml
htmllang=en
head
metacharset=UTF-8
metaname=viewportcontent=width=device-width,initial-scale=1.0
metahttp-equiv=X-UA-Compatiblecontent=ie=edge
title导入式/title
styletype=text/css
@importurl(1.css);
/style
/head
body
h1CSS标题1/h1
p紫色、下划线、24px的效果1/p
h2CSS标题2/h2
p紫色、下划线、24px的效果2/p
h3CSS标题3/h3
p紫色、下划线、24px的效果3/p
/body
/html
教师活动：
1.讲解知识要点；
2.演示具体方法；
3.巡堂指导学生操作
学生活动：
1.认真听课做好笔记。
2.完成练习任务
讲授法、演示法、练习法
15分钟
四、任务实施
课堂案例——完成练习
教师活动：
1.演示重点难点；
2.巡堂指导学生操作；
3.发现共性问题并统一指导；
4、指导个别学生解决问题
学生活动：
1.独立完成练习任务；
2.遇到自己解决不了的问题向老师、同学提问，解决遇到的问题。
讲授法、演示法、练习法
30分钟
五、评价反馈
1.各小组组长检查本组成员作业完成情况，并给出成绩。
2.教师检查学生作业并展示优秀作品，总结共性问题。
教师活动：
1.展示优秀作品
2.点评学生作业，总结共性问题。
学生活动：
1.学习其他同学的优秀作品；
2.总结自己完成的情况，
讲授法、小组讨论法
10分钟
总结与作业
复习重点和难点：
1.掌握导入式样式表。
课后作业：完成课后练习
教师活动：1.教师带领学生复习重点及难点
2.布置课后作业
讲授法
5分钟
课后体会