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

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章扩展练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）巩固本章重要知识点的运用。（2）了解整个页面的编码流程。（3）绘制差异化对应个人作业的布局结构图。能力目标：具备解析网站页面容器结构的能力。素养目标：强调遵守编程规范，不抄袭、不剽窃，树立诚信品质。扩展练习：绘制网页的布局结构图页面容器结构的解析，对应的容器id命名。通过分组安排不同的案例，让学生在交流沟通中加深印象。页面容器结构的解析以及采用的标签。通过分组安排不同的案例，让学生在交流沟通中加深印象。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习本章知识点中，比较难掌握的标签用法有哪些？具体体现在什么方面？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入作为本章节的复习并强化，扩展练习中强调每位同学都完成不一样的练习，相互之间可以讨论。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授展示时尚类网站首页素材资源分析个别页面的容器结构，讲解较合理的id或class名称。教师建议页面各局部采用的标签结构。如果是有兴趣完成对应页面的代码编写，参考流程如下：切图输出图片，文本内容可以采用app识别或手工录入。依次从页头、内容区、页脚开始编写代码及对应的定位用的css样式。布局定位后，细化装饰性的css样式。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习1】打开“时尚类网站首页截图”文件夹的素材资源，如图4-123所示，分组或个人形式选择不同的研究目标。为目标页面的各区域内容规划容器结构图，为容器标记较合理的id或class名称。可采用纸张绘制或者绘图软件绘制。图4-123时尚类网站首页素材资源上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分容器规划容器结构正确，命名合理。50绘图效果效果整齐、美观。30标注及注释有一定的标注或注释用以辅助理解。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们：（1）巩固本章重要知识点的运用。（2）了解整个页面的编码流程。（3）绘制差异化对应个人作业的布局结构图，具备解析网站页面容器结构的能力。（