第11章 ASP.NET网页布局与标准化,本章主要内容,11.1 概 述 11.2 母 版 页 11.3 主题与外观 11.4 Web部件 11.5 导航控件和站点地图,11.1 概 述,大型系统对应用程序统筹的需求如下。 （1）所有页面具有一个或者几个统一的布局（实质上是对母版页的设计）。 （2）网站具有多个风格并且风格可以切换（实质上是对主题和皮肤的设计）。 （3）网站中的一些元素可以被重用（实质上是对Web部件的设计）。 （4）网站具有多个语言并且可以根据用户浏览器设置的语言进行切换（实质上是对本地化和资源的设计）。 （5）网站的页面层次比较复杂，需要使用各种方式的导航提示信息（实质上是对导航控件和站点地图的设计）。,11.2 母 版 页,母版页类似于Word中的模板，允许在多个页面中共享相同的内容。例如，网站的LOGO如果需要在多个页面中重用，则可以将其放在母版页中。在Dreamweaver中可以使用模板页，ASP.NET的母版页与此类似。,11.2.1 母版页和内容页,图11-1 母版页与内容页,11.2.2 母版页的运行机制,图11-2 母版页和内容页的控件对应关系,母版页的运行过程如下。 （1）用户访问内容页。 （2）获取内容页后，读取Page指令，若指令引用到一个母版页，则也读取该母版页（3）母版页合并到内容页的控件树中。 （4）各个Content控件的内容合并到母版页中对应的ContentPlaceHolder控件中。 （5）呈现结果页。,11.2.3 创建母版页,母版页的使用与普通页面类似，可以在其中放置文件或者图形、任何HTML控件和Web控件、后置代码等。母版页的扩展名为.master，不能被浏览器直接查看。母版页必须在被其他页面使用后才能显示。,创建母版页 实例,具体实现请参考源代码下ch11_2 MasterPage.master,创建内容页,创建完母版页后，下一步是创建内容页。内容页的创建与Web窗体的创建基本相似 。 具体实现请参考源代码下ch11_2 Default.aspx,11.2.5 设置母版页应用范围,ASP.NET提供了将内容附加到母版页的3种级别，即提供了3种母版页的应用范围。 1页级 2应用程序级 3文件夹级,11.2.6 访问母版页上的控件,protected void Page_LoadComplete(object sender, EventArgs e) /母版页中查询ID为labMaster的Label控件的Text属性值 Label MLable1 = (Label)this.Master.FindControl(labMaster); /将查询的值通过内容页中的 Label控件显示出来 this.labContent.Text = MLable1.Text; ,11.3 主题与外观,站点的外观主要与页面控件的样式属性有关，同时控件还支持将样式设置与控件属性分离的级联样式表（CSS）。在实现站点的过程中，开发人员可能不得不为多数控件添加样式属性，这种做法很繁琐，并且不易保持站点外观的一致性和独立性。,11.3.1 主题概述,（1）外观：外观文件是主题的核心内容，用于定义页面中服务器控件的外观。 （2）级联样式表（CSS）：主题还可以包含级联样式表（.css文件）。将.css文件放在主题目录中时，样式表自动作为主题的一部分应用。主题中可以包含一个或多个级联样式表。 （3）图像和其他资源。,11.3.2 外观概述,外观文件的扩展名为.skin，它包含各个控件的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。有两种类型的控件外观：默认外观和命名外观。,11.3.3 创建主题和外观,在VS 2010解决方案中，要创建一个新主题，首先在App_Themes下创建一个新的文件夹。最简单的方法是右击App_Themes节点，并选择一个主题文件夹。接着把主题文件添加到该文件中。 具体实现请参考源代码下ch11_3 App_Themes mytheme下的Label.skin ，Calendar.skin 文件,11.3.4 应用主题和外观,1简单应用 应用外观文件的页面不同于普通页面的地方主要有以下3个方面。 （1）在应用主题的方法的标签中设置一个Theme属性。 （2）如果为控件设置默认外观，则不设置控件的SkinID属性；如果为控件设置了命名外观，则需要设置控件的SkinID属性。 （3）如果在控件代码中添加了与控件外观相同的属性，则页面最终显示的是控件外观的设置效果。,2动态加载主题,除了在页面声明和配置文件中指定主题，还可以通过编程方式应用主题，即动态加载主题。ASP.NET运行库在PreInit事件激发后，立即加载主题信息。用户可以在程序运行时和Web应用程序进行交互，自定义Web应用程序的颜色和总体外观。实现动态加载主题的核心是修改Page对象的Theme属性值。,动态加载主题实例,该实例还是利用上一节的日历控件，上一节是同时显示两个不同主题的日历控件，这里将实现根据用户的不同选择，显示不同主题的控件。该实例中除了日历控件外，增加了下拉列表控件进行选择。 具体实现请参考源代码下ch11_3 动态加载主题.aspx,11.4 Web部件,11.4.1 Web部件基础 Web部件由3部分组成，分别是个性化设置、用户界面结构组件以及Web部件控件。,Web部件层次结构,最上层的是Web部件控件，Web部件从Part类中派生，这些控件构成了Web部件的用户界面。 处于中间层的是Web部件的重要层次：用户界面结构组件，结构组件用于协调和管理Web部件控件中的控件，包括WebPartManager和各种区域控件。,11.4.2 用户界面结构组件,1WebPartManager控件 它是Web部件的总控中心，管理页面上的其他Web部件，是一个非可视控件。在一个Web部件网页中，有且仅有一个WebPartManager控件。在建立Web部件网页时，应首先建立WebPartManager控件。,WebPartManager的DisplayMode属性能变页面显示模式，有如下5种可选项。 BrowseDisplayMode：默认的显示模式 DesignDisplayMode：有BrowseDisplayMode模式的功能，用户可以将WebPart控件从一个区域拖到另一个区域；也可以在同一个区域内拖动，从而改变网页的布局。 EditDisplayMode：有DesignDisplayMode模式的功能，用户能编辑WebPart控件的外观和行为。, CatalogDisplayMode：有DesignDisplayMode模式的功能，用户能添加和删除WebPart控件。常用于重新启用被用户关闭的WebPart控件。具体实现时，还需配合使用CatalogZone控件。 ConnectDisplayMode：有DesignDisplayMode模式的功能，用户能在不同的WebPart控件之间建立连接，实现数据的相互传输。,2区域控件,常用的区域控件有WebPartZone控件、CatalogZone控件和EditorPart控件。 （1）WebPartZone控件。 WebPartZone控件用于承载网页上的WebPart控件，并为其包含的控件提供公共的用户界面。 （2）EditorZone控件。 EditorZone控件只有在Web部件网页进入EditDisplayMode模式时才变为可见。 （3）CatalogZone控件。 CatalogZone控件只有在Web部件网页进入CatalogDisplayMode模式时才变为可见。,3web.config文件,要建立包含Web部件的网页，需要对web.config文件中的和配置节进行配置。 当页面启用Windows验证时，建立的Web部件网页在浏览时可以直接对WebPart控件进行个性化设置；而当页面启用Forms验证时，以匿名用户访问Web部件网页将不能对WebPart控件进行个性化设置。只有当用户登录成功后才能对Web部件网页中的WebPart控件进行个性化设置。,11.4.3 建立Web部件网页,具体实现请参考源代码下ch11_4网站中的WebParts.aspx文件.运行后发现有4种模式可选：Browse、Design、Catalog和Edit。Catalog模式下会显示CatalogZone区域的信息，Edit会显示EditorZone信息。,11.5 导航控件和站点地图,在含有大量页面的站点中，构造一个可使用户随意在页面间切换的导航系统可能颇有难度，尤其是在更改站点时。使用ASP.NET站点导航可以创建页面的集中站点地图。面向导航的服务器控件包括Menu、TreeView、SiteMapPath和SiteMapDataSource控件。这,11.5.1 站点地图概述,站点地图是一种扩展名为.sitemap的标准XML文件，用来定义整个站点的结构、各页面的链接、相关说明和其他相关定义。站点地图的默认名为Web.sitemap，存储在应用程序的根目录下。.sitemap文件的内容是以XML形式描述的树状结构文件，其中包括站点结构信息。TreeView、Menu、SiteMapPath控件的网站导航信息和超链接的数据都是由.sitemap文件提供的。,siteMapNode节点的常用属性,11.5.2 使用SiteMapPath控件显示导航,SiteMapPath控件可以轻松定位所在当前网站中的位置。该控件会显示一条导航路径，用于显示当前页的位置，并显示返回到主页的路径链接。它包含来自地点地图的导航数据，只有在站点地图中列出的页才能在SiteMapPath控件中显示导航数据。,1SiteMapPath控件概述,SiteMapPath控件用于显示一组文本或图像超链接，以便在使用最少页面空间的同时轻松地定位当前所在网站中的位置。该控件会显示一条导航路径，此路径为用户显示当前页的位置，并显示返回到主页的路径链接。它包含来自站点地图的导航数据，只有在站点地图中列出的页才能在SiteMapPath控件中显示导航数据。,SiteMapPath控件的常用属性,3应用SiteMapPath控件实现站点导航,使用SiteMapPath控件无需代码和绑定数据就能创建站点导航。此控件可自动读取和呈现站点地图信息。下面通过实例来说明SiteMapPath控件的使用方法。 具体实现请参考源代码下ch11_5网站中的Hardware.aspx, Products.sitemap文件.,11.5.3 使用TreeView控件显示导航,TreeView控件用于在树型结构中显示分层数据，如目录或文件目录。对于导航文字很多，并且可以对导航内容进行分类的网站来说，可以将页面的导航文字以树形结构形式显示，这样既可以有效地节约页面，又可以方便用户查看。,1TreeView控件概述,TreeView控件的主要功能如下 :（1）支持数据绑定，即允许通过数据绑定方式。 （2）支持站点导航功能。 （3）单击文字可显示为普通文本或超链接文本。 （4）自定义树型和节点的样式、主题等外观特征。 （5）可通过编程方式访问TreeView对象模型 （6）在客户端浏览器支持的情况下，通过客户端到服务器的回调填充节点。 （7）具有在节点旁显示复选框的功能。,2TreeView控件的常用属性,（1）ExpandDepth属性。 设置默认情况下TreeView服务器控件展开层次数。例如，若将该属性设置为2，则将展开根节点及根节点下方紧邻的所有父节点。 （2）Nodes属性。 使用Nodes属性可以获取一个包含树中所有根节点的TreeNodeCollection对象。Nodes属性通常用于快速循环访问所有根节点，或者访问树中的某个特定节点，还可以使用Nodes属性以编程方式管理树中的根节点，即可在集合中添加、插入、移除和检索TreeNod