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

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。25.1标准文档流布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）掌握页头、主内容区、页脚的容器规划。（2）页头、主内容区、页脚相应的html及css代码的编写。能力目标：（1）具备独立完成企业首页页头、主内容区、页脚的容器正确、合理规划的能力。（2）具备完成页头、主内容区、页脚html及css代码的编写能力。素养目标：弘扬工匠精神，鼓励学生追求技术的精湛和完美。通过设立技术榜样、开展技能竞赛等方式，激发学生对技术的热爱和追求，形成精益求精的学习氛围。标准流布局各区域的容器规划，容器结构代码的编写，样式代码的编写。通过稻花香官网布局的模仿、鼓励学生上网观察官网源代码，激发学生兴趣。容器结构代码的编写，样式代码的编写。引导学生完成核心框架后，鼓励学生独立完成内部容器的划分及代码实现。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习标准文档流布局的特点。无论什么流派布局，可以通过css样式中clear属性，让后续元素的布局回归到标准流布局。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在之前的练习中，我们主要完成主体容器的规划，但每个主体容器中肯定有大量的子容器分布，我们可以将每个子容器看成是一个单独的个体，按照之前的操作思路，尝试在页头、内容区、页脚容器细分出若干的子容器。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1.页头区的容器规划。主要包含有：Logo，导航栏，banner海报，功能区。2.内容区的容器规划。主要包含有：重点推荐区，各栏目区，侧边栏。3.页脚区的容器规划。主要包含有：Logo，站点地图，版权说明，网站备案。【案例3】完成“稻花香集团”首页的页面框架结构。☆思政讲解：“稻花香”系列是白酒类，中国的酒文化源远流长，可追溯至数千年前，是中华文明不可或缺的一部分。古代文人墨客常以酒会友，吟诗作对，留下了众多脍炙人口的诗篇。酒不仅是饮品，更承载着社交、礼仪、庆典等多重文化意义。但是作为学生，作为未成年人，切勿把酒文化当成是朋友圈子的一种社交形式。校内喝酒易引发各种问题，如酒精中毒、酒后闹事、酒后伤人、酒后被拍丑态引发矛盾。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例3】完成“稻花香集团”首页的页面框架结构。（1）设计大体的HTML结构，代码如图5-13所示。（2）编写对应的CSS代码，如图5-14所示。（3）保存文件，预览的最终效果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构站点目录正确，文件名规范。10主体容器html结构代码正确，缩进正确，有必要的注释语句，容器名称合理。20子容器的html结构代码正确，缩进正确，有必要的注释语句，容器名称合理。30Css样式选择器合理，属性值合理。20整体页面效果运行效果与原图一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）掌握页头、主内容区、页脚的容器规划。（2）掌握页头、主内容区、页脚相应的html及css代码的编写