资源描述
, , , , , ,*,Click To Edit Title Style, , , , , ,*, , , , , ,*,Click To Edit Title Style, , , , , ,Click To Edit Title Style,*, LOGO ,COMPANY LOGOTYPE INSERT,Click To Edit Title Style,WEB,应 用 开 发,单元,4,：网站的主题、母版页及导航,任务,4:,网站的主题、母版页及导航设计,(3),TreeView,控件的使用,1,Menu,控件的使用,2,SiteMapPath,控件的使用,3,主 要 内 容,学习目标,掌握,TreeView,控件的使用方法,掌握,Menu,控件的使用方法,掌握,SiteMapPath,控件的使用方法,技术应用的背景,为了使访客能够在短时间内在网站中浏览到想要的内容，网站都设计有导航功能。,网站的导航必须以简洁、清晰的结构来构建。一个结构优质的导航条不仅用户体验好，而且可以增加搜索引擎蜘蛛对网站的青睐，会使蜘蛛更加频繁和方便的爬行站点,。,一、任务,3,任务描述：实现网上书店后台的导航功能，如下所图示。,页面导航,二、基本知识与技能,导航概述,SitMapPath,控件,Menu,控件,TreeView,控件,导航信息不仅在网页内告诉用户所在的网站位置，而且可以帮助用户直接跳转到其他的网页，是网站不要缺少的重要部分。导航控件包括：,二、,基本知识与技能,TreeView,控件,TreeView,控件主要用来显示分级数据，它支持数据绑定,控件的节点绑定到分层数据（如：,XML,文件、表格和关系型数据等）,通过与,SiteMapDataSource,控件绑定，实现站点导航的功能,可通过主题、自定义的图像和样式等自定义节点外观、支持动态创建功能。通过编程访问,TreeView,对象模型，用户可以动态地创建树形结构，填充节点以及设置属性等。,例,3,：利用,TreeView,自定义节点方法实现导航功能,准备网站的多个页面（,Book.aspx,、,Computer.aspx,、,English.aspx,、,Economic.aspx,、,ComputerBasic.aspx,、,GraphicImage.aspx,、,Network.aspx,、,InfomationSafety.aspx,）,新建页面，添加一个,TreeView,控件,选择,TreeView,控件任务框中的,“,编辑节点,”,或选择属性窗口中的,“,Nodes,”,，打开,“,TreeView,节点编辑器,”,在节点编辑器中编辑相关节点，对应代码为：,/asp:TreeNode,二、,基本知识与技能,站点地图,1.,站点地图,站点地图是一个名为,Web.sitemap,的标准,XML,文件,包含了站点结构信息，必须存储在应用程序根目录下。如果该文件放在其他文件夹或者文件名不是,Web.sitemap,，导航控件将不能找到站点的结构。,2.,站点地图文件代码,根节点,子节点,二、,基本知识与技能,站点地图,3.,站点地图文件代码,实例,4,： 利用,TreeView,控件绑定站点地图文件实现导航,打开,default.aspx,文件，加入,1,个,TreeView,控件和,1,个,SiteMapDataSource,控件,同上例准备几个链接的页面,新建一个站点地图文件,web.sitmap,选择,TreeView,控件的任务框中的,“,选择数据源,”,，设置数据源为,“,SitMapDataSource1,”,此时在设置界面上结果已显示出来。,浏览,default.aspx,页面,实例,5,：利用,TreeView,控件绑定,XML,文件的方式实现导航功能,操作步骤：,新建页面，添加,1,个,TreeView,控件和,1,个,XmlDataSource,控件,在,App_Data,文件夹中添加一个,XML,文件,配置,XmlDataSource,控件的数据源，在对话框的,“,数据文件,”,中选择,XML,文件。,在,TreeView,控件的任务框中配置数据源，选择,XmlDataSource1,。,XML,文件代码：,选择,“,编辑,TreeNode,数据绑定,”,选项，在对话框中添加,3,个,“,所选数据绑定,”,的,3,个属性：,DataMember,分别为,Item1,Item2,Item3;NavigateUrlField,的值为,url;TextField,的值为,title,浏览页面,二、基本知识与技能,Menu,控件,Menu,控件以菜单界面显示各节点。默认情况下，站点地图文件的每个部分显示为菜单中的一个菜单项，并使用子菜单来反映层次。,Menu,控件的主要功能,:,（,1,）通过与,SitMapDataSource,控件绑定，实现站点导航的功能,（,2,）支持数据绑定。允许通过数据绑定，使得控件的菜单项绑定到分层数据（如,XML,文件、表格和关系型数据等）,（,3,）可通过主题、样式属性和模板等自定义节点外观,（,4,）支持动态创建功能。通过编程访问,Menu,对象模型，用户可以动态地创建菜单项、构建菜单项以及设置属性等。,（,5,）,Menu,控件可分为静态菜单项和动态菜单项。可有通过,StaticDisplayLevels,控制静态菜单项的显示级别。,实例,6,：利用,Menu,菜单实现导航,操作步骤：,创建一个,Web.sitemap,的站点文件,新建页面：在页面上添加,Menu,控件,和,SiteMapDataSource,将,Menu,控件的数据源配置为,SiteMapDataSource1,，观察页面的变化,浏览页面,将,Menu,控件改成动态视图的比较两者,的显示效果,二、基本知识与技能,SitMapPath,控件,SitMapPath,控件能够根据站点导航信息显示一个导航路径，此路径为准确定位当前页面所处整个,Web,站点的位置，并显示返回到主页的路径链接。,SitMapPath,控件节点有,3,种类型：,根节点：位于站点地图层次的最顶层,当前节点：对应于用户当前访问站点所在部分的节点,父节点：处于当前节点和根节点之间，该类型节点有一个或者多个节点,实例,7:,利用,TreeView,和,SitMapPath,实现站点导航功能,操作步骤：,新建页面，在页面添加,TreeView,控件和,SitMapDataSource,控件,新建站点地图文件,Web.sitmap,文件,设置,TreeView,控件的数据源为,SitMapDataSource1,新建该站点的其他页面文件，,分别加入,TreeView,控件和,SitMapDataSource,控件，,并将,TreeView,控件的数据源,设为,SitMapDataSource1,在所有页面添加,SiteMapPath,控件,浏览各个页面，观察导航的效果,三、任务,3,的实施,1,按网上书店的功能，在后台要实现有关图书及分类的管理、用户的管理等功能，先按照实际功能设计页面，放在,admin,文件夹下，如下图所示。,2.,新建一个母版文件,ManageMasterPage.master,(,在,admin,文件夹下,),3.,设计,ManageMasterPage.master,管理员页面,管理员：你好,你当前的位置：,4.,新建样式文件,style/ManageMaster.css,编写,ManageMasterPage.master,文件的,css,样式,body,padding:0;,margin:0;,width:0 auto;,#manageContainer,width:980px;,height:800px;,margin:0 auto;,#manageHeader,width:860px;,height:70px;,font-size:30px;,font-family:,华文行楷,;,color:Yellow;,padding-left:120px;,padding-top:10px;,background:url(./image/banner.gif) left top no-repeat;,#manageLeft,float:left;,width:180px;,height:680px;,padding-left:20px;,background-color:#7766BB;,#manageRight,float:left;,width:780px;,height:680px;,#rightTop,width:780px;,height:20px;,#rightConent,width:780px;,height:660px;,5,新建,admin_menu.xml,，提供左侧导航功能的数据,在,ManageMasterPage.master,中加一个,TreeView,控件，设置它的数据源为,admin_menu.xml,操作方法：单击,TreeView,，选中,TreeView,右上方的箭头 ， 如下图所示，在弹出的任务栏中选择,“,选择数据源,”,的下拉列表框，选,“,新建数据源,”,，在弹出的,”,新建数据源对话框,”,中选择,”,xml,文件,“,，指定,admin/admin_menu.xml,7.,打开,TreeView,的任务栏，如左图所示，选中,“,编辑,TreeNode,”,数据绑定，分别指定,DataMember,属性、,NavigateUrlField,的属性和,TextField,属性如右图所示,.,8.,在站点下新建一个,Web.sitemap,9.,在,ManageMasterPage.master,中加一个,SiteMapPath,控件，实现右上方的导航功能,10.,新建后台页面，新建页面时选择要运用母版页,ManageMasterPage.master,11.,在所有的页面引用样式,ManageMaster.css,，如图书分类页面引用了母版和样式的代码如下：,书籍列表页面的功能,四、小结,学习了,TreeView,控件的使用方法,学习了,Menu,控件的使用方法,学习了,SiteMapPath,控件的使用方法,本次的学习内容主要能实现网站的导航功能,
展开阅读全文