HTML5+CSS3网页设计实战 教案 8.4 制作首页布局-3

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。28.4制作首页布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）页脚区域的容器嵌套关系。（2）编写对应初步的css样式。能力目标：（1）具备完成真实企业页面页脚的能力。素养目标：（1）通过页脚处的版权说明，教育学生了解知识产权的重要性，尊重他人的知识产权成果，避免侵权行为。制作页脚部分布局dl标签的应用。特殊字符的输入。提前讲解特殊字符的前置知识，以帮助学生更好地理解和掌握教学重点。dl标签的应用。采用讲解、讨论等多种教学方式，有助于学生更深入地理解教学难点。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习列举一些内容区尚未完成的细节。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入今天将进行页脚区域的练习。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1.分析页脚区对应的容器结构。2. 分析各区域采用的标签。3. 分析各容器的主要css属性。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（1）编写页脚区域对应HTML代码。先完成footer、map、map-left、map-right容器，设置样式边框或底色，优先推荐底色。（2）其次完成map-left、map-right内部元素的代码。dd容器内部的中文可以让学生复制“资源包内的文字素材文档”的文字，节省时间。要求师生均充分利用快捷键操作加快编码速度。（3）编写对应的CSS代码，先设置最外层容器的样式，预览达成预期后，逐步补充内部容器的样式。（4）保存文件，预览的效果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。重点讲解容器的主要属性，装饰性的属性可以逐步补全。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10主体容器左右布局，右侧容器分5列布局20页脚导航（站点地图）采用dl标签设计，代码正确20页脚样式布局采用的css样式正确，有背景色或边框辅助设计30细节设计时间元素前面的图标，胶囊图形的设计20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1） 页脚区域的