创建具有多个皮肤的 ASP.NET Web 应用程序？
我目前正在开发一个具有多个外观的 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 中可见
在使用此方法时还有什么我应该注意的吗和/或是否有更好的方法来实现此目的？
I'm currently in the process of developing an ASP.NET WebForms application that will have multiple skins. The way I'm thinking of approaching this is to have each skin in a completely separate folder, which will contain all images and CSS, and the CSS will reference images accordingly.
The folder structure would be something like this:
- /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/ ...
So, for example, we might have:
<div id="foo-logo"></div>
<a href="/bar/"><div id="bar-logo"></div></a>
And then in the 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); }
My logic behind this is to avoid having references to the skin folder in-line with the code, like this:
<img src="/skins/<%=Settings.CurrentSkin%>/images/foo-logo.jpg" />
<a href="/bar/"><img src="/skins/<%=Settings.CurrentSkin%>/images/bar-logo.jpg" /></a>
This way, the HTML will remain clean and be completely independent, and it will be possible to completely change the skin simply by referencing a different CSS file and remove the need to update image tags.
The main downsides of this that I can think of are:
- Image dimensions on the containing element will need to be specifically specified in CSS as they will be implemented as CSS background-images
- Web application may not degrade as well if important brand elements such as the logo are only visible with CSS
Is there anything else I should be aware of when using this method and/or is there a better way of achieving this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
WebForms 支持主题和皮肤，它可以完成您似乎想做的很多事情，一些有用的文章是
代码颂歌，
MSDN
皮肤基本上允许您定义单独的样式表和控件皮肤。您拥有的文件夹结构将类似于
App_Themes/Skin1
App_Themes/Skin2
App_Themes/Skin3
...
然后您可以使用 asp:Image 控件为每个外观 ID 指向不同的图像 url（或者您可以通过 CSS 来实现）。
WebForms has support for Themes and Skinning which does a lot of what you seem to want to do here, some helpful articles are
Ode to Code,
MSDN
What skinning basically allows you to do is define seperate stylesheets and control skins. The folder structure you have would be look like
App_Themes/Skin1
App_Themes/Skin2
App_Themes/Skin3
...
You can then use asp:Image controls that point to distinct image urls for each skin ID (or you can do it via CSS).