追学网

Dreamweaver应用Spry层

UPDATE:2014/11/18 | 分类:网页设计
  在Dreamweaver CS4中,Spry其实是一个特定JavaScript库,通过它可以轻松地添加一些有特殊效果的菜单。

  1.添加Spry菜单栏

  (1)在工作页面上单击鼠标,定位要添加Spry菜单栏的位置。

  (2)在“浮动工具面板”的“布局”栏点击“Spry菜单栏”。

  (3)在弹出的对话框中选择菜单是“水平”还是“垂直”排列,点击“确定”。

  (4)在工作页面出现Spry菜单栏,在属性栏同时显示Spry菜单栏的设置属性。

  ◆菜单条:设置菜单栏的名称。

  ◆菜单项文本输入栏:共可设计三级菜单。通过和按钮增减和调整菜单。

  ◆文本:设置各菜单项的文字。

  ◆链接:设置各菜单项链接的文件。

  ◆标题:设置各菜单项文字上的浮动提示文字。

  ◆目标:设置链接显示的窗口位置。

  (5)按下F12键,预览Spry菜单栏的效果。

  2.添加Spry选项卡式面板

  (1)在工作页面上单击鼠标,定位要添加Spry选项卡式面板的位置。

  (2)在“浮动工具面板”的“布局”栏点击“Spry选项卡式面板”。

  (3)在工作页面出现Spry选项卡式面板,在属性栏同时显示Spry选项卡式面板的设置属性。

  ◆选项卡式面板:设置选项卡式面板的名称。

  ◆面板:通过增减选项卡式面板的数量,通过调整选项卡式面板的次序。

  ◆默认面板:设置浏览时默认显示的选项卡式面板。

  (4)在工作页面的选项卡中单击,如在Tab 1处单击,可以为Tab 1输入名称,在“内容1”处单击,就可以输入Tab 1的内容文字。

  (5)如果想为Tab 2添加内容,则将鼠标放置在Tab 2上,会出现图标,单击它可以切换到Tab 2的内容区,只需单击鼠标就可以设置Tab 2的内容。

  (6)按下F12键,预览Spry菜单栏的效果。

  3.创建Spry折叠式

  (1)在工作页面上单击鼠标,定位要添加Spry折叠式的位置。

  (2)在“浮动工具面板”的“布局”栏点击“Spry折叠式”。

  (3)在“标签1”、“内容1”和“标签2”输入相关内容,如需设置“标签2”的内容,将鼠标放置在“标签2”的右下角会出现图标,点击它就可以设置“标签2”的内容。

  (4)Spry折叠式的属性栏。

  ◆折叠式:设置Spry折叠式的名称。

  ◆面板:通过和增减和调整折叠式面板。

  (5)按下F12键,预览Spry折叠式的效果。

  4.创建Spry可折叠面板

  Dreamweaver CS4中除了提供Spry折叠式外,还提供另一种Spry可折叠面板。它与Spry折叠式的区别是Spry折叠式可以折叠多个面板,但不能折叠内容;Spry可折叠面板可以折叠内容,但只有一个面板。

  (1)在工作页面上单击鼠标,定位要添加Spry可折叠面板的位置。

  (2)在“浮动工具面板”的“布局”栏点击“Spry可折叠面板”。

  (3)在工作页面插入Spry可折叠面板,在Tab和内容处分别输入相关文字和内容。

  (4)在属性栏设置Spry可折叠面板的属性。

  ◆可折叠面板:设置Spry可折叠面板的名称。

  ◆显示:设置面板是“打开”还是“已关闭”。

  ◆默认状态:设置浏览时面板的默认状态是“打开”还是“已关闭”。

  ◆启用动画:设置是否应用动画效果。

  (5)按下F12键,预览Spry可折叠面板的效果。
学习网

世界看中国 娱乐情感文化观点视频