asp net程序设计徐占鹏)教学资源单元8网站导航 （一）利用站点地图和sitemappath控件设计网站导航
单元八 网站导航（一） 利用站点地图和SiteMapPath控件设计网站导航,主讲教师：徐占鹏,学习目标,【知识目标】 掌握SiteMapPath设计面包屑导航的方法； 【技能目标】 能够利用SiteMapPath控件设置网站面包屑导航。,注： 本课内容参考教材 单元二 任务 8.1,任务陈述,任务构思与目标：根据需求新建SelectOKShop网站的面包屑导航，并创建网站的“关于我们”页面：About.aspx，并应用MasterPageQian.master母板，结果如下图所示：,任务陈述,任务设计：添加web.sitemap文件，新建SiteMapPath控件，打开About.aspx，在导航条显示：,站点地图简介,顾名思义，站点地图就像城市地图一样，用于确定网站中每一个文件的位置，以便快速找到文件，ASP.NET中的站点地图文件名为Web.sitemap，是一个XML (可扩展标记语言：Extensible Markup Language)文件，它用来表示一个网站各个页面之间的层次结构关系。要实现页面导航，应该先在Web.Sitemap文件中以XML的形式，提供出整个网站的页面结构层次。,站点地图简介,一张站点地图由一系列相联系的SiteMapNode对象组成。这些SiteMapNode以一种层次方式(在本文的开始已说明)联系在一起。该层次包含单个根结点-它是该层中唯一的一个没有父结点的结点。在该层上的每个结点代表网站的一个逻辑部分。每一部分都有一个标题，URL，描述等-它用SiteMapNodes类的属性(Url、Title、Description等)建模。 默认地，ASP.NET使用一个XML格式的文件以提供一个缺省的实现来串行化该站点地图。为使用这种技术，你需要在你的web应用程序的根目录Web.sitemap下创建一个XML文件,站点地图简介,站点地图控件（SiteMapPath控件）可以用来创建页面之间的导航。SiteMapPath控件可以显示一个或多个节点，这些节点通常显示为链接，且往往满足某种层次关系。从而，通过这些节点可以导航到指定层次关系的页面。 SiteMapPath控件由节点组成，路径中的每个元素都称为节点。SiteMapPath控件包括3种类型的节点：根节点、父节点和当前节点。SiteMapPath控件的第一个节点为根节点。如果SiteMapPath控件中的某个节点导航到当前页面，那么该节点为当前节点。如果一个节点（不为当前节点）包含1个或多个子节点，那么该节点为父节点。,站点地图简介,站点地图简介,其中为XML文件标识，“version”为XML文件的版本，“encoding”为编码。语句的作用是指明该文件是站点导航文件。为根节点，一个站点地图只能有一个元素。对应于页面的节点，一个节点描述一个页面。,站点地图简介,元素的常用属性说明,编写站点地图的注意事项如下： （1）站点地图根节点为元素，每个文件有且仅有一个根节点。 （2）下一级有且仅有一个节点。 （3）下面可以包含多个新的节点。 （4）站点地图中，同一个URL仅能出现一次。,站点地图简介,【实例】“新闻导航”站点地图的创建 ,站点地图SiteMapPath控件,ASP.NET 的SiteMapPath控件会显示一个导航路径，以便用户能够知道他们当时在Web网站上所处的位置。事实上它提供了一个“你在这里”的功能。如下图所示的网易新闻导航 这种类型的导航元素常常被叫做面包屑（breadcrumb），该导航显示了从站点的首页（根节点）到当前页面之间的路径。基本的表现是向用户显示当前页面所在的位置，并提供回到主页的链接。简而言之就是用于显示终端用户处于相对于站点结构的具体位置。例如，在访问A站点的Novels部分时，一个breadcrumb显示可能是这个样子：HomeBooksNovels。,网易新闻中心体育新闻奥运,站点地图SiteMapPath控件,SiteMapPath控件用来指示页面在站点的逻辑位置的导航，这种类型的导航可以帮助用户理解站点结构。通过该导航，可以迅速找到相关的位置。 SiteMapPath控件必须与站点地图文件相结合，如果当前站点中有已经编写好的站点地图文件，只要将SiteMapPath控件拖到页面中，该控件将会自动与站点地图文件结合，而不需要编写代码。 注意：站点地图中必须有当前页的URL，否则该站点导航控件将不会显示。,站点地图SiteMapPath控件,SiteMapPath控件的基本句法： 在默认状态下，SiteMapPath控件会显示根节点以及其他代表当前Web页面的节点。SiteMapPath控件还会显示网站地图的根节点与当前节点之间页面，形式是横向排列这些链接，每个链接之间用大于号（）隔开。下面的例子显示了一个简单的网站地图，用户正位于逻辑结构的第三个页面处: Home Page Page One Page Two SiteMapPath控件只能显示从根节点到当前节点之间的路径，通过单击超链接可以转向某个页面，而不能向前选择页面,站点地图SiteMapPath控件,SiteMapPath控件默认使用站点地图文件（Web.sitemap）作为其数据源，因此，不需要显式为该控件指定数据源。Web.sitemap文件为一个XML文件，按照分层形式组织页面。Web.sitemap文件由类型为SiteMapNode的节点组成，每一个siteMapNode元素可以表示网站中的一个页面。Web.sitemap文件中的每一个节点（类型为SiteMapNode）都包含以下3个常用属性。 Url属性：指定所链接到某一个页面的地址。 Title属性：指定链接的文本。 Description属性：指定链接的提示信息。,创建并使用SelectOKShop电子商务网站面包屑导航,任务实施 1新建About.aspx页面 2修改母版页 3新建web.sitemap文件 4.创建SiteMapPath控件 5任务运行,SiteMapPath控件的样式控制,1自定义SiteMapPath控件的链接样式属性 SiteMapPath控件的每个节点都可由SiteMapNodeItem对象表示。节点通常显示为静态文本或者超链接，可以为其添加自定义的外观样式或者模板。在设置模板和样式的过程中，必须注意一下两条规则： （1）如果为节点设置了自定义模板，那么模板将会自动覆盖为节点定义的任何样式 （2）为特殊类型节点设置的自定义模板和样式，将会覆盖为所有节点设置的自定义模板和样式。 SiteMapPath控件可以让你通过可选的自定义元素更加精细地控制各个节点，可以使用 Style 和 FontInfo 类中介绍的大多数属性，其中包括 CssClass 属性。,SiteMapPath控件的样式控制,【实例】通过CSS控制SiteMapPath控件的样式 .aspx代码： CSS 代码： a.LinkSJ background:url(/Images/Cn/ClientSJ.gif) no-repeat 0px 2px; color:#FFFFFF; padding-left:20px; padding-right:20px; span.LinkSJ background:url(/Images/Cn/ClientSJ.gif) no-repeat 0px 2px ;color:#FFFFFF; padding-left:20px; padding-right:20px;,SiteMapPath控件的样式控制,通过设置控件的参数或者配置作用于控件的模板，可以对网站导航控件的可视外观进行自定义。 【实例】自定义链接的样式属性 在包含 SiteMapPath 控件的 ASP.NET Web 页面里，为控件添加下列属性： RootNodeStyle-Font-Names=“Verdana“ RootNodeStyle-ForeColor=“Orange“ RootNodeStyle-BorderWidth=2 比如，用于 SiteMapPath 控件的代码可能是这样： 如果需要为每一个链接指定不同的样式内容，请重复前面的步骤并分别设置 SiteMapPath 控件的 ParentNodeStyle，CurrentNodeStyle，以及 PathSeperatorStyle 属性。,SiteMapPath控件的样式控制,2自定义显示在链接之间的字符 在包含 SiteMapPath 控件的 ASP.NET Web 页面中，为控件添加 PathSeparator 属性。具体详见【实例8-4】： 【实例】自定义显示在链接之间的分隔字符 现在的 SiteMapPath 控件的显示可能是这样： Home : Services : Training 可以使用任意字符串来分隔链接，甚至可以使用图片，在包含 SiteMapPath 控件的 ASP.NET 网页中，向控件添加以下代码行： ,SiteMapPath控件的样式控制,3反转 SiteMapPath 控件所显示的路径的方向 在包含 SiteMapPath 控件的 ASP.NET 网页中，向该控件添加 PathDirection 和 PathSeparator。 【实例】反转显示在 SiteMapPath 控件中的路径的方向 ,SiteMapPath控件的样式控制,4限制父链接显示的数目 在包含 SiteMapPath 控件的 ASP.NET Web 页面中，为控件添加 ParentLevelsDisplayed 属性。 【实例】使SiteMapPath 控件并最多只显示两个父链接 ,项目实训,【实训目的】 1.掌握使用SiteMapPath控件显示网站路径的方法。 【实训内容】 1. 将SelectOk电子商务网站的网页均显示面包屑导航,
