第11章 网页交互与特效ppt课件（完整版）.pptx

第11章 网页交互与特效ppt课件（完整版）第5章网页中的多媒体网页交互与特效第 11 章本书编写组网页设计与制作（微课版第3 版）第5章网页中的多媒体11.1网页的交互行为11.2Spry框架11.3综合实训案例：制作导航条第5章网页中的多媒体学习目标 掌握拖动掌握拖动APAP元素、显示隐藏元素等交互行为；元素、显示隐藏元素等交互行为； 掌握掌握SprySpry菜单栏、菜单栏、SprySpry选项卡式面板；选项卡式面板； 掌握掌握SprySpry折叠式；折叠式； 理解理解SprySpry可折叠面板可折叠面板。在在网页中添加一些交互行为和网页中添加一些交互行为和特效，这样特效，这样制作出来的网页风格突出、新制作出来的网页风格突出、新颖，能让浏览者过目不忘，也能增加网站的访问量。网页的交互行为和颖，能让浏览者过目不忘，也能增加网站的访问量。网页的交互行为和特效一般由特效一般由JavaScriptJavaScript脚本代码完成，但对于没有任何编程基础的设计脚本代码完成，但对于没有任何编程基础的设计者来说，可以使用者来说，可以使用Dreamweaver CS6Dreamweaver CS6中内置的行为功能，而不用书写一中内置的行为功能，而不用书写一行行代码，来实现页面丰富的动态效果，且操作也比较简单行行代码，来实现页面丰富的动态效果，且操作也比较简单。第5章网页中的多媒体11.1网页的交互行为行为是被用来动态响应用户操作、改变当前页面效果或是执行特定任行为是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的方法。行为是由一个事件所触发的动作的表现。事件是浏览者对务的方法。行为是由一个事件所触发的动作的表现。事件是浏览者对网页所做的事情，如单击某个图像、鼠标指针经过指定的对象等网页所做的事情，如单击某个图像、鼠标指针经过指定的对象等。拖动拖动APAP元素元素APAP（absolute positionabsolute position）元素是指绝对定位的元素，）元素是指绝对定位的元素，“拖动拖动APAP元素元素”行为可以让浏览者拖动绝对定位的行为可以让浏览者拖动绝对定位的APAP元素，即在浏览页面中，浏览者元素，即在浏览页面中，浏览者可以将可以将APAP元素（如图像等）拖动到一个新的位置元素（如图像等）拖动到一个新的位置。第5章网页中的多媒体11.1网页的交互行为11.1.1 11.1.1 拖动拖动APAP元素元素单击单击“插入插入”面板面板“布局布局”下的下的“绘制绘制AP Div”AP Div”，绘制，绘制APAP元素，元素，如如下左图所下左图所示示。拖动。拖动“绘制绘制AP Div”AP Div”至文档页面窗口中，松开鼠标左键至文档页面窗口中，松开鼠标左键后即可绘制一个后即可绘制一个APAP元素，如下右图所示。元素，如下右图所示。第5章网页中的多媒体11.1网页的交互行为11.1.1 11.1.1 拖动拖动APAP元素元素 调整调整APAP元素大小与图元素大小与图像大小相适应之后，在像大小相适应之后，在这两者之外的空白区域这两者之外的空白区域单击，即可取消对单击，即可取消对APAP元元素或图像的选择。单击素或图像的选择。单击 如如图中图中的的 是对是对APAP元素的元素的选择，而单击图像则只选择，而单击图像则只对图像进行对图像进行选择选择。第5章网页中的多媒体11.1网页的交互行为11.1.1 11.1.1 拖动拖动APAP元素元素 取消对取消对APAP元素的选择，单击元素的选择，单击“行为行为”面板中的面板中的“添加行为添加行为”按钮按钮 ，出现如图所出现如图所示的下拉菜单示的下拉菜单。第5章网页中的多媒体11.1网页的交互行为11.1.1 11.1.1 拖动拖动APAP元素元素 在菜单中选择在菜单中选择“拖动拖动APAP元素元素”命令，即可打开命令，即可打开“拖动拖动APAP元素元素”对对话框，话框，如左所如左所示。单击示。单击“确定确定”按钮，按钮，得到如右图所得到如右图所示的效果示的效果。第5章网页中的多媒体11.1网页的交互行为11.1.1 11.1.1 拖动拖动APAP元素元素 保存，在保存，在浏览器中用鼠标拖动图像，释放鼠标后，该图像将停留浏览器中用鼠标拖动图像，释放鼠标后，该图像将停留在新位置上，如在新位置上，如图所图所示。此功能可用来制作拼图游戏等示。此功能可用来制作拼图游戏等。第5章网页中的多媒体11.1网页的交互行为11.1.1 11.1.1 拖动拖动APAP元素元素任务任务1 1：设置：设置“拖动拖动APAP元素元素”行为行为 单击单击“插入插入”面板面板“布局布局”下的下的“绘制绘制AP Div”AP Div”，绘制，绘制APAP元素。元素。 在在APAP元素内部插入图像或输入文本内容等。元素内部插入图像或输入文本内容等。 调整调整APAP元素大小与图像大小相适应。元素大小与图像大小相适应。 取消对取消对APAP元素的选择。元素的选择。 保存保存，在浏览器中查看效果，在浏览器中查看效果。第5章网页中的多媒体11.1网页的交互行为11.1.2 11.1.2 显示显示隐藏元素隐藏元素“显示隐藏元素显示隐藏元素”行为可以控制页面元素的显示、隐藏或默认的可见行为可以控制页面元素的显示、隐藏或默认的可见性。该行为可实现在浏览者与网页进行交互时显示信息的效果性。该行为可实现在浏览者与网页进行交互时显示信息的效果。 新建或打开一个已建的网页。新建或打开一个已建的网页。 在在网页中插入一幅图像（也可以是其他元素），选择该图像，网页中插入一幅图像（也可以是其他元素），选择该图像，并在下方的并在下方的“属性属性”面板面板“链接链接”文本框中输入文本框中输入“# #”，其作用是将，其作用是将图像设置为空链接图像设置为空链接。第5章网页中的多媒体11.1网页的交互行为11.1.2 11.1.2 显示显示隐藏元素隐藏元素 单击单击“插入插入”面板面板“布局布局”下的下的“绘制绘制AP DivAP Div”。拖动。拖动“绘制绘制AP AP DivDiv”至文档页面窗口中，松开鼠标后会绘制一个至文档页面窗口中，松开鼠标后会绘制一个APAP元素层，然后在第一元素层，然后在第一个个APAP元素层中再以同样的方式绘制嵌套的元素层中再以同样的方式绘制嵌套的APAP元素子层，并在子层中输入元元素子层，并在子层中输入元素，如文字信息，如素，如文字信息，如图所图所示示。第5章网页中的多媒体11.1网页的交互行为11.1.2 11.1.2 显示显示隐藏元素隐藏元素 通过面板的通过面板的“APAP元素元素”将包将包含图像说明信息的含图像说明信息的APAP元素子层的可元素子层的可见性设为见性设为“打开时隐藏打开时隐藏”，即单击，即单击显示图标显示图标 ，将变为隐藏图标，将变为隐藏图标 。如如图所图所示的示的apDiv5apDiv5对应的就是对应的就是APAP元素元素子层子层。第5章网页中的多媒体11.1网页的交互行为11.1.2 11.1.2 显示显示隐藏元素隐藏元素 选中文档页面中的图像，选中文档页面中的图像，在在“行为行为”面板中单击面板中单击“添加添加行为行为”按钮按钮 ，从弹出的下拉，从弹出的下拉菜单中选择菜单中选择“显示显示- -隐藏元素隐藏元素”命令，弹出命令，弹出“显示显示- -隐藏元素隐藏元素”对话框，选择对话框，选择“divapDiv5”divapDiv5”，单击，单击“显显示示”按钮后会在按钮后会在“divapDiv5”divapDiv5”后面增加后面增加“（显示）（显示）”，如，如图所图所示示。第5章网页中的多媒体11.1网页的交互行为11.1.2 11.1.2 显示显示隐藏元素隐藏元素 单击图单击图11-1011-10中的中的“确定确定”按钮，按钮，得到如下左图所得到如下左图所示的界面。同理，示的界面。同理，在图在图11-1011-10中选择中选择“div”apDiv4“”div”apDiv4“”（APAP元素第一层），并单击元素第一层），并单击“隐藏隐藏”按钮，确定后按钮，确定后得到如下右图所得到如下右图所示的界面示的界面。第5章网页中的多媒体11.1网页的交互行为11.1.2 11.1.2 显示显示隐藏元素隐藏元素 保存文档页面后，保存文档页面后，按按F12F12键或用浏览器浏键或用浏览器浏览，当鼠标指针移动到览，当鼠标指针移动到图像上时就会显示图像图像上时就会显示图像的文字说明信息，的文字说明信息，如如如如图所图所示示。第5章网页中的多媒体11.2Spry框架11.2.1 11.2.1 SprySpry效果效果效果通常是在一段时间内效果通常是在一段时间内高亮显示信息，创建动画过高亮显示信息，创建动画过渡或者以可视化方式修改页渡或者以可视化方式修改页面元素。面元素。 选中某个元素，如一选中某个元素，如一幅图像，单击幅图像，单击“行为行为”面板面板中的中的“添加行为添加行为”按钮按钮 ，在弹出的下拉菜单中选择在弹出的下拉菜单中选择“效果效果”命令，弹出下级子命令，弹出下级子菜单菜单，如图所，如图所示示。第5章网页中的多媒体11.2Spry框架11.2.1 11.2.1 SprySpry效果效果 单击某单击某一效果一效果，如，如“增大增大/ /收缩收缩”，弹出相应的对话框，弹出相应的对话框，如下左图如下左图所所示。设置完成后单击示。设置完成后单击“确定确定”按钮，按钮，得到如下右图所得到如下右图所示的界面示的界面。第5章网页中的多媒体11.2Spry框架11.2.1 11.2.1 SprySpry效果效果 在在浏览器中单击图像元素，即可看到图像浏览器中单击图像元素，即可看到图像“增大增大/ /收缩收缩”效果，如图效果，如图11-1711-17所示。通过组所示。通过组合两个或多个效果可以创建更有趣的视觉效果合两个或多个效果可以创建更有趣的视觉效果。其中，其中，“滑动滑动”效果需要将目标元素（效果需要将目标元素（imageimage、divdiv等）包含在一个具有唯一等）包含在一个具有唯一idid的的标签中，标签中，代码如下：代码如下： 选中该选中该标签，然后按照前面添加效果的方标签，然后按照前面添加效果的方法操作，在浏览器中打开即可看到效果法操作，在浏览器中打开即可看到效果。第5章网页中的多媒体11.2Spry框架11.2.2 11.2.2 SprySpry菜单菜单栏栏1 1插入菜单栏构件插入菜单栏构件单击单击“插入插入”面板面板“布局布局”下的下的“SprySpry菜单栏菜单栏”。在在弹出的弹出的“SprySpry菜单栏菜单栏”对话框中选择对话框中选择“水平水平”或或“垂直垂直”单选按钮，这里选单选按钮，这里选择择“水平水平”，如上右图所如上右图所示，示，单击单击“确定确定”按钮。按钮。在在“设计设计”视图中将显示视图中将显示插入的插入的SprySpry菜单栏构件，菜单栏构件，如如下右图所下右图所示示。第5章网页中的多媒体11.2Spry框架11.2.2 11.2.2 SprySpry菜单菜单栏栏2 2添加菜单项添加菜单项 在在“属性属性”面板中单击第面板中单击第1 1列（主菜单项）上方的列（主菜单项）上方的“添加菜单项添加菜单项”按钮按钮 ，即可添加一个新的菜单项。，即可添加一个新的菜单项。“文本文本”与所选的菜单层级相与所选的菜单层级相对应，选择某一层级对应，选择某一层级“菜单菜单”后，在最右侧的后，在最右侧的“文本文本”文本框中可文本框中可以重命名该菜单项。在以重命名该菜单项。在“链接链接”文本框中可输入或通过文本框右侧文本框中可输入或通过文本框右侧“浏览浏览”按钮选择要链接到的页面按钮选择要链接到的页面。如左下图所示。如左下图所示。 保存网页，在浏览器中浏览效果，如保存网页，在浏览器中浏览效果，如图图如下右图如下右图所所示。示。第5章网页中的多媒体第5章网页中的多媒体SprySpry菜单栏菜单栏任务任务2 2：设置菜单栏：设置菜单栏 在网页中单击在网页中单击“插入插入”面板面板“布局布局”下的下的“SprySpry菜单栏菜单栏”。 在在“SprySpry菜单栏菜单栏”对话框中选择对话框中选择“水平水平”或或“垂直垂直”单选项。单选项。 在网页插入的菜单栏构件。在网页插入的菜单栏构件。 添加菜单项。添加菜单项。 保存网页，在浏览器中浏览效果。保存网页，在浏览器中浏览效果。3 3删除菜单项删除菜单项4 4对菜单项排序对菜单项排序5 5保存保存JavaScriptJavaScript文件和文件和CSSCSS。第5章网页中的多媒体11.2Spry框架11.2.3 11.2.3 SprySpry菜单菜单栏栏 单击单击“插入插入”面板面板“布局布局”下的下的“SprySpry选项卡式面板选项卡式面板”。 网页网页“设计设计”视图中显示了插入的选项卡式面板构件，如视图中显示了插入的选项卡式面板构件，如图所图所示示。第5章网页中的多媒体11.2Spry框架11.2.3 11.2.3 SprySpry菜单菜单栏栏 在在“标签标签1 1”和和“标签标签2 2”上单击，即可重命名标签。每个选项上单击，即可重命名标签。每个选项卡中都有卡中都有“内容内容1 1”或或“内容内容2 2”等，在等，在“内容内容”区域中可插入各种区域中可插入各种HTMLHTML，如如下左下左图和图和下右下右图所图所示示。第5章网页中的多媒体11.2Spry框架11.2.4 11.2.4 SprySpry折叠式面折叠式面板板 单击单击“插入插入”面板面板“布局布局”下的下的“SprySpry折叠式折叠式”。 网页网页“设计设计”视图中显示了插入的视图中显示了插入的折叠式面板构件，如折叠式面板构件，如图所图所示。示。 网页网页“设计设计”视图中的视图中的“标签标签1”1”和和“标签标签2”2”代表代表SprySpry折叠式面板默折叠式面板默认有两个选项卡。在认有两个选项卡。在“标签标签1”1”和和“标签标签2”2”上单击，即可重命名标签。上单击，即可重命名标签。每个选项卡中都有每个选项卡中都有“内容内容1”1”或或“内内容容2”2”等，在等，在“内容内容”区域中可插入区域中可插入各种各种HTMLHTML对象对象。第5章网页中的多媒体11.2Spry框架11.2.4 11.2.4 SprySpry折叠式面折叠式面板板 单击如图中单击如图中“面板面板”区域的区域的“标签标签2”2”，可得到图，可得到图11-2611-26所示的效果。所示的效果。在在“属性属性”面板的面板的“面板面板”区域中可添加、删除面板或对面板排序区域中可添加、删除面板或对面板排序。第5章网页中的多媒体11.2Spry框架11.2.5 11.2.5 SprySpry可折叠面可折叠面板板SprySpry可折叠面板是一个面板，它可将内容存储在紧凑的空间中，用户单可折叠面板是一个面板，它可将内容存储在紧凑的空间中，用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。 单击单击“插入插入”面板面板“布局布局”下的下的“SprySpry可折叠面板可折叠面板”。 网页网页“设计设计”视图中显示了插入的可折叠面板构件，如视图中显示了插入的可折叠面板构件，如图所图所示示。第5章网页中的多媒体11.2Spry框架11.2.5 11.2.5 SprySpry可折叠面可折叠面板板 网页网页“设计设计”视图中的视图中的“标签标签”表示面板的名称，单击可重命名表示面板的名称，单击可重命名标签。标签。“内容内容”区域中可插入各种区域中可插入各种HTMLHTML对象（会被隐藏或显示的内对象（会被隐藏或显示的内容）。容）。 “ “属性属性”面板中的面板中的“显示显示”下拉列表框表示在编辑时打开或关闭下拉列表框表示在编辑时打开或关闭面板，面板，“默认状态默认状态”下拉列表框表示在浏览器中浏览时默认是打开下拉列表框表示在浏览器中浏览时默认是打开的还是关闭的面板的还是关闭的面板。任务任务3 3：隐藏或显示存储内容：隐藏或显示存储内容单击单击“插入插入”面板面板“布局布局”下下“SprySpry可折叠面板可折叠面板”。在在网页中插入网页中插入SprySpry可折叠面板构件可折叠面板构件。在在“内容内容”区域中插入会被隐藏或显示的内容。区域中插入会被隐藏或显示的内容。保存保存，在浏览器中浏览打开或关闭面板时的效果，在浏览器中浏览打开或关闭面板时的效果。第5章网页中的多媒体11.3综合实训案例：制作导航条导航导航条是网站的重要组成部分之一，浏览者可以通过导航条快速跳条是网站的重要组成部分之一，浏览者可以通过导航条快速跳转到指定的位置，方便浏览网站的内容。本案例将在网页文档中插转到指定的位置，方便浏览网站的内容。本案例将在网页文档中插入入SprySpry菜单栏制作网站导航条菜单栏制作网站导航条，详细操作步骤请参见教材。，详细操作步骤请参见教材。第5章网页中的多媒体本章小结 使用使用Dreamweaver CS6Dreamweaver CS6内置的行为功能和内置的行为功能和SprySpry构件，以及构件，以及APAP元素，不元素，不用输入代码，就可使网页具有一些动态效果，这些动态效果是在客户用输入代码，就可使网页具有一些动态效果，这些动态效果是在客户端实现的。端实现的。Dreamweaver CS6Dreamweaver CS6添加行为实际上是添加行为实际上是Dreamweaver CS6Dreamweaver CS6自动给自动给网页添加了一些网页添加了一些JavaScriptJavaScript实现动态效果的脚本代码。在网页制作过程中，实现动态效果的脚本代码。在网页制作过程中，设计者要合理运用设计者要合理运用Dreamweaver CS6Dreamweaver CS6中的动态效果，以增强网页的功能中的动态效果，以增强网页的功能。