Eigene Stylesheets in FrontPage verwenden

Eigene Stylesheets zusätzlich zu einem FrontPage-Design zu verwenden ist nicht ganz trivial. Es ist aber doch möglich.

Wer ein FrontPage-Design verwendet, tut gut daran, im Dialogfenster „Design“ die Option „CSS verwenden“ zu aktivieren. (Bei FrontPage 2003 verwenden Designs immer CSS.) Ohne CSS erzeugt FrontPage nämlich ziemlich ekligen HTML-Code:

Mit CSS sieht das hingegen sehr ordentlich aus:

Formatierungsanweisungen werden nicht mehr im HTML-Dokument gespeichert, sondern in einer .css-Datei im Unterverzeichnis _themes. Die Größe des Dokuments wird deutlich reduziert, was die Ladezeiten verbessert. Der Einsatz von Stylesheets empfiehlt sich also nachdrücklich. Moderne Browser, die CSS unterstützen, stellen beide Dokumente praktisch identisch dar. Ältere Browser ohne CSS-Unterstützung zeigen einfach ein unformatiertes Dokument.

Durch ein Design stellt FrontPage bereits ein Stylesheet zur Verfügung. Häufig möchte man die CSS-Regeln des Designs aber ändern oder erweitern. Das geht natürlich auch über das Dialogfeld „Designs“. Allerdings läßt sich dann kaum noch feststellen, welche Regeln von FrontPage stammen und welche man selbst geschrieben hat. Beim Wechsel des Designs gehen zudem alle Änderungen verloren. Manuelle Änderungen an der CSS-Datei werden übrigens bei der nächsten Neuberechnung des Webs wieder gelöscht.

Der bessere Ansatz ist es, ein zusätzliches Stylesheet zu erstellen. Das geht im FrontPage-Editor oder jedem beliebigen Texteditor. Eigene Stylesheets werden in FrontPage bequem per Menübefehl Format → Links zu Stylesheet... eingebunden. FrontPage fügt dazu ein link-Element in alle Seiten des Webs ein. Leider erscheint dieses link-Element vor einem anderen link-Element, welches bereits das Design-Stylesheet referenziert. Der FrontPage-Editor blendet sein link-Element zwar aus, aber mit einem Texteditor können Sie das Ergebnis betrachten:

Das hat zur Folge, daß CSS-Regeln, die Sie in mein-stylesheet.css festgelegt haben, evtl. von Regeln von immo1111.css überschrieben werden. Leider verhindert FrontPage, daß die Reihenfolge der link-Elemente per Hand umgedreht wird; selbst wenn die Änderung in einem Texteditor vorgenommen wird, stellt FrontPage beim nächsten Öffnen der Datei im FrontPage-Editor den alten Zustand wieder her. FrontPage läßt sich auch nicht dadurch überlisten, daß man das eigene link-Element durch ein style-Element mit @import-Anweisung ersetzt.

Der einzige Ausweg aus diesem Dilemma besteht darin, das eigene Stylesheet so zu ändern, daß seine Regeln berücksichtigt werden, obwohl sie vor denen des Designs stehen. Dabei gibt es zwei Möglichkeiten:

• Erhöhen Sie die sog. „Spezifität“ Ihrer CSS-Regeln. Schreiben Sie statt h1 { color: #FF0000; } besser html body h1 { color: #FF0000; }. FrontPage benutzt in Design-Stylesheets größtenteils einfache Element- und Klassenselektoren; Sie können Ihre Regeln daher häufig spezifischer machen, indem Sie Ihre Selektoren erweitern. Diese Variante verwendet eine Syntax, die bereits in CSS-1 definiert wurde. Die Browser-Unterstützung sollte also außerordentlich gut sein.
• Verwenden Sie !important. Statt h1 { color: #FF0000; } schreiben Sie h1 { color: #FF0000 !important; }. Die !important-Anweisung gibt es auch schon in CSS-1, die Browser-Unterstützung scheint jedoch etwas schlechter zu sein.