《网页设计》课件-使用spry.ppt

使用AP DIV的Spry效果项目六项目六 布局对象的使用布局对象的使用Spry构件（1）Spry菜单栏（2）Spry选项卡式面板（3）Spry折叠式（4）Spry折叠面板1插入Spry菜单栏“插入”栏|“Spry”类型|“Spry菜单栏”按钮或 菜单栏“插入”|“布局对象”|“Spry菜单栏”或“插入”|“Spry”|“Spry菜单栏”命令。在弹出的“Spry菜单栏”对话框中选择“水平”或“垂直”，然后单击“确定”按钮。Spry菜单栏 2编辑Spry菜单栏属性“菜单项”：单击列表框中的具体菜单项，在“文本”文本框中编辑输入文本即重新定义该列表项的内容。“添加菜单项”按钮：表示为该菜单项添加了“子菜单”。“删除菜单项”按钮：将该菜单项与“子菜单”同时删除。“上移项”或“下移项”按钮：进行菜单项的显示排序。“链接”：输入链接的目标页面地址，或者单击“浏览”按钮以浏览到相应的文件。“目标”：指定要在何处打开所链接的页面。Spry菜单栏 3设置Spry菜单栏样式设置方法：先选中要设置的菜单（单击选中）。然后在“属性”面板中选择“样式”就可以进行设置 Spry菜单栏 4保存含有“Spry菜单栏”的页面 在保存含有在保存含有“SprySpry菜菜单栏单栏”的的页面文件页面文件时，会弹时，会弹出出“复制复制相关文件相关文件”对话框。对话框。表示软件表示软件将自动复将自动复制制SprySpry菜菜单栏所需单栏所需要到的要到的CSSCSS文件、文件、JavaScripJavaScript t文件和相文件和相关图像文关图像文件到站点件到站点目录的目录的SpryAssetSpryAssets s文件夹内。文件夹内。单击单击“确确定定”按钮按钮进行复制，进行复制，否则将不否则将不能保证能保证“SprySpry菜菜单栏单栏”的的正确运行。正确运行。Spry菜单栏 1插入选项卡式面板“插入”栏|“Spry”类型|“Spry选项卡面板”按钮或 菜单栏“插入”|“布局对象”|“Spry选项卡面板”或“插入”|“Spry”|“Spry选项卡面板”命令。对于插入到网页中的“Spry选项卡式面板”，单击左上角的蓝色区域即表示选择了该“Spry选项卡式面板”，进行编辑操作。Spry选项卡式面板2添加与删除选择卡面板 在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。在“属性”面板中，单击“添加面板”按钮或“删除面板”按钮。Spry选项卡式面板3设置默认的打开面板 在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。在“属性”面板中，从“默认面板”下拉列表中选择默认情况下要打开的面板。Spry选项卡式面板4编辑面板 将鼠标定位在选项卡标题所在区域即可对该标题进行编辑操作。对于插入到页面中各“Spry选项卡式面板”所对应的内容，鼠标移动到相应的“Spry选项卡”标题时，会显示“单击以显示面板内容”按钮，单击该按钮即可显示面板内容。Spry选项卡式面板5调整选项卡面板的顺序在“属性”面板中，通过“在列表中向上移动面板”按钮和“在列表中向下移动面板”按钮对页面中的“Spry选择卡”进行左右排序。Spry选项卡式面板Spry折叠式1.插入“Spry折叠式”选择菜单栏的“插入”|“Spry”|“Spry折叠式”，或“插入”|“布局对象”|“Spry折叠式”命令，或在“插入”面板的“Spry”类别中单击“Spry折叠式”按钮。对于插入到网页中的“Spry折叠式”，单击左上角的蓝色区域即表示选择了该“Spry折叠式”，进行编辑操作。2添加与删除选择卡面板 在“文档”窗口中选择一个折叠构件。在“属性”面板中单击“面板”旁边的加号(+)按钮或减号（-）按钮。（可选）更改面板的名称，方法是在“设计”视图中选择面板的文本并对其进行修改。Spry折叠式3更改面板的顺序n在“属性”面板中，通过“在列表中向上移动面板”按钮和“在列表中向下移动面板”按钮对页面中的面板进行上下排序。Spry折叠式4打开面板进行编辑请执行下列操作之一：n将鼠标指针移到要在“设计”视图中打开的面板的选项卡上，然后单击出现在该选项卡右侧的眼睛图标。n在“文档”窗口中选择一个折叠构件，然后在“属性”面板的“面板”菜单中选择要进行编辑的面板。Spry折叠式Spry可折叠面板1打开或关闭可折叠面板打开或关闭可折叠面板的方法：n将鼠标指针移到要在“设计”视图中打开的面板的选项卡上，然后单击出现在该选项卡右侧的眼睛图标。n在“文档”窗口中选择一个折叠构件，然后在“属性”面板中，从“显示”下拉列表中选择“打开”或“已关闭”。2设置可折叠面板的默认状态 在“文档”窗口中选择一个可折叠面板构件。在“属性”面板中，从“默认状态”弹出菜单中选择“打开”或“已关闭”。Spry可折叠面板3启用或禁用可折叠面板的动画 在“文档”窗口中选择一个可折叠面板构件。在“属性”面板中，勾选或撤选“启用动画”复选框即可。Spry可折叠面板Spry效果“Spry效果”是视觉增强功能，可应用于使用JavaScript 的 HTML 页面上几乎所有的元素。要向某个元素应用效果，该元素当前必须处于选定状态，或者它必须具有一个 ID。Spry效果Spry效果包括：n显示/渐隐：使元素显示或渐隐。n高亮颜色：更改元素的背景颜色。n向上遮帘/向下遮帘：模拟百叶窗，向上或向下滚动百叶窗来隐藏或显示元素。n上滑/下滑：上下移动元素。n增大/收缩：使元素变大或变小。n晃动：模拟从左向右晃动元素。n挤压：使元素从页面的左上角消失。Spry效果创建Spry效果的具体方法：选中某个Spry对象，在“行为”面板中单击“+”按钮，从菜单中选择“效果”|各Spry效果命令。在弹出的对话框中进行相应的属性设置。完完