《网站前端技术》教案第15课CSS与CSS3（六）.docx
LO-.!e5*.三z1点.、U*型.源£口三年W&“"隹"一:e三三?-'Ji4虻gH¾"课题'.W>«.r'','-k.、第1课CSSgCSS3(r)I课时2课时(90min)教学目标知识技能目标：熟悉CSS样式中的表格控制、列表控制、多列控制属性，以及CSS过渡素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS表格控制、列表控制教学难点：CSS多列控制、CSS过渡教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（IOmin）第2节课：问题导入（5min）一传授新知（25min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解CSS表格控制、列表控制、多列控制属性，以及CSS过渡的相关内容。通过课前任务，使学生了解本次课的主要内容，增加【学生】完成课前任务学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题CSS的控制功能包括哪些内容?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）3.11CSS表格控制【教师】讲解表格控制的相关属性3.11.1 边框合并border-collapse【课堂互动】中【教师】提问通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS表格控制和列表控制各属性的使用方法边框合并属性有什么作用？十【学生】聆听、思考、回答属性名称:border-colIapsee属性的值：collapse.属性作用：将表格边框和单元格边框折叠为单一边框，即合并边框.【示例3-11-1在HTML文档<body>标签内布局以下表格元素：<table>VCaPliOn>课程表Vcaption><tr>Vldxd>vtd>星期一<d><ld>星期二vtd><td>星期三<td><td>星期四<tdxtd>星期五<d><tr><tr>(详见教材)在文档style*示签内写入CSS选择器，定义选择器样式：(I)控制通配选择器：计算盒子尺寸方式为包含边框，字体大小为14px(2)控制表格元素：边框为1px、实心线、蓝色；外边距上下为0、左右为auto(3)控制标题元素：字体为20px；高度为40px,行高为40px,实现文本垂直居中。(4)控制单元格元素：边框同表格边框；宽度为IoOPX、高度为40px。【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“表格初始样式”图片(详见教材)，并讲解【示例3-11-2为【示例3-11-1表格标签选择器table添加声明：border-collapse:collapse;【教师】ppt展示“表格边框合并效果”图片(详见教材)，并讲解效果：将所示表格的边框和单元格边框折叠为单一边框，即边框合并。3.11.2 分隔单元格边框距离border-spacing属性名称:border-spacing.属性的值：单元格边框间距离。属性作用：设置表格中单元格边框之间的距离，仅用于"边框分离”模式.【示例3-11-3为【示例3-11-1表格标签选择器table添加声明：border-spacing:1Opx:【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“设置单元格边框间距效果”图片(详见教材)，并讲解效果：与【示例3-11/】效果相比，单元格边框间距离增大为IOpxe3.11.3 标题位置caption-side【教师】讲解标题位置caption-side【课堂互动】十【教师】提问标题位置属性包括哪些值？十【学生】聆听、思考、回答属性名称：caption-side属性的值：top（顶端）Ibottom（底端）Iinherit（继承）.属性作用：设置标题位于表格的顶端或底端。【示例3-H-4为【示例3-11-3表格标题标签选择器caption添加声明：caption-side:bottom;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”标题位置属性设置效果”图片（详见教材），并讲解效果：与【示例3-11-3】效果相比,标题位于表格的下方。3.11.4 单元格文本垂直对弁VertiCal-align【教师】讲解单元格文本垂直对齐VertiCaI-align【课堂互动】十【教师】提问单元格文本垂直对齐属性有哪些值？【学生】聆听、思考、回答属性名称：vertical-align属性的值：top（顶端）bottom（底端）Imiddle（居中）Iinherit（继承）.属性作用：设置单元格内容在垂直方向的对齐方式.【示例3-H-5为【示例3-11-4单元格标签选择器td添加声明:vertical-align:top;text-align:center;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示"单元格对齐属性设置效果”图片（详见教材），并讲解效果：与【示例3-11-4】效果相比，单元格文本垂直顶端对齐、水平居中.【学生】聆听、记录、理解3.12CSS列表控制【教师】讲解列表控制的相关属性【课堂互动】中【教师】提问标记类型list-style-type属性有什么作用？十【学生】聆听、思考、回答属性名称：list-style-type.属性的值：同各类型列表标签属性IyPe的值。属性作用：指定列表项标记的类型，替代标签属性type。3.12.2 标记图片Iist-style-image属性名称：list-style-image属性的值：URL(图像路径)noneinheri.属性作用：将图像指定为列表项标记。3.12.3 标记定位list-style-position【课堂互动】+【教师】提问标记定位list-style-position属性包括哪些值?十【学生】聆听、思考、回答属性名称：list-style-position),属性的值：Ouisidelinsidelinherile(I)outside：默认值。列表项标记放置在文本以外的左侧，且环绕文本不根据标记对齐。(2)inside:列表项标记放置在文本以内，且环绕文本根据标记对齐.(3)inherit：从父元素继承list-style-position属性的值。属性作用：指定列表项标记的位置。【示例3-12-1编辑HTML文档<body>标签的内容，代码如下：<ul>我的爱好：vli>足球vli><li>棒球<li><li>网球<li><ul>在VSIyIe>内写入ul选择器：ullist-style-imagezurl(imgst<r.jpg);Iist-StjrIe-Positioniinside;font-size:20px;【教师】PPt展示图片“列表控制标记位置效果”(详见教材)并讲解*效果：如图（a）所示。如果将ul选择器中的list-style-position属性值改写为如下代码，则效果如图（b）所示。list-style-position:outside;3.12.4标记式简写list-style【课堂互动】）【教师】提问标记样式简写list-style属性有什么作用？【学生】聆听、思考、回答同时设置标记样式、标记定位和标记图片。在使用简写属性时，属性值的顺序为：list-style-typeIiSl-StyIe-POSitionlist-style-image如果缺少上述属性值之一，则将插入缺失属性的默认值。【学生】聆听、记录、理解头脑风暴（10min）【教师】按照之前的分组，提出头脑风暴主题根据各队伍的网站主题,讨论如何使用本节课中border-collapse,border-spacing,caption-side、vertical-alignIist-Style-IypexIiS卜SIyle-image、list-style-posilion等属性。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题什么是CSS多列控制？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知（25min）3.13CSS多列控制【教师】讲解CSS多列控制的相关属性【课堂互动】中【教师】提问CSS多列控制属性有什么作用？十【学生】聆听、思考、回答属性名称：column-count,属性的值：列数。属性作用：将元素中的文本内容设为多列（多栏）显示。【示例3-13-1编辑HTML文档<body>标签的内容，代码如下：<pid="more-Hst”>通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS多列控制、CSS过渡各属性的使用方法“一=“一一-人民网北京2月24日电（记者刘阳）国家发展改革委近日发出通知,决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。（详见教材）在文档3yle标签内写入选择器：*box-sizing:border-box;font-size:16px;margin:40px;#more-listwidth:600px;heighcauto;【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“多列控制属性设置前效果”图片（详见教材），并讲解效果：#more-lisl段落标签的内容正常显示.【示例3-13-2】为【示例3/3-1】的#010直-上1选择器添加声明：CoIUmn-CoUnt:3;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”设置三列显示效果”图片（详见教材），并讲解效果：文本分为三列显示。3.13.2列之间的间隔column-gap【课堂互动】十【教师】提问列之间的间隔column-gap属性有什么作用？十【学生】聆听、思考、回答属性名称：column-gap.属性的值：列之间的间隔值。属性作用：设置多列文本的列间距。【示例3-13-3为【示例3-13-2】的#1110©上1选择器添加声明：column-gap:40px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示”列间距设置效果”图片（详见教材），并讲解效果：与图3-13-2相比，列间距增大为40px3.13.3列之间的分割线COIUmn-rule属性作用：设置多列文本之间分隔线的宽度、线型、颜色。该属性可以分别设置分隔线的宽度column-rule-width,线型COlUmn-rule-style、颜色column-ule-color其中column-rule-style的属性值包括：none（无）、hidden（隐藏）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、grve（凹型线）、ridge（凸型线）、insei（嵌入式）、outset（嵌出式）.【示例3-13-4】为【示例3-13-3】的#more-list选择器添加声明：column-rule:3pxdashedblue;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“分隔线设置效果”图片（详见教材），并讲解效果：与图3-13-3相比，多列文本之间添加了3px的蓝色虚线分隔线。【学生】聆听、记录、理解3.14CSS过渡【教师】讲解CSS多列控制的相关属性【课堂互动】【教师】提问什么是CSS过渡？1.1.1 聆听、思考、回答在CSS样式中，过渡是指同一个元素从一种状态到另一种状态变化的动画效果。1.1.2 过渡效果应用的属性transition-property属性名称：IranSiIiOn-PrOPertyo属性作用：规定应用过渡效果的CSS属性的名称，当指定的CSS属性改变时，过渡效果开始。过渡效果通常应用在用户将鼠标指针浮动在元素上方的时刻。属性的值：noneallproperty1.1.3 ）none：没有属性会获得过渡效果。1.1.4 ）all：所有属性都!钺得过渡效果。1.1.5 ）property：应用过渡效果的CSS属性名称列表，列表内容以逗号分隔。1.1.6 过渡效果花费的时间transition-duration属性名称：transition-durationt属性作用：规定完成过渡效果需要花费的时间。属性的值：花费时间。以秒s或毫秒ms为单位。【示例3-14-1】编辑HTML文档body标签的内容，代码如下："2请把鼠标移动至1小，就可以看到过渡效果。div在文档的slyle标签内写入选择器：background:blue;transition-property:width;transition-duration:5s;div:hoverwidth:300px;background-color:red;【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：当鼠标浮于div元素上方，元素颜色立刻改变为红色，元素宽度用5S的匀速由100px增宽iJ300PX；当鼠标离开div元素，元素颜色立刻改变为蓝色，元素宽度用5s的均速由300px变窄至I(X)PX。1.1.7 过渡效果的速度曲线IranSition-timing-funct沁n属性名称：IranSilion-Iiming-function。属性作用：规定过渡效果的速度变化。属性的值：lineareaseease-inease-outcubic-bezier(n,n,n,n)。(1)Iinear：默认值，过渡效果从开始到结束都是相同速度。(2)ease：过渡效果以慢速开始，中间加速，以慢速结束。(3)ease-in:过渡效果以慢速开始。(4)ease-out：过渡效果以慢速结束。(5)ease-in-out：过渡效果以慢速开始和结束。(6)cubic-bezier(n,n,n,n)：在cubic-bezier函数中自定义过渡效果速度曲线，一般很少用到。【示例3-14-2为【示例3-14-1中的div选择器添加声明：transition-timing-function:ease;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：鼠标浮于div元素上方时，元素立即变为红色；元素宽度用5s,以先慢后快再慢的速度从10()PX增宽至30()px.鼠标离开div元素，元素立即变为蓝色；元素宽度用5s,以先慢后快再慢的速度从300PX变窄至100pxo1.1.8 过渡效果的等待时间transition-delay属性名称：transition-delay.属性作用：规定开始过渡前的等待时间。属性的值：时间.一般以秒S或毫秒ms为单位.【示例3-14-3为【示例3-14-2中div选择器添加声明：transition-delay:1s;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：鼠标浮于div元素上方时，元素立即变为红色；等待IS后，元素宽度用5s,以先慢后快再慢的速度从100px增宽至300px鼠标离开div元素，元素立即变为蓝色；等待IS后，元素宽度用5s,以先慢后快再慢的速度从300PX变窄至100px1.1.9 过渡属性transition>»属性作用：一个简写属性，用于同时设置前面介绍的四个过渡属性。属性的值：transition-propertytransition-durationtransition-timing-functiontransition-delay其中transition-property和transition-duration属性为必须有的属性，否则不产生过渡效果。【示例3-14-4修改【示例3-14-3中div选择器的声明：divwidth:100px;height:100x;background:blue;transition:width5seaseIs;效果：完全同【示例3-14-3】效果。【学生】聆听、记录、理解上机操作(10min)【教师】组织学生分组讨论，上机完成以下任务在之前创建的COUrSe.html文件中写入CSS选择器，其中定义选择器样式如下：(I)控制通配选择器：计算盒子尺寸方式为包含边框，字体大小为15px(2)控制表格元素：边框为2px、实心线、蓝色；外边距上下为0、左右为auto(3)控制标题元素：字体为18px；高度为40PX,行高为40px,实现文本垂直居中。(4)控制单元格元素：边框同表格边框；宽度为80px、高度为3()px.。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了CSS表格控制、列表控制、多列控制、CSS过渡的相关属性，希望通过本节课的讲解，大家可以掌握这几种控制功能的使用方法，提升操作技能。【学生】总结回顾知识点总结知识点，IH固学生对CSS表格控制、列表控制、多列控制、CSS过渡等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的border-collapse,border-spacingsCaPtion-Side、vertical-alignxIiSt-StyIe-type、IiSt-StyIe-image、list-style-position等属性进行设计，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课效果不错，学生积极参与到教学活动中，而且能帮助组内同学一起学习。教学上，应本着"授之鱼不如授之以渔"的宗旨，注重对学生能力的培养，不仅要教会他们知识，还要让他们在学习过程中掌握有效的学习方法。属性名称：transition.
