第4章 设计网页页面-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第4章 设计网页页面 计划学时 6学时 内容分析 本章介绍了盒模型结构，padding、border和margin属性的应用，怪异盒模型的特征，cursor属性的应用，CSS浮动的float属性，清除浮动的4种方式，相对定位、绝对定位和固定定位的应用，z-index属性的应用，以及display属性、visibility属性、overflow属性、opacity属性和rgba()函数的应用 教学目标 与 教学要求 【知识目标】 1. 了解盒模型结构 2. 认识怪异盒模型 3. 掌握cursor属性和z-index属性的应用 4. 掌握CSS浮动的float属性 【技能目标】 1. 掌握padding、border和margin属性的应用 2. 掌握清除浮动的4种方式 3. 熟练运用相对定位、绝对定位和固定定位 4. 掌握display属性、visibility属性、overflow属性的应用 5. 熟练运用opacity属性和rgba()函数控制元素的不透明度 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 掌握padding、border和margin属性的应用，掌握清除浮动的4种方式，掌握相对定位、绝对定位和固定定位的应用，熟练使用display属性和overflow属性 教学难点 实现本章节的3个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （盒模型结构，padding、border和margin属性，怪异盒模型） 一、提出需求，导入学习任务 （1）思考如何使用CSS样式提升对网页的设计。 · 一个完整美观的静态网页，主要是由HTML标签与具有美化功能的CSS构成，HTML标签创建网页的基本布局，而CSS相当于为网页“换上美丽大方的衣服”。CSS可以提高网页的美观度和速度，能更好地控制页面布局。 （2）明确学习方向。 · 了解盒模型结构 · 认识怪异盒模型 · 掌握padding、border和margin属性的应用 · 掌握cursor属性的应用 二、知识讲解 （一）盒模型结构 1.概述 盒模型（Box Model）主要用于CSS设计页面布局，它规定网页元素如何显示以及元素间的相互关系。 盒模型结构主要由content、padding、border和margin4个部分构成。 2.content属性 盒模型的content内容指块元素（“盒子”）里面的包含的文字、图片、超链接、音频、视频等，由CSS的宽和高两个属性决定。 3.padding属性 （1）定义 padding属性也称为填充属性，控制元素所有四条边的内边距区域，一个元素的内边距区域指的是其内容与其边框之间的空间。 （2） 相关属性 padding属性是其相关属性padding-top、padding-bottom、padding-left和padding-right的简写。 · padding-top属性 · padding-bottom属性 · padding-left属性 · padding-right属性 （3） 语法格式 padding属性的值可以通过复合写法有多种设置方式，其基本语法格式如下所示。 padding:上内边距 右内边距 下内边距 左内边距 padding:上内边距 左右内边距 下内边距 padding:上下内边距 左右内边距 padding:上下左右内边距 （4）padding属性的注意事项 · padding属性不会出现撑开父元素“盒子”的情况 · padding属性的值只对内容产生效果，而不会对背景图有任何效果 4.border属性 （1）定义 border属性可定义一个元素的边框宽度、样式和颜色。 （2） 相关属性 border属性是其3个相关属性border-width、border-style和border-color的简写。 · border-width · border-style · border-color （3） 语法格式 3个边框属性可连写，连写顺序为边框宽度（border-width）、边框线样式（border-style）和边框颜色（border-color），在进行边框样式的设置时，使用连写格式可使开发者编写代码更快捷，代码可读性也更好，其语法格式的具体代码如下所示。 border: 1px solid #aaa; 5.margin属性 （1）定义 margin属性定义元素周围的空间，即元素与元素之间的距离。 （2） 相关属性 margin属性是其相关属性margin-top、margin-bottom、margin-left和margi