练习 1.6:实现 Web 站点的动态导航

演示

在开始实现 Web 站点的动态导航之前,必须先完成练习 1.5:将页面模板应用于 Web 站点

练习 1.2 中设计 Web 站点的结构时,您作出了有关页面之间的关系的一些决定。回顾一下您用连线布置页面图标的方式:

站点结构

一个页面可以通过几种不同的方式与另一个页面相关。这些关系的表示方法就象表示家庭成员之间的关系一样。在此示例中,“查看所有分类信息”是父页面,其它三个页面则是它的子页面。而这三个页面互相之间是兄弟页面。

这些页面关系用来生成诸如导航栏和选项卡的导航链接。每个页面都会根据与它相关的页面自动创建它的导航链接。此过程称为动态导航

检查站点结构

您想确保已设置站点结构以指定哪些页面应该包括在导航中。可以在 Web Site Designer 中指定哪些页面应该作为链接包括在动态导航中,哪些页面应该包括在站点图中,以及基于站点结构和页面关系的其它一些导航选项。如果您有需要包含在站点中的页面,这可能很有用,但是如果是和导航功能分开的部分则没有意义。例如,您可能需要在站点遇到问题时出现的错误页面;但是,您不想该错误页面作为导航的一部分来显示。
  1. 双击“项目导航器”视图中的 Web 站点导航来查看站点结构。
  2. 可以看到缺省情况下所有页面都选择了在导航中显示选项,原因是在导航中显示图标()是可视的。在导航中显示图标是页面图标的一行图标中的第一个图标。必须为想要出现在导航栏中的每个页面都选择此选项。要启用动态导航,应添加指向该页面的链接。也可以禁止页面显示在导航中。需要禁止对搜索结果页面“已过滤的列表”进行导航,原因是用户将从“查看所有分类信息”页面上的搜索选项进入“已过滤的列表”。
    1. 右键单击已过滤的列表页面图标。
    2. 选择导航 > 在导航中显示来取消选择它。在导航中显示图标现在应该在已过滤的列表页面图标上变灰。
  3. 还需要禁用“更新列表”页面,原因是用户将从“查看所有分类信息”页面上的更新选项进入“更新列表”。右键单击更新列表页面图标。接着,选择导航 > 在导航中显示来取消选择它。在导航中显示图标现在应该在更新列表页面图标上变灰。
  4. 需要为站点设置“导航根”。通常将顶部页面(通常是在站点中创建的第一个页面)设置为“导航根”。右键单击查看所有分类信息页面图标,并单击导航 > 设置导航根。行中的第三个图标()是图标。导航根是很重要的,原因是它将确定生成 Web 站点导航(例如,导航栏)时使用的链接级别。
    注意:不应该取消选择“查看所有分类信息”页面和“发布列表”页面的站点导航设置的缺省选项。
  5. Ctrl+S

将导航组件添加至页面模板

  1. 通过在“项目导航器”视图中双击 template.jtpl 来返回至页面模板。
  2. 在“选用板”视图中,单击 Web 站点导航以打开包含导航组件的抽屉。可以将许多不同类型的动态导航组件添加至 Web 站点,包括站点图。最基本的组件是“水平条”,它由基于站点结构的一行链接组成。
  3. 尽管您知道需要在每个页面顶部都具有一行链接使得用户能够访问站点中的其它页面,但是,您还想对导航添加一些视觉上能引发兴趣的内容。将水平选项卡组件拖放到页面模板中的第二行;此组件会在带标签的行中创建动态链接。插入水平选项卡向导打开。
  4. 接受缺省值以使用样本导航组件。
  5. 接受缩略图图像(horizontal-tab01.html)中的缺省值并注意自动填充了文件名字段。
  6. 根据页面关系选择想要出现在导航栏中的链接类型。要指定站点的顶部页面,并且每个页面的所有兄弟和子代都将出现在导航中,应确保选择了下列各项: 注意,如果选择上一个链接或下一个链接,则可以为这些链接提供要显示的标签(例如,“后退”和“前进”)。
  7. 单击确定导航组件图标()将显示在页面模板上。
  8. 保存对页面模板所作的更改。当保存页面模板时,动态导航更改就会应用于站点中的所有页面。

导航组件会将几个文件添加至 Web 项目。在保存模板之后,注意“项目导航器”视图将包含新的 .html 和几个 .gif 文件。这些文件显示页面中的选项卡:

具有导航的项目导航器

预览导航

如果想查看导航在实际页面上而不是在模板中看起来如何,则在“项目导航器”视图中双击 all_records.jsp,然后单击 Page Designer 中的预览选项卡。可以看到出现在选项卡中的名称是页面的导航标签而不是文件名。另外,注意当前页面显示为突出显示的选项卡;当浏览站点时,当前页面将始终是位于顶部的突出显示的选项卡。

技巧:如果在“导航”视图中更改站点的结构,则动态导航链接将自动更新以反映新的结构。

导航选项卡

注意这两个选项卡旁边有链接图标 链接图标abc 符号。这些符号在该处提醒您这些是链接并且它们是动态生成的文本。当在实际的服务器上测试页面或显示页面时,这些图标将不会出现。

既然设置了动态导航,就可以开始进行练习 1.7:预览 Web 站点

使用条款 | 反馈

(C) Copyright IBM Corporation 1999, 2004. All Rights Reserved.