《05快速实现网站的导航》由会员分享，可在线阅读，更多相关《05快速实现网站的导航（8页珍藏版）》请在金锄头文库上搜索。
1、第5章快速实现网站的导航第5章快速实现网站的导航网页中的导航条让网页浏览者能清楚地了解自己所处的位置，ASP.NET 3.5可以由网站地图文件web.sitemap和导航控件SiteMapPath联合实现网站导航效果。网站地图文件web.sitemap包含整个网站各个页面间的层次关系，例如：首页用户注册。【教学导航】教学目标（1）学会创建网站地图文件（2）掌握使用SiteMapPath控件实现网站的水平导航的方法（3）掌握使用Menu控件的菜单项编辑器设置下拉菜单导航的方法（4）掌握使用Menu控件和网站地图实现下拉菜单导航的方法（5）掌握使用TreeView控件的节点编辑器设置树型导航的方法
2、（6）掌握使用TreeView控件和网站地图实现树型导航的方法课时建议8课时【5.1操作准备】1创建ASP.NET网站（1）启动Visual Studio 2008之后，在主窗口单击选择【文件】【新建网站】命令，打开【新建网站】对话框。（2）在【新建网站】对话框“模板”列表中选择“ASP.NET网站”，在“语言”列表框中选择“Visual C#”，在网站存放位置列表框输入创建网站的存储位置，即“D:ASP.NET网站开发实例教程WebSiteeShop05”。 （3）在【新建网站】对话框中单击【确定】按钮，Visual Studio系统会自动创建并配置新建的网站eShop05，同时会自动创建一
3、个Web页面Default.aspx。2准备样式文件和图像文件在文件夹“eShop05”（其路径为“D:ASP.NET网站开发实例教程WebSiteeShop05”）新建三个子文件夹，将新建的文件夹重命名为“css”、“images”和“备用网页”。将已有的样式文件style0501.css拷贝到子文件夹“css”中，将所需的图像文件拷贝到子文件夹“images”中。【5.2操作演练】【任务5-1】浏览静态网页eShop0501.html【任务描述】（1）利用IE浏览器浏览静态网页eShop0501.html。（2）分析网页eShop0501.html中顶部水平导航菜单、页面所处位置导航以及左
4、下侧的树状导航结构的实现方法。【任务实施】1浏览网页eShop0501.html静态网页eShop0501.html在IE浏览器中的浏览效果如图5-1所示。图5-1静态网页eShop0501.html在IE浏览器中的浏览效果2分析顶部水平导航菜单的实现方法网页eShop0501.html中顶部水平导航菜单是利用超链接标签实现的，XHTML代码如下所示。小家电外设产品台式电脑笔记本电脑数码产品手机首页3分析页面所处位置导航的实现方法网页eShop0501.html中页面所处位置导航是利用超链接标签实现的，XHTML代码如下所示。当前位置：首页 >> 手机 &nb
5、sp;>> 诺基亚4分析左下侧的树状导航结构的实现方法网页eShop0501.html中树型导航结构是利用定义列表标签和超链接标签联合实现的，XHTML代码如下所示。 手机 诺基亚 三星 摩托罗拉 数码相机 佳能 索尼 尼康 富士 奥林巴斯 数码摄像机 索尼 佳能 松下 JVC 欧达 三洋 MP3 苹果 OPPO 爱国者 昂达 艾利和 【任务5-2】创建网站地图文件网站地图文件为整个网站提供导航描述，网站导航控件使用网站地图文件中的数据实现导航功能。网站地图文件的默认名称为web.sitemap，该文件是一个特殊文件。【任务描述】在网站“eShop05”中创建名称为“we
6、b.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网页01
7、handset.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所示
8、。图5-10Web页面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属性
9、的值为“2”，即设置静态菜单的菜单呈现级数为2级。（4）设置MaximumDynamicDisplayLevels属性的值为“4”，即设置动态菜单的菜单呈现级数为4。（5）设置StaticSubMenuIndent属性的值为“0px”，即设置静态菜单中子菜单的缩进间距为0px。（6）设置DynamicEnableDefaultPopOutImage属性的值为“False”，即不显示指示动态菜单项具有子菜单的内置图像。（7）设置StaticEnableDefaultPopOutImage属性的值为“False”，即不显示指示静态菜单项包含子菜单的内置图像。（8）设置SkipLinkText属性的
10、值为空，即设置屏幕读取器所读取的隐藏图像的替换文字为空，以提供跳过链接列表的功能（9）设计CssClass属性的值为“menu”，即设置由Menu控件在客户端呈现的级联样式(CSS)类为“menu”，样式文件中类menu的CSS代码为：“float:left ;”。Menu控件的属性设置完成后，该控件的设计外观如图5-21所示。图5-21Web页面eShop050201.aspx中Menu控件的设计外观【任务5-5】使用Menu控件和网站地图实现下拉菜单导航【任务描述】在网站eShop05中添加一个Web页面eShop050202.aspx，该网页中使用Menu导航控件实现多级下拉菜单导航，M
11、enu控件的菜单项内容来源于任务5-2所创建的网站地图文件web.sitemap。Web页面eShop050202.aspx中Menu控件的预览效果如图5-23所示。图5-23Web页面eShop050202.aspx中Menu控件的预览效果【任务实施】1添加一个Web页面eShop050202.aspx2在Web页面eShop050202.aspx中添加一个SiteMapDataSource控件3在Web页面eShop050202.aspx中添加一个Menu控件4设置Web页面eShop050202.aspx中Menu控件的属性【任务5-6】使用TreeView控件的节点编辑器设置树型导航【
12、任务描述】在网站eShop05中添加一个Web页面eShop050301.aspx，该网页中使用TreeView树型导航控件实现树型结构导航，TreeView控件的各级节点使用【节点编辑器】对话框手工添加与编辑。Web页面eShop050301.aspx中TreeView控件的预览效果如图5-25所示。图5-25Web页面eShop050201.aspx中TreeView控件的预览效果【任务实施】1添加一个Web页面eShop050301.aspx2在Web页面eShop050301.aspx中添加一个TreeView控件3使用ASP.NET的【TreeView 节点编辑器】添加TreeVie
13、w控件的节点（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
