网页设计与制作教程教学设计 项目七（任务3 制作超链接）.docVIP

课程单元教学设计

任课教师：科目：

授课班级：

单元

标题

项目七使用CSS制作实用菜单

任务3制作超链接

授课

时间

2021年月日

（第周，周，第节）

授课地点

信息楼304、406、606

教学学时

2课时

教学

目标

能力目标：

能将列表签标设置为导航栏，使用CSS美化列表；

知识目标：

掌握无序列表设置为导航栏的方法；

教学

资源

黑板板书、多媒体课件、电脑

教学进程

步骤

教学内容

教师、学生

活动

教学方法

与手段

时间

分配

一、复习提问

1.有序列表有哪些应用？

教师活动：教师提问

学生活动：回答问题

提问法

5分钟

二、任务发布

课堂案例——如何使用超链接链接到百度

教师活动：1.发布任务并引导学生思考实习效果需要用到的工具、方法。

学生活动：

1.通过教师讲解，学生积极完成任务。

讲授法、演示法、

练习法

15分钟

三、讲授新课

1、超链接是通过标签a来实现的，链接的具体地址则是利用a标签的href属性，用法如下所示：

ahref=#链接文本/a

说明：#表示的是空链接

例7-5:以下代码定义一个超链接文本，单击该文本将跳转到百度首页。

a百度一下/a

用来定义超链接的对象，可以是一段文本，或者是一个图片，甚至是页面任何对象。当浏览者单击已经凶链接的文字或图片后，被链接的文档显示在浏览器上，并且根据目标类型来打开或运行。

例7-6:启动VisualStudioCode编辑器输入以下的代码，为图像绑定一个超链接，这样当用户单击图像时，会跳转到指定的网址，文件名保存为7-5.htm。

!DOCTYPE?html

html?lang=en

head

????meta?charset=UTF-8

????meta?name=viewport?content=width=device-width,?initial-scale=1.0

????title图片链接/title

/head

body

??a?href=img?src=img/baidu.png/a

/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分钟

课后体会