创建具有多个外观的ASP.NET Web应用程序?

时间:2009-09-07 21:05:31

标签: asp.net css themes skinning

我目前正在开发一个具有多个外观的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 background-images
  • 如果徽标等重要品牌元素仅在CSS中可见,则Web应用程序也不会降级。

使用此方法时是否还有其他我应该注意的事项和/或是否有更好的方法来实现这一目标?

1 个答案:

答案 0 :(得分:1)

WebForms支持主题和外观,它可以完成你想要做的很多事情,一些有用的文章

Ode to CodeMSDN

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

App_Themes文件/ Skin1

App_Themes文件/ Skin2

App_Themes文件/ Skin3

...

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