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

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