创建具有多个皮肤的 ASP.NET Web 应用程序？答案

【问题标题】：Creating ASP.NET web application with multiple skins?创建具有多个皮肤的 ASP.NET Web 应用程序？
【发布时间】：2010-11-26 07:58:03
【问题描述】：

我目前正在开发一个具有多个皮肤的 ASP.NET WebForms 应用程序。我正在考虑的方法是将每个皮肤放在一个完全独立的文件夹中，该文件夹将包含所有图像和 CSS，并且 CSS 将相应地引用图像。

文件夹结构是这样的：

/Default.aspx
/Skins/Master.css
/Skins1/Skin1/Skin1.css
/Skins1/Skin1/Images/ ...
/Skins1/Skin1/Skin2.css
/Skins1/Skin2/Images/ ...
/Skins1/Skin1/Skin3.css
/Skins1/Skin3/Images/ ...

因此，例如，我们可能有：

<div id="foo-logo"></div>
<a href="/bar/"><div id="bar-logo"></div></a>

然后在 CSS 中：

#top-logo { height: 100px; width:200px; background:url(images/foo-logo.jpg); }
#bar-logo { height: 50px;  width:100px; background:url(images/bar-logo.jpg); }

我的逻辑是避免在代码中引用皮肤文件夹，如下所示：

<img src="/skins/<%=Settings.CurrentSkin%>/images/foo-logo.jpg" />
<a href="/bar/"><img src="/skins/<%=Settings.CurrentSkin%>/images/bar-logo.jpg" /></a>

这样，HTML 将保持干净和完全独立，并且可以通过引用不同的 CSS 文件来完全改变皮肤，而无需更新图像标签。

我能想到的主要缺点是：

包含元素的图像尺寸需要在 CSS 中具体指定，因为它们将作为 CSS 背景图像实现
如果重要的品牌元素（例如徽标）仅通过 CSS 可见，则 Web 应用程序可能不会降级

在使用此方法时我还应该注意什么和/或是否有更好的方法来实现这一点？

【问题讨论】：

如何选择合适的皮肤？它是用户特定的设置，还是根据其他条件自动选择的设置？
Web 应用程序将有多个 URL，将根据用于访问它的 URL 选择皮肤。

标签： asp.net css themes skinning

【解决方案1】：

WebForms 支持 Themes 和 Skinning，这可以做很多你想做的事情，一些有用的文章是

Ode to Code, MSDN

皮肤基本上允许您定义单独的样式表和控制皮肤。您拥有的文件夹结构如下所示

App_Themes/Skin1

App_Themes/Skin2

App_Themes/Skin3

...

然后，您可以使用 asp:Image 控件为每个皮肤 ID 指向不同的图像 URL（或者您可以通过 CSS 来实现）。

【讨论】：