HTML5+CSS3网页设计实战 教案 5.1 标准文档流布局-1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。25.1标准文档流布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）巩固盒子（容器）的概念及意义。（2）掌握标准流布局的特点及使用场景。（3）掌握标准流布局下，主体框架的html代码及样式设定。能力目标：（1）具备使用标准流布局进行主体容器的代码编写的能力。（2）具备合理定义主体容器id或class名称的英文能力。素养目标：（1）了解本章成语的出处，“鳞次栉比”，宿舍集体生活中，物品的摆放应该也要整齐、规范。（2）加强英文单词的拼读能力。标准文档流布局标准流布局特点、应用场景，主体容器id或class名称的设定。通过引入2家百强企业案例来将知识点进行结合。企业首页主体容器的标准流布局。通过模仿案例布局效果，强化标准流布局的能力。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习总结上一章节的知识导图。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入HTML布局流派指的是在HTML和CSS中用于构建和设计网页的各种布局方法和技术。这些布局流派各有特点，适用于不同的场景和需求。布局流派的意义有以下方面：提高网页的可用性和可访问性——通过选择合适的布局流派，网页设计师可以创建更加直观、易于导航和使用的网页。这有助于提高用户的满意度和忠诚度。提升网页的响应性和适应性——随着移动设备的普及，响应式设计变得越来越重要。现代布局流派如Flexbox和Grid提供了强大的工具来创建适应不同屏幕尺寸和分辨率的网页。促进网页的维护和更新——使用现代布局流派可以简化网页的维护和更新过程。例如，通过Flexbox或Grid布局，网页设计师可以更容易地调整布局和样式，而无需对HTML结构进行大量修改。推动网页设计的创新和发展——随着技术的不断进步和新的布局流派的涌现，网页设计师可以不断探索和尝试新的设计方法和技巧。这有助于推动网页设计的创新和发展，为用户带来更加丰富的视觉体验。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授5.1标准文档流布局文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。标准文档流主要通过盒模型，通过设置元素的display、width、height、margin、padding、border等属性，来控制元素的大小和位置，具有灵活性强、易于控制的特点，常用于构建页面的基础布局结构。知识点：标准文档流布局特点记忆关键词：鳞次栉比、秩序井然关键词解析：认识标准文档流，更像是庖丁解牛，所有元素按照从上到下，从左到右的编排规则。对于采用标准文档流布局，简单点可以理解为，一行或几行采用一个大容器来搭建框架即可。【案例1】完成“宁波杉杉股份有限公司”所示的页面框架结构。页头页头海报区内容区页脚【案例2】完成“海澜集团”所示的页面框架结构。页头（底图为海报图页头（底图为海报图）内容区页脚导航条听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例1】完成“宁波杉杉股份有限公司”所示的页面框架结构，如图5-1所示。（1）设计大体的HTML结构，代码如图5-3所示。（2）编写对应的CSS代码，如图5-4所示。（3）保存文件后，预览效果。【案例2】完成“海澜集团”所示的页面框架结构，如图5-6所示。☆思政讲解：海澜之家在国内市场拥有很高的知名度，定位于中高端市场，以其优质的产品和服务吸引了大量消费者。中国近代服装设计相较于西方确实存在一定的差距，奢侈品品牌也相对较少。这并非否认中国古代服饰的优美与独特。中国古代服饰以其华丽的图案、精致的工艺和独特的文化内涵而著称，如汉服的飘逸、唐装的富贵、旗袍的优雅等，都展现了中华民族的审美智慧和艺术造诣。近代，由于历史原因和技术限制，中国的服装设计发展相对滞后。加强创新和突破，推陈出新，是中国服装企业的当担。（1）设计大体的HTML结构，代码如图5-8所示。（2）编写对应的CSS代码，如图5-9所示。（3）保存文件，预览的最终效果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构站点目录正确，文件名规范。10主体容器html结构代码正确，缩进正确，有必要的注释语句，容器名称合理。30Css样式选择器合理，属性值合理。40整体页面效果运行效果与原图一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1） 巩固盒子（容器）的概念及意义。（2） 掌握标准流布局的特点及使用场景