第13次课 CSS浮动（教案）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 CSS浮动 课次 13 教学 目标 知识目标 1. 掌握内联元素与块状元素之间的转化； 2. 掌握如何利用float属性进行网页布局。 能力目标 1. 能够利用CSS实现内联元素与块状元素之间的转化； 2. 能够利用float属性进行网页元素的排版与布局。 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生数据分析与总结的意识； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经CSS的语法与盒子结构有一些基本的了解。 学生特点 1.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2．前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练。 3．解决复杂问题能力弱，缺乏知识迁移能力。 教学 重点 float属性与clear属性的理论与运用。 教学 难点 CSS浮动与清除属性的灵活使用。 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 知识回顾（10min） 1、图中代码的预览效果是怎样的呢？写出来拍照回复。 2、现在定义一个css样式，使得预览效果如下图，请问这个css样式如何定义？写出来拍照回复。 3、若预览效果如图，上题中定义的css中还需要增加什么属性的设置呢？ 4、若是在上述的css中增加一条声明border:1px dashed black;，则预览效果会有什么变化？写出来拍照回复。 1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。 1.学生积极参与课堂活动。 任务导入（2min） 小明很好地掌握了盒子模型的概念，以及盒子之间的关系后，他发现了一个重要的问题，如果仅仅按照默认的方式进行排版，网页所呈现出来的效果就没有多样化。那么，怎么样才能把网页元素放在想要放的任意位置呢？ 1.【任务导入】教师通过案例导入本次课的学习目标。 1.学生了解本次课学习的目标。 任务描述（3min） 本任务是利用图片和文字素材，制作一个介绍红色旅游景点橘子洲的网页，网页效果如下图所示。 图1橘子洲景区网页效果 1.【任务描述】讲师引入与描述任务内容与效果。 1.学生了解本次课要完成的任务。 知识准备 （30min） （一）display属性 微课学习：学生自主观看微课视频，掌握“display属性”知识内容。 （二）浮动属性（重点） （1）什么是float属性 （2）float的语法 #img{ float: right; } float属性有四个可用的值：left表示浮动元素到左边，right表示浮动元素到右边，none为默认值，表示元素不浮动， inherit表示将会从父级元素获取float值。 （3）float的应用 （三）清除浮动属性clear （1）什么是clear属性 （2）clear的语法 #content{clear:both;} （3）clear的应用 课堂讨论：如何定义css样式，可以实现#box1与#box2两个盒子并排在一行呢？ 1.【知识讲授】教师讲解display属性、浮动属性、清除浮动属性等知识点。 2.组织观看微课视频。 3.组织发布【课堂讨论】。 1.听取教师讲解知识点； 2.积极参与课堂活动。 技能训练（30min） 组织同学们完成 “2.3.1知识准备之CSS浮动”中的技能训练任务点，并按要求在指定位置提交作业。 1.【实操演示】教师技能训练任务，并进行实操演示。 2.【发布任务】教师在学习通发布技能任务。 3.【实践指导】来回巡视，及时帮助学生解决问题。 1.学生查看技能训练任务。 2.完成技能训练题。 知识检测 （10min） 1、图中网页的预览效果是怎么样呢？画在纸上拍照回复。 2、要是第一题中的3个盒子并排摆放，如何操作？ 3、如图的footer如何放到content下方呢？ 4、请问图中代码的预览效果是怎样的？写在纸上拍照回复。 5、请问图中代码的预览效果是怎样的？写在纸上拍照回复。 1.【发布任务】教师在学习通发布活动。 2.【归纳总结】来回巡视，及时帮助学生解决问题。 完成知识检测。 课堂小结（5min） 本次课主要学习了如何利用display属性进行内联元素和块状元素之间的转化，如何利用 CSS的浮动属性float进行网页布局，为后期网页制作打下了基础。 作业布置 1.继续完成技能训练任务，并提交至学习通 2.预学下一次课的内容 教学反思 学科网（北京）股份有限公司 $$