HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案07 《使用盒子模型美化页面》.docx

教案20-20学年第学期课程名称：授课教师：职称：开课部门：教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课公共必修课口公共选修课专业必修课口素版拓展必修课专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3'b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务胃使用盒子模型美化页面授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标素质日标：1.培养学生团队合作精神、用于探索的精神:2 .培弊学生不断创新、精耕求精的工匠精神。知识目标，1.了解CSS中盒子模型的结构与特点:3 .了解窗子模型的长度计W：4 .解CSS中两种标准的盒子根里。能力目标：1,熟练使用盆子模型进行常规页而布局：5 .熟练使用盆子模型进行块状元素水平居中布局：6 .熟练加角边框的头像制作7 .察握边框阴影增加立体效果.教学内容1. CSS3文字样式2. CSS3文本样式&CSS3超陵接样式I.CSS3列表样式5. CSS3背景样式6. CSS3背景渐变样式M点魔点修学盅点:1. CSS3盒子模型结的2. CSS3余子模型长度计算3. CSS3怪异盒子模型1.CSS3盒子模型边框5. CSS3边框圆角6. CSS3盒子阴影教学难点：1.CSS3怪异盒子模型教学方法谈论法、讲授法、瀚示法、练习法*材文本素材团实物展示（ZPPT幻灯片口音笏索材回视频素材EI动画素材图形，图像索材口网络资源口其他课后作业任务一：总结提升fE务二：能力进阶教学反思注：教案按授课次数填写,每次校深均应填写一份本衣.里攵班授课可不另填写教案，教学过程及内容注解(应包含注意事%课程思政点融入等一、导入斫课1的6分*】教师；盘子模型是CSS控制页面的一/Bf概念.是div布局页面的或要组成部分.本单元利介绍盒子模型的基率概念,通过设置盒子模型的边框、内边距和外边距.画角效果和盒子阴影效果等性，制作课程视频列表、美化用户登录页面和用户注册页面,调整新云课堂项目内的视城列表，成长之路，课程列表等福分.通过团以合作、创新式的如合不同属性，探索获得见佳的页面展示效果的过程.冷望同学们要不断测试修改网页作品要有精券求精.再于探索的精裨.二、新知飒点、技能点讲解【的X分野】新课讲解h【约20分钟】教师；盒状模型是CSS中重要的概念.虽然CSS中没有盒状模型这个属性，但它却是CSS中无处不在的,i袋模型是由margin、border.Padding和Content几个屈性组合形成的。学生：什么是食子模型？为什么叫盒子模组？教师：CSS基础框食模型是CSS规范的一个模块,它定义了一种长方形的盒子一一包括它们各自的内边距(padding)与外边矩(margin),并根据视觉格式化模型来生成元素，对其进行布汽、编排、布局(Iayou1.),常核H译为盒子模型、禽模型或框模型，CSS盒子模型就是在网页设W中经常用到的CSS技术所使用的一种思维模型。由HTM1.元素可哄若作盒子，在CSS中，"boxmode1.”这一术语是用来设计和布局时使用。CSS盆模型本质上是一个盒子，时装周困的HTM1.元素，它包括：外边距，边框，内边距和实际内容。盒模型允许我们在其它元素和周用元索边框之间的空间放批元素.(案例演示)新课讲斛2：【约20分钟】我师：盒子模里有以下4部分构成,上下边框颜色为#369左右边框颜色为做)00border-co1.or:#369MXX);上边框颜色为#123左右边框颜色为#456F边框颜色为#789border-co1.or:M1.23#456#789属性说明bofdcr-top-wd1.h设立上边框粗细为5pxbordcr-topwidh:5px;bordcr-right-width设置右边根祖细为IOpxbordcr-right-width:IOpx;border-bottom-width设置下边框粗细为8pxbordcr-botom-width:8px;bonierJcI1.width设农左边也粗细为22pxbordcr-1.cft-width:22px;border-width四个边框粗细都为5pxbwdefwid(h:5x;上、下边框粗细为20PX左、右边框粗细为2pxborder-w汕h:20px2px;上边框粗细为5px拉、右边框粗细为IPX下边根粗细为6pxborder-width:5pxIpx6px;上.右、下、左边柢机细分别为Ipx、3px、5px、2pxborder-width:Ipx3px5px2px;属性说明bordcr-top-sty1.c设置上边极为实线bordcrtopsty!c:so1.id:bordcr-right-sty1.c设置右边极为实妙bordcr-right-sty1.c:so1.id;bordcr-bocto<n-sty1.c设W下边极为实线bordcr-bottom-sty1.c:M)Iid:bordcr-1.cft-sty1.c设置左边框为实线bordcr-1.cft-sty1.c:so1.id;bordcr-sty1.e设R四个边框均为实线border-sty1.e:so1.id;£、下边框为实线左、右边框为点线binder-sty1.e:so1.iddotted;上边框为实线左、右边框为点战下边极为出处border-sty1.e:so1.iddotteddashed;上.右.下、左边柢分别为border-sty1.e:M)1.iddo1.1.eddasheddoub1.e:实战、点战、悔线、双线属性说明border-top设置上边框粗细为5px实燃fffXX)颜色border-top:5pxso1.idt1.K);t>der-righ1.设置右边框粗细为SPX实战MDO颜色border-right:5pxso1.id#我)0：border-bottom设置下边框粗细为5px实线#f(X)颜色border-bottom:5xso1.idffftX);border-1.eft设置左边框粗细为5px实线#«X)颜色border-1.eft:5pxSO1.id"TOO:border设置所有的边框的样式SPX实妓#100border:5pxso1.idfff(X):属性说明margino设置上外近距margin-top:20px;margin-right设置右外边距margin-right：20px;mafinbouom设置下外边距nargin-bo<on:20px;magin-1.eft设S1.左外边距margin-1.eft:20px;margin设置上右下左四个边的外边距margin:20px:设置上下外边用为20px设置左右外边版为IOPXmargin:20pxIOpx;设置上外边距为IOPX设置左右外边柜为20px设过下外边距为30pxmargin:IOpx20px30px;设置上外边距为IoPX设置右外边距为20px设置卜外边柜为30px设置做外边作为40PXmargin:IOpx20px3（）px4f1.px;外边距有一个非常特殊的现象-外边距吞咻,当两个元素属干上卜相领时,如果有上方的元素的卜外边距与下方元素的上外边距接触时.两个元素之间的距离并不足两个外边即之和.而是其两者中的矮大（ft.可以理解为在垂直方向上大的外边距吞噬了小的相邻外边距，注意这种情况只发生在垂直方向上。新课讲解4：【约15分钟】教师；盒子模型不仅仅能够实现简单的周国边距设定，还有一个更重的用途一一块状元索水平居中.我们来让一个图片出现在页面中的水平中间.实现方法很简单,只要满足如下条件即可：I.要水平居中的元素使块状元素或者被转换成的块状元素,2.需要设定左右边外边距同时为au1.。，UUu）表示自动适应空余空间,当两边都为自动适应是.会自动平分所在行内的空间,自然就形成了水平居中的效果.（案例演示）新课讲斛5：【约S分钟】教师：与外边儿相时应，内边距（PaIk1.inQ,也叫做内填充区域,用于控肌内容与边框之间的如青，以便精确控制内容在盒子中的位附。内边距与外边距一样也分为上右右下四个方向的内边距.设置方式和设置联序也基本相同。新课讲斛6：【约30分钟】浏M内容区域（content）.是元素所包含的内容区域,以认情况下由所包含内容的大小来淡定内容区域的变高：也可以通过*dth、heigh榭性方式进行设Z1.指定内容区域的W.淄加了边框、内边踉和外边距后不会影响内容区域的尺寸，但是会增加盒子模里的总尺寸.盒子模型的尺寸对于页面布局十分兔要.我们对于盆子模型的计$*也十分史婴.在W3C标准盒子模型中，我们将包含外边及、边框、内边框与内容的区域称作完整;ftR元素宽应对应内容宽度，由此我们有如下的公式；充整盒子的宜=左外边距+左动抬度度左内边距+元重宽度÷右内边距+右边播嵬度+右外边苑完整盒子的高=上外边电+上边隹宽度+上内边距+元素宽度+下内边距+下边框宽度+下外边距新课讲解7：【约30分科】教师：以上我们涉及到的盒子模型是W5C标准的盒子模型,但是在IE浏览器中并不是以标准盒子模型作为标准,而是如下方的IE自子模型：margintopborder-toppadding-topborder-bottom11urginbottomheightboaer1.eftPadd5gocontentpaddingbottomPadd三xrxzbordeTaghTmarg-ni.ghtwidth我们可以与W3C标准#子模型对比，IE盆子模型的区别在于是其元素宽度/高度并不是内容宽度/高度,而是内容宽度/裔度+左右/上下内边用+4：右，上下边框宽度。该模型并非旨在IE中存在,在同ch2me内核的浏览器中,也可通过设定box-sizing属件进行更改,从而是指定元素的盆子模型从W3C标准盘子模型转换到IE盒尸模型.box-sizing设定元素为W3C标准盒于模型可除IE浏览器的的主流浏览器中为默认值content-box;设定元素为IE盘子模型border-box;IE盆子模型的尺寸计算公式如下：IE盒子模型完整的宽=左外边距+元素宽度+右外边柜元素宽度=左边框宽度+左内边距+内容宽度+右内边距+右边框宽度IE盒子模里完整的庙=上外边距+元素高度+下外边距元素而度=上边推宽度+上内边距+内容高度+下内边距+下边框宽度新课讲解8：【约30分钟】我师：在页面中有盒子模型构成的相邻边框的夹角默认是且角，篇一律,为了改善这种单词的样式，在之前的开发过程中是通过引入图片内容为包含EI角的图片，来表现非直角边框，但是施之而来的何题就足,提供的图片不定与实际的元素大小匹配,需要使用作图工具根据使用情况进行网整不能灵活适应页面,引用图片而且会造成网络资源的浪费。所以CSS3标准中，提出一个圆角属性boMerMadiUS,专门来解决以上问喙利用bo11kr-radius屉件除了可以实现元索的网角效果外,也可以制作一些特殊的图形效果，如曲形、半圆形、扇形等.（案例演示）学生：跟做新课讲解9：【约30分钟】教师：盒f阴影，box-shadow也是CSS3新增的一个曳要属性，用来定义元素的盒/阴影,下面就详细地介绍box-shadow词性及其使用。其语法构成如下：box-shadow阴影类型，可选f,如果不设捏.默认的投影方式及外阴影；如果设置了inset表示是内阴影.x-offse1.X轴位移,用来指定阳影水平位移量,其值可以是正值.也可以是负值,如果为正位，阴影在对象的右边，反之阴后在对象的左边。y-offsc1.）轴位移.用来指定阴影垂直位移1.其值可以是正伯，也可以是负值，如果为正值，阴膨在对象的底部，反之阴影在对象的顶部。b1.ur-radius阴影模糊半径，代表阴影向外模糊的模糊范印值越大阴影向外模物的范围越大,胡影的边缘就越模糊.这个值只能是正值，如果为0,衣示不具有模糊效%.是可选值。co1.or阴影颓色，定义绘制阴影时所使用的颜色.阴影颜色可以是卜六进制颜色、RGB.RGBA透明色等,不写这个值会用浏览器的默认色代售，由于浏览器默认颜色不一样，因此建议不要省略这个值.通过一个案例,来看具体的效果。.（案例演示）学生:跟做新课讲解10：【约20分钟】我师：演示操作上机任务制作课程视频列去学生：雄做新课讲斛II：【约20分钟】敦加演示操作上机仔务-美化用户登录页面学生：跟做新课讲解12：【约20分钟】教师；演示操作上机仔务-美化用户注册面学生：跟做三、教学总结【的5分钟】本单元主要讲述盒子模型的概念，盒子模型的组成和相关属性，然后讲述了盒子模型特殊属性实现例角边框.制作半网、阴影等特殊效果.并且完成了新云课堂项目徵录页面、注册页面的美化，通过本单元的学习，读者应该了解CSS盒子模型的构成及相关属性,熟练应用盒子模型捽制页面中的元索,盒子模型是CSS的重要内容，读者应该多加练习,加深理解.四、课后作业【妁5分林】I.整理课程知识笔记2.尝试完成犷展实践,参考效果图制作圆形双乐按钮.