网页基础与制作 2

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第7章运用浮动和定位布局网页计划课时7课时教学引入在网页设计中，如果按照从上到下的默认方式进行排版，网页版面看起来会显得单调、混乱。这时就可以运用div+css对页面进行布局，将各部分模块有序排列，使网页的排版变得丰富、美观。什么是div+css布局？该如何运用div+css布局？本章将对div+css布局的相关知识进行具体讲解。教学目标使学生了解什么是布局，能够说出布局的目的与要点使学生熟悉布局的属性，能够说出布局的常用属性使学生熟悉布局类型，能够说出布局的常用类型使学生掌握标签的浮动属性，能够为标签设置和清除浮动使学生掌握标签的定位属性，能够理解不同类型定位之间的差别使学生掌握div+css的布局技巧，能够运用div+css为网页布局教学重点标签的浮动属性-认识浮动标签的浮动属性-清除浮动标签的定位属性overflow属性z-index标签层叠教学难点标签的浮动属性-清除浮动标签的定位属性教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（布局概述、标签的浮动属性-认识浮动）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过情景引入的方式导入新课大家在阅读报纸时会发现，虽然报纸中的内容很多，但是经过合理的排版，版面依然清晰、易读。同样，在制作网页时，也需要对网页进行“排版”。本节课将对网页布局进行讲解。三、新课讲解知识点1-布局概述教师通过PPT的方式讲解布局概述。确定页面的版心宽度分析页面中的模块控制网页的各个模块知识点2-标签的浮动属性-认识浮动教师通过PPT结合实际操作的方式讲解标签的浮动属性-认识浮动。浮动的概念定义浮动的基本语法格式float的常用属性值通过案例学习float属性的用法四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（标签的浮动属性-清除浮动）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课由于浮动标签不再占用原文档流的位置，因此它会对页面中其他标签的排版产生影响。如果要避免浮动对段落文本的影响，就需要清除浮动。本节课将对清除浮动进行讲解。三、新课讲解知识点-标签的浮动属性-清除浮动教师通过PPT结合实际操作的方式讲解标签的浮动属性-清除浮动。clear属性的作用清除浮动的基本语法格式clear的常用属性值使用空标签清除浮动使用overflow属性清除浮动使用after伪对象清除浮动四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（标签的定位属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课浮动布局虽然灵活，但是无法对标签的位置进行精确控制。在CSS中，通过定位属性（position）可以实现网页标签的精确定位。本节课将对标签的定位属性以及常用的几种定位方式进行详细讲解。三、新课讲解知识点-标签的定位属性教师通过PPT结合实际操作的方式讲解标签的定位属性。认识定位属性定位模式边偏移定位类型静态定位相对定位绝对定位四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（overflow属性、z-index标签层叠）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课overflow属性和z-index属性没有浮动和定位这两种属性应用得频繁，但是在制作一些特殊需求的页面时会用到。接下来，本节课将重点介绍这两个属性。三、新课讲解知识点1-overflow属性教师通过PPT结合实际操作的方式讲解overflow属性。overflow属性的作用overflow属性的语法格式overflow的常用属性值知识点2-z-index标签层叠教师通过PPT结合实际操作的方式讲解z-index标签层叠。z-index属性的作用调整堆叠顺序四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五课时（单列布局、两列布局、三列布局）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在使用div+css布局时，网页的布局类型通常分为单列布局、双列布局、三列布局三种类型。本节课将对这三种布局进行详细讲解。三、新课讲解知识点1-单列布局教师通过PPT结合实际操作的方式讲解单列布局。单列布局结构展示演示单列布局结构的实现知识点2-两列布局教师通过PPT结合实际操作的方式讲解两列布局。两列布局结构展示演示两列布局结构的实现知识点3-三列布局教师通过PPT结合实际操作的方式讲解三列布局。三列布局结构展示演示三列布局结构的实现四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第六课时（网页模块命名规范、阶段案例：制作通栏banner）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课网页模块的命名，看似无足轻重，但如果没有统一的命名规范进行必要约束，随意命名就会使整个网站的后续工作很难进行。本节课将对网页模块命名规范进行讲解。三、新课讲解知识点1-网页模块命名规范教师通过PPT的方式讲解网页模块命名规范。网页模块的命名需要遵循的原则网页模块常用的命名方式常用命名规则知识点2-阶段案例：制作通栏banner教师通过PPT结合实际操作的方式讲解阶段案例：制作通栏banner。案例分析案例实现四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作