第21次课 CSS设置网页菜单（教案）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 CSS设置网页菜单 课次 21 教学 目标 知识目标 · 1. 掌握CSS设置网页链接效果的方法； 2. 掌握CSS设置网页菜单的方法。 · 能力目标 能够掌握CSS美化网页元素的方法。 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生数据分析与总结的意识； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经CSS的盒子结构与图像设置规则有了一定的了解。 学生特点 1. 学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2. 前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练。 3. 解决较复杂问题能力比较弱，知识迁移能力有待加强。 教学 重点 掌握CSS设置菜单的方法。 教学 难点 掌握如何利用项目列表制作网页菜单。 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 知识回顾（10min） 现有导航条如下： 第一题：请将上面的导航条变成如下效果，css样式该如何设置，请写出来回复。 第二题：在第一题的基础上继续书写css样式实现如下效果，请把该效果的css代码写出来回复。 第三题：在第一题的基础上需要再设置哪些css样式才能得到如下效果呢？将代码写出回复。 第四题：在第三题的基础上，若要得到下面的效果，css代码该如何设置，请将代码写出来回复。 1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。 1.学生积极参与课堂活动。 任务导入（2min） 小明的网页设计水平得到了青山文学社读者的认可，新改版的网站浏览量增加了很多，这给了小明很大的信心。小明所在学校旁边有一家名为“湘果贸易有限公司”的水果公司，主要销售各种国内外水果产品。有一天，该公司的市场主管找到了小明，想要小明帮他设计一个网站，以此打开网络销售渠道的大门。 1.【任务导入】教师通过案例导入本次课的学习目标。 1.学生了解本次课学习的目标。 任务描述（3min） 本任务是利用公司提供的素材与图片，制作一个“湘果”主题的网上商城页面，网页效果如图所示。 图1 湘果网页效果 1.【任务描述】讲师引入与描述任务内容与效果。 1.学生了解本次课要完成的任务。 知识准备 （30min） （一）用图片来定义项目列表符号 （二）用项目列表来实现纵向菜单 （三）用项目列表来实现横向菜单 课堂讨论：如果想要让列表横向排列，也是横向导航实现关键，那这个关键是什么呢？ 1.【知识讲授】教师讲解CSS的字体和文本属性、文字截断与首字下沉等知识点。 2.组织观看微课视频。 3.组织发布【课堂讨论】。 4.组织发布【随堂测试】。 1.听取教师讲解知识点； 2.积极参与课堂活动。 技能训练（30min） 技能训练：组织学生完成作业“3.2.2 CSS设置菜单效果之知识准备 操作题”，并按要求提交作业。 1.【实操演示】教师技能训练任务，并进行实操演示。 2.【发布任务】教师在学习通发布技能任务。 3.【实践指导】来回巡视，及时帮助学生解决问题。 1.学生查看技能训练任务。 2.完成技能训练题。 知识检测 （10min） 第一题：向列表添加图像修饰符，效果如下图，实现方法是什么呢？ 现有一个列表菜单如下图所示 ： 第二题：将上面的列表菜单美化成如下效果，css代码该如何设置呢？将代码写出回复。 第三题：在第二题的基础继续美化菜单为如下效果，上述css代码还需要进行哪些设置呢？将代码写出回复。 第四题：在第三题的基础继续美化菜单为如下效果，还需要添加什么css样式呢？将代码写出回复。 第五题：在第四题的基础继续美化菜单为如下效果，还需要添加什么css样式呢？将代码写出回复。 1.【发布任务】教师在学习通发布活动。 2.【归纳总结】来回巡视，及时帮助学生解决问题。 完成知识检测。 课堂小结（5min） 本次课主要学习网页菜单的制作方法，希望能运用到实际制作过程中去，真正做到融会贯通。 作业布置 1.继续完成技能训练任务，并提交至学习通 2.预学下一次课的内容 3. 课后讨论：在刚才的学习与实践中，你学会了什么？你的难点在哪里？ 教学反思 学科网（北京）股份有限公司 $$