HTML5+CSS3网页设计实战 教案 3.4 瀑布流布局练习

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章基础练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 了解瀑布流布局技术。（2） 掌握简单模拟瀑布流布局的技术手段。能力目标：具备使用规格不一的图片完成瀑布流布局的能力。素养目标：（1） 关注全球程序设计领域的趋势，培养学生的全球化视野。（2） 引用大量图片时，强调职业道德规范，培养学生的法律意识，确保他们在未来的职业生涯中能够遵守行业规范，尊重知识产权，不从事非法或有害社会的活动。瀑布流布局练习瀑布流布局的主要容器的设计。通过逐个容器讲解、放缓讲解时间的方式，确保容器框架的正确性。各元素相关属性值的精确设置，尤其是border-radius值。采用提问、引导的方式加强对属性值的计算能力。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习列举九宫格布局的思路。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入瀑布流布局是一种流行的网站页面布局方式，其视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局会不断加载数据块并附加至当前尾部。瀑布流布局的核心是基于一个网格的布局，每行包含的项目列表高度是随机的，每个项目列表呈堆栈形式排列，彼此之间没有多余的间距差存在。这种布局的特点是等宽不等高，使得页面最后一行的容器高度差距最小，从而提供更好的用户体验。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授瀑布流布局应用特点瀑布流是一种宽度相同，高度不同的卡片布局方式。商业页面的瀑布流布局是动态刷新不同尺寸的图片，而不是固定某几张图片，如图3-72所示，这就需要结合javascript、弹性盒子等技术来实现的，这里采用这个作为布局练习，只是考察对盒子模型的掌握程度。【提问】请问在什么网站，或者是什么app页面中看到瀑布流布局？听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习5】瀑布流布局思路一:常规思路，页面分为均匀的3列，每列每列装对应图片。（1）使用3个ul标签分别代表3列，每个li元素装入不同图片。（2）书写对应的CSS代码。（3）在浏览器中效果中，我们看到图片宽度与预期相差不大，可以通过CSS把各种尺寸的图片强制统一尺寸。（4）调整CSS代码，将img标签强制设置为250px。（5）给每张图片添加图片标题，这里可以采用h3、h4、p、div标签作为块级容器，从语义角度来说，虽然说标题用h类标签比较适合，但是作为大量的图片，每张图片标题都强调，等于毫无重点，所以用普通p标签即可。思路二：利用float属性，试试不同大小的容器能否自动见缝插针，自行利用空间？（1）书写对应的HTML代码及样式。（2）预览后发现页面效果有点乱，试验过我们才能深刻理解容器在浮动属性下的布局表现，页面效果解析如图3-81所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10Html结构容器关系正确30快捷键应用快速完成li标签对应代码。10Css代码样式最终效果一致50总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们：（1）了解瀑布流布局技术。（2）掌握简单模拟瀑布流布局的技术手段，能使用规格不一的图片完成瀑布流布局。（3）引用大量图片时，强调职业道德规范，培养学