第12课网页列表与超链接( 三 ）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 网页列表与超链接( 三 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1）掌握使用Dreamweaver CC为网页添加导航栏的方法 （2）能够制作简单纵向导航栏 （3）能够制作简单横向导航栏 （4）能够制作带下拉菜单的横向导航栏 思政育人目标： （1）保持积极的学习态度，增强自身工作能力。 （2）了解“绿水青山就是金山银山”的相关信息，增强热爱自然、保护自然的意识。 教学重难点 教学重点：使用Dreamweaver CC为网页添加导航栏 教学难点：制作带下拉菜单的横向导航栏 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（23 min）→小组互助（15 min） 第2节课： 任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在Dreamweaver CC中如何添加导航栏 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （10 min） · 【教师】提出以下问题： 在网页中超链接的种类有哪些？ · 【学生】思考、举手发言 横向导航栏，纵向导航栏，带有下拉菜单的导航栏。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （23 min） · 【教师】通过学生的发言，引入新的知识点，介绍使用Dreamweaver CC制作导航栏的步骤 一、制作简单纵向导航栏 纵向导航栏即导航链接垂直放置，相当于一个模块的侧边栏，通常是针对主体导航栏的二次细分。 制作导航栏时，为了得到具有格式化的效果，通常需要改变元素的显示方式。这时，需为元素设置display属性，属性值none表示不显示该元素；inline是默认值，表示将该元素转换为行内元素；block表示将该元素转换为块级元素；inline-block表示将该元素转换为行内块元素，行内块元素即为可显示在一行内的块级元素。 （详见教材） 【教师】演示使用Dreamweaver CC制作简单纵向导航栏的方法 （1）在Dreamweaver CC中创建一个名为“nav1.html”的网页文档，将其网页标题修改为“纵向导航栏”。 （2）在<body>标签中添加一个<nav>标签，然后在其中添加一个<h1>标签，输入文本“快速访问”。在<h1>标签下方添加一个id属性值为nav_a的<div>标签，并在其中添加10个<a>标签。 （3）打开“CSS设计器”面板，在“源”窗格中单击“添加CSS源”按钮，在展开的列表中选择“在页面中定义”选项，网页文档的<head>标签中生成<style>标签，在该标签中添加样式。 （4）添加body选择器，设置页面的背景颜色为“#fffae8”。 （5）添加nav选择器，设置导航栏的样式。 （6）添加nav h1选择器，设置导航栏标题。 （7）添加nav_a a选择器，设置导航栏中超链接的样式。 （8）添加nav_a a:last-child选择器，设置导航栏中最后一个超链接的样式。 （详见教材） 【学生】观察、记录、理解 【课堂互动】教师提出以下问题： 如何设置布局效果？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 margin属性值auto表示自动识别外边距，常用于设置布局效果。 二、制作简单横向导航栏 横向导航栏的应用非常广泛，一般网页的页眉部分都会选择使用通版的横向导航栏，统领整个页面的效果 【教师】演示使用Dreamweaver CC制作简单横向导航栏的方法 （1）在Dreamweaver CC中创建一个名为“nav2.html”的网页文档，将其网页标题修改为“横向导航栏”。 （2）在<body>标签中添加一个<nav>标签；然后在<nav>标签中添加一个<div>标签；接着在<div>标签中添加一个无序列表并添加7个列表项；最后为每一个列表项都添加一个<a>标签。 （3）打开“CSS设计器”面板，在“源”窗格中单击“添加CSS源”按钮，在展开的列表中选择“在页面中定义”选项，网页文档的<head>标签中生成<style>标签，在该标签中添加样式。 （4）添加nav选择器，设置导航栏整体的背景颜色为“#2F4