资源简介

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

3.样式设置注意：在上述样式代码中，标题行中“更多”使用了绝对定位，使其显示到标题行的最右端；标题行下面的两个子块设置了左浮动，使其水平排列。另外，特别注意的是，块的实际宽度为margin、padding、border和width的总和，因此在设置无序列表和列表项的宽度时要精确计算，不要超出其容器的宽度。III.课堂小结：（10分钟）本次课介绍了制作学院新闻块的方法及实施步骤，同学们在编写代码过程中要认真细心、小的差错可能就达不到理想的效果。课后作业： 超星学台作业课后实训6 分组讨论使学生增强沟通表达能力，发挥团队合作精神。元素的定位是指网页中元素的定位方式。生活中，我们每个人也要找准自己的定位，做一个对社会有用的人。对于难度稍高的任务，学生在实训过程中一定会碰到这样那样的困难，鼓励引导学生不要气馁，面对困难更要迎难而上，个人的成长、人类的进步和社会的发展的过程中都会有挫折，却阻挡不了历史和技术发展的脚步。

展开更多......

收起↑