欢迎来到第壹文秘! | 帮助中心 分享价值,成长自我!
第壹文秘
全部分类
  • 幼儿/小学教育>
  • 中学教育>
  • 高等教育>
  • 研究生考试>
  • 外语学习>
  • 资格/认证考试>
  • 论文>
  • IT计算机>
  • 法律/法学>
  • 建筑/环境>
  • 通信/电子>
  • 医学/心理学>
  • ImageVerifierCode 换一换
    首页 第壹文秘 > 资源分类 > DOCX文档下载
    分享到微信 分享到微博 分享到QQ空间

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

    • 资源ID:758371       资源大小:203.24KB        全文页数:15页
    • 资源格式: DOCX        下载积分:5金币
    快捷下载 游客一键下载
    账号登录下载
    三方登录下载: 微信开放平台登录 QQ登录
    下载资源需要5金币
    邮箱/手机:
    温馨提示:
    快捷下载时,如果您不填写信息,系统将为您自动创建临时账号,适用于临时下载。
    如果您填写信息,用户名和密码都是您填写的【邮箱或者手机号】(系统自动生成),方便查询和重复下载。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

    加入VIP,免费下载
     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    《网站前端技术》教案第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展示“多列控

    注意事项

    本文(《网站前端技术》教案第15课CSS与CSS3(六).docx)为本站会员(p**)主动上传,第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知第壹文秘(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

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

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

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

    收起
    展开