第7章__网页交互应用.ppt

1、1,第7章 网页交互应用,随着互联网技术的发展，网页借助各种先进的前台脚本技术，可以实现丰富的用户交互应用。几乎所有的浏览器都支持用户通过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允许用户以绘

3、制的方式创建AP Div元素，同时允许用户以拖拽的方式定义AP Div元素的尺寸和位置。,5,6,1插入AP Div元素,在Dreamweaver中，用户可以直接在【插入】面板中选择【布局】的列表项目，然后单击【绘制AP Div】按钮，拖动鼠标，为网页绘制AP Div元素。,7,2嵌套AP Div元素,嵌套AP Div元素，首先需要为网页文档绘制第一个AP Div元素，然后，将鼠标光标置于该AP Div元素中，执行【插入】|【布局对象】|【AP Div】命令，即可将第二个AP Div元素嵌套进之前的AP Div元素中。,7.1.3 AP Div元素基本操作,作为一种重要的布局元素，Dreamw

4、eaver CS4提供了一个专门的【AP元素】面板以控制和操作各种AP Div元素，包括选择AP元素、设置其显示/隐藏、设置AP元素的重叠等。,8,9,1选择AP Div元素,在网页设计中，用户经常需要选择位于网页中的各种AP Div元素，包括被其他AP Div元素覆盖的以及隐藏的AP Div元素等。,10,2显示/隐藏AP Div元素,在【AP元素】面板中，用户可以通过简单的操作，设置AP Div元素的显示或隐藏属性。,11,3防止AP Div元素重叠,由于AP Div元素是一种可以自由分布在网页任意位置的布局元素，因此在为网页文档添加AP Div元素时，可能需要防止多个AP Div元素之间

5、的重叠现象。,12,4修改AP Div元素层叠顺序,在【AP元素】面板中，用户还可以修改各AP Div元素之间的层叠顺序，从而更改其显示的次序。,7.1.4 设置AP Div元素属性,在使用Dreamweaver绘制各种AP Div元素后，用户还可以方便地通过Dreamweaver CS4的【属性】检查器，编辑单个或多个AP Div元素的属性，为网页进行简单的布局。,13,1编辑AP Div元素,AP Div元素的各种属性,14,2编辑多个AP Div元素,Dreamweaver不仅可以编辑独立的AP Div元素，还可以同时编辑多个AP Div元素的属性。当选择两个或更多AP元素时，【属性】面

6、板会显示文本属性以及全部AP元素属性的一个子集，更改该子集的属性，可以将这些属性全部应用到AP Div元素中。,7.2 网页行为,行为是Dreamweaver CS4中一项重要的功能。通过该功能，用户无须编写JavaScript脚本代码，即可通过界面操作选择相关类型的行为，并设置触发该行为的事件以及目标，实现网页的各种交互应用。,15,7.2.1 标签检查器面板与行为,Dreamweaver CS4允许用户通过内置的【标签检查器】面板，添加或管理Dreamweaver的各种内置行为。,编辑网页行为的按钮,7.2.2 文本信息行为,文本信息行为是与文本相关的各种行为，例如设置容器文本、设置状态栏

7、文本等，通过Dreamweaver CS4内置的各种JavaScript脚本，用户可以方便地添加和更改各种XHTML容器、网页浏览器状态栏等内部的文本内容。,17,1设置容器文本,2设置状态栏文本,Dreamweaver CS4提供了可视化的方法帮助用户在状态栏添加文本内容，以使网页更加丰富多彩。,在应用容器文本的交互行为后，可根据指定的事件触发交互，将容器中已有的内容替换为更新的内容。,7.2.3 窗口信息行为,窗口交互行为也是一种重要的网页交互行为，是与浏览器窗口、浏览器对话框相关的各种网页交互行为。在Dreamweaver CS4预置的行为中，网页交互行为主要包括弹出信息和打开浏览器窗口

8、等两种窗口交互行为。,18,19,1弹出信息,2打开浏览器窗口,【弹出消息】行为的作用是显示一个包含指定文本消息的JavaScript警告对话框。,与弹出信息行为类似，打开浏览器窗口也是一种重要的网页行为，其可以在行为触发时为当前网页打开一个新的网页窗口，并在窗口中显示其他网页文档的内容。,7.2.4 图像效果行为,图像是网页中最明显且最容易让用户理解的内容。在Dreamweaver CS4中，提供了一些使图像更具有动感的行为，即Dreamweaver图像交互行为。在Dreamweaver的图像交互行为中，主要包括交换图像行为、导航栏图像行为等2种。,20,1交换图像,交换图像功能是指将某一个

9、网页图像转换为其他网页图像的行为功能。,导航条是网页中相当常见的版块。使用Dreamweaver CS4的行为功能，可以制作出复杂的，集成鼠标单击事件的导航条栏目。,2导航栏图像,7.2.5 效果行为,效果行为的作用是为网页中的各种图像、AP Div元素等添加特殊的动画效果，从而使网页更加具有动感。Dreamweaver预置了7种基本的效果行为，可以对这些网页元素进行各种带有渐进式的属性修改。,21,22,1增大/收缩行为,增大/收缩效果行为的作用是渐进式地动态改变网页图像的尺寸，以制作而成特殊的效果动画效果。,2挤压行为,挤压特效也是一种针对图像进行缩放的效果。其与【增大/收缩】特效的区别在

10、于，用户无法直接设置收缩图像的起始尺寸、结束尺寸以及收缩所花费的时间。在为图像添加【挤压】特效后，图像会在以指定的加速度缩小直至完全消失。,23,3显示/渐隐行为,4晃动行为,【显示/渐隐】特效与【增大/收缩】特效类似，都可以通过相应的对话框进行定制，以实现增加或降低网页图像透明度的动画效果。,晃动特效的设置方式与挤压类似，在这类特效中，用户都不需要设置任何相关的属性，直接为图像添加行为即可。,24,5滑动行为,6遮帘行为,滑动特效也是一种重要的Dreamweaver行为。其可以控制网页中的图像从上方坠落到下方，或从下方上升到上方。与之前几种关于图像的效果行为所区别，滑动的特效不能直接应用于网

11、页的图像，只能应用到带有ID属性的层中。,遮帘效果的作用是为图像添加一个遮罩，从图像的上方或下方逐渐移动，直至将图像完全遮盖。与滑动的效果类似，遮帘效果也必须应用在带有ID属性的div标签内才能够起作用。,25,7高亮颜色,高亮颜色效果更改的是元素的背景颜色，一般用于表格与AP元素等可定义背景图像的网页容器。在为这些网页对象使用高亮颜色特效时，应尽量避免在其中插入尺寸较大的图像或视频等，以防止其遮罩住高亮颜色特效。,7.3 Spry框架,Spry框架是以JavaScript结合XHTML和CSS样式等技术开发的一种布局元素，是一种简单的网页交互解决方案。使用Spry框架，用户可以方便地为网页添

12、加各种菜单、导航以及面板等结构，丰富网页应用。,26,7.3.1 Spry菜单栏构件,Spry菜单栏是一组可导航的菜单按钮，其提供了水平和垂直等两个方向的导航菜单样式，可在有限的网页页面中显示大量可导航的信息。在访问者将鼠标滑过该菜单栏上的按钮时，可显示该按钮下的子菜单。,27,7.3.2 Spry选项卡式面板构件,Spry选项卡式面板构件是一组由选项卡组成的面板，用来将大量内容存储到多个选项卡中，根据访问者单击的选项卡标签，显示相应的选项卡内容。使用Spry选项卡式面板构件，可以最大限度的节省显示这些内容所需的页面空间，提高页面显示效率。,28,7.3.3 Spry折叠构件,Spry折叠面板构件是一种可折叠的面板，其可以将大量内容存储在一个紧凑的空间中。访问者可以通过单击面板上的相应选项卡