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

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