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

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.8列表类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 强化ul标签应用。（2） 加深对浮动属性的认识。能力目标：具备识别、处理局部元素尺寸大小不一的列表项集合的能力。素养目标：（1）通过两种思路分析问题，增强学生的自信心和毅力，培养其面对困难不退缩的精神。ul标签ul标签的应用。通过相关案例的练习，让学生加强理解与认识。浮动属性对后续元素的影响。通过提问来引导学生明白li容器可以特殊化。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习ul标签经常使用的样式，比如margin、padding、list-style-type。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在门户网站或者企业官网中，我们常看到若干个新闻，头条新闻的图片一定是最大的，甚至位置也跟其他新闻不在同一列上。如何设计这种布局？请看以下案例。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授页面结构分析，解析为什么尺寸不一的图文可以采用ul标签。强调快捷键操作。浮动属性对后续元素的影响。【案例17】在案例16的基础上，添加左侧版面。思路一：可能有同学会将这个结构拆解成左右部分，用2个大容器去装，右边部分我们在上一个练习已经完成，剩下左侧部分未做。思路二：左侧版面由1张图加上3行文字，内容其实跟右侧li容器的图文内容一样，不过只是图文排版不一样而已。前面我们说过，CSS负责外观表现，HTML负责内容，既然内容一样，我们就可以把左侧版面也当成一个li容器。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（1）在练习1代码的ul标签下方，新增一个li元素，内容结构与其他li元素一致。（2）编写对应的CSS代码。图4-79CSS代码（3）文件保存，预览后初步效果。（4）接下来，我们就要验证是否把li容器设置“浮动”后能达到预期布局，修改CSS代码，如图4-81所示。图4-81设置浮动（5）文件保存后预览的效果。到这一步，基本布局雏形已经完成，剩下的就是不断调整个别容器参数值，去除边框属性，达到对齐、美观效果。（6）继续调整CSS代码。（7）细节问题有时间慢慢完善。左侧版面的新闻发布时间，建议采用后续的绝对定位知识来解决，目前可忽视。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10Html结构Ul标签结构正确。40Css代码左侧li项显示效果达到预期。50总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们：（1）强化ul标签应用。（2）加深对浮动属性的认识。（3）对于网页