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

课题 网页列表与超链接( 二 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1）熟悉网页超链接的基础知识 （2）能够在网页中添加超链接 （3）了解超链接的类型 （4）能够使用Dreamweaver CC为网页添加超链接 （5）能够使用Dreamweaver CC设置超链接样式 思政育人目标： （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添加超链接和设置样式的步骤 一、添加超链接 使用Dreamweaver CC可以直接在网页文档中添加超链接，将插入点置于想要插入超链接的位置；然后单击“插入”面板中的“Hyperlink”按钮，打开“Hyperlink”对话框；接着在“文本”文本框中输入超链接的文本内容，在“链接”文本框中输入目标资源的地址（或单击其右侧的“浏览”按钮 ，直接选择资源文件），在“目标”下拉列表中选择打开目标资源的方式；最后单击“确定”按钮。 添加超链接后，文档窗口中自动生成超链接标签的代码。 （详见教材） 【课堂互动】教师提出以下问题： 空链接是如何产生的？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 如果在“Hyperlink”对话框中没有输入任何内容直接单击“确定”按钮，页面中将自动生成一个链接载体与地址均为“#”的空链接。 【教师】展示HTML5中超链接的标签，帮助学习理解 在HTML5中，使用<a>标签标记超链接。<a>标签必须设置href属性，属性值为url地址，如果没有指向的目标资源，可使用“#”作为属性值，表示该<a>标签为指向当前页面的空链接。 <a>标签还有一个常用的属性target，表示打开目标资源的方式，属性值“_self”是默认值，表示在当前标签页中加载目标资源；“_blank”表示在新的标签页中加载目标资源。 （详见教材） 二、常见的超链接类型 【教师】展示Dreamweaver CC中超链接的类型，帮助学习理解 1．图像链接 除了链接到网页之外，超链接还可以链接到图像，这种链接称为图像链接，鼠标单击图像链接后可在浏览器中全屏查看所链接的图像文件。设置方法是将href属性值设置为图像文件的地址。 2．下载链接 除了网页与图像外，超链接还可以链接到文档、邮件地址和应用程序等。当链接的文件不能被浏览器解析时（如压缩文件），单击超链接后将直接下载链接的文件至本地计算机中，这种链接称为下载链接。设置方法是将href属性值设置为链接文件的地址。 3．锚点链接 锚点链接是指向同一页面或其他页面中特定元素的链接。例如，在篇幅较长的网页底部设置一个返回顶部的锚点链接，通过单击该链接可以快速回到网页顶部，减少移动滚动条的麻烦。 4．图像热点链接 图像热点链接是在图像上创建多个热点区域并分别为这些区域设置不同的超链接，鼠标单击热点区域后可跳转到不同的目标资源。 【教师】演示使用Dreamweaver CC制作锚点链接的方法 在网页中添加锚点链接需要执行两步操作。 （1）创建锚点。锚点就是锚点链接所指向元素所在的位置，为元素设置了id属性后，其属性值可作为该元素的锚点。 （2）添加链接。锚点链接的hre