主题皮肤与CSS特效

《主题皮肤与CSS特效》由会员分享，可在线阅读，更多相关《主题皮肤与CSS特效（16页珍藏版）》请在装配图网上搜索。

1、主题皮肤与主题皮肤与CSS特效特效N-Ties第二章第二章本章目标本章目标n 使用主题设计网站概述使用主题设计网站概述n 为主题创建皮肤为主题创建皮肤SKINn 动态加载主题动态加载主题n 为主题添加样式表为主题添加样式表CSSn 动态加载动态加载CSS黑色皮肤黑色皮肤白色皮肤白色皮肤使用主题设计网站概述使用主题设计网站概述n 在在 Asp.NET 2.0 出现以前，出现以前， 给网站提供更换主题功能是给网站提供更换主题功能是一项繁重的工作，鉴于每切换一套主题，都需要在页面更一项繁重的工作，鉴于每切换一套主题，都需要在页面更改相应的图片、字体、网页样式等等细小的元素，因而在改相应的图片、字体、

2、网页样式等等细小的元素，因而在代码编写之余，更要求资源的规范管理。而往往在网站的代码编写之余，更要求资源的规范管理。而往往在网站的编写初期，如果没有一定的经验，很难全面的考虑到资源编写初期，如果没有一定的经验，很难全面的考虑到资源文件的细致归类及放置问题。最终导致网站改版时，大量文件的细致归类及放置问题。最终导致网站改版时，大量的迁移和更改，稍有不慎，还会引发文件丢失的问题。的迁移和更改，稍有不慎，还会引发文件丢失的问题。 使用主题设计网站概述使用主题设计网站概述n ASP.NET 2.0的主题和皮肤特性使你能够把样式和布局信的主题和皮肤特性使你能够把样式和布局信息存放到一组独立的文件中，总称

3、为主题（息存放到一组独立的文件中，总称为主题（Theme）。）。接下来我们可以把这个主题应用到任何站点，用于改变该接下来我们可以把这个主题应用到任何站点，用于改变该站点内的页面和控件的外观和感觉。通过改变主题的内容，站点内的页面和控件的外观和感觉。通过改变主题的内容，而不用改变站点的单个页面，就可以轻易地改变站点的样而不用改变站点的单个页面，就可以轻易地改变站点的样式。主题也可以在开发者之间共享。式。主题也可以在开发者之间共享。 n 主题位于应用程序根目录的主题位于应用程序根目录的App_Themes文件夹中。文件夹中。n 可以通过皮肤来修改具有皮肤效果的可以通过皮肤来修改具有皮肤效果的ASP

4、.NET控件的属控件的属性。性。n 虽然可以任意给皮肤文件取名，但是尽量采用命名约定：虽然可以任意给皮肤文件取名，但是尽量采用命名约定：皮肤文件名称和待修改的控件名称一致，再加上皮肤的扩皮肤文件名称和待修改的控件名称一致，再加上皮肤的扩展名展名.skin。n 一个主题可以包含一个或者多个皮肤文件，如何使用文件一个主题可以包含一个或者多个皮肤文件，如何使用文件夹组织这些文件并不重要，因为在一个主题文件夹中的所夹组织这些文件并不重要，因为在一个主题文件夹中的所有文件都会最终编译成一个主题类。有文件都会最终编译成一个主题类。创建默认皮肤创建默认皮肤创建默认皮肤创建默认皮肤n 皮肤文件中不能声明控件的

5、皮肤文件中不能声明控件的ID属性，但是属性，但是runat属性是必属性是必须的。须的。n 只有合适的外观属性才能编写在皮肤文件中，但是不能修只有合适的外观属性才能编写在皮肤文件中，但是不能修改行为属性，例如改行为属性，例如AutoPostBack=“true” 。n 在页面的在页面的指令中使用指令中使用Theme属性来指定页属性来指定页面主题。面主题。n 不能给用户控件的属性应用皮肤，但可以给其中的控件应不能给用户控件的属性应用皮肤，但可以给其中的控件应用皮肤。用皮肤。创建命名皮肤创建命名皮肤n 默认默认皮肤皮肤未定义未定义 SkinId，在同一主题中每个控件类型只允在同一主题中每个控件类型只

6、允许有一个默认的控件外观。许有一个默认的控件外观。n 命名的控件命名的控件皮肤皮肤SkinId 的定义应唯一，因为在同一主题中的定义应唯一，因为在同一主题中不允许一个控件类型有重复的不允许一个控件类型有重复的 SkinId。n 在页面的控件中指定在页面的控件中指定SkinId来应用命名皮肤。来应用命名皮肤。n 如果控件没有应用命名皮肤，就会被应用默认皮肤。如果控件没有应用命名皮肤，就会被应用默认皮肤。在主题中使用图像在主题中使用图像n 主题中也可以包含图像，它们是皮肤文件中的控件定义引主题中也可以包含图像，它们是皮肤文件中的控件定义引用的。用的。n 皮肤文件中的图像引用必须使用主题目录下的图像

7、文件夹皮肤文件中的图像引用必须使用主题目录下的图像文件夹的相对路径，这样皮肤文件和图像才能轻易地随应用程序的相对路径，这样皮肤文件和图像才能轻易地随应用程序迁移。迁移。n 在运行时，图像的路径会被重新定位，因此，对目标页面在运行时，图像的路径会被重新定位，因此，对目标页面中的控件来说，这个引用是相对的。中的控件来说，这个引用是相对的。 重写和禁用主题重写和禁用主题n 在页面应用主题时，主题中的控件属性会重写页面中的在页面应用主题时，主题中的控件属性会重写页面中的已有控件的属性，也就是说，皮肤文件中的属性会重写已有控件的属性，也就是说，皮肤文件中的属性会重写页面中的属性。页面中的属性。n 如果页

8、面中的控件不需要使用主题中的属性，而是需要如果页面中的控件不需要使用主题中的属性，而是需要单独设置属性，则可以使用单独设置属性，则可以使用StyleSheetThemes重写该重写该控件的皮肤。控件的皮肤。n 如果需要阻止页面中的某个控件应用皮肤，则可以使用如果需要阻止页面中的某个控件应用皮肤，则可以使用控件的控件的EnableTheming=“False”来禁用皮肤。来禁用皮肤。动态加载主题动态加载主题n 用户希望通过自己的选择来定制站点皮肤，所以必须通过用户希望通过自己的选择来定制站点皮肤，所以必须通过代码来动态加载主题。代码来动态加载主题。n 为了在代码中应用主题，必须在运行时设置为了在

9、代码中应用主题，必须在运行时设置Page对象的对象的Theme属性。在请求的生命周期的早期属性。在请求的生命周期的早期PreInit事件中，事件中，就必须给页面应用主题。就必须给页面应用主题。在主题中使用在主题中使用CSSn 对于一套皮肤的设置对于一套皮肤的设置,我们不仅需要对网页中的控件进行设我们不仅需要对网页中的控件进行设置置,还应该做到对网页中的任一显示元素都进行随心所欲的还应该做到对网页中的任一显示元素都进行随心所欲的修改修改,这时这时,我们可以通过对我们可以通过对CSS样式表文件的控制来达到目样式表文件的控制来达到目的的.n 通过把通过把CSS放置在命名主题的子目录中，可以给该主题添

10、放置在命名主题的子目录中，可以给该主题添加加CSS。如果页面包含了。如果页面包含了控件定控件定义，那么该义，那么该CSS将应用于所有使用了该主题的页面。将应用于所有使用了该主题的页面。n 可以根据需要重命名可以根据需要重命名CSS文件，只要它的扩展名是文件，只要它的扩展名是. css。在主题中添加多个在主题中添加多个CSSn 可以在一个主题文件夹中包含多个可以在一个主题文件夹中包含多个CSS文件。文件。n 主题链接样式表的方式：在主题链接样式表的方式：在元素中使用元素中使用标记标记n 当主题应用到页面时，主题中的当主题应用到页面时，主题中的CSS文件都在页面中应文件都在页面中应用。用。 n 在

11、主题中添加多个样式表后，样式表应用到页面的顺序在主题中添加多个样式表后，样式表应用到页面的顺序是按样式表文件名的字母排列的，排列在后面的样式表是按样式表文件名的字母排列的，排列在后面的样式表将重写前面样式表中相同标签的样式。将重写前面样式表中相同标签的样式。动态加载动态加载CSSn 使用使用CSS的好处是使加载页面的速度更快。的好处是使加载页面的速度更快。n 在外部的样式表中保存的内容越多，在每一次页面请求时需要加载的在外部的样式表中保存的内容越多，在每一次页面请求时需要加载的内容就越少。内容就越少。n 浏览器可以加载缓存外部样式表的内容并对浏览器可以加载缓存外部样式表的内容并对WEB应用程序中的所有应用程序中的所有页面应用样式表。页面应用样式表。n 如果通过修改控件属性来修改控件皮肤，那么每次页面请求时，多余如果通过修改控件属性来修改控件皮肤，那么每次页面请求时，多余的内容都会被加载到浏览器中。的内容都会被加载到浏览器中。n 使用皮肤也会使页面变得臃肿。使用皮肤也会使页面变得臃肿。总结总结n 主题存放于应用程序的哪个目录？主题存放于应用程序的哪个目录？n 如何禁用和重写主题？如何禁用和重写主题？n 在主题中使用在主题中使用CSS有什么优势？有什么优势？