2.4 导航条设计方案
一个Web站点,尤其是信息量大的大中型Web站点,应为用户提供站点导航。站点导航是每个网站必不可少的,它相当于城市公路的路标。通过导航条设计方案,可以使网站浏览者找到自己想要的内容。
2.4.1 树型导航条设计方案
树型导航条设计主要应用TreeView控件,TreeView控件对数据有着良好的支持,通过显示一个树状结构或菜单,让用户可以遍历访问站点中的不同页面。
1.方案分析
树型导航条主要应用的是Web服务器控件中的TreeView控件。对于一个导航文字很多,并且可以对导航内容进行分类的网站来说,可以将页面的导航文字以树形的形式显示,这样不仅可以有效地节约页面,而且也可以方便用户查看。应用TreeView控件增加了网站非常灵活性的交互功能。
在TreeView控件所具有的功能中有两点最为重要:
l 支持数据绑定。即允许通过数据绑定方式,使得控件节点与XML、表格、关系型数据等结构化数据建立紧密联系。
l 支持站点导航功能。即通过集成SiteMapDataSource控件,实现站点导航功能。
在应用TreeView控件实现树形导航时,首先对其组成要有一定了解。TreeView是由任意多个TreeNode对象组成,而每个TreeNode还可以包含任意多个子TreeNode对象。图2.27所示显示了TreeView控件节点类型。
图2.27 TreeView控件节点类型图
上图显示的TreeView控件只有一个根节点,事实上TreeView控件可以创建具有多个根节点的树形结构。
TreeView控件的基本功能可以总结为:将有序的层次数据,显示为树形结构。其主要应用可分为基本应用和较复杂应用。在较复杂应用中,TreeView控件将与层次性数据源控件如SiteMapDataSource和XMLDataSoure控件一起应用来实现站点导航。
2.实施过程
方案实施一 TreeView控件的基本应用
实例位置:光盘/mr/02/2.4/2.4.1/01
在网站开发过程中,TreeView控件的基本应用很常见。如在网上企业办公自动化管理系统中可应用TreeView控件实现简单的页面导航。
在TreeView控件的树形结构中,包括一个根节点和5个子节点,控件被设置为类似Windows帮助文档的外观样式,当用户点击“管理系统功能区“内的”公司管理“选项时将会导航到一个指定URL的页面。
此方案的实施主要涉及两大步骤:一是为TreeView控件添加自定义节点,二是设置控件外观属性。实例运行效果如图2.28所示。
图2.28应用TreeView控件实现导航
具体实施过程:
(1)新建一个网站,将其命名为07,默认主页名为Default.aspx。
(2)在页面Default.aspx中添加一个TreeView控件用于显示导航信息,这时将会出现一个“TreeView任务”对话框,如图2.29所示。
图2.29 设置控件属性
首先对TreeView控件定义节点。单击“编辑节点…”选项,将会弹出如图2.30所示的对话框。该对话框用于定义TreeView控件的节点和相关属性。对话框左边为节点命令按钮和控件预览窗口;对话框右列是当前节点相关属性。如此图所示,当前选中节点名为“管理系统功能区”的根节点,可对其Text、Value和NavigateUrl属性进行设置。其它节点类似。
图2.30手动添加节点
(3)设置TreeView控件外观属性。可应用两种方法对其进行外观设置。一种方法是通过Visual Studio 2005中的属性窗口设置其外观属性;另一种方法就是使用TreeView控件的自动格式化方法。本实例使用最后一种方法,该方法简单快捷。
单击“TreeView任务”对话框中的“自动套用格式”选项,将会弹出如图2.31所示的对话框。该对话框用于设置TreeView控件的外观样式。左列列出的是Visual Studio2005内置的多种样外观样式名称,右列是对应外观样式的预览窗口。如当在左列窗口选择“收件箱”样式时,此时右列窗口中将显示其选择的样式效果。
图2.31设置控件外观属性
从以上操作过程可看出,Visual Studio 2005对TreeView控件的支持是比较完善的。另外,设置TreeView控件的外观也可以应用ASP.NET2.0的一种新技术——主题来设置。
(4)TreeView控件的基本应用很简单,甚至可以不编写一行代码就可完成。但作为开发人员,对TreeView控件的源代码一定要有一个了解。如本实例中TreeView控件的节点定义的源代码如下:
<Nodes>
<asp:TreeNode Value="管理系统功能区" Text="管理系统功能区" SelectAction="None">
<asp:TreeNode Value="公司管理" NavigateUrl="~/User/UserPage.aspx" Text="公司管理"></asp:TreeNode>
<asp:TreeNode Value="业务管理" NavigateUrl="~/User/UserPage.aspx" Text="业务管理"></asp:TreeNode>
<asp:TreeNode Value="公司产品" NavigateUrl="~/User/UserPage.aspx" Text="公司产品"></asp:TreeNode>
<asp:TreeNode Value="文稿赏析" NavigateUrl="~/User/UserPage.aspx" Text="文稿赏析"></asp:TreeNode>
<asp:TreeNode NavigateUrl="~/User/UserPage.aspx" Text="资源管理" Value="资源管理"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
方案实施二 TreeView控件的复杂应用
实例位置:光盘/mr/02/2.4/2.4.1/02
在开发一些较为复杂的网站时,页面导航信息是相当重要的,它就像一个路标指引方向。下面以我公司在开发一个名为“明日度假村”的网站项目为例,由于此项目涉及很多页面信息,所以应用了TreeView控件对数据源控件良好的绑定支持技术。
在开发此项目的站点导航信息时,主要通过TreeView控件分别与SiteMapDataSource控件和XMLDataSource控件进行数据绑定来实现导航功能。
在绑定过程中主要通过设置TreeView控件的DataSourceID属性值为数据源控件的ID属性值,完成数据绑定任务。TreeView控件绑定数据源控件实质就是绑定到XML文件。
知识扩展:“可扩展标记语言”(XML)提供一种描述结构化数据的方法。其自描述性使其非常适用于不同应用间的数据交换,而且这种交换不以预先定义的一组数据结构为前提,因此具备很强的开放性。由于XML是可扩展标记语言,其本身有一套定义语义标记的规则,而不像HTML那样定义了许多标记。在定义XML时必须做到格式良好且有效,不要只有定义了