klaus_b@.NET

Wer seine Artikel für BlogEngine.NET mit dem Windows Live Writer schreibt, wird dieses Phänomen kennen. Wenn Bilder, oder andere Ressourcen, in Artikeln verwendet werden, generiert der Windows Live Writer sehr unschönes HTML. Anstatt mit CSS-Klassen zu arbeiten, wird Spaghetticode in Form von Inline-Style Attributen erzeugt. Technisch gesehen ist dies nicht weiter schlimm, meiner Meinung nach aber nicht mehr zeitgemäß.
Eine typische HTML-Ausgabe des WLW für ein eingefügtes Bild sieht meist folgendermaßen aus:

<img
  style="display: inline; float: left"
  title="Test"
  alt="Test"
  align="left"
  src="http://blog.klaus-b.net/image.axd?picture=test.png"
  width="130"
  height="130" />

Es ist nicht weiter schwierig, die gewünschte Ausrichtung eines Bildes anhand der Werte der Style- und Align-Attribute zu erkennen und durch eine entsprechende CSS-Klasse zu ersetzen. Im obigen Fall der Linksausrichtung würde ich den Namen leftImg für die CSS-Klasse wählen und das Ergebnis sollte in etwa so aussehen:

<img
  class="leftImg"
  title="Test"
  alt="Test"
  src="http://blog.klaus-b.net/image.axd?picture=test.png"
  width="130"
  height="130" />

Da die meistverwendeten Positionierungen von Bildern in Artikeln sich auf links, rechts und zentriert beschränken, hält sich der Aufwand für die Logik der Positionsbestimmung in Grenzen.
Auch die Verwendung von nur drei CSS-Klassen hält die Konfiguration einfach und übersichtlich, wie man an folgendem Screenshot sehen kann.

Für den Moment ist die Verwendung der Erweiterung auf Bilder beschränkt. Das Konzept sollte sich aber ohne weiteres auch auf DIVs und andere Elemente mit Inline-Style Attributen anwenden lassen.

FAZIT:

Welchen Vorteil bietet mir die Verwendung der Erweiterung? Außer der strikten Trennung von HTML und Styling vor allem mehr Flexibilität was die Darstellung der Bildern angeht. Bei einer evtl. Änderung des Blog-Designs können die jeweiligen CSS-Klassen beliebig umgestaltet werden und die Änderungen sind sofort in allen Elementen, die die jeweilige Klasse verwenden, sichtbar. Ganz im Gegensatz zu den statischen Style-Attributen, deren Änderung doch einen erheblichen Aufwand darstellt.

ConvertStyleToCss.zip

Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitten "kicken" sie ihn.