《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第15课 盒子模型的使用_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第15课 盒子模型的使用_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第15课 盒子模型的使用_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第15课 盒子模型的使用_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第15课 盒子模型的使用_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

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

文档简介

1531第1531第课盒子模型的使用的基基本本PAGE121532115321盒子模型的使用第课PAGE13153212盒子模型的使用153212盒子模型的使用第课PAGE1

课题盒子模型的使用课时2课时（90min）教学目标知识技能目标：（1）了解盒子模型的基本结构（2）掌握使用CSS3设置盒子模型的边框、边距、背景等属性的方法（3）学习不同类型元素的盒子模型思政育人目标：通过对盒子模型的使用，培养学生良好的学习态度，以及细心、谨慎的处事方法，加强学生的逻辑思维能力教学重难点教学重点：了解盒子模型的基本结构教学难点：使用CSS3语言设置盒子模型的边框、边距、背景等属性教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材、手机、平板教学设计第1节课：知识讲解（24min）第2节课：问题导入（4min）

知识讲解（23min）知识竞赛（14min）课堂小结（2min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】概述盒子模型的定义，引出新的知识点盒子模型是构建网页布局的基础，所有HTML元素可以看作盒子，在CSS中，"boxmodel"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素【学生】聆听、思考、理解通过对知识点的概述，让学生主动思考如何HTML5中部署盒子模型，激发学生的求知欲预备知识

（24min）【教师】讲述盒子模型的基本结构HTML中的大部分元素（特别是块级元素）都可以看作是一个盒子，网页元素的定位实际就是这些大大小小的盒子在页面中的定位。一个标准的W3C盒子模型有4个组成部分，分别为内容（content）、内边距（padding）、边框（border）与外边距（margin），盒子模型的基本结构如图8-1所示。图8-1盒子模型的基本结构以生活中的盒子为例，内容是盒子中放置的物品，内边距是防止物品磕碰所填充的泡沫、气泡膜等辅料，边框是盒子本身，外边距是盒子与盒子之间的空隙。【教师】演示【例8-1】操作流程，实现图8-2的效果在浏览器中查看盒子模型。（1）创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，然后保存文档。<style> body{background-color:#ddedff;}/*设置页面的背景颜色*/ div{width:200px;height:150px;padding:20px;margin:20px; border:solid50px#5f6e8f;background-color:#aac4ff;}/*设置div元素宽度、高度、内外边距、边框与背景颜色*/</style>……<body> <div></div> <div></div></body>（2）在火狐浏览器中打开该文档，按“F12”键打开“开发者工具”窗格，在“查看器”选项卡中能够看到网页源代码，单击第一个div元素的代码行，“布局”选项卡中的“盒模型”区域将显示该div元素的盒子模型及其各属性值，如图8-2所示。图8-2在浏览器中查看盒子模型【学生】聆听、思考、理解【教师】讲述盒子模型的边框与边距盒子模型的边框与边距1．盒子模型的边框盒子模型的边框用border属性设置，它具有子属性border-style、border-color与border-width，分别用于设置边框样式、边框颜色与边框宽度，同时还可以使用border-radius属性设置圆角，相关内容可查看本书3.2.1节。除上述属性之外，还可以使用border-image属性为对象设置边框图像，它具有以下几个子属性。（1）border-image-source属性，用于设置边框图像的地址，属性值使用URL。（2）border-image-slice属性，用于设置边框图像的分割方式，属性值为数值（省略单位“px”）或百分比，可根据需要设置1～4个属性值，用法与margin属性相同。设置4个属性值时分别表示上、右、下、左边框图像的偏移量，根据设置的偏移量可将边框图像分割成一个九宫格。（3）border-image-width属性，用于设置边框图像的显示区域，属性值为数值与单位，与border-image-slice属性值用法相同，当设置4个属性值时，分别表示设置上、右、下、左边框图像的宽度。当同方向的border-image-width属性值大于或小于border-image-slice属性值时，分割后的各区域将缩小或拉伸至border-image-width属性值的大小。（4）border-image-repeat属性，用于设置B、D、F和H区域的重复方式，属性值stretch是默认值，表示将它们横向或竖向拉伸以适应内容块的宽度或高度；repeat表示将它们按原大小平铺，不处理断层现象；round表示在平铺的基础上，将它们进行小幅度的拉伸以尽量铺满边框范围，使边框图像更加平滑贴合。【教师】演示【例8-2】操作流程，实现图8-4的效果为标题与段落元素设置不同的边框图像，页面效果及边框图像原图如图8-4所示。边框图像平铺并适当缩放，处理得更平滑边框图像按原大小平铺边框图像根据内容拉伸边框图像平铺并适当缩放，处理得更平滑边框图像按原大小平铺边框图像根据内容拉伸图8-4应用边框图像的页面效果与边框图像的原图创建HTML5文档，在<body>标签中输入以下代码，构建文本内容的结构。<divclass="d1"><h1>拉伸的图像边框</h1></div><pclass="d2">平铺的图像边框</p><pclass="d3">铺满的图像边框</p>（2）在<head>标签中添加<style>标签，在其中输入以下代码，为h1元素与p元素设置不同的边框图像。.d1{width:250px;height:150px;text-align:center;padding:20px;margin:20px;border-image-width:30px;border-image-source:url(images/bor_img.png);border-image-slice:15%fill;background-color:#c5dfff;border-image-repeat:stretch;}/*设置拉伸的边框图像*/p{width:200px;padding:40px20px20px20px;margin:20px;font-size:1.5em;font-weight:bold;text-align:center;border-image-source:url(images/bor_an.png);border-image-slice:100fill;border-image-width:36px;}.d2{border-image-repeat:repeat;}.d3{border-image-repeat:round;}/*设置平铺和铺满的边框图像*/2．盒子模型的边距在CSS3中，使用padding与margin属性设置盒子模型的内外边距，它们的用法基本相同，具体可见本书3.2.1节。需要注意的是，margin属性值可以为负数，使对象呈现出层叠效果，而padding属性值不可为负数。【教师】演示【例8-3】操作流程，实现图8-5的效果设置边距属性使对象居中对齐，页面效果如图8-5所示。图8-5设置边距属性使对象居中对齐的页面效果创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，设置div与p元素的样式，并使p元素在div元素内居中对齐。<style> .d1{width:600px;height:122px; background-color:#c0ddff;border:solid20px#86a3b0;}/*设置div元素的宽度、高度、背景颜色与边框*/ p{width:300px;padding:20px; margin:0auto;border:solid20px#ffffff; background-color:#a5cad9;}/*设置段落元素的宽度、内外边距、边框与背景颜色*/</style>……<body> <divclass="d1"> <p>每个盒子都有4个组成部分，分别为内容、内边距、边框与外边距。</p> </div></body>【学生】观察参考代码、思考【教师】讲解参考代码【学生】聆听、思考、做好课堂笔记通过讲解知识点，让学生进一步了解HTML5中盒子模型的使用课堂练习

（15min）【教师】布置课堂练习内容设置三层盒子布局，让最内的盒子居中，颜色为黑色，边框距离为20px【学生】阅读题目、思考【教师】进行问题分析创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，设置div与p元素的样式，并使p元素在div元素内居中对齐。<style> .d1{width:600px;height:122px; background-color:#c0ddff;border:solid20px#86a3b0;}/*设置div元素的宽度、高度、背景颜色与边框*/ p{width:300px;padding:20px; margin:0auto;border:solid20px#ffffff; background-color:#a5cad9;}/*设置段落元素的宽度、内外边距、边框与背景颜色*/</style>……<body> <divclass="d1"> <p>每个盒子都有4个组成部分，分别为内容、内边距、边框与外边距。</p> </div></body>【学生】完成课堂题目【教师】多媒体公布参考答案【学生】对比参考答案，修改内容【教师】讲解课堂练习让学生通过题目练习，加深对HTML5中盒子模型的熟练程度第二节课问题导入

（4min）【教师】提出问题，引导学生思考在使用HTML5中盒子模型的时候，请学生思考以下问题（１）盒子模型中的背景属性和其他属性如何设置（２）不同类型元素的盒子模型应该如何区分【学生】聆听、思考、讨论提出问题，让学生思考，激发学生对HTML5中盒子模型的探索欲知识讲解

（25min）【教师】讲述盒子模型的背景属性盒子模型的背景属性盒子模型的背景属性，能够作用于边框及其内部区域。使用background属性及其子属性能够为盒子模型设置背景图像、背景颜色等，相关内容可查看本书3.2.2节。本节继续介绍其他的背景属性。1．背景图像的尺寸在之前的版本中，背景图像的尺寸无法通过代码控制，如需修改只能通过制图软件处理图像，操作起来非常不便。在CSS3中，可以使用background-size属性设置背景图像的尺寸，具体格式为：background-size:length-wlength-h|cover|contain;其中，length-w和length-h为数值与单位，表示背景图像的宽度与高度，如果只设置一个值，第二个值默认为auto；cover表示背景图像等比缩放至完全覆盖背景区域（没有空白）；contain表示背景图像等比缩放至尽量贴合背景区域（可能有空白）。【教师】演示【例8-4】的操作流程，实现图8-6的效果设置元素的背景图像尺寸，页面效果如图8-6所示。图8-6设置背景图像尺寸的页面效果创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，为div元素设置不同的背景图像尺寸。<style> div{width:500px;height:250px;margin:5px; background:url(images/bg_size.png)no-repeat; border:solid3pxblack;float:left;}/*设置div元素的宽度、高度、外边距、背景图像与边框，并向左浮动*/ .d1{background-size:cover;} .d2{background-size:contain;}/*设置后两个div元素的背景图像尺寸*/</style>……<body> <div></div> <divclass="d1"></div> <divclass="d2"></div></body>2．裁剪背景在CSS3中，使用background-clip属性裁剪背景，具体格式为：background-clip:border-box|padding-box|content-box;其中，border-box是默认值，表示从边框区域向外裁剪；padding-box表示从内边距区域向外裁剪；content-box表示从内容区域向外裁剪。【教师】演示【例8-5】操作流程，实现图8-7的效果设置元素裁剪背景的方式，页面效果如图8-7所示。图8-7设置裁剪背景方式的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建3个div元素的结构。<div></div><divclass="d1"></div><divclass="d2"></div>（2）在<head>标签中添加<style>标签，在其中输入以下代码，为div元素设置不同的裁剪背景方式。div{width:500px;height:200px;border:dotted5pxblack;padding:30px;margin:5px;float:left;background:#e5caffurl(images/bg_cl.png)no-repeat;background-size:contain;}/*设置div元素的宽度、高度、边框与内外边距，向左浮动，添加背景颜色与背景图像并设置背景图像的尺寸*/.d1{background-clip:padding-box;}.d2{background-clip:content-box;}/*设置后两个div元素裁剪背景的方式*/【教师】讲述盒子模型的其他属性盒子模型的其他属性1．溢出处理当块级元素中的内容超出了盒子模型的边框范围，默认情况系，浏览器会将这些内容显示在边框外侧，此时可以使用overflow属性对这些溢出内容进行处理，具体格式为：overflow|overflow-x|overflow-y:visible|hidden|scroll|auto;其中，overflow-x与overflow-y分别用于设置水平方向与竖直方向的溢出处理方式。各属性值的说明如下。（1）visible。默认值，不隐藏内容也不增加滚动条。（2）hidden。隐藏溢出部分。（3）scroll。增加滚动条。（4）auto。在内容溢出时增加滚动条。【教师】演示【例8-6】操作流程，实现图8-8的效果设置元素的溢出处理方式，页面效果如图8-8所示。图8-8设置溢出处理方式的页面效果创建HTML5文档，参照以下代码段（部分省略）分别在<style>和<body>标签中输入代码，为div元素设置不同的溢出处理方式。<style> div{margin:20px;width:180px;height:80px; border:solid2pxblack;float:left;}/*设置div元素的外边距、宽度、高度与边框，并向左浮动*/ .cont1{overflow:hidden;} .cont2{overflow:scroll;}/*设置后两个div元素的溢出处理方式*/</style>……<body> <div>画船捶鼓催君去，高楼把酒留君住。去住若为情，西江潮欲平。<br/>江潮容易得，只是人南北。今日此樽空，知君何日同！</div> <divclass="cont1">画船捶鼓催君去，高楼把酒留君住。…</div> <divclass="cont2">画船捶鼓催君去，高楼把酒留君住。…</div></body>2．轮廓线一些常用的表单控件在获得焦点时，浏览器默认会显示轮廓线效果，轮廓线与边框不同，轮廓线不占用页面的实际空间，只起到突出显示的作用。在CSS3中，使用outline属性设置轮廓线，也可以使用其子属性outline-style、outline-color和outline-width分别设置轮廓线的样式、颜色和宽度，它们的用法与border及其子属性相同。【教师】演示【例8-7】操作流程，实现图8-9的效果设置表单控件的边框并去除表单控件默认的轮廓线效果。在DW中打开本书配套素材“项目8”→“login.html”文档，该文档中已经创建好表单，并为获得焦点时的表单控件设置边框，此时页面效果如图8-9所示。outline:none;获得焦点时默认的轮廓线效果将边框效果覆盖获得焦点时默认的轮廓线效果将边框效果覆盖图8-9“login.html”页面效果【学生】聆听、思考、理解【教师】讲解不同类型元素的盒子模型不同类型元素的盒子模型在设置属性时有不同的效果，下面分别介绍（1）块级元素。块级元素在页面中独占一行。默认情况下，它的宽度自动填满父元素的宽度，也可以使用width和height属性设置块级元素的宽度和高度。需要注意的是，即使设置了宽度，块级元素仍会独占一行。此外，可以使用padding和margin属性设置它的内外边距。（2）行内元素。行内元素在页面中按照从左到右、从上到下的顺序排列，不会单独分行。它的宽度取决于内容的宽度，无法使用width和height属性设置宽度和高度。对于内外边距，设置水平方向的padding-left、padding-right、margin-left和margin-right属性可以正常显示，而设置竖直方向的padding-top、paddi

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论