当前位置:编程学习 > C#/ASP.NET >>

网站换皮肤

网站皮肤的设置,这个一般是怎么实现的  我指的是全站换皮肤
我见网上有很多支持全站换皮肤,不知道这个是怎么实现的
--------------------编程问答-------------------- .net框架里自带就有个皮肤包的,实现有很多方法。在配置文件中配置或设置全局性变量 --------------------编程问答-------------------- 母版页
MasterPage.Master --------------------编程问答-------------------- 使用主题就可以实现 --------------------编程问答-------------------- asp.net的服务器端控件提供了多种样式的设计,如果对每个控件都单独设置,是比较繁琐的事情,所以微软也提供了针对这些服务器端控件的样式管理,其实也可以通过css来控制部分服务器端控件的样式,比如textbox,如果用普css就是对input进行样式控制,但对于gridview或者日历控件等,css文件无法灵活的控制,这就需要微软专门为服务器端控件提供的主题和皮肤。

 2 

 3 主题和皮肤的使用方法:

 4 

 5 1、新建外观文件(*.skin),然后在文件里设定服务器端控件的样式

 6 

 7 2、在aspx页面的Page里加入外观文件的应用,StylesheetTheme或者Theme(两者有不同)

 8 

 9 StylesheetTheme和Theme的区别:

10 

11 针对默认的样式(没有定义SkinID的样式),在相应的aspx页面中Theme将采用定义的样式,在页面里再设计同属性的样式无效;StylesheetTheme则允许在页面里再定义同属性的样式并有效。(注意:是同属性的样式,比如同是定义Height)

12 

13 举例:

14 假设我们建立了一个外观文件newSkin,定义了一个默认textbox的样式和一个指定SkinID的textbox的样式(背景颜色、边框的颜色、宽度和线条类型)

15 <asp:TextBox runat="server" BorderColor="#6699FF" BackColor="#CCFFCC" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>

16 

17 <asp:TextBox runat="server" SkinID="new" BackColor="#FFCC99" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>

18 

19 示例1:

20 

21 在aspx页面中使用Theme来引入外观文件,并且在页面里有四个TextBox的控件:

22 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Skin_Default" Theme="newSkin" %>

23 控件1:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

24 控件2:<asp:TextBox ID="TextBox1" runat="server" BackColor="#009933" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>

25 控件3:<asp:TextBox ID="TextBox2" runat="server" Height="40px"></asp:TextBox>

26 控件4:<asp:TextBox ID="TextBox2" SkinID="new" runat="server" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>

27 

28 结果:

29 控件1和控件2的样式是一样的,控件2在页面里设置的样式无效;

30 控件3除了自定义的高度之外,和控件1、2的样式一样。(在外观文件里没有定义的属性样式,可以在页面里定义)

31 控件4的样式是外观文件里SkinID为new的样式,页面里定义的样式无效。

32 

33 示例2:

34 

35 在aspx页面中使用Theme来引入外观文件,并且在页面里有四个TextBox的控件:

36 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Skin_Default" StylesheetTheme="newSkin" %>

37 控件1:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

38 控件2:<asp:TextBox ID="TextBox1" runat="server" BackColor="#009933" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>

39 控件3:<asp:TextBox ID="TextBox2" runat="server" Height="40px"></asp:TextBox>

40 控件4:<asp:TextBox ID="TextBox2" SkinID="new" runat="server" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>

41 

42 结果:

43 控件1是使用外观文件里的默认样式;

44 控件2是页面里自定义的样式;

45 控件3除了自定义的高度之外,和控件1的样式一样;

46 控件4的样式使用了外观文件里SkinID为new的样式中BackColor="#FFCC99" BorderColor="#FF6600"这两个属性,BorderWidth和BorderStyle则是页面里定义的样式。

47 

48 如果StylesheetTheme或Theme和我们原来设计页面的css文件(或者页面定义style)同时使用会是什么情况?

49 

50 结果:无论是使用StylesheetTheme或Theme,只要是在外观文件里定义的属性值,均是有效的,没有定义的属性值采用css文件里的样式。

51 

52 如果同时使用StylesheetTheme或Theme、页面自定义样式和css文件,那又会怎么样?

53 

54 结果:优先级(优先级的意思是先采用优先级高定义的样式,如果优先级高的没有定义,则采用下一优先级的样式)

55 1、Theme:外观文件->页面控件自定义样式->css文件

56 

57 2、StylesheetTheme:页面控件自定义样式->外观文件->css文件

58 

59 总之,css文件的优先级是最低的。
--------------------编程问答-------------------- 1、主题是什么 
   主题由一组元素组成:外观、级联样式表 (css)、图像和其他资源。主题将至少包含外观。主题是在网站或 web 服务器上的非凡目录中定义的。主题是一组web control的属性设置的集合,提供一种简单的方法设置控件的样式属性。

·主题只在web control中有效

·母板页(master page)上不能设置主题,但是主题可以在内容页面上设置

·主题上设置的web control的样式覆盖页面上设置的样式

·假如在页面上设置enabletheming="false",主题无效

·要在页面中动态设置主题,必须在页面生命周期page_preinit事件之前

·主题包括.skin和.css文件

2、.skin是什么文件

.skin是外观文件,它包含各个控件(例如,button、label、textbox 或 calendar 控件)的属性设置。控件外观设置类似于控件标记本身,但只包含您要作为主题的一部分来设置的属性。例如,下面是 button 控件的控件外观:

<asp:button runat="server" backcolor="lightblue" forecolor="black" />

在 theme 文件夹中创建 .skin 文件。一个 .skin 文件可以包含一个或多个控件类型的一个或多个控件外观。可以为每个控件在单独的文件中定义外观,也可以在一个文件中定义所有主题的外观。有两种类型的控件外观 -“默认外观”和“已命名外观”:

·当向页应用主题时,默认外观自动应用于同一类型的所有控件。假如控件外观没有 skinid 属性,则是默认外观。例如,假如为 calendar 控件创建一个默认外观,则该控件外观适用于使用本主题的页面上的所有 calendar 控件。(默认外观严格按控件类型来匹配,因此 button 控件外观适用于所有 button 控件,但不适用于 linkbutton 控件或从 button 对象派生的控件。)

·已命名外观是设置了 skinid 属性的控件外观。已命名外观不会自动按类型应用于控件。而应当通过设置控件的 skinid 属性将已命名外观显式应用于控件。通过创建已命名外观,可以为应用程序中同一控件的不同实例设置不同的外观。

3、如何为相同控件定义不同的skin

    使用skinid为控件定义不同的skin,例如

<asp:label runat=server text="themedlabel" backcolor="red" /> -label的缺省外观 <asp:label runat=server skinid="boldlabel" text="themedlabel_withskinid" backcolor="blue" font-bold="true" /> - 命名为boldlabel 的label外观

   因此页面没有指定skinid的label自动应用缺省外观,label的skinid设置为boldlabel的label控件应用boldlabel外观

4、如何组织主题文件内容

   theme文件下可以包含多个.skin文件,所以可以多种方式组织你的主题文件,所有的主题文件在应用于页面之前会合并。

·一个.skin文件包含所有的控件的外观定义

·每个控件一个.skin文件

·相同skinid的控件放在一个.skin文件中

5、有没有办法定义好的theme文件在多个程序中共享

服务器上的任何网站以及任何网站中的任何页面都可以引用全局主题,使用全局的主题可以在各个应用程序之间共享,例如你想创建一个全局共享的主题theme1。iis 服务器上的全局主题放置位置类似于 \inetpub\wwwroot\aspnet_client\system_web\v2.0.xxxxx\themes\theme1

应用程序级别的主题会覆盖全局的主题,例如你在应用程序中也定义了theme1的主题,那么在应用程序级的theme1主题将覆盖全局的主题theme1

 

6、stylesheettheme是什么

   主题还可以包含级联样式表(.css 文件)。将 .css 文件放在主题目录中时,样式表自动作为主题的一部分应用。使用文件扩展名 .css 在主题文件夹中定义样式表。设置页面的 stylesheettheme 属性将主题作为样式表主题来应用。假如您希望能够设置页面上的各个控件的属性,同时仍然对整体外观应用主题,则可以将主题作为样式表主题来应用。enabletheming="false"情况下stylesheettheme仍然有效。通过重写属性stylesheettheme来动态修改页面上的主题样式
public override string stylesheettheme
 {
    get{ retrun "mystylesheettheme"; } 
 }

7、主题(theme/skin)资源

一组相当不错的theme,可以直接应用的项目开发中

    theme预览:http://www.dotnettreats.com/samplethemes/default.aspx
    theme下载:http://www.dotnettreats.com/tools/default.aspx

--------------------编程问答-------------------- 用于定义 ASP.NET 主题的文件

SkinFile.skin --------------------编程问答-------------------- .skin主题  + web.config + page基类 --------------------编程问答-------------------- http://topic.csdn.net/u/20090609/17/86bae385-8dea-4c8e-8fa4-7f0464d8a36b.html --------------------编程问答-------------------- http://www.google.cn/search?hl=zh-CN&q=asp.net+theme%E4%B8%8B%E8%BD%BD&meta=&aq=3&oq=asp.net+theme  --------------------编程问答-------------------- 高手太多。。。。 --------------------编程问答-------------------- 学习一下 --------------------编程问答-------------------- 都是ctrl-c ctrl-v , --------------------编程问答-------------------- 呵呵,今天做了个更换皮肤的 --------------------编程问答-------------------- 4楼不要从网站上copy. --------------------编程问答--------------------
引用 3 楼 kingboy2008 的回复:
使用主题就可以实现


UP --------------------编程问答-------------------- 换肤就是换个样式 --------------------编程问答-------------------- 呵呵 以前我也在想这个问题,收藏 --------------------编程问答-------------------- css写的可维护性高一些,下次可能只要换一个css和一些图片就可以整站换肤。 --------------------编程问答-------------------- 同样的架构,换样式表咯!把基本能换的都放进样式表里面,一换就全部换掉了! --------------------编程问答-------------------- 调用不同的样式吧,我想应该是 --------------------编程问答--------------------  可以用 客户端cookis
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,