HTML5+CSS3网页设计实战 教案 5.6 扩展练习-1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章扩展练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）强化本章知识点的训练。（2）加强较复杂布局案例的练习。能力目标：（1）具备分析容器关系，采用标签的能力。（2）具备根据效果及html结构编写准确的css样式的能力。素养目标：（1）通过无代码参考方式，鼓励学生敢于尝试，培养他们的创新意识和创造力，为解决实际问题提供独特的视角和解决方案。（2）通过解决编程难题和挑战性任务，增强学生的自信心和毅力，培养其面对困难不退缩的精神。（3）引导学生学会质疑、分析和评价问题，培养其批判性思维能力。布局之扩展练习绝对定位，标准流布局结构，浮动流布局结构。通过综合运用相对定位、浮动设置等知识，让学生得以巩固技能。利用综合知识完成实际页面效果。通过介绍主要步骤，引导学生完成相关练习。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习点评上次课学生作业，对于“选项卡”交互样式、z-index属性进行重点检查。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在大部分网页的设计中，新闻公告功能的容器会放置在海报栏下方的主内容区中，但亦有少数派走出另外一条布局思路，比如本次课介绍的布局效果。网页设计强调“设计”两字，只要是合理的布局，有重复理由支撑的布局想法，都可以大胆去尝试。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授【练习1】完成如图5-69所示的“最新要闻”区域浮在海报上的效果。【教师提示解决步骤】（1）容器结构设置为：海报区为大容器，包含新闻公告区。（2）如果采用海报图为背景图方式，新闻公告容器采用标准流布局。如果将海报图直接插入到容器内，新闻公告容器采用定位流布局。（3）继续将新闻公告容器拆分成若干子容器。（4）编写对应的html结构。（5）编写对应的css代码。注意不透明度属性的应用。【练习2】运用标准流、浮动流、定位流布局知识，完成如图5-70所示效果。

【教师提示解决步骤】容器结构设置为：整体为大容器。可以采用左右浮动两个容器方式，也可以采用所有子项左浮动方式进行布局。采用的标签。每个标签里面又继续划分子标签结构。采用绝对定位方式解决左侧图片上方日期文字的叠加。写样式时重点关注各容器之间的间距，不同层次的灰色过渡。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施教师与学生讨论案例，对页面的静态效果进行分析，明确哪些内容时重点关注的。讨论或提示案例采用的标签及其容器结构关系。教师提示案例样式中，要重点留意的属性。学生根据提示或讨论结果，上机进行html结构代码的输入。若干分钟后，检查学生书写的html结构是否正确。简单指出错误后，继续让学生敲入css样式代码。学生运行页面，不断调试代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构站点目录正确，文件名规范。10html结构代码正确，缩进正确，有必要的注释语句，容器名称合理。30Css样式选择器合理，属性值合理。40整体页面效果运行效果与原图一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）完成指定的较复杂的案例布局效果。（2）巩固容器关系分析，标签定义的能力。（3）加强html结构、css样式的编写能力。（4）通过无代码参考方式，鼓励学生敢于尝试编程难题和挑战性任务，增强学生的自