ASP网页布局与标准化PPT课件

1、第11章 网页布局与标准化第1页/共46页本章主要内容 11.1 概 述 11.2 母 版 页 11.3 主题与外观 11.4 Web部件 11.5 导航控件和站点地图第2页/共46页11.1 概 述 大型系统对应用程序统筹的需求如下。 （1）所有页面具有一个或者几个统一的布局（实质上是对母版页的设计）。 （2）网站具有多个风格并且风格可以切换（实质上是对主题和皮肤的设计）。 （3）网站中的一些元素可以被重用（实质上是对Web部件的设计）。 （4）网站具有多个语言并且可以根据用户浏览器设置的语言进行切换（实质上是对本地化和资源的设计）。 （5）网站的页面层次比较复杂，需要使用各种方式的导航提示

2、信息（实质上是对导航控件和站点地图的设计）。第3页/共46页11.2 母 版 页 母版页类似于Word中的模板，允许在多个页面中共享相同的内容。例如，网站的LOGO如果需要在多个页面中重用，则可以将其放在母版页中。在Dreamweaver中可以使用模板页，的母版页与此类似。 第4页/共46页11.2.1 母版页和内容页图11-1 母版页与内容页第5页/共46页11.2.2 母版页的运行机制图11-2 母版页和内容页的控件对应关系第6页/共46页 母版页的运行过程如下。 （1）用户访问内容页。 （2）获取内容页后，读取Page指令，若指令引用到一个母版页，则也读取该母版页（3）母版页合并到内容页

3、的控件树中。 （4）各个Content控件的内容合并到母版页中对应的ContentPlaceHolder控件中。 （5）呈现结果页。第7页/共46页11.2.3 创建母版页 母版页的使用与普通页面类似，可以在其中放置文件或者图形、任何HTML控件和Web控件、后置代码等。母版页的扩展名为.master，不能被浏览器直接查看。母版页必须在被其他页面使用后才能显示。 第8页/共46页创建母版页 实例 具体实现请参考源代码下ch11_2 MasterPage.master 第9页/共46页创建内容页 创建完母版页后，下一步是创建内容页。内容页的创建与Web窗体的创建基本相似 。 具体实现请参考源代码

4、下ch11_2 Default.aspx 第10页/共46页11.2.5 设置母版页应用范围 提供了将内容附加到母版页的3种级别，即提供了3种母版页的应用范围。 1页级 2应用程序级 3文件夹级第11页/共46页11.2.6 访问母版页上的控件 protected void Page_LoadComplete(object sender, EventArgs e) /母版页中查询ID为labMaster的Label控件的Text属性值 Label MLable1 = (Label)this.Master.FindControl(labMaster); /将查询的值通过内容页中的 Label控件

5、显示出来 this.labContent.Text = MLable1.Text; 第12页/共46页11.3 主题与外观 站点的外观主要与页面控件的样式属性有关，同时控件还支持将样式设置与控件属性分离的级联样式表（CSS）。在实现站点的过程中，开发人员可能不得不为多数控件添加样式属性，这种做法很繁琐，并且不易保持站点外观的一致性和独立性。 第13页/共46页11.3.1 主题概述 （1）外观：外观文件是主题的核心内容，用于定义页面中服务器控件的外观。 （2）级联样式表（CSS）：主题还可以包含级联样式表（.css文件）。将.css文件放在主题目录中时，样式表自动作为主题的一部分应用。主题中可

6、以包含一个或多个级联样式表。 （3）图像和其他资源。第14页/共46页11.3.2 外观概述 外观文件的扩展名为.skin，它包含各个控件的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。有两种类型的控件外观：默认外观和命名外观。第15页/共46页11.3.3 创建主题和外观 在VS 2010解决方案中，要创建一个新主题，首先在App_Themes下创建一个新的文件夹。最简单的方法是右击App_Themes节点，并选择一个主题文件夹。接着把主题文件添加到该文件中。 具体实现请参考源代码下ch11_3 App_Themes mytheme下的Label.skin

7、 ，Calendar.skin 文件第16页/共46页11.3.4 应用主题和外观 1简单应用 应用外观文件的页面不同于普通页面的地方主要有以下3个方面。 （1）在应用主题的方法的标签中设置一个Theme属性。 （2）如果为控件设置默认外观，则不设置控件的SkinID属性；如果为控件设置了命名外观，则需要设置控件的SkinID属性。 （3）如果在控件代码中添加了与控件外观相同的属性，则页面最终显示的是控件外观的设置效果。第17页/共46页2动态加载主题 除了在页面声明和配置文件中指定主题，还可以通过编程方式应用主题，即动态加载主题。运行库在PreInit事件激发后，立即加载主题信息。用户可以在

8、程序运行时和Web应用程序进行交互，自定义Web应用程序的颜色和总体外观。实现动态加载主题的核心是修改Page对象的Theme属性值。 第18页/共46页动态加载主题实例 该实例还是利用上一节的日历控件，上一节是同时显示两个不同主题的日历控件，这里将实现根据用户的不同选择，显示不同主题的控件。该实例中除了日历控件外，增加了下拉列表控件进行选择。 具体实现请参考源代码下ch11_3 动态加载主题.aspx 第19页/共46页11.4 Web部件 11.4.1 Web部件基础 Web部件由3部分组成，分别是个性化设置、用户界面结构组件以及Web部件控件。 第20页/共46页Web部件层次结构 最上

9、层的是Web部件控件，Web部件从Part类中派生，这些控件构成了Web部件的用户界面。处于中间层的是Web部件的重要层次：用户界面结构组件，结构组件用于协调和管理Web部件控件中的控件，包括WebPartManager和各种区域控件。 第21页/共46页11.4.2 用户界面结构组件 1WebPartManager控件 它是Web部件的总控中心，管理页面上的其他Web部件，是一个非可视控件。在一个Web部件网页中，有且仅有一个WebPartManager控件。在建立Web部件网页时，应首先建立WebPartManager控件。 第22页/共46页 WebPartManager的Display

10、Mode属性能变页面显示模式，有如下5种可选项。 BrowseDisplayMode：默认的显示模式 DesignDisplayMode：有BrowseDisplayMode模式的功能，用户可以将WebPart控件从一个区域拖到另一个区域；也可以在同一个区域内拖动，从而改变网页的布局。 EditDisplayMode：有DesignDisplayMode模式的功能，用户能编辑WebPart控件的外观和行为。 第23页/共46页 CatalogDisplayMode：有DesignDisplayMode模式的功能，用户能添加和删除WebPart控件。常用于重新启用被用户关闭的WebPart控件。

11、具体实现时，还需配合使用CatalogZone控件。 ConnectDisplayMode：有DesignDisplayMode模式的功能，用户能在不同的WebPart控件之间建立连接，实现数据的相互传输。第24页/共46页2区域控件 常用的区域控件有WebPartZone控件、CatalogZone控件和EditorPart控件。 （1）WebPartZone控件。 WebPartZone控件用于承载网页上的WebPart控件，并为其包含的控件提供公共的用户界面。 （2）EditorZone控件。 EditorZone控件只有在Web部件网页进入EditDisplayMode模式时才变为可见

12、。 （3）CatalogZone控件。 CatalogZone控件只有在Web部件网页进入CatalogDisplayMode模式时才变为可见。 第25页/共46页3文件 要建立包含Web部件的网页，需要对文件中的和配置节进行配置。 当页面启用Windows验证时，建立的Web部件网页在浏览时可以直接对WebPart控件进行个性化设置；而当页面启用Forms验证时，以匿名用户访问Web部件网页将不能对WebPart控件进行个性化设置。只有当用户登录成功后才能对Web部件网页中的WebPart控件进行个性化设置。第26页/共46页11.4.3 建立Web部件网页 具体实现请参考源代码下ch11_

13、4网站中的文件.运行后发现有4种模式可选：Browse、Design、Catalog和Edit。Catalog模式下会显示CatalogZone区域的信息，Edit会显示EditorZone信息。第27页/共46页11.5 导航控件和站点地图 在含有大量页面的站点中，构造一个可使用户随意在页面间切换的导航系统可能颇有难度，尤其是在更改站点时。使用站点导航可以创建页面的集中站点地图。面向导航的服务器控件包括Menu、TreeView、SiteMapPath和SiteMapDataSource控件。这 第28页/共46页11.5.1 站点地图概述 站点地图是一种扩展名为.sitemap的标准XML

14、文件，用来定义整个站点的结构、各页面的链接、相关说明和其他相关定义。站点地图的默认名为，存储在应用程序的根目录下。.sitemap文件的内容是以XML形式描述的树状结构文件，其中包括站点结构信息。TreeView、Menu、SiteMapPath控件的网站导航信息和超链接的数据都是由.sitemap文件提供的。第29页/共46页siteMapNode节点的常用属性 属属 性性说说 明明url设置用于节点导航的设置用于节点导航的URL地址。地址。title设置节点名称设置节点名称description设置节点说明文字设置节点说明文字keyword定义表示当前节点的关键字定义表示当前节点的关键字r

15、oles定义允许查看该站点地图文件的角色集合。定义允许查看该站点地图文件的角色集合。siteMapFile设置包含其他相关设置包含其他相关SiteMapNode元素的站点地图文件元素的站点地图文件Provider定义处理其他站点地图文件的站点导航提供程序名称。定义处理其他站点地图文件的站点导航提供程序名称。第30页/共46页11.5.2 使用SiteMapPath控件显示导航 SiteMapPath控件可以轻松定位所在当前网站中的位置。该控件会显示一条导航路径，用于显示当前页的位置，并显示返回到主页的路径链接。它包含来自地点地图的导航数据，只有在站点地图中列出的页才能在SiteMapPath控

16、件中显示导航数据。 第31页/共46页1SiteMapPath控件概述 SiteMapPath控件用于显示一组文本或图像超链接，以便在使用最少页面空间的同时轻松地定位当前所在网站中的位置。该控件会显示一条导航路径，此路径为用户显示当前页的位置，并显示返回到主页的路径链接。它包含来自站点地图的导航数据，只有在站点地图中列出的页才能在SiteMapPath控件中显示导航数据。 第32页/共46页SiteMapPath控件的常用属性 属属 性性说说 明明CurrentNodeTemplate获得或设置一个控件模板，用于代表当前显示页的站点导航路径节点获得或设置一个控件模板，用于代表当前显示页的站点导

17、航路径节点NodeStyle获取用于站点导航路径中所有节点的显示文本样式获取用于站点导航路径中所有节点的显示文本样式NodeTemplate获取或设置一个控件模板，用于站点导航路径的所有功能节点获取或设置一个控件模板，用于站点导航路径的所有功能节点ParentLevelsDisplayed获取或设置控件显示的相对于当前显示节点的父节点级别数获取或设置控件显示的相对于当前显示节点的父节点级别数PathDirection获取或设置导航路径节点的呈现顺序获取或设置导航路径节点的呈现顺序PathSeparator获取或设置一个字符串，该字符串在呈现的导航路径中分隔获取或设置一个字符串，该字符串在呈现的

18、导航路径中分隔SiteMapPath节点节点PathSeparatorTemplate获取或设置一个控件模板，用于站点导航路径的路径分隔符获取或设置一个控件模板，用于站点导航路径的路径分隔符RootNodeTemplate获取或设置一个控件模板，用于站点导航路径的根节点获取或设置一个控件模板，用于站点导航路径的根节点SiteMapProvider获取或设置用于呈现站点导航控件的获取或设置用于呈现站点导航控件的SiteMapProvider的名称的名称第33页/共46页3应用SiteMapPath控件实现站点导航 使用SiteMapPath控件无需代码和绑定数据就能创建站点导航。此控件可自动读取

19、和呈现站点地图信息。下面通过实例来说明SiteMapPath控件的使用方法。 具体实现请参考源代码下ch11_5网站中的文件.第34页/共46页11.5.3 使用TreeView控件显示导航 TreeView控件用于在树型结构中显示分层数据，如目录或文件目录。对于导航文字很多，并且可以对导航内容进行分类的网站来说，可以将页面的导航文字以树形结构形式显示，这样既可以有效地节约页面，又可以方便用户查看。第35页/共46页1TreeView控件概述 TreeView控件的主要功能如下 :（1）支持数据绑定，即允许通过数据绑定方式。 （2）支持站点导航功能。 （3）单击文字可显示为普通文本或超链接文本

20、。 （4）自定义树型和节点的样式、主题等外观特征。 （5）可通过编程方式访问TreeView对象模型 （6）在客户端浏览器支持的情况下，通过客户端到服务器的回调填充节点。 （7）具有在节点旁显示复选框的功能。第36页/共46页2TreeView控件的常用属性 （1）ExpandDepth属性。 设置默认情况下TreeView服务器控件展开层次数。例如，若将该属性设置为2，则将展开根节点及根节点下方紧邻的所有父节点。 （2）Nodes属性。 使用Nodes属性可以获取一个包含树中所有根节点的TreeNodeCollection对象。Nodes属性通常用于快速循环访问所有根节点，或者访问树中的某个

21、特定节点，还可以使用Nodes属性以编程方式管理树中的根节点，即可在集合中添加、插入、移除和检索TreeNode对象。第37页/共46页 （3）SelectedNodes属性。 该属性用于获取用户选中节点的TreeNode对象。当节点显示为超链接文本时，该属性返回值为null，不可用。第38页/共46页3TreeView控件的常用事件和方法 （1）常用事件。 SelectedNodeChanged事件。 TreeNodeExpanded事件和TreeNodeCollapsed事件。 TreeNodePopulate事件。第39页/共46页（2）常用方法 利用TreeView控件的CollapseAll()和ExpandAll()方法折叠和展开节点。 利用TreeView控件的Nodes.Add()方法添加节点到控件中。图11-19 添加TreeView控件 利用TreeView控件的Nodes.Remove()方法删除指定的节点。第40页/共46页4使用TreeView控件动态添加和移除节点 以下实例利用TreeView控件显示城市结构图，并能动态地添加和移除节点、折叠和展开节点。 具体实现请参考源代码下ch11_5网站中的myTreeView.aspx 文件.第41页/共46页5使用TreeView控件显示导航 与SiteMapPa