2

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

文件夹结构将是这样的：

  • /默认.aspx
  • /皮肤/Master.css
  • /Skins1/Skin1/Skin1.css
  • /Skins1/Skin1/图像/ ...
  • /Skins1/Skin1/Skin2.css
  • /皮肤1/皮肤2/图像/ ...
  • /Skins1/Skin1/Skin3.css
  • /皮肤1/皮肤3/图像/ ...

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

<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 应用程序可能不会降级

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

4

1 回答 1

1

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

代码颂_

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

App_Themes/Skin1

App_Themes/Skin2

App_Themes/Skin3

...

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

于 2009-09-07T21:19:57.520 回答