Ungefähr an dem Tag, an dem ich anfing mich mit CSS zu beschäftigen, habe ich mich auch darüber geärgert, wie CSS Styles von Dreamweaver MX dargestellt werden.
Dreamweaver MX kann verschiedenen einfache Scriptsprachenbefehle selber parsen und ausführen, bzw. die Ergebnisse dann in der Designansicht darstellen. Zu diesen Kommandos zählt unter anderem das Include Kommando, welches gleichermaßen als SSI, PHP oder ASP Befehl zur Verfügung steht und von DWMX innerhalb der Designansicht ausgeführt wird. Dieser Artikel wird nur auf die SSI Variante eingehen, wobei sich das Ergbnis ist in allen 3 Sprachen gleichermassen umsetzen läßt. Diese von den Entwicklern eingebaute Funktion ist sehr vorteilhaft, weil man dynamische Seite, die andere Seiten "inkludieren" vollständig sehen kann und somit das editieren der eigentlich dynamisch erzeugten Seite einfacher ist. Genau dieses Feature kann man aber herrlich für eigene Zwecke mißbrauchen.
Einfache Grundkenntnisse
Dazu muss aber auch wissen, wie verschiedene Browser und auch Programme auf CSS reagieren, bzw. die zeitliche Abfolge beim Laden einer Seite beachten.
Wird eine Seite von einem Browser geöffnet, werden alle Befehle des Quellcodes der Reihe nach abgearbeitet. Grob ausgedrückt : Wer zuerst kommt, malt zuerst. Das Selbe gilt auch für das Einbinden von CSS Datei und die anschließende Darstellung der darin definierten Formate. Wird einem Kasten z.B. zuerst die Hintergrundfarbe grün und in einer späteren Styledefinition die Hintergrundfarbe dieses Kastens neu z.B. als rot definiert, so wird der Kasten am Ende mit einem roten Hintergrund dargestellt.
1 2 3 4 5 6 7 8 9 | .box1 { border:2px solid black; height:50px; background-color:green; } .box1 { background-color:red; } |
Das Ergebnis dieses kleinen Kastens sieht dann folgendermassen aus :
Es ist dabei vollkommen egal, ob diese Änderung innerhalb eines Stylesheets, oder auf 2 verschiedene Stylesheets verteilt wird, oder die Farbe der Box im Quellcode der Seite innerhalb des Style-Attributes (z.B. <DIV style="background-color:red">), oder des Style-Tags im Kopfbereich untergebracht ist.
Wichtig ist die Reihenfolge der Informationen. Zuerst grün, dann rot.
Um zum Ergebnis von 2 verschiedenen Styles innerhalb 2 unterschiedlicher Anwendungen (Browser + Dreamweaver) zu kommen, bietet es sich an, aus Gründen der Übersichtlichkeit 2 verschiedene Stylesheet-Dateien zu verwenden. Die erste Datei enthält alle Definitionen für die Browser, die zweite Datei enthält dann alle Informationen für Dreamweaver.
Um das kleine Beispiel von oben nochmal aufzugreifen: Es soll erreicht werden, daß Dreamweaver den kleinen Kasten rot darstellt und alle anderen Browser den selben Kasten jedoch grün darstellen. Dazu werden also alle Informationen für Browser in die Datei browser.css gepackt und die Dreamweaver-only-styles in eine Datei dreamweaver.css.
browser.css
1 2 3 4 5 | .box1 { border:2px solid black; height:50px; background-color:green; } |
Da in diesem Fall nur die Hintergrundfarbe geändert werden soll, genügt es also nur diese Styledefinition zu definieren. Alles andere soll unverändert bleiben.
1 2 3 | .box1 { background-color:red; } |
Server Side Includes (SSI)
Bis dahin Alles überhaupt kein Problem. Jedoch stellt sich nun die Frage, wie man Dreamweaver dazu bringen soll die eigenen Styles auszulesen ? Dafür genau biete sich nun der SSI-Include Befehl an !
1 | <!--#include virtual="name.datei"--> |
Dieser Server Side Include Befehl bewirkt, daß die Datei name.datei vom Server aus dem aktuellen Verzeichnis geladen wird und dem Browser mitgesendet wird. Der Browser kann nicht unterscheiden, ob die Datei nun zum originalen Quellcode dazugehört oder nicht, aber er läuft darin enthaltene Befehle ab, egal ob Text, Grafiken, Styles, ganze HTML Anweisungen oder was auch immer.
Der große Vorteil von SSI Befehlen ist, daß sie in HTML konformen Kommentaren untergebracht sind und keinen Einfluß auf die Validierung des Dokumentes durch verschiedene Tools, wie z.B. dem HTML Validator des W3C haben. Es ist vollkommen egal, ob die Seiten mit diesen Befehlen auf einem Server gehostet werden, der SSI Befehle kennt oder nicht. Von Bedeutung ist, daß Dreamweaver diese Befehle versteht und umsetzen kann.
Wie kombinieren ?
Am folgenden Beispiel kann man nun sehen, was genau passiert :
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="browser.css" type="text/css" media="all" rel="stylesheet">
<style tyle="text/css" media="all">
<!--#include virtual="dreamweaver.css"-->
</style>
</head>
<body>
<div class="box1">Beispielbox</div>
</body>
</html> |
Der eigentliche Trick sind die fett geschrieben Zeilen, welche für die Einbindung der Styles zuständig sind.
Öffnet man die Seite in Dreamweaver MX passiert folgendes, bei der Darstellung der Seite in der Designansicht. Die Seite wird geöffnet und alle Befehle inklusive dem <link> Tag werden ausgeführt. Sprich es wird das Stylessheet browser.css aus dem selben Verzeichnis aufgerufen, in dem auch die Seite liegt. Dann kommt der <style> Tag, der jedem HTML-fähigem Programm (Browser oder Dreamweaver) neue Styledefinitionen angibt. Nun trifft Dreamweaver jedoch auf den SSI-Include Befehl, führt ihn aus und lädt damit die Datei dreamweaver.css in den Anzeigespeicher und überschreibt (da der Include Befehl nach dem Link Befehl aufgerufen wird) den Wert grün des Hintergrundes mit dem Wert rot. Sprich genau das passiert, was erwartet wird.
Beim Editieren der Seite wird nun also ein roter Kasten dargestellt. Lädt man die Seite nun hoch und mit ihr beide Stylesheet-Dateien, dann kommt es nun auf den Server des Providers an. Kann er SSI Befehle umsetzen, dann wird auch er die Datei dreamweaver.css laden und an der entsprechenden Stelle im Quellcode dem Browser mitschicken. Kann der Browser nicht mit SSI Befehlen umgehen (was sehr selten ist), dann wird der Quellcode so wie er oben zu sehen ist an den Browser gesendet. Der Browser sieht nur das <!-- am Beginn eines Kommandos und ignoriert Alles bis zum -->, da es für ihn ein simpler HTML Kommentar ist.
Existiert diese Datei jedoch gar nicht erst auf dem Server und der Server kann SSI Kommandos umsetzen, so sendet er stattdessen in Form eines HTML Kommentares eine Fehlermeldung an den Browser mit, was die Darstellung überhaupt nicht beeinträchtigt.
Sollte es jedoch jemanden stören, diese Fehlermeldung in seinem Quellcode zu haben und der Server unterstützt SSI, dann kann man mit einem weiteren SSI Kommando dem Server benutzerdefinierte Fehlermeldungen angeben.
1 | <!--#config errmsg="Es trat ein Fehler bei der Ausführung eines SSI Befehls auf."--> |
Definiert man unmittelbar vor dem Include-Befehl eine neue Fehlermeldung ohne Inhalt, dann sieht man im Browser nachher überhaupt nichts mehr, von den SSI Befehlen.
Der Quellcode sieht dann folgendermassen aus :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="browser.css" type="text/css" media="all" rel="stylesheet">
<style tyle="text/css" media="all">
<!--#config errmsg=" "-->
<!--#include virtual="dreamweaver.css">
</style>
</head>
<body>
<div class="box1">Beispielbox</div>
</body>
</html> |
Damit haben wir also das erwünschte Ergebnis. Ein Code der nur von Dreamweaver gelesen wird und bei der Editierung von Dateien angewendet wird, jedoch bei der späteren Darstellung in den Browsern zu keiner Beeinträchtigung führt. Das Ganze liesse sich sicherlich auch erreichen, in dem man einen <link> Tag im Quellcode einbindet, der auf die dreamweaver.css verweist und diese einfach nicht mit hochladen, jedoch führt das zu einem Fehler im HTML Validator, da das definierte Stylessheet nicht gefunden werden kann.
Wie sieht es mit anderen Scriptsprachen aus ?
Verwendet man z.B. einen PHP fähigen Server, kann man das selbe Ergbnis auch mit PHP Kommentaren erreichen, da diese ebenfalls von Dreamweaver geparst werden. Dieses sähe dann folgendermassen aus :
1 2 3 | <?php /* Beginn des Kommetares ?> <link href="dreamweaver.css" rel="stylesheet" type="text/css"> <?php Ende des Kommentares */ ?> |
Der PHP Parser wird diese Seite bei der Übertragung an den Browser als Kommentar verstehen und sie werden, um Bandbreite zu sparen gar nicht erst mitgesendet. Für Dreamweaver hingegen wird der sieht es nach einer PHP Anweisung aus, gefolgt von einer HTML Anweisung, der wiederum eine PHP Anweisung folgt. Die HTML Anweisung wird also ausgeführt und dargstellt. Ebenso verhält sich Dreamweaver auch bei der Verwendung von ASP Kommentaren.
Auf meiner Seite wende ich die PHP Methode an. In einem mehrzeiligen Bereich habe ich dort jegliche Variablen für die Steuerung und Verwendung von Dreamweaver Vorlagen untergebracht. Somit kann ich problemlos die verschiedenen Werte bearbeiten, ändern und Neue hinzufügen. Dieser Block taucht jedoch, wenn man sich den Quellcode ansieht überhaupt nicht auf und der Betrachter ahnt noch nichtmal, daß diese Zeilen überhaupt existieren.
Man kann also mit der PHP oder ASP Kommentar Funktion auch komplette Textblöcke dem Betracher vorenthalten, die volle Funktionalität bei der Editierung von Seiten jedoch gewährleisten.
Geschrieben : 16.Mai 2003
Letztes Update: 17. April 2006