《网页设计与制作（活页式）》 教案 项目4 盒子模型_第1页
《网页设计与制作（活页式）》 教案 项目4 盒子模型_第2页
《网页设计与制作（活页式）》 教案 项目4 盒子模型_第3页
《网页设计与制作（活页式）》 教案 项目4 盒子模型_第4页
《网页设计与制作（活页式）》 教案 项目4 盒子模型_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与制作》教学设计课程名称：网页设计与制作授课年级：20年级授课学期：20学年第一学期教师姓名：老师

20年月日课题名称项目四盒子模型计划课时课时内容分析盒子模型是CSS网页布局的关键技术。掌握盒子模型的相关属性，更好地控制网页中各个元素所呈现的效果。本项目将对盒子模型的概念、盒子相关属性及标签的类型与转换进行讲解。教学目标理解盒子模型的概念。掌握盒子模型的相关属性。熟悉标签的类型与转换。重点及措施教学重点：使用CSS设置背景；使用块元素和行内标签措施：通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点：使用CSS样式制作页面结构措施：通过上机操作加强学习和补充案例进行巩固。教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。教学过程任务4.1认识盒子模型4.1.1盒子模型的概念内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：什么是盒子模型？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：盒子模型是指把HTML5页面中的元素看作矩形的盒子，每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的。知识点讲解讲解盒子模型的概念（1）教师展示PPT，对盒子模型的概念进行具体讲解。盒子模型是指把HTML5页面中的元素看作矩形的盒子，每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的。实例1认识盒子模型在<body>标签中使用<div>标签定义了一个盒子“box”，并对“box”设置了若干属性。div是英文division的缩写，意为分割、分开。<div>标签就是一个区块容器标签，简称块标签，块通常称为盒子。块标签可以容纳段落、标题、表格、图像等各种网页元素。<div>标签可以嵌套<div>标签。实际上DIV+CSS布局就是将网页内容放入若干<div>标签中，并使用CSS设置这些<div>标签的属性。（2）学生自主提问，教师对疑难问题进行解答。讲解盒子模型结构（1）教师展示PPT，对盒子模型结构进行具体讲解。一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。因此，实例1中定义的盒子box的实际宽度和高度均是310px。（2）学生自主提问，教师对疑难问题进行解答。讲解<div>标签的属性和含义（1）教师展示PPT，对<div>标签的属性和含义进行具体讲解。注意：1）事实上所有的网页元素本质上都是以盒子的形式存在的。例如，<body><P><h1~h6><ul><li>等元素都是盒子，这些元素都有默认的盒子属性值。2）给盒子添加背景色或背景图像时，该元素的背景色或背景图像将出现在内边距中。3）虽然每个盒子模型都拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。（2）学生自主提问，教师对疑难问题进行解答。4.1.2盒子模型的相关属性内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：盒子模型主要有哪些属性？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：边框属性、内边距属性、外边距属性。知识点讲解讲解边框属性（1）教师展示PPT，对边框属性进行具体讲解。边框属性设置格式如下：border-top：上边框宽度样式颜色border-right：右边框宽度样式颜色border-bottom：下边框宽度样式颜色border-left：左边框宽度样式颜色若四个边框具有相同的宽度、样式和颜色，则可以设置如下：border：边框宽度样式颜色（2）学生自主提问，教师对疑难问题进行解答。讲解内边距属性（1）教师展示PPT，对内边距属性进行具体讲解。内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。其设置方法类似于边框属性的设置，设置格式如下：padding-top：上内边距大小padding-right：右内边距大小padding-bottom：下内边距大小padding-left：左内边距大小若四个内边距具有相同的大小，则可以设置如下：padding：内边距大小（2）学生自主提问，教师对疑难问题进行解答。讲解外边距属性（1）教师展示PPT，对外边距属性进行具体讲解。外边距用于设置盒子与其他盒子之间的距离。其设置格式如下：margin-top：上外边距大小margin-right：右外边距大小margin-bottom：下外边距大小margin-left：左外边距大小若四个外边距具有相同的大小，则可以设置如下：margin：外边距大小（2）学生自主提问，教师对疑难问题进行解答。4.1.3CSS设置背景内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：CSS中背景颜色的格式是什么？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：background-color：#RRGGBB|#rgb(r，g，b)|预定义的颜色值。知识点讲解讲解设置背景颜色（1）教师展示PPT，对设置背景颜色进行具体讲解。设置背景颜色的格式如下：background-color：#RRGGBB|#rgb(r，g，b)|预定义的颜色值实例2设置背景颜色（2）学生自主提问，教师对疑难问题进行解答。讲解设置背景图像（1）教师展示PPT，对设置背景图像进行具体讲解。设置背景颜色的格式如下：background-image：url（图像）实例3设置背景图像（2）学生自主提问，教师对疑难问题进行解答。任务4.2标签的类型与转换4.2.1标签的类型内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：标签有哪些类型？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：块标签和行内标签。知识点讲解讲解块标签（1）教师展示PPT，对块标签进行具体讲解。块标签在页面中以区域块的形式出现，其特点是每个块标签通常都会占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块标签有<p><div><ul><ol><li>等，其中<div>标签是典型的块标签。（2）学生自主提问，教师对疑难问题进行解答。讲解行内标签（1）教师展示PPT，对行内标签进行具体讲解。行内标签也称为内联标签或内嵌标签，其特点是不必在新的一行开始，同时，也不要求其他标签必须在新的一行开始。行内标签一般不可以设置宽度、高度和对齐等属性，常用于控制页面中的特殊文本的样式。常见的行内标签有<strong><b><em><i><a><span>等，其中<span>标签是典型的行内标签。<span>标签与<div>标签一样，它作为容器标签而被广泛应用在HTML5中。在<span>与</span>中间同样可以容纳各种HTML标签，从而形成独立的对象。<div>与<span>的区别在于<div>是一个块标签，它包围的标签会自动换行，而<span>仅仅是一个行内标签，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内标签都不合适时，就可以使用<span>标签。下面举例说明<span>标签的使用。实例4使用<span>标签（2）学生自主提问，教师对疑难问题进行解答。4.2.2标签的转换内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如何让行内标签拥有块标签的某些属性？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：使用display属性对标签的类型进行转换。知识点讲解讲解标签的转换（1）教师展示PPT，对标签的转换进行具体讲解。网页是由多个块标签和行内标签构成的盒子排列而成的。如果希望行内标签具有块标签的某些特性或者需要块标签具有行内标签的某些特性，同时希望不独占一行排列，则可以使用display属性对标签的类型进行转换。display属性常用的属性值及含义（2）学生自主提问，教师对疑难问题进行解答。4.2.3块标签间的外边距内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如何计算块标签间的垂直外边距？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：当上下相邻的两个块标签相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是两者的和，而是两者中的较大者。知识点讲解讲解块标签间的垂直外边距（1）教师展示PPT，对块标签间的垂直外边距进行具体讲解。当上下相邻的两个块标签相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是两者的和，而是两者中的较大者。实例5块标签间的垂直外边距实例5定义了第一个块的下外边距为10px，定义了第二个块的上外边距为30px，此时两个块之间的垂直间距为30px，即为margin-bottom和marign-top中的较大者。（2）学生自主提问，教师对疑难问题进行解答。讲解块标签间的水平外边距（1）教师展示PPT，对块标签间的水平外边距进行具体讲解。当两个相邻的块标签水平排列时，如果左面的标签有右外边距margin-right，右面的标签有左外边距margin-left，则它们之间的水平间距是两者的和。实例6块标签间的水平外边距本例定义了第一个块的右外边距为10px，定义了第二个块的左外边距为30px，此时两个块之间的水平间距是40px，即为marign-right和marign-left的和。（2）学生自主提问，教师对疑难问题进行解答。任务4.3综合案例——制作苏轼简介页面内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如何制作人物简介页面？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：创建HTML5文档→添加文本→添加CSS样式→保存并浏览。知识点讲解讲解苏轼简介页面的制作（1）教师展示PPT，对制作苏轼简介页面进行具体讲解。（2）学生自主提问，教师对疑难问题进行解答。实训11实训名称制作春节简介页面实训目标使用CSS样式设置页面实训实施使用CSS样式设置页面，页面设置要求如下。页面结构要求：1.设置元素的外边距为0。2.设置背景图像，图像平铺。3.设置盒子的宽度为1000px，高度为自动值，边距为1px，实线，蓝色。4.设置元素的页面上水平居中，内边距为10px。5.设置标题水平居中，高度为30px。6.设置标题的行高，使文字垂直居中。正文要求：1.设置字体为宋体。2.设置段落文字大小为15px。3.设置首行缩进2个字符。4.设置行高为20px。5.设置段落间距为13px。（作品点评）教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论