5.5.1-Dreamweaver CS5JavaScript特效制作图片漂浮广告（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5JavaScript特效制作图片漂浮广告 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握Dreamweaver CS5的基本操作。 · 理解JavaScript的基本语法及其在网页中的应用。 · 学会使用JavaScript制作图片漂浮广告特效。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. Dreamweaver CS5的基本操作。 2. JavaScript的基本语法及在网页中的应用。 3. 图片漂浮广告特效的制作方法。 教学难点 1. JavaScript代码的编写与调试。 2. 图片漂浮广告特效的实现原理。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析案例，引导学生理解知识点。 2. 实践操作法：鼓励学生动手实践，巩固所学知识。 3. 小组合作法：小组合作完成任务，培养学生的合作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 展示一些具有图片漂浮广告特效的网站，激发学生的学习兴趣。 2. 简要介绍Dreamweaver CS5和JavaScript的基本概念和应用。 2分钟 讲授新课 练习指导 “掌握Dreamweaver CS5的基本操作”是学习Dreamweaver CS5软件的基础，对于初学者来说是非常重要的。以下是一些关于如何掌握Dreamweaver CS5基本操作的步骤和建议： ### 一、熟悉界面布局 1. **启动Dreamweaver CS5**：了解软件的启动过程和初始界面布局。 2. **工具栏和面板**：熟悉常用工具栏（如标准工具栏、格式工具栏等）和面板（如属性检查器、CSS面板等）的位置和功能。 3. **文档窗口**：了解如何在文档窗口中创建、编辑和预览网页。 ### 二、创建和管理站点 1. **站点定义**：学习如何定义一个本地站点，包括设置站点的根目录、远程服务器信息等。 2. **文件和文件夹管理**：掌握在“文件”面板中创建、删除、重命名文件和文件夹的方法。 3. **同步站点**：学习如何同步本地站点与远程服务器上的文件。 ### 三、编写和编辑HTML代码 1. **代码视图**：了解如何在代码视图中编写和编辑HTML代码。 2. **设计视图**：学习在设计视图中通过拖拽元素来快速构建网页布局。 3. **实时视图**：了解实时视图如何显示网页的实际效果。 ### 四、插入和设置网页元素 1. **插入文本和图像**：学习如何在网页中插入文本、图像等元素，并设置其属性。 2. **链接和锚点**：掌握创建超链接和锚点的方法。 3. **表格和表单**：学习如何使用表格和表单来组织网页内容。 ### 五、CSS样式应用 1. **CSS简介**：了解CSS的基本概念和作用。 2. **创建和应用CSS样式**：学习如何在Dreamweaver CS5中创建CSS样式，并将其应用到网页元素上。 3. **CSS面板**：熟悉CSS面板的功能和使用方法。 ### 六、预览和测试网页 1. **预览网页**：学习如何在Dreamweaver CS5中预览网页在不同浏览器和设备上的显示效果。 2. **验证HTML和CSS**：了解如何使用Dreamweaver CS5的内置工具验证HTML和CSS代码的规范性。 ### 七、发布网页 1. **连接到远程服务器**：学习如何连接到远程服务器，并将网页文件上传到服务器上。 2. **发布网页**：掌握发布网页的步骤和方法，确保网页能够在互联网上正常访问。 为了更好地掌握Dreamweaver CS5的基本操作，建议学习者多做练习，通过实际操作来加深对软件功能的理解和记忆。同时，也可以参考官方教程或参加相关的培训课程来提升学习效果。 要理解JavaScript的基本语法及其在网页中的应用，并学会使用JavaScript制作图片漂浮广告特效，可以按照以下步骤进行学习： ### 一、JavaScript基础 1. **JavaScript简介**：了解JavaScript的基本概念和作用。 2. **数据类型**：学习JavaScript中的基本数据类型，如字符串、数字、布尔值等。 3. **变量*