《网站前端技术》教案第15课CSS与CSS3(六).docx

上传人:p** 文档编号:758371 上传时间:2024-02-26 格式:DOCX 页数:15 大小:203.24KB
下载 相关 举报
《网站前端技术》教案第15课CSS与CSS3(六).docx_第1页
第1页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第2页
第2页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第3页
第3页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第4页
第4页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第5页
第5页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第6页
第6页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第7页
第7页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第8页
第8页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第9页
第9页 / 共15页
《网站前端技术》教案第15课CSS与CSS3(六).docx_第10页
第10页 / 共15页
亲,该文档总共15页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

《《网站前端技术》教案第15课CSS与CSS3(六).docx》由会员分享,可在线阅读,更多相关《《网站前端技术》教案第15课CSS与CSS3(六).docx(15页珍藏版)》请在第壹文秘上搜索。

1、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)一头脑风暴(I

2、Omin)第2节课:问题导入(5min)一传授新知(25min)一上机操作(IOmin)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系,让其提醒同学通过APP或其他学习软件,完成课前任务请大家了解CSS表格控制、列表控制、多列控制属性,以及CSS过渡的相关内容。通过课前任务,使学生了解本次课的主要内容,增加【学生】完成课前任务学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性,掌握学生的出勤情况问题导入(5min)【教师】提出以下问题CSS的控制功能包括哪

3、些内容?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法,引导学生主动思考,激发学生的学习兴趣传授新知(28min)3.11CSS表格控制【教师】讲解表格控制的相关属性3.11.1 边框合并border-collapse【课堂互动】中【教师】提问通过教师讲解、课堂互动、演示操作等方式,使学生了解CSS表格控制和列表控制各属性的使用方法边框合并属性有什么作用?十【学生】聆听、思考、回答属性名称:border-colIapsee属性的值:collapse.属性作用:将表格边框和单元格边框折叠为单一边框,即合并边框.【示例3-11-1在HTML文档标签内布局以下表格元素:

4、VCaPliOn课程表VcaptionVldxdvtd星期一星期二vtd星期三星期四星期五(详见教材)在文档style*示签内写入CSS选择器,定义选择器样式:(I)控制通配选择器:计算盒子尺寸方式为包含边框,字体大小为14px(2)控制表格元素:边框为1px、实心线、蓝色;外边距上下为0、左右为auto(3)控制标题元素:字体为20px;高度为40px,行高为40px,实现文本垂直居中。(4)控制单元格元素:边框同表格边框;宽度为IoOPX、高度为40px。【教师】组织学生分组上机完成上面的任务,井在各组中挑选一位学生进行演示,演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt

5、展示“表格初始样式”图片(详见教材),并讲解【示例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:【教师

6、】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示,演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“设置单元格边框间距效果”图片(详见教材),并讲解效果:与【示例3-11/】效果相比,单元格边框间距离增大为IOpxe3.11.3 标题位置caption-side【教师】讲解标题位置caption-side【课堂互动】十【教师】提问标题位置属性包括哪些值?十【学生】聆听、思考、回答属性名称:caption-side属性的值:top(顶端)Ibottom(底端)Iinherit(继承).属性作用:设置标题位于表格的顶端或底端。【示例3-H-4为【示例3-11-3

7、表格标题标签选择器caption添加声明:caption-side:bottom;【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示,演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”标题位置属性设置效果”图片(详见教材),并讲解效果:与【示例3-11-3】效果相比,标题位于表格的下方。3.11.4 单元格文本垂直对弁VertiCal-align【教师】讲解单元格文本垂直对齐VertiCaI-align【课堂互动】十【教师】提问单元格文本垂直对齐属性有哪些值?【学生】聆听、思考、回答属性名称:vertical-align属性的值:top(顶端)botto

8、m(底端)Imiddle(居中)Iinherit(继承).属性作用:设置单元格内容在垂直方向的对齐方式.【示例3-H-5为【示例3-11-4单元格标签选择器td添加声明:vertical-align:top;text-align:center;【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示,演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示单元格对齐属性设置效果”图片(详见教材),并讲解效果:与【示例3-11-4】效果相比,单元格文本垂直顶端对齐、水平居中.【学生】聆听、记录、理解3.12CSS列表控制【教师】讲解列表控制的相关属性【课堂互动】中【教师

9、】提问标记类型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-

10、style-position),属性的值:Ouisidelinsidelinherile(I)outside:默认值。列表项标记放置在文本以外的左侧,且环绕文本不根据标记对齐。(2)inside:列表项标记放置在文本以内,且环绕文本根据标记对齐.(3)inherit:从父元素继承list-style-position属性的值。属性作用:指定列表项标记的位置。【示例3-12-1编辑HTML文档标签的内容,代码如下:我的爱好:vli足球vli棒球网球在VSIyIe内写入ul选择器:ullist-style-imagezurl(imgstr.jpg);Iist-StjrIe-Positioniins

11、ide;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如果

12、缺少上述属性值之一,则将插入缺失属性的默认值。【学生】聆听、记录、理解头脑风暴(10min)【教师】按照之前的分组,提出头脑风暴主题根据各队伍的网站主题,讨论如何使用本节课中border-collapse,border-spacing,caption-side、vertical-alignIist-Style-IypexIiS卜SIyle-image、list-style-posilion等属性。【学生】思考、讨论通过头脑风暴的形式,活跃课堂气氛,引发学生思考,培养学生的创新能力和团队精神第二节课问题导入(5min)【教师】提出以下问题什么是CSS多列控制?【学生】思考、举手回答通过提问引导学

13、生思考本节课内容传授新知(25min)3.13CSS多列控制【教师】讲解CSS多列控制的相关属性【课堂互动】中【教师】提问CSS多列控制属性有什么作用?十【学生】聆听、思考、回答属性名称:column-count,属性的值:列数。属性作用:将元素中的文本内容设为多列(多栏)显示。【示例3-13-1编辑HTML文档标签的内容,代码如下:通过教师讲解、课堂互动、演示操作等方式,使学生了解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展示“多列控

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > Web服务

copyright@ 2008-2023 1wenmi网站版权所有

经营许可证编号:宁ICP备2022001189号-1

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知第壹文秘网,我们立即给予删除!