Technical Blog of QuitGame

永不放弃的梦
数据加载中……
体验 .net2.0 的优雅(2) -- ASP.net 主题和皮肤
     
    示例站点的截图
        
    black skin
   

    white skin
   

    看了一下
visual web developer 中自带的个人站点,发现aspnet2.0里面的很多技术使用起来确实很优雅,比较典型的有 login控件和用户系统、MasterPage、主题和皮肤、SiteMap等等。这些特性,甚至不需要教程就可以很快上手。本文要介绍的是主题和皮肤的应用。 

(一)  如何使用 

1)  在你的应用里面添加 App_Themes 文件夹

2)  将主题相关的文件(包括.css,.skin文件、其他资源文件包括图片、Flash等)组织到一个以主题名命名的文件夹中,将主题文件夹放于App_Themes目录。如果有多个主题,重复上述步骤。 

Example

Css 文件(x.css

.column {background-image: url(images/content-shim.gif);}

.gradient 
{ background-image: url(images/content-shim-photo.gif);}

.solid 
{background-image: url(images/content-shim-none.gif);}

.header 
{

     background-image
: url(Images/header.gif);

     background-repeat
: no-repeat;

     position
: relative;

     width
: 789px;

     height
: 76px;

     margin
: 0 auto 5px auto;

}
 

Skin 文件(x.skin)

 <asp:imagebutton runat="server" Imageurl="Images/button-login.gif" skinid="login" />

<asp:image runat="server" Imageurl="Images/button-create.gif" skinid="create" />

<asp:image runat="server" ImageUrl="Images/button-download.gif" skinid="download"/>

 

        理论上上来说,不同的主题中的样式表和SKIN文件的结构都应该是完全相同的。

 

3)  设置你要应用主题的控件的css样式名为css中定义的样式名(比如columngradient

设置你要应用主题的服务器控件的SkinIdSkin文件中定义的skinid(比如logincreate等),这样在Skin中定义的控件属性会自动附加到当前的控件上(内部也是使用CSS实现的)

 

4)  应用主题,有三种办法      

       全局主题:在Web.config<system.web>中添加<pages StyleSheetTheme ="ThemeName"/>节,这样在整个应用中都会自动应用名为ThemeName 的主题 

       页面主题:在ASPX文件顶部加入:<%@ Page Language="C#" StylesheetTheme=" ThemeName " %>,这样当前页面都会应用名为ThemeName 的主题,或者在ASPX_CS中加(Page_Load方法)入如下代码 Page. StyleSheetTheme = “ThemeName”;  

       角色主题:需要使用masterpage 来辅助实现 ,通过User.IsInRole(“RoleName”) 来判断用户是否属于某个角色,然后决定使用何种主题(Page. StyleSheetTheme = “ThemeName”);当然,使用这种办法还可以应用用户选择的主题 

       如果你仍然感觉迷惑,请查看 Quick Start

 

(二)  工作原理

    不同的主题和皮肤之间的不同主要是页面和页面中的控件的样式(包括字体、段落、背景、边框等等)、部分图片的不同。

    传统的完全使用CSS来表现不同的主题的方案,在处理图片和图片按钮的地方往往心有余而力不足。而在aspnet2.0里面一切都已经变得简单。

    主题和皮肤是 dotnet framework2.0内建支持的,服务器控件添加了SkinId属性,Page类也添加了Theme StyleSheetTheme 属性,其目的就是优雅的支持Skin。在应用指定了主题之后,相关的页面会自动链接位于主题目录下的css文件和skin文件,css的用法跟传统的用法没有什么区别,而skin文件则以一种类似于css的方式工作,指定了SkinId的服务器控件会自动从skin文件中加载并附加匹配的属性或样式(最常用的是Image ImageButtonImageUrl属性,这样做可以使页面在不同的主题下)---这是在服务器端完成的。由于skin文件在使用后是缓存在内存中的,所以效率不会有问题。

 

(三)  Theme StylesheetTheme 的区别

    基本上,本文前面所有的 StyleSheetTheme 都可以替换为 Theme ,我猜想区别是使用 Theme 时位于主题文件夹中的 样式表(CSS)文件不会被应用到主题中,但是根据我的测试,发现两种情况下生成的页面中,只有<link href=’’>这一节的位置不同,一个出现在<Title>标记前面,一个则是后面。 

(四)  优雅之处

a)         完全Framework内建的支持、不再需要复杂的编程,甚至不再需要编程;

b)        vs2005中有非常友好的设计时支持,也就是说,在设计的时候你就可以看到某种主题的效果;

c)        学习曲线很平缓,如果你熟悉CSS的话,则更加没有难度。

posted on 2005-11-22 17:47 quitgame 阅读(7739) 评论(11)  编辑 收藏 网摘 所属分类: ASP.NET/WEB

评论

#1楼 2005-11-23 08:46 springwind.net[未注册用户]

Theme 和 StylesheetTheme 的区别应该是,如果当前页使用Theme,则当前页中使用Theme风格的控件,不可以再在控件中添加新的风格,而StylesheetTheme则相反。

    回复  引用    

#2楼 2005-11-23 13:38 蛙蛙池塘      

恩,不错。
    回复  引用  查看    

#3楼[楼主] 2005-11-23 16:59 QuitGame      

@springwind.net

说的很对

MSDN 上这样讲的

Themes are similar to cascading style sheets in that both themes and style sheets define a set of common attributes that can be applied to any page. However, themes differ from style sheets in the following ways:

Themes can define many properties of a control or page, not just style properties. For example, using themes, you can specify the graphics for a TreeView control, the template layout of a GridView control, and so on.

Themes can include graphics.

Themes do not cascade the way style sheets do. For example, by default, property values override local property values unless you explicitly apply the theme as a style sheet theme.

Only one theme can be applied to each page. You cannot apply multiple themes to a page, unlike style sheets where multiple style sheets can be applied.



btw:
VSD 占用内存真是恐怖,有的时候还起一两个占用内存同样恐怖的虚拟服务器
再加上偶尔用 MSDN Express ,内存经常飚到 600M +
    回复  引用  查看    

#4楼 2006-10-17 15:39 tzbl[未注册用户]

对于style的展现,我觉得就是:
a. styleSheetTheme(第1级)
b. 代码定义的风格(第2级)
c. Theme(第3级)
较高级别的可以覆盖较低级别。
    回复  引用    

#5楼 2006-11-23 10:28 yunhuasheng      

ding,对我有参考价值.
    回复  引用  查看    

#6楼 2007-01-16 10:08 volnet

msdn:
主题设置优先级
可以通过指定主题的应用方式来指定主题设置相对于本地控件设置的优先级。

如果设置了页的 Theme 属性,则主题和页中的控件设置将进行合并,以构成控件的最终设置。如果同时在控件和主题中定义了控件设置,则主题中的控件设置将重写控件上的任何页设置。即使页面上的控件已经具有各自的属性设置,此策略也可以使主题在不同的页面上产生一致的外观。例如,它使您可以将主题应用于在 ASP.NET 的早期版本中创建的页面。

此外,也可以通过设置页面的 StyleSheetTheme 属性将主题作为样式表主题来应用。在这种情况下,本地页设置优先于主题中定义的设置(如果两个位置都定义了设置)。这是级联样式表使用的模型。如果您希望能够设置页面上的各个控件的属性,同时仍然对整体外观应用主题,则可以将主题作为样式表主题来应用。
    回复  引用    

#7楼 2007-06-18 01:43 FDZ[未注册用户]

受益良多。
不错 ,有没有介绍 login的
profile的。
    回复  引用    

#8楼[楼主] 2007-06-18 22:51 quitgame      

@FDZ
偶已经不做.net很多年了,SORRY。
    回复  引用  查看    

#9楼 2008-11-13 17:49 牛腩      

想过用这个切换主题的功能来实现网站的换肤功能,但是在实施的过程中有个问题:
当一个网页应用了主题之后,该主题文件夹中的CSS等都会通过LINK导入到当前页面,这就会产生一个问题了,一个不大不小的网站页面少少来说也起码有几十个页面吧,可是这几十个页面不一定都用到主题中每一个CSS文件,或许只用到了其中的一个或二个CSS文件,我想请教一下能不能是页面只是导入主题中的一个或二个CSS文件呢?
    回复  引用  查看    

#10楼 2008-12-19 10:37 独臂侠      

我不想要主题里的样式,可是项目里在web.config里又定义了ThemeName 的主题,有没有其他的方法在指定某个页面不导入ThemeName 里的主题
    回复  引用  查看    

#11楼[楼主] 2008-12-20 12:25 quitgame      

可以啊,在@Page指令里面设置不适用主题
    回复  引用  查看    



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 282181




相关文章:

相关链接: