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:
<body background="_themes/inmotion/inmtextb.gif" bgcolor="#FFFFFF" text="#000000" link="#CC6633" vlink="#669933" alink="#FFCC00">
<!--mstheme--><font face="Arial, Helvetica"><p>Das ist ein Absatz.</p><!--mstheme--></font>
</body>
Mit CSS sieht das hingegen sehr ordentlich aus:
<body>
<p>Das ist ein Absatz.</p>
</body>
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:
<head>
...
<link rel="stylesheet" type="text/css" href="mein-stylesheet.css">
<!--mstheme-->
<link rel="stylesheet" type="text/css" href="_themes/inmotion/inmo1111.css">
<meta name="Microsoft Theme" content="inmotion 1111, default">
</head>
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:
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.
!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.