(第三章构建网站的前台页面模板.pptVIP

学习情境3 构建网站的前台页面模板 廖黎莉 438545564@项目任务与目标 项目任务 完成网站前台母板页的创建 实现网站导航功能 红丝线网站的树状目录结构 技能目标 能熟练创建母版页并对其进行应用 熟练使用sitemappath控件实现网站的导航功能 熟练使用treeview控件绑定XML数据源完成树状目录结构 3.1搭建网站前台母版页 网页典型布局方式 母版页的创建与应用 创建“迅捷”网站母版页 网页典型布局方式 栏式结构 简单、实用 、条理分明 区域结构 Div+css 母版页 母版页是一个以“.master”为后缀的文件，可以将页面上的公用元素整合到一起。 母版用于在asp . net 中创建一个通用的外观，在母版中只关注布局，在内容页面中应用母版即可。 创建母版 打开项目，在解决方案资源管理器中选择“添加新项”，在弹出的对话框中选择“母版页”。 ContentPlaceHolder 默认母版页中只有一个ContentPlaceHolder控件，是预留给内容页显示信息的控件。 实际开发中，美工会提供静态代码，只需将美工制作的静态代码粘贴到母版即可。 ContentPlaceHolder可以为多个，至少一个，决定了内容的位置。 母版页代码 效果界面 应用母版 方法一：右键单击ContentPlaceHolder，选择“添加内容页” 方法二：创建页面时，选择“选择母版页”，选择相应的母版 注意点： 内容页与母版页的关系是n:1。 如果母版中有多个ContentPlaceHolder，内容页对应了母版中的所有ContentPlaceHolder。 内容页代码 内容页效果 3.2网站导航 站点地图 SiteMapPath控件 前台母版页导航的制作 站点地图 站点地图是描述站点逻辑结构的文件，必须是web .sitemap文件。 位置：应用程序根目录，是一个XML文件。 节点定义： Sitemap:根节点，唯一 Sitemapnode:一个页面一个节点（必须有一个根页面） Title:描述页面 url:文件在解决方案中的位置（必须唯一） Description:说明性文字 叶子页面没有/sitemapnod的结束符号 站点地图代码 SiteMapPath控件 Sitemappath控件用于显示从站点首页到当前页面之间的路径。帮助用户方便定位到任意上级或顶级页面。 Sitemappath必须在web.sitemap文件的配合下才能使用。 Sitemappath控件中的重要属性： Pathseparator：设置分隔符样式 Pagelevelsdisplayed：设置导航显示的级数 加入导航的母版页 3.3网站树形结构 TreeView导航控件 网上书店前台母版页属性目录结构的实现 TreeView导航控件 TreeView控件以树结构的形式展现分层数据 节点类型： 根节点（仅一个） 父节点 叶节点 数据显示方式： 静态数据填充 与数据源控件绑定（站点地图、xml文件） 动态加载树上的节点信息 在此，使用站点地图作为TreeView控件的数据源 使用TreeView导航控件的方法 步骤一：新建页面，将TreeView导航控件拖入。 步骤二：右键单击该控件，选择“显示智能标记”菜单，弹出“TreeView任务”对话框。 总结归纳 母版页提供一个页面框架，内容页提供页面内容。 母版页可以放置导航控件，sitemappath控件可根据内容页的路径显示当前的路径，而不是依据母版页。 只能在站点地图中写明某页面的路径，该页面才能显示sitemappath导航。 Sitemappath控件只能绑定站点地图，而treeview控件还可以绑定xml文件。 界面效果 * * Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2