1、第第8 8章章 在新媒体网页中添加动态特在新媒体网页中添加动态特效效本章学习要点：本章学习要点：1 1行为中动作的种类行为中动作的种类 2 2常用事件常用事件 3 3行为的添加与编辑行为的添加与编辑 4 4应用应用SPRYSPRY行为效果行为效果8.1 8.1 认识行为认识行为 Dreamweaver CS6行为将JavaScript代码放置在文档中，以允许用户与网页进行交互，实现各种网页特效。行为由事件事件和动作动作两部分组成:行为代码是客户端JavaScript代码，它运行于浏览器中，而不是服务器上。事件是浏览器生成的消息，指示网页的访问者执行了某些操作，如单击（onClick）、鼠标经过
2、（onMouseOver）等。动作是由预先编写的JavaScript代码组成的，这些代码执行特定的任务，如插入声音、弹出浏览器窗口、改变属性等。8.1.1 8.1.1 行为浮动面板行为浮动面板 选择【窗口】/【行为】命令打开行为浮动面板，如下图所示：8.1.2 8.1.2 应用行为应用行为 在为对象附加行为时，主要用于一些简单的事件（如单击、双击、鼠标经过等）和一些超级链接（如文字或图片）的应用。一般情况下，用户无法为未设置容器的普通文本设置行为，如果要为这类文本附加行为，可以为其添加一个空链接（#）或将其设置成容器文本（为文本添加标记）。8.2 8.2 使用使用Dreamweaver CS6
3、Dreamweaver CS6预定义行为预定义行为8.2.1 8.2.1 改变属性改变属性 改变属性行为用于更改对象某个属性的值，如表格的背景图像或AP DIV的字体等。但具体可以更改哪些属性是由当前选用的浏览器来决定的.8.2.1 8.2.1 改变属性改变属性 选中要附加行为的对象，单击【行为】面板中的按钮，从弹出的菜单中选择【改变属性】命令，弹出【改变属性】对话框，如图所示。8.2.2 8.2.2 弹出信息弹出信息 弹出信息行为会在某触发事件发生时，弹出一个对话框，提示用户一些信息，该对话框只有一个【确定】按钮。最常见的是当访问者进入某个网页时，系统自动弹出一个消息框，显示预先设定好的文本
4、，如“欢迎光临本站！”等，如图所示。8.2.2 8.2.2 弹出信息弹出信息 弹出信息行为会在某触发事件发生时，弹出一个对话框，提示用户一些信息，该对话框只有一个【确定】按钮。最常见的是当访问者进入某个网页时，系统自动弹出一个消息框，显示预先设定好的文本，如“欢迎光临本站！”等，如图所示。打开浏览器窗口行为可以在打开一个页面时，同时在一个新的窗口中打开指定的URL。用户可以根据情况指定新窗口的大小、特性（包括导航工具栏、菜单条、状态栏等）和名称 8.2.3 8.2.3 打开浏览器窗口打开浏览器窗口 8.2.3 8.2.3 打开浏览器窗口打开浏览器窗口 选中要附加行为的对象，单击【行为】面板中的
5、“+”按钮，从弹出的菜单中选择【打开浏览器窗口】命令，弹出【打开浏览器窗口】对话框，如图所示。8.2.4 8.2.4 交换图像和恢复交换图像交换图像和恢复交换图像 交换图像行为的效果与鼠标经过图像的效果一样，该行为通过更改标签中的src属性将一个图像与另一个图像进行交换。8.2.4 8.2.4 交换图像和恢复交换图交换图像和恢复交换图像像 1应用交换图像。插入或选中网页中要加入交换图像行为的图像，单击【行为】面板中的“+”按钮，从弹出的菜单中选择【交换图像】命令，弹出【交换图像】对话框，如图所示。8.2.5 8.2.5 显示显示隐藏元素隐藏元素 显示隐藏元素行为实际是由“显示元素”和“隐藏元素
6、”两个行为组成的，它可以显示、隐藏或者恢复一个或多个页面元素的默认可见性，主要用于在用户与页面进行交互时显示信息。8.2.5 8.2.5 显示显示隐藏元素隐藏元素 在网页中插入AP DIV，单击【行为】面板中的按钮，从弹出的菜单中选择【显示隐藏元素】命令，弹出【显示隐藏元素】对话框，在该对话框中设置AP DIV的显示、隐藏属性，如图所示。8.2.6 8.2.6 拖动拖动APAP元素元素 拖动AP元素行为可实现在规定范围内拖动AP元素，用以创建拼图游戏、滑块控件和其他可移动的界面元素。首先要在网页中插入AP DIV，单击【行为】面板中的“+”按钮，从弹出的菜单中选择【拖动AP元素】命令，弹出【拖
7、动AP元素】对话框，如图所示。8.2.6 8.2.6 拖动拖动APAP元素元素1设置容器的文本 设置容器的文本可以实现用指定的内容替换选择的AP元素等容器元素的内容和格式设置。选中目标对象后，单击【行为】面板中的“+”按钮，从弹出的菜单中选择【设置文本】/【设置容器的文本】命令，弹出【设置容器的文本】对话框，在【容器】下拉列表框中选择目标容器，在【新建HTML】文本框中输入需要替代的文本或用于替换的HTML代码，如图所示。8.2.7 8.2.7 设置文本设置文本 8.2.7 8.2.7 设置文本设置文本设置容器文本8.2.7 8.2.7 设置文本设置文本2设置文本域文字 设置文本域文字可以实现
8、用指定的内容替换表单文本域的内容。选中目标对象后，单击【行为】面板中的“+”按钮，从弹出的菜单中选择【设置文本】/【设置文本域文字】命令，弹出【设置文本域文字】对话框，在【文本域】下拉列表框中选择目标文本域，在【新建文本】文本框中输入需要替代的文本即可，如图所示。8.2.7 8.2.7 设置文本设置文本设置文本域文字3设置框架文本 设置框架文本可以实现用指定的内容替换框架的内容和格式设置。选中目标对象后，单击【行为】面板中的“+”按钮，从弹出的菜单中选择【设置文本】/【设置框架文本】命令，弹出【设置框架文本】对话框，在【框架】下拉列表表选择目标框架，然后在【新建HTML】文本框中输入需要替代的
9、文本或用于替换的HTML代码，如图所示。8.2.7 8.2.7 设置文本设置文本设置框架文本 8.2.7 8.2.7 设置文本设置文本4设置状态栏文本 设置状态栏文本可以实现用指定的文本替换浏览器窗口底部左侧状态栏中的显示信息。选中目标对象后，单击【行为】面板中的“+”按钮，从弹出的菜单中选择【设置文本】/【设置状态栏文本】命令，弹出【设置状态栏文本】对话框，在【消息】文本框中输入状态栏要显示的信息，如图所示。8.2.7 8.2.7 设置文本设置文本设置状态栏文本 8.2.7 8.2.7 设置文本设置文本 转到URL可以实现在当前窗口或指定的框架中打开一个新网页。选中目标对象后，单击【行为】面
10、板中的“+”按钮，从弹出的菜单中选择【转到URL】命令，弹出【转到URL】对话框，在【打开在】列表框中选择URL的打开位置，在【URL】文本框中输入或选择要打开文档的路径及名称，如图所示。8.2.8 8.2.8 转到转到URLURL 8.2.9 8.2.9 调用调用JavaScriptJavaScript 此动作可以设置当发生某个事件时应该执行的自定义函数或JavaScript 代码行。选中目标对象后，单击【行为】面板中的按钮，从弹出的菜单中选择【调用JavaScript】命令，弹出【调用JavaScript】对话框，在【JavaScript】文本框中输入函数的名称或要执行的JavaScrip
11、t，如图所示。调用JavaScript 8.2.9 8.2.9 调用调用JavaScriptJavaScript Spry行为效果是指【行为】面板中下拉菜单的【效果】命令中包含的7个行为，通过运用这些行为可以修改元素的缩放比例、样式、不透明度等，还可以组合多个属性来创建丰富的视觉效果。8.2.10 8.2.10 定义定义SprySpry效果效果 增大/收缩效果：用于实现网页元素的大小变换。挤压效果：使用元素从页面的左上角消失。显示/渐隐效果：使元素显示或渐隐。晃动效果：模拟从左向右显示元素。滑动效果：上下移动元素。遮帘效果：模拟百叶窗，向上或向下滚动百叶窗来隐藏或显示元素。高亮颜色效果：更改元
12、素的背景颜色。8.2.10 8.2.10 定义定义SprySpry效果效果具体操作步骤：1打开光盘文件“examplechapter08booklist.html”。2设置状态栏文本和打开浏览器窗口行为。将鼠标光标置于窗口的空白区域或在窗口左下角的标签选择器中选中“”标签，执行以下操作：8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为（1）设置状态栏文本。单击【行为】面板中的按钮，从弹出的菜单中选择【设置文本】/【设置状态栏文本】命令，弹出【设置状态栏文本】对话框，属性设置如图所示。8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为 单击【
13、确定】按钮，在【行为】面板中即显示刚刚添加的动作，并自动设置事件为“onMouseOver”，如图所示。8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为（2）打开浏览器窗口。单击【行为】面板中的按钮，从弹出的菜单中选择【打开浏览器窗口】命令，弹出【打开浏览器窗口】对话框，属性设置如图所示。单击【确定】按 钮，在【行 为】面 板 中 自 动 设 置 事 件 为“onLoad”。8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为3设置改变属性行为。（1）改变网页背景图片。选中网页顶部左侧的文本“清新背景”，单击【行为】面板中的按钮，从弹出的菜单
14、中选择【改变属性】命令，弹出【改变属性】对话框，属性设置如图所示。单击【确定】按钮，在【行为】面板中选择“onClick”事件。8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为设置背景图像属性（2）改变文本背景颜色。再次选中文本“清新背景”，单击【行为】面板中的按钮，从弹出的菜单中选择【改变属性】命令，属性设置如图所示，单击【确定】按钮，在【行为】面板中选择“onMouseOver”事件。8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为 用同样的方法，再设置“td
15、1”的背景色为“#9ACC15”，选择“onMouseOut”事件。然后选择文本“楷体网页”，在【改变属性】中【元素ID】选择“td2”，其他设置过程同“清新背景”的设置。8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为（3）改变网页字体。选中网页顶部左侧的文本“楷体网页”，单击【行为】面板中的按钮，从弹出的菜单中选择【改变属性】命令，弹出【改变属性】对话框，属性设置如图所示，单击【确定】按钮，在【行为】面板中选择“onClick”事件。8.2.11 8.2.11 课堂案例课堂案例在网页中应
16、用行为在网页中应用行为整个网页应用行为的效果如图所示。8.2.11 8.2.11 课堂案例课堂案例在网页中应用行为在网页中应用行为8.2.12 8.2.12 课堂案例课堂案例为网页添加为网页添加SprySpry效果效果具体操作步骤：1打开光盘文件“examplechapter08behavior.html”。2添加【增大/收缩】效果。选中第一列名为“jinmao.jpg”的图像，单击【行为】面板中的按钮，从弹出的菜单中选择【效果】/【增大/收缩】命令，弹出【增大/收缩】对话框，属性设置如图所示。单击【确定】按钮，在【行为】面板中设置事件为“onClick”。8.2.12 8.2.12 课堂案例
17、课堂案例为网页添加为网页添加SprySpry效果效果【增大/收缩】对话框 3添加【显示/渐隐】效果。选中第二列名为“hashiqi.jpg”的图像，单击【行为】面板中的按钮，从弹出的菜单中选择【效果】/【显示/渐隐】命令，弹出【显示/渐隐】对话框，属性设置如图所示。单击【确定】按钮，在【行为】面板中设置事件为“onMouseOver”。8.2.12 8.2.12 课堂案例课堂案例为网页添加为网页添加SprySpry效果效果8.2.12 8.2.12 课堂案例课堂案例为网页添加为网页添加SprySpry效果效果【显示/渐隐】对话框 4添加【晃动】效果。选中第三列名为“labuladuo.jpg”
18、的图像，单击【行为】面板中的按钮，从弹出的菜单中选择【效果】/【晃动】命令，弹出【晃动】对话框，如图所示。单击【确定】按钮，在【行为】面板中设置事件为“onMouseOver”。8.2.12 8.2.12 课堂案例课堂案例为网页添加为网页添加SprySpry效果效果5添加【遮帘】效果。单击【行为】面板中的按钮，从弹出的菜单中选择【效果】/【遮帘】命令，弹出【遮帘】对话框，属性设置如图所示。单击【确定】按钮，在【行为】面板中设置事件为“onClick”。8.2.12 8.2.12 课堂案例课堂案例为网页添加为网页添加SprySpry效果效果【遮帘】对话框 8.2.12 8.2.12 课堂案例课堂
19、案例为网页添加为网页添加SprySpry效果效果8.3 8.3 使用使用SprySpry折叠式构件折叠式构件8.3.1 Spry选项卡式面板选项卡式面板 Spry选项卡面板构件是一组面板，用来将内容存储到紧凑的空间中。用户可以单击选项卡来隐藏或显示存储在选项卡式面板中的内容，当用户单击不同的选项卡时，构件的面板会相应的打开。在给定时间内，选项卡面板构件中只有一个内容面板处于当前打开状态。将鼠标光标定位到目标位置，选择【插入】/【Spry】/【Spry选项卡式面板】命令，在文档窗口中插入一个Spry选项卡式面板。单击该面板，显示选项卡式面板【属性】检查器，如图所示。8.3.1 Spry选项卡式面
20、板 将鼠标光标定位到目标位置，选择【插入】/【Spry】/【Spry可折叠面板】命令，在文档窗口中插入一个Spry可折叠面板。单击该面板，显示Spry可折叠面板【属性】检查器，如图所示。8.3.2 Spry折叠式面板 8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏具体操作步骤：1打开光盘文件“examplechapter08Spryspryselect.html”。2添加Spry选项卡式面板。将鼠标光标定位到文本“唐诗”的下方，选择【插入】/【Spry】/【Spry选项卡式面板】命令，在文档窗口中插入一个Spry选项卡式面板，选中该面板，在【属性】检查器的【面板】中单击按钮，再添加两
21、个面板。返回到设计窗口，选中Spry选项卡式面板上的“标签1”，将“标签1”替换成“行路难”，另外三个标签分别替换成“春夜喜雨”、“钱塘湖春行”和“锦瑟”，如图所示。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏3编辑Spry选项卡式面板。（1）设置独立Tab的CSS样式。选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，在【CSS样式】面板中展开“SpryTabbedPanels.css”，双击“.TabbedPanelsTab”，如图所示。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏（2）【.TabbedPanelsTab的CSS规则定义】在【类型】选项中，设
22、置【Font-family】为“楷体”，【Font-size】为“1em”，【Color】为“#FFF”。在【背景】选项中，设置【Background-color】为“#060”。在【区块】选项中，设置【Text-align】为“center”。在【边框】选项中，设置【Style】为“solid”,【Width】为“1”,【Color】依次为“#333”、“#333”、“#999”和“#CCC”。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏（3）设置鼠标经过特效。选择“.TabbedPanelsTabHover”样式，设置【B
23、ackground-color】为“#630”。（4）设置当前选项卡样式。选择“.TabbedPanelsTabSelected”样式，设置【Background-color】为“#006”。（5）设置Tab页内容样式。选择“.TabbedPanelsContent”样式，在【类型】选项中，设置【Font-family】为“楷体”，【Font-size】为“16px”，【Line-height】为“24px”，【Color】为“#630”。（6）添加内容。在文档窗口选择“行路难”选项卡，将鼠标光标置于“内容1”面板，插入一个一行二列的表格，设置表格【宽】为“100%”，设置第一个单元格【宽】为
24、“55%”；第二个单元格【宽】为“45%”，【水平】对齐方式为“居中对齐”。打开“古诗词.doc”文件，复制“行路难”文本到第一个单元格。将鼠标光标置于第二个单元格，选择【插入】/【图像】命令，插入路径为“images/libai.jpg”的图像。用同样的方法添加其他几个选项卡的内容。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏网页显示效果如图所示。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏4添加Spry可折叠面板。将鼠标光标定位到文本“宋词”的下方，选择【插入】/【Spry】/【Spry可折叠面板】命令，在文档
25、窗口中插入一个Spry可折叠面板，继续用同样方法再插入三个Spry可折叠面板。选中Spry可折叠面板上的“标签”，将“标签”替换成“水调歌头”，另外三个标签分别替换成“卜算子咏梅”、“浪淘沙”和“醉花阴”，如图所示。5编辑Spry可折叠面板。（1）设置Spry可折叠面板的初始CSS样式。打开【CSS样式】面板，在【CSS样式】面板中展开“SpryCollapsiblePanels.css”，双击“.CollapsiblePanelTab”，如图所示。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏（2）【.CollapsiblePanelTab的CSS规则定义】在【类型】选项中，设置【
26、Font-family】为“楷体”，【Font-size】为“18px”，【Line-height】为“35px”,【Color】为“#FFF”。在【背景】选项中，设置【Background-color】为“#FFF”，【Background-image】为“url(./spry/images/titl.png)”，【Background-repeat】为“no-repeat”。在【方框】选项中，设置【Height】为“33”，取消【Padding】下【全部相同】的复选，设置【左】的值为“80px”。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏8.3.3 8.3.3 课堂案例课堂案
27、例古诗鉴赏古诗鉴赏（3）设置鼠标经过特效 选择“.CollapsiblePanelTabHover,.CollapsiblePanelOpen.CollapsiblePanelTabHover”样式，设置：【Background-color】为“#FFF”，【Background-image】为“url(./spry/images/titl2.png)”，【Background-repeat】为“no-repeat”。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏（4）设置获得焦点特效。选择“.CollapsiblePanelFocused.CollapsiblePanelTab”样
28、式，设置【Background-color】为“#FFF”。（5）设置Spry可折叠面板的内容。选择“.CollapsiblePanelContent”样式，在【类型】选项中，设置【Font-family】为“楷体”，【Font-size】为“16px”，【Line-height】为“24px”,【Color】为“#630”；在【背景】选项中，设置【Background-color】为“#EEE”。（6）设置Spry可折叠面板的展开样式。选择“.CollapsiblePanelOpen.CollapsiblePanelTab”样式，设置【Background-color】为“#FFF”，【Ba
29、ckground-image】为“url(./spry/images/titl3.png)”，【Background-repeat】为“no-repeat”。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏（7）添加内容。将鼠标光标置于“水调歌头”面板的内容区域，插入一个一行二列的表格，设置表格【宽】为“100%”，设置第一个单元格【宽】为“55%”；第二个单元格【宽】为“45%”，【水平】对齐方式为“居中对齐”。打开“古诗词.doc”文件，复制“水调歌头”文本到第一个单元格。将鼠标光标置于第二个单元格，选择【插入】/【图像】命令，插入路径为“images/sushi.jpg”的图像。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏 用同样的方法设置余下的三个面板。网页显示效果如图所示。8.3.3 8.3.3 课堂案例课堂案例古诗鉴赏古诗鉴赏
