HTML5+CSS3网页设计实战 教案 4.8 列表类标签- ul标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.8列表类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）熟记列表类标签包含ul、ol、dl标签。（2）理解这三种列表类标签的使用场景。（3）重点掌握ul标签的实际应用案例。能力目标：（1）具备正确使用ul标签构建页面布局的能力。（2）具备使用快捷键快速完成各li项代码的能力。素养目标：（1）通过奥克斯企业的相关页面布局，让学生了解行业资讯，加强对国情的认识。ul标签的应用列表类标签的种类及使用场景。通过展示多个网页的列表区域来介绍标签的不同应用场景。从页面效果中判定ul标签的包含范围，li子项的包含范围。通过引入奥克斯官网的列表版块案例达到难点的解析。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习Video标签属性中，列举一下有可能经常用到的属性，并回忆该属性对应的取值。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在HTML中，列表类标签的使用场景非常广泛，主要用于组织和展示具有关联性的内容。注意这里说的内容，不仅仅是文字，也可以是图片，甚至是一组结构相同的容器。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.8列表类标签在HTML中，列表主要有三种类型：无序列表<ul>，列表项用的是项目符号标记；有序列表（<ol>），列表项用的是数字或字母标记；自定义列表<dl>，列表项无符号标记。无序列表及有序列表部分外观样式。有些网页还载入特殊字体集文件来代替项目符号标记，‌设计师们经常希望在网页中使用特定的字体，‌尤其是当这些字体不是主流操作系统的内置字体时。‌传统的做法是将特殊字体处理成图片，‌但这种方法有欠缺灵活。‌为了解决这个问题，‌在线字体库‌允许设计师在网站设计时调用这些字体，‌从而使网页在客户端上能够很好地显示，‌而无需用户在其计算机上安装这些字体。‌这种技术通过使用CSS3的@font-face属性实现，‌它允许开发者指定自定义字体的来源，‌使得网络中自由使用自定义字体成为可能。‌列表常用属性详见表4-3所示。属性描述list-style简写属性。在一条声明中设置列表的所有属性。list-style-image指定图像作为列表项标记。list-style-position规定列表项标记（项目符号）的位置。list-style-type规定列表项标记的类型。以上述的列表属性，我们可以为列表项标记设置为小图标图像，并控制图像的位置。但在实际案例中，由于list-style-position属性只有inside、outside来控制位置，达不到细腻定位要求，所以上述属性中，我们通常只设置list-style-type为none，用背景或者小容器来装载图标图像。4.8.1ul标签<ul>标签虽然号称列表项没有固定顺序，也没有编号。但作为一个排列，总是要按照一定标准去排列队伍，比如最高的站前面，最重要的排前面。在实际项目中，通常还采用ul无序列表前面加上数字标记的小图标来做着“有序”的事情。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例16】完成奥克斯集团官网的新闻列表效果。☆思政讲解：奥克斯集团是中国知名空调生产企业。中国是全球最大的空调生产国。2024冷年中国家用空调全年生产17773万台，同比增长10.5%，在全球市场占比80.4%。中国的空调产能不仅满足国内市场需求，还大量出口到世界各地。（1）完成第一行结构的代码，然后直接复制代码块，把文字及图片路径调整一下即可。编写框架容器的HTML代码及框架容器的CSS代码。（2）完成整体框架后，开始对第一行li容器进行CSS样式的添加。（3）在浏览器中预览运行效果。（4）将<li>……</li>包裹的代码块进行复制，粘贴两遍，把文字、图片路径进行修改。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10页面效果解析能采用ul标签书写，并能识别每个li的容器范围。30Html代码容器关系结构正确，代码缩进整齐30Css样式样式预览结果接近原图，属性值合理。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们：（1） 熟记列表类标签包含ul、ol、dl标签。（2） 理解这三种列