网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例9美丽风光网页

教案9案例9美丽风光网页计划学时2学时知识目标掌握块元素和行内元素各自的特点；掌握<span>标记的应用；掌握块元素间垂直和水平外边距的计算方式；掌握float属性的使用。能力目标能够理解并列举常见的块元素和行内元素；能够利用<span>标记设置一行内容中某部分内容的单独样式；能够熟练计算网页中块元素间的外边距；能够利用浮动属性实现网页中块元素水平排列。素质目标通过美丽风光网页感受祖国河山增强学生民族自豪感；在编辑代码中培养认真细致、精益求精的工匠精神。教学重点元素的类型；块元素的外边距；元素的浮动。教学难点利用浮动属性布局网页元素。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（案例分析与实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建美丽风光网页，将所有内容放入一个大盒子中，将图片放入小盒子，用CSS定义样式，浏览效果如图9-1所示。图9-1美丽风光网页二、案例分析与实现1.案例分析图9-1所示的所有网页内容是放在一个盒子中的，用<div>标记定义一个盒子，在盒子中添加<h2>标记定义标题，标题中含有的英文内容需要添加<span>标记，每张图片再使用<div>标记定义。2.案例实现学生同步操作，做学教一体略。第2学时（相关知识点）一、元素的类型学生已观看微课，略讲1.块元素<h1>～<h6><ul><ol><li><div><header><nav><article><aside><section><footer>2.行内元素<strong><b><em><i><a><span>分析两种元素类型的不同特点及应用范畴。3.<span>标记讲解<span>标记在HTML中的应用，与<div>标记的区别。操作演示案例9实现中标题行中英文部分的样式设置。二、块元素间的外边距1.块元素间的垂直外边距例9-1example01.html学生同步操作，做学教一体两元素的垂直间距是30px两元素的垂直间距是30px2.块元素间的水平外边距例9-2example02.html学生同步操作，做学教一体两元素的水平间距是40px两元素的水平间距是40px三、元素的浮动1.浮动属性语法格式：选择器{float:left|right|none;}left：right：none:例9-3example03.html学生同步操作，做学教一体浮动元素不再占用原文档流的位置，那它会对页面中其他元素的排版产生影响。例9-4example04.html学生同步操作，做学教一体2.清除浮动语法格式：选择器{clear:left|right|both;}操作演示继续在例9-4中添加样式代码。注意：清除子元素浮动对父元素影响，使用overflow属性清除浮动。例9-5example05.html学生同步操作，做学教一体四=2\*ROMAN、小结重点掌握块元素与行内元素的特点及应用、块元素的外边距、元素的浮动属性与清除浮动。作业1：课本课后习题与实训作业2：扫码观看案例10中的微课，学习元素的几种定位方式及具体定位方法。课前小组讨论培养学生团队合作，共同探讨的协作意识。提升民族自