静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 教学案例17.docx

教学案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 教学任务十七 、应用内置行为 Dreamweaver CS6为我们提供了多种常用的内置行为，只需要通过“行为面板”执行简单的操作即可完成内置行为的添加。 （1）“交换图像”行为 “交换图像”行为通过更改所选图片img标签的src属性，将当前图像换成另外一个图像，通过用户的一些事件来完成“更改图像”的动作。 案例4-1：将图片“but1.jpg”实现“交换图像”行为，换成图片“but2.jpg”。 操作步骤： 新建网页文档，命名为“交换图像.html”。 选择【插入】/【图像】命令，打开“选择图像源文件”对话框，如图4-4所示，选择“but1.jpg”，将“but1.jpg”插入页面中。 图4-4 “选择图像源文件”对话框 选择插入的图片“but1.jpg”，选择【窗口】/【行为】命令，打开“行为面板”，点击，在弹出的动作菜单中选择“交换图像”子菜单，弹出“交换图像”对话框，如图4-5所示。 图4-5 “交换图像”对话框 点击“浏览”按钮，选择“but2.jpg”，点击“确定”按钮。则“交换图像”行为添加完成，如图4-6所示。 图4-6 添加“交换图像”的行为面板 根据需要，从“行为面板”中选择左侧的事件，弹出事件下拉列表，重新设置“交换图像”的事件类型为“onMouseOver”事件，如图4-7所示。 图4-7 “交换图像”的事件下拉列表 查看页面在浏览器中的显示效果，鼠标到达图片上时实现了“交换图像”特效，如图4-8所示。 图4-8 “交换图像”行为页面效果 （2）“弹出信息”行为 “弹出信息”行为显示为一个JavaScript的消息提示框，消息内容可以根据需要设定。 案例4-2：页面加载完成后显示“欢迎使用‘弹出信息’内置行为！”。 操作步骤： 新建网页文档，命名为“弹出信息.html”。 选择【窗口】/【行为】命令，点击，在弹出的动作菜单中选择“弹出信息”子菜单，弹出“弹出信息”对话框，将提示信息写入“弹出信息”框内如图4-9所示，点击“确定”按钮即可。 图4-9 “弹出消息”行为对话框 查看页面在浏览器中的显示效果，当页面加载完成后弹出消息框，如图4-10所示。 图4-10 “弹出消息”行为页面效果 （3）“打开浏览器窗口”行为 “打开浏览器窗口”行为可在一个新的窗口中打开页面。可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。 案例4-3：用户单击缩略图时，在新窗口中打开一个内容相同的大图像。 操作步骤： 新建网页文档，命名为“打开浏览器窗口.html”。 将“small.jpg”文件插入到网页中。 选择【窗口】/【行为】命令，点击，在弹出的动作菜单中选择“打开浏览器窗口”子菜单，弹出“打开浏览器窗口”对话框，按用户需求设置新窗口的属性，如图4-11所示，点击“确定”按钮即可。 图4-11 “弹出消息”行为对话框 查看页面在浏览器中的显示效果，当用户点击小图时，弹出新窗口显示大图，如图4-12所示。 图4-12 “打开浏览器窗口”行为页面效果 （4）“改变属性”行为 “改变属性”行为可以设置对象的属性，如对象的大小、背景色、线型等。 案例4-4：当鼠标移到图片上时，为图片添加边框效果。 操作步骤： 新建网页文档，命名为“改变属性.html”。 将图片“but2.jpg”添加到页面中，然后选择该图片，在属性面板中为图片设置ID属性为“pic”，如图4-13所示。 图4-13 图像属性面板 选择【窗口】/【行为】命令，打开“行为面板”。点击，在弹出的动作菜单中选择“改变属性”子菜单，弹出“改变属性”对话框，设置各选项如图4-14所示，点击“确定”按钮即可。 图4-14 “改变属性”对话框 将“行为面板”的事件类型修改为“onMouseOver”事件，如图4-15所示。 图4-15 “行为面板”修改事件类型 查看页面在浏览器中的显示效果，当页面加载完成后，将鼠标移到图片上查看效果，如图4-16所示。 图4-16 “改变属性”行为页面效果 （5）“显示-隐藏元素”行为 “显示-隐藏元素”行为可以将指定的网页元素进行显示、隐藏或恢复操作，实现用户与页面的交互操作。 案例4-5：当鼠标移到某区块上时，隐藏该区块。 操作步骤： 新建网页文档，命名为“显示-隐藏元素.html”。 在页面中新建区块，命名为div1，添加样式修饰该区块。区块