1、项目4青春树儿童摄影网首页制作传智播客网页制作项目教程（HTML+CSS+JavaScript）教学设计课程名称：网页制作项目教程（HTML+CSS+JavaScript）授课年级： 2016年级 授课学期： 2016学年第二学期教师姓名： 某某老师 201 年 月 日课题名称项目4“青春树儿童摄影网”首页制作计划课时12课时内容分析童年是人生岁月中最纯真的年代，也是被家人呵护，受尽百般宠爱的黄金时期。为此，每位家长都希望给孩子的童年多留下些美好回忆，除了录制视频以外，儿童摄影也是很不错的选择。为了使更多的家长了解到儿童摄影，“青春树儿童摄影”的CEO李总致电HC公司项目负责人王经理，计划定制
2、一个主题网站，用于宣传“青春树儿童摄影”。通过前面两个专题页的制作，小黄已经有了一定的HTML与CSS基础。接到王经理安排的“青春树儿童摄影”主题网站任务后，小黄制定了这段时间的学习计划：巩固盒子模型、元素的类型与转换、浮动与定位等布局相关的基础知识，然后再动手制作该主题网站。由于篇幅限制，本项目只讲解“青春树儿童摄影”主题网站首页面。教学目标 知识目标1、 了解盒子模型的概念2、 掌握盒子的相关属性3、 熟悉元素的类型与转换4、 掌握元素的浮动与定位5、 掌握清除浮动的方法 技能目标1、 能够使用DIV标记与浮动样式对页面进行布局重点及措施教学重点：认识盒子模型、盒子模型相关属性、标记、元素
3、的转换、元素的浮动与定位、清除浮动。措施：通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点：盒子模型相关属性、元素的转换、元素的浮动与定位、清除浮动。措施：通过上机操作加强学习和补充案例进行巩固。教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。教学过程第一课时（讲解“认识盒子模型”） 复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习【项目3 “网上花店”专题页制作】的相关知识。1、 通过上一章的学习，我们知道CSS是层叠式样式表的简称，层叠性是其最基本的特征。那么，请举例说明什么是“CSS层叠性”？答案：所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS
4、样式表定义标记字号大小为12像素，链入式定义标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。2、 通过上一章的学习，我们知道CSS中存在着权重和优先级。那么，请分别说明“CSS基础选择器”中各选择器的权重值各是多少？答案：CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：随着信息化的迅速发展,手机已经成为人们日常生活中的必需品。一个完整的手
5、机盒子通常包含手机、填充泡沫和盛装手机的纸盒。其实，在CSS中也存在着盒子模型，利用CSS盒子模型能够更好的对网页进行排版。那么，如何理解“CSS盒子模型”呢？请小组代表对以上问题发表见解。教师对上述问题进行解释： 如果把手机想象成HTML元素，那么手机盒子就是一个CSS盒子模型，其中手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模型的内边距，纸盒的厚度为CSS盒子模型的边框。当多个手机盒子放在一起时，它们之间的距离就是CSS盒子模型的外边距。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（
6、border）和外边距（margin）组成。 知识点讲解 讲解“认识盒子模型”（1）、教师展示PPT对“CSS盒子模型”的概念进行讲解，并以生活中常见的手机盒子的构成进行演示。（2）、教师展示PPT，对CSS盒子模型的构成元素进行具体讲解。（3）、教师使用CSS盒子模型控制网页中的元素，并进行代码演示。（4）、学生练习，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：认识盒子模型。易错点：注意理解盒子模型的构成元素。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固本课时知识点学完本课时后，带领学生对“认识盒子模型”知识点进行回顾。以此使学生
7、更熟练地掌握如何认识盒子模型及其构成。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第二、三课时（盒子模型相关属性，讲解“边框属性”、“内边距属性”、“外边距属性”、“背景属性”、“盒子的宽与高”）说明： 将【任务4-2】作为两个课时进行讲解。 复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、 通过上节课的学习，我们已经认识了盒子模型，并学习了盒子模型的构成。那么，请大家回顾下：如何理解盒子模型，以及盒子模型的主要构成元素有哪些呢？答案：所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒
8、子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：通过上节课的学习，我们已经学习了盒子模型及其边框属性。其实，盒子模型中还包括其他属性，例如：边距属性。那么，请同学们讨论下：如何理解盒子模型中的“内边距”呢？答案：请小组代表对以上问题发表见解。教师对上述问题进行解释：在网页布局时，为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是
9、元素内容与边框之间的距离，也常常称为内填充。 知识点讲解 讲解“边框属性” （1）、教师展示PPT对“边框属性”的概念及用途进行讲解。（2）、教师分别对“设置边框样式”、“设置边框宽度”、“设置边框颜色”及“综合设置边框”的属性值及应用效果进行讲解并通过代码进行演示。（3）、教师指出应用“边框属性”时需要注意的问题，并给与解答。（4）、学生练习，教师巡视，对疑难问题进行解答。 讲解“内边距属性” （1）、教师展示PPT对“内边距属性”的概念及用途进行讲解。（2）、教师对“内边距属性”进行讲解并通过代码进行演示。（3）、教师指出应用“内边距属性”时需要注意的问题，并给予解答。（4）、学生练习，教
10、师巡视，对疑难问题进行解答。 讲解“外边距属性” （1）、教师展示PPT对“外边距属性”的概念及用途进行讲解。（2）、教师对“外边距属性”进行讲解并通过代码进行演示。（3）教师分析内外边距的区别与联系，并对比其应用效果。（4）、教师指出应用“外边距属性”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“背景属性” （1）、教师展示PPT对“背景属性”的概念及用途进行讲解。（2）、教师分别对“设置背景颜色”、“设置背景图像”、“设置背景图像平铺”、“设置背景图像的位置”、“设置背景图像固定”、“综合设置元素的背景”进行讲解并通过代码进行演示。（3）教师分析“背
11、景属性”不同属性的区别与联系，并对比其应用效果。（4）、教师指出应用“综合设置元素的背景”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“盒子的宽与高” （1）、教师展示PPT对“CSS盒子模型”的构成元素进行回顾，并对“盒子的宽与高”的概念进行讲解。（2）、教师分别对“盒子的宽度与高度”的常用单位数值进行讲解，并通过代码进行演示。（3）、教师指出计算“盒子模型的总宽度和总高度”的计算原则，并能够根据实际情况进行计算。 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和 盒子的总高度= height+上下内边距之和+上下边框宽度之
12、和+上下外边距之和（4）、教师指出“宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（和标记除外）”。（5）、学生练习，教师巡视，对疑难问题进行解答。说明：在知识点讲解时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：内边距属性、外边距属性。易错点：注意区分盒子模型中的内边距与外边距。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固本课时知识点学完本课时后，带领学生对“边框属性”、“内边距属性”、“外边距属性”、“背景属性”、“盒子的宽与高”等知识点进行回顾。以此使
13、学生更熟练地掌握盒子模型相关属性，并能灵活应用这些属性控制网页元素。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。 布置作业 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。 预习【任务4-3】元素的类型与转换。第四课时（元素的类型与转换，讲解“元素的类型”、“标记”、“元素的转换”、“块元素垂直外边距的合并”） 复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、上节课中，我们学习了盒子模型中的边距属性，主要包括内边距和外边距属性。那么，请简要说明如何理解CSS盒子模型中的“外边距”呢
14、？答案：由于网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距；所谓外边距指的是元素边框与相邻元素之间的距离。 2、 通过上节课的学习，我们已经认识了盒子模型，并学习了盒子模型的构成。那么，请大家回顾下：在CSS规范的盒子模型中，如何计算盒子模型的总宽度和总高度？答案：CSS规范的盒子模型的总宽度和总高度的计算原则是： 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和。 盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进
15、入本课时新内容的学习。 本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在HTML中，存在着各种各样的标记，可以定义字体、文本、图片、列表等。其实，HTML中的元素可分为两种类型:块元素和行内元素。那么，请同学们讨论下：什么是块元素和行内元素，它们有哪些区别？请分别举例说明。请小组代表对以上问题发表见解。教师对上述问题进行解释：在HTML中，元素分为块元素和行内元素。具体如下： 块元素块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有、等，其中标记是最典型的
16、块元素。 行内元素行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有、等，其中标记是最典型的行内元素。 知识点讲解 讲解“元素的类型” （1）、教师和学生互动：HTML标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。下面，我们开始学
17、习块元素和行内元素。（2）、教师展示PPT对“块元素和行内元素”的概念及特点进行说明。（3）、教师分别对“块元素和行内元素”进行讲解，并进行代码演示。（4）、教师列举常见的块元素和行内元素，并对比其不同。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“标记”（1）、教师和学生互动：在上面的小节中，我们已经学习了标记，标记是典型的块标记。下面，我们学习一个典型的行内标记标记。（2）、教师展示PPT对标记的概念及特点进行说明。（3）、教师对标记的使用方法进行讲解，并进行代码演示。（4）、教师对比标记和标记的异同，并指出使用标记布局时需要注意的问题。（5）、学生练习，教师巡视，对疑难问题进行
18、解答。 讲解“元素的转换”（1）、教师和学生互动：我们知道，网页是由多个块元素和行内元素构成的盒子排列而成的，而HTML元素分为块元素和行内元素。如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，那么，需要怎么做呢？其实，在CSS中使用display属性可以对元素的类型进行转换。（2）、教师展示PPT对“display属性”及其常用的属性值进行展示。（3）、教师对“display属性”的使用方法进行讲解，并进行代码演示。（4）、教师对比“display属性”不同属性值显示的不同效果，并进行总结。（5）、教师指出使用“display
19、属性”转换元素类型时需要注意的问题，并给与解答。（6）、学生练习，教师巡视，对疑难问题进行解答。 讲解“块元素垂直外边距的合并”（1）、教师和学生互动：教师通过PPT演示“块元素垂直外边距合并”的动画效果，引出“块元素垂直外边距的合并”问题。（2）、教师指出：垂直外边距的合并被分为两类，分别为相邻块元素垂直外边距的合并和嵌套块元素垂直外边距的合并。（3）、教师对“相邻块元素垂直外边距的合并”进行讲解，并进行代码演示。（4）、教师对“嵌套块元素垂直外边距的合并”进行讲解，并进行代码演示。（5）、教师对比相“邻块元素垂直外边距的合并”和“嵌套块元素垂直外边距的合并”的异同，并指出块元素合并时需要注
20、意的问题。（6）、学生练习，教师巡视，对疑难问题进行解答说明：在知识点讲解时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：元素的转换。易错点：注意区分行内元素和块元素。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固本课时知识点学完本课时后，带领学生对“元素的类型”、“标记”、“元素的转换”等知识点进行回顾。以此使学生更熟练地区分元素的类型，以及如何进行元素的转换等知识点。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固
21、。 布置作业 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。 预习【任务4-4】元素的浮动。 预习【任务4-5】元素的定位。说明：在知识点讲解时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。第五课时（元素的浮动，讲解“元素的浮动属性”、“清除浮动”、“overflow属性”） 复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、上节课中，我们学习了盒子模型中的边距属性，主要包括内边距和外边距属性。那么，请简要说明如何理解CSS盒子模型中的“外边距”呢？答案：由于网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合
22、理地布局网页，就需要为盒子设置外边距；所谓外边距指的是元素边框与相邻元素之间的距离。 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，这样的布局制作出来的页面看起来呆板、不美观。其实，通过元素“浮动”可以使页面中的元素按照左、中、右的结构进行排版。那么，什么是“元素的浮动”，以及如何设置元素的浮动呢？ 请小组代表对以上问题发表见解。教师对上述问题进行解释： 所谓元素的浮动是指设置了浮动属性的元素会脱
23、离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器float:属性值; 在上面的语法中，常用的float属性值有三个：left、right、none。分别用于设置元素向左浮动、元素向右浮动和元素不浮动。 知识点讲解 讲解“元素的浮动属性float”（1）、教师通过PPT对网页中常见的元素浮动效果进行展示。（2）、教师通过PPT对“浮动”的概念及基本语法格式进行讲解，并进行代码演示。（3）、教师对“浮动”的常用属性左浮动、右浮动进行讲解，并进行代码演示。（4）、教师指出对元素应用“浮动”时需要注意的问题，并给予解答。（5）、
24、学生练习，教师巡视，对疑难问题进行解答。 讲解“清除浮动” （1）、教师对元素的浮动会对其他元素产生影响，并进行代码演示。（2）、教师对分别对“使用空标记清除浮动”、“使用overflow属性清除浮动”以及“使用after伪对象清除浮动”的方法及应用范围进行讲解，并进行代码演示。（3）、教师对比“使用空标记清除浮动”、“使用overflow属性清除浮动”以及“使用after伪对象清除浮动”的异同，并分析其优缺点。（4）、教师分别指出清除元素浮动时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“overflow属性”（1）、教师通过PPT对“overflow属
25、性”的作用进行讲解。（2）、教师对“overflow属性”的基本语法格式进行讲解，并进行代码演示。（3）、教师对“overflow属性”的四个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。（4）、教师指出应用“overflow属性”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。说明：在知识点讲解时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：元素的浮动属性float、清除浮动。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固本课时
26、知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握如何给元素设置浮动属性，并能够清除浮动元素带来的影响。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第六、七课时（元素的定位，讲解“元素的定位属性”、“静态定位”、“相对定位”、“绝对定位”、“固定定位”、“z-index层叠等级属性”）说明： 将【任务4-5】作为两个课时进行讲解。 复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、在上节课中，我们已经学习了如何给元素设置浮动。由于浮动元素不再占用原文档流的位置，
27、对页面中其他元素的排版会产生影响，为了排除这种影响，有时候需要我们清除元素的浮动。那么，如何使用clear属性清除元素的浮动呢？请同学们讨论并举例说明。请小组代表对以上问题发表见解。教师对上述问题进行解释： 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。在CSS中，通过clear属性清除浮动的方法是：给受到浮动的元素应用clear属性。可以分别使用clear:left、clear:right、clear:both;来清除元素左、右及左右两侧浮动的影响。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分
28、组讨论对新课进行讲解前，先让学生分组讨论以下问题：元素的定位方式包括多种，例如：静态定位、相对定位、绝对定位、固定定位等。那么，请同学们讨论下：什么是“相对定位”？请小组代表对以上问题发表见解。教师对上述问题进行解释：相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。 知识点讲解 讲解“元素的定位属性”（1）、教师和学生互动：制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。元素的定位属性主要包
29、括定位模式和边偏移两部分。下面，将进行具体讲解。（2）、教师分别针对“定位模式”和“边偏移”进行详细讲解。（3）、教师对“定位模式”的基本语法格式进行讲解，并进行代码演示。（4）、教师指出position属性的四个常用值，并进行分析。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“静态定位”（1）、教师展示PPT对“静态定位”的概念进行讲解。（2）、教师针对“静态定位”进行详细讲解，并进行代码演示。（3）、学生练习，教师巡视，对疑难问题进行解答。 讲解“相对定位”（1）、教师展示PPT对“相对定位”的概念进行讲解。（2）、教师针对“相对定位”进行详细讲解，并进行代码演示。（3）、教师分
30、析“相对定位”的用法及显示效果，对比其和“静态定位”的区别与联系。（4）、教师指出应用“相对定位”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“绝对定位”（1）、教师展示PPT对“绝对定位”的概念进行讲解。（2）、教师针对“绝对定位”进行详细讲解，并进行代码演示。（3）、教师分析“绝对定位”的用法及显示效果，对比其和“静态定位”以及“相对定位”的区别与联系。（4）、教师指出应用“绝对定位”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“固定定位”（1）、教师展示PPT对“固定定位”的概念进行讲解。（2）、教师针对“固定定位”进行详细讲解，并进行代码演示。（3）、教师分析“固定定位”的用法及显示效果，对比其和“静态定位”、 “相对定位”以及“绝对定位”的区别与联系。（4）、学生练习，教师巡视，对疑难问题
