5.5.2-Dreamweaver CS5焦点大图切换（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5焦点大图切换 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握Dreamweaver CS5的基本操作。 · 理解HTML和CSS的基本语法及其在网页中的应用。 · 学会使用Dreamweaver CS5制作焦点大图切换效果 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. Dreamweaver CS5的基本操作。 2. HTML和CSS的基本语法及在网页中的应用。 3. 焦点大图切换效果的制作方法。 教学难点 1. HTML和CSS代码的编写与调试。 2. 焦点大图切换效果的实现原理。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析案例，引导学生理解知识点。 2. 实践操作法：鼓励学生动手实践，巩固所学知识。 3. 小组合作法：小组合作完成任务，培养学生的合作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 展示一些具有焦点大图切换效果的网站，激发学生的学习兴趣。 2. 简要介绍Dreamweaver CS5、HTML和CSS的基本概念和应用。 2分钟 讲授新课 练习指导 在Dreamweaver CS5中制作焦点大图切换效果，可以按照以下步骤进行： ### 一、创建网页文件 1. 打开Dreamweaver CS5，创建一个新的HTML文件。 2. 在“文件”菜单中选择“保存”，将文件保存为“焦点大图切换.html”。 ### 二、编写HTML代码 1. 在HTML文件中，编写基本的HTML结构，包括`<!DOCTYPE>`、`<html>`、`<head>`和`<body>`标签。 2. 在`<head>`标签内，添加`<title>`标签，设置网页标题。 3. 在`<body>`标签内，添加一个`<div>`标签，用于包含焦点大图切换的内容。 ```html <!DOCTYPE html> <html> <head> <title>焦点大图切换</title> </head> <body> <div id="focus"> <!-- 焦点大图切换内容将放在这里 --> </div> </body> </html> ``` ### 三、添加CSS样式 1. 在`<head>`标签内，添加`<style>`标签，用于编写CSS样式。 2. 为`<div>`标签添加样式，设置其宽度、高度和相对定位。 3. 为焦点大图切换添加样式，设置图片的宽度、高度、浮动和透明度等属性。 ```html<style> #focus { width: 600px; height: 300px; position: relative; } #focus img { width: 100%; height: 100%; float: left; opacity: 0; transition: opacity 1s; } #focus img:first-child { opacity: 1; } </style> ``` ### 四、添加JavaScript代码 1. 在`<head>`标签内，添加`<script>`标签，用于编写JavaScript代码。 2. 编写一个函数`changeFocus()`，用于实现焦点大图切换的效果。 3. 在`<body>`标签内，添加一个`<button>`标签，用于触发焦点大图切换效果。 ```html<script> function changeFocus() { var focus = document.getElementById("focus"); var images = focus.getElementsByTagName("img"); var current = 0; for (var i = 0; i< images.length; i++) { images[i].style.opacity = 0; } current = (current + 1) % image