网页设计与制作教程教学设计 项目七（任务1 无序列表）.docVIP

课程单元教学设计

任课教师：科目：

授课班级：

单元

标题

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

任务1无序列表

授课

时间

2021年月日

（第周，周，第节）

授课地点

教学学时

2课时

教学

目标

能力目标：

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

知识目标：

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

教学

资源

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

教学进程

步骤

教学内容

教师、学生

活动

教学方法

与手段

时间

分配

一、复习提问

1.如何美化网页中的图片？

2.设置图片的属性有那些？

教师活动：教师提问

学生活动：回答问题

提问法

5分钟

二、任务发布

课堂案例——如何使用无序列表制作导航

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

学生活动：

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

讲授法、演示法、

练习法

15分钟

三、讲授新课

1.使用无序列表。

用于将一组相关的列表项目排列在一起，列表中的项目没有特别的先后顺序。无序列表使用一组ul/ul标签，标签中包裹有很多组li/li其中每一组均为一条列表。其结构形式如下：

ul

li……/li

li……/li

/ul

多层ul无序列表标签嵌套时，应将ul标签放在li标签内。

ul

li

ulli嵌套列表项目/li/ul

/li

/ul

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title无序列表的使用/title

/head

body

ul

li一级列表项目1

ul

li二级列表项目1/li

li二级列表项目2/li

/ul

/li

li一级列表项目2/li

/ul

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

课后体会