构建网站的前台页面模板电子商务案例分析与解决方案教学课件

学习情境3

构建网站的前台页面模板廖黎莉工程任务与目标工程任务完成网站前台母板页的创立实现网站导航功能红丝线网站的树状目录结构技能目标能熟练创立母版页并对其进行应用熟练使用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控件可根据内容页的路径显示当前的路径，而不是依据母版页。只能在站点地图中写明某页面