《web前端技术》 教案 第10课 CSS的列表和超链接属性.pdf

该【《web前端技术》 教案 第10课 CSS的列表和超链接属性 】是由【青山代下】上传分享，文档一共【5】页，该文档可以免费在线阅读，需要了解更多关于【《web前端技术》 教案 第10课 CSS的列表和超链接属性 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:..第10课CSS3的列表属性和超链接属性课时90min)知识技能目标:(1)掌握设置列表相关属性的方法(2)掌握设置超链接相关属性的方法(3)掌握设置鼠标样式的方法教学目标素质目标:(1)学****CSS3中列表和超链接的常用属性,增加知识储备,锻炼思维能力(2)体验丰富的案例,养成理论与实践相结合的良好****惯(3)感受国家强大,增强民族自豪感,提升民族自信心教学重点:设置列表相关属性的方法、设置超链接相关属性的方法教学重难点教学难点:设置鼠标样式的方法教学方法问答法、讨论法、讲授法、实践练****法、演示法教学用具电脑、投影仪、多媒体课件、教材、第1节课:课前任务→考勤(2min)→问题导入(3min)→传授新知(15min)→实战演练(15min)→实战拓展(10min)教学设计第2节课:问题导入(5min)→传授新知(15min)→实战演练(10min)→实战拓展(10min)→课堂小结(3min)→作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课【教师】布置课前任务,和学生负责人取得联系,让其提醒同学通过APP或其他学通过课前任****软件,完成课前任务务,让学生提前预了解CSS的列表属性和超链接属性,从网上找多种网页案例查看原代码,查看其中课前任务****知识点,了解CSS相关属性的设置CSS的列表属性和超链接属性【学生】完成课前任务【教师】使用APP进行签到培养学生的考勤组织纪律性,掌握(2min)【学生】按照老师要求签到学生的出勤情况【教师】提出问题通过问题导在上次课中,我们学****了网页的文本和图像美化,这节课我们将要继续学****网页问题导入入的方法,引导学的列表的设置,同学们想一想,列表可以进行哪些方面的美化?(3min)生主动思考,激发【学生】思考、举手回答学生的学****兴趣【教师】通过学生的回答引入要讲的知识传授新知通过教师的列表属性(15min)讲解使学生了解1:..list-style-type的属性值CSS3设置列表样式的方法及说明”辅助理解提供了一些属性,用于设置列表中列表项的项目符号类型、位置和图像等。(1)在CSS3中,使用list-style-type属性设置项目符号的类型,具体格式为:list-style-type:属性值;其中,属性值有多种,常见的属性值及说明如下表“list-style-type的属性值及说明”所示。(详见教材)(2)在CSS3中,使用list-style-position属性设置项目符号的位置,具体格式为:list-style-position:outside|inside;……(详见教材)(3)在CSS3中,使用list-style-image属性设置自定义图像文件为项目符号,具体格式为:list-style-image:none|url(图像地址);……(详见教材)(4)在CSS3中,使用list-style属性可以在一个声明中设置所有的列表属性,具体格式为:list-style:list-style-typelist-style-positionlist-style-image;其中,属性值中不同值之间用空格分隔。【课堂拓展】在实际应用中,list-style-type和list-style常用来取消列表的默认样式。【例6-5】设置列表的样式,包括列表项的项目符号类型、位置和图片等(以下提供部分代码),……(详见教材)【学生】聆听、记录、理解、观看效果美化“金企鹅教育”主页“教育资讯”模块通过制作“美【教师】先演示下最终效果,再讲解练****中较为重要和学生容易出错的地方,再要化“金企鹅教育”求学生制作“美化“金企鹅教育”主页“教育资讯”模块”项目,遇到不会的问题可以主页“教育资讯”扫描微课二维码观看视频”美化“金企鹅教育”主页“教育资讯”模块“(详见教材),模块“,使学生巩可讨论或咨询老师,可互相帮助固所学知识,锻炼步骤1在HBuilderX中导入本书配套素材“素材与案例第6章实战演练动手操作能力,通实战演练”文件夹,然后打开“”文档。过学生讨论和咨(15min)步骤2设置“教育资讯”模块容器的样式。在“”文档中添加以下代码,询,,……(详见教材)氛,拉近学生和老师之间,学生与学步骤3设置“教育资讯”标题的样式。在“”文档中添加以下代码,使用生之间的距离,、.information_title>a等设置样式,……(详见教材)高学生学****积极步骤4设置“教育资讯”列表的样式。在“”文档中添加以下代码,、.information_showli等设置样式,此时即可获得该模块最终2:..(详见教材)通过实践学【教师】要求学生根据上课所学知识和例6-5,制作队伍的项目,要求将列表进行美****巩固学生对列实战拓展化,可以互相讨论或询问老师表属性的理解与(10min)掌握,并锻炼学生【学生】讨论、思考、操作的实际操作能力第二节课【教师】提出问题在网页中,超链接载体中的文本默认具有下画线效果,且访问前字体颜色为蓝色;访问时字体颜色为红色;访问后字体颜色为紫色。此外,当鼠标指针移动至超链接上通过问题导问题导入时,鼠标指针就会变成手形。为了适合当前页面的风格,一般在制作网页时都需要重入的方法,引导学(5min)新设置超链接的样式,甚至需要重新设置鼠标的样式。有没有同学知道怎么设置超链生主动思考,激发接和鼠标的样式呢?学生的学****兴趣【学生】思考、举手回答【教师】【教师】讲解超链接样式的设置,并演示例子辅助理解设置超链接的样式就是设置超链接载体的样式,超链接的载体可以是文本、图像或内容块等,它们的样式属性前面已经介绍过。要想设置超链接访问前、访问后、鼠标指针经过时和访问时的样式,,包括“:link”“:visited”“:hover”“:active”。通过讲解,和演示例子,使学生【课堂拓展】掌握CSS3设置超传授新知同时设置多个状态样式时,需要按照如上顺序设置,一般不可调换。这4种状态链接访问前、访问(15min)后、鼠标指针经过并不一定都要设置,可根据实际情况进行调整。时和访问时的样【例6-6】设置超链接的样式(以下提供部分代码),……(详见教材)式的方法【课堂拓展】2021年6月25日,拉萨到林芝铁路开通运营,拉萨至林芝最快3小时29分可达,复兴号高原内电双源动车组同步投入运营。这意味着,我国自主研发的“复兴号”高铁列车组历史性实现31个省区市全覆盖,中国速度再次震惊世界。【学生】观看效果、聆听、记录、:..cursor的属性值及说明”和演示例子辅助理解鼠标指针显示为箭头,当鼠标指针经过超链接时显示为手形。在CSS3中,使用cursor属性可以设置鼠标指针在指定元素上的样式,具体格式为:cursor:属性值|url(图像地址),属性值;……(详见教材)【例6-7】设置鼠标指针的样式(以下提供部分代码),……(详见教材)【学生】观看效果、聆听、记录、理解美化“金企鹅教育”网站主页的导航栏【教师】要求学生美化“金企鹅教育”网站主页的导航栏模块,遇到不会的问题可以扫描微课二维码观看视频”美化“金企鹅教育”网站主页的导航栏“(详见教材),有疑问可讨论或咨询教师在第4章的实战演练中已经介绍过如何使用无序列表和超链接制作“金企鹅教育”主页导航栏,这里介绍如何美化该导航栏。步骤1在HBuilderX中导入本书配套素材“素材与案例第6章实战演练”文件夹,然后打开“”文档。步骤2设置网页中常用及通用的样式。在“”文档的开头处添加以下代码,通过制作“美使用选择器a、.a_mouse设置网页中所有超链接标签和鼠标类的样式。化“金企鹅教育”实战演练网站主页的导航……(详见教材)(10min)栏”模块,使学生步骤3设置导航栏容器的样式。在“”文档中添加以下代码,使用选择器巩固所学知识,锻#index_nav设置样式,……(详见教材)炼动手操作能力步骤4设置导航栏中导航列表的样式。在”文档中添加以下代码,、.:before、.nav_ula:hover,.,此时即可获得导航栏最终的页面效果,……(详见教材)【课堂拓展】在CSS3中,使用user-select属性规定是否能选取元素的文本,具体格式为:user-select:auto|none|text|all;【学生】制作项目,观看微课,讨论通过实践学****巩固学生对超【教师】要求学生根据上课所学知识和例6-6和6-7,要求将自己小队项目的超链链接样式和鼠标实战拓展接样式和鼠标样式进行美化,风格要与项目主题风格搭配,可以互相讨论或询问老师样式美化方法的(10min)理解与掌握,并锻【学生】讨论、思考、操作炼学生的实际操作能力4:..【教师】简要总结本节课的要点总结知识点,CSS3的常用属性。通过本节课的学****学生应重点掌握以下使学生牢固掌握内容。CSS3设置列表项样式属性的方(1)CSS3提供了专门用于设置列表项样式的属性,包括list-style-type(项目符法和设置超链接(3min)号类型)、list-style-position(项目符号位置)、list-style-image(项目符号图像)等。访问前、访问后、(2)在CSS3中,使用动态伪类选择器“:link”“:visited”“:hover”“:active”鼠标指针经过时设置超链接访问前、访问后、鼠标指针经过时和访问时的样式。和访问时的样式的方法【学生】总结回顾知识点通过课后作业复****巩固学到【教师】布置课后作业的知识,提高实际作业布置团队作业:完成队伍项目的列表、超链接(访问前、访问后)、鼠标样式(指针经操作能力,通过团(2min)过时、访问时)的美化。队任务,增加同学课下的联系,培养【学生】完成课后任务学生团队协作能力本次课主要讲解了列表和超链接的美化方法,通过实践演练和实战拓展,让学生充分参与课堂,巩固所学知识,发挥自己的创造力,本节课讲解内容较少,主要是让学生自己动手制作项目,微课的作用极其重要,丰富了本节课的内容,减少了老师工作的繁琐,也充分调动学生的主动思考的积极性。在以后的课程中也要教学反思充分发挥微课的作用,把课堂的时间交给学生自由掌控,培养学生主动思考,主动发现问题并解决问题的能力。5