资源简介

课题 网页列表与超链接( 二 ）
课时 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中，使用标签标记超链接。标签必须设置href属性，属性值为url地址，如果没有指向的目标资源，可使用“#”作为属性值，表示该标签为指向当前页面的空链接。 标签还有一个常用的属性target，表示打开目标资源的方式，属性值“_self”是默认值，表示在当前标签页中加载目标资源；“_blank”表示在新的标签页中加载目标资源。 （详见教材） 二、常见的超链接类型 【教师】展示Dreamweaver CC中超链接的类型，帮助学习理解 1．图像链接 除了链接到网页之外，超链接还可以链接到图像，这种链接称为图像链接，鼠标单击图像链接后可在浏览器中全屏查看所链接的图像文件。设置方法是将href属性值设置为图像文件的地址。 2．下载链接 除了网页与图像外，超链接还可以链接到文档、邮件地址和应用程序等。当链接的文件不能被浏览器解析时（如压缩文件），单击超链接后将直接下载链接的文件至本地计算机中，这种链接称为下载链接。设置方法是将href属性值设置为链接文件的地址。 3．锚点链接 锚点链接是指向同一页面或其他页面中特定元素的链接。例如，在篇幅较长的网页底部设置一个返回顶部的锚点链接，通过单击该链接可以快速回到网页顶部，减少移动滚动条的麻烦。 4．图像热点链接 图像热点链接是在图像上创建多个热点区域并分别为这些区域设置不同的超链接，鼠标单击热点区域后可跳转到不同的目标资源。 【教师】演示使用Dreamweaver CC制作锚点链接的方法 在网页中添加锚点链接需要执行两步操作。 （1）创建锚点。锚点就是锚点链接所指向元素所在的位置，为元素设置了id属性后，其属性值可作为该元素的锚点。 （2）添加链接。锚点链接的href属性值为“#锚点名”，锚点名即目标元素的id属性值，如“href="#p5"”表示链接至当前页面中id属性值为p5的元素。当指向其他页面中的某个元素时，需要在“#”符号前加上页面的名称，如“href="test.html#p1"”。 （详见教材） 【学生】观察、记录、理解 【教师】演示使用Dreamweaver CC制作图像热点链接的方法 （1）在Dreamweaver CC中单击“文件”菜单，在展开的列表中选择“打开”选项，打开“打开”对话框，在其中选择本书配套素材“项目五”→“foodmap.html”网页文档，该文档中只有一个图像。 （2）选中第8行代码，按“Ctrl+F3”组合键打开“属性”面板，然后将当前默认的拆分视图切换为“代码+设计”。 （3）单击“属性”面板左下角的矩形热点工具 ，然后在图像上按下鼠标并拖动绘制矩形热点区域。 （4）使用同样方法为左侧的两道菜绘制热点区域。 （5）单击“属性”面板左下角的圆形热点工具，在图像上方绘制3个圆形热点区域。 （6）代码自动生成完毕，其中标签的href属性值默认为“#”。 （7）根据img文件夹中的图像文件及其名称补全第一个矩形热点区域的href属性值。 （8）参照步骤7补全剩余热点区域的href属性值，为各个热点区域设置图像链接。完成后将网页文件保存，按“F12”键，在浏览器中查看页面效果。 （详见教材） 【学生】观察、记录、理解 三、设置超链接样式 【教师】展示Dreamweaver CC中超链接的样式，帮助学习理解 超链接中的文本默认具有下划线效果，且访问前文本颜色为蓝色；访问时文本颜色为红色；访问后文本颜色为紫色。一般在制作网页时都需要重新设置超链接的样式，以适合当前页面的风格。 常用于设置超链接样式的伪类选择器有“:link”“:visited”“:hover”“:active”等，它们分别用于设置超链接访问前、访问后、鼠标指针经过和访问时的样式。 （详见教材） 【课堂互动】教师提出以下问题： 如何设置超链接的多个样式？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 同时设置超链接多个状态的样式时，需要按照如上顺序（常用于设置超链接样式的伪类选择器有“:link”“:visited”“:hover”“:active”等，它们分别用于设置超链接访问前、访问后、鼠标指针经过和访问时的样式）设置，一般不可调换。这4种状态并不一定都要设置，可根据实际情况进行调整。 【教师】演示使用Dreamweaver CC设置超链接样式的方法 （1）在Dreamweaver CC中创建一个名为“green.html”的网页文档，将其网页标题修改为“设置超链接的样式”。 （2）将鼠标指针置于标签中，单击“插入”面板中的“Hyperlink”按钮，打开“Hyperlink”对话框，单击“确定”按钮，添加一个空链接。使用同样方法再次添加一个空链接。 （3）添加.a1选择器，设置第一个超链接的字号大小为“20 px”。 （4）添加.a1:link选择器，设置第一个超链接访问前的文本颜色为“#000000”，文本划线为（无划线）。 （5）添加.a1:visited选择器，设置第一个超链接访问时的文本颜色为“#717799”. （6）添加.a1:hover选择器，设置鼠标指针移动至第一个超链接上时的字号大小为“22 px”，文本划线为（下划线）。 （7）添加.a1:active选择器，设置第一个超链接访问后的文本颜色为“#9ca8c8”，字号大小为“20 px”。 （8）添加.a2:hover选择器，设置鼠标指针移动至第二个超链接上时的不透明度为“0.6”。 （9）将网页文档保存后，按“F12”键查看页面效果。 （详见教材） 【学生】观察、记录、理解 【课堂互动】教师提出以下问题： 如何设置图像的透明度？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 opacity属性用于设置图像不透明度，属性值的取值范围为0～1，数值越高透明度越低，0表示完全透明，1表示完全不透明。 【课堂互动】教师提出以下问题： 我国的生态文明体系是如何构建的？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 《中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标纲要》专门用一个篇章阐释推动绿色发展，促进人与自然和谐共生，强调坚持绿水青山就是金山银山理念，指导着我们坚持尊重自然、顺应自然、保护自然，坚持节约优先、保护优先、自然恢复为主，实施可持续发展战略，完善生态文明领域统筹协调机制，构建生态文明体系。 【学生】聆听、思考、记忆 通过讲解，让学生了解如何使用Dreamweaver CC添加超链接并设置设置样式
小组互助 （15 min） 【教师】组织学生以小组为单位，根据教材“在网页中添加超链接”部分的内容，打开教材例题中的网页，为其添加超链接 【学生】阅读、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作 【教师】进行巡视，解答学生的问题 以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点
第二节课
任务实施 （25 min） 【教师】演示使用Dreamweaver CC在网页中添加超链接并设置样式，然后对其进行分析 （1）继续在任务一任务实施创建的文档中操作，或用本书配套素材“项目五”→“任务二”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件。 （2）打开index.html网页文档，将插入点置于任务一制作的导航列表中，为每一个列表项都添加超链接标签。需要注意的是，此处的超链接除第二个列表项链接至“contact.html”之外，其余超链接皆为空标签，且所有超链接需包含原列表项的内容。 （3）通过输入代码的方式，在“诗词佳作”模块最后一个

标签的结束标签之前添加一个空链接，载体内容为“……更多”。 （详见教材） 【学生】观察、记录、理解，上机操作 【教师】巡堂指导，及时解决学生的问题 通过任务实施，让学生们主动参与学习，熟悉使用 Dreamweaver CC在网页中添加超链接，设置其样式的步骤
实践探索 （15min） 【教师】组织学生搜集资料，通过练习熟悉使用Dreamweaver CC在网页中添加导航栏，并设置其样式 【学生】搜集资料、上机操作 【教师】巡堂指导，及时解决学生的问题 通过实践探索，使学生进一步巩固所学知识，了解更多关于网页添加超链接的知识
课堂小结 （3 min） 【教师】简要总结本节课的要点 本节课了解了超链接的样式，在实践中练习了为网页添加超链接并设置样式的方法。希望大家在课下多加练习，熟练掌握利用Dreamweaver CC在网页中添加超链接，并设置样式的方法。 【学生】总结回顾知识点 总结知识点，巩固印象
作业布置 （2 min） 【教师】布置课后作业 （1）完成相关课后习题。 （2）保存常用的网页，在Dreamweaver CC中打开网页，查看网页中涉及到的超链接。 【学生】完成课后任务 延展知识面，巩固所学知识
教学反思 本节课的教学效果整体不错，大部分学生都能很好地掌握并运用所学知识，只是有小部分学生在实践练习时出现了一些错误。在课堂上有针对性地对一些典型错误进行了讲解和纠正，并引导学生对所犯的错误进行了认识和反思，防止其以后再犯同类错误。