2017整理主题皮肤与CSS特效.pptVIP

《N-Ties》第二章 本章目标 使用主题设计网站概述 为主题创建皮肤SKIN 动态加载主题 为主题添加样式表CSS 动态加载CSS 黑色皮肤 白色皮肤 使用主题设计网站概述 在 Asp.NET 2.0 出现以前， 给网站提供更换主题功能是一项繁重的工作，鉴于每切换一套主题，都需要在页面更改相应的图片、字体、网页样式等等细小的元素，因而在代码编写之余，更要求资源的规范管理。而往往在网站的编写初期，如果没有一定的经验，很难全面的考虑到资源文件的细致归类及放置问题。最终导致网站改版时，大量的迁移和更改，稍有不慎，还会引发文件丢失的问题。 使用主题设计网站概述 ASP.NET 2.0的主题和皮肤特性使你能够把样式和布局信息存放到一组独立的文件中，总称为主题（Theme）。接下来我们可以把这个主题应用到任何站点，用于改变该站点内的页面和控件的外观和感觉。通过改变主题的内容，而不用改变站点的单个页面，就可以轻易地改变站点的样式。主题也可以在开发者之间共享。 主题位于应用程序根目录的App_Themes文件夹中。 可以通过皮肤来修改具有皮肤效果的ASP.NET控件的属性。 虽然可以任意给皮肤文件取名，但是尽量采用命名约定：皮肤文件名称和待修改的控件名称一致，再加上皮肤的扩展名.skin。 一个主题可以包含一个或者多个皮肤文件，如何使用文件夹组织这些文件并不重要，因为在一个主题文件夹中的所有文件都会最终编译成一个主题类。 创建默认皮肤 创建默认皮肤 皮肤文件中不能声明控件的ID属性，但是runat属性是必须的。 只有合适的外观属性才能编写在皮肤文件中，但是不能修改行为属性，例如AutoPostBack=“true” 。 在页面的%@ Page %指令中使用Theme属性来指定页面主题。 不能给用户控件的属性应用皮肤，但可以给其中的控件应用皮肤。 创建命名皮肤 默认皮肤未定义 SkinId，在同一主题中每个控件类型只允许有一个默认的控件外观。 命名的控件皮肤SkinId 的定义应唯一，因为在同一主题中不允许一个控件类型有重复的 SkinId。 在页面的控件中指定SkinId来应用命名皮肤。 如果控件没有应用命名皮肤，就会被应用默认皮肤。 在主题中使用图像 主题中也可以包含图像，它们是皮肤文件中的控件定义引用的。 皮肤文件中的图像引用必须使用主题目录下的图像文件夹的相对路径，这样皮肤文件和图像才能轻易地随应用程序迁移。 在运行时，图像的路径会被重新定位，因此，对目标页面中的控件来说，这个引用是相对的。 重写和禁用主题 在页面应用主题时，主题中的控件属性会重写页面中的已有控件的属性，也就是说，皮肤文件中的属性会重写页面中的属性。 如果页面中的控件不需要使用主题中的属性，而是需要单独设置属性，则可以使用StyleSheetThemes重写该控件的皮肤。 如果需要阻止页面中的某个控件应用皮肤，则可以使用控件的EnableTheming=“False”来禁用皮肤。 动态加载主题 用户希望通过自己的选择来定制站点皮肤，所以必须通过代码来动态加载主题。 为了在代码中应用主题，必须在运行时设置Page对象的Theme属性。在请求的生命周期的早期PreInit事件中，就必须给页面应用主题。 在主题中使用CSS 对于一套皮肤的设置,我们不仅需要对网页中的控件进行设置,还应该做到对网页中的任一显示元素都进行随心所欲的修改,这时,我们可以通过对CSS样式表文件的控制来达到目的. 通过把CSS放置在命名主题的子目录中，可以给该主题添加CSS。如果页面包含了head runat=“server”/控件定义，那么该CSS将应用于所有使用了该主题的页面。 可以根据需要重命名CSS文件，只要它的扩展名是. css。 在主题中添加多个CSS 可以在一个主题文件夹中包含多个CSS文件。 主题链接样式表的方式：在head/元素中使用 link rel=stylesheet href=.../标记 当主题应用到页面时，主题中的CSS文件都在页面中应用。 在主题中添加多个样式表后，样式表应用到页面的顺序是按样式表文件名的字母排列的，排列在后面的样式表将重写前面样式表中相同标签的样式。 动态加载CSS 使用CSS的好处是使加载页面的速度更快。 在外部的样式表中保存的内容越多，在每一次页面请求时需要加载的内容就越少。 浏览器可以加载缓存外部样式表的内容并对WEB应用程序中的所有页面应用样式表。 如果通过修改控件属性来修改控件皮肤，那么每次页面请求时，多余的内容都会被加载到浏览器中。 使用皮肤也会使页面变得臃肿。 总结 主题存放于应用程序的哪个目录？ 如何禁用和重写主题？ 在主题中使用CSS有什么优势？