Bootstrap基础教程（第3版）（微课版）-教案 第4周第1次-CSS布局

《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS布局单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标不同列表的格式设置页面中设计代码显示效果使用bootstrap提供的格式进行美化表格调用bootstrap中的按钮格式设计按钮能够根据页面需求，选择设置合适的排版内容进行页面排版。能够在页面中选择合适的格式设置版面内容通过在页面中展示新闻列表，引导学生关注新闻，了解时事教学重难点教学重点列表、表格格式的识记和应用教学难点根据内容正确调用相应格式进行设置教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前预习关注新闻简讯内容，选取合适的时事内容作为页面设计内容。发布预习要求查找新闻资料（选择适合列表排版的新闻）1、引导学生培养自主学习，主动学习的良好学习习惯2、引导学生关注时事，筛选信息课中导学导入环节：复习旧知，引入新知1概括旧知识在前次课中，主要学习了网页中文字格式的设置，通过设置文字标题、段落、字体颜色等进行文字排版格式设置。2引出新知识本次课继续学习CSS格式相关内容。在页面中，经常会用到列表格式，作为软件专业的学生，在页面中写代码也是非常常见的。通过调用bootstrap中提供的格式，让页面的内容更加丰富美观。介绍课前查阅的节气知识引导学生关注时事，筛选信息知识引入：选举类似每日新闻的列表式新闻引入排版要求复习列表的定义和排版样式筛选适用于列表的新闻内容复习大一学习的旧知，结合时事引入新知讲授新课：列表、代码、表格等以任务为导向，通过列表形式，展示当日的新闻简讯，提出任务要求，学习列表调用方法以案例为导向，讲解代码格式效果以任务为导向，通过列表形式，根据表格讲授相应格式设置以案例为驱动，设置不同按钮格式完成图示列表效果设计完成图示代码格式排版练习表格基础格式设置练习按钮基本格式设置关注时事，通过水平列表展示每日新闻资讯。结合案例，讲练结合，掌握常用表格和按钮格式设置学生实践：在教室中查看学生完成情况，解答学生遇到的问题完成相应知识和诗词内容的排版设计完成音乐表格在设置格式过程中，需要不断试错才能达到最终期望的效果。在这个过程中，培养学生踏实严谨的工作态度和细心耐心的工作品质。课后拓展进一步完成好案例，在格式上注意细节设置。发布预习任务查阅资料，预习新知，结合课程内容，自主进行页面设计复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解