《网站前端技术》（梁玲）621-7 教案 第15课 CSS与CSS3（六）_第1页
《网站前端技术》（梁玲）621-7 教案 第15课 CSS与CSS3（六）_第2页
《网站前端技术》（梁玲）621-7 教案 第15课 CSS与CSS3（六）_第3页
《网站前端技术》（梁玲）621-7 教案 第15课 CSS与CSS3（六）_第4页
《网站前端技术》（梁玲）621-7 教案 第15课 CSS与CSS3（六）_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

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

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第15课CSS与CSS3（六）课时2课时（90min）教学目标知识技能目标：熟悉CSS样式中的表格控制、列表控制、多列控制属性，以及CSS过渡素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS表格控制、列表控制教学难点：CSS多列控制、CSS过渡教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（28min）→头脑风暴（10min）第2节课：→传授新知（25min）→上机操作（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解CSS表格控制、列表控制、多列控制属性，以及CSS过渡的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题CSS的控制功能包括哪些内容？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（28min）3.11CSS表格控制【教师】讲解表格控制的相关属性3.11.1边框合并border-collapse【课堂互动】✈【教师】提问边框合并属性有什么作用？✈【学生】聆听、思考、回答属性名称：border-collapse。属性的值：collapse。属性作用：将表格边框和单元格边框折叠为单一边框，即合并边框。【示例3-11-1】在HTML文档<body>标签内布局以下表格元素：<table> <caption>课程表</caption> <tr><td></td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td> </tr> <tr>……（详见教材）在文档<style>标签内写入CSS选择器，定义选择器样式：（1）控制通配选择器：计算盒子尺寸方式为包含边框，字体大小为14px。（2）控制表格元素：边框为1px、实心线、蓝色；外边距上下为0、左右为auto。（3）控制标题元素：字体为20px；高度为40px，行高为40px，实现文本垂直居中。（4）控制单元格元素：边框同表格边框；宽度为100px、高度为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:10px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“设置单元格边框间距效果”图片（详见教材），并讲解效果：3.11.3标题位置caption-side【教师】讲解标题位置caption-side【课堂互动】✈【教师】提问标题位置属性包括哪些值？✈【学生】聆听、思考、回答属性名称：caption-side。属性的值：top（顶端）|bottom（底端）|inherit（继承）。属性作用：设置标题位于表格的顶端或底端。【示例3-11-4】为【示例3-11-3】表格标题标签选择器caption添加声明：caption-side:bottom;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“标题位置属性设置效果”图片（详见教材），并讲解效果：与效果相比，标题位于表格的下方。3.11.4单元格文本垂直对齐vertical-align【教师】讲解单元格文本垂直对齐vertical-align【课堂互动】✈【教师】提问单元格文本垂直对齐属性有哪些值？✈【学生】聆听、思考、回答属性名称：vertical-align。属性的值：top（顶端）|bottom（底端）|middle（居中）|inherit（继承）。属性作用：设置单元格内容在垂直方向的对齐方式。【示例3-11-5】为【示例3-11-4】单元格标签选择器td添加声明：vertical-align:top;text-align:center;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“单元格对齐属性设置效果”图片（详见教材），并讲解效果：与【示例3-11-4】效果相比，单元格文本垂直顶端对齐、水平居中。【学生】聆听、记录、理解3.12CSS列表控制【教师】讲解列表控制的相关属性3.12.1标记类型list-style-type【课堂互动】✈【教师】提问标记类型list-style-type属性有什么作用？✈【学生】聆听、思考、回答属性名称：list-style-type。属性的值：同各类型列表标签属性type的值。属性作用：指定列表项标记的类型，替代标签属性type。3.12.2标记图片list-style-image属性名称：list-style-image。属性的值：URL(图像路径)|none|inherit。属性作用：将图像指定为列表项标记。3.12.3标记定位list-style-position【课堂互动】✈【教师】提问标记定位list-style-position属性包括哪些值？✈【学生】聆听、思考、回答属性名称：list-style-position。属性的值：outside|inside|inherit。（1）outside：默认值。列表项标记放置在文本以外的左侧，且环绕文本不根据标记对齐。（2）inside：列表项标记放置在文本以内，且环绕文本根据标记对齐。（3）inherit：从父元素继承list-style-position属性的值。属性作用：指定列表项标记的位置。【示例3-12-1】编辑HTML文档<body>标签的内容，代码如下：<ul>我的爱好： <li>足球</li> <li>棒球</li> <li>网球</li></ul>在<style>内写入ul选择器：ul{ list-style-image:url(img/star.jpg); list-style-position:inside; font-size:20px;}【教师】ppt展示图片“列表控制标记位置效果”（详见教材）并讲解效果：如图（a）所示。如果将ul选择器中的list-style-position属性值改写为如下代码，则效果如图（b）所示。list-style-position:outside;3.12.4标记样式简写list-style【课堂互动】✈【教师】提问标记样式简写list-style属性有什么作用？✈【学生】聆听、思考、回答同时设置标记样式、标记定位和标记图片。在使用简写属性时，属性值的顺序为：list-style-typelist-style-positionlist-style-image如果缺少上述属性值之一，则将插入缺失属性的默认值。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS表格控制和列表控制各属性的使用方法头脑风暴（10min）【教师】按照之前的分组，提出头脑风暴主题根据各队伍的网站主题，讨论如何使用本节课中border-collapse、border-spacing、caption-side、vertical-align、list-style-type、list-style-image、list-style-position等属性。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题什么是CSS多列控制？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（25min）3.13CSS多列控制【教师】讲解CSS多列控制的相关属性【课堂互动】✈【教师】提问CSS多列控制属性有什么作用？✈【学生】聆听、思考、回答属性名称：column-count。属性的值：列数。属性作用：将元素中的文本内容设为多列（多栏）显示。【示例3-13-1】编辑HTML文档<body>标签的内容，代码如下：<pid="more-list">人民网北京2月24日电(记者刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。……（详见教材）在文档<style>标签内写入选择器：*{box-sizing:border-box; font-size:16px; margin:40px;}#more-list{width:600px; height:auto;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“多列控制属性设置前效果”图片（详见教材），并讲解效果：#more-list段落标签的内容正常显示。【示例3-13-2】为【示例3-13-1】的#more-list选择器添加声明：column-count:3;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“设置三列显示效果”图片（详见教材），并讲解效果：文本分为三列显示。3.13.2列之间的间隔column-gap【课堂互动】✈【教师】提问列之间的间隔column-gap属性有什么作用？✈【学生】聆听、思考、回答属性名称：column-gap。属性的值：列之间的间隔值。属性作用：设置多列文本的列间距。【示例3-13-3】为【示例3-13-2】的#more-list选择器添加声明：column-gap:40px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“列间距设置效果”图片（详见教材），并讲解效果：与图3-13-2相比，列间距增大为40px。3.13.3列之间的分割线column-rule属性名称：column-rule。属性的值：分隔线宽度分隔线线型分隔线颜色。属性作用：设置多列文本之间分隔线的宽度、线型、颜色。该属性可以分别设置分隔线的宽度column-rule-width、线型column-rule-style、颜色column-rule-color。其中column-rule-style的属性值包括：none（无）、hidden（隐藏）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹型线）、ridge（凸型线）、inset（嵌入式）、outset（嵌出式）。【示例3-13-4】为【示例3-13-3】的#more-list选择器添加声明：column-rule:3pxdashedblue;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“分隔线设置效果”图片（详见教材），并讲解效果：与图3-13-3相比，多列文本之间添加了3px的蓝色虚线分隔线。【学生】聆听、记录、理解3.14CSS过渡【教师】讲解CSS多列控制的相关属性【课堂互动】✈【教师】提问什么是CSS过渡？✈【学生】聆听、思考、回答在CSS样式中，过渡是指同一个元素从一种状态到另一种状态变化的动画效果。3.14.1过渡效果应用的属性transition-property属性名称：transition-property。属性作用：规定应用过渡效果的CSS属性的名称，当指定的CSS属性改变时，过渡效果开始。过渡效果通常应用在用户将鼠标指针浮动在元素上方的时刻。属性的值：none|all|property。（1）none：没有属性会获得过渡效果。（2）all：所有属性都将获得过渡效果。（3）property：应用过渡效果的CSS属性名称列表，列表内容以逗号分隔。3.14.2过渡效果花费的时间transition-duration属性名称：transition-durationt。属性作用：规定完成过渡效果需要花费的时间。属性的值：花费时间。以秒s或毫秒ms为单位。【示例3-14-1】编辑HTML文档<body>标签的内容，代码如下：<div>请把鼠标移动到div，就可以看到过渡效果。</div>在文档的<style>标签内写入选择器：div{width:100px; height:100px; background:blue; transition-property:width; transition-duration:5s;}div:hover{width:300px; background-color:red;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：变窄至100px。3.14.3过渡效果的速度曲线transition-timing-function属性名称：transition-timing-function。属性作用：规定过渡效果的速度变化。属性的值：linear|ease|ease-in|ease-out|cubic-bezier（n,n,n,n）。（1）linear：默认值，过渡效果从开始到结束都是相同速度。（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，以先慢后快再慢的速度从100px增宽至300px。鼠标离开div元素，元素立即变为蓝色；元素宽度用5s，以先慢后快再慢的速度从300px变窄至100px。3.14.4过渡效果的等待时间transition-delay属性名称：transition-delay。属性作用：规定开始过渡前的等待时间。属性的值：时间。一般以秒s或毫秒ms为单位。【示例3-14-3】为【示例3-14-2】中div选择器添加声明：transition-delay:1s;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：鼠标浮于div元素上方时，元素立即变为红色；等待1s后，元素宽度用5s，以先慢后快再慢的速度从100px增宽至300px。鼠标离开div元素，元素立即变为蓝色；等待1s后，元素宽度用5s，以先慢后快再慢的速度从300px变窄至100px。3.14.5过渡属性transition属性名称：transition。属性作用：一个简写属性，用于同时设置前面介绍的四个过渡属性。属性的值：transition-propertytransition-durationtransition-timing-functiontransition-delay。其中transition-property和transition-duration属性为必须有的属性，否则不产生过渡效果。【示例3-14-4】修改【示例3-14-3】中div选择器的声明：div{width:100px; height:100px; background:blue; transition:width5sease1s;}效果：完全同【示例3-14-3

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

温馨提示

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

最新文档

评论

0/150

提交评论