第7章 主题及母版页.pptVIP

第7章 主题与母版页 第7章 主题与母版页 7.1 主题 7.2 母版页和内容页 7.1 主题 使用主题可以使页面的样式控制更加灵活全面，它将CSS、服务器控件的外观以及各种网站资源的管理有机地组织在一起，为开发者控制统一的页面样式提供了更方便的手段。 7.1.1 主题与外观的基本概念 主题指ASP.NET支持的具有特殊含义的文件夹。在主题中，可以包含各种页面控制文件和资源文件，例如外观文件、级联样式表文件等。 主题的分类分为应用程序主题和全局主题。 应用程序主题指保存在Web应用程序的App_Themes文件夹下的一个或多个特殊文件夹，主题的名称就是文件夹的名称。 全局主题指保存在服务器特定文件夹下的一个或多个特殊文件夹，具体保存到哪个特定文件夹下，则由不同的服务器配置情况决定。全局主题会对该服务器上所有的Web应用程序都起作用。 7.1.1 主题与外观的基本概念 外观的概念指Web服务器控件的属性设置集合，它保存在扩展名为.skin的文件中。 例如Button控件的外观如下 asp:button runat=server BackColor=lightblue ForeColor=black / 注意主题下必须至少包含一个外观文件（.skin文件），也可以有多个外观文件。其他类型的文件可以放在该文件夹下，也可以不放在该文件夹下。但是一旦将样式表文件（.css文件）保存在主题下，样式表将自动作为主题的一部分，在网页中只引用主题即可，不必再单独引用.css文件。 7.1.1 主题与外观的基本概念 使用主题的一般步骤： 1、定义一个或多个主题。在App_Themes文件夹下创建一个或多个主题，然后将主题包含的文件（包括.css文件、.skin文件、图片文件、Flash动画文件以及其他资源文件等）保存到相应主题文件夹下。 2、应用主题。设置网页的【StyleSheetTheme】属性为定义的主题。 7.1.2 在主题中定义外观 定义外观的方法先在页面中设置控件的属性，然后将自动生成的代码复制到外观文件中，再进行修改。 定义外观的步骤 1、向Web应用程序中添加一个网页，在【设计】视图下，将需要设置外观的控件拖放到页面中，例如Button控件、Panel控件等。 2、将相应控件的源代码复制到外观文件中，并去掉控件的ID属性。 3、如果希望某些控件的外观和页面中具有相同类型的其他控件的外观不一样，在.skin文件中，给控件添加一个SkinID属性。 具体方法参看例7－1。 7.1.3 在主题中同时包含外观和样式表 在主题下，除了可以包含.skin文件外，还可以包含.css文件。 可以通过在页面中设置【StyleSheetTheme】属性为定义的主题，这样该主题下的CSS样式就会自动起作用。 具体方法参看例7－2。 7.1.4 .skin文件和.css文件的区别与联系 外观文件（.skin文件）和样式表文件（.css文件）的主要区别和联系有： 1、可以通过外观文件使页面中的多个服务器控件具有相同的外观，而如果用样式表来实现，则必须设置每个控件的【CssClass】属性，才能将样式表中定义的CSS类应用于这些控件，非常烦琐。 2、使用样式表文件虽然能够控制页面中各种元素的样式，但是有些服务器控件的属性却无法用样式表控制，而外观文件则可以轻松完成这些功能。 3、当控制属性比较多的服务器控件外观时，可能需要在.css文件中定义很多CSS类，如果这些CSS类之间定义不好就有可能产生不希望的效果。而用外观文件则不会出现这些问题。 7.1.5 主题分类 按照主题应用于页面的方式，可将其分为3类。 1、样式表主题，指将主题按照与CSS相同的优先级方式控制网页的外观和样式，此时主题的应用方式和样式表的应用方式相同。页面中的属性和样式设置会覆盖在主题中定义的具有相同设置的外观和样式，而不同的设置则会直接合并。 若所有网页都采用同一个主题，也可以在Web.config的system.web中添加pages styleSheetTheme=“Theme1” /来设置样式表主题。 这种方法的缺点是在【设计】视图下从【工具箱】中向页面拖放一个服务器控件时，无法直观地看到样式表主题定义的外观效果，只有运行时才能看到应用的效果。 7.1.5 主题分类 2、页面主题，指按照与CSS优先级控制方式相反的方式控制网页的外观和样式，即页面主题中主题对控件属性和样式设置的优先级高于页面中相应的设置。此时，如果同时在控件和主题中对相同的属性进行了设置，则在主题中对控件的设置将重写在页面中对控件的相同设置，而不是页面中的设置覆盖主题中的相同设置。 页面主题的用途是