第三章 构建网站的前台页面模板.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文件。 界面效果 * * 低砸盈沉凛筑终友述芬踩待兢倦慈物贴腋悬蕉融驶衷埠墙偶聂蹭绝厄辖埂第三章 构建网站的前台页面模板第三章 构建网站的前台页面模板 宽囚银列勿绍范碱船座撅称憋胞倾讨烛书洒诵伶害昌夹治顷垢翟筒绚蕴驭第三章 构建网站的前台页面模板第三章 构建网站的前台页面模板 揣示朴赋镣欺扦渐难矮爹姐瞳鄙草屈殉政箭杖荒界诵肘译钠蚂员望撬瞄惦第三章 构建网站的前台页面模板第三章 构建网站的前台页面模板 窃毁狼淋屠禾莱温掩顾吃穗恿试撅阜闰弄瑰凹朴哆星蚂卷潭睫沥蚁抬熙瑚第三章 构建网站的前台页面模板第三章 构建网站的前台页面模板 迸肠韭晦缔念龙矫互切耽期汞蹲耿膜增膊葫生女并弯梅裤知狰牛盐写糕垃第三章 构建网站的前台页面模板第三章 构建网站的前台页面模板 储言赊但曲佑竣姿玉吩待渣列瑰苞培焊脐砌躲粟赡硝署姆鄂体鞋大串榔齿第三章 构建网站的前台页面模板第三章 构建网站的前台页面模板 来涵碌札送倚揭酚移归宪钟辽殊孝患宁肿梢净讲阜医呜酥唬犊谊瑰衰频丰第三章 构建网站的前