在设计 Web 站点的结构之前,必须完成练习 1.1:创建 Web 项目。
一系列 Web 页面就组成了 Web 站点。Web 页面包含实际的内容(例如,HTML 元素、图像和链接),而 Web 站点则是各 Web 页面相互结合起来的分层设计和组织。Web 站点应该具有高级目标(例如,为分类列表提供有组织的收集区域),而每个 Web 页面在实现该高级目标的过程中可以完成特定的任务(例如,在列表中搜索页面)。
开始设计 Web 站点的最好方法是考虑站点应该支持哪些功能以便实现总体目标。对于“分类信息”Web 站点,需要知道想要该站点执行的几项功能。例如,您知道您想要站点的访问者能够搜索列表并立即查看它们,并且想要他们能够创建和编辑新的列表。
要建立一个执行这些功能的 Web 站点,在这一练习中我们将计划设计四个页面,并在下一个练习中创建这些页面。
- 显示数据库上所有分类信息广告的主页。
- 将新的分类信息广告添加至数据库的页面。
- 更改或删除数据库上当前广告的页面。
- 通过按类别过滤广告来显示搜索结果的页面。
- 在“项目资源管理器”视图中,展开 ClassifiedsTutorial。
- 双击“项目资源管理器”视图中的 Web 站点导航。Web Site Designer 将打开至“导航”视图。借助于此工具,就可以添加、删除和重新排列组成 Web 站点的 Web 页面。
- 最初,没有页面图标显示在“导航”视图中。通常,设计 Web 站点时考虑的第一个页面就是站点的主页。这是访问者进入 Web 站点的页面。从“选用板”视图中拖动新建页面组件并将它放在“导航”视图上。页面图标将会出现且焦点在该页面的导航标题上。
- 此页面将是显示数据库上所有广告的主页。输入查看所有分类信息作为该页面的导航标题。稍后您将了解“导航标题”是如何用作“页面标签”以用于站点导航的。
- 为了使站点访问者能够发布他们自己的列表,他们需要一个用来创建新列表的页面。通过将新建页面组件拖动到“导航”视图的查看所有分类信息页面图标的正下方来添加另一个页面图标。
- 将该新页面命名为发布列表。注意,新的页面图标会显示在查看所有分类信息页面图标下方,并用一条线连接起来。这意味着“发布列表”和“查看所有分类信息”具有父子关系。
- 另外还需要一个页面,访问者可以在该页面中编辑或删除现有列表。例如,如果访问者添加了自行车列表,并且发布很长时间之后都没有响应,则卖方可能想降低售价。将另一个页面图标添加在“发布列表”页面旁边,并将它命名为更新列表。注意,这个新页面图标为“发布列表”的兄弟图标,并且是“查看所有分类信息”的另一个子代。
- 接下来,您的 Web 站点需要搜索功能,以便访问者可以搜索现有列表以找到感兴趣的内容。要添加用于显示搜索结果的页面,可将另一个页面图标放到“更新列表”页面旁边,并将它命名为已过滤的列表。
注意:如果意外地将一个页面放错了位置,或者如果想要对页面结构重新排序,可随时拖动各页面图标来重新排列站点。
- 按 Ctrl+S 以保存站点设计。“导航”视图看起来应类似于如下内容:
注意,每个页面图标底部都有一行小图标。第一个图标(目前还不可视)表示与该图标相关联的实际文件,在创建了这些文件之后此图标就会出现。如果创建
JSP 文件,则图标为蓝色菱形(

);如果创建
HTML 文件,则图标为一组尖括号(

)。第二个图标(

)和第三个图标(

)是可视的,指示在缺省情况下所有页面都被设置为分别出现在导航和站点图中。第四个图标(

目前还不可视)在已将页面图标与不包含任何 Web 站点导航的文件相关联时显示出来。页面图标顶部的图标(

目前还不可视)表示导航根。当您完成此模块时,将会更多地了解这些图标以及页面图标显示的其它方面。