HTML5+CSS3网页设计实战 教案 3.4 基础练习 1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章基础练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：根据效果图绘制出对应的容器结构。能力目标：观察元素，具备能按元素分组、分类，进而规划其容器包含关系的能力。素养目标：绘图过程中注重学生细节管理、质量意识的培养，鼓励学生在专业技能上精益求精，成为行业内的佼佼者。盒子模型基础练习容器关系结构的解读。通过教师示范讲解来掌握解读容器关系。容器命名的规范性。通过模仿示例和查找英文单词来加深对命名的规范性要求。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。要求学生准备A4纸两张，铅笔、直尺各一，或者有基础的班级使用Photoshop完成练习。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习精灵图应用的场景主要有哪些？采用精灵图技术有什么好处？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入理解盒子概念及相关属性后，我们都页面的认识有进一步加深，但对于一些页面元素非常多、布局复杂的例子来说，关键在于对容器进行合理的规划并一层层实施。本节课主要锻炼大家对栏目容器的解读能力，要求学习过程中，能以局部布局思路联想到全局布局思路。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1. 回忆标签语义化的知识，观察页面元素，思考应该采用什么标签。2. 确定标签后，思考标签采用id命名还是class命名，采用什么名字。3. 遵循“大盒子”——“中盒子”——“小盒子”思考流程，切勿一开始就盯着“小盒子”来建构容器，以免“只缘生在此山中，不识庐山真面目”。参考格式，可用线框、底色来表示容器，并用中文标注容器的用途，如图3-51所示。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习1】以某公司页面的产品或新闻列表区为例，如图3-50所示，使用Photoshop或画笔工具绘制它的容器包含关系。【练习2】以某公司首页的页脚区域为例，如图3-52所示，使用Photoshop或画笔工具绘制它的容器包含关系。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分标签合理性选择合理的标签，id或class命名合理40容器结构嵌套正确、合理40绘图线条干净、整齐。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们：（1）根据效果图绘制出对应的容器结构。（2）具备能按元素分组、分类，进而规划其容器包含关系的能力。（3）绘图过程