第7章 主题与母版页

7.2.1 母版页和内容页的基本概念
4、服务器将页面中各个Content控件的内容合并到母版页 中相应的ContentPlaceHolder控件中。 5、服务器将合并后的内容发送给客户端，客户端在浏览 器中呈现合并后的网页。 注意：在母版页中使用图片和超链接时，尽量使用服务 器的Image控件和HyperLink控件，不要使用客户端的<im g …/>元素和<a …/>超链接元素。
17
7.2.2 母版页和内容页的创建方法
母版页的设计方法与一般网页的设计方法相似，区别仅 仅是不能单独在浏览器中查看母版页，而必须通过内容 页在浏览器中查看。 具体方法参看例7－4。
18
7.3 从内容页中访问母版页中的内容
在实际应用中，有时需要通过后台代码从内容页中访问 母版页中的属性、方法。因此，必须在母版页中将被访 问的属性或方法声明为公共成员。但从内容页中访问母 版页中的控件时，则没有这种限制。 访问母版页中的公共成员的方法： 从内容页中访问指定的母版页的成员，可通过创建@ Mast erType指令创建对此母版页的强类型引用。 该指令的常用形式是<%@ MasterType virtualpath=“母 板页文件路径” %>。
10
7.1.5 主题分类
2、页面主题，指按照与CSS优先级控制方式相反的方式控 制网页的外观和样式，即页面主题中主题对控件属性和 样式设置的优先级高于页面中相应的设置。此时，如果 同时在控件和主题中对相同的属性进行了设置，则在主 题中对控件的设置将重写在页面中对控件的相同设置， 而不是页面中的设置覆盖主题中的相同设置。 页面主题的用途是可以简单地将早期设计的网页统一改为 希望的新外观，一般在升级早期设计的网页外观时才会 采用这种办法。 3、全局主题，使用全局主题可以控制所有网站中网页的 样式和外观，以便实现在一个Web服务器中提供多个网站。
在设计网页时经常会遇到多个网页部分内容相同的情况， 如果每个网页都设计一次显然是重复劳动且非常繁琐。 而使用母版页可以很好的解决这个问题。 除此之外，母版页还可以统一管理和定义页面，使多个 页面具有相同的布局风格，给网页设计和修改带来很大 方便。
14
7.2.1 母版页和内容页的基本概念
母版页的概念 指其他网页可以将其作为模板来引用的特殊网页。母版 页的扩展名为.master。在母版页中，界面被分为公用区 和可编辑区，公用区的设计方法与一般页面的设计方式 相同，可编辑区用ContentPlaceHolder控件预留出来。 一个母版页中可以有一个可编辑区，也可以有多个可编 辑区。 内容页的概念 引用母版页的.aspx页面即为内容页。在内容页中，母版 页的ContentPlaceHolder控件预留的可编辑区会被自动 替换为Content控件，开发人员只需在Content控件区域 中填充内容即可，在母版页中定义的其他标记将自动出 现在使用了该母版页的.aspx页面中。
12
7.1.6 利用主题实现页面换肤
实现换肤功能的思路： 1、定义多个主题，在不同的主题下分别定义页面外观和 样式。 2、在后台代码中，重写页面的【StyleSheetTheme】属性。 3、在主页中添加一个下拉列表，让用户选择使用哪种皮 肤。 具体实现方法参看例7－3。
13
7.2 母版页和内容页
4
7.1.1 主题与外观的基本概念
外观的概念 指Web服务器控件的属性设置集合，它保存在扩展名 为.skin的文件中。 例如Button控件的外观如下 <asp:button runat="server" BackColor="lightblue " ForeColor="black" /> 注意 主题下必须至少包含一个外观文件（.skin文件）， 也可以有多个外观文件。其他类型的文件可以放在该 文件夹下，也可以不放在该文件夹下。但是一旦将样 式表文件（.css文件）保存在主题下，样式表将自动 作为主题的一部分，在网页中只引用主题即可，不必 再单独引用.css文件。
9
7.1.5 主题分类
按照主题应用于页面的方式，可将其分为3类。 1、样式表主题，指将主题按照与CSS相同的优先级方式控 制网页的外观和样式，此时主题的应用方式和样式表的 应用方式相同。页面中的属性和样式设置会覆盖在主题 中定义的具有相同设置的外观和样式，而不同的设置则 会直接合并。 若所有网页都采用同一个主题，也可以在Web.config的<s ystem.web>中添加<pages styleSheetTheme=“Theme1” />来设置样式表主题。 这种方法的缺点是在【设计】视图下从【工具箱】中向页 面拖放一个服务器控件时，无法直观地看到样式表主题 定义的外观效果，只有运行时才能看到应用的效果。
外观文件（.skin文件）和样式表文件（.css文件）的主 要区别和联系有： 1、可以通过外观文件使页面中的多个服务器控件具有相 同的外观，而如果用样式表来实现，则必须设置每个控 件的【CssClass】属性，才能将样式表中定义的CSS类应 用于这些控件，非常烦琐。 2、使用样式表文件虽然能够控制页面中各种元素的样式， 但是有些服务器控件的属性却无法用样式表控制，而外 观文件则可以轻松完成这些功能。 3、当控制属性比较多的服务器控件外观时，可能需要在. css文件中定义很多CSS类，如果这些CSS类之间定义不好 就有可能产生不希望的效果。而用外观文件则不会出现 这些问题。
11
7.1.6 利用主题实现页面换肤
实现页面换肤功能的方法有2种： 1、修改页面的【Theme】属性，将主题作为页面主题 。 2、修改页面的【StyleSheetTheme】属性，将主题作为样 式表主题。 由于页面主题会覆盖内联式样式中的相同设置，即当内 联式样式和.css文件中样式的设置相同时，内联式样式 控制会失效，而且.skin文件中的设置也会使页面中对控 件直接设置的相同属性失效，所以一般不使用页面主题 实现换肤功能，而是采用样式表主题来实现。这样做的 好处是，既不会影响内联式控制，又可以根据用户需要 更换页面皮肤。
第7章 主题与母版页
第7章 主题与母版页
7.1 主题 7.2 母版页和内容页
2
7.1 主题
使用主题可以使页面的样式控制更加灵活全面，它 将CSS、服务器控件的外观以及各种网站资源的管 理有机地组织在一起，为开发者控制统一的页面样 式提供了更方便的手段。
3
7.1.1 主题与外观的基本概念
主题 指ASP.NET支持的具有特殊含义的文件夹。在主题中，可以包含各种 页面控制文件和资源文件，例如外观文件、级联样式表文件等。 主题的分类 分为应用程序主题和全局主题。 应用程序主题 指保存在Web应用程序的App_Themes文件夹下的一个或多个特殊文件 夹，主题的名称就是文件夹的名称。 全局主题 指保存在服务器特定文件夹下的一个或多个特殊文件夹，具体保存 到哪个特定文件夹下，则由不同的服务器配置情况决定。全局主题 会对该服务器上所有的Web应用程序都起作用。
22
实验报告
实验一 利用CSS设计一个网上商城主页 一、实验目的 二、实验内容 三、实验步骤 四、实验结果 五、实验小结 （例3－7） 实验二 利用站点地图实现站点导航 （例 6－4） 实验三 利用主题实现页面换肤 （例7－3) 实验四 母版页的设计与应用 （例7－5）
23
实验五 设计一个小型考试成绩管理程序 有10个学生的考试成绩如下表:
15
7.2.1 母版页和内容页的基本概念
使用内容页的步骤： 1、用户键入内容页的URL请求某网页。 2、服务器获取该页后，读取页中的@ Page指令。如果该 指令引用一个母版页，则也读取该母版页。如果用户第 一次请求这两个页，则两个页都进行编译。 3、服务器将包含的母版页合并到内容页的控件树中。
16
19
7.3 从内容页中访问母版页中的内容
从内容页中访问母版页中的属性的例子： 有一个名为MasterPage1.master的母版页，其对应的类名 是MasterPage1。 在该类中声明一个TrueName属性，则可在内容页中添加代 码：<%@ MasterType virtualPath=“~/MasterPage1.m aster”%>。 然后就可以通过Master.TrueName读取或设置母版页中Tru eName属性的值。
6
7.1.2 在主题中定义外观
定义外观的方法 先在页面中设置控件的属性，然后将自动生成的代码复制到外观文 件中，再进行修改。 定义外观的步骤 1、向Web应用程序中添加一个网页，在【设计】视图下，将需要设置 外观的控件拖放到页面中，例如Button控件、Panel控件等。 2、将相应控件的源代码复制到外观文件中，并去掉控件的ID属性。 3、如果希望某些控件的外观和页面中具有相同类型的其他控件的外 观不一样，在.skin文件中，给控件添加一个SkinID属性。 具体方法参看例7－1。
5Hale Waihona Puke Baidu
7.1.1 主题与外观的基本概念
使用主题的一般步骤： 1、定义一个或多个主题。在App_Themes文件夹下创建一 个或多个主题，然后将主题包含的文件（包括.css文 件、.skin文件、图片文件、Flash动画文件以及其他资 源文件等）保存到相应主题文件夹下。 2、应用主题。设置网页的【StyleSheetTheme】属性为定 义的主题。
7
7.1.3 在主题中同时包含外观和样式表
在主题下，除了可以包含.skin文件外，还可以包含.css 文件。 可以通过在页面中设置【StyleSheetTheme】属性为定义 的主题，这样该主题下的CSS样式就会自动起作用。 具体方法参看例7－2。
8
7.1.4 .skin文件和.css文件的区别与联系
21
ViewState对象 ViewState对象
视图状态是 ASP.NET 页框架用于在往返过程之间保留页和控件值的 方法。在呈现页的 HTML 标记时，必须在回发过程中保留的页和值 方法。 标记时， 的当前状态将被序列化为 Base64 编码字符串。然后，此信息将被 编码字符串。然后， 放入一个或多个视图状态隐藏字段。 放入一个或多个视图状态隐藏字段。 应用程序是无状态的。每次从服务器请求页时， Web 应用程序是无状态的。每次从服务器请求页时，都会创建网页 类的一个新实例。 类的一个新实例。这通常意味着在每次往返过程中会丢失该页及其 控件中的所有信息。例如，默认状态下， 控件中的所有信息。例如，默认状态下，如果用户将信息输入到 HT 网页上的文本框中，该信息会发送到服务器。但是， ML 网页上的文本框中，该信息会发送到服务器。但是，该信息不会 在响应中返回到浏览器。 在响应中返回到浏览器。 控件的EnableViewState属性：如果不必存储单个控件的控件信息， EnableViewState属性 控件的EnableViewState属性：如果不必存储单个控件的控件信息， 则可以禁用控件的视图状态。 则可以禁用控件的视图状态。如果页上的某个控件在每次回发时从 数据存储区进行刷新， 数据存储区进行刷新，则可以关闭该控件的视图状态以减少视图状 态的大小。例如， 控件的视图状态。 态的大小。例如，可以关闭 GridView 控件的视图状态。 @Page:定义 页分析器和编译器使用的页特定（ 文件） @Page:定义 ASP.NET 页分析器和编译器使用的页特定（.aspx 文件） 属性。 属性。 @page中EnableViewState属性可以关闭视图状态 false）。 属性可以关闭视图状态（ 在@page中EnableViewState属性可以关闭视图状态（false）。
20
7.3 从内容页中访问母版页中的内容
访问母版页中的控件的方法： 在内容页后台代码中调用FindControl方法获取对母版页 中控件的引用。 FindControl方法的原型为： public override Control FindControl (string id) 其中id表示母版页中控件的ID名称。 如何从内容页中访问母版页中的属性和控件的具体实现 方法参看例7－5。