第11次课 CSS盒子模型（教案）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 CSS盒子模型 课次 11 教学 目标 知识目标 1. 掌握盒子的内部结构； 2. 掌握盒子之间的关系； 3. 掌握CSS代码的简写与优化。 能力目标 1. 能够利用CSS进行网页元素盒子结构的分析； 2. 能够利用CSS进行网页元素的排版与定位。 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生数据分析与总结的意识； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经对HTML标记语言与CSS的语法结构有一些基本的了解。 学生特点 1.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2．前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练。 3．解决复杂问题能力弱，缺乏知识迁移能力。 教学 重点 CSS盒子模型的理论与运用。 教学 难点 深刻理解CSS盒子模型的意义与计算方法。 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 知识回顾（10min） 1、先选人再抢答：清除html标签默认的的外边距，内边距，边框和列表项目符号。写出来拍照回复。 2、先选人再抢答：请看下图代码，①的样式选择符属于哪种类型？其代码的作用是什么呢？ 3、先选人再抢答：代码的效果是什么？写出来拍照回复。 4、先选人再抢答：请绘制出下面代码的网页布局规划图，并在图中标明#box1、#box2、#box3、#box4，写出来拍照回复。 5、先选人再抢答：为什么会出现下图所示不居中对齐效果？CSS样式该如何设置？ 1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。 1.学生积极参与课堂活动。 任务导入（2min） 中国有哪些红色旅游经典景区？著名的全国红色旅游经典景区有井冈山、延安革命纪念馆、西柏坡、韶山毛泽东纪念馆、天安门广场、中国人民抗日战争纪念馆等等。小明根据国内红色旅游资源整理了中国十二大重点红色旅游景区，包括沪浙红色旅游区、湘赣闽红色旅游区、黔北黔西红色旅游区、雪山草地红色旅游区、陕甘宁红色旅游区、大别山红色旅游区、太行山红色旅游区、川陕渝红色旅游区、京津冀红色旅游区等全国重点红色旅游景区。他想尝试自己来做一个红色旅游景区介绍的页面，他该如何去做呢？ 1.【任务导入】教师通过案例导入本次课的学习目标。 1.学生了解本次课学习的目标。 任务描述（3min） 本任务是以湘赣闽红色旅游区为例，分别按照“江西省”、“湖南省”以及“福建省”进行分类与排列，制作出如所示的网页效果。 图1 赣闽红色旅游网页效果 1.【任务描述】讲师引入与描述任务内容与效果。 1.学生了解本次课要完成的任务。 知识准备 （35min） （一）盒子的内部结构 课堂讨论1：一个盒子的 margin 为 15px，border 为 1px，padding 为 5px，content 的宽为 200px、高为 50px，那么这个盒子在网页中的实际宽和高分别为多少？ （二）盒子之间的关系 （1） 内联元素之间的水平关系 （2） 块级元素之间的垂直关系 课堂讨论2：请看下图的代码，box1盒子里图像元素于文字之间的垂直距离是多少？“文字1”与“文字2”之间的水平距离是多少？ （3） CSS代码的简写与优化 （1） 内边距padding与外边距 margin 每个盒子都有上下左右四个方向，每个方向都有个内边距（padding）与外边距 （margin），这里以margin举例说明，padding与margin相同。 （2） 边框border 边框的属性由边框宽度（border-width）、边框样式（border-style）和边框颜色（border-color）三组属性构成。 （3） 背景background 背景的属性有背景颜色（background-color）、背景图像（background-image）、背景重复（background-repeat）、背景固定（background-attachment）与背景图片位置（background-position）等五组属性。 （4） 字体font 字体属性定义文本的字体系列（font-family）、大小（font-size）、加粗（font-weight）、风格（font-style）、变形（font-variant）和行高（line-height）等。 （5） 列表list 列表在网页设置中经常用到，CSS中设置列表的属性为list-style属性。 （6） 颜色color CSS中对十六制形式的每两位值相同的色彩值，可以缩写一半进行简写，如#332277可以简写为#327，#0000ff可以简写为#00f。 注意：对于#120088这种颜色值是不能进行简写的。 （7） 属性值为0  如果CSS属性值为0，那么可以省略单位，如:px/em。 （8） 最后一个分号 在写CSS规则时，最后一个属性值后面分号可以不写。 课堂讨论3：以下代码的效果是什么？ 课堂讨论4：如果将上面代码进行优化，请将优化后的最简代码写出来拍照回复。 1.【知识讲授】教师讲解盒子的内部结构、盒子之间的关系、CSS代码的简写与优化等知识点。 2.组织发布【课堂讨论1】。 3.组织发布【课堂讨论2】。 4.组织发布【课堂讨论3】。 5.组织发布【课堂讨论4】。 1.听取教师讲解知识点； 2.积极参与课堂活动。 技能训练（25min） 组织同学们完成技能训练题“2.2.1 CSS盒子模型之知识准备 操作题”，可观看“任务1 技能训练 2.2.1 CSS盒子模型知识准备 操作题讲解视频”，并按要求在指定位置提交作业。 1.【实操演示】教师技能训练任务，并进行实操演示。 2.【发布任务】教师在学习通发布技能任务。 3.【实践指导】来回巡视，及时帮助学生解决问题。 1.学生查看技能训练任务。 2.完成技能训练题。 思考检测（10min） 组织同学们完成“CSS盒子模型知识测验”随堂测试任务点。 1.【发布任务】教师在学习通发布活动。 2.【归纳总结】来回巡视，及时帮助学生解决问题。 完成知识检测。 课堂小结（5min） 通过对本次课的学习，让学习者了解了CSS盒子模型的结构与计算方法。 作业布置 1.继续完成技能训练任务，并提交至学习通 2.预学下一次课的内容 教学反思 学科网（北京）股份有限公司 $$