练习 1.2:设计 Web 站点的结构

演示

在设计 Web 站点的结构之前,必须完成练习 1.1:创建 Web 项目

一系列 Web 页面就组成了 Web 站点。Web 页面包含实际的内容(例如,HTML 元素、图像和链接),而 Web 站点则是各 Web 页面相互结合起来的分层设计和组织。Web 站点应该具有高级目标(例如,为分类列表提供有组织的收集区域),而每个 Web 页面在实现该高级目标的过程中可以完成特定的任务(例如,在列表中搜索页面)。

开始设计 Web 站点的最好方法是考虑站点应该支持哪些功能以便实现总体目标。对于“分类信息”Web 站点,需要知道想要该站点执行的几项功能。例如,您知道您想要站点的访问者能够搜索列表并立即查看它们,并且想要他们能够创建和编辑新的列表。

要建立一个执行这些功能的 Web 站点,在这一练习中我们将计划设计四个页面,并在下一个练习中创建这些页面。


  1. 在“项目资源管理器”视图中,展开 ClassifiedsTutorial
  2. 双击“项目资源管理器”视图中的 Web 站点导航。Web Site Designer 将打开至“导航”视图。借助于此工具,就可以添加、删除和重新排列组成 Web 站点的 Web 页面。
  3. 最初,没有页面图标显示在“导航”视图中。通常,设计 Web 站点时考虑的第一个页面就是站点的主页。这是访问者进入 Web 站点的页面。从“选用板”视图中拖动新建页面组件并将它放在“导航”视图上。页面图标将会出现且焦点在该页面的导航标题上。
  4. 此页面将是显示数据库上所有广告的主页。输入查看所有分类信息作为该页面的导航标题。稍后您将了解“导航标题”是如何用作“页面标签”以用于站点导航的。
  5. 为了使站点访问者能够发布他们自己的列表,他们需要一个用来创建新列表的页面。通过将新建页面组件拖动到“导航”视图的查看所有分类信息页面图标的正下方来添加另一个页面图标。 
  6. 将该新页面命名为发布列表。注意,新的页面图标会显示在查看所有分类信息页面图标下方,并用一条线连接起来。这意味着“发布列表”和“查看所有分类信息”具有父子关系。
  7. 另外还需要一个页面,访问者可以在该页面中编辑或删除现有列表。例如,如果访问者添加了自行车列表,并且发布很长时间之后都没有响应,则卖方可能想降低售价。将另一个页面图标添加在“发布列表”页面旁边,并将它命名为更新列表。注意,这个新页面图标为“发布列表”的兄弟图标,并且是“查看所有分类信息”的另一个子代。
  8. 接下来,您的 Web 站点需要搜索功能,以便访问者可以搜索现有列表以找到感兴趣的内容。要添加用于显示搜索结果的页面,可将另一个页面图标放到“更新列表”页面旁边,并将它命名为已过滤的列表
    注意:如果意外地将一个页面放错了位置,或者如果想要对页面结构重新排序,可随时拖动各页面图标来重新排列站点。
  9. Ctrl+S 以保存站点设计。“导航”视图看起来应类似于如下内容:
ClassifiedsTutorial 项目的 Web 站点导航。

注意,每个页面图标底部都有一行小图标。第一个图标(目前还不可视)表示与该图标相关联的实际文件,在创建了这些文件之后此图标就会出现。如果创建 JSP 文件,则图标为蓝色菱形();如果创建 HTML 文件,则图标为一组尖括号()。第二个图标()和第三个图标()是可视的,指示在缺省情况下所有页面都被设置为分别出现在导航和站点图中。第四个图标( 目前还不可视)在已将页面图标与不包含任何 Web 站点导航的文件相关联时显示出来。页面图标顶部的图标( 目前还不可视)表示导航根。当您完成此模块时,将会更多地了解这些图标以及页面图标显示的其它方面。

既然已经创建了总体 Web 站点结构,因此,您可以开始进行练习 1.3:使用 Web 页面填充 Web 站点了。

使用条款 | 反馈

(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.