网页设计与制作案例教案—Dreamweaver cs6电子教案-第9章.pptx

网页设计与制作案例教程

电子教案

本章学习目标掌握为网页添加流动字幕的技巧掌握为网页制作特效菜单的技巧了解弹出信息的制作了解打开浏览器窗口和预载入动画的方式第九章动态网页设计

教学案例1、向页面添加应用行为案例描述分析本案例为在“热销汽车专场”网页内创建图像的遮帘和缩放效果

实现步骤一、创建图像遮帘效果1、在“文档”窗口中打开要添加的浮动动画网页2、单击“布局”→“标准”→“绘制APDiv层”，在网页的右上角绘制层3、选择所添加的层，插入图像4、单击“行为”→“效果”→“遮帘”效果，弹出“遮帘”效果对话框5、在“遮帘”效果对话框中，设置层6、设置完成后，单击“确定”，在“行为”面板上设置事件为“onclick”，也就是说单击鼠标时，执行向下遮帘效果

二、创建图像缩放效果1、在“文档”窗口中打开“热销汽车专场”网页2、在网页中选择插入图像位置3、选择插入的图像，在“属性”面板输入图像的ID“sf”4、单击“行为”→“效果”→“增大/收缩”效果，弹出“增大/收缩”效果对话框5、设置“增大/收缩”效果对话框中的参数6、设置完成后，单击“确定”，在“行为”面板上设置事件为“onclick”。也就是说，单击鼠标时，图像由小变大

教学案例2:添加滚动字幕及向上滚动文字案例描述分析在网站经常看到滚动的日期或状态栏文字，这给静止的网页增添了动的效果，本案例通过marquee标签制作日期向上滚动的通知。

实现步骤添加滚动日期、向上滚动文字1、把光标放在需要插入滚动日期的地方2、单击“布局”→“标准”→“插入Div标签”，弹出“插入Div标签”对话框3、设置标签为:在“插入点”，类为“rq”，ID为gs1，单击“确定”4、插入日期（或需要向上滚动的文字）5、选择“标签”，单击“行为”→“效果”→“显示-隐藏”效果，弹出“显示/隐藏元素”效果对话框6、单击插入面板的“标签选择器”，弹出“标签选择器”对话框7、选择“marquee”标签，点击“插入”按钮8、在光标所在位置的“代码”视图中插入“marquee/marquee”代码9、转换到代码视图中，使用代码设置文字滚动方向、类型等参数

教学案例3:制作特效菜单及弹出信息案例描述分析特效菜单在网页制作中是一组可导航式的菜单按钮，当鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的网页空间中显示大量可导航信息，而且效果也很好。本案例介绍菜单栏插件:水平插件和垂直插件

实现步骤一、特效菜单1、在“文档”窗口中单击“Spry菜单栏”2、在第一列内分别输入“班级首页”“班级风貌”“班级成员”“最新动态”“留言板”3、选择“班级首页”，单击第二列上方的“+”按钮，添加子菜单项，在文本框内，分别输入“班级简介”“班主任”“班级公告”4、选择“班级首页”，在第二列中的“班主任”，在“链接”文本框中键入链接5、依次对其他子菜单定义链接6、单击插入面板的“标签选择器”，弹出“标签选择器”对话框7、在“标题”文本框中键入工具提示的文本

二、制作窗口弹出信息1、在“文档”窗口中，单击“窗口”→“行为”，可以将行为附加到“标签检查器”上2、单击“添加行为”按钮，显示特定菜单3、单击“行为”→“弹出信息”对话框4、单击“确定”，保存预览网页效果

教学案例4:制作浏览窗口与预载入图像案例描述分析在浏览网页时，当打开一个新的页面，出现一个与窗口一样大小的图像，或者一个带有菜单栏的新窗口，在使用含有较多图像的对象时，可以将所用的图片预先下载到浏览器缓存中，以提高显示的速度和效果。实现步骤1、在菜单栏中，选择“窗口”→“行为”菜单项，打开“行为”面板，在“行为”面板中单击“添加行为”2、在弹出的快捷菜单中，选择“打开浏览器窗口”选项（“预先载入图像”选项），弹出“打开浏览器窗口”对话框（预先载入图像”对话框）3、在弹出的对话框中设置浏览器窗口的URL（预先载入图像的文件）

知识准备一、行为行为是某个事件和由该事件触发的动作组合。在“行为”面板中，可以先指定一个动作，然后指定触发该动作的事件，可以将行为附加到整个文档(即附加到body标签)，可以附加到链接、图像、表单元素和多种其他HTML元素，所选择的目标浏览器将确定对于给定的元素支持哪些事件。行为是客户端JavaScript代码，即它运行在浏览器中，而不是在服务器上应用行为：（1）单击“窗口”→“行为”，可以将行为附加到“标签检查器”上（2）单击“添加行为”按钮”，显示特定菜单（3）单击“行为”→“效果”，选择所要应用的效果

知识准备二、“marquee”标签“marquee”标签的功能：marquee是创建一个滚动的文本字幕(1)direction表示滚动的方向，值可以是left、right、up、down。(2)behav