第16次课 CSS网页背景与图像设置（教学设计）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 CSS网页背景和图像设置 课次 16 教学 目标 知识目标 1. 掌握CSS设置网页背景的方法； 2. 掌握CSS设置图像的方法 能力目标 能够掌握CSS美化元素的方法。 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生的审美能力； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经CSS的盒子结构与浮动规则和定位规则有了一定的了解。 学生特点 1.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2．解决较复杂问题能力比较弱，知识迁移能力有待加强。 教学 重点 掌握CSS设置网页背景的方法。 教学 难点 CSS背景代码的优化与缩写。 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 任务导入（2min） 小明所在的青山文学社是学院第一社团，文学社想要对网站进行改版。小明主动承担了网站的设计与制作任务，他搜集到了大量社团相关的图片与文字素材，接下来，要怎么样才能实现整个页面的规划与布局呢？ 1.【任务导入】教师通过案例导入本次课的学习目标。 1.学生了解本次课学习的目标。 任务描述（3min） 本任务是利用社团素材与图片，制作一个以“青山文学社”为主题的页面，网页效果如图3-1-1所示。 图3-1-1 “青山文学社”网页效果 1.【任务描述】讲师引入与描述任务内容与效果。 1.学生了解本次课要完成的任务。 知识准备 （30min） （一）CSS设置背景 背景（background）是网页中一个重要的的部分。CSS 中有5个主要的背景属性，它们是： · background-color: 指定填充背景的颜色。 · background-image: 引用图片作为背景。 · background-position: 指定元素背景图片的位置。 · background-repeat: 决定是否重复背景图片。 · background-attachment: 决定背景图是否随页面滚动。 这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。它在 Firefox，Safari ，Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。 课堂讨论：现有一张名为cup.jpg的图片，红黄蓝三个盒子分别利用这个图片来制作背景，效果如下图，请问红黄蓝三个盒子的背景样式怎么设置？写出相应的代码进行回复。 （二）CSS设置图像 （1）图像的边框 （2）图像的缩放 （3）图文混排 1.【知识讲授】教师讲解CSS设置背景、CSS设置图像等知识点。 2.组织观看微课视频。 3.组织发布【课堂讨论】。 4.组织发布【随堂测试】。 1.听取教师讲解知识点； 2.积极参与课堂活动。 技能训练（40min） 技能训练：组织同学们完成作业“3.3.1一封信作业”，并按要求提交作业。（可参考“一封信网页效果操作题讲解视频”） 1.【实操演示】教师技能训练任务，并进行实操演示。 2.【发布任务】教师在学习通发布技能任务。 3.【实践指导】来回巡视，及时帮助学生解决问题。 1.学生查看技能训练任务。 2.完成技能训练题。 知识检测 （10min） 1、若设置背景图片时，把图片在水平方向平铺以铺满整个元素，正确的是（） A、 repeat B、repeat-X C、repeat-Y 2、一个元素的背景是否可以同时设置背景颜色和背景图片？ 3、CSS背景中background-position 属性表示什么意思? 4、background-position: right bottom;表示什么意思？ 5、下列代码如何简写： background-image: url(tp.jpg); background-position:center top; background-repeat:no-repeat; 1.【发布任务】教师在学习通发布活动。 2.【归纳总结】来回巡视，及时帮助学生解决问题。 完成知识检测。 课堂小结（5min） 通过对本次课的学习，让学生掌握了如何利用css设置元素背景，以及图像常用的css样式的设置，为网页美化打下基础。 作业布置 1.继续完成技能训练任务，并提交至学习通 2.预学下一次课的内容 3. 课后讨论：在刚才的学习与实践中，你学会了什么？你的难点在哪里？ 教学反思 学科网（北京）股份有限公司 $$