第7章 网页交互应用.ppt

1、第一、七章随着网页交互应用节目、网络技术的发展，网页可以通过各种先进的前台脚本技术实现丰富的用户交互应用节目。几乎所有浏览器都支持用户通过JavaScript等脚本语言(如JavaScript)编写各种交互式应用程序，以响应网页浏览器中的各种即时操作。“牙齿”一章中的学习要点：2，创建AP Div元素添加自定义AP Div元素网页行为设置网页行为属性设置Spry框架，创建和应用7.1 AP Div元素，3，AP Div元素(AP元素)是Dreamweaver特有的布局元素之一，具有特殊属性的Div标签。Dreamweaver使用户可以轻松设置AP Div元素位置、尺寸和堆叠顺序等属性，以创建灵

2、活的布局，或将各种网页对象放在页面上的任意位置。基于牙齿功能，大多数网页行为与AP Div元素相关。7.1.1 DIV标签，4，在介绍AP Div元素时，首先要了解DIV标签的作用。Div标签是最基本的XHTML布局标签。几乎所有web标准化网页都使用Div标签来实现多种样式的网页布局。DIV标签可以插入各种图像、文本或多媒体内容。AP Div元素是Div标签的特殊实例。插入Div标签的各种属性，创建7.1.2 AP Div元素，了解DIV标签后，您将学习如何创建特殊DIV标签AP Div元素。为了帮助用户更轻松地创建AP Div元素，Dreamweaver允许用户以用户绘制的方式创建AP D

3、iv元素，允许用户拖动以定义AP Div元素尺寸和位置。插入5，6，1 AP Div元素、在Dreamweaver中，用户可以直接从“插入”面板中选择“布局”列表项目、“绘制AP Div”按钮单击、拖动鼠标或绘制网页AP Div元素。7，2嵌套AP Div元素、嵌套AP Div元素、网页文档的第一个AP Div元素，然后将鼠标光标放在AP Div元素内并执行“插入| 布局对象 | AP Div”命令。7.1.3 AP Div元素基本任务、重要布局元素、重要布局、选择8，9，1 AP Div元素、网页设计用户经常需要选择网页内的各种AP Div元素，例如应用另一个AP Div元素、隐藏AP Di

4、v元素等。显示或隐藏10，2 AP Div元素；在“AP元素”面板中，用户可以通过简单的操作设置显示或隐藏AP Div元素的属性。防止11，3 AP Div元素重叠。AP Div元素是可在网页任意位置自由部署的布局元素，因此在将AP Div元素添加到网页文档中时，您可能需要避免多个AP Div元素之间的重叠。通过修改12，4 AP Div元素级联顺序，以及在“AP元素”面板中修改AP Div元素之间的级联顺序，用户可以更改显示顺序。设置7.1.4 AP Div元素属性，使用Dreamweaver绘制各种AP Div元素，然后用户可以通过Dreamweaver CS4的“属性”检查器轻松编辑单个

5、或多个AP Div元素属性，从而简化网页布局。13，1 AP Div元素剪辑、AP Div元素各种属性、14，2多个AP Div元素剪辑和Dreamweaver可以同时编辑多个AP Div元素属性和独立AP Div元素。如果选择了多个AP网络，则“属性”面板将显示文本属性和所有AP元素属性的一个子集。您可以更改牙齿子集属性，将其应用于AP Div元素。这是Dreamweaver CS4的重要功能，7.2网页行为。牙齿功能使用户可以实施各种网页交互应用程序，方法是通过介面操作选择相关类型的行为，然后设置触发该行为的事件和目标，而无需编写JavaScript脚本代码。15，7.2.1“标签”检查器

6、面板和行为，Dreamweaver CS4中的内置“标签”面板允许您添加或管理Dreamweaver的各种内置行为。、网页行为剪辑按钮、7.2.2文本信息行为、文本信息行为是文本相关行为(设置集装箱文本、设置状态栏文本等)；Dreamweaver CS4中内置的各种JavaScript脚本功能使添加和更改各种XHTML集装箱、网页浏览器状态栏等更加方便；设置17，1集装箱文本；设置2状态栏文本，应用集装箱文本的交互行为后，可以根据指定事件触发交互，以更新的内容替换容器中已有的内容。7.2.3窗口信息行为、窗口交互行为也是重要的网页交互，是浏览器窗口、浏览器对话框相关网页交互。在Dreamwea

7、ver CS4字典设置的行为中，网页交互行为主要包括两个茄子窗口交互行为：弹出消息和打开浏览器窗口。18，19，1弹出消息，2打开浏览器窗口。“弹出消息”行为是显示包含指定文本消息的JavaScript警告对话框。与弹出信息行为类似，打开浏览器窗口是一种重要的网页行为，触发该行为时，它会打开当前网页网页窗口，并在窗口中显示其他网页文档的内容。7.2.4图像效果动作，图像是网页中最明显、用户最容易理解的内容。Dreamweaver CS4提供了Dreamweaver图像交互行为，该行为使图像更加动态。Dreamweaver中的图像交互行为主要包括交换图像行为、导航栏图像行为等。20，1图像更换、

8、图像更换功能是将一个网页图像转换为另一个网页图像的行为功能。导航条是网页中相当常见的部分。您可以使用Dreamweaver CS4的行为功能创建合并鼠标单击事件的复杂导航条。2导航栏图像、7.2.5效果动作、效果动作通过向网页中的各种图像、AP Div元素等添加特殊动画效果进一步增强网页移动。Dreamweaver字典设置了7茄子默认效果行为，您可以逐步修改这些网页元素属性。21，22，1增量/收缩行为，增量/收缩效果行为的作用是逐步动态更改网页图像的尺寸以创建特殊效果动画效果。2挤压行为，挤压效果也是图像的缩放曹征效果。不同于“增量/收缩”效果，您不能设置直接收缩图像的起始尺寸、结束尺寸和收

9、缩所需的时间。向图像添加挤压效果会以指定的加速度缩小，直到图像完全消失。23，3显示器/淡入淡出动作、4摇动动作、“显示器/淡入淡出”效果类似于“增加/收缩”效果，可以通过相应的对话框进行自定义，从而获得提高或降低网页图像透明度的动画效果。摇晃效果设置为类似于挤压。在这些效果中，可以向图像中添加行为，而无需用户设置相关属性。24，5滑动动作、6掩码动作、滑动效果也是重要的Dreamweaver动作。您可以控制网页中的图像从上到下或从下到上。与以前对图像的效果行为不同，滑动效果不能直接应用于网页图像，只能应用于具有ID属性的图层。遮罩效果是向图像添加遮罩，然后在图像的上方或下方逐渐移动，直到图像

10、完全被遮盖。与幻灯片效果一样，快门效果必须应用于具有ID属性的div标签中，才能起作用。25，7姜潮颜色，姜潮颜色效果更改元素背景颜色。通常用于定义背景图像(如表格和AP元素)的网页容器。对这些网页对象使用姜潮颜色效果时，请确保不要插入尺寸大图像或视频等。、7.3 Spry框架、Spry框架是一种简单的网页交互解决方案，它是通过将JavaScript与XHTML和CSS样式等技术相结合开发的布局元素。Spry框架使您可以轻松地将各种菜单、导航和面板等结构添加到网页结构中，从而丰富网页应用程序。26、7.3.1 Spry菜单栏构件，Spry菜单栏是一组可导航的菜单按钮，提供两个方向(水平和垂直)的导航菜单样式，可在有限的网页页面上显示大量可导航信息。当访问者鼠标移动到菜单栏上的按钮上时，将显示按钮下的子菜单。27，7.3.2 Spry选项卡面板构件，Spry选项卡面板构件是一组选项卡面板，用于在多个选项卡中存储大量内容，并根据访问者单击选项卡标签显示相应的选项卡内容。Spry选项卡式面板构件可以最大限度地减少显示这些内容所需的页面空间，并提高页面显示效率。28，7.3.3 Spry折叠构件和Spry折叠面板构件是可折叠面板，您可以在较小的空间中存储大量内容。访问者可以通过单击面板的相应选项卡在手风琴小部件中隐藏或显示。Spry手