博学谷——让IT教学更简单,让IT学习更有效
PAGE 12
PAGE 1
《HTML+CSS+JavaScript网页制作案例教程》
教学设计
课程名称: HTML+CSS+JavaScript网页制作案例教程
授课年级: 2015年级
授课学期: 2015学年第二学期
教师姓名: 某某老师
201 年 月 日
课题名称
第4章 CSS盒子模型
计划课时
8课时
内容分析
盒子模型是CSS网页布局的基础,只有掌握了盒子模型的各种规律和特征,才可以更好地控制网页中各个元素所呈现的效果。本章将对盒子模型的概念、盒子模型相关属性及元素的类型和转换进行详细讲解。
教学目标
掌握CSS盒子模型的概念,能够灵活运用盒子模型布局页面;
掌握盒子模型相关属性,能够使用它们熟练地控制网页元素;
理解块元素与行内元素的区别,能够对它们进行转换;
重点及措施
教学重点:认识盒子模型、盒子模型相关属性、
措施:通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点: CSS盒子模型、CSS背景属性、元素的转换。
措施:通过上机操作加强学习和补充案例进行巩固。
教学方式
教学采用教师课堂讲授为主,使用教学PPT讲解。
教
学
过
程
第一课时
(制作“音乐盒”,讲解认识盒子模型、
复习上节课内容
在讲解本节内容前,抛出以下问题让学生回答,以复习第三章“使用CSS技术美化网页”的相关知识。
通过上一章的学习,我们知道CSS是层叠式样式表的简称,层叠性是其最基本的特征。那么,请举例说明什么是“CSS层叠性”?
答案:
所谓层叠性是指多种CSS样式的叠加。例如,当使用内嵌式CSS样式表定义
标记字号大小为12像素,链入式定义
标记颜色为红色,那么段落文本将显示为12像素红色,即这两种样式产生了叠加。
通过上一章的学习,我们知道CSS中存在着权重和优先级。那么,请分别说明“CSS基础选择器”中各选择器的权重值各是多少?
答案:
CSS为每一种基础选择器都分配了一个权重,其中,标记选择器具有权重1,类选择器具有权重10,id选择器具有权重100。
说明:教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
随着信息化的迅速发展,手机已经成为人们日常生活中的必需品。一个完整的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。其实,在CSS中也存在着盒子模型,利用CSS盒子模型能够更好的对网页进行排版。那么,如何理解“CSS盒子模型”呢?
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
如果把手机想象成HTML元素,那么手机盒子就是一个CSS盒子模型,其中手机为CSS盒子模型的内容,填充泡沫的厚度为CSS盒子模型的内边距,纸盒的厚度为CSS盒子模型的边框。当多个手机盒子放在一起时,它们之间的距离就是CSS盒子模型的外边距。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
案例描述
音乐可以陶冶情操,为我们带来听觉上的享受,随着互联网的普及,在网络上听音乐变得越来越方便。本节将通过盒子模型及其边框属性制作一个音乐盒效果。
知识点讲解
总结知识点
教师和学生一起总结在案例中涉及到的知识点,主要包括“认识盒子模型、
讲解“认识盒子模型”
(1)、教师展示PPT对“CSS盒子模型”的概念进行讲解,并以生活中常见的手机盒子的构成进行演示。
(2)、教师展示PPT,对CSS盒子模型的构成元素进行具体讲解。
(3)、教师使用CSS盒子模型控制网页中的元素,并进行代码演示。
(4)、学生练习,教师巡视,对疑难问题进行解答。
讲解“
(1)、教师展示PPT对“
(2)、教师对“
(3)、教师指出使用“
(4)、学生练习,教师巡视,对疑难问题进行解答。
讲解“边框属性”
(1)、教师展示PPT对“边框属性”的概念及用途进行讲解。
(2)、教师分别对“设置边框样式”、“设置边框宽度”、“设置边框颜色”及“综合设置边框”的属性值及应用效果进行讲解并通过代码进行演示。
(3)、教师指出应用“边框属性”时需要注意的问题,并给与解答。
(4)、学生练习,教师巡视,对疑难问题进行解答。
案例讲解
案例分析