任务6制作学院新闻块

教案名称任务6制作学院新闻块计划学时8学时学习目标掌握元素的浮动的方法掌握元素的定位的方法掌握新闻块的制作方法素质目标培养沟通表达能力、养成团队协作意识引导学生做好人生定位，实现人生价值教学重点元素的浮动与定位教学难点元素定位的实际应用教学模式任务驱动教学法线上+线下混合教学教学活动及主要环节素养提升第1、2学时(元素的浮动)课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）为什么要设置元素的浮动属性？怎样清除浮动？=2\*ROMANII.重难点内容讲授：一、元素的浮动（5分钟）选择器{float:left|right|none;}实例演示：例6-1（15分钟）

图6-2没有设置浮动时的效果图6-3设置浮动时的效果学生同步练习，教师巡视、答疑三、练习（15分钟）在网页中创建两个块，在块的下面放一段文字，设置两个块浮动后，查看段落文字的显示方式。四、清除元素的浮动（30分钟）第一种方法：语法格式：选择器{clear:left|right|both;}举例说明第二种方法：overflow属性例6-3样式设置：学生同步练习，教师巡视、答疑五、讨论：大盒子为什么不直接设置高度呢？（10分钟）=3\*ROMANIII.小结：（5分钟）重点掌握元素浮动属性float与清除浮动属性clear和overflow，注意它们的应用场合。课后作业：超星学习通平台作业第3、4学时(元素的定位)课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）各种定位方式有何区别？你认为网页中的元素最好用哪种定位？小组为单位讨论，小组代表发表本组观点。=2\*ROMANII.重难点内容讲授：一、元素的定位（75分钟）（1）定位方式格式：选择器{position:static|relative|absolute|fixed;}确定元素位置①left：定义元素相对于其父元素左边线的距离。②right：定义元素相对于其父元素右边线的距离。③top：定义元素相对于其父元素上边线的距离。④bottom：定义元素相对于其父元素下边线的距离。（2）定位类型1.静态定位例6-4三个子元素都设置为静态定位。样式设置：注意：静态定位，即按标准流的方式定位2.相对定位例6-5对元素two设置相对定位。代码略。注意：相对定位的元素在文档流中原来的位置仍然保留。3.绝对定位例6-6对元素two设置绝对定位。注意：绝对定位的元素从标准流中脱离，不再占用标准文档流中的空间。5.固定定位<imgstyle="position:fixed;right:0;top:200px;z-index:999;width:100px;"src="images/ewm.png"/>将二维码图片固定定位在浏览器窗口中的右侧，位置不变。注意：固定定位总是以浏览器窗口进行定位。=3\*ROMANIII.课堂小结：（5分钟）掌握元素定位属性position的使用，区分四种定位方式的区别，分清什么时候该用哪种定位方式。课后作业：超星学习通平台作业第5、6学时(块元素间的外边距、制作学院网站中的一行)课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）块元素间的垂直外边距和水平外边距分别如何计算？小组为单位讨论，小组代表发表本组观点。=2\*ROMANII.重难点内容讲授：一、块元素间的垂直外边距和水平外边距（10分钟）简要总结二、例6-9制作学院网站中的一行（60分钟）教学做一体结构搭建：样式设置：学生同步练习，教师巡视、答疑注意：三个子块的类选择器名称为.rowL和.rowM，第二个子块和第三个子块的类选择器名称都是.rowM，这是因为这二个子块的样式是完全一样的，所以应用相同的类样式。思考题：该行中三个块能否用无序列表搭建结构？=3\*ROMANIII.课堂小结：（10分钟）掌握块元素间的水平外边距及垂直外边距的计算方式及能灵活应用。课后作业：超星学习通平台作业第7、8学时(制作学院新闻块)课前发布任务：观看学习通平台微课视频——简单新闻块的制作并在电脑上实现。做课前测试题。=1\*ROMANI.提问：（10分钟）简单新闻块制作时遇到了哪些问题？如何解决的？=2\*ROMANII.重难点内容讲授：（70分钟）【任务实现】制作学院新闻块1.结构分析搭建结构代码略。样式设置代码略。注意：在上述样式代码中，标题行中“更多”使用了绝对定位，使其显示到标题行的最右端；标题行下面的两个子块设置了左浮动，使其水平排列。另外，特别注意的是，块的实际宽度为margin、padding、border和width的总和，因此在设置无序列表和列表项的宽度时要精确计算，不要超出其容器的宽度。=3\*ROMANIII.课堂小结：（10分钟）本次课介绍了制作学院新闻块的方法及实施步骤，同学们在编写代码过程中要认真细心、小的差错可能就达不到理想的效果。课后作业：超星学习通平台作业课后实训6分组讨论使学生增强沟通表达能力，发挥团队合作精神。元素的定位是指网页中元素的定位方式。生活中，我们