第7章 网页交互应用.pptVIP

* 第7章 网页交互应用 随着互联网技术的发展，网页借助各种先进的前台脚本技术，可以实现丰富的用户交互应用。几乎所有的浏览器都支持用户通过JavaScript等脚本语言编写各种交互式应用程序，以响应网页浏览者的各种即时操作。 本章学习要点： * 创建AP Div元素 自定义AP Div元素 添加网页行为 设置网页行为属性 应用Spry框架 7.1 AP Div元素创建与应用 * AP Div元素又简称AP元素，是Dreamweaver独有的一种布局元素，是带有特殊属性的DIV标签。在Dreamweaver中，用户可以方便地设置AP Div元素的位置、尺寸和层叠顺序等属性，从而实现灵活的布局，或将各种网页对象放置在页面的任意位置。基于此特点，网页行为大多与AP Div元素有关。 7.1.1 DIV标签 * 在介绍AP Div元素时，首先应了解DIV标签的作用。Div标签是最基本的XHTML布局标签。几乎所有的Web标准化网页都使用了Div标签，来实现各种样式的网页布局。在DIV标签中，用户可以插入各种图像、文本或多媒体内容。AP Div元素正是DIV标签的一种特殊实例。 插入DIV标签的各种属性 属性 作用 插入 在插入点 将Div标签插入到当前光标所指示的位置 在开始标签结束之后 将Div标签插入到选择的开始标签之后 在结束标签之前 将Div标签插入到选择的开始标签之前 开始标签 如在【插入】的下拉列表中选择“在开始标签结束之后”或“在结束标签之前”的项目后，即可在此列表中选择文档中所有的可用标签，作为开始标签 类 定义Div标签可用的CSS类 ID 定义Div标签在网页中唯一的编号标识 新建CSS规则 根据该Div标签的CSS类或编号标识等，为该Div标签建立CSS样式。关于CSS样式，请参考之后相关的章节 7.1.2 创建AP Div元素 在了解了DIV标签之后，即可开始学习特殊的DIV标签——AP Div元素的创建方法。为了帮助用户更便捷的创建AP Div元素，Dreamweaver允许用户以绘制的方式创建AP Div元素，同时允许用户以拖拽的方式定义AP Div元素的尺寸和位置。 * * 1．插入AP Div元素 在Dreamweaver中，用户可以直接在【插入】面板中选择【布局】的列表项目，然后单击【绘制AP Div】按钮，拖动鼠标，为网页绘制AP Div元素。 * 2．嵌套AP Div元素 嵌套AP Div元素，首先需要为网页文档绘制第一个AP Div元素，然后，将鼠标光标置于该AP Div元素中，执行【插入】|【布局对象】|【AP Div】命令，即可将第二个AP Div元素嵌套进之前的AP Div元素中。 7.1.3 AP Div元素基本操作 作为一种重要的布局元素，Dreamweaver CS4提供了一个专门的【AP元素】面板以控制和操作各种AP Div元素，包括选择AP元素、设置其显示/隐藏、设置AP元素的重叠等。 * * 1．选择AP Div元素 在网页设计中，用户经常需要选择位于网页中的各种AP Div元素，包括被其他AP Div元素覆盖的以及隐藏的AP Div元素等。 * 2．显示/隐藏AP Div元素 在【AP元素】面板中，用户可以通过简单的操作，设置AP Div元素的显示或隐藏属性。 * 3．防止AP Div元素重叠 由于AP Div元素是一种可以自由分布在网页任意位置的布局元素，因此在为网页文档添加AP Div元素时，可能需要防止多个AP Div元素之间的重叠现象。 * 4．修改AP Div元素层叠顺序 在【AP元素】面板中，用户还可以修改各AP Div元素之间的层叠顺序，从而更改其显示的次序。 7.1.4 设置AP Div元素属性 在使用Dreamweaver绘制各种AP Div元素后，用户还可以方便地通过Dreamweaver CS4的【属性】检查器，编辑单个或多个AP Div元素的属性，为网页进行简单的布局。 * 1．编辑AP Div元素 AP Div元素的各种属性 * 2．编辑多个AP Div元素 Dreamweaver不仅可以编辑独立的AP Div元素，还可以同时编辑多个AP Div元素的属性。当选择两个或更多AP元素时，【属性】面板会显示文本属性以及全部AP元素属性的一个子集，更改该子集的属性，可以将这些属性全部应用到AP Div元素中。 7.2 网页行为 行为是Dreamweaver CS4中一项重要的功能。通过该功能，用户无须编写JavaScript脚本代码，即可通过界面操作选择相关类型的行