HTML5+CSS3网页设计实战 教案 3.5 扩展练习 2

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章扩展练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 巩固容器规划及样式设置知识点。（2） 对效果图进行精确切图并输出图像文件。（3） 完成图片集的列表区域（淘宝俗称的宝贝橱窗区域）。能力目标：（1） 具备分解指定区域结构、合理定义容器关系结构的能力。（2） 具备对效果图进行有效精确切图输出的能力。（3） 具备完成常见图片列表对应代码的能力。素养目标：（1） 通过项目驱动学习、小组讨论等方式，提升学生的自主学习能力，使其能够持续跟进技术发展。（2） 通过实际案例、项目实践等方式，让学生将理论知识与实际应用相结合，培养其实践能力和创新精神。根据产品列表效果图完成对应的布局。效果图切图输出，产品区布局。通过上机练习来掌握相关处理流程。产品区的容器结构设计。通过对切图与结构的关联性来强化对容器结构的认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习在上节课的新闻列表区域布局练习中，我们采用了标题+ul标签进行设计。有些同学认为，既然有标题，能不能采用dl自定义列表来完成？从实现效果来说，采用带有dt标题的dl标签来设计，是没有问题的，甚至使用更少的标签数量就可以完成。但我们也要考虑一个现实因素“h类标签对搜索引擎收录来说，远比dt标签更友好”，基于这块是主要栏目，所以我们采用h类标签似乎更加合理。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入上次练习主要完成文字类列表的设计效果，这次练习我们将面对图片类版块的设计。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授【练习2】将如图3-86所示的产品图进行切片输出，利用float属性完成所示效果。谨记一点，不管是纯文字，还是纯图片，或者图文混排，都可以“一组组相同排版规则”来表现的布局，我们都可以采用ul标签完成，只不过根据复杂程度，可以在li元素内部再插入其他标签容器。☆思政讲解：中国小家电在世界的影响力。从2023年3月到2024年7月，我国家电出口已连续17个月实现同比正增长。应当看到，我国家电在海外实力“圈粉”，正是我国外贸国际竞争力不断增强的重要表现。正所谓事非经过不知难，以家电为代表的“老三样”（服装、家具、家电），从改革开放之初的奋起直追，到我国加入WTO后的快速发展，再到近年来坚定不移转型升级，在全球产业变局中站稳了脚跟、夯实了优势，一路走来，彰显了中国制造的实力。我国拥有全球产业门类最齐全、产业体系最完整的制造业。比如，广东是全球规模最大、品类最齐全的家电制造业中心，家电制造业营收规模占全国比重超40%。广东目前已形成深圳、佛山、东莞、珠海、中山、惠州、湛江为聚集地的家电产业集群。听讲演示任务达到的效果，讲解代码讲授法让学生掌握完成本次任务需要了解的核心知识点。任务实施【小组讨论】谈论切图输出的范围，采用的标签名称、标签数量，容器包含关系。【教师汇总讨论结果】指出若干方案的优缺点，并简单点评。【小组执行商讨后的方案】切图——编写容器结构——编写样式代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展产品图的最左侧区域，能否纳入到右侧的ul容器内，视为其第一个li元素？请查阅相关网站的源代码，并解释其理由。回答问题提问学生任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分小组协作组员讨论积极，团队意识强。30站点结构目录结构正确，文件命名规范。10Html结构容器关系合理。20Css样式样式定义，属性值正确。20页面效果效果与原图一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课学习，要求我们：（1）掌握容器规划及样式设置知识点。（2）掌握对效果图进行精确切图并输出