2

現在、複数のスキンを持つ ASP.NET WebForms アプリケーションを開発中です。私が考えている方法は、すべての画像と CSS を含む完全に別のフォルダーに各スキンを配置し、それに応じて CSS が画像を参照することです。

フォルダ構造は次のようになります。

  • /Default.aspx
  • /スキン/Master.css
  • /Skins1/Skin1/Skin1.css
  • /スキン1/スキン1/画像/ ...
  • /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 は、ここでやりたいと思われる多くのことを行うテーマとスキニングをサポートしています。いくつかの役立つ記事は次のとおりです。

コードへの頌歌、 MSDN

スキニングで基本的にできることは、個別のスタイルシートとコントロール スキンを定義することです。あなたが持っているフォルダ構造は次のようになります

App_Themes/Skin1

App_Themes/Skin2

App_Themes/Skin3

...

次に、各スキン ID の個別の画像 URL を指す asp:Image コントロールを使用できます (または、CSS を介して行うことができます)。

于 2009-09-07T21:19:57.520 に答える