任务6制作学院新闻块电子教案 Web前端开发案例教程（HTML5+CSS3）中职 高三 工信版

教案名称 任务6 制作学院新闻块 计划学时 8学时 学习目标 掌握元素的浮动的方法 掌握元素的定位的方法 掌握新闻块的制作方法 素质目标 培养沟通表达能力、养成团队协作意识 引导学生做好人生定位，实现人生价值 教学重点 元素的浮动与定位 教学难点 元素定位的实际应用 教学模式 任务驱动教学法 线上+线下混合教学 教学活动及主要环节 思政元素 切入点 第1、2学时 (元素的浮动) 课前发布任务： 观看学习通平台相关学习视频。 做课前测试题。 I.学生讨论：（10分钟） 为什么要设置元素的浮动属性？怎样清除浮动？ II.重难点内容讲授： 一、元素的浮动（5分钟） 选择器{float:left|right|none;} 2、 实例演示：例6-1（15分钟）   图6-2 没有设置浮动时的效果 图6-3 设置浮动时的效果 学生同步练习，教师巡视、答疑 三、练习（15分钟） 在网页中创建两个块，在块的下面放一段文字，设置两个块浮动后，查看段落文字的显示方式。 四、清除元素的浮动（30分钟） 第一种方法：语法格式：选择器{clear:left|right|both;} 举例说明 第二种方法：overflow属性 例6-3 1、 样式设置： 学生同步练习，教师巡视、答疑 五、讨论：大盒子为什么不直接设置高度呢？（10分钟） III.小结：（5分钟） 重点掌握元素浮动属性float与清除浮动属性clear 和overflow，注意它们的应用场合。 课后作业： 超星学习通平台作业 第3、4学时 (元素的定位) 课前发布任务： 观看学习通平台相关学习视频。 做课前测试题。 I.学生讨论：（10分钟） 各种定位方式有何区别？你认为网页中的元素最好用哪种定位？ 小组为单位讨论，小组代表发表本组观点。 II.重难点内容讲授： 一、元素的定位（75分钟） （1）定位方式 格式：选择器{position:static|relative|absolute|fixed;} 确定元素位置 ① left：定义元素相对于其父元素左边线的距离。 ② right：定义元素相对于其父元素右边线的距离。 ③ top：定义元素相对于其父元素上边线的距离。 ④ bottom：定义元素相对于其父元素下边线的距离。 （2）定位类型 1.静态定位 例6-4 三个子元素都设置为静态定位。 样式设置： 注意：静态定位，即按标准流的方式定位 2.相对定位 例6-5 对元素two设置相对定位。 样式设置： 注意：相对定位的元素在文档流中原来的位置仍然保留。 3.绝对定位 例6-6 对元素two设置绝对定位。 结构搭建： 样式设置： 注意： 绝对定位的元素从标准流中脱离，不再占用标准文档流中的空间。 5.固定定位 <img style="position:fixed;right:0;top:200px; z-index:999;width:100px;" src="images/ewm. png" /> 将二维码图片固定定位在浏览器窗口中的右侧，位置不变。 注意：固定定位总是以浏览器窗口进行定位。 III.课堂小结：（5分钟） 掌握元素定位属性position的使用，区分四种定位方式的区别，分清什么时候该用哪种定位方式。 课后作业： 超星学习通平台作业 第5、6学时 (块元素间的外边距、制作学院网站中的一行) 课前发布任务： 观看学习通平台相关学习视频。 做课前测试题。 I.学生讨论：（10分钟） 块元素间的垂直外边距和水平外边距分别如何计算？ 小组为单位讨论，小组代表发表本组观点。 II.重难点内容讲授： 一、块元素间的垂直外边距和水平外边距（10分钟） 简要总结 二、例6-9 制作学院网站中的一行（60分钟） 结构搭建： 样式设置： 学生练习，教师巡视、答疑 注意：三个子块的类选择器名称为.rowL和.rowM，第二个子块和第三个子块的类选择器名称都是.rowM，这是因为这二个子块的样式是完全一样的，所以应用相同的类样式。 思考题：该行中三个块能否用无序列表搭建结构？ III.课堂小结：（10分钟） 掌握块元素间的水平外边距及垂直外边距的计算方式及能灵活应用。 课后作业： 超星学习通平台作业 第7、8学时 (制作学院新闻块) 课前发布任务： 观看学习通平台微课视频——简单新闻块的制作并在电脑上实现。 做课前测试题。 I.提问：（10分钟） 简单新闻块制作时遇到了哪些问题？如何解决的？ II.重难点内容讲授：（70分钟） 1、 【任务实现】制作学院新闻块 1. 结构分析 2．搭建结构 <div class="imne