3.1.5-添加空链接及脚本链接（教案）-《网页设计与制作》同步教学-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 添加空链接及脚本链接 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解空链接和脚本链接的概念。 · 学会在HTML文档中添加空链接和脚本链接。 · 掌握空链接和脚本链接的用途和特点。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 空链接和脚本链接的区别和联系。 2. 在实际项目中合理运用空链接和脚本链接。 教学难点 1. 空链接的概念和用途。 2. 脚本链接的概念和用途。 3. 在Dreamweaver CS5中添加空链接和脚本链接的方法。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 讲解：介绍空链接和脚本链接的概念、用途和特点。 2. 演示：在Dreamweaver CS5中演示如何添加空链接和脚本链接。 3. 实践：让学生通过实际操作，熟练掌握添加空链接和脚本链接的方法。 4. 分析：引导学生分析空链接和脚本链接的优缺点，以便在实际项目中合理运用。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 在课前，学生可以阅读有关空链接和脚本链接的相关知识，了解它们的概念和用途。此外，学生还可以尝试在其他编辑器或代码编辑器中添加空链接和脚本链接，以便更好地理解这些概念。 2分钟 讲授新课 练习指导 空链接（也称为空超链接或空链接）是指一个指向没有任何内容或不存在的目标资源的HTML超链接。空链接的特点是它的`href`属性值为空，或者不设置`href`属性。 例如： ```html <a href="">这是一个空链接</a> ``` 或者 ```html <a>这也是一个空链接</a> ``` 空链接的用途： 1. 占位符：在网站开发过程中，开发者可能会先创建空链接作为占位符，以便在未来的某个时间点添加实际的内容或功能。 2. 触发JavaScript事件：空链接可以用于触发JavaScript事件，例如点击事件。这样可以实现一些交互效果，如展开/折叠菜单、弹出窗口等。 ```html <a href="javascript:void(0);" onclick="myFunction()">点击这里</a> ``` 3. 无障碍访问：对于使用屏幕阅读器的用户，空链接可能会提供额外的上下文信息。例如，在某些情况下，空链接可能表示一个尚未实现的功能或待办事项。 5. 用户体验：在某些情况下，空链接可以用来提示用户当前没有可用的内容或功能。这有助于提高用户体验，让用户知道该页面尚未完成或某些功能尚不可用。 脚本链接（也称为JavaScript链接）是指一个使用JavaScript代码的HTML超链接。脚本链接的特点是它的`href`属性值为`javascript:`协议，后面跟着一段JavaScript代码。 例如： ```html <a href="javascript:alert('Hello, World!');">点击这里</a> ``` 脚本链接的用途： 1. 执行JavaScript代码：脚本链接可以用来执行一段JavaScript代码，实现一些交互效果，如展开/折叠菜单、弹出窗口等。 2. 提交表单：脚本链接可以用来提交表单，例如在线表单、搜索表单等。 3. 导航：脚本链接可以用来实现页面内部的导航，例如跳转到页面的某个特定部分。 在Dreamweaver CS5中添加空链接和脚本链接的方法： 1. 打开Dreamweaver CS5，创建一个新的HTML文件或打开现有的HTML文件。 2. 在“代码”视图中，找到您想要添加空链接或脚本链接的位置。 3. 添加空链接： 在所需位置插入以下代码： ```html <a href="">这是一个空链接</a> ``` 或者 ```html <a>这也是一个空链接</a> ``` 4. 添加脚本链接： 在所需位置插入以下代码： ```html <a href="javascript:alert('Hello, World!');">点击这里</a> ``` 您可以将`alert('Hello, World!');`替换为您想要执行的JavaScript代码。 5. 保存文件并在浏览器中预览效果。 注意：在Dreamweave