Web前端开发案例教程（HTML5 CSS3） 教案任务4制作学院介绍页面.docx

《Web前端开发案例教程（HTML5 CSS3） 教案任务4制作学院介绍页面.docx》由会员分享，可在线阅读，更多相关《Web前端开发案例教程（HTML5 CSS3） 教案任务4制作学院介绍页面.docx（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、知识目标理解盒子模型概念掌握盒子大小计算方式 掌握盒子模型的相关属性掌握背景颜色设置方法 掌握背景图像设置方法素质目标培养学生作风严谨、精益求精的工匠精神 引导学生认识美、发现美、创造美教学重点盒子模型的相关属性设置背景颜色 设置背景图像综合设置背景教学难点盒子大小计算方式教学模式教学做一体化线上+线下混合教学教学活动及主要环节思政元素 切入点第1、2学时 (盒子模型) 课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.学生讨论：(10分钟)盒子模型中的盒子有哪些属性？网页中哪些元素是盒子？ H.重难点内容讲授：一、盒子模型(15分钟)所谓盒子模型就是把HTML页面中的元素看作是一个

2、矩形的盒子，也就是一 个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border) 和外边距(margin)组成。教案名称任务4制作学院介绍页面计划学时6学时盒子模型外逆一1的宽度和 高度与它 的内容、边 框、内边距 有关。内匚1- iafe(boxd)内边距(paddnR)1111容、边框、 内边距影 响盒子的 大小，要计 算准确。1二、盒子大小计算方式（20分钟）一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距” 组成的。练习：定义一个盒子，设置相关属性。（5分钟）三、盒子模型的相关属性（40分钟）1 .边框属性border边框（border）

3、属性设置方式如下：border-top：上边框宽度样式颜色border-right：右边框宽度 样式 颜色border-bottom：下边框宽度样式颜色 border-left：左边框宽度样式颜色若四个边框具有相同的宽度、样式和颜色，则可以一个次设置如下：border：边框宽度样式颜色注意：边框宽度、样式和颜色属性的顺序可以随意。边框样式的常用属性值有以下5个。solid：边框样式为单实线。dashed：边框样式为虚线。dotted：边框样式为点线。double：边框样式为双实线。 none：没有边框。2 .圆角边框属性border-radius格式：border-radius:圆角半径；例：

4、设置圆角半径值为15Pxborder-radius:15px;注意：（1）设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。border-radius:15px 15px 0 0;四个参数分别表示左上角、右上角、右下角、左下角的圆角半径。 XDx +（2）若盒子设置了背景颜色或背景图像，那么在不设置边框时，也可以使 用border-radius属性显示出圆角的效果。例：设置圆角半径为15Pxborder-radius:15px/* 圆角半径设置为ISpx */D r v x + C 0 127AA1M8/p0 i盒子中第内g3.内边距属性padding内边距用于设置盒子中内容与边框之间

5、的距离，也常常称为内填充。其设置方法类似于padding属性的设置，其设置方式如下： padding-top：上内边距大小 padding-right：右内边距大小 padding-bottom：下内边距大小padding-left：左内边距大小若四个内边距具有相同的大小，则可以一个次设置如下：padd i ng :内边距大小例如，将盒子box的上、右、下、左4个内边距分别设置为10px、20px、 30px 40px,则可以使用如下代码。.box(padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px

6、;也可以简写成：#boxpadding:10px 20px 30px 40px;若只有3个参数：#boxpadding:10px 20px 30px;表示上内边距为lOpx,左、右内边距均为20px,下内边距为30Px若只有2个参数：#boxpadding:10px 20px;表示上、下内边距均为10px,左、右内边距均为20px若只有一个参数：#boxpadding:10px;表示上、右、下、左4个内边距均为10px4.外边距(margin)属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地 布局网页，就需要为盒子设置外边距。外边距用于设置盒子与其它盒子之间的距离。其设置方

7、法类似于内边距（paddding）属性的设置，其设置方式如下：marg in-top：上外边距大小 margin-right：右外边距大小 margin-bottom：下外边距大小 margin-left：左外边距大小若四个外边距具有相同的大小，则可以一次设置如下：margin：外边距大小如果要让盒子在其所在容器中水平居中，则可以用如下代码： box margin: auto;III.课堂小结：（5分钟）盒子模型的相关属性盒子大小计算方式作业：超星学习通平台作业第3、4学时（盒子阴影属性和盒子大小属性）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .学生讨论：（10分钟）盒子不定

8、义宽度和高度时，其默认的宽度和高度是多少？II .重难点内容讲授：（75分钟）网页中盒 子的大小 需要精确 计算，一个 像素也不 能差，要求 同学们养网页中盒 子的大小 需要精确 计算，一个 像素也不 能差，要求 同学们养一、盒子阴影（boxshadow）属性（25分钟）格式：box-shadow:阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影扩展半径阴影颜色阴影类型；例4-2.C Q 1274A1SM6成精益求精的工匠未来信息学院畸介精神。24 .a7cuirMi，M.vnrma*，ttvaa owMom eantvii9.二、盒子大小属性(box-sizing) (25分钟)格式：box-s

9、izing: content-box | border-box 例4-3 box-sizing 属性 .boxlbox-sizing: content-box;width: 400px;height: lOOpx;padding: lOpx;border: lOpx solid blue;.box2box-sizing:border-box;width: 400px;height: lOOpx;padding: lOpx;border: lOpx solid blue;box-sizing: content-box;box-sizing:border-box;练习：创建一个班级介绍的页面，将内

10、容放入盒子中，设置盒子和各种属 性，使页面美观。（25分钟）HI,课堂小结：（5分钟） 盒子的阴影属性 设置盒子大小的属性 盒子相关属性的综合应用作业：学习通平台作业第5、6学时（CSS背景属性）课前发布任务: 观看学习通平台相关学习视频。做课前测试题。I.学生讨论：（10分钟） 网页中的颜色越多越好吗？你觉得哪些颜色搭配在一起会比较好看？H.重难点内容讲授：（35分钟）一、设置背景颜色格式：background-color： #RRGGBB 或#rgb（r, g, b）或预定义的颜色值。例4-4二、设置背景图像格式：background-image： #RRGGBB或#%1）任，85）或预定

11、义的颜色值例4-5修改4-4的代码，设置网页的背景图像。body background-image: url（images/bodybg.jpg）; /*设置网页的肯 景图像为祥云图冢/三、设置背景图像平铺格式：background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round;该属性用于设置元素的背景图像如何铺排填充。说明：（1）repeat：背景图像在横向和纵向平铺，为默认值。（2） no-repeat：背景图像只显示一次，不平铺。（3） repeat-x：背景图像在横向上平铺。（4） repeat-y：背景图像在纵向上平铺。（

12、5） space：背景图像以相同的间距平铺，且填充满整个容器或某个方向 （CSS3新增关键字）。（6） round：背景图像自动缩放至合适大小，且填充满整个容器（CSS3新 增关键字）。四、设置背景图像位置格式：background-position:关键字|百分比|长度；关键字有：center、left right、top、bottom。深入学习 背景颜色 属性，让背 景颜色更 丰富、背景 图像更多 元，优化背 景属性代 码。追求卓 越，精益求 精。.公TttJi就加B* rovrn* M XLSK at欢. rime. wri,的分的赫.u力hS. 37开放倒H0了MW虹.彩N了面期。人球

13、，T wmw东争irirflB 加格3t储tm广汽i1案.五、设置背景图像固定格式：background-attachment:scrol 11 fixed| local;该属性用于设置或检索背景图像是随元素滚动的还是固定的。六、综合设置背景颜色和图像background:背景颜色url（图像）是否重复位置是否固定大小裁剪 方式参考原点；七、实例：（40分钟）I CM C 127Q0.1 分 6 ：&介设置背景颜色和背景图像body,h2,p margin: 0;padding: 0;.box width: 600px;height: 620px;margin: 20px auto 0;bac

14、kground: url(images/binhai.jpg) no-repeat center bottom; /*设置背 景图像*/)h2(height: 40px;line-height: 40px;text-align: center;margin-bottom: lOpx;background: #ccc url(images/xiaohui.png) no-repeat left center/40px;设置背景颜色和图像*/)P(text-indent: 2em;line-height: 25px;）未来信息学院简介学院是省人民政府批准设立、教育部备案的省属公办全日制普通高校。学院秉持以 服务发展为宗旨、以促进就业为导向的办学方针，遵循“以人为本、德技双馨、产教融合、服务社会” 的办学理念，以建设有特色高水平的高职院校”为目标，建立了开放创新强校模式，累积了优质的教育 资源，形成了良好的育人环境。学院的管理水平、教学质量、办学特色得到社会各界的广泛肯定. in,课堂小结：（5分钟）设置背景颜色 :设置背景图像 设置背景图像平铺 设置背景图像位置综合设置背景颜色和图像作业：学习通平台作业