跟我学Dreamweaver Spry设计工具——创建横向或纵向的网页下拉或弹出菜单

目录

1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 (2)

1.1.1Spry菜单栏 (2)

1.1.2自定义菜单栏组件的显示风格（修改CSS文件） (9)

1.1.3更改菜单栏组件的方向 (15)

1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单

1.1.1Spry菜单栏

Spry 框架是一个JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web 页。有了Spry，就可以使用HTML、CSS 和极少量的JavaScript 将XML 数据合并到HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。

在设计上，Spry 框架的标记非常简单且便于那些具有HTML、CSS 和JavaScript 基础知识的用户使用。

1、菜单栏组件是一组可导航的菜单按钮

当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。

Dreamweaver 允许Web开发人员插入两种菜单栏组件：垂直组件和水平组件。并且所生成的菜单栏组件由标准的HTML标签（由

、
• 和 标签）所构成。

  2、首先新建一个页面文件，并保存它

  3、选择“插入”>“Spry工具条”中的“Spry菜单栏”组件

  将弹出下面形式的对话框

  选择“水平”或“垂直”等所需要的菜单形式，并最后单击“确定”按钮，本示例选择“水平菜单”。Dreamweaver将自动地创建出下面形式的“水平菜单”。

  也可以使用“插入记录”主菜单栏中的“Spry”子菜单，然后插入菜单栏组件的方式创建。

  4、保存页面文件及所生成的CSS和JavaScript文件

  （1）确认保存所需要的各个相关的资源文件

  （2）在当前站点的根目录中自动地创建出SpryAssets目录

  Dreamweaver 会在保存页面时自动在站点中包括所需的Spry JavaScript 和CSS 文件，并自动地创建出SpryAssets目录。而与给定Spry组件相关联的CSS和JavaScript 文件则是根据该Spry组件的类型命名的，因此，很容易判断哪些文件对应于哪些Spry组件。

  例如，与折叠Spry组件关联的文件称为SpryAccordion.css 和SpryAccordion.js。

  （3）各种类型的文件的主要作用

  其中的HTML文件定义组件的结构，而响应用户启动事件的JavaScript脚本代码用来控制行为，CSS样式文件用来指定组件的外观。

  （4）更改默认的Spry 资源文件目录位置

  由于默认时，Dreamweaver 会在当前的站点中自动地创建出一个SpryAssets 目录，并将相应的JavaScript和CSS 文件保存到其中。如果希望将Spry的各个资源文件保存到其它的目录位置，其实是可以更改的。

  选择“站点”>“管理站点”，在“管理站点”对话框中选择本站点并单击其中的“编辑”按钮。

  在“站点设置”对话框中，展开“高级设置”并选择“Spry”类别。输入想要用于Spry 资源的文件夹的路径并单击“确定”按钮（也还可以单击文件夹图标浏览到其他的文件目录位置）。

  （6）预览现在的效果

  5、修改由Dreamweaver所创建的水平菜单为自己所需要的内容——采用可视化方式进行修改

  （1）修改水平主菜单项目和其中的子菜单项目为所需要的文字

  （2）添加或删除菜单和子菜单

  首先选中Spry菜单组件（将看到的蓝色选项卡式轮廓），然后使用属性检查器（“窗口”>“属性”）

  （2）增加或者删除主菜单项目或者子菜单项目

  只需要在“文档”窗口中选择一个菜单栏构件，在属性检查器中，可以向菜单栏组件中添加菜单项或从其中删除特定的菜单项。只需要选择要删除的主菜单项或子菜单项的名称，然后单击减号按钮。

  （3）修改菜单项目的文本和目标超链接

  在“文档”窗口中选择一个菜单栏组件，在属性检查器中，单击第一列上方的加号按钮。而如果需要重命名新菜单项，可以采用更改“文档”窗口或属性检查器“文本”框中的默认文本的方式实现。

  要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。

  （4）更改菜单项的顺序

  在“文档”窗口中选择一个菜单栏组件，在属性检查器（“窗口”>“属性”）中，选择要对其重新排序的菜单项的名称。单击向上箭头或向下箭头可以向上或向下移动该菜单项。

  6、修改由Dreamweaver所创建的水平菜单为自己所需要的内容——直接修改所生成的HTML页面

  （1）进入“代码”视图，然后进行修改

  （2）了解菜单的层次结构关系

  菜单栏组件中的HTML 中包含一个外部

  标签，该标签中对于每个顶级菜单项。其中包一定数量的< li>标签，而顶级菜单项（
  • 标签）又包含用来为每个菜单项定义子菜单的
    和
    • 标签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。

      由于Dreamweaver 在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。

      （3）为每个菜单项目定义对应的超链接

      由于Dreamweaver生成的是标准的HTML标签和CSS样形文件，因此可以直接在源文件视图中修改菜单项目的文字和目标超链接。只需要在“文档”窗口中选择一个菜单栏组件，在属性检查器（“窗口”>“属性”）中，选择要应用链接的菜单项的名称。在“链接”文本