HTML5+CSS3网页设计实战 教案 8.5 设计一级栏目页面-1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。28.5设计一级栏目页面该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）完成一级页面的页头部分的制作。（2）掌握代码复用的操作步骤。（3）修改海报区代码。能力目标：（1）强化代码复用的意识，包括“快速复制、粘贴、插入技巧”、“样式的复用”、“选择器的并列申明”、“内部样式表转外部样式表”等。素养目标：（1）在面对复杂问题时，引导学生学会分解问题、制定解决方案并实施验证的策略思维。一级栏目页的制作更新海报区代码。通过相关案例的属性设置前后对比，让学生加强理解与认识。复用首页中有用的代码及样式。教学中引导学生自主探究、主动思考，通过自己的思考和探究来理解和掌握难点。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习如何链接外置的Css文件？使用的标签的格式。外置样式与内置样式相比，谁的优先级别更高一些？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入今天要完成“宁德时代”官网的“新闻”栏目页，先登录对应页面观察页面效果，搜集相关的图文素材后开始设计。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授8.5.1准备工作本节的目标是完成“宁德时代”官网的“新闻”栏目页，先登录对应页面观察页面效果。将所需的图片、图标保存到news的img文件夹中，如图8-28所示。8.5.2复用首页中有用的代码及样式在Hbuilder中把index.html首页的代码全部复制到“news.html”，保留页头、页脚区的代码，删除掉“内容区”的HTML代码。由于内容区的布局版面完全不同，如果内容区的容器依然叫“content”的话，通过外部样式表势必会把首页的content样式激活，所以我们需要将该页面的内容区容器class名称修改成content-news。此外，还需要修改外部样式表的路径。8.5.3更新海报区代码 由于index.css保留了海报区背景图的设定，而一级页面的海报区的元素、布局发生变化。所以我们可以采用在一级页面news.html写上同样名称的内部样式，覆盖掉index.css的海报区样式。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（1）将所需的图片、图标保存到news的img文件夹中。（2）在Hbuilder中把index.html首页的代码全部复制到“news.html”，保留页头、页脚区的代码，删除掉“内容区”的HTML代码。将该页面的内容区容器class名称修改成content-news。此外，还需要修改外部样式表的路径。（3）更新海报区代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10代码复用能引用外部样式。30代码修改根据实际效果修改海报区代码。40页头部分效果页头部分与效果基本一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）掌握代码复用的操作步骤