《母版页与导航》PPT课件.ppt

母版页与导航,一、 母版页与内容页,母版页是指其他网页可以作为模板来引用的特殊网页，其文件扩展名为“.master”。在母版页中，界面被分为公用区域和可编辑区。公用区的设计方法和普通网页的设计方法相同，可编辑区需要使用ContentPlaceHolder控件预留出来。 所谓内容页是指引用了母版页的.aspx页面。在内容页中母版页的ContentPlaceHolder控件预留可编辑区域会自动替换为Content控件，设计人员只要在其中填充需要显示的内容即可，在母版页中定义的公共区域元素将自动显示在内容页中。,创建母版页,在解决方案资源管理器中，右键单击网站名称，在弹出的快捷菜单中执行“添加新项”命令，在下图所示的对话框中选择“母版页”，并为母版页命名后单击“添加”按钮，即可在网站中创建一个新的空白母版页。,母版页中的控件,新创建的母版页中包括有两个控件，一个在元素中，ID为”head”；另一个在元素中，ID为”ContentPlaceHolder1”。 可以使用ID为”head”的控件添加更多用于特定内容页的样式表信息，或者meta信息。 一个母版页中可以包含有一个或多个控件。,创建内容页,在创建新页面时注意勾选“选择母版页”选项。,练习一,第一步：新建一个网站 ，利用提供的素材，在Visual Studio中以嵌套表格的布局方式制作一个母版页（效果如右图所示）,练习一,第二步：制作网站的首页（内容页），选择以第一步制作的母版页作为模板，效果如右图所示。,在内容页中动态修改母版页内容,你可能想通过对特定事件的响应处理，从一个内容页延伸访问到母版页，从而更改母版页的外观呈现。为实现这一要求，须要在内容页能访问到的母版页中创建一个公共属性。 例如，向母版页MasterPage.master.cs文件添加以下属性,其中，Image1是母版页中用于放置LOGO的Image控件的ID。,在内容页中动态修改母版页内容,然后，在内容页的声明文件顶部添加以下指令：,该指令告诉ASP.NET生成一个对MasterPage类的引用，该类对母版页提供了强类型的访问方式。可以通过内容页的Master属性获得对该强类型对象的一个引用。,最后，在内容页的代码文件中书写代码访问MasterPage类并设置它的属性。例如，在Page_Load事件中书写以下代码：,使用晚期绑定的方法,另一个在内容页中修改母版页内容的办法是使用晚期绑定，如果把Page_Load中的事件代码换成下面的代码，结果是一致的。,不过，首选使用属性的方法，因为晚期绑定效率低下且难于维护。,在内容页中响应母版页的事件,在母版页中常包含类似用户登录、站内搜索等需要与用户交互操作的界面，这就需要能够在内容页中处理发生在母版页中的系统事件或用户事件。 在内容页中响应母版页中的事件，需要用到“委托”技术，也就是说将母版页中发生的事件“委托”给内容页中编写的某个“方法”程序来处理。 EventHandler委托的语法格式如下所示： 事件名称 += new EventHandler(处理事件的方法名称);,练习二,完成课本第68页例3-4,练习三,完成课本第69页习题第8题 将程序代码抄写在作业本上。,二、导航,随着网站越来越大，能否找到自己关心的页面会很成问题。ASP.NET向页面提供导航帮助最常见的方式是向站点的母版页添加 Menu、SiteMapPath或TreeView控件。 这三个控件的共同点是：都需要有提供网站上每个页面信息的数据源。创建站点导航数据源的最常见方式是创建一个XML文件（站点地图）。,创建站点地图,右击解决方案资源管理器，选择“添加新项”，然后在“添加新项”对话框中选择“站点地图”（Site Map），并检查其名称是否为Web.sitemap。,Web.sitemap文件内容框架,文件中只有一个元素，用于定义命名空间。 在元素内嵌套了元素。每一个元素声明了一个页面的信息，其中url属性设置页面的url地址（相对路径），title属性设置链接文本，description属性设置工具提示信息。 元素的嵌套关系对应了页面的层次关系。,Web.sitemap文件示例,在母版页中建立导航,使用SiteMapDataSource控件（站点地图数据源控件），默认情况下，SiteMapDataSource控件会寻找并使用名为Web.sitemap文件。 使用TreeView控件，并设置其数据源是刚创建的SiteMapDataSource控件。 使用SiteMapPath控件。,SiteMapPath控件,SiteMapPath 控件是一种站点导航控件，此控件可自动读取和呈现站点地图信息。 只有在站点地图中列出的页才能在 SiteMapPath 控件中显示导航数据。如果将 SiteMapPath 控件放置在站点地图中未列出的页上，该控件将不会向客户端显示任何信息。,练习四,第一步：以示例的代码创建Web.sitemap文件，使用SiteMapDataSource控件与TreeView控件、SiteMapPath控件制作有导航结构的母版页。,图：母版页布局,要求：将母版页的内容文件代码抄写在作业本上。,练习四,第二步：根据Web.sitemap文件中定义的页面信息制作相应的结构与内容页，搭建整个应用程序的框架。,图：OnSiteProgramming.aspx页面运行效果,定制TreeView控件的外观,点击智能标签选择“自动套用格式” 设置TreeView控件的属性,TreeView控件的属性,TreeView控件的属性,TreeView控件的方法,TreeView控件有许多方法，这些方法允许你深入控件并选取特定的节点，或者允许你以编程方式进行理发、展开和收缩节点。,TreeView控件的事件,Menu（菜单导航）控件,利用 Menu 控件，可以开发 ASP.NET 网页的静态和动态显示菜单。Menu 控件具有两种显示模式：静态模式和动态模式。静态显示意味着 Menu 控件始终是完全展开的。整个结构都是可视的，用户可以单击任何部位。在动态显示的菜单中，只有指定的部分是静态的，而只有用户将鼠标放置在父节点上时才会显示其子菜单项。您可以在 Menu 控件中直接配置其内容，也可通过将该控件绑定到数据源的方式来指定其内容。无需编写任何代码，便可控制 ASP.NET Menu 控件的外观、方向和内容。,练习五,复制一份练习四的应用程序，然后按如下布局修改母版页（使用menu控件进行导航）,提示：Menu控件的StaticDisplayLevels 属性可设置静态显示的菜单的层数。,练习五,图：应用程序运行效果,