《web前端技术》(赵敏)003-0教案 第10课 CSS的列表和超链接属性

PAGE1PAGE1PAGE2PAGE2

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