Bootstrap基础教程（第3版）（微课版）-教案 第3周第2次-CSS排版

《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS布局单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标Bootstrap在页面排版中的格式设置能够根据页面需求，选择设置合适的排版内容进行页面排版。学习中国传统节日和传统文化，能在页面设计过程中融入传统文化教学重难点教学重点排版格式的识记和应用教学难点根据内容正确调用相应格式进行设置教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前预习本次课恰逢24节气中的秋分时节，课前查阅“秋分”节气的相关知识。发布预习要求找合适的案例和素材以便于自己网页的布局1、引导学生培养自主学习，主动学习的良好学习习惯2、引导学生关注中国传统节日，将知识和生活结合起来课中导学导入环节：复习旧知，引入新知1概括旧知识在前面的课程中，对bootstrap的栅格有了比较全面的认识。在案例的实践过程中，我们都是自己调整和设计格式。2引出新知识在bootstrap的框架中，也提供了非常多的排版格式和组件供使用，从本次课开始，我们进入CSS格式和组件的学习。介绍课前查阅的节气知识本次课恰逢秋分时节，秋分曾是传统的“祭月节”，中秋节由“秋夕祭月”演变而来。2018年6月21日，中华人民共和国国务院关于同意设立“中国农民丰收节”的批复发布，同意自2018年起，将每年秋分设立为“中国农民丰收节”。知识引入：通过秋分节气的诗词引入文字内容古时的文人墨客写了很多诗词来表达情感，比如：晚晴【唐】杜甫返照斜初彻，浮云薄未归。江虹明远饮，峡雨落馀飞。凫雁终高去，熊罴觉自肥。秋分客尚在，竹露夕微微

这些诗词都可以在页面中展示出来，我们选取其中的一首诗词作为页面内容，进行排版的格式设置。查阅相关的诗词内容临近寒露、霜降，马上也是重阳节，学生查阅相关的节气知识结合中国传统文化进行页面内容的设计，弘扬中国文化。讲授新课：文字排版排版主要是使用CSS对HTML元素进行样式设置及布局定位，排版在前端开发中的重要性不言而喻。Bootstrap提供了一套CSS样式，可以方便快速地帮助我们渲染修饰HTML元素，让页面排版变得更简单。排版中涉及的格式：标题：h1—h6;副标题small段落格式内联文本文本颜色文本排列字体样式等等选取两到三首古诗，调用bootstrap格式本次课结合秋分节气的相关内容，在页面中进行排版格式的设置，做到页面内容的排版和美化效果。学生实践在教室中查看学生完成情况，解答学生遇到的问题完成相应知识和诗词内容的排版设计在设置格式过程中，需要不断试错才能达到最终期望的效果。在这个过程中，培养学生踏实严谨的工作态度和细心耐心的工作品质。课后拓展进一步完成好案例，在格式上注意细节设置。发布预习任务查阅资料，预习新知复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改讲授Bo