项目4“青春树儿童摄影网”首页制作

传智播客

《网页制作项目教程（HTML+CSS+JavaScript）》

教学设计

课程名称：网页制作项目教程（HTML+CSS+JavaScript）

授课年级：2016年级

授课学期：2016学年第二学期

教师姓名：某某老师

1

2

201 年 月 日

课题名称 项目4“青春树儿童摄影网”首页制作 计划

课时 12课时

内容分析 童年是人生岁月中最纯真的年代，也是被家人呵护，受尽百般宠爱的黄金时期。为此，每位家长都希望给孩子的童年多留下些美好回忆，除了录制视频以外，儿童摄影也是很不错的选择。为了使更多的家长了解到儿童摄影，“青春树儿童摄影”的CEO 李总致电HC 公司项目负责人王经理，计划定制一个主题网站，用于宣传“青春树儿童摄影”。

通过前面两个专题页的制作，小黄已经有了一定的HTML 与CSS 基础。接到王经理安排的“青春树儿童摄影”主题网站任务后，小黄制定了这段时间的学习计划：巩固盒子模型、元素的类型与转换、浮动与定位等布局相关的基础知识，然后再动手制作该主题网站。由于篇幅限制，本项目只讲解“青春树儿童摄影”主题网站首页面。

教学目标

✧ 知识目标

1、 了解盒子模型的概念

2、 掌握盒子的相关属性

3、 熟悉元素的类型与转换

4、 掌握元素的浮动与定位

5、 掌握清除浮动的方法

✧ 技能目标

1、 能够使用DIV 标记与浮动样式对页面进行布局 重点及措施 教学重点：认识盒子模型、盒子模型相关属性、标记、元素的转换、元

素的浮动与定位、清除浮动。

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施 教学难点：盒子模型相关属性、元素的转换、元素的浮动与定位、清除浮动。

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式 教学采用教师课堂讲授为主，使用教学PPT 讲解。

教

学

过

程

第一课时

（讲解“认识盒子模型”）

复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习【项目3 “网上花店”专题页制作】的相关知识。 1、 通过上一章的学习，我们知道CSS 是层叠式样式表的简称，层叠性是

其最基本的特征。那么，请举例说明什么是“CSS 层叠性”？

答案：

所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义

标记字号大小为12像素，链入式定义

标记颜色为红色，那

么段落文本将显示为12像素红色，即这两种样式产生了叠加。

2、通过上一章的学习，我们知道CSS中存在着权重和优先级。那么，请

分别说明“CSS基础选择器”中各选择器的权重值各是多少？

答案：

CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。

说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解

或直接进入本课时新内容的学习。

本课时内容学习

✧分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

随着信息化的迅速发展,手机已经成为人们日常生活中的必需品。一个完整

的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。其实，在CSS中

也存在着盒子模型，利用CSS盒子模型能够更好的对网页进行排版。那么，

如何理解“CSS盒子模型”呢？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

●如果把手机想象成HTML元素，那么手机盒子就是一个CSS盒子模

型，其中手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模

型的内边距，纸盒的厚度为CSS盒子模型的边框。当多个手机盒子放

在一起时，它们之间的距离就是CSS盒子模型的外边距。

●所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也

就是一个盛装内容的容器。每个矩形都由元素的内容、内边距

（padding）、边框（border）和外边距（margin）组成。

3

✧知识点讲解

➢讲解“认识盒子模型”

（1）、教师展示PPT对“CSS盒子模型”的概念进行讲解，并以生活中常见的手机盒子的构成进行演示。

（2）、教师展示PPT，对CSS盒子模型的构成元素进行具体讲解。

（3）、教师使用CSS盒子模型控制网页中的元素，并进行代码演示。

（4）、学生练习，教师巡视，对疑难问题进行解答。

✧阶段小结

➢小结

重点：认识盒子模型。

易错点：注意理解盒子模型的构成元素。

➢答疑

教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识

点给与解释。

✧巩固练习

➢巩固本课时知识点

学完本课时后，带领学生对“认识盒子模型”知识点进行回顾。以此使学

生更熟练地掌握如何认识盒子模型及其构成。

➢通过“补充案例”加强学习

教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补

充案例对相关知识点进行巩固。

4

第二、三课时

（盒子模型相关属性，讲解“边框属性”、“内边距属性”、“外边距属性”、“背

景属性”、“盒子的宽与高”）

说明：

●将【任务4-2】作为两个课时进行讲解。

复习上节课内容

在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。

1、通过上节课的学习，我们已经认识了盒子模型，并学习了盒子模型的

构成。那么，请大家回顾下：如何理解盒子模型，以及盒子模型的主

要构成元素有哪些呢？

答案：

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是

一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边

框（border）和外边距（margin）组成。

说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解

或直接进入本课时新内容的学习。

本课时内容学习

✧分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

通过上节课的学习，我们已经学习了盒子模型及其边框属性。其实，盒子

模型中还包括其他属性，例如：边距属性。那么，请同学们讨论下：如何

理解盒子模型中的“内边距”呢？

答案：

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

在网页布局时，为了调整内容在盒子中的显示位置，常常需要给元素设置

内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填

充。

✧知识点讲解

➢讲解“边框属性”

（1）、教师展示PPT对“边框属性”的概念及用途进行讲解。

（2）、教师分别对“设置边框样式”、“设置边框宽度”、“设置边框颜色”

及“综合设置边框”的属性值及应用效果进行讲解并通过代码进行

演示。

（3）、教师指出应用“边框属性”时需要注意的问题，并给与解答。

（4）、学生练习，教师巡视，对疑难问题进行解答。

➢讲解“内边距属性”

5