05快速实现网站的导航.doc
8页
第5章 快速实现网站的导航第5章 快速实现网站的导航网页中的导航条让网页浏览者能清楚地了解自己所处的位置，ASP.NET 3.5可以由网站地图文件web.sitemap和导航控件SiteMapPath联合实现网站导航效果网站地图文件web.sitemap包含整个网站各个页面间的层次关系，例如：首页－用户注册教学导航】教学目标（1）学会创建网站地图文件（2）掌握使用SiteMapPath控件实现网站的水平导航的方法（3）掌握使用Menu控件的菜单项编辑器设置下拉菜单导航的方法（4）掌握使用Menu控件和网站地图实现下拉菜单导航的方法（5）掌握使用TreeView控件的节点编辑器设置树型导航的方法（6）掌握使用TreeView控件和网站地图实现树型导航的方法课时建议8课时【5.1 操作准备】1．创建ASP.NET网站（1）启动Visual Studio 2008之后，在主窗口单击选择【文件】→【新建网站】命令，打开【新建网站】对话框2）在【新建网站】对话框“模板”列表中选择“ASP.NET网站”，在“语言”列表框中选择“Visual C#”，在网站存放位置列表框输入创建网站的存储位置，即“D:\ASP.NET网站开发实例教程\WebSite\eShop05”。
（3）在【新建网站】对话框中单击【确定】按钮，Visual Studio系统会自动创建并配置新建的网站eShop05，同时会自动创建一个Web页面Default.aspx2．准备样式文件和图像文件在文件夹“eShop05”（其路径为“D:\ASP.NET网站开发实例教程\WebSite\eShop05”）新建三个子文件夹，将新建的文件夹重命名为“css”、“images”和“备用网页”将已有的样式文件style0501.css拷贝到子文件夹“css”中，将所需的图像文件拷贝到子文件夹“images”中5.2 操作演练】【任务5-1】浏览静态网页eShop0501.html【任务描述】（1）利用IE浏览器浏览静态网页eShop0501.html2）分析网页eShop0501.html中顶部水平导航菜单、页面所处位置导航以及左下侧的树状导航结构的实现方法任务实施】1．浏览网页eShop0501.html静态网页eShop0501.html在IE浏览器中的浏览效果如图5-1所示图5-1 静态网页eShop0501.html在IE浏览器中的浏览效果2．分析顶部水平导航菜单的实现方法网页eShop0501.html中顶部水平导航菜单是利用超链接标签实现的，XHTML代码如下所示。
小家电外设产品台式电脑笔记本电脑数码产品首页3．分析页面所处位置导航的实现方法网页eShop0501.html中页面所处位置导航是利用超链接标签实现的，XHTML代码如下所示当前位置：首页 >> >> 诺基亚4．分析左下侧的树状导航结构的实现方法网页eShop0501.html中树型导航结构是利用定义列表标签
网站地图文件的默认名称为web.sitemap，该文件是一个特殊文件任务描述】在网站“eShop05”中创建名称为“web.sitemap”的网站地图文件任务实施】1．创建网站地图文件web.sitemap2．添加siteMap元素下的第一级节点3．添加第二级节点4．添加第三级和第四级节点【任务5-3】使用SiteMapPath控件实现网站的水平导航【任务描述】创建多个Web页面eShop0501.aspx、01handset.aspx、020101canon.aspx，在这些网页中使用SiteMapPath控件实现网站的水平导航，显示页面在网站中所处的位置【任务实施】1．准备Web网页eShop0501.aspx的起点文件2．在Web页面eShop0501.aspx中添加SiteMapPath控件3．准备Web网页01handset.aspx的起点文件4．在Web页面01handset.aspx中添加SiteMapPath控件5．准备Web网页020101canon.aspx的起点文件6．在Web页面020101canon.aspx中添加SiteMapPath控件【任务5-4】使用Menu控件的菜单项编辑器设置下拉菜单导航【任务描述】在网站eShop05中添加一个Web页面eShop050201.aspx，该网页中使用Menu导航控件实现多级下拉菜单导航，使用ASP.NET的【菜单项编辑器】对话框手工添加与编辑Menu控件的菜单项。
Web页面eShop050201.aspx中Menu控件的预览效果如图5-10所示图5-10 Web页面eShop050201.aspx中Menu控件的预览效果【任务实施】1．添加一个Web页面eShop050201.aspx2．在Web页面eShop050201.aspx中添加一个Menu控件3．添加Menu控件的菜单项（1）打开【菜单项编辑器】对话框（2）添加第一个根项（3）添加多个子项4．设置Web页面eShop050201.aspx中Menu控件的属性在Web页面中选择Menu控件，然后在其【属性】窗口中设置其属性1）设置Orientation属性的值为“Horizontal”，即设置Menu控件的显示方向为水平方向3）设置StaticDisplayLevels属性的值为“2”，即设置静态菜单的菜单呈现级数为2级4）设置MaximumDynamicDisplayLevels属性的值为“4”，即设置动态菜单的菜单呈现级数为45）设置StaticSubMenuIndent属性的值为“0px”，即设置静态菜单中子菜单的缩进间距为0px6）设置DynamicEnableDefaultPopOutImage属性的值为“False”，即不显示指示动态菜单项具有子菜单的内置图像。
7）设置StaticEnableDefaultPopOutImage属性的值为“False”，即不显示指示静态菜单项包含子菜单的内置图像8）设置SkipLinkText属性的值为空，即设置屏幕读取器所读取的隐藏图像的替换文字为空，以提供跳过链接列表的功能（9）设计CssClass属性的值为“menu”，即设置由Menu控件在客户端呈现的级联样式(CSS)类为“menu”，样式文件中类menu的CSS代码为：“float:left ;”Menu控件的属性设置完成后，该控件的设计外观如图5-21所示图5-21 Web页面eShop050201.aspx中Menu控件的设计外观【任务5-5】使用Menu控件和网站地图实现下拉菜单导航【任务描述】在网站eShop05中添加一个Web页面eShop050202.aspx，该网页中使用Menu导航控件实现多级下拉菜单导航，Menu控件的菜单项内容来源于任务5-2所创建的网站地图文件web.sitemapWeb页面eShop050202.aspx中Menu控件的预览效果如图5-23所示图5-23 Web页面eShop050202.aspx中Menu控件的预览效果【任务实施】1．添加一个Web页面eShop050202.aspx2．在Web页面eShop050202.aspx中添加一个SiteMapDataSource控件3．在Web页面eShop050202.aspx中添加一个Menu控件4．设置Web页面eShop050202.aspx中Menu控件的属性【任务5-6】使用TreeView控件的节点编辑器设置树型导航【任务描述】在网站eShop05中添加一个Web页面eShop050301.aspx，该网页中使用TreeView树型导航控件实现树型结构导航，TreeView控件的各级节点使用【节点编辑器】对话框手工添加与编辑。
Web页面eShop050301.aspx中TreeView控件的预览效果如图5-25所示图5-25 Web页面eShop050201.aspx中TreeView控件的预览效果【任务实施】1．添加一个Web页面eShop050301.aspx2．在Web页面eShop050301.aspx中添加一个TreeView控件3．使用ASP.NET的【TreeView 节点编辑器】添加TreeView控件的节点（1）打开【TreeView 节点编辑器】对话框（2）添加第一个根节点（3）添加多个子项4．设置Web页面eShop050301.aspx中TreeView控件的属性在Web页面中选择TreeView控件，然后在其【属性】窗口中设置其属性1）设置ExpandDepth属性的值为“1”，即设置TreeView控件的只展开第1级的节点2）设置NodeIndent属性的值为“10”，即设置TreeView控件的每节点只缩进10像素5.3 技术提升】【任务5-7】使用TreeView控件和网站地图实现树型导航【任务描述】在网站eShop05中添加一个Web页面eShop050302.aspx，该网页中使用TreeView导航控件实现树型结构导航，TreeVi。
