HTML5+CSS3网页设计实战 教案 4.4 结构类标签-Header和nav标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.4结构类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 理解header标签的使用场景及写法。（2） Nav标签的使用场景。（3） 横向导航栏、纵向导航栏的设计。能力目标：具备使用nav标签设计横向、纵向导航栏的能力。素养目标：（1） 了解本章成语的出处，理解成语含义与知识点理解的结合。（2） 掌握Header、nav的读法，加强学生英文听说能力。Header和nav标签Header、nav标签的使用场景及写法。通过案例讲解，让学生在不同场景中体会标签的用法。横向导航栏、纵向导航栏的设计。通过相关案例的浮动属性设置前后对比，让学生加强理解与认识纵向和横向排列的区别。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习如何理解样式表中的权重一词？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入HTML（超文本标记语言）是一种用于创建网页的标记语言，包含各种标签，用于定义网页的结构、语义和格式。其中，HTML结构类标签主要用于定义网页的整体结构和部分。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.4.1header标签<header>

标签是HTML5新引入的标签，用来表示网页或一段内容的头部区域。它可以包含网站标题、搜索表单、导航链接等。通常搜索引擎收录网站时，并不会把页码所有内容保存下来，开始部分是重点关注内容。<header>……</header>的写法，类似于<divid=”header”>……<divid=”header”>写法，不过从语义上来说，前者写法更符合搜索引擎收录的胃口。4.4.2nav标签<nav>标签定义导航栏链接的部分，一般来说用于页面中主要的导航链接组，如传统的导航条，侧边导航栏，页面导航栏等。【案例6】完成如图4-30所示的纵向排列的导航。图4-30纵向排列的导航 栏目名称前面的图标属于装饰用的，按H5标准来说，装饰用的原则上不应该插入图片，这里我们可以采取容器背景图的方式实现。中文栏目对应的英文词组如果考虑为装饰的话，我们也可以采用背景图方式实现，但考虑到这个截图来自于国内百强企业，拥有一批国外客户，那么我们也要适当提供英文关键字的内容，而不是作为一种装饰。基于这么考虑的话，我们把栏目中文名称用<h3>标签，英文用<h4>标签来构建框架。【案例7】完成如图4-35所示横向排列的导航。图4-35横向排列的导航 最大的容器设置浅灰背景色，布局采用“练习1”的结构，不同之处就是将<li>标签进行左浮动即可，同时增加一个光标浮在栏目上方时该元素底色变色、黑色线框图标换成另外一个白色线框图标。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例6】完成如图4-30所示的纵向排列的导航。（1）先搭建大体的框架HTML代码。（2）对应的CSS代码。（3）保存文件后运行。（4）添加h3、h4标签的CSS样式，完善其他样式。【案例7】完成如图4-35所示横向排列的导航。（1）HTML结构代码依然采用“练习1”的代码。（2）编写布局静态效果的CSS代码。采用<a>标签设置背景图标的方式去完成，但在:nth-of-type()选择器的参数设置与“练习1”不同。（3）保存文件，在浏览器中预览运行的效果。（4）添加元素在hover状态下的代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10Html结构nav标签内部代码正确，缩进整齐。30精灵图技术应用设置准确的x/y偏移值，效果一致。40快捷键的使用快速准确完成大段的代码块。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1） 理解header标签的使用场景及写法。（2