任务4制作学院介绍页面_第1页
任务4制作学院介绍页面_第2页
任务4制作学院介绍页面_第3页
任务4制作学院介绍页面_第4页
任务4制作学院介绍页面_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

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

文档简介

教案名称任务4制作学院介绍页面计划学时6学时知识目标理解盒子模型概念掌握盒子大小计算方式掌握盒子模型的相关属性掌握背景颜色设置方法掌握背景图像设置方法素质目标培养学生作风严谨、精益求精的工匠精神引导学生认识美、发现美、创造美教学重点盒子模型的相关属性设置背景颜色设置背景图像综合设置背景教学难点盒子大小计算方式教学模式教学做一体化线上+线下混合教学教学活动及主要环节素养提升第1、2学时（盒子模型）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）盒子模型中的盒子有哪些属性？网页中哪些元素是盒子？=2\*ROMANII.重难点内容讲授：一、盒子模型（15分钟）所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框(border)和外边距(margin)组成。二、盒子大小计算方式（20分钟）一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。练习：定义一个盒子，设置相关属性。（5分钟）三、盒子模型的相关属性（40分钟） 1．边框属性border 边框（border）属性设置方式如下：border-top：上边框宽度样式颜色border-right：右边框宽度样式颜色border-bottom：下边框宽度样式颜色border-left：左边框宽度样式颜色若四个边框具有相同的宽度、样式和颜色，则可以一个次设置如下：border：边框宽度样式颜色注意：边框宽度、样式和颜色属性的顺序可以随意。边框样式的常用属性值有以下5个。solid：边框样式为单实线。dashed：边框样式为虚线。dotted：边框样式为点线。double：边框样式为双实线。none：没有边框。2．圆角边框属性border-radius格式:border-radius:圆角半径;例：设置圆角半径值为15pxborder-radius:15px; 注意：（1）设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。四个参数分别表示左上角、右上角、右下角、左下角的圆角半径。（2）若盒子设置了背景颜色或背景图像，那么在不设置边框时，也可以使用border-radius属性显示出圆角的效果。例：设置圆角半径为15px 3．内边距属性padding内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。其设置方法类似于padding属性的设置，其设置方式如下：padding-top：上内边距大小padding-right：右内边距大小padding-bottom：下内边距大小padding-left：左内边距大小若四个内边距具有相同的大小，则可以一个次设置如下：padding：内边距大小例如，将盒子box的上、右、下、左4个内边距分别设置为10px、20px、30px、40px，则可以使用如下代码。也可以简写成：若只有3个参数：表示上内边距为10px，左、右内边距均为20px，下内边距为30px若只有2个参数：表示上、下内边距均为10px，左、右内边距均为20px若只有一个参数：表示上、右、下、左4个内边距均为10px4．外边距（margin）属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。外边距用于设置盒子与其它盒子之间的距离。其设置方法类似于内边距（paddding）属性的设置，其设置方式如下：margin-top：上外边距大小margin-right：右外边距大小margin-bottom：下外边距大小margin-left：左外边距大小若四个外边距具有相同的大小，则可以一次设置如下：margin：外边距大小如果要让盒子在其所在容器中水平居中，则可以用如下代码：=3\*ROMANIII.课堂小结：（5分钟）盒子模型的相关属性盒子大小计算方式作业：超星学习通平台作业第3、4学时（盒子阴影属性和盒子大小属性）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）盒子不定义宽度和高度时，其默认的宽度和高度是多少？=2\*ROMANII.重难点内容讲授：（75分钟）一、盒子阴影（box-shadow）属性（25分钟）格式：box-shadow:阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影扩展半径阴影颜色阴影类型；例4-2二、盒子大小属性（box-sizing）（25分钟）格式：box-sizing:content-box|border-box例4-3<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>box-sizing属性</title> <styletype="text/css"> .box1{ box-sizing:content-box; width:400px; height:100px; padding:10px; border:10pxsolidblue; } .box2{ box-sizing:border-box; width:400px; height:100px; padding:10px; border:10pxsolidblue; } </style> </head> <body> <divclass="box1">box-sizing:content-box;</div> <divclass="box2">box-sizing:border-box;</div> </body></html>练习：创建一个班级介绍的页面，将内容放入盒子中，设置盒子和各种属性，使页面美观。（25分钟）=3\*ROMANIII.课堂小结：（5分钟）盒子的阴影属性设置盒子大小的属性盒子相关属性的综合应用作业：学习通平台作业第5、6学时（CSS背景属性）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）网页中的颜色越多越好吗？你觉得哪些颜色搭配在一起会比较好看？=2\*ROMANII.重难点内容讲授：（35分钟）一、设置背景颜色格式：background-color：#RRGGBB或#rgb(r,g,b)或预定义的颜色值。例4-4二、设置背景图像格式：background-image：#RRGGBB或#rgb(r,g,b)或预定义的颜色值例4-5修改4-4的代码，设置网页的背景图像。三、设置背景图像平铺格式：background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round;该属性用于设置元素的背景图像如何铺排填充。说明：（1）repeat：背景图像在横向和纵向平铺，为默认值。（2）no-repeat：背景图像只显示一次，不平铺。（3）repeat-x：背景图像在横向上平铺。（4）repeat-y：背景图像在纵向上平铺。（5）space：背景图像以相同的间距平铺，且填充满整个容器或某个方向（CSS3新增关键字）。（6）round：背景图像自动缩放至合适大小，且填充满整个容器（CSS3新增关键字）。四、设置背景图像位置格式：background-position:关键字|百分比|长度;关键字有：center、left、right、top、bottom。五、设置背景图像固定格式：background-attachment:scroll|fixed|local;该属性用于设置或检索背景图像是随元素滚动的还是固定的。六、综合设置背景颜色和图像background:背景颜色url("图像")是否重复位置是否固定大小裁剪方式参考原点;七、实例：（40分钟）代码略。=3\*ROMANIII.课堂小结：（5分钟）设置背景颜色设置背景图像设置背景图像平铺设置背景图像

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

温馨提示

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

最新文档

评论

0/150

提交评论