In dieser Beispielseite ist das CSS nur geringfügig geändert.
Die Navigation ist mit float:right ausgerichtet und
wird über margin-left und margin-bottom
auf Abstand zum Inhaltsbereich gehalten.
Der Inhaltsbereich hat kein margin mehr
und umfließt die Navigation,
wodurch sich auch der 3px-Bug des Internet Explorer nicht mehr negativ auswirkt.
Die Breite des Inhaltsbereichs ist wie im vorigen Anzeigebeispiel nicht festgelegt,
so dass sich die Seite dem zur Verfügung stehenden Anzeigebereich anpasst,
diesen optimal ausnutzt und horizontales Scrollen vermieden wird.
Verkleinern Sie Ihr Browserfenster, um die Flexibilität dieser Seite zu testen.
In diesem Beispiel wird eine Hintergrundgrafik
zur optischen Trennung der Spalten verwendet.
Dies erfordert leider, dass die Breite der links stehenden Navigation
passend zur Hintergrundgrafik in 'px' angegeben wird.
Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
nicht anpassen.
Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
kein Hintergrund angegeben.
Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
und ist unabhängig von deren Höhe.
Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.
Diese Fußzeile stellt innerhalb des umschließenden DIVs
den Elementenfluss wieder her.
Die folgenden Beispiele werden standardkonform mit grüner Schrift
im Rahmen angezeigt, ansonsten mit roter Schrift ohne Rahmen.
Attribut-Selektor:
wird vom Internet Explorer bis zur Version 6 ignoriert und definiert hier alle Rahmen.
Kind-Selektor:
wird vom Internet Explorer bis zur Version 6 ignoriert.
Star-HTML:
wird fälschlich vom Internet Explorer bis zur Version 6 interpretiert.
Star-Plus-HTML:
wird fälschlich vom Internet Explorer 7 interpretiert.
Selektor-Kommentar:
wird vom Internet Explorer bis Version 5 für Windows und Mac ignoriert.
Medienangabe:
wird vom Internet Explorer 4 für Windows und den Mac-Versionen ignoriert.
Element-spezifischer Selektor:
wird vom Netscape 4 ignoriert.
Tantek-Hack:
wird vom Internet Explorer erst ab Version 6 korrekt interpretiert
- im Netscape 4 kommt es hierdurch zu Fehlern im gesamten Style-Bereich!
Tan-Hack:
beeinflusst nur den Internet Explorer vor Version 6
- eine Kombination des Star-HTML- und des Tantek-Hacks für einzelne Definitionen.
Hatten Sie sich im letzten Beispiel gewundert,
warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
und erst in diesem die Hauptüberschrift notiert war,
wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.
Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
wodurch auch dieses semantische Problem gelöst ist.
3-spaltiges Layout mit Kopf- und Fußzeile
Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.
Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet
und kann genauso gut wie ein <div> über CSS formatiert
- hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
oder über <img> eingebunden werden.
Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.
Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
den Elementenfluss wieder her.
selfhtml-8.1.2.orig/css/layouts/anzeige/fixiert.htm 0000644 0001750 0001750 00000010201 10545416613 020556 0 ustar uwe uwe
Fixierte Navigation nur für moderne Browser
Fixierte Navigation
Beispiel nur für moderne Browser
In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.
Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in em
mit einer Schriftvergrößerung.
Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!
In diese Seite sind nun auch die CSS-Definitionen zur Präsentation eingebunden,
durch die u.a. die Navigation links neben dem Inhaltsbereich platziert wird.
Dennoch wäre diese Seite auch ohne CSS nutzbar und würde dann vom Browser
entsprechend dessen Voreinstellungen auch sinnvoll angezeigt werden.
Im Internet Explorer bis zur Version 6 werden Sie an dieser Stelle vermutlich auch
einen Bug erkennen, der den neben einem floatenden Element stehenden Text
zusätzlich um 3px einrückt.
Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.
Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
die Angabe einer Breite verzichtet werden und die Seite den ihr zur
Verfügung stehenden Raum ausnutzen.
Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
durch das falsche Box-Modell des Internet Explorer auszugleichen.
CSS-basierte Layouts
3-spaltiges Layout
In diesem Beispiel ist die Breite der Navigation etwas reduziert,
um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
die Schriftgröße der Navigation und Info-Box ist etwas verringert,
um den relativ geringen Breiten Rechnung zu tragen.
Nur für die äußeren Boxen ist eine Breite und float angegeben.
Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
können sich die Boxen einer Änderung des Schriftgrades anpassen.
Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
gehalten und passt sich flexibel an die Fensterbreite an.
selfhtml-8.1.2.orig/css/layouts/anzeige/fixiert_ie.htm 0000644 0001750 0001750 00000010567 10545416613 021252 0 ustar uwe uwe
Fixierte Navigation mit Workaround für den IE bis Version 6
Fixierte Navigation
Workaround für den Internet Explorer
In diesem Beispiel sind über einen 'conditional comment' nur
für den Internet Explorer bestimmte CSS-Eigenschaften notiert,
um auch für diesen Browser die linke Navigation zu fixieren.
Somit ist die Fixierung für alle aktuellen Browser nutzbar.
Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in em
mit einer Schriftvergrößerung.
Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!
Eine Seite mit sinnvoller HTML-Auszeichnung ist auch ohne CSS nutzbar, wie das erste Beispiel-Layout gezeigt hat. Die Verwendung von CSS-Eigenschaften wie float, besonders in Kombination mit margin, kann in älteren Browsern wie dem Netscape 4 zu fehlerhafter Darstellung bis hin zur Unbenutzbarkeit einer Seite führen. Es ist daher ratsam, diese fortschrittlichen CSS-Definitionen nur moderneren Browsern zukommen zu lassen. Hierzu bietet sich logisch an, die CSS-Definitionen nicht wie in den Beispielen im Stylebereich jeder HTML-Datei zu notieren, sondern in einer separaten CSS-Datei auszulagern und diese über die neuere Methode @import einzubinden. Über die Angabe eines Ausgabemediums wie z.B. all würde auch der Internet Explorer für Windows ausgeschlossen.
Sie können die CSS-Definitionen auch in zwei verschiedene Dateien aufteilen: eine für die einfachen Farb- und Schriftzuweisungen, die auch ältere Browser problemlos umsetzen können, und eine weitere für die Definition des Layouts. Erstere binden Sie - auch für ältere Browser - über das link-Element ein. Dies hat außerdem den Vorteil, dass beim Laden der über @import eingebundenen zweiten CSS-Datei die unschöne kurzzeitige Anzeige der Seite ohne Style-Definitionen im Internet Explorer vermieden wird.
Bestimmte CSS-Definitionen machen ein weiteres Stylesheet für den Ausdruck erforderlich, z.B. wenn Sie eine helle Schriftfarbe für einen dunklen Bildschirm-Hintergrund angegeben haben. Diese CSS-Datei binden Sie - ebenfalls für alle Browser - über das link-Element mit einer Medienangabe ein. Hierin können Sie auch bestimmte Bereiche wie z.B. die Navigation, die für den Ausdruck wenig geeignet sind, über display:none ausblenden.
Ein HTML-Dokument, in dem auf diese Art unterschiedliche CSS-Dateien eingebunden sind, sieht folgendermaßen aus:
Netscape 4 unterstützt auch bei Einbindung über das link-Element nur das Ausgabemedium screen; Sie können ihn über die Angabe anderer Ausgabemedien wie z.B. all ebenfalls ausschließen. @import-Anweisungen sind stets vor weiteren CSS-Definitionen einzutragen.
Um CSS-Dateien für bestimmte Ausgabemedien nur modernen Browsern einschließlich dem Internet Explorer zur Verfügung zu stellen, binden Sie eine CSS-Datei mit dem entsprechenden media-Attribut über das link-Element ein und referenzieren hierin eine weitere CSS-Datei über @import. Einzelne CSS-Anweisungen können Sie auch in einer über @import eingebundenen CSS-Datei mit Format-Definitionen für unterschiedliche Ausgabemedien versehen.
Der Internet Explorer setzt zwar die für CSS-basierte Layouts erforderlichen Definitionen größtenteils um und muss nicht wie andere ältere Browser hiervon ausgeschlossen werden; die Umsetzung ist aber oft fehlerhaft oder unvollständig, sodass eine Korrektur oder alternative Definitionen erforderlich werden können. Eine Möglichkeit hierfür ist, zunächst die nach den Spezifikationen des W3C korrekten CSS-Anweisungen zu notieren und anschließend eine spezielle CSS-Datei nur für den Internet Explorer einzubinden. Erfreulicher Weise bietet Microsoft dazu mit den 'conditional comments' eine valide Lösung für den Internet Explorer für Windows (die Mac-Versionen sind ohnehin bezüglich der CSS-Umsetzung nicht vergleichbar). Hierbei handelt es sich um spezielle HTML-Kommentare mit einer Bedingung, die der Internet Explorer ab der Version 5 auswertet und hiervon abhängig den im Kommentar enthaltenen HTML-Code ausführt oder nicht. Für alle anderen Browser handelt es sich lediglich um Kommentare, deren Inhalt ignoriert wird.
Die folgenden Beispiele zeigen die Einbindung einer CSS-Datei für alle Browser, einer CSS-Datei nur für moderne Browser mit Ausnahme des Internet Explorer (auch der Version 7) und nachfolgend einige über conditional comments eingebundene CSS-Dateien:
Wie Sie an den Beispielen sehen, können auch Versionsangaben gemacht werden, die der Internet Explorer mit seiner im Windows-System eingetragenen Versionsnummer vergleicht (wenn Sie zum Testen mehrere Browserversionen installiert haben, wird daher immer die Version des Betriebssystems verwendet, sofern die Windows-Registry nicht manipuliert ist).
Die in den conditional comments referenzierten CSS-Dateien werden von folgenden Versionen des Internet Explorer geladen:
[if IE]: alle Versionen (ab 5.0), [if IE 6]: alle 6er-Versionen, [if lt IE 7]: alle Version vor 7 (less-than = kleiner als), [if lte IE 5.5999]: alle Version bis 5.5 (less-than or equal = kleiner oder gleich), [if gte IE 5.5]: alle Version ab 5.5 (greater-than or equal = größer oder gleich).
In der Praxis ist meist nur eine Unterscheidung zwischen Versionen ab 6 und älteren erforderlich, da der Internet Explorer ab der Version 6 im standardkonformen Modus einige Fehler der Vorgänger nicht mehr macht und insbesondere das vom W3C spezifizierte Box-Modell korrekt anwendet. Eine Differenzierung erübrigt sich meist ganz, wenn der Internet Explorer 6 in den abwärtskompatiblen Quirks-Modus versetzt wird, was auch ein beliebiger HTML-Kommentar (oder bei XHTML die Angabe der XML-Deklaration) in der ersten Zeile des Quelltextes bewirkt, da dieser Browser den folgenden Doctype dann nicht mehr erkennt. Der Internet Explorer 7 erkennt zwar eine XML-Deklaration, wird jedoch weiterhin durch einen HTML-Kommentar in den Quirks-Modus versetzt. Sofern Sie XHTML verwenden und nur die Version 7 des Internet Explorer im standardkonformen Modus eine korrekte Darstellung erreicht, bietet sich der Einsatz der ohnehin empfohlenen XML-Deklaration an.
Sie sollten den Internet Explorer grundsätzlich nicht über die Dokumenttyp-Weiche in den Quirks-Modus versetzen, da dies auch andere Browser negativ beeinflusst und z.B. Opera ab Version 7 das falsche Box-Modell von Microsoft übernehmen würde.
Oft sind es nur kleine Korrekturen, die für die einheitliche Umsetzung eines CSS-basierten Layouts erforderlich werden und meist reicht es, über eine Browserweiche (auch "Hack" genannt) den Internet Explorer von anderen Browsern zu unterscheiden, da erstgenannter viele CSS-Definitionen nicht standardkonform interpretiert. Browserweichen nutzen spezielle Selektoren oder Schreibweisen, die von Browsern unterschiedlich interpretiert bzw. teilweise übergangen werden. Das folgende Beispiel demonstriert einige ausgewählte Browserweichen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Browserweichen</title>
<style type="text/css">
body {
color: white; background: black;
font-family: Helvetica, Arial, sans-serif;
}
p {
padding: 0.2em;
}
#attribut {
color: red;
}
p[id]#attribut {
color: lime;
}
p[id] {
border: 1px solid green;
}
#childselector {
color: red;
}
html>body #childselector {
color: lime;
}
#starhtml {
color: lime;
}
* html #starhtml {
color: red;
}
#starplushtml {
color: lime;
}
*:first-child+html #starplushtml {
color: red;
}
#comment {
color: red;
}
#comment/* */ {
color: lime;
}
#atmedia {
color: red;
}
@media all {
#atmedia {
color: lime;
}
}
#element {
color: red;
}
p#element {
color: lime;
}
#tanhack {
color: lime;
}
* html #tanhack {
color: red;
c\olor: lime;
}
</style>
<style type="text/css">
#tantek {
color: red;
}
#tantek {
voice-family: "\"}\"";
voice-family: inherit;
color: lime;
}
</style>
</head>
<body>
<h1>CSS-Browserweichen</h1>
<p>Die folgenden Beispiele werden standardkonform mit grüner Schrift
im Rahmen angezeigt, ansonsten mit roter Schrift ohne Rahmen.</p>
<p id="attribut">Attribut-Selektor:
wird vom Internet Explorer ignoriert und definiert hier alle Rahmen.</p>
<p id="childselector">Kind-Selektor:
wird vom Internet Explorer ignoriert.</p>
<p id="starhtml">Star-HTML:
wird fälschlich vom Internet Explorer interpretiert.</p>
<p id="starplushtml">Star-Plus-HTML:
wird fälschlich vom Internet Explorer 7 interpretiert.</p>
<p id="comment">Selektor-Kommentar:
wird vom Internet Explorer bis Version 5 für Windows und Mac ignoriert.</p>
<p id="atmedia">Medienangabe:
wird vom Internet Explorer 4 für Windows und den Mac-Versionen ignoriert.</p>
<p id="element">Element-spezifischer Selektor:
wird vom Netscape 4 ignoriert.</p>
<p id="tantek">Tantek-Hack:
wird vom Internet Explorer erst ab Version 6 korrekt interpretiert<br>
- im Netscape 4 kommt es hierdurch zu Fehlern im gesamten Style-Bereich!</p>
<p id="tanhack">Tan-Hack:
beeinflusst nur den Internet Explorer vor Version 6<br>
- eine Kombination des Star-HTML- und Tantek-Hacks für einzelne Definitionen.</p>
</body>
</html>
Selektiert ein Element (hier <p>), welches ein id-Attribut mit beliebigem Attributwert aufweist - und damit alle hier angeführten Beispiele. Gleichbedeutend zur Angabe der #ID ist dies im Grunde überflüssig, erfüllt aber den Zweck, alle Internet Explorer für Windows bis Version 6 und Netscape 4 auszuschließen.
Selektiert ein Element mit der ID "ID", das sich innerhalb des Elements body befindet, welches wiederum ein direktes Kind-Element von html ist. Dies extra anzugeben wäre an sich überflüssig, es schließt aber ebenfalls alle Internet Explorer für Windows bis Version 6 und Netscape 4 aus. Achtung: Der Selektor body>#ID würde von älteren Versionen des Internet Explorer falsch interpretiert werden.
Dies ist zwar ein valider, aber unsinniger Selektor, da html kein Elternelement hat (der Universalselektor * steht für ein beliebiges Element). Alle Internet Explorer für Windows bis Version 6 akzeptieren diese Notation jedoch und interpretieren die nachfolgenden Deklarationen. Dieser Selektor schließt also alle übrigen Browser einschließlich Netscape 4 aus.
Dies ist ebenso ein valider wie unsinniger Selektor, der nur vom Internet Explorer 7 (und vielleicht auch künftigen Versionen) akzeptiert wird. Der einfachere Selektor *+html würde leider auch vom Opera fälschlich berücksichtigt. Beachten Sie, dass Sie diesen Selektor nicht mit dem Star-HTML-Hack in einer Regel kombinieren können und ggfls. zwei Regeln notieren müssen, um alle Internet-Explorer anzusprechen.
Diese Variante selektiert hier ein Element mit der ID "ID" für alle Medientypen, wodurch ältere Browser ausgeschlossen werden: der Internet Explorer 4 für Windows und alle Mac-Versionen sowie Netscape 4.
Die angeführte Notation setzt die innerhalb der Star-HTML-Browserweiche zunächst an ältere Internet Explorer für Windows angepassten Eigenschaften für den Internet Explorer 6 wieder zurück. Setzen Sie das Escape-Zeichen \ an eine beliebige Stelle innerhalb der Eigenschaft, jedoch nicht direkt vor einen der Buchstaben a bis f, da dieser sonst als hexadezimaler Wert interpretiert werden würde. Diese Browserweiche eignet sich ebenfalls zur Korrektur des falschen Box-Modells für ältere Windows Internet Explorer, ist jedoch wegen der dreifachen Angabe eines jeden Wertes etwas aufwändig. Durch die Kombination mit der Star-HTML-Browserweiche werden Probleme mit anderen Browsern ausgeschlossen. Das Kapitel über die Behandlung des Box-Modells enthält ein Beispiel.
selektor {
eigenschaft:wert; /* Deklaration fuer IE 5.x */
voice-family:"\"}\""; /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
voice-family:inherit;
eigenschaft:wert; /* Korrektur fuer andere Browser */
}
Diese Methode beruht auf der Ausnutzung eines Fehlers im Internet Explorer der Version 5.x. Zunächst wird die für den Internet Explorer 5.x vorgesehene Deklaration angeführt und anschließend der Sprachausgabe-Eigenschaft voice-family der unsinnige, aber gültige Wert "}" zugewiesen - die inneren Hochkommata sind gemäß CSS-Syntax mit Backslashes maskiert (CSS-Escape-Sequenz) und daher Bestandteil des Wertes. Korrekt arbeitende Browser werden davon nicht negativ beeinflusst, von alten Versionen des Internet Explorer jedoch wird keine der nachfolgenden Angaben beachtet, da sie die geschweifte Klammer als Ende der Regel interpretieren. Die in der ersten Zeile definierte Deklaration wird zunächst von allen Browsern akzeptiert, die nachfolgende Korrektur für standardkonforme Browser übergeht der IE 5.x. Somit eignet sich diese Browserweiche zur Korrektur des falschen Box-Modells (siehe Beispiel) von Microsoft bei Dokumenten, in denen der Internet Explorer 6 über die Dokumenttyp-Deklaration in den standardkonformen Modus versetzt wurde. Verwenden Sie den Tantek-Hack nur in einer vor Netscape 4 verborgenen CSS-Datei, da in diesem Browser ein schwerer Fehler bei der Interpretation des gesamten Style-Bereichs verursacht wird.
Die auf fehlerhafter oder unzureichender CSS-Implementierung aufbauenden Browserweichen können in aktuellen Browsern unerwünschte Begleiterscheinungen haben. Auch ist nicht ausgeschlossen, dass künftige Browserversionen zwar weiterhin den Fehler enthalten, den Sie mittels eines Hacks korrigieren, dies jedoch nicht mehr funktioniert, da just die Programmstelle korrigiert wurde, die die Nutzung des Hacks erst ermöglicht hat. Sie sollten daher das über eine Browserweiche erzielte Ergebnis mit unterschiedlichen Browsern kritisch begutachten und dies in regelmäßigen Abständen mit neu erschienenen Versionen wiederholen.
Auf der sicheren Seite sind Sie, wenn Sie nach Möglichkeit weitestgehend auf den Einsatz von CSS-Hacks verzichten.
Sie möchten Ihr Logo oder Ihre Navigation ständig auf Ihrer Seite anzeigen, auch wenn der Seiteninhalt ein Scrollen erfordert? Die Nachteile des Einsatzes von Frames bzw. eingebetteten Frames hierzu haben Sie sicherlich schon entdeckt. Eine andere Möglichkeit wäre, die Seitenelemente passend für eine bestimmte Fenstergröße zu positionieren und hierin einen scrollbaren Bereich über die CSS-Eigenschaft overflow für den Inhalt zur Verfügung zu stellen, was aber sehr unflexibel ist und seiteninterne Scrollbalken bedingt.
Über die CSS-Eigenschaft position können Sie Seitenelemente an einer bestimmten Position im Fenster fixieren, sodass sie nicht mit dem übrigen Seiteninhalt wegscrollen. Dies ist jedoch nur eingeschränkt sinnvoll: Ein am oberen Fensterrand fixiertes Element schränkt den zur Verfügung stehenden scrollbaren Bereich ein. Der Inhalt kann weniger gut übersehen werden und übermäßiges Scrollen erfordern, was die Nutzbarkeit der Seite verschlechtert. Hinzu können Probleme mit seiteninternen Ankern kommen. Stellen Sie sich daher die Frage, ob z.B. ein ständig sichtbares Logo derart informativ ist, dass diese Einschränkungen gerechtfertigt sind.
Sinnvoll kann dagegen eine am linken (oder rechten) Fensterrand fixierte vertikale Navigationsleiste sein. Der zur Seitenanzeige genutzte Fensterbereich ist durch die Bedienelemente meist wesentlich breiter als hoch. Hinzu kommt, dass eine Beschränkung der Zeilenbreite sich positiv auf die Lesbarkeit des Textes auswirken kann und der freie Bereich unter einer seitlich platzierten Navigation meist ohnehin nicht genutzt wird. Ein ständig sichtbares Menü kann die Benutzerfreundlichkeit erhöhen und bei längeren Texten "nach oben"-Links entbehrlich machen.
Die fixierte Positionierung ist aber selbst hierfür nicht problemlos einzusetzen. Sie eignet sich nur für relativ kurze Navigationsleisten, die selbst in sehr kleinen Browserfenstern vollständig angezeigt werden können, da sie ja wie gewünscht nicht mit der Seite scrollen. Außerdem erfordert dies einen umständlichen Workaround für den Internet Explorer, der diese Technik erst ab Version 7 unterstützt.
Das folgende Beispiel demonstriert die Anwendung der CSS-Eigenschaft position:fixed, die über eine spezielle CSS-Browserweiche ausschließlich modernen Browsern zugänglich gemacht wird. Für andere Browser ist position:absolute angegeben, sodass die Ausgangsposition der Elemente auch in veralteten Browsern wie Netscape 4 zwar gleich ist, der nicht fixierbare Bereich jedoch normal mit der Seite scrollt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fixierte Navigation nur für moderne Browser</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
}
p {
margin: 3em 0 0 3em; /* Positionierung des 'zurueck'-Links */
}
p a {
color:black; /* Farbe des 'zurueck'-Links */
}
html {
padding: 0;
}
body {
margin: 0; padding: 0;
}
#fixiert {
position: absolute;
top: 2.8em; left: 2em;
width: 18em;
background-color: white;
border: 1px solid silver;
}
html>body #fixiert { /* nur fuer moderne Browser! */
position: fixed;
}
#fixiert img {
height: 6.8em; float: right;
}
#Inhalt {
margin-left: 22em; padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray;
}
* #Inhalt { /* versteckt vor Netscape 4 */
background-color: #ffffe0;
}
#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}
#Navigation {
font-size: 0.83em;
margin: 0 0 1.2em; padding: 0;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
</style>
</head>
<body>
<div id="Scrollbereich"> <!-- erst fuer den folgenden Workaround benoetigt -->
<h1>Fixierte Navigation</h1>
<div id="Inhalt">
<h2>Beispiel nur für moderne Browser</h2>
<p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
<p>Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
mit einer Schriftvergrößerung.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
<p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div><div id="fixiert"> <!-- verhindert auch Anzeigefehler einer fixierten ul -->
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<img src="../../../src/logo.gif" alt="SELFHTML">
<p><a href="../fixbereiche.htm#definieren">zurück</a></p>
</div>
</body>
</html>
Erläuterung:
Dieses Beispiel zeigt, wie simpel eine fixierte Navigation zu realisieren wäre, wenn der Internet Explorer den bereits 1998 veröffentlichten Standard CSS 2 nicht erst acht Jahre später ab Version 7 hinreichend unterstützen würde. Andererseits interpretiert der Internet Explorer schon seit Version 5.0 eine CSS-Eigenschaft, die für CSS3 zu erwarten ist und einen Workaround ermöglicht.
Dieses Beispiel demonstriert drei Vorteile sowohl fixierter als auch absoluter Positionierung:
Es sind Überlagerungen (hier des Kopfbereichs mit der Überschrift) möglich, die bei entsprechender Umsicht für gestalterische Zwecke sinnvoll eingesetzt werden können.
Später im Quelltext notierte Elemente (hier der Navigationsbereich) können dennoch vor anderen Elementen im Fenster platziert werden, wodurch der Inhaltsbereich von textbasierten Anwendungen wie Screenreadern oder Suchmaschinen günstiger zu erreichen ist.
Absolute Positionierung ist für ältere Browser weniger problematisch als auf der CSS-Eigenschaft float basierende Layouts.
Beachten Sie:
Fixierte oder absolute Positionierung ist nicht in jedem Fall sinnvoll einzusetzen und kann die zuvor bei den mehrspaltigen CSS-basierten Layouts eingesetzte Eigenschaft float nicht in allen Belangen ersetzen.
Fixiert positionierte Elemente sind auch dann nicht scrollbar, wenn sie durch kleinere Fenstergröße oder größeren Schriftgrad nicht mehr in den Anzeigebereich passen. Diese Art der Positionierung eignet sich daher nur für Elemente, die relativ wenig Platz benötigen. So wäre es doch sehr ungünstig, wenn bei einer umfangreicheren Navigation ausgerechnet der oft zuletzt angegebene Link zum Impressum außerhalb des Anzeigebereiches unerreichbar positioniert werden würde.
Da der Internet Explorer bis zur Version 6 der einzige aktuelle (grafische) Browser ist, der position:fixed nicht unterstützt, reicht ein Workaround für diesen Browser, um diese CSS-Eigenschaft praxistauglich einzusetzen. Hierzu sind die folgenden Anweisungen zusätzlich im <head>-Bereich der HTML-Datei notiert:
Um diese (noch) ungültigen CSS-Angaben nur dem Internet Explorer 5 und 6 zugänglich zu machen, werden sie über einen conditional comment in der HTML-Datei eingebunden. Sie können die CSS-Definitionen in diesem <style>-Bereich auch mit @import auslagern oder das <link>-Element hierzu verwenden.
Zunächst wird für den Anzeigebereich eine Höhe von 100% definiert und über die erst für CSS 3 vorgesehene Eigenschaft overflow-y:hidden ein (doppelter) vertikaler Scrollbalken verhindert. Im HTML-Quelltext wurden die zu scrollenden Elemente bereits in einem div#Scrollbereich gruppiert, das nun den gesamten Anzeigebereich ausfüllen soll und über overflow:auto die Scrollfunktion übernimmt. Der hierin enthaltene Inhaltsbereich ist explizit position:static zu definieren, auch wenn dies eigentlich dem Initialisierungswert entspricht.
Das div#fixiert mit der Navigation ist im HTML-Quelltext außerhalb des nun scrollbaren Elementes notiert und (für den Internet Explorer bis zur Version 6) bereits absolut positioniert, wodurch es vom Scrollen ausgeschlossen wird und auf diese alternative Weise am Bildschirm fixiert ist.
Beachten Sie:
Wichtig ist, dass Sie diesen Workaround (über @media screen) ausschließlich für die Bildschirmdarstellung einsetzen, da Scrollbalken im Ausdruck funktionslos wären.
Gratulation! Wenn Sie bis hierhin vorgedrungen sind, haben Sie vermutlich ausreichend Kenntnisse der in diesem Kapitel behandelten CSS-Eigenschaften erworben und möchten diese nun auch konsequent für die Gestaltung Ihrer Seiten nutzen. Vielleicht haben Sie aber auch nur die Nachteile einer Fensteraufteilung in Frames erkannt oder möchten Tabellen lediglich der Auszeichnung tabellarischer Daten vorbehalten? In jedem Fall sollten Sie zumindest über Grundlagenwissen bezüglich Stylesheets verfügen.
Ein CSS-basiertes Layout setzt das CSS zugrunde liegende Konzept der Trennung des Inhalts und der Struktur einer Seite von deren Präsentation um. Layoutänderungen sind dadurch bereits mit nur geringer Modifikation der CSS-Definitionen zu realisieren und sofern diese in separaten Dateien notiert sind, können Sie das Layout für das gesamte Projekt hierüber einheitlich bestimmen.
Im Gegensatz zu Tabellen-Layouts wird die Seitenaufteilung nicht mehr ausschließlich per HTML-Auszeichnung festgelegt. Sie können die Anordnung der Elemente auf einer Seite über CSS flexibel definieren und sind nicht auf eine unflexible Einteilung in Zeilen und Spalten beschränkt. CSS-basierte Layouts eröffnen Ihnen Möglichkeiten der Seitengestaltung, die mit Tabellen nicht umsetzbar sind.
Durch eine sinnvolle Auswahl der Elemente und schlüssige Anordnung der Inhalte mit nachfolgender Formatierung und Positionierung per CSS wird die Zugänglichkeit verbessert. Die Erstellung von barrierefreien Seiten gewinnt zunehmend an Bedeutung. Diese Entwicklung wird nicht zuletzt von der Gesetzgebung (betreffend Internetpräsenzen, die unter staatlicher Aufsicht stehen) gefördert. Darüber hinaus erleichtern CSS-Layouts die Pflege der Seiten und reduzieren den Umfang des HTML-Quelltextes und damit die Ladezeiten deutlich.
Versuchen Sie bitte nicht, die Struktur eines Tabellen-Layouts mit ineinander verschachtelten div-Elementen nachzubauen. Sie können jedem Block-Element die erforderlichen CSS-Eigenschaften float, width und margin zuweisen und benötigen div-Tags lediglich zur Gruppierung von Elementen.
Die CSS-Eigenschaft position sollten Sie für CSS-Layouts nur im Ausnahmefall verwenden und die hierdurch mögliche Überlagerung von Elementen bei Schriftvergrößerung sowie die Platzierung außerhalb des sichtbaren Bereichs in kleinen Browserfenstern berücksichtigen.
Ein Block-Element nimmt die gesamte zur Verfügung stehende Breite ein, es sei denn, eine geringere Breite wird über width zugewiesen. Wenn in diesem Fall noch ausreichend Platz zur Verfügung steht, können weitere Elemente über float daneben platziert werden. Um dabei einen Textumfluss des Elements zu vermeiden, kann es über margin auf Abstand gehalten werden. Im Gegensatz zu den Zellen in einer Tabellenspalte stellt jedes Block-Element hier eine von den nebenstehenden Elementen unabhängige Box dar, wie dieses Beispiel verdeutlicht:
Für die linke Box ist float und width definiert. Der Textinhalt der nachfolgenden Box steht daneben, die Box selbst nimmt in diesem Beispiel die gesamte Fensterbreite ein. Auch die Höhe einer Box richtet sich - sofern sie nicht explizit zugewiesen ist - nach ihrem Inhalt und wird nicht von der Höhe einer nebenstehend platzieren Box beeinflusst. Eine Spaltenaufteilung mit durchgängigen Hintergrundfarben, die in Tabellen-Layouts leicht zu realisieren ist, lässt sich daher in einem CSS-Layout nur umständlich optisch simulieren. Stellen Sie sich die Frage, ob eine klassische Spaltenaufteilung wirklich erforderlich ist oder geringe Anpassungen des Layouts an die begrenzten Möglichkeiten des Box-Modells sinnvoller wären.
Beachten Sie:
Alle Beispiele in diesem Kapitel verwenden eine Dokumenttyp-Deklarationen für standardkonformen Modus als Voraussetzung für eine korrekte Darstellung des Box-Modells und einiger nicht vermeidbarer Anpassungen für den Internet Explorer.
CSS Level 1 wurde bereits 1996 als eine unmittelbare Ergänzungssprache (vorwiegend) für HTML entwickelt. CSS Level 2, der weiterentwickelte aktuelle Standard, wurde bereits 1998 veröffentlicht und ermöglicht anspruchsvolle CSS-Layouts und Seitenaufteilungen, die zuvor nur durch Verwendung von Frames oder Tabellen möglich waren. Leider können selbst manche aktuellen Browser die neu hinzugekommenen Gestaltungsmöglichkeiten von CSS Level 2 noch immer nicht 100%ig umsetzen. Besonders der Internet Explorer weist diesbezüglich große Lücken und Abweichungen vom Standard auf. So verwendet er selbst in der aktuellen Version 7 im abwärtskompatiblen Quirks-Modus ein anderes Box-Modell, das bei CSS-Layouts oft gesondert zu berücksichtigen ist.
Noch ältere Browser wie Netscape 4 setzen nur einen Bruchteil von CSS Level 2 korrekt um. Da diese aber weitgehend nicht mehr genutzt werden, gehen inzwischen immer mehr Autoren dazu über, fortschrittliche CSS-Layouts in Verbindung mit CSS-Browserweichen zum Ausschließen veralteter Browser zu verwenden. Dies ist auch in den Beispielen dieses Kapitels der Fall!
Die klassische Anwendung eines zweispaltigen Layouts ist die Anordnung einer Navigation neben dem Inhaltsbereich. Hierzu wird im HTML-Quelltext zunächst der Inhalt logisch ausgezeichnet und die Struktur vorgegeben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout - Struktur</title>
</head>
<body>
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Inhalt">
<h1>CSS-basierte Layouts</h1>
<h2>HTML-Struktur ohne CSS</h2>
<p>Diese Seite enthält zunächst nur die Struktur und den Inhalt.
Das Aussehen wird erst im folgenden Beispiel über CSS definiert.</p>
<p>Dennoch ist diese Seite schon nutzbar und wird vom Browser
entsprechend dessen Voreinstellungen bereits sinnvoll angezeigt.</p>
</div>
</body>
</html>
Erläuterung:
Für die Navigationspunkte wird hier eine Aufzählungsliste verwendet, deren IDNavigation später als Selektor für die CSS-Definitionen dient. Die Elemente des Inhaltsbereichs werden mit einem div-Element gruppiert, das ebenfalls eine ID (Inhalt) erhält und die spätere Formatierung des Inhaltsbereichs und seiner Elemente über CSS erleichtert.
Die Navigation wird hier links "gefloatet" und ihre Breite in em passend zum längsten Linktext angegeben, wodurch sie sich an eine Schriftgradänderung anpassen kann (dies ist übrigens auch bei Grafiken möglich, wenn für <img> die Breite und/oder Höhe in em wie im Beispiel zum Layout mit fixem Bereich angegeben wird). Für den Inhaltsbereich wird über margin-left ein Abstand zum linken Seitenrand definiert, der etwas größer als die Breite der Navigation ist. Die relative Einheitem richtet sich hier nach der Schriftgröße (font-size), die für die Navigation geringer angegeben ist.
Dem Inhaltsbereich ist keine Breite zugewiesen, wodurch eine Anpassung der Seite an die Fenstergröße ermöglicht und auch der Box-Modell-Fehler des Internet Explorer kompensiert wird. Für moderne Browser, die min-width unterstützen, ist für den Inhaltsbereich eine Mindestbreite angegeben, um einen Umbruch der Überschrift zu vermeiden und sicherzustellen, dass der Inhaltsbereich in sehr kleinen Fenstern nicht zu schmal wird.
Beachten Sie:
Um Anzeigefehler - besonders bei einer Schriftgradänderung im Internet Explorer - zu vermeiden, ist bei der Verwendung von em die Schriftgröße für das äußerste Element in der Einheit % anzugeben und hierbei exakt 100% zu vermeiden. In diesen Beispielen wird daher body {font-size:100.01%} notiert.
Lässt man den Abstand weg, würde der Inhalt die Navigation umfließen, d.h. unterhalb der Navigation am Seitenrand fortgesetzt. Dies ermöglicht eine optimale Ausnutzung des Anzeigebereichs, wie dieses Anzeigebeispiel einer rechts-floatenden Navigation zeigt.
/* Folgende Modifikationen sind am vorherigen Beispiel vorgenommen: */
ul#Navigation {
font-size: 0.91em;
float: right; width: 22em;
margin: 0 0 1em 1em; padding: 0;
border: 1px dashed silver;
}
div#Inhalt { } /* keine Formatierungen (das div kann wegfallen) */
body {
min-width: 20em; /* Mindestbreite (der Navigation) verhindert Anzeigefehler in modernen Browsern */
}
Erläuterung:
Die Navigation wird hier per float:right platziert, was sich besonders gut für einen Textumfluss eignet und über margin-left und margin-bottom auf Abstand zum Inhaltsbereich gehalten, für den selbst kein Abstand mehr definiert ist.
Um die Breite des Inhaltsbereichs zu begrenzen und zu lange Textzeilen zu vermeiden, werden im folgenden Beispiel alle Elemente der Seite in einem zusätzlichen div-Element gruppiert, welches eine feste Breite von 760px aufweist und zentriert wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout mit fester Breite</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 760px;
padding: 0.5em;
border: 2px ridge silver;
}
ul#Navigation {
font-size: 0.91em;
float: left; width: 22em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Inhalt {
margin-left: 22em;
padding: 0 1em;
border: 1px dashed silver;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 1em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0 0 1em;
}
div#Inhalt p {
font-size:1em;
margin: 1em 0;
}
</style>
</head>
<body>
<div id="Seite">
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Inhalt">
<h1>CSS-basierte Layouts</h1>
<h2>Seite mit fester Breite</h2>
<p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>
<p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal
gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
</div>
</div>
</body>
</html>
Erläuterung:
Das zusätzliche Block-Element <div id="Seite"> ist erforderlich, um der Seite eine feste Breite zu geben und sie zu zentrieren; der Rahmen ist nur zur Verdeutlichung angeführt und kann weggelassen werden. Für <body> ist die CSS-Eigenschaft text-align:center angegeben (und für div#Seite wieder zurückgesetzt), da der Internet Explorer ab Version 6 im standardkonformen Modus zwar Block-Elemente über margin:auto zentriert, allerdings text-align fälschlich auch auf Block-Elemente anwendet.
Die Breite ist mit 760px angegeben, damit die Seite auch in ein 800px breites Fenster mit vertikalem Scrollbalken passt und auf einer DIN-A-4-Seite bei normalen Randeinstellungen vollständig ausgedruckt werden kann. Hierzu wurde auch auf einen seitlichen Randabstand verzichtet.
Häufig sieht man ein Layout mit einer linksseitigen Navigation, einem mittleren Inhaltsbereich mit flexibler Breite und rechts einer Spalte für zusätzliche Informationen. Dieses CSS-basiert umzusetzen erfordert lediglich eine weitere Box mit der CSS-Eigenschaft float:right und einer geeigneten Angabe zu width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0; padding: 0;
border: 1px dashed silver; background-color: #eee;
}
div#Info strong {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
div#Inhalt {
margin: 0 12em 0 16em;
padding: 0 1em;
border: 1px dashed silver;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 0.5em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Info">
<strong>Info-Box</strong>
<p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.</p>
<p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
die Angabe einer Breite verzichtet werden und die Seite den ihr zur
Verfügung stehenden Raum ausnutzen.</p>
<p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
</div>
<div id="Inhalt">
<h1>CSS-basierte Layouts</h1>
<h2>3-spaltiges Layout</h2>
<p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
die Schriftgröße der Navigation und Info-Box ist etwas verringert,
um den relativ geringen Breiten Rechnung zu tragen.</p>
<p>Nur für die äußeren Boxen ist eine Breite und float angegeben.
Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
<p>Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
gehalten und passt sich flexibel an die Fensterbreite an.</p>
</div>
</body>
</html>
Erläuterung:
Um mehrere Boxen über float nebeneinander zu setzen, kann bei einer Box - hier dem Inhaltsbereich - auf die Definition von float und width verzichtet werden. Hierdurch nimmt sie den gesamten zur Verfügung stehenden Raum ein. Dies erfordert allerdings, die floatenden Boxen vorher in den Quelltext zu setzen, damit sie zuerst ihre definierte Breite reservieren können.
Damit der Inhaltsbereich die nebenstehenden Boxen nicht umfließt, wird er über margin-left und margin-right eingegrenzt. Die Werte für margin beziehen sich auf die Seitenränder und entsprechen den Breiten der nebenstehenden aus dem Fluss genommenen Boxen zuzüglich einem hierzu gewünschten Abstand. Falls Sie sich wundern, warum der Wert von margin hier gleich oder sogar kleiner als der Wert von width für die nebenstehenden Boxen ist und sich trotzdem ein Abstand ergibt: die verwendete Einheit em ist bei Längenangaben abhängig von der Schriftgröße des Elements - diese ist für den Inhaltsbereich größer definiert.
Über eine geeignete Angabe zu min-width kann in modernen Browsern bei zu schmalen Fenstern ein Umbruch der Boxen verhindert werden.
Anhand des Beispiels sehen Sie auch, dass sich Boxen nicht gegenseitig in ihrer Höhe beeinflussen. Dies muss kein Nachteil sein, sondern kann bewusst zur Gestaltung der Seite eingesetzt werden, erfordert allerdings ein Umdenken und die Abkehr vom althergebrachten "Spaltendenken" bei Tabellen-Layouts.
In diesem Beispiel ist für div#Info die Schriftgröße mit font-size:0.9em angegeben. Der für div#Info strong erhöhte Wert font-size:1.33em ergibt nach Anwendung auf die zuvor notierte Größe von 0.9em als Resultat 1.197em (0.9 mal 1.33), was in etwa der für div#Inhalt h2 mit font-size:1.2em angegebenen Schriftgröße entspricht.
Berücksichtigen Sie die Vererbung bei allen verschachtelten Elementen, denen Sie eine von 1em oder 100% abweichende Schriftgröße mittels relativer Einheiten zuweisen. Sie können sich den Umrechnungsaufwand ersparen, wenn Sie nur für die äußersten oder nur für die innersten Elemente eine Schriftgröße angeben. Im ersten Fall wird die Schriftgröße an alle enthaltenen Elemente vererbt (wobei der Internet Explorer allerdings mit der Vererbung auf Tabellenzellen Probleme hat) und im zweiten Fall ist die Basis für die Schriftgröße der innersten Elemente dieselbe.
Die Problematik der Vererbung stellt sich nicht, wenn Sie die Einheit px für Schriftgrößen verwenden. Allerdings haben Sie dann auch nicht mehr die Möglichkeit, die Längenangaben passend zur Schriftgröße in em anzugeben, damit sich das Layout an den jeweils eingestellten Schriftgrad anpasst. Darüber hinaus unterbindet der Einsatz von px die Anpassung von Schriftgrößen im Internet Explorer, was eine Barriere für Benutzer darstellen kann.
Viele Layouts werden von einem "Header" und einem "Footer" umschlossen, wobei in der Kopfzeile die Seitenüberschrift oder ein grafischer Banner platziert wird und die Fußzeile eine Copyright-Angabe oder allgemeine Links (z.B. 'nach oben', 'Impressum' oder 'Sitemap') enthält. Dies hat für CSS-Layouts auch praktische Vorteile:
Die Kopfzeile wird am Anfang des Quelltextes notiert und als Seitenüberschrift mit h1 ausgezeichnet, was in den folgenden Boxen die hierarchisch korrekte Verwendung von Überschriften zweiten Grades ermöglicht. Über die CSS-Eigenschaft clear der Fußzeile wird der Umfluss (float) der seitlich platzierten Elemente aufgehoben, was z.B. bei Verwendung eines Seitenhintergrundes erforderlich sein kann, wie das letzte Beispiel zeigen wird.
Außerdem beinhalten diese beiden Beispiele einen Workaround für den Internet Explorer bis Version 6 gegen die um 3px erweiterte Einrückung des Textes neben der Navigation.
Das folgende Beispiel erweitert das vorangegangene dreispaltige Layout um eine Kopf- und Fußzeile.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
h1 {
font-size: 1.5em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge silver;
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0 0 1.2em; padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0 0 1.1em; padding: 0;
background-color: #eee; border: 1px dashed silver;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
div#Inhalt {
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
</style>
</head>
<body>
<h1>CSS-basierte Layouts</h1>
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Info">
<h2>Info-Box</h2>
<p>Hatten Sie sich im letzten Beispiel gewundert,
warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
und erst in diesem die Hauptüberschrift notiert war,
wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
<p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
wodurch auch dieses semantische Problem gelöst ist.</p>
</div>
<div id="Inhalt">
<h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
<p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
<p>Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet
und kann genauso gut wie ein <div> über CSS formatiert
- hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
oder über <img> eingebunden werden.</p>
<p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.</p>
</div>
<p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
den Elementenfluss wieder her.</p>
</body>
</html>
Erläuterung:
Über die sogenannte Star-HTML-Browserweiche wird dem Inhaltsbereich nur für den Internet Explorer bis Version 6 eine Höhe zugewiesen. Die viel zu geringe Höhenangabe wird von diesem Browser erweitert und bewirkt, dass der Internet Explorer den neben der "gefloateten" Navigation stehenden Text nicht mehr wie bei den vorherigen Beispielen um weitere drei Pixel einrückt.
Sie können dieses Beispiel individuell anpassen und erweitern, um ein dreispaltiges Layout zu erstellen, das sich flexibel an Schriftgradänderungen und unterschiedliche Fenstergrößen anpasst. Diese Flexibilität bewirkt allerdings, dass sich die Elemente in zu schmalen Fenstern oder bei zu großer Schrifteinstellung untereinander platzieren und verhindert auch eine optische Aufteilung in Spalten mit unterschiedlicher Hintergrundfarbe, wie Sie es bei herkömmlichen Tabellen-Layouts oft sehen.
Das letzte Beispiel stellt Ihnen ein zweispaltiges Layout mit festen Breiten zur Verfügung, in dem die links platzierte Navigation optisch durch einen anders farbigen Hintergrund vom Inhaltsbereich abgegrenzt wird. Der Kopfzeile ist hier zur Demonstration als Hintergrundbild das SELFHTML-Logo zugewiesen, von welchem bei normalem Schriftgrad ein passender Ausschnitt dargestellt wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout mit grafischer Spaltenaufteilung</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 760px;
padding: 0;
background: #ffffe0 url(hintergrund.gif) repeat-y;
border: 2px ridge silver;
}
h1 {
font-size: 1.5em;
margin: 0; padding: 0.3em;
text-align: center;
background: #fed url(../../../src/logo.gif) no-repeat 100% 45%;
border-bottom: 1px solid silver;
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 200px;
margin: 0 0 1.2em; padding: 0;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: white;
}
ul#Navigation a:visited {
color: #666; background-color: white;
}
ul#Navigation a:hover {
color: black; background-color: #eee;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Inhalt {
margin: 0 0 1em 220px;
padding: 0 1em;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
margin-bottom: 0;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
color: navy;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 0.83em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed;
border-top: 1px solid silver;
}
</style>
</head>
<body>
<div id="Seite">
<h1>CSS-basierte Layouts</h1>
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Inhalt">
<h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
<p>In diesem Beispiel wird eine Hintergrundgrafik
zur optischen Trennung der Spalten verwendet.</p>
<p>Dies erfordert leider, dass die Breite der links stehenden Navigation
passend zur Hintergrundgrafik in 'px' angegeben wird.
Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
nicht anpassen.</p>
<p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
kein Hintergrund angegeben.<br>
Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
und ist unabhängig von deren Höhe.</p>
<p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
</div>
<p id="Fusszeile">Diese Fußzeile stellt innerhalb des umschließenden DIVs
den Elementenfluss wieder her.</p>
</div>
</body>
</html>
Erläuterung:
Da nebeneinander platzierte Elemente sich nicht in ihrer Höhe beeinflussen, wurden der Hintergrund der linken Spalte und die Trennlinie (zur Demonstration hier als Zierrahmen) über dieses Hintergrundbild realisiert:
[]
Es ist nur wenige Pixel hoch und so breit wie die linke Navigationsbox einschließlich des Abstands zum rechten Inhaltsbereich. Als Hintergrundbild für das umschließende div#Seite definiert, wird es in der y-Achse wiederholt und passt sich so dessen Gesamthöhe an. Zusätzlich ist gelbe Farbe als Hintergrund angegeben und füllt den rechten Inhaltsbereich aus.
Diese optische Aufteilung der Seite erfordert eine feste Breitenangabe in px für die Navigation. Achten Sie daher darauf, dass die enthaltenen Linktexte auch bei Schriftvergrößerung noch in die Box passen oder ermöglichen Sie Textumbrüche durch Leerzeichen wie in diesem Beispiel im Menüpunkt "CSS-Browserweichen".
Durch Kombination der hier aufgeführten Beispiele sollte es Ihnen nun auch möglich sein, ein solches Layout mit durchgehendem Spaltenhintergrund ohne Begrenzung der Seitenbreite oder mit drei Spalten zu erstellen. Falls Sie mehr als drei Spalten benötigen, definieren Sie für die weiteren Boxen die CSS-Eigenschaften float und width. Sie können dabei stets die zuletzt im Quelltext notierte Box im Elementenfluss belassen und dadurch auf die Angabe einer Breite verzichten. Hierdurch vermeiden Sie auch Anzeigefehler und müssen den Box-Modell-Fehler des Internet Explorer nicht über eine CSS-Browserweiche korrigieren.
Während sich mit Tabellen erstellte Layouts oft durch gleich hohe, über unterschiedliche Hintergrundfarben voneinander abgesetzte Spalten auszeichnen, können CSS-basierte Layouts dazu verleiten, jede Box mit einem durchgehenden, gestrichelten oder gar gepunkteten Rahmen abzugrenzen. Auch wenn dies bei den hier aufgeführten Beispielen zu Demonstrationszwecken der Fall ist: seien Sie kreativ und nutzen Sie die CSS-Eigenschaft border für Rahmen sinnvoll und sparsam.
Wenn Sie Bereiche mit Rahmen, einfachen Linien oder über eine Hintergrundfarbe abgrenzen, setzen Sie für den enthaltenen Text auch einen passenden Innenabstand.
Nutzen Sie die erweiterten Möglichkeiten, die ein CSS-basiertes Layout im Gegensatz zu Tabellen bietet und denken Sie nicht in Spalten, sondern lassen Sie ein Umfließen von Elementen zu. Tolerieren Sie auch, wenn sich floatende Elemente bei zu schmalen Fenstern untereinander anordnen - das kann benutzerfreundlicher sein, als einen Text horizontal zu scrollen. Andernfalls können Sie ein umschließendes Element mit ausreichender Breite wie im obigen Beispiel verwenden, um unterschiedliche Anordnungen zu verhindern oder einen Spalteneindruck zu erzeugen.
Bringen Sie Farbe in Ihre Seiten - aber übertreiben Sie es nicht. Wählen Sie zueinander passende, ähnliche Farbtöne. Darüber hinaus können Sie Akzente in Komplementärfarben setzen. Achten Sie aber bitte auf einen ausreichenden Farb- und Helligkeitskontrast, damit Ihre Texte auch ohne Anstrengung gelesen werden können. Hierzu eignet sich dunkle Schrift vor hellem Hintergrund am besten. Setzen Sie bitte auch nicht voraus, dass in jedem Browser Schwarz als Schriftfarbe und Weiß als Hintergrundfarbe voreingestellt ist. Wenn Sie den Hintergrund definieren, vergessen Sie auf keinen Fall, die Vordergrundfarben und Linkfarben anzugeben, da Sie hier nicht immer mit einheitlichen Voreinstellungen rechnen können. Hierbei ist es für Ihre Besucher hilfreich, wenn besuchte Links von unbesuchten zu unterscheiden sind.
In den vorangegangenen Beispielen wurde für die Navigationsleiste eine Aufzählungsliste verwendet. Hiermit haben Sie nicht nur ein strukturelles Element, das dem Sinn einer Navigation, nämlich der Auflistung von Verweisen, recht gut entspricht, sondern auch gleich drei verschachtelte Elemente, die Sie über CSS formatieren können: <ul>, <li> und <a>.
Um eine einheitliche Darstellung zu erreichen, sind zunächst die unterschiedlichen Voreinstellungen der Browser für Listen zu überschreiben.
Die Abstände werden für <ul> und <li> auf 0 gesetzt und das Aufzählungszeichen für <li> wird über list-style:none beseitigt. So erhalten Sie eine Darstellung der Links ohne erkennbare Listenformatierung, aufgrund der blockbildenden Eigenschaft der Listenpunkte jedoch untereinander angeordnet.
Im folgenden Beispiel werden nun die Abstände neu bestimmt, eine Breite für die Liste festgelegt sowie Rahmen und Farben hinzugefügt.
Die Zuweisung von Rahmen und Hintergrundfarben macht hier die Struktur sichtbar. Solche komplexen Listen-Formatierungen erfordern für den Internet Explorer (besonders für ältere Versionen) leider nicht selten Korrekturen über eine spezielle CSS-Browserweiche; in diesen Beispielen wird hierzu der "Star-HTML-Hack" für ältere Versionen und später auch der "Star-Plus-HTML-Hack" für den IE 7 verwendet.
Auch dem a-Element wurde eine Hintergrundfarbe zugewiesen und diese (sowie dazu passend die Schriftfarbe) über die Pseudoklasse:hover geändert. Hierdurch ergibt sich ein Rollover-Effekt, der so einfacher als mit JavaScript erzeugt werden kann. Es fehlt allerdings noch das typische Balken-Aussehen, da <a> als Inline-Element nur den für seinen Inhalt erforderlichen Raum einnimmt.
Um den Linkbereich auf das ganze li-Element auszuweiten und typische Rollover-Balken zu erhalten, werden die Links mit display:block definiert.
Leider benötigt der Internet Explorer bis zur Version 6 abgesehen von display:block noch eine Breitenangabe zur Ausdehnung des Linkbereichs. Diese ist für den IE 6 im standardkonformen Modus und frühere Versionen entsprechend des verwendeten Box-Modells unterschiedlich angegeben.
Rahmen und Innenabstand von <li> sind hier dem Link zugewiesen, damit der Rollover-Effekt über den gesamten Hintergrund des Balkens geht. Über unterschiedliche Rahmenfarben ist hier auch ein räumlicher Effekt hinzugekommen.
Eine größere Anzahl von Menüpunkten in einer vertikal dargestellten Navigation ist aufgeteilt in Rubriken mit Zwischenüberschriften übersichtlicher. Hierzu werden im folgenden Beispiel h2-Elemente in die Liste eingefügt und ihnen gemeinsam mit den Links zunächst dieselben CSS-Eigenschaften zugewiesen.
Da Überschriften von den Browsern meist größer und mit voreingestellten Außenabständen dargestellt werden, sind diese Eigenschaften für <h2> explizit gesetzt. Hierbei ist für margin-top ein größerer Abstand gewählt, um die Rubriken optisch voneinander zu trennen. Hervorgehoben werden die Überschriften hier farblich.
Neu in diesem Beispiel hinzugekommen ist auch, dass die aktuelle Seite nicht verlinkt wird. Dies erleichtert die Benutzbarkeit, da der Standort erkennbar ist und nicht mit einem (in diesem Fall ja nutzlosen) Link verwechselt werden kann. Hierzu wird der aktuelle Menüpunkt als <span> ausgezeichnet, dem dieselben CSS-Eigenschaften wie Verweisen zugewiesen werden, wenn diese mit der Maus überfahren werden; Sie können ihn - ausgehend von der Basisformatierung - auch noch deutlicher hervorheben.
Sie können eine Navigationsleiste mit wenigen Menüpunkten auch horizontal anordnen. Hierfür existieren zwei verschiedene Möglichkeiten mit unterschiedlichen Vor- und Nachteilen. Die einfachere Möglichkeit ist, die li-Elemente per display:inline darzustellen. Dies ermöglicht auch deren Zentrierung über eine auf das Eltern-Element angewandte Eigenschafts-/Wertkombination von text-align:center.
Da inline angezeigten Elementen keine Breite zugewiesen werden kann, richtet sich diese nach dem enthaltenen Text (die für den Internet Explorer angegebene Breite von nur 1em dient zur Fehlerkorrektur in Version 5.0). Nutzen Sie diese Formatierungs-Möglichkeit, wenn die Menüpunkte unterschiedlich breit dargestellt werden bzw. nur soviel Raum wie ihr Inhalt einnehmen sollen.
Einen Nachteil hat diese Methode jedoch: Bei einem Umbruch der Navigationsleiste in zu kleinen Browserfenstern kommt es zu Überlagerungen. Dieser Effekt kann zwar auch bewusst zu gestalterischen Zwecken eingesetzt werden, verschlechtert allerdings die Nutzbarkeit. Achten Sie darauf, in den Menütexten keine oder nur geschützte Leerzeichen ( ) zu verwenden, damit bei einem Umbruch der Menüpunkt nicht geteilt wird.
Einheitliche Breiten der Menüpunkte unabhängig von deren Inhalten können Sie in einer horizontalen Navigationsleiste angeben, wenn Sie die CSS-Eigenschaft float verwenden. Sie können diese entweder <li> oder den hierin enthaltenen Elementen zuweisen, wobei dann li {display:inline} zu definieren ist. Letzteres ist aus verschiedenen Gründen günstiger.
Auch in diesem Beispiel wird display:inline für die li-Elemente benötigt, um Zeilenumbrüche zu verhindern. Da die enthaltenen Menüpunkte über float Eigenschaften von Block-Elementen erhalten, können ihnen auch eine Breite (width) und Außenabstände (margin) zugewiesen werden, ferner kommt es bei einem Umbruch nicht mehr zu Überlagerungen. Um den Elementfluss wieder herzustellen und in diesem Beispiel die Menüpunkte mit Hintergrund und Rahmen der Liste zu umschließen, ist ein Element mit der CSS-Eigenschaft clear innerhalb der Liste erforderlich. Hierzu wird ein leeres div-Element ohne semantische Bedeutung verwendet. Beim Internet Explorer funktioniert dies allerdings nur, solange kein Umbruch der Navigationsleiste erfolgt.
Sie können der Navigationsleiste ul#Navigation auch eine passende Breite zuweisen, um in zu kleinen Browserfenstern statt eines Umbruchs Scrollbalken anzubieten. Gemäß CSS 2.1 können Sie float hier auch problemlos ohne Angabe einer Breite verwenden, um Überlagerungen bei einem Umbruch zu verhindern.
Eine Navigation, die wie in obigem Beispiel mit Zwischenüberschriften versehen ist, wird in vielen Fällen keine sequenzielle Auflistung von Links enthalten, sondern eher verschiedenen Navigationsebenen entsprechen. Die Überschriften stellen in diesem Fall die Hauptmenüpunkte dar und können selbst auch mit Übersichtsseiten für die jeweilige Rubrik verlinkt sein. Eine verschachtelte Liste eignet sich zur logischen Abbildung dieser Struktur jedoch besser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit mehreren Ebenen</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#Navigation {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#Navigation li ul {
margin: 0 0 0 1em; padding: 0;
}
ul#Navigation li ul li {
margin: 0.1em 0;
}
* html ul#Navigation li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html ul#Navigation li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
</style>
</head>
<body>
<h1 id="Beispiel">Mehrere Navigationsebenen</h1>
<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
</body>
</html>
Erläuterung:
In das zweite <li>-Element ist hier eine weitere Liste eingefügt, da <ul> selbst keine anderen Elemente als <li> enthalten darf.
Über die Nachkommen-Selektoren ul#Navigation li ul und ul#Navigation li ul li werden die CSS-Eigenschaften für die so verschachtelte Liste dahingehend geändert, dass die Menüpunkte dieser zweiten Ebene eingerückt und entsprechend schmaler sind und einen geringeren Abstand zueinander sowie zum dazugehörigen Menüpunkt der ersten Ebene aufweisen. Es sind natürlich auch andere CSS-Formatierungen möglich, um diese Struktur zu visualisieren.
Selbst ohne CSS wird die Struktur von verschachtelten Listen über die Browser-Voreinstellungen sehr gut deutlich, wie dieses Beispiel zeigt.
Eine verschachtelte Liste lässt sich auch geteilt darstellen, sodass die Menüpunkte der ersten Ebene horizontal in einer Reihe und die der zweiten Ebene vertikal passend darunter angeordnet werden. Dazu ist es erforderlich, die li-Elemente der ersten Ebene per float nebeneinander anzuordnen und ihnen position:relative zuzuweisen, damit deren Positionen als Bezug für die über position:absolute aus dem Elementenfluss genommenen Listenpunkte der zweiten Ebene genutzt werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Geteilte Navigationsleisten</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
width: 8.6em;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.7em; left: -0.4em;
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li ul li {
float: none;display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span { /* nur fuer IE erforderlich */
width: 100%;
w\idth: 6.4em;
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
</style>
</head>
<body>
<h1 id="Beispiel">Geteilte Navigationsleisten</h1>
<div id="Rahmen"><ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a id="aktuell" href="#Beispiel">Seite 4</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 4c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 5</a></li>
</ul><div></div></div>
</body>
</html>
Erläuterung:
Bei dieser Navigationsleiste muss ein Umbruch verhindert werden, um die richtige Reihenfolge der angezeigten Menüpunkte zu gewährleisten. Dazu ist eine ausreichend große Breite anzugeben, die allerdings nicht der Liste selbst zugewiesen werden sollte, da dies in einigen Browsern zu einer fehlerhaften Darstellung führt. Daher wird ein zusätzliches Element (div#Rahmen) um die Navigationsleiste gesetzt, welches auch die Definitionen für den Rahmen und die Hintergrundfarbe übernimmt. Als Element ohne semantische Bedeutung hat es ohne CSS keine Auswirkung auf die Darstellung. Da die Listenpunkte über float aus dem Elementfluss genommen sind, muss ein zusätzliches, innerhalb des Rahmens notiertes Element mit der CSS-Eigenschaft clear den Elementfluss wieder herstellen. Auch hierzu wird ein leeres div-Element (<div></div>) verwendet.
Die verschachtelten Listen der zweiten Ebene werden über den Nachkommen-Selektor ul#Navigation li ul absolut unterhalb des dazugehörigen Listenpunktes positioniert. Für die Listenpunkte der zweiten Ebene wird über den Nachkommen-Selektor ul#Navigation li ul li die Eigenschaft float aufgehoben.
In diesem Beispiel ist ein Menüpunkt der zweiten Ebene als aktuelle Seite nicht verlinkt, sondern mit dem Element <span> ausgezeichnet und über CSS gesondert formatiert. Um auch den dazugehörigen Menüpunkt der ersten Ebene über CSS hervorheben zu können, wird für diesen die id="aktuell" angegeben.
Moderne Browser ermöglichen auch, die Navigation der zweiten Ebene dynamisch einzublenden. Hierzu ist nur eine kleine Ergänzung im Stylesheet erforderlich:
Über den Kind-Selektor li>ul werden die Listen der zweiten Ebene zunächst mittels display:none ausgeblendet. Beim Überfahren mit der Maus werden sie über den Selektor ul#Navigation li:hover>ul mit display:block wieder angezeigt; ebenso die aktuell ausgewählte Liste über den komplexen Selektor ul#Navigation li>a#aktuell+ul, der nur die ul-Liste anspricht, die auf den Link a#aktuell folgt, welcher Kindelement eines li in der ul#Navigation ist. Damit die beim Überfahren mit der Maus eingeblendete Liste beim Ansteuern ihres ersten Menüpunktes nicht wieder ausgeblendet wird, muss sie etwas höher positioniert werden, sodass sie den Listenpunkt der ersten Ebene überlappt. Wenn Sie genau hinsehen, bemerken Sie hier einen etwas geringeren Abstand als den über margin für die verschachtelten Listenpunkte angegebenen.
Damit dieses Beispiel auch bei mehreren Untermenüpunkten im Internet Explorer 7 noch funktioniert, ist für den IE 7 eine Hintergrundfarbe für die Unternavigation angegeben.
Beachten Sie:
Dieses Beispiel funktioniert in modernen Browsern zufriedenstellend. Im Internet Explorer bis zur Version 6 und älteren Browsern sind rein auf CSS basierende dynamische Navigationsleisten grundsätzlich nicht möglich, da sie den Zustand :hover nur auf Links - genauer a-Elemente mit dem Attribut href - anwenden können und diese nicht ineinander verschachtelt werden dürfen. Da diese Browser aber auch die hier verwendeten Selektoren nicht interpretieren können, stellen sie dieses Beispiel wie das vorherige ohne Dynamik dar.
Dieses Beispiel basiert ebenfalls auf der obigen geteilt dargestellten verschachtelten Liste. Die Unternavigation ist hier ausgeblendet und wird allen modernen Browsern beim Überfahren mit der Maus angezeigt. Sofern Sie die Menüpunkte der ersten Ebene mit Übersichtsseiten für ältere Browser verlinken und damit auch einer Tastatursteuerung zugänglich machen, ist eine solche dynamische Navigationsleiste auch praktisch einsetzbar. Die Übersichtsseiten könnten neben Verweisen auf die Menüpunkte der weiteren Ebenen auch eine Einleitung zur jeweiligen Rubrik enthalten.
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
Erläuterung:
Über den einfachen Nachkommen-Selektor ul#Navigation li ul wird die Unternavigation hier für alle nicht ganz veralteten Browser ausgeblendet. Eingeblendet wird sie dagegen nur noch von modernen Browsern beim Überfahren mit der Maus. Benutzer älterer oder diesbezüglich fehlerhafter Browser können jedoch über den Umweg der in der Hauptnavigation verlinkten Übersichtsseiten auch zum Ziel gelangen.
Die Breite der Menüpunkte ist hier nicht für <li> angegeben, sondern für die hierin enthaltenen Elemente. Diese nach CSS 2.1 gültige Möglichkeit, float ohne Angabe von width zu verwenden, beseitigt auch die fehlerhafte Darstellung des vorherigen Beispiels in Opera 7. Für den Internet Explorer 5.x ist die Breite nach dem fehlerhaften Microsoft-Boxmodell angegeben.
Beachten Sie:
Testen Sie eine solche Navigationsleiste in möglichst vielen Browsern, da die hier verwendete Methode einige Browser überfordern könnte!
Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu ermöglichen, bleibt Ihnen derzeit nur eine Realisierung über JavaScript. Es ist jedoch sinnvoll, dies mit der hier gezeigten Möglichkeit zu kombinieren.
Die folgende, im <head>-Bereich des obigen Beispiels eingefügte JavaScript-Funktion ermöglicht die dynamische Anzeige der Unternavigation auch dem Internet Explorer 5 und 6.
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
Erläuterung:
Um unerwünschte Auswirkungen in anderen Browsern zu vermeiden, wird das Script über eine Browserweiche nur dem Internet Explorer (auch der Macintosh-Version) zugänglich gemacht. Die Funktion hoverIE wird vom Script mittels Event-Handleronload aufgerufen und erfordert keine weiteren Änderungen am HTML-Quelltext. Das Script durchsucht die in der ul id="Navigation" enthaltenen Knoten und blendet die hierin verschachtelten ul-Elemente über die CSS-Eigenschaft display beim Überfahren mit der Maus (onmouseover) ein bzw. beim Verlassen (onmouseout) wieder aus. Dies erfordert beim Internet Explorer jedoch zusätzlich eine Änderung der Hintergrundfarbe (backgroundColor).
Um den Internet Explorer 7 von diesem Script auszuschließen, können Sie es in einen conditional comment (<!--[if lt IE 7]> <![endif]-->) setzen, wenn Sie auf die Unterstützung der alten Macintosh-Version verzichten.
Beachten Sie:
Da die Interpretation von JavaScript nicht grundsätzlich vorausgesetzt werden kann und auch andere ältere Browser die Unternavigation nicht darstellen, ist diese Funktionalität nur ergänzend nutzbar und Sie sollten auf die beim obigen Beispiel angesprochene alternative Verlinkung nicht verzichten.
Sinnvolle Vorkenntnisse zum Verständnis: HTML und CSS-Eigenschaften.
Dieser Abschnitt beschreibt die praktische Anwendung von CSS-Eigenschaften zur Seitengestaltung ohne Verwendung von Tabellen.
Der Abschnitt besteht aus folgenden Seiten:
While this text is being read out to you,
you can hear ragtime music from a MIDI file in the background. If you wanted to hear the
whole piece of music, I would have to tell you a long story now to keep the music playing.
But I think I have given you an idea of this feature, even without telling a long story.
Thank you for your attention!
Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
Wenn Ihr Browser jedoch die Stylesheet-Angaben zum Seiten-Layout kennt,
versuchen Sie mal, diese Datei über den normalen Druckbefehl Ihres
Browsers auszudrucken.
Die Zeilenhöhe ist ein altbekanntes DTP-Feature zur Formatierung von Absätzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der typografischen Wirkung von Text hilfreich. Denn die Zeilenhöhe hängt unmittelbar mit der Schriftgröße zusammen. Deshalb ist es sinnvoll, für beide Werte entsprechende Stylesheet-Angaben zu machen, oder mit prozentualen Angaben zu arbeiten. In diesem Textabsatz wurde eine Schriftgröße von 1em und eine Zeilenhöhe von 1.4em festgelegt. Das ist ein üblicher Wert. Eine angenehm zu lesende Zeilenhöhe für größere Texte sollte am besten etwas größer sein als die Schriftgröße, aber nur etwas. Wenn die Zeilenhöhe im Vergleich zur Schriftgröße zu groß wird, werden die Textzeilen zu weit auseinandergezogen. Wenn die Zeilenhöhe zu gering ist, stehen die Zeilen zu eng beisammen. Für Ausnahmefälle ist natürlich alles erlaubt.
Die Zeilenhöhe ist ein altbekanntes DTP-Feature zur Formatierung von Absätzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der typografischen Wirkung von Text hilfreich. Denn die Zeilenhöhe hängt unmittelbar mit der Schriftgröße zusammen. Deshalb ist es sinnvoll, für beide Werte entsprechende Stylesheet-Angaben zu machen, oder mit prozentualen Angaben zu arbeiten. In diesem Textabsatz wurde eine Schriftgröße von 1em und eine Zeilenhöhe von 2em festgelegt. Das ist für besondere Zwecke mal ganz nett, für längere Texte jedoch nicht besonders geeignet.
Die Zeilenhöhe ist ein altbekanntes DTP-Feature zur Formatierung von Absätzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der typografischen Wirkung von Text hilfreich. Denn die Zeilenhöhe hängt unmittelbar mit der Schriftgröße zusammen. Deshalb ist es sinnvoll, für beide Werte entsprechende Stylesheet-Angaben zu machen, oder mit prozentualen Angaben zu arbeiten. In diesem Textabsatz wurde eine Schriftgröße von 1em und eine Zeilenhöhe von 1em festgelegt. Das ist für besondere Zwecke mal ganz nett, für längere Texte jedoch nicht geeignet.
Ich habe alle Zeit der Welt. Deshalb bin ich auch
ganz gelassen und spreche nur mit einem Stress-Wert von 10.
Immerzu ist alles gleich vorbei. Nie kommt man zu etwas.
Alles ist grausam. Deshalb rede ich auch so hastig.
Ein Stress-Wert von 90 wurde mir vorgegeben, stellen Sie sich das mal vor!
ohne Breitenangabe - Spalten mit höherem Platzbedarf wird mehr Breite zur Verfügung gestellt, wenn andere Spalten diese für eine vollständige Darstellung ihrer Inhalte nicht benötigen.
table-layout:fixed ohne Breitenangabe
ohne Breitenangabe
ohne Breitenangabe
ohne Breitenangabe - Der verfügbare Platz wird unabhängig vom Inhalt der Zellen auf alle Spalten gleichmäßig aufgeteilt.
table-layout:fixed mit teilweiser Breitenangabe
width:25%
width:120px Donaudampfschifffahrtsgesellschaft
ohne Breitenangabe - Noch verfügbarer Platz wird auf alle Spalten ohne Breitenangabe aufgeteilt. Zu breiter Inhalt wird, wie in der mittleren Spalte dargestellt, abgeschnitten, wenn overflow:hidden definiert wurde.
table-layout:fixed mit Breitenangabe in allen Spalten
width:25%
width:25%
width:25% - Ist die Breite der gesamten Tabelle größer, als von allen Spalten gemeinsam benötigt wird, wird verfügbarer Platz zu gleichen Teilen auf alle Spalten aufgeteilt. In diesem Beispiel beträgt die Breite jeder Spalte daher effektiv 33 % anstatt der definierten 25 %.
div-Bereich mit
sichtbarem roten Rahmen und Innenabstand 4em unten. Das ist in diesem Fall der
Abstand zwischen dem unteren Rahmen des Textabsatzes und dem unteren Rahmen des
div-Bereichs.
Textabsatz mit sichtbarem
Rahmen und mit Innenabstand 100px unten
Beispieltext mit Zeichenabstand 0.1em Beispieltext mit Zeichenabstand 0.3em Beispieltext mit Zeichenabstand 0.5em Beispieltext mit Zeichenabstand 0.7em
Beispieltext mit Zeichenabstand 1px Beispieltext mit Zeichenabstand 3px Beispieltext mit Zeichenabstand 5px Beispieltext mit Zeichenabstand 7px
Beispieltext mit Zeichenabstand 1pt Beispieltext mit Zeichenabstand 3pt Beispieltext mit Zeichenabstand 5pt Beispieltext mit Zeichenabstand 7pt
Beispieltext mit Zeichenabstand 0.1pc Beispieltext mit Zeichenabstand 0.3pc Beispieltext mit Zeichenabstand 0.5pc Beispieltext mit Zeichenabstand 0.7pc
Beispieltext mit Zeichenabstand 1mm Beispieltext mit Zeichenabstand 2mm Beispieltext mit Zeichenabstand 3mm Beispieltext mit Zeichenabstand 4mm
Beispieltext mit Zeichenabstand 0.01in Beispieltext mit Zeichenabstand 0.03in Beispieltext mit Zeichenabstand 0.05in Beispieltext mit Zeichenabstand 0.07in
I have all the time in the world. That is why I am
quite relaxed, so that I can read this text with a stress value of only 10.
Everything just rushes by, and there is no time for anything.
You can never get anything done, it's just terrible. That is why I am so agitated.
They gave me a stress value of 90 for reading this text, just imagine!
Während dieser Text gesprochen wird,
ertönt im Hintergrund ein flotter Ragtime als MIDI-Datei. Damit Sie in den Genuss
des gesamten Stücks kommen, müsste ich Ihnen jetzt eine lange Geschichte erzählen.
Aber ich denke, Sie gewinnen auch ohne eine solche Geschichte einen Eindruck davon,
wie Hintergrundmusik während der Sprachausgabe eines Textes wirkt.
Vielen Dank für Ihre Aufmerksamkeit!
Der Absatz, den Sie gerade lesen,
wurde als predefiniert definiert.
Zeilenumbrüche sollten dabei so interpretiert
werden, wie sie im Editor eingegeben wurden.
Der Absatz, den Sie gerade lesen, darf nicht
umbrochen werden. Es sollte kein automatischer Zeilenumbruch erfolgen. Bei
diesem längeren Text müssen Sie vermutlich quer scrollen, um alles zu lesen.
Dieser Textabsatz hat eine Texteinrückung von 1em. Texteinrückungen dieser Art sind an die Ästhetik von Büchern oder Zeitungen angelehnt, wo häufig mit dieser Formatierung gearbeitet wird. Damit das auch wirklich sichtbar wird, enthält dieser Textabsatz schließlich noch diesen überflüssigen Satz, der sich aber hoffentlich wenigstens flüssig liest.
Dieser Textabsatz hat eine Texteinrückung von 2em. Texteinrückungen dieser Art sind an die Ästhetik von Büchern oder Zeitungen angelehnt, wo häufig mit dieser Formatierung gearbeitet wird. Damit das auch wirklich sichtbar wird, enthält dieser Textabsatz schließlich noch diesen überflüssigen Satz, der sich aber hoffentlich wenigstens flüssig liest.
Dieser Textabsatz hat eine negative Texteinrückung von -2em. Dem Textabsatz wurde außerdem mit margin-left ein Randabstand von 2em links zugewiesen. Durch diesen Trick lassen sich also nicht nur Texteinrückungen, sondern auch Textausrückungen realisieren. Damit das auch wirklich sichtbar wird, enthält dieser Textabsatz schließlich noch diesen überflüssigen Satz, der sich aber hoffentlich wenigstens flüssig liest.
Man kann nur Brücken schlagen zwischen Ufern die man auseinanderhält. Denn wo es keine Gräben gibt, da gibt es auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein Leben.
Eine Überschrift muss nicht immer einen langweiligen, über die ganze Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal seitlich vom Text stehen, und der Text fließt um die Überschrift. Auch so kann man lange Texte mal anders gestalten als sonst üblich.
Beispieltext mit Schriftgröße .6em Beispieltext mit Schriftgröße .8em Beispieltext mit Schriftgröße 1em Beispieltext mit Schriftgröße 1.2em Beispieltext mit Schriftgröße 1.5em Beispieltext mit Schriftgröße 2em Beispieltext mit Schriftgröße 2.5em
Beispieltext mit Schriftgröße 60% Beispieltext mit Schriftgröße 80% Beispieltext mit Schriftgröße 100% Beispieltext mit Schriftgröße 120% Beispieltext mit Schriftgröße 150% Beispieltext mit Schriftgröße 200% Beispieltext mit Schriftgröße 250%
Beispieltext mit Schriftgröße 8px Beispieltext mit Schriftgröße 10px Beispieltext mit Schriftgröße 13px Beispieltext mit Schriftgröße 16px Beispieltext mit Schriftgröße 20px Beispieltext mit Schriftgröße 24px Beispieltext mit Schriftgröße 32px
Beispieltext mit Schriftgröße 6pt Beispieltext mit Schriftgröße 8pt Beispieltext mit Schriftgröße 10pt Beispieltext mit Schriftgröße 12pt Beispieltext mit Schriftgröße 14pt Beispieltext mit Schriftgröße 18pt Beispieltext mit Schriftgröße 24pt
Beispieltext mit Schriftgröße 1pc Beispieltext mit Schriftgröße 1.5pc Beispieltext mit Schriftgröße 2pc Beispieltext mit Schriftgröße 2.5pc
Beispieltext mit Schriftgröße 3mm Beispieltext mit Schriftgröße 6mm Beispieltext mit Schriftgröße 8mm Beispieltext mit Schriftgröße 10mm
Beispieltext mit Schriftgröße 0.1in Beispieltext mit Schriftgröße 0.2in Beispieltext mit Schriftgröße 0.3in Beispieltext mit Schriftgröße 0.4in
Der Absatz, den Sie gerade lesen, wurde mit text-align linksbündig ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie ein Gefühl für die Prioritäten zwischen den einzelnen Stylesheet-Angaben bekommen.
Noch eine Textzeile
Noch eine Textzeile
Der Absatz, den Sie gerade lesen, wurde mit text-align rechtsbündig ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen.
Noch eine Textzeile
Noch eine Textzeile
Der Absatz, den Sie gerade lesen, wurde mit text-align zentriert ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen.
Noch eine Textzeile
Noch eine Textzeile
Der Absatz, den Sie gerade lesen, wurde mit text-align als Blocksatz ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen. Lange hat es gedauert, bis die ersten Browser in der Lage waren, Blocksatz darzustellen. Mit den 4er-Versionen der beiden führenden Produkte von Netscape und Microsoft ist das jedoch problemlos möglich. Damit der Blocksatz auch wirklich sichtbar wird, enthält dieser Textabsatz diesen überflüssigen Text, der sich aber hoffentlich wenigstens flüssig liest.
Hören Sie mal! - Oder sind Sie schwerhörig?
Hier - und nur hier gibt's was zusätzlich auf die Ohren:
nämlich exklusiv ausgesuchte, explizit ausgesprochene Satzzeichen.
Sinnvoll sind die hier beschriebenen CSS-Eigenschaften vor allem für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address oder pre. Block-Elemente sind aber auch div, table, tr, th und td. Auch auf <body> lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall beziehen sich die Angaben auf den gesamten sichtbaren Körper der HTML-Datei. Es ist aber ebenso möglich, einzelne Textpassagen, die durch ein Inline-Element wie span, b, strong usw. markiert sind, mit einem eigenen Hintergrund zu belegen.
Elementspezifische Hintergrundangaben heben sich von eventuellen HTML-Angaben zur Hintergrundfarbe der HTML-Datei oder zu einer dateiweiten Hintergrundgrafik ab. Sehr schöne Effekte können Sie erzielen, indem Sie Angaben zu Hintergrundfarben bzw. Hintergrundbildern einzelner Elemente mit Angaben zu Rahmen und Innenabstand kombinieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-color</title>
<style type="text/css">
body { background-color:#E0E0E0; font-weight:bold; font-family:Arial; font-size:120%; }
.rosabox { background-color:#FFDDDD; padding:6px; margin:0px; }
.rosa { background-color:#FFDDDD; }
.gelbbox { background-color:#FFFF66; padding:6px; margin:0px; }
.gelb { background-color:#FFFF66; }
</style>
</head><body>
<h1>Hintergründig!</h1>
<p class="rosabox">Hinter dem Internet ist das <span class="gelb">Hinternet</span>.</p>
<p>Dies hat nichts zu sagen.</p>
<p class="gelbbox">Im Kinderzimmer herrscht das <span class="rosa">Kindernet</span>.</p>
</body></html>
Erläuterung:
Mit background-color: können Sie eine Hintergrundfarbe bestimmen. Erlaubt ist eine Farbangabe oder der Default-Wert transparent.
Beachten Sie:
Netscape 4.x bildet bei mehrzeiligen Textabsätzen keinen echten Farbblock, sondern dehnt die Hintergrundfarbe am Zeilenende nur bis zum zufälligen Ende des Textes. Um dies zu verhindern, können Sie zusätzlich die Angaben border:none; und margin:0px; notieren (in den meisten Fällen kommen Sie auch ohne das margin:0px; aus).
Wenn Ihnen der Abstand zwischen Textgrenzen und dem Farbblock, der durch die Hintergrundfarbe entsteht, zu klein ist, können Sie wie im obigen Beispiel mit padding einen Innenabstand definieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(background1.gif)">
<div style="background-image:url(background2.gif); margin:0px; padding:10px">
<h1 style="text-align:center;color:#FFFFCC">Willkommen im Reich der Texturen!</h1>
<div style="background-image:url(background3.jpg); margin:30px; padding:10px">
<h2 style="text-align:center;color:#804000">Willkommen im Reich der Texturen!</h2>
</div></div>
</body></html>
Erläuterung:
Mit background-image:url([URI]) können Sie eine Hintergrundgrafik bestimmen. Per Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt, so wie bei der Angabe eines Hintergrundbildes im einleitenden HTML-Tag <body>. Text und referenzierte Grafiken erscheinen über dieser Hintergrundgrafik. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPG-Grafiken benutzen.
Im Beispiel wird vorausgesetzt, dass sich die Grafikdateien im gleichen Verzeichnis befinden wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML. Wenn Sie background-image in einer separaten CSS-Datei notieren, beziehen sich relative Pfadangaben auf das Verzeichnis, in dem diese Stylesheet-Datei liegt.
Beachten Sie:
Wenn das Element, für das die Hintergrundgrafik definiert wird, in der Höhe oder Breite kleiner ist als die Hintergrundgrafik, wird die Hintergrundgrafik in der Darstellung an den Grenzen des Elements abgeschnitten.
Normalerweise wird eine Hintergrundgrafik im Wallpaper-Effekt über den gesamten zur Verfügung stehenden Raum wiederholt. Sie können jedoch ein anderes Verhalten erzwingen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-repeat</title>
</head><body>
<div style="background-image:url(background4.jpg); background-repeat:repeat-x;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der erste Bereich.<br>Ein Text, der sehr leicht<br>umbricht...usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:repeat-y;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der zweite Bereich.<br>Ein Text, der auch leicht umbricht....usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:no-repeat;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der dritte Bereich.<br>Ein Text, der auch leicht umbricht...usw.</p>
</div>
</body></html>
Erläuterung:
Mit background-repeat: können Sie das Wiederholungsverhalten einer Hintergrundgrafik, die Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.
repeat = wiederholen (Voreinstellung). repeat-x = nur "eine Zeile lang" waagerecht wiederholen. repeat-y = nur "eine Spalte lang" senkrecht wiederholen. no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.
Beachten Sie:
Netscape 4.x interpretiert diese Eigenschaft zwar, hat aber massive Schwierigkeiten bei der Darstellung von Elementinhalten.
Bei längeren Elementen wandert ein Hintergrundbild beim Scrollen im Text optisch mit. Sie können jedoch erzwingen, dass der Hintergrund stehen bleibt (Wasserzeichen-Effekt).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-attachment</title>
<style type="text/css">
div.bgscroll {
margin:20px 20px 20px 250px; width:35em; border:1px solid red;
background-image:url(background1.gif); background-repeat:no-repeat; background-position:center center;
background-attachment:scroll;
}
div.bgfixed {
margin:20px 20px 20px 250px; border:1px solid red;
background-image:url(background5.gif); background-repeat:no-repeat; background-position:center center;
background-attachment:fixed;
}
</style>
</head><body>
<div class="bgscroll">
<h1>viel Text <!--usw.--> <code>background-attachment:scroll</code></h1>
</div>
<div class="bgfixed">
<h1>viel Text <!--usw.--> <code>background-attachment:fixed</code></h1>
</div>
</body></html>
Erläuterung:
Mit background-attachment: können Sie das Scroll-Verhalten einer Hintergrundgrafik, die Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.
scroll = mitscrollen (Voreinstellung), orientiert sich an der Position des jeweiligen Elements fixed = Hintergrundbild bleibt stehen, orientiert sich am Viewport
Das obige Beispiel demonstriert einen interessanten Anwendungsfall aus der Kombination der Eigenschaften background-attachment und background-position. Beiden div-Elementen werden mittels background-position:center center mittig positionierte Hintergrundgrafiken zugewiesen. Im ersten Fall wird das Bild aufgrund von background-attachment:scroll in der Mitte des Elements selbst dargestellt. Im zweiten Fall jedoch orientiert sich dessen Position aufgrund der Verwendung von background-attachment:fixed am Viewport und wird damit in der Mitte des Browserfensters dargestellt.
Beachten Sie:
Der Internet Explorer bis Version 6 interpretiert diese Eigenschaft nur bezogen auf scrollbare Elemente (dem body-Element oder anderen mit der CSS-Eigenschaft overflow:scroll bzw. overflow:auto).
Diese Angabe ist vor allem dann interessant, wenn Sie mit einer entsprechenden Angabe zu background-repeat erzwingen, dass eine Hintergrundgrafik nur einmal angezeigt wird. Für diesen Fall können Sie mit der Hintergrundposition festlegen, wo genau die Hintergrundgrafik innerhalb des HTML-Elements platziert werden soll.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-position</title>
<style type="text/css">
#Tanz {
background-image:url(background6.gif); background-repeat:no-repeat;
background-position:30px 20px;
background-color:white; height:400px;
}
</style>
</head><body>
<div id="Tanz">
<h1>Tanz der Bilder!</h1>
<img src="background_foreground.gif" width="321" height="262"
alt="Ein transparentes Bild über dem Hintergrundbild">
</div>
</body></html>
Erläuterung:
Mit background-position: können Sie festlegen, wo die linke obere Ecke der Hintergrundgrafik sein soll. Der erste Wert steht für die horizontale, der zweite für die vertikale Position. Bezugspunkt ist das HTML-Element, für das die Hintergrundgrafik definiert wird. Etwaige Innenabstände werden berücksichtigt. Erlaubt sind numerische Angaben und folgende Angaben:
top = vertikal obenbündig. bottom = vertikal untenbündig. center = zentriert (horizontal oder vertikal, center center kann als center zusammengefasst werden). left = horizontal linksbündig. right = horizontal rechtsbündig.
Im obigen Beispiel enthält das div-Element eine GIF-Grafik mit transparentem Hintergrund. Diese wird im Beispiel über der Hintergrundgrafik angezeigt. Es sieht aus wie eine einzelne Grafik, sind aber zwei verschiedene.
Beachten Sie:
Prozentangaben beziehen sich anders als beispielsweise Pixelwerte nicht auf die linke obere Ecke des Hintergrundbildes. Bei einer Angabe von 40% 60% wird die Stelle der Grafik, die 40 % von deren linkem und 60 % von deren oberem Rand entfernt ist als Bezugspunkt herangezogen. Deklariert man demnach 50% 50%, wird der Punkt, der sich genau in der Mitte der Grafik befindet (also 50 % vom linken und oberen Rand entfernt ist) mittig platziert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background</title>
</head><body>
<div style="background:url(background1.gif) repeat-x;">
<h1 style="font-family:Arial,sans-serif; color:maroon; font-size:80px">NEWS</h1>
<div style="margin-top:45px; font-size:1.2em">
<p>Hier folgen die News...</p>
</div></div>
</body></html>
Erläuterung:
Mit background: können Sie Angaben für den Hintergrund zusammenfassen. Notieren Sie Angaben zur Hintergrundfarbe, zum Hintergrundbild, zu Wiederholungs- und Wasserzeichen-Effekt sowie zur Position mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.
Beachten Sie:
Netscape 4.x interpretiert diese Angabe zwar, aber was er aus dem obigen Beispiel macht, spottet leider jeder Beschreibung.
Dank dieser CSS-Eigenschaften, die zur Version 2.0 des CSS-Sprachstandards gehören, wird es möglich, HTML-formatierten Text für die Sprachausgabe auf Audio-Systemen umzusetzen. Da bislang nur Opera die im Folgenden vorgestellten Eigenschaften interpretiert, werden sie in CSS 2.1 in den lediglich informativen Teil der Spezifikation verschoben. Browser sind daher nicht verpflichtet, sie zu unterstützen, um als CSS 2.1-konform zu gelten. Aurale (akustische) Stylesheets werden frühestens in CSS3 wieder normativer Bestandteil der Spezifikation sein.
Die CSS-Eigenschaften zur Sound-Kontrolle für Sprachausgabe erlauben es, Sprecherstimmen auf vielfältige Weise zu beeinflussen und den Einsatz von begleitenden Geräuschen oder Musikpassagen zu kontrollieren. Die hier vorgestellten Möglichkeiten sind jedoch nicht nur für Sehbehinderte eine Hoffnung. Sie sind auch interessant für schöngeistige Autoren, die Texte nicht nur schreiben, sondern auch für den Zweck des Vorlesens exakt formatieren wollen. Vor allem als Autorenanweisungen für Hör- und Bühnenstücke können diese Angaben sehr interessant sein.
Die computer-technische Umsetzung einer solchen akustischen Feinsteuerung von synthetischen Stimmen ist jedoch alles andere als trivial. "Ich hör ja gar nix" wird auch deshalb noch eine Weile lang das enttäuschende Erlebnis beim "Anhören" der Beispiele auf dieser Seite bleiben, denn die meisten heute verbreiteten Browser sind rein bildschirmorientiert und besitzen keine Programm-Module für Sprachausgabe. Zwar gibt es mittlerweile Software zur Sprachausgabe von Web-Seiten, doch auch bei solchen Produkten ist man in der Regel noch nicht so weit, die hier vorgestellten CSS-Eigenschaften zu unterstützen.
Als erster Browser beherrscht Opera ab Version 8 die Sprachausgabe und lässt sich darüber hinaus auch mit Sprachbefehlen steuern. Das von IBM entwickelte Sprachmodul wird nach Aktivierung in den Opera-Einstellungen (Menü Extras / Einstellungen / Erweitert / Sprache / Sprachgesteuerte Bedienung aktivieren) heruntergeladen. Wird nach erfolgter Installation der Inhalt einer Seite markiert, lässt sich er sich anschließend mit der Taste V vorlesen.
Ein Problem bei der Sprachausgabe ist die Vielzahl der Landessprachen. Eine synthetische Stimme, die auf "Englisch" getrimmt ist, wird sich bei der Ausgabe eines deutschen Textes schauerlich anhören. Es ist deshalb auf jeden Fall empfehlenswert, in Dateien, die CSS-Eigenschaften für die Sprachausgabe enthalten, die verwendete Landessprache auszuweisen. Dies kann beispielsweise mit Hilfe des Universalattributslang in einzelnen HTML-Elementen oder zentral im body-Element geschehen. Da das Opera-Sprachmodul derzeit ausschließlich die englische Sprache unterstützt, existiert für jedes der auf dieser Seite angeführten Beispiele eine englische Übersetzung.
Sie können für ein HTML-Element oder einen Bereich angeben, in welcher Lautstärke er ausgegeben werden soll. Die Lautstärkeangabe ist eine relative Größe in Bezug auf die Grundlautstärke, die der Anwender eingestellt hat.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>volume</title>
</head><body lang="de">
<p style="volume:silent">Text wird mit der Lautstärke <b>silent</b> gesprochen</p>
<p style="volume:x-loud">Text wird mit der Lautstärke <b>x-loud</b> gesprochen</p>
<p style="volume:20">Text wird mit der Lautstärke <b>20</b> gesprochen</p>
<p style="volume:100">Text wird mit der Lautstärke <b>100</b> gesprochen</p>
</body></html>
Erläuterung:
Mit volume: können Sie die relative Lautstärke bestimmen. Erlaubt sind Werte zwischen 0 (sehr leise) und 100 (sehr laut) oder einer der folgenden Angaben:
silent = Ton aus, jedoch eine Sprechpause in der Länge der Passage. x-soft = sehr leise, entspricht Wert 0. soft = leise, entspricht Wert 25. medium = mittel, entpricht Wert 50. loud = laut, entpricht Wert 75. x-loud = laut, entpricht Wert 100.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speak</title>
</head><body lang="de">
<p style="speak:normal">Das Wort "Buchstabieren" wird jetzt buchstabiert:</p>
<p style="speak:spell-out">Buchstabieren</p>
</body></html>
Erläuterung:
Mit speak: können Sie die Aussprache beeinflussen. Folgende Angaben sind erlaubt:
none = Ton aus und keine Sprechpause (Element wird quasi übergangen). normal = Normale, sprachabhängige Aussprache. spell-out = Buchstabierte Aussprache (sinnvoll z.B. für Abkürzungen).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pause-before</title>
</head><body lang="de">
<h1>Text mit Pausen</h1>
<p style="pause-before:300ms">Text mit 300ms Pause davor</p>
<p style="pause-before:600ms">Text mit 600ms Pause davor</p>
<p style="pause-before:1s">Text mit 1s Pause davor</p>
<p style="pause-before:2s">Text mit 2s Pause davor</p>
</body></html>
Erläuterung:
Mit pause-before: können Sie eine vorangehende Sprechpause erzwingen. Erlaubt ist eine Zeitangabe in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann ist die Sprechpause abhängig von der (ebenfalls einstellbaren) Sprechgeschwindigkeit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pause-after</title>
</head><body lang="de">
<h1>Text mit Pausen</h1>
<p style="pause-after:200ms">Text mit 200ms Pause danach</p>
<p style="pause-after:400ms">Text mit 400ms Pause danach</p>
<p style="pause-after:1s">Text mit 1s Pause danach</p>
<p style="pause-after:3s">Text mit 3s Pause danach</p>
<p>Abschließender Text</p>
</body></html>
Erläuterung:
Mit pause-after: können Sie eine nachfolgende Sprechpause erzwingen. Erlaubt ist eine Zeitangabe in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann ist die Sprechpause abhängig von der (ebenfalls einstellbaren) Sprechgeschwindigkeit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pause</title>
</head><body lang="de">
<h1>Text mit Pausen</h1>
<p style="pause:500ms">Text mit 500ms Pause davor und danach</p>
<p>Text</p>
<p style="pause:1300ms">Text mit 1300ms Pause davor und danach</p>
<p>Text</p>
<p style="pause:1s 2s">Text mit 1s Pause davor und 2s Pause danach</p>
<p>Abschließender Text</p>
</body></html>
Erläuterung:
Mit pause: können Sie ein Element durch Sprechpausen davor und danach abgrenzen. Wenn Sie einen Wert angeben, bedeutet dieser Wert sowohl die Sprechpause vor dem Element als auch nach dem Element. Sie können auch zwei Werte angeben, durch ein Leerzeichen getrennt. Dann bedeutet der erste Wert die Sprechpause vor dem Element und der zweite die Sprechpause danach. Erlaubt sind Zeitangaben in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann sind die Sprechpause abhängig von der (ebenfalls einstellbaren) Sprechgeschwindigkeit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>cue-before</title>
</head><body lang="de">
<h1>Text mit Geräusch</h1>
<p style="cue-before:url(cue.wav)">Freuen Sie sich!</p>
</body></html>
Erläuterung:
Mit cue-before:url([Dateiname]) können Sie ein Erkennungssignal voranschicken. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>cue-after</title>
</head><body lang="de">
<p style="cue-after:url(cue.wav)">Und jetzt folgt ein:</p>
</body></html>
Erläuterung:
Mit cue-after:url([Dateiname]) können Sie ein Erkennungssignal an ein Element anschließen. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>cue</title>
</head><body lang="de">
<h1>Text mit Geräusch</h1>
<p style="cue:url(cue.wav)">oh oh, so ein oh oh!</p>
</body></html>
Erläuterung:
Mit cue:url([Dateiname]) können Sie ein Element in zwei gleiche Erkennungssignale einschließen. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.
Sie können für ein Element oder einen Bereich einen Hintergrund-Sound definieren, der so lange wiederholt wird, bis die Ausgabe des Elements oder Bereichs abgeschlossen ist. Das kann etwa eine Geräuschkulisse oder eine Melodie sein.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>play-druring</title>
</head><body lang="de">
<p style="play-during:url(play_during.mid) mix">Während dieser Text gesprochen wird,
ertönt im Hintergrund ein flotter Ragtime als MIDI-Datei. Damit Sie in den Genuß
des gesamten Stücks kommen, müßte ich Ihnen jetzt eine lange Geschichte erzählen.
Aber ich denke, Sie gewinnen auch ohne eine solche Geschichte einen Eindruck davon,
wie Hintergrundmusik während der Sprachausgabe eines Textes wirkt.
Vielen Dank für Ihre Aufmerksamkeit!</p>
</body></html>
Erläuterung:
Mit play-during:url([Datei]) können Sie einen Hintergrund-Sound definieren. Damit ein echter Hintergrundeffekt zustande kommt, müssen Sie außerdem, durch ein Leerzeichen getrennt, das Wort mix dahinter notieren. Wenn Sie dieses Wort weglassen, übertönt der Hintergrund-Sound die Ausgabe des Inhalts. Wenn sich die Sound-Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden.
Hinter der Angabe der Datei können Sie noch eine der folgenden Angaben notieren:
mix = Falls das Elternelement ebenfalls Hintergrund-Sound hat, werden beide Sounds vermischt. repeat = Wenn die Sound-Datei kürzer ist als es dauert, den Text des Elements zu sprechen, wird der Abspielvorgang so oft wiederholt, bis der Text zuende gesprochen ist. auto = Falls das Elternelement ebenfalls Hintergrund-Sound hat, wird dieser nicht neu abgespielt, sondern spielt weiter ab.
Anstelle einer Sound-Datei können Sie auch einfach nur none angeben. Das ist sinnvoll, wenn das Elternelement Hintergrund-Sound abspielt. Für die Sprachausgabe des aktuellen Elements können Sie die Ausgabe dann unterbrechen.
Wenn das Sprachausgabesystem räumliches Hören (mindestens stereophon, möglichst Surround-Sound) unterstützt, können Sie die Herkunftsrichtung der Sprechstimme bestimmen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>azimuth</title>
</head><body lang="de">
<p style="azimuth:left-side">Diese Stimme hier sollte von links kommen.</p>
<p style="azimuth:left-side behind">Diese Stimme hier sollte von links hinten kommen.</p>
<p style="azimuth:center">Diese Stimme hier sollte ganz aus der Mitte kommen.</p>
<p style="azimuth:right-side behind">Diese Stimme hier sollte von rechts hinten kommen.</p>
<p style="azimuth:right-side">Diese Stimme hier sollte von rechts kommen.</p>
</body></html>
Erläuterung:
Mit azimuth: können Sie die räumliche Herkunftsrichtung der Sprechstimme für ein Element oder einen Bereich bestimmen. Sie können dazu entweder eine Gradangabe für die gedachte Richtung notieren oder ein erlaubtes Schlüsselwort. Gradangaben haben Werte zwischen -360 und 360 und müssen mit der Einheitenbezeichnung deg (degree = Grad) abgeschlossen werden. Folgende Schlüsselwörter sind erlaubt:
left-side = Von ganz links (entspricht 270deg). left-side behind = Von ganz links hinten (entspricht 270deg). far-left = Von weiter links (entspricht 300deg). far-left behind = Von weiter links hinten (entspricht 240deg). left = Von links (entspricht 320deg). left behind = Von links hinten (entspricht 220deg). center-left = Von Mitte links (entspricht 340deg). center-left behind = Von Mitte links hinten (entspricht 200deg). center = Von der Mitte (entspricht 0deg). center behind = Von Mitte hinten (entspricht 180deg). center-right = Von Mitte rechts (entspricht 20deg). center-right behind = Von Mitte rechts hinten (entspricht 160deg). right = Von rechts (entspricht 40deg). right behind = Von rechts hinten (entspricht 140deg). far-right = Von weiter rechts (entspricht 60deg). far-right behind = Von weiter rechts hinten (entspricht 120deg). right-side = Von ganz rechts (entspricht 90deg). right behind = Von ganz rechts hinten (entspricht 90deg).
Wenn Sie mit Gradangaben arbeiten, können Sie die genannten Angaben als Richtwerte für die exakt gewünschte Richtung verwenden. Anstelle des Schlüsselwortes behind können Sie auch die Schlüsselworte leftwards und rightwards benutzen. Mit leftwards richten Sie die Stimmherkunft weiter links aus (um 20deg gegen den Uhrzeigersinn), mit rightwards weiter rechts (um 20deg im Uhrzeigersinn).
Wenn das Sprachausgabesystem räumliches Hören (möglichst Surround-Sound) unterstützt, können Sie die Herkunftsrichtung der Sprechstimme zwischen oben und unten bestimmen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>elevation</title>
</head><body lang="de">
<p style="elevation:below">Diese Stimme sollte von unten kommen.</p>
<p style="elevation:higher">Diese Stimme sollte von weiter oben kommen.</p>
</body></html>
Erläuterung:
Mit elevation: können Sie die vertikale Herkunftsrichtung der Sprechstimme bestimmen. Sie können dazu entweder eine Gradangabe für die gedachte Richtung notieren oder ein erlaubtes Schlüsselwort. Gradangaben haben Werte zwischen -90 (von ganz unten) und 90 (von ganz oben) und müssen mit der Einheitenbezeichnung deg (degree = Grad) abgeschlossen werden. Folgende Schlüsselwörter sind erlaubt:
below = Von unten (entspricht -90 deg). level = Von der Mitte (entspricht 0 deg). above = Von oben (entspricht 90 deg). higher = Von weiter oben (entspricht 10 deg relativ zur aktuellen Position). lower = Von weiter unten (entspricht -10 deg relativ zur aktuellen Position).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speech-rate</title>
</head><body lang="de">
<p style="speech-rate:fast">Das ist ein ziemlich schnell gesprochener Text.
Hoffentlich verstehen Sie alles, was da gesagt wird,
auch wenn es nicht von Belang ist.</p>
<p style="speech-rate:x-slow">Das ist ein gaaannnz langsam gesprochener Text. Gute Nacht!</p>
</body></html>
Erläuterung:
Mit speech-rate: können Sie die Sprechgeschwindigkeit bestimmen. Erlaubt sind folgende Angaben:
x-slow = Ganz langsam. slow = Langsam. slower = Etwas langsamer als normal. medium = Normal. faster = Etwas schneller als normal. fast = Schnell. x-fast = Ganz schnell.
Anstelle der Schlüsselwörter können Sie auch numerische Werte angeben. Ein numerischer Wert bedeutet die mittlere Anzahl Wörter pro Minute. Probieren Sie als Anhaltspunkt Werte um 100.
Sie können die Art der Stimme beeinflussen. Dies entspricht etwa dem Beeinflussen von Schriftarten bei visueller Darstellung. Ob die Angabe interpretiert werden kann, hängt neben der interpretierenden Software von den Hardware-Fähigkeiten des Sprachausgabesystems ab.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>voice-family</title>
</head><body lang="de">
<p style="voice-family:female">Dieser Text wird von einer Frau vorgelesen.</p>
<p style="voice-family:male">Dieser Text wird von einem Mann vorgelesen.</p>
<p style="voice-family:old female">Dieser Text wird von einer alten Frau vorgelesen.</p>
<p style="voice-family:old male">Dieser Text wird von einem alten Mann vorgelesen.</p>
<p style="voice-family:young female">Dieser Text wird von einer jungen Frau vorgelesen.</p>
<p style="voice-family:young male">Dieser Text wird von einem jungen Mann vorgelesen.</p>
<p style="voice-family:child female">Dieser Text wird von einem weiblichen Kind vorgelesen.</p>
<p style="voice-family:child male">Dieser Text wird von einem männlichen Kind vorgelesen.</p>
</body></html>
Erläuterung:
Mit voice-family: können Sie die Art der Sprechstimme festlegen. Folgende generische Angaben werden vom W3-Konsortium z.B. vorgeschlagen:
male = Männerstimme female = Frauenstimme old = alte Stimme young = junge Stimme child = Kinderstimme
Die Werte dürfen kombiniert werden. Daneben können Sie auch spezifische Angaben notieren, etwa MeineEhefrau. Die entsprechende Stimme muss dem Sprachausgabesystem in digitaler Form bekannt sein.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pitch</title>
</head><body lang="de">
<p style="pitch:x-low">Diese Stimme spricht so tief wie möglich zu Ihnen.
Lassen Sie sich trotzdem nicht einschüchtern.</p>
<p style="pitch:4000Hz">Diese Stimme spricht so hoch wie möglich zu Ihnen.
Schnatterdischnatterdischnatterdischnatt.</p>
</body></html>
Erläuterung:
Mit pitch: können Sie die Sprechhöhe festlegen. Erlaubt ist entweder die Angabe der mittleren Sprechhöhe als Frequenz (in hz für Hertz oder khz für Kilohertz) oder eine der folgenden Angaben:
x-low = Ganz tief. low = Tief. medium = Normal. high = Hoch. x-high = Ganz hoch.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pitch-range</title>
</head><body lang="de">
<p style="pitch-range:20">Dies ist ein ziemlich öder Text,
deshalb wird der mit ziemlich monotoner Stimme gesprochen.</p>
<p style="pitch-range:80">Obwohl auch dies ein ziemlich öder Text ist,
wird er dennoch mit sehr angeregter Stimme vorgetragen.</p>
</body></html>
Erläuterung:
Mit pitch-range: können Sie die Sprechweise bestimmen. Normale Sprechweise entspricht einem Wert von 50. Ein tieferer Wert bedeutet eine monotone, modulationsarme Stimme, ein hoher Wert eine angeregte, modulationsreiche Stimme.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>stress</title>
</head><body lang="de">
<p style="stress:10">Ich habe alle Zeit der Welt. Deshalb bin ich auch
ganz gelassen und spreche nur mit einem Stress-Wert von 10.</p>
<p style="stress:90">Immerzu ist alles gleich vorbei. Nie kommt man zu etwas.
Alles ist grausam. Deshalb rede ich auch so hastig.
Ein Stress-Wert von 90 wurde mir vorgegeben, stellen Sie sich das mal vor!</p>
</body></html>
Erläuterung:
Mit stress: können Sie festlegen, wie hastig die Stimme ist. Ein Wert von 50 ist normal. Ein höherer Wert bedeutet eine hastige, aufgeregte Stimme, ein niedriger Wert eine in sich ruhende, selbstsichere Stimme.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>richness</title>
</head><body lang="de">
<p style="richness:85">Ich bin reich. Ich bin schön.
Deshalb rede ich laut und klar, mit einer Stimmgewalt von 85.</p>
<p style="richness:15">Ich bin arm. Ich bin häßlich.
Deshalb hab ich auch so eine dünne Stimme. Ihre Gewalt hat nur einen Wert von 15.</p>
</body></html>
Erläuterung:
Mit richness: können Sie die Stimmgewalt festlegen. Normalwert ist 50. Ein höherer Wert bedeutet eine gewaltige, beherrschende Stimme, ein niedriger Wert eine dünne, unsichere Stimme.
Sie können bestimmen, dass bei einem Textbereich alle darin vorkommenden Satzzeichen wie Punkt, Komma, Ausrufezeichen usw. explizit genannt werden, also z.B. "Dies ist ein Satz - Punkt".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speak-punctuation</title>
</head><body lang="de">
<p style="speak-punctuation:code">Hören Sie mal! - Oder sind Sie schwerhörig?
Hier - und nur hier gibt's was zusätzlich auf die Ohren:
nämlich exklusiv ausgesuchte, explizit ausgesprochene Satzzeichen.</p>
</body></html>
Erläuterung:
Mit speak-punctuation: haben Sie Einfluss auf die Aussprache von Satzzeichen. Folgende Angaben sind erlaubt:
code = Satzzeichen mit aussprechen. none = Satzzeichen nicht mit aussprechen (Normaleinstellung).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speak-numeral</title>
</head><body lang="de">
<p>Rosis Telefonnummer lautet <b style="speak-numeral:digits">32168</b>.</p>
<p>Mit ihrem Gewerbe hat Rosi schon <b style="speak-numeral:continuous">32168</b> Dollar verdient.</p>
</body></html>
Erläuterung:
Mit speak-numeral: können Sie festlegen, wie Zahlenfolgen ausgesprochen werden. Erlaubt sind folgende Angaben:
digits = ziffernweise, 456 also etwa als "vier-fünf-sechs". continuous = als Zahl, 456 also etwa "vierhundertsechsundfünfzig".
Als absehbar war, dass aurale Stylesheets kein normativer Bestandteil von CSS 2.1 werden würden, entschloss man sich bei Opera, zusätzlich unterstütze Eigenschaften mit einem herstellerspezifischen Kürzel zu versehen. Opera interpretiert folgende Eigenschaften:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>-xv-voice-*</title>
</head><body>
<p><code>-xv-voice-volume</code></p>
<p style="-xv-voice-volume:silent">This text is spoken with the volume setting <b>silent</b></p>
<p style="-xv-voice-volume:x-loud">This text is spoken with the volume setting <b>x-loud</b></p>
<p style="-xv-voice-volume:20">This text is spoken with the volume setting <b>20</b></p>
<p style="-xv-voice-volume:100">This text is spoken with the volume setting <b>100</b></p>
<p><code>-xv-voice-rate</code></p>
<p style="-xv-voice-rate:fast">This text is read out fairly quickly. I hope you can still
understand everything, even though, of course, it is nothing important.</p>
<p style="-xv-voice-rate:x-slow">This text is read out very slowly. Good night!</p>
<p><code>-xv-voice-pitch</code></p>
<p style="-xv-voice-pitch:x-low">This text is read out with a voice that is as deep as possible.
Please try not to be intimidated.</p>
<p style="-xv-voice-pitch:4000Hz">This text is read out with a voice that ist very high.
Does it get on your nerves?</p>
<p><code>-xv-voice-pitch-range</code></p>
<p style="-xv-voice-pitch-range:20">This text is very boring,
and that is why it is read with a fairly boring, monotonous voice.</p>
<p style="-xv-voice-pitch-range:4000">Although this text is also quite boring,
it is read with a very animated voice.</p>
<p><code>speak:-xv-digits</code></p>
<p>To get through to my stockbroker, I dial <b style="speak:-xv-digits">32168</b>.</p>
<p>In the past twelve months, I made a total of <b style="-xv-digits:continous">32168</b>
Dollars with shares.</p>
</body></html>
Beachten Sie:
Herstellerspezifische, noch nicht standardisierte Eigenschaften werden mittels Binde- oder Unterstrichen (Beispiel: -hersteller-eigenschaft:wert) als solche deklariert.
Für Textblöcke oder Textabsätze gibt es absatztypische Eigenschaften. Absätze können beispielsweise links- oder rechtsbündig ausgerichtet sein. Bei Tabellenzellen oder anderen Elementen, die eine berechnete oder definierte Höhe haben können und mehr Platz lassen als der Text darin einnimmt, wird häufig vertikale Ausrichtung oben, mittig oder untenbündig erforderlich.
Zu den typischen Eigenschaften der Absatzformatierung gehören ferner die Merkmale Einzug und Zeilenhöhe. Und schließlich auch noch die Angabe, wie der Fließtext innerhalb des Absatzes umbrochen werden soll: ob gar nicht, automatisch, oder so, wie er im Editor eingegeben wurde.
Sie können für einen mehrzeiligen Fließtext bestimmen, dass die erste Zeile eingerückt wird. Dieses Gestaltungselement ist in Büchern und Zeitschriften sehr verbreitet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-indent</title>
</head><body>
<p style="text-indent:1em;">Dieser Textabsatz hat eine
Texteinrückung von 1em. Texteinrückungen dieser Art sind an
die Ästhetik von Büchern oder Zeitungen angelehnt, wo
häufig mit dieser Formatierung gearbeitet wird. Damit das auch
wirklich sichtbar wird, enthält dieser Textabsatz
schließlich noch diesen überflüssigen Satz, der
sich aber hoffentlich wenigstens flüssig liest.</p>
<!--usw.-->
</body></html>
Erläuterung:
Mit text-indent: können Sie eine Einrückung für die erste Zeile bestimmen. Erlaubt ist eine numerische Angabe.
Beachten Sie:
Mit einem negativen Wert für text-indent bewirken Sie eine Textausrückung in der ersten Fließtextzeile.
Sie können für Elemente mit viel Fließtext die Zeilenhöhe bestimmen. Diese Angabe ist vor allem in Verbindung mit einer Angabe zur Schriftgröße interessant.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>line-height</title>
</head><body>
<p style="line-height:1.4em; font-size:1em; margin-left:20%; margin-right:20%">
Die Zeilenhöhe ist ein altbekanntes DTP-Feature zur Formatierung von
Absätzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der
typografischen Wirkung von Text hilfreich. ... </p>
</body></html>
Erläuterung:
Mit line-height: können Sie die Zeilenhöhe bestimmen. Erlaubt ist eine numerische Angabe. Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich dabei auf die Schriftgröße des Elements, für das die Zeilenhöhe bestimmt wird.
Beachten Sie:
Bei erzwungener Zeilenhöhe ist es möglich, dass ein interpretierendes Programm dieser Angabe den Vorrang einräumt und Elemente abschneidet, die höher sind, beispielsweise eine im Fließtext referenzierte Grafik.
Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile, im Verhältnis zueinander ausrichten.
Mit vertical-align: können Sie die vertikale Ausrichtung bestimmen. Folgende Angaben sind möglich:
top = obenbündig ausrichten. middle = mittig ausrichten. bottom = untenbündig ausrichten. baseline = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt). sub = tieferstellen (ohne die Schriftgröße zu reduzieren). super = höherstellen (ohne die Schriftgröße zu reduzieren). text-top = am oberen Schriftrand ausrichten. text-bottom = am unteren Schriftrand ausrichten.
Bei Fließtext ist auch eine prozentuale Angabe möglich. Die Ausrichtung orientiert sich dann an der elementeigenen Zeilenhöhe.
Das folgende Bild veranschaulicht das Modell der vertikalen Ausrichtung:
Die gelben Kästen stellen Kindelemente des großen Kastens dar, die freistehenden schwarzen Texte stellen Zeicheninhalt des großen Kastens dar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-align</title>
</head><body>
<p style="text-align:left; margin-left:50px; margin-right:50px">Der Absatz,
den Sie gerade lesen, wurde mit <b>text-align</b> linksbündig ausgerichtet.
Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch,
damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen.<br>
Noch eine Textzeile<br>
Noch eine Textzeile</p>
<!--usw.-->
</body></html>
Erläuterung:
Mit text-align: können Sie Textinhalte von Block-Elementen ausrichten. Folgende Angaben sind möglich:
left = linksbündig ausrichten (Voreinstellung). center = zentriert ausrichten. right = rechtsbündig ausrichten. justify = als Blocksatz ausrichten.
Beachten Sie:
text-align bezieht sich nicht nur auf Textinhalte, sondern auf alle inline dargestellten Elemente (wie z.B. <img>). Der Internet Explorer wendet diese Eigenschaft jedoch fälschlich auch auf Block-Elemente an.
Block-Elemente selbst werden über margin ausgerichtet, wobei gleiche Werte für margin-left und margin-right eine Zentrierung bewirken können.
Eine ehemals eingeführte CSS-Eigenschaft namens alignment ist mittlerweile aus dem CSS-Standard verschwunden. Verwenden Sie nur noch text-align.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>white-space</title>
<style type="text/css">
#editor { white-space:pre; }
#langezeile { white-space:nowrap; }
</style>
</head><body>
<p id="editor">
Der Absatz, den Sie gerade lesen,
wurde als predefiniert definiert.
Zeilenumbrüche sollten dabei so interpretiert
werden, wie sie im Editor eingegeben wurden.</p>
<p id="langezeile">Der Absatz, den Sie gerade lesen, darf nicht
umbrochen werden. Es sollte kein automatischer Zeilenumbruch erfolgen. Bei
diesem längeren Text müssen Sie vermutlich quer scrollen, um alles zu lesen.</p>
</body></html>
Erläuterung:
Mit white-space: können Sie das Verhalten für den Zeilenumbruch festlegen. Folgende Angaben sind möglich:
normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>). pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>). nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags.
Mit CSS 2.1 werden noch die folgenden Werte eingeführt:
pre-wrap = wie pre, jedoch erfolgt ein Umbruch, wenn die Breite der Box zur Anzeige der Zeile nicht ausreicht. pre-line = Mehrere Whitespaces werden wie bei normal zusammengefasst, es erfolgt aber ein Zeilenumbruch wie bei pre-wrap.
Beachten Sie:
Der Internet Explorer 5.5 interpretiert nur den Wert nowrap, nicht den Wert pre. Netscape 4.x interpretiert den Wert pre, nicht aber nowrap. Erst Internet Explorer 6 und Netscape 6 beherrschen alle Angaben.
Sie können mit Hilfe von Stylesheet-Angaben die gleichen Formatierungen erzwingen, wie es in den einleitenden HTML-Tags <ul> und <ol> mit Hilfe von zusätzlichen Attributen möglich ist. Die entsprechenden Attribute sind in HTML 4.0 jedoch alle als "deprecated" ausgewiesen, also als künftig unerwünscht. Stattdessen sollen die hier beschriebenen CSS-Eigenschaften verwendet werden, um solche Listen zu formatieren. Neben den Möglichkeiten, die HTML bietet, stehen auch erweiterte Möglichkeiten zum Formatieren von Listen zur Verfügung, etwa die Möglichkeit, Listen aus- statt einzurücken oder eine eigene Grafik als Aufzählungssymbol zu definieren.
Für Aufzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für nummerierte Liste können Sie die Darstellung der Durchnummerierung beeinflussen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style-type</title>
</head><body>
<h4>Aufzählungsliste <ul> mit Darstellungstyp <i>disc</i></h4>
<ul style="list-style-type:disc">
<li>Probieren geht über Studieren</li>
<!--usw.-->
</ul>
<h4>Aufzählungsliste <ul> mit Darstellungstyp <i>circle</i></h4>
<ul style="list-style-type:circle">
<li>Probieren geht über Studieren</li>
<!--usw.-->
</ul>
<!--usw.-->
<h4>Nummerierte Liste <ol> mit Darstellungstyp <i>decimal</i></h4>
<ol style="list-style-type:decimal">
<li>Tagesordnung</li>
<!--usw.-->
</ol>
<h4>Nummerierte Liste <ol> mit Darstellungstyp <i>lower-roman</i></h4>
<ol style="list-style-type:lower-roman">
<li>Tagesordnung</li>
<!--usw.-->
</ol>
<!--usw.-->
</body></html>
Erläuterung:
Mit list-style-type: können Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist eine der folgenden Angaben.
decimal = für ol-Listen: Nummerierung 1.,2.,3.,4. usw. lower-roman = für ol-Listen: Nummerierung i.,ii.,iii.,iv. usw. upper-roman = für ol-Listen: Nummerierung I.,II.,III.,IV. usw. lower-alpha oder lower-latin = für ol-Listen: Nummerierung a.,b.,c.,d. usw. upper-alpha oder upper-latin = für ol-Listen: Nummerierung A.,B.,C.,D. usw. disc = für ul-Listen: gefüllter Kreis als Bullet-Zeichen circle = für ul-Listen: leerer Kreis als Bullet-Zeichen square = für ul-Listen: rechteckiges Bullet-Zeichen none = kein Bullet-Zeichen, keine Nummerierung
Die folgenden, neueren CSS-Angaben sind ebenfalls möglich, werden bislang jedoch nur von Netscape ab Version 6.0, Firefox und teilweise von Opera, Konqueror und Safari interpretiert:
lower-greek = für ol-Listen: Nummerierung mit den griechischen Buchstaben: α., β., γ., δ. usw. hebrew = für ol-Listen: Nummerierung mit den hebräischen Buchstaben decimal-leading-zero = für ol-Listen: Nummerierung mit führender 0: 01.,02.,03.,04., ... 98.,99. usw. cjk-ideographic = für ol-Listen: Nummerierung mit ideographischen Zeichen hiragana = für ol-Listen: Nummerierung in Japanisch (a, i, u, e, o, ka, ki, ... ) katakana = für ol-Listen: Nummerierung in Japanisch (A, I, U, E, O, KA, KI, ... ) hiragana-iroha = für ol-Listen: Nummerierung in Japanisch (i, ro, ha, ni, ho, he, to, ... ) katakana-iroha = für ol-Listen: Nummerierung in Japanisch (I, RO, HA, NI, HO, HE, TO, ... )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style-position</title>
</head><body>
<h4>Nummerierte Liste <ol> mit Listeneinrückung <i>inside</i></h4>
<ol style="list-style-position:inside">
<li>Tagesordnung<br>
zweizeilig</li>
<!--usw.-->
</ol>
<h4>Nummerierte Liste <ol> mit Listeneinrückung <i>outside</i></h4>
<ol style="list-style-position:outside">
<li>Tagesordnung<br>
zweizeilig</li>
<!--usw.-->
</ol>
</body></html>
Erläuterung:
Mit list-style-position: können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style-image</title>
</head><body>
<h4>Aufzählungsliste <ul> mit eigener Bullet-Grafik</h4>
<ul style="list-style-image:url(list_style_image.gif)">
<li> <a href="../../../html/index.htm"><b>HTML/XHTML</b></a><br>
Die Sprache des Web</li>
<!--usw.-->
</ul>
</body></html>
Erläuterung:
Mit list-style-image:url([Dateiname]) können Sie eine Grafik für das eigene Bullet-Zeichen angeben. Anstatt einer Grafikreferenz ist auch der Wert none erlaubt. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF-, PNG- oder JPG-Grafiken benutzen.
Im Beispiel wird vorausgesetzt, dass sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style</title>
</head><body>
<h4>Nummerierte Liste <ol> mit den Angaben <i>lower-roman inside</i></h4>
<ol style="list-style:lower-roman inside">
<li>bei Anette vorbeischauen<br>
und Grüße an Gundula ausrichten</li>
<!--usw.-->
</ol>
</body></html>
Erläuterung:
Mit list-style: können Sie zusammenfassende Angaben zum Aussehen von Aufzählungslisten oder nummerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrückung sowie zur Bullet-Grafik mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.
Beachten Sie:
Netscape 4.x interpretiert nur einen Teil dieser Angaben.
Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgrößen, Schriftfarben, Schriftgewicht, Zeichen- und Wortabständen usw. zu verstehen. Sinnvoll sind solche Angaben für alle HTML-Elemente, die Text enthalten können. Dazu gehören alle Elemente, die im Kapitel Absatztypen und Text beschrieben werden, aber auch beispielsweise Elemente für Tabellen. Auch auf das html- und das body-Element lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall gelten die Angaben für alle Text-Elemente der HTML-Datei.
Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.
Bei der hier beschriebenen Eigenschaft können Sie Schriftarten angeben, ohne sich darum kümmern zu müssen, ob und wie die Schriftart beim Anwender angezeigt werden kann. Falls die angegebene Schriftart nicht angezeigt werden kann, bleibt die Angabe wirkungslos. Eine Möglichkeit, Schriftarten durch Angabe einer bestimmten Schriftarten-Datenquelle zu erzwingen, wird im Abschnitt Schriftformatierung mit Schriftartendatei beschrieben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-family</title></head>
<body>
<p><span style="font-family:'Times New Roman',Times,serif">kleiner Beispieltext
in Times New Roman</span><br>
<span style="font-family:'Times New Roman',Times,serif; font-size:200%">großer Beispieltext
in Times New Roman</span></p>
<p><span style="font-family:Verdana">kleiner Beispieltext
in Verdana</span><br>
<span style="font-family:Verdana; font-size:200%">großer Beispieltext
in Verdana</span></p>
<!--usw.-->
</body></html>
Erläuterung:
Mit font-family: können Sie eine oder mehrere Schriftarten bestimmen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.
Trennen Sie mehrere Schriftartennamen durch Kommata. Das W3-Konsortium empfiehlt, Schriftartnamen, die Leerzeichen enthalten, in Anführungszeichen zu setzen, also z.B. font-family:"Century Schoolbook",Times. Sie können dazu die doppelten oder die einfachen Anführungszeichen (Hochkomma) verwenden. Falls die CSS-Eigenschaften wie im obigen Beispiel innerhalb eines style-Attributs im HTML-Quelltext vorkommen, dürfen Sie nicht die gleichen Anführungszeichen verwenden wie bei der HTML-Attributzuweisung.
Im obigen Beispiel sehen Sie, dass die Wertzuweisung an das style-Attribut wie in doppelten Anführungszeichen steht. Innerhalb davon werden für 'Times New Roman' deshalb einfache Anführungszeichen verwendet, um Konflikte zu vermeiden.
Generische Schriftfamilien
Folgende generische Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen:
serif = eine Schriftart mit Serifen, sans-serif = eine Schriftart ohne Serifen, cursive = eine Schriftart für Schreibschrift, fantasy = eine Schriftart für ungewöhnliche Schrift, monospace = eine Schriftart mit dicktengleichen Zeichen.
Es empfiehlt sich, solche generische Schriftarten als letzte Angabe einer Wertzuweisung an font-family zu notieren - wie im ersten der obigen Beispiele. Damit bieten Sie dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls diese auf dem System nicht vorhanden ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-variant</title></head>
<body>
<p><span style="font-variant:normal">kleiner Beispieltext
mit Schriftvariante normal</span><br>
<span style="font-variant:normal; font-size:200%">großer
Beispieltext mit Schriftvariante normal</span></p>
<p><span style="font-variant:small-caps">kleiner Beispieltext
mit Schriftvariante small-caps</span><br>
<span style="font-variant:small-caps; font-size:200%">großer
Beispieltext mit Schriftvariante small-caps</span></p>
</body></html>
Erläuterung:
Mit font-variant: können Sie die Schriftvariante bestimmen. Folgende Angaben sind möglich:
small-caps = Kapitälchen. normal = normale Schriftvariante.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-size</title></head>
<body>
<p>
<span style="font-size:1.2em">Beispieltext mit Schriftgröße 1.2em</span><br>
<!-- usw. -->
</p></body></html>
Erläuterung:
Mit font-size: können Sie die Schriftgröße bestimmen. Erlaubt ist eine numerische Angabe. Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich auf die Schriftgröße des Elternelements.
Alternativ zu numerischen Angaben sind auch absolute und relative Schlüsselworte möglich.
Absolut: xx-small = winzig. x-small = sehr klein. small = klein. medium = mittel. large = groß. x-large = sehr groß. xx-large = riesig.
Relativ: smaller = kleiner als im Elternelement. larger = größer als im Elternelement.
Beachten Sie:
Für die Ausgabe auf dem Bildschirm sind vor allem relative Einheiten wie em, ex, Prozentwerte oder Schlüsselworte geeignet, absolute Einheiten wie pt, cm usw. sollten Drucklayouts vorbehalten sein. Eine Sonderstellung nimmt die relative Einheit px ein, da sich bei deren Verwendung Schriftgrößen im Internet Explorer nicht mehr verändern lassen. Im Sinne der Benutzbarkeit sollten Sie daher auf diese Einheit nach Möglichkeit verzichten.
Sie können die Angabe zur Schriftgröße mit der Angabe zur Zeilenhöhe kombinieren, indem Sie beide Angaben innerhalb der Eigenschaft font mit der folgenden Syntax notieren:
p { font:1.2em/1.5em }
In dem Beispiel ist 1.2em die Schriftgröße und 1.5em die Zeilenhöhe. Bei dieser Notationsweise bezeichnet der Wert vor dem Schrägstrich stets die Schriftgröße und der Wert hinter dem Schrägstrich stets die Zeilenhöhe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font</title>
<style type="text/css">
#Text01 { font:bold .9em Times; }
#Text02 { font:italic 1cm Helvetica; }
#Text03 { font:small-caps 110% Verdana; }
#Text04 { font:2em/180% Courier; }
</style></head>
<body>
<p id="Text01">Beispieltext mit Schrift: bold .9em Times</p>
<p id="Text02">Beispieltext mit Schrift: italic 1cm Helvetica</p>
<p id="Text03">Beispieltext mit Schrift: small-caps 110% Verdana</p>
<p id="Text04">Beispieltext mit Schrift: 2em/180% Courier<br>und einem Zeilenumbruch</p>
</body></html>
Erläuterung:
Mit font: können Sie verschiedene Schriftformatierungen kombinieren. Erlaubt sind die üblichen Wertangaben zu den erlaubten Eigenschaften, die in font zusammengefasst sind. Es müssen nicht alle Eigenschaften angegeben werden, denn lediglich font-size und font-family sind verpflichtend. Die in der Zusammenfassung verwendete Reihenfolge ist aber einzuhalten; font-family wäre also beispielsweise als letzte Eigenschaft zu notieren. Die Eigenschaften font-size und line-height sind, sofern sie beide notiert werden, wie im vierten Beispiel mit einem Schrägstrich zu trennen. Der erste Wert definiert font-size, der zweite line-height. Wird an dieser Stelle lediglich ein Wert angegeben, so steht dieser für font-size, da line-height optional ist.
Beachten Sie:
Zunächst werden alle font-Eigenschaften auf ihren Ausgangswert zurückgesetzt und somit nur die ausdrücklich definierten Eigenschaften angewandt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>word-spacing</title>
</head><body>
<p>
<span style="word-spacing:0.5em">Beispieltext mit Wortabstand 0.5em</span><br>
<span style="word-spacing:1em">Beispieltext mit Wortabstand 1em</span><br>
<!--usw.-->
</p>
</body></html>
Erläuterung:
Mit word-spacing: können Sie den Wortabstand bestimmen. Erlaubt sind numerische Angaben, jedoch keine Prozentangaben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>letter-spacing</title>
</head><body>
<p>
<span style="letter-spacing:0.1em">Beispieltext mit Zeichenabstand 0.1em</span><br>
<span style="letter-spacing:0.3em">Beispieltext mit Zeichenabstand 0.3em</span><br>
<!--usw.-->
</p>
</body></html>
Erläuterung:
Mit letter-spacing: können Sie den Zeichenabstand bestimmen. Erlaubt sind numerische Angaben, jedoch keine Prozentangaben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-decoration</title>
<style type="text/css">
a:link { text-decoration:none; }
a:visited { text-decoration:line-through; }
a:hover { text-decoration:underline; }
a:active { text-decoration:underline; }
a:focus { text-decoration:blink; }
</style>
</head><body>
<p>
Sie kennen sicher die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a>.<br>
Aber kennen Sie auch die <a href="../../../perl/module/cpanmodule.htm">CPAN-Module</a>?<br>
Oder die <a href="../../../diverses/sprachenlaenderkuerzel.htm">Sprachen- und Länderkürzel</a>?<br>
Mit der <a href="../schrift.htm#text_decoration">Textdekoration</a> sind Sie bereits vertraut?
</p>
</body>
</html>
Erläuterung:
Mit text-decoration: können Sie die zusätzliche Formatierung bestimmen. Folgende Angaben sind möglich:
Internet Explorer und Konqueror interpretieren die Angabe blink nicht. Netscape 4.x interpretiert die Angabe overline noch nicht, Netscape 6.0 jedoch schon.
Mit dieser Eigenschaft können Sie in einem Textbereich Klein- oder Großbuchstaben oder Kapitälchen erzwingen, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-transform</title>
</head><body>
<p><span style="text-transform:capitalize">kleiner Beispieltext
mit Text-Transformation capitalize</span><br>
<span style="text-transform:capitalize; font-size:200%">großer Beispieltext
mit Text-Transformation capitalize</span></p>
<!--usw.-->
</body>
</html>
Mit text-transform: können Sie die Transformation bestimmen. Folgende Angaben sind möglich:
capitalize = Wortanfänge als Großbuchstaben. uppercase = Nur Großbuchstaben. lowercase = Nur Kleinbuchstaben. none = normal (keine Text-Transformation).
Beachten Sie:
Der Internet Explorer 4 interpretiert die Angabe capitalize noch nicht. Nicht jeder Browser kennt die korrekten Umformungsregeln für Großbuchstaben bei der Angabe uppercase, so kann es z.B. geschehen, dass das ß nicht zu SS umgewandelt wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>color</title>
</head><body>
<p><span style="color:blue">kleiner Beispieltext mit Farbe <strong>blue</strong></span><br>
<span style="color:blue;font-size:200%">großer Beispieltext
mit Farbe <strong>blue</strong></span></p>
<!--usw.-->
</body></html>
Erläuterung:
Mit color: können Sie die Textfarbe bestimmen. Erlaubt sind Farbangaben.
Beachten Sie:
Zum Definieren von Farben können Sie den SELFHTML Farbauswähler benutzen.
In CSS2 war vorgesehen, hiermit einen Schatteneffekt für Text zu erzeugen. Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-shadow</title>
<style type="text/css">
#rotschattig { text-shadow:black 3px 2px; font-size:3em; color:red; }
#blauschattig { text-shadow:black 3px 2px 4px; font-size:3em; color:blue; }
</style>
</head><body>
<p id="rotschattig">Großer roter Text mit schwarzem Schatten</p>
<p id="blauschattig">Großer blauer Text mit schwarzem Schatten</p>
</body></html>
Erläuterung:
Mit text-shadow: können Sie einen Textschatten erzwingen. Erlaubt sind Farbangaben oder der Wert none für "keinen Textschatten" sowie numerische Angaben, jedoch keine Prozentangaben.
Der erste numerische Wert definiert die horizontale Position des Schattens unter dem Text, der zweite Wert die vertikale. Eine optionale dritte Längenangabe definiert den Unschärferadius, das heißt, wie weit der Schatten im Hintergrund verläuft. Es lassen sich mehrere Schatten für ein Element definieren, indem weitere Sätze dieser Angaben nach einem Komma hinzugefügt werden. Beispielsweise erzeugt text-shadow:black 0 0 5px, red 5px 5px 3px;. einen schwarzen sowie einen roten Schatten.
Beachten Sie:
Diese Eigenschaft, die zu CSS2 gehört, wird bislang nur von Safari ab Version 1.1 und Konqueror ab Version 3.4 interpretiert. Im Gegensatz zum Konqueror unterstützt Safari noch nicht die Möglichkeit mehrerer Schatten.
In CSS2 war vorgesehen, hiermit die Schriftlaufweite angeben zu können, also wie schmal oder breit eine Schrift erscheint. Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.
Innenabstand bedeutet: erzwungener Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand, also z.B. zwischen dem Text eines Elements und dem Rand dieses Elements. Das folgende Bild zeigt, wie Innenabstände zu verstehen sind (die blauen Pfeile stehen für definierte Innenabstände):
Sinnvoll sind die hier beschriebenen CSS-Eigenschaften für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, div, address oder pre. Sinnvoll sind die Angaben zum Innenabstand ferner, wenn Sie außerdem CSS-Eigenschaften für Rahmen oder für Farben oder Grafiken zum Hintergrund eines Elements notieren. Denn erst dann werden die Abstände zwischen Elementgrenze und Elementinhalt richtig sichtbar. Besonders sinnvoll sind die hier beschriebenen Eigenschaften daher auch für HTML-Tabellenelemente, sofern die Tabelle sichtbare Gitternetzlinien hat.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>padding-top</title>
</head><body>
<p style="padding-top:100px; border:thin solid black;">Textabsatz mit sichtbarem Rahmen und
mit Innenabstand 100px oben</p>
</body></html>
Erläuterung:
Mit padding-top: bestimmen Sie den Innenabstand zwischen Elementinhalt und der oberen Elementgrenze. Erlaubt ist eine numerische Angabe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>padding-bottom</title>
</head><body>
<div style="padding-bottom:4em; border:thin solid red;">div-Bereich mit
sichtbarem roten Rahmen und Innenabstand 4em unten. Das ist in diesem Fall der
Abstand zwischen dem unteren Rahmen des Textabsatzes und dem unteren Rahmen des
div-Bereichs.
<p style="padding-bottom:100px; border:thin solid black;">Textabsatz mit sichtbarem
Rahmen und mit Innenabstand 100px unten</p>
</div>
</body></html>
Erläuterung:
Mit padding-bottom: bestimmen Sie den Innenabstand zwischen Elementinhalt und der unteren Elementgrenze. Erlaubt ist eine numerische Angabe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>padding</title>
</head><body>
<p style="border:80px solid #DDFFCC; padding:50px; font-size:1.5em">Textabsatz mit
dickem Rahmen rundherum mit Innenabstand 50px</p>
</body></html>
Erläuterung:
Mit padding: bestimmen Sie den Innenabstand zwischen Elementinhalt und den vier Elementgrenzen oben, rechts, unten und links. Erlaubt sind ein bis vier numerische Angaben.
Eine Angabe bedeutet: alle vier Ränder des Elements erhalten den gleichen Innenabstand.
Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.
Sinnvolle Vorkenntnisse zum Verständnis: HTML und CSS-Formate definieren.
Dieser Abschnitt behandelt die einzelnen CSS-Eigenschaften, mit deren Hilfe Sie HTML-Elemente nach Wunsch formatieren können.
Der Abschnitt besteht aus folgenden Seiten:
Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard! Sie sollten also stets auch passende Alternativ-Schriftarten angeben, wenn Ihre Seiten nicht ausschließlich von Nutzern des Internet Explorer besucht werden (die die Schriftart-Installation bei hoher Sicherheitsstufe auch bestätigen).
Über @font-face können Sie für den Internet Explorer eine Schriftart definieren und dabei direkt die Daten-Ressourcen der gewünschten Schriftarten ansprechen, also bestimmte Schriftartendateien. Vorgesehen war außerdem, mit Hilfe spezieller Definitionen die Charakteristika der gewünschten Schriftart exakt beschreiben zu können. Beim Definieren der Schriftart vergeben Sie einen Namen für die Schriftart. Unter diesem Namen können Sie sie anschließend mit der Eigenschaft font-family verwenden.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-face</title>
<style type="text/css">
@font-face { font-family:Garamond; src:url(garamond.eot), url(garamond.pfr); }
</style>
</head>
<body>
<p style="font-family:Garamond">Text in Garamond</p>
</body></html>
Erläuterung:
Mit @font-face starten Sie die Angabe einer exakten Schriftart in einem style-Bereich. Dahinter folgen, in geschweiften Klammern, die Daten. Die beiden wichtigsten sind der Schriftartenname font-family und der URI der Schriftartendatei src:url(Datei).
Den Schriftartennamen vergeben Sie mit der Angabe font-family: innerhalb des @font-face-Bereichs. Unter diesem Namen können Sie die Schriftart in HTML verwenden. Im obigen Beispiel gibt es einen Textabsatz, der mit Hilfe einer Stylesheet-Angabe die zuvor definierte Schriftart erzwingt.
Die Schriftartendatei, die Sie für die zugehörigen font-family-Angaben bestimmen, geben Sie mit src:url(Datei) an. Wenn sich die Schriftartendatei im gleichen Verzeichnis befindet wie die HTML-Datei, genügt die Angabe des Dateinamens. Andernfalls müssen Sie die genaue Lage der Schriftartendatei entweder durch eine relative Pfadangabe oder durch eine absolute Adressierung vom Typ http://... angeben.
Im obigen Beispiel sehen Sie, dass gleich zwei URI-Angaben notiert sind. Einmal wird eine eot-Datei als Schriftartenquelle angegeben, einmal eine pfr-Datei. Beide Formate sind browser-spezifisch: eot-Dateien sind Schriftartendateien, die der Internet Explorer (ab Version 4) als Web-Schriftarten erkennt; pfr-Dateien sind Schriftartendateien, die Netscape 4.x erkannte. Wenn Sie Ihre gewünschte Schriftart auch für diesen veralteten Browser zur Verfügung stellen wollen, können Sie beide Formate so einbinden wie im obigen Beispiel.
In CSS2 war vorgesehen, bei der Einbindung einer Schriftartendatei auch Angaben zu den möglichen Formateigenschaften der Schrift zu machen, wie z.B. zu Schriftstil (font-style), Schriftvariante (font-variant), Schriftgröße (font-size) oder Schriftgewicht (font-weight). So sollte dem Browser bereits in der HTML-Datei mitgeteilt werden, welche Formateigenschaften die Schriftartendatei unterstützt. Der Browser sollte die Schriftartendatei in desem Fall nur dann zum Anwender übertragen, wenn Formatierungen in der HTML-Datei die Übertragung sinnvoll machen. Wegen mangelnder Browserunterstützung werden diese Angaben jedoch in CSS 2.1 nicht übernommen.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-face</title>
<style type="text/css">
@font-face { font-family:Garamond; src:url(garamond.eot); font-size:10pt,12pt,14pt; }
@font-face { font-family:Garamond; src:url(garamond.pfr); font-size:10pt,12pt,14pt; }
</style>
</head><body>
<p style="font-family:Garamond; font-size:48pt">Text</p>
<!-- Datei wird nicht übertragen -->
</body></html>
Erläuterung:
Mit den dafür üblichen Stylesheet-Eigenschaften sollten bei der Definition einer Schriftart mit Schriftartendatei einschränkende Angaben zur Schrift gemacht werden können.
Folgende Besonderheiten sollten dabei beachtet werden:
Zu font-style, font-variant, font-weight und font-size konnten auch mehrere, durch Kommata getrennte Werte angegeben werden.
Bei font-weight waren die Angaben bolder und lighter nicht zulässig.
Bei font-size waren nur absolute Größenangaben und keine relativen wie Prozentangaben oder em-Angaben erlaubt.
In CSS2 war vorgesehen, bei der Einbindung einer Schriftartendatei den Zeichenbereich einschränken zu können. So sollte dem Browser bereits in der HTML-Datei mitgeteilt werden, welchen Zeichenbereich die Schriftart unterstützt. Der Browser sollte die Schriftartendatei in desem Fall nur dann zum Anwender übertragen, wenn alle Zeichen eines Textes, der mit der Schriftart formatiert wird, innerhalb des definierten Unicode-Bereichs liegen. Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>unicode-range</title>
<style type="text/css">
@font-face { font-family:System; src:url(system.eot); unicode-range:U+0000-007F; }
@font-face { font-family:System; src:url(system.pfr); unicode-range:U+0000-007F; }
</style>
</head>
<body>
<p><tt style="font-family:System">Text mit ß und Ü</tt></p>
<!-- Datei wird nicht übertragen -->
</body>
</html>
Erläuterung:
Mit unicode-range: sollte der Zeichenbereich der Schriftartendatei vor dem Download bekannt gemacht werden. Im obigen Beispiel wird der Bereich U+0000-007F definiert. Das entspricht dem ASCII-Zeichenvorrat. Wenn nun in einem Bereich, der diese Schriftart benutzt, beispielsweise Umlaute oder andere Zeichen vorkommen, die nicht im ASCII-Zeichenvorrat vorkommen, sollte die Schriftartendatei nicht heruntergeladen werden.
Unicode-Angaben beginnen immer mit U+. Dahinter folgt eine Angabe der gewünschten Zeichennummer in hexadezimaler Form. Um einen Bereich zu definieren, der aus mehreren Unicode-Zeichen besteht, können Sie als Platzhalterzeichen (Wildcard) ein Fragezeichen ? benutzen. Bei einer Angabe wie unicode-range:U+00?? bewirken die zwei hintereinanderstehenden Fragezeichen am Ende der Angabe, dass der gewünschte Unicode-Bereich 16 hoch 2, also 256 Zeichen ab dem Zeichen U+00 beträgt. Da laut Unicode-System bei U+0000 die Zeichen des der Latin-1-Codetabelle beginnen, die 256 Zeichen umfasst, deckt die Angabe in dem Beispiel genau diesen Zeichenvorrat ab. Wenn Sie einen beliebigen Unicode-Bereich bestimmen möchten, können Sie dies mit einer Angabe tun wie z.B. U+AC00-D7FF
Die Version 2.0 der CSS-Sprache stellte einige Stylesheet-Angaben bereit, um Schriftartenquellen möglichst vielfältig definierbar und auffindbar zu machen, die wegen mangelnder Browserunterstützung jedoch in CSS 2.1 nicht übernommen werden.
Browser sollten zuerst auf dem Rechner des Anwenders nach der gewünschten Schriftart suchen und eine auf dem Server bereit liegende Schriftart nur dann herunterladen, wenn die Schriftart lokal nicht verfügbar ist. Dazu sollte bei der Quellenangabe der Schriftartendatei (src:) zuerst local und dahinter in Klammern der gewünschte Schriftartenname notiert werden. Für den Fall, dass der Browser diese Schriftart beim Anwender nicht findet, war durch ein Komma getrennt die Schriftartendatei auf der Internetseite anzugeben - im Beispiel url(kino.ttf).
Es sollten ferner Angaben zum Format der Schriftart gemacht werden können. Der Browser sollte die Schriftartendatei in diesem Fall nur dann herunterladen, wenn sie auf dem Rechner des Anwenders ausführbar ist. Dazu war die Angabe format() zu notieren, durch ein Leerzeichen getrennt von den Angaben zu src:local() und/oder src:url(). Innerhalb der Klammern sollte das Format der Schriftartendatei angeben werden. Im obigen Beispiel wird eine TrueType-Schriftart angegeben.
Folgende weitere Möglichkeiten waren vorgesehen, um die Schriftart genau einzugrenzen:
panose-1:, gefolgt von 10 durch Leerzeichen getrennten Zahlen, sollte eine Schriftart nach dem Panose-1-System bestimmen. Beispiel: panose-1: 2 4 5 2 5 4 5 9 3 3; stemv: und stemh: für die vertikale und horizontale Stammbreite der Glyphen. units-per-em: für die Anzahl der Einheiten pro em-Maßeinheit. Üblich sind die Werte 250 (bei Intellifont), 1000 (bei Type-1) oder 2048 (bei TrueType). Bei Angabe von stemv: und/oder stemh: war ebenfalls units-per-em: anzugeben. slope: für den vertikalen Winkel der Glyphen. cap-height: für die Höhe der Großbuchstaben der Glyphen. x-height: für die Höhe der Kleinbuchstaben der Glyphen. ascent: für die maximale Höhe der akzentlosen Glyphen. descent: für die maximale Tiefe der akzentlosen Glyphen. definition-src:url() für eine Datei mit Schriftartendefinitionen. baseline: für die untere Grundlinie der Glyphen. centerline: für die zentrale Grundlinie der Glyphen. mathline: für die mathematische Grundlinie der Glyphen. topline: für die obere Grundlinie der Glyphen.
Zum Anzeigefenster gibt es zunächst einmal zu sagen, dass es Teil der Arbeitsumgebung des Anwenders ist und deshalb kein Spiel- und Tummelplatz für Autoren von Web-Seiten. Die einzige Eigenschaft des Anzeigefensters, auf die das W3-Konsortium in der CSS-Spezifikation den Zugriff ermöglicht, ist das Aussehen des Mauszeigers. Das ist insofern sinnvoll, als es zur Funktionalität von Web-Seiten unterstützend beitragen kann.
Über den Sinn der CSS-Eigenschaften, die Microsoft in den Internet Explorer seit Version 5.5 eingebaut hat, kann man dagegen geteilter Meinung sein. Im Rahmen stimmiger Web-Designs kann es sinnvoll sein, dass auch die Scroll-Leisten des Browser-Fensters oder die von mehrzeiligen Formulareingabefeldern zu den übrigen Farben passen. Andererseits wecken solche Möglichkeiten wieder neue Begehrlichkeiten in jenen Leuten, die über ihre Web-Seiten am liebsten den Computer des Anwenders ein- und ausschalten würden. Denn natürlich wollen die als nächstes auch die Menü- und Werkzeugleiste des Browsers gestalten können.
Sie können für ein HTML-Element einen Cursor definieren. Wenn der Anwender mit der Maus über die Fläche fährt, die das Element einnimmt, nimmt der Mauszeiger die angegebene Gestalt an. Da Mauszeiger immer mit einer Bedeutung versehen sein sollten, ist es in der Praxis sinnvoll, solche Elemente etwa mit Hilfe von JavaScript Event-Handlern an ein Script zu binden, das bestimmte Befehle ausführt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>cursor</title>
</head><body>
<div style="background-color:#F8F8FF; padding:13px; border:thin solid black; cursor:crosshair;">
<p>Dies ist ein Bereich mit der Angabe <b>cursor:crosshair</b>.
Fahren Sie mit der Maus über diesen Bereich.</p></div>
<!--usw.-->
</body></html>
Erläuterung:
Mit cursor: können Sie das Aussehen des Mauszeigers für den Fall definieren, dass der Anwender mit der Maus über den entsprechenden Bereich fährt. Folgende Angaben sind erlaubt:
auto = automatischer Cursor (Normaleinstellung). default = Plattformunabhängiger Standard-Cursor. crosshair = Cursor in Form eines einfachen Fadenkreuzes. pointer = Cursor in Form eines Zeigers. move = Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements signalisiert. n-resize = Cursor in Form eines Pfeils, der nach oben zeigt (n = Norden). ne-resize = Cursor in Form eines Pfeils, der nach rechts oben zeigt (ne = Nordost). e-resize = Cursor in Form eines Pfeils, der nach rechts zeigt (e = Osten). se-resize = Cursor in Form eines Pfeils, der nach rechts unten zeigt (se = Südost). s-resize = Cursor in Form eines Pfeils, der nach unten zeigt (s = Süden). sw-resize = Cursor in Form eines Pfeils, der nach links unten zeigt (sw = Südwest). w-resize = Cursor in Form eines Pfeils, der nach links zeigt (w = Westen). nw-resize = Cursor in Form eines Pfeils, der nach links oben zeigt (nw = Nordwest). text = Cursor in einer Form, die normalen Text symbolisiert. wait = Cursor in Form eines Symbols, das einen Wartezustand signalisiert. help = Cursor in Form Symbols, das Hilfe zu dem Element signalisiert. progress = Cursor in Form eines Symbols, das einen Programmfortschritt signalisiert, welcher aber anders als wait eine Interaktion zulässt. Dieser Wert wird erst mit CSS 2.1 eingeführt.
Beachten Sie:
Der Internet Explorer bis Version 5.5 kennt pointer nicht, jedoch den nicht standardisierten Wert hand.
Cursor-Symbole sollten Sie nicht zweckentfremden. Wenn Sie beispielsweise cursor:move für ein Element benutzen, sollte dieses Element auch tatsächlich beweglich sein (etwa mit Hilfe von Dynamischem HTML), und wenn Sie cursor:help benutzen, erwartet der Anwender beim Anklicken des Bereichs, dass am Bildschirm ein Fenster oder ein Bereich mit einem Hilfetext erscheint.
Mit cursor:url([Datei]) können Sie eigene Bilddateien als Mauszeiger definieren.
Die Angabe einer externen Grafik wird uneinheitlich unterstützt: Zwingend ist für alle Browser, die das Feature überhaupt unterstützen, dass zusätzlich zur Grafikangabe auch eine Alternative in Form einer Standardangabe berücksichtigt wird. Es ist außerdem möglich, ähnlich wie bei Schriftarten mehrere externe Grafiken aufzulisten. Trennen Sie alle einzelnen Angaben durch ein Komma, beispielsweise cursor:url(cursor.gif), move;
Beachten Sie:
Nicht alle Browser unterstützen alle Grafikformate und auch nicht unter allen Betriebssystemen. So unterstützt z.B. der Internet Explorer nur .cur und .ani als Format, wärend Firefox .ani überhaupt nicht und unter Linux .cur nicht unterstützt.
Die hier beschriebenen Eigenschaften lassen sich auf HTML-Elemente wie beispielsweise html, body oder textarea anwenden. Mit html und body legen Sie die Farben der Fenster-Scroll-Leisten fest, bei textarea die Farben der Scroll-Leisten des Eingabebereichs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>scrollbars</title>
<style type="text/css">
html, body, textarea {
background-color:#8C8CC6;
color:#FFFFFF;
font-family:"Andale Mono",Arial,sans-serif;
scrollbar-base-color:#8C8CC6;
scrollbar-3d-light-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#8C8CC6;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#ACACE6;
}
</style>
</head><body>
<h1 style="text-decoration:underline">Ton in Ton</h1>
<form name="Seite" action="#">
<p>Den Text dieser Seite können Sie selber schreiben:</p>
<p><textarea name="Text" cols="80" rows="80"></textarea></p>
</form>
</body></html>
Erläuterung:
Mit den folgenden Eigenschaften können Sie die Einzelteile von Scroll-Leisten bestimmen:
scrollbar-base-color = Basisfarbe der Scroll-Leiste scrollbar-3dlight-color = Farbe für 3D-Effekte scrollbar-arrow-color = Farbe für Verschiebepfeile scrollbar-darkshadow-color = Farbe für Schatten scrollbar-face-color = Farbe für Oberfläche scrollbar-highlight-color = Farbe für oberen und linken Rand scrollbar-shadow-color = Farbe für unteren und rechten Rand scrollbar-track-color = Farbe für freibleibenden Verschiebeweg
Bei all diesen Eigenschaften ist eine Farbangabe möglich.
Beachten Sie:
Auch Opera und Konqueror kennen diese Eigenschaften. Der Internet Explorer 6 interpretiert die Angaben im standardkonformen Modus nur dann, wenn Sie diese für html anstatt body definieren - sie sollten diese Angaben daher wie im obigen Beispiel für beide Elemente machen, wenn Sie die Umsetzung in den verschiedenen Versionen (bzw. Modi) des Internet Explorer ermöglichen wollen. Opera und Konqueror interpretieren diese Angaben ausschließlich im Quirks-Modus.
Es gibt in CSS zwei Arten von Rahmen: Die erste Sorte läuft unter der Bezeichnung border und zeichnet immer rechteckige Rahmen um die Elemente. border ist schon seit CSS1 im Standard vertreten und wird von allen Browsern verstanden. Außerdem gibt es outline, welche erst seit CSS2 existiert und noch nicht von allen Browsern verstanden wird, obwohl diese Rahmenart andere und durchaus sinnvolle Eigenschaften hat.
Allgemeines zu border
Sinnvoll sind die hier beschriebenen Angaben für border besonders für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address, pre sowie div oder table. Anwendbar sind sie aber auf alle Elemente. So ist es beispielsweise möglich, in HTML eine blinde Tabelle zu notieren, in der aber doch einzelne Zellen einen Rahmen nach Wunsch erhalten - nämlich mit Hilfe von CSS-Rahmeneigenschaften. Auch auf html und body lassen sich die hier aufgelisteten Eigenschaften anwenden - in diesem Fall wird um den gesamten sichtbaren Körper einer HTML-Datei ein Rahmen gezeichnet.
Wenn Sie bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.
In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. So ist es sinnvoll, nicht nur eine Rahmendicke anzugeben, sondern auch die gewünschte Rahmenfarbe. Auch verschiedene Rahmentypen stehen zur Auswahl. Alle Rahmeneigenschaften können Sie wahlweise auf alle vier Seiten eines Elements anwenden, aber auch nur auf eine oder mehrere bestimmte Seiten.
Beachten Sie:
Der Internet Explorer vor Version 5.5 zeichnet Rahmen nur um Blocklevel-Elemente.
Allgemeines zu outline
Die Eigenschaft outline orientiert sich, im Gegensatz zu border nicht an rechteckigen Blöcken, sondern ist explizit als "Rahmen für nicht-rechteckige Bereiche" definiert. Außerdem wird die Dicke der outline nicht zur Elementgröße hinzugerechnet, sondern als letzter Schritt "draufgemalt", ohne Platz wegzunehmen. Im Gegensatz zu den border-Rahmen können outline-Rahmen aber nur vollständig geschlossen zugewiesen werden, es fehlt die Möglichkeit, einzeln für oben, unten, links oder rechts separate Angaben zu machen. Vergleichen Sie am Besten die Beispiele zu outline und border, um den Unterschied zu verstehen.
Sie können für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Rahmenfarbe.
Mit border-width: können Sie die Dicke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:
thin = dünn. medium = mittelstark. thick = dick.
Um für einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-width mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-width:5px 5px;
Dabei gelten folgende Regeln:
Zwei Angaben: die erste Angabe bedeutet die Rahmendicke für oben und unten, die zweite Angabe die Rahmendicke für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts und links und die dritte die Rahmendicke für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts, die dritte die Rahmendicke für unten und die vierte die Rahmendicke für links.
Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-width zu verwenden: border-top-width definiert die Rahmendicke für oben, border-right-width die Rahmendicke für rechts, border-bottom-width die Rahmendicke für unten und border-left-width die Rahmendicke für links.
Beachten Sie:
Die Angabe border-width wird nur interpretiert, wenn außerdem der Rahmentyp (border-style) angegeben wird, also etwa: <p style="border-style:solid; border-width:thin">.
Sie können für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Rahmentyp und/oder einer Angabe zur Rahmendicke kombinieren.
Mit border-color: können Sie die Rahmenfarbe bestimmen. Erlaubt ist eine Farbangabe oder der Wert transparent (durchsichtiger Rahmen, interessant bei sich überlappenden Elementen, wie z.B. durch Positionierung möglich).
Um für einzelne Seiten des Elements eine unterschiedliche Rahmenfarbe zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-color mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-color:#FFFF00 red;
Dabei gelten folgende Regeln:
Zwei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben und unten, die zweite Angabe die Rahmenfarbe für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts und links und die dritte die Rahmenfarbe für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts, die dritte die Rahmenfarbe für unten und die vierte die Rahmenfarbe für links.
Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-color zu verwenden: border-top-color definiert die Rahmenfarbe für oben, border-right-color die Rahmenfarbe für rechts, border-bottom-color die Rahmenfarbe für unten und border-left-color die Rahmenfarbe für links.
Die Untereigenschaften von border-color stehen im Gegensatz zu den Untereigenschaften von border-width jedoch erst seit CSS2 zur Verfügung und werden von älteren Browsern ignoriert.
Beachten Sie:
Die Angabe border-color wird nur interpretiert, wenn außerdem der Rahmentyp (border-style) angegeben wird, also etwa: <p style="border-style:solid; border-color:red">.
Netscape 4.x hat mit Angaben zur Rahmenfarbe zum Teil erhebliche Probleme und interpretiert teilweise augenscheinlich unsinniges Zeug. Das obige Beispiel etwa lässt ihn böse straucheln.
Mit dem Rahmentyp können Sie verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur Rahmenfarbe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>border-style</title>
</head><body>
<p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ dotted.</p>
<p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ dashed.</p>
<p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ solid.</p>
<p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ double.</p>
<p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ groove.</p>
<p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ ridge.</p>
<p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ inset.</p>
<p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ outset.</p>
</body></html>
Erläuterung:
Mit border-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben.
Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-style mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-style:solid double;
Dabei gelten folgende Regeln:
Zwei Angaben: die erste Angabe bedeutet den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für rechts und links.
Drei Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts und links und die dritte den Rahmentyp für unten.
Vier Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts, die dritte den Rahmentyp für unten und die vierte den Rahmentyp für links.
Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-style zu verwenden: border-top-style definiert den Rahmentyp für oben, border-right-style den Rahmentyp für rechts, border-bottom-style den Rahmentyp für unten und border-left-style den Rahmentyp für links.
Die Untereigenschaften von border-style stehen im Gegensatz zu den Untereigenschaften von border-width jedoch erst seit CSS2 zur Verfügung und werden von älteren Browsern ignoriert.
Beachten Sie:
Die Angabe hidden ist vor allem für benachbarte Tabellenzellen gedacht. Während die Angabe none nur den Rahmen des Elements unterdrückt, für das sie gilt, bewirkt hidden, dass auch Rahmen von Nachbarelementen unterdrückt werden, sofern diese Rahmen besitzen. Voraussetzung dafür ist allerdings, dass für das zugehörige table-Element die folgende CSS-Sondereigenschaft notiert ist: border-collapse:collapse
Dies ist eine neuere CSS-Eigenschaft, die Rahmenregeln für Tabellen erlaubt. Beim Wert collapse fallen alle Rahmen der Zellen sauber übereinander, sprich, eine Zelle mit rechtem Rand von 1px und eine Zelle rechts davon mit einem linken Rand von 1px bilden einen gemeinsamen Rahmen von 1px. Der gegenteilige mögliche Wert, der allerdings auch der Voreinstellung entspricht, lautet separate. Damit "stoßen" die Rahmen benachbarter Zellen nur aneinander, überlappen sich aber nicht. Im Beispiel der zwei erwähnten Zellen würde also optisch ein Zwischenrahmen von 2px Dicke entstehen.
Netscape 4.x interpretiert border-style nicht vollständig und auch nur, wenn außerdem die eine Angabe zur Rahmendicke notiert wird, also etwa: <p style="border-style:solid; border-width:thin">.
Einige der Effekte (z.B. groove) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.
Mit border: können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den Beispielen oben. Die Reihenfolge der Einzelangaben ist egal.
Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen. Dazu sind die Untereigenschaften von border gedacht: border-top definiert eine zusammenhängende Angabe für oben, border-right für rechts, border-bottom für unten und border-left für links.
Die Angabe der outline-width ist identisch zur border-width. Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:
thin = dünn. medium = mittelstark. thick = dick.
Kombinieren Sie outline-width stets mit einer Angabe für outline-style, um eine sichtbare Rahmenlinie zu definieren.
Die Angabe von outline-color ist nahezu identisch zu border-color. Erlaubt ist eine Farbangabe oder der Wert invert (invertierte Farbe, die durch Umkehrung aller Bits einer hexadezimalen Farbangabe entsteht).
Beachten Sie:
Die Farbangabe invert wird von vielen Browsern nicht unterstützt.
Das Beispiel ist nahezu eine identische Kopie von border.
Mit outline können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den Beispielen oben. Die Reihenfolge der Einzelangaben ist egal.
Beachten Sie das unterschiedliche Verhalten des Rahmens beim <span>, wenn der darin enthaltene Text sich auf mehrere Zeilen verteilt. outline sorgt dafür, dass jeder einzelne Textabschnitt vollständig von einem Rahmen umschlossen ist, auch wenn die einzelnen Stücke nicht zusammenhängend platziert werden können. Bei border hingegen wird eventuell eine Seite eines Teilstückes offengelassen.
Die hier beschriebenen Stylesheet-Angaben eröffnen HTML und seiner Ergänzungssprache CSS völlig neue Räume, denn mit diesen Angaben wird es möglich, Druck-Layouts zu definieren. Die Möglichkeit des zweigleisigen Editierens wird auch durch die Möglichkeit unterstützt, verschiedene Stylesheets für unterschiedliche Ausgabemedien zu definieren, wie im Abschnitt Stylesheets in HTML einbinden beschrieben.
Die Stylesheet-Angaben zu Seiten-Layout und Seitenumbruch sind jedoch nicht nur für Druckerzeugnisse interessant. Ein entsprechendes Präsentationswerkzeug bzw. ein entsprechend ausgerichteter Web-Browser könnte diese Angaben auch zur bildschirmseitenorientierten Präsentation benutzen.
Von den Eigenschaften interpretiert der Internet Explorer seit Version 4 lediglich diejenigen für den Seitenumbruch. Nur Opera unterstützt einen Großteil der Eigenschaften.
Mit @page können Sie ein Seiten-Layout erstellen. Die Angabe ist ein Behälter für die einzelnen Angaben zum Aussehen des Layouts. Dazu gehören Eigenschaften wie size (Seitengröße), margin (Seitenränder) und bei Bedarf auch Angaben zu marks (Registermarken). Diese Angaben stehen in den geschweiften Klammern im Anschluss an @page.
Beachten Sie:
@page stellt sicher, dass sich die Definitionen zum Seiten-Layout in den geschweiften Klammern nur auf "seiten-orientierte" Medien beziehen und vom WWW-Browser nicht irrtümlich als Definitionen für das normale Erscheinungsbild der HTML-Datei am Bildschirm interpretiert wird. So können Sie mit dieser Angabe z.B. völlig unabhängig von sonstigen Stylesheet-Angaben im gleichen Bereich ein Seiten-Layout für den Ausdruck Ihrer Web-Seiten erstellen.
In CSS2 war vorgesehen, hiermit die Breite und Höhe eines Seiten-Layouts festzulegen. Für Druckdokumente sollte das gewünschte Papierformat und für bildschirmseitenorientierte Präsentationen die Größe aller Bildschirmseiten festgelegt werden können. Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>size</title>
<style type="text/css">
@page { size:landscape; }
</style>
</head><body>
<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
Wenn Ihr Browser jedoch die Stylesheet-Angaben zum Seiten-Layout kennt,
versuchen Sie mal, diese Datei über den normalen Druckbefehl Ihres
Browsers auszudrucken.</p>
</body></html>
Erläuterung:
Mit size: sollte im Anschluss an @page die Seitengröße definiert werden können. Vorgesehen waren zwei numerische Angaben, durch ein Leerzeichen voneinander getrennt; die erste Angabe für die Breite der Seite (z.B. 21.0cm) und die zweite für die Höhe (z.B. 29.7cm). Ferner waren folgende Angaben vorgesehen:
auto = Das normale Format des Ausgabemediums (Normaleinstellung). landscape = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch querkant. portrait = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch hochkant.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin (page)</title>
<style type="text/css">
@page { size:21.0cm 14.85cm; margin:5.7cm 2cm 1.4cm 1cm; }
</style>
</head><body>
<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
Für den Ausdruck wurden jedoch Abstände zwischen
Seiteninhalt und Seitenrand festgelegt.</p>
</body></html>
Erläuterung:
Um die Seitenränder einzeln zu definieren, stehen folgende Angaben zur Verfügung:
Diese Angaben haben keinen Einfluss auf Seitenränder bei der normalen Browser-Präsentation am Bildschirm, da sie hinter der Seiten-Layout-Angabe @page stehen. Für die normale HTML-Präsentation im WWW-Browser gibt es entsprechende Stylesheet-Angaben zu Abstand/Rand.
In CSS2 war vorgesehen, Schnitt- und Passermarken für den Ausdruck angeben zu können. Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.
Schnittmarken (engl. crop marks) sind Hilfslinien, die bei der Weiterverarbeitung in Belichtung und Druck zum Zuschneiden von Seiten benutzt werden. Passermarken, auch Registermarken (engl. cross marks oder register marks) sind Markierungen zum exakten Ausrichten des Satzspiegels bei Belichtung und Druck.
Wenn Sie also beispielsweise ein Seitenformat von 10.8cm mal 18.2cm definieren und dieses auf DIN A 4-Papier ausdrucken, sollten Sie solche Marken setzen können, die sichtbar im Ausdruck erscheinen und für die Satzspiegelvorbereitung in der Belichtung oder in der Druckerei das genaue Seitenformat anzeigen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>marks</title>
<style type="text/css">
@page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross; }
</style>
</head><body>
<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
Für Printmedienverarbeitung wurden jedoch Passermarken gesetzt.</p>
</body></html>
Erläuterung:
Mit marks: sollten im Anschluss an @page Schnitt- und Passermarken definiert werden können, wozu folgende Angaben vorgesehen waren:
Sie können für linke und rechte Seiten sowie für die erste Dokumentseite unterschiedliche Angaben notieren. Dadurch können Sie beispielsweise Heft- oder Binderänder ausgleichen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Seiten rechts/links</title>
<style type="text/css">
@page { size:21.0cm 14.85cm; margin-top:1.5cm; margin-bottom:2cm }
@page :left { margin-left:1.5cm; margin-right:2cm }
@page :right { margin-left:2cm; margin-right:1.5cm }
</style>
</head><body>
<p>Das hier ist die eine Seite.</p>
<p style="page-break-before:always">Das hier die andere (wegen erzwungenem Seitenumbruch)</p>
<p>Die beiden Seiten haben unterschiedliche Seitenränder.</p>
</body></html>
Erläuterung:
Unterschiedliche Seiten für rechts und links erzeugen Sie, indem Sie hinter @page, getrennt durch ein Leerzeichen, einen Doppelpunkt norieren und sofort dahinter eines der Schlüsselwörter left (zur Bezeichnung linker Seiten), right (zur Bezeichnung rechter Seiten) oder first (zur Bezeichnung der ersten Seite) angeben. Dahinter können Sie in geschweiften Klammern Angaben zu Größe, Seitenrändern und Schnitt-/Passermarken für die beiden Seitentypen notieren. In der Praxis ist die Unterscheidung vor allem nützlich, um (wie im obigen Beispiel) spiegelverkehrte Werte zum rechten und linken Seitenrand anzugeben. So lassen sich Heft-/Binderänder ausgleichen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>page-break-before</title>
</head><body>
<h1>Die erste Seite</h1>
<p>und ihr Text</p>
<h2 style="page-break-before:always">Und die zweite Seite</h2>
<p>und ihr Text</p>
</body></html>
Erläuterung:
Mit page-break-before: können Sie einen Seitenumbruch vor dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:
always = immer einen Seitenumbruch vor dem aktuellen Element einfügen. avoid = nie einen Seitenumbruch vor dem aktuellen Element einfügen. left = bei linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste linke Seite. right = bei linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste rechte Seite. inherit = Angabe zum Seitenumbruch vom Elternelement übernehmen (erben). auto = keine Angabe zum Seitenumbruch (Normaleinstellung).
Beachten Sie:
Safari 1.2 interpretiert nur die Werte auto und always. Internet Explorer, Konqueror und Opera interpretieren die Werte left und right wie auto. Dies ist eine vom CSS-Standard erlaubte Umsetzung. Firefox und Safari ignorieren page-break-before mit den Werten left oder right gänzlich. Der Wert avoid wird ausschließlich von Opera unterstützt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>page-break-after</title>
<style type="text/css">
h2 { page-break-after:avoid; }
</style>
</head><body>
<h1 style="margin-bottom:18cm;">
Überschrift ersten Grades mit <code>18cm</code> Außenabstand unten.
</h1>
<h2>Überschrift zweiten Grades</h2>
<p>Direkt nach einer Überschrift zweiten Grades darf kein Seitenumbruch erfolgen.</p>
</body></html>
Erläuterung:
Mit page-break-after: können Sie einen Seitenumbruch nach dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:
always = immer einen Seitenumbruch nach dem aktuellen Element einfügen. avoid = nie einen Seitenumbruch nach dem aktuellen Element einfügen. left = bei linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste linke Seite. right = bei linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste rechte Seite. inherit = Angabe zum Seitenumbruch vom Elternelement übernehmen (erben). auto = keine Angabe zum Seitenumbruch (Normaleinstellung).
Beachten Sie:
Safari 1.2 interpretiert nur die Werte auto und always. Internet Explorer, Konqueror und Opera interpretieren die Werte left und right wie auto. Dies ist eine vom CSS-Standard erlaubte Umsetzung. Firefox und Safari ignorieren page-break-after mit den Werten left oder right gänzlich. Der Wert avoid wird ausschließlich von Opera unterstützt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>page-break-inside</title>
</head><body>
<p style="height:90%; border:1px solid #f00">Platzhalter</p>
<p style="page-break-inside:avoid">
Innerhalb<br>dieses<br>Abschnitts<br>darf<br>kein<br>Seitenumbruch<br>erfolgen.<br>
Er wandert daher beim Ausdruck auf die nächste Seite.
</p>
</body></html>
Erläuterung:
Mit page-break-inside können Sie einen Seitenumbruch innerhalb eines Elements verhindern. Folgende Angaben sind erlaubt:
avoid = nie einen Seitenumbruch innerhalb des aktuellen Elements einfügen. auto = keine Angabe zum Seitenumbruch (Normaleinstellung).
Sie können verhindern, dass Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, dass eine einzelne Zeile auf der einen Seite steht und alle anderen Absatzzeilen auf die nächsten Seite kommen (DTP-Fachjargon hierzulande: Schusterjungen).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>orphans</title>
<style type="text/css">
p { orphans:3; font: 50pt/100pt Verdana,sans-serif; margin:1cm 0 0; padding:0; }
</style>
</head><body>
<p>Absatz_1:_Zeile_1
Absatz_1:_Zeile_2
Absatz_1:_Zeile_3
Absatz_1:_Zeile_4
Absatz_1:_Zeile_5</p>
<p>Absatz_2:_Zeile_1
Absatz_2:_Zeile_2
Absatz_2:_Zeile_3
Absatz_2:_Zeile_4
Absatz_2:_Zeile_5
Absatz_2:_Zeile_6</p>
</body></html>
Erläuterung:
Mit orphans: können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite vor dem Umbruch mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.
Beachten Sie:
Nur Opera kennt diese Eigenschaft, setzt sie aber selbst in der Version 8 noch fehlerhaft und unbrauchbar um. Da in diesem Beispiel nur maximal zwei Zeilen des zweiten Absatzes auf die erste Druckseite passen, müsste der gesamte Absatz umbrochen werden, um die Eigenschaft orphans:3 zu erfüllen. Opera verhält sich merkwürdig und bricht den zweiten Absatz hier nur dann um, wenn z.B. orphans:4 oder widows:3 definiert oder die letzte Zeile des zweiten Absatzes gelöscht würde.
Sie können verhindern, dass Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, dass eine einzelne Zeile auf der neuen Seite steht und alle anderen Absatzzeilen auf der Seite vor dem Seitenumbruch bleiben (DTP-Fachjargon hierzulande: Hurenkinder).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>widows</title>
<style type="text/css">
p { widows:4; font:50pt/100pt Verdana,sans-serif; margin:1cm 0 0; padding:0; }
</style>
</head><body>
<p>Absatz_1:_Zeile_1
Absatz_1:_Zeile_2
Absatz_1:_Zeile_3</p>
<p>Absatz_2:_Zeile_1
Absatz_2:_Zeile_2
Absatz_2:_Zeile_3
Absatz_2:_Zeile_4
Absatz_2:_Zeile_5
Absatz_2:_Zeile_6</p>
</body></html>
Erläuterung:
Mit widows: können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite nach dem Umbruch auf der neuen Seite mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.
Beachten Sie:
Nur Opera kennt diese Eigenschaft, setzt sie aber selbst in der Version 8 noch fehlerhaft und unbrauchbar um. In diesem Beispiel würden mindestens zwei Zeilen des zweiten Absatzes noch auf die erste Druckseite passen und gemäß orphans:4 müssten vier Zeilen umbrochen werden. Opera bricht jedoch den gesamten zweiten Absatz um bzw. bei kleineren Werten für widows stets drei Zeilen oder bei orphans:1 zwei Zeilen.
In CSS2 war vorgesehen, für spezielle Seitenformate benannte Seitentypen definieren zu können. Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Benannte Seiten</title>
<style type="text/css">
@page querformat { size:landscape; }
div.uebersicht { page:querformat; }
</style>
</head><body>
<div class="uebersicht">
<p>Das mittels <code>page:querformat</code> benannte div-Element sollte im
Querformat ausgedruckt werden und bei Bedarf einen Seitenumbruch erzeugen.</p>
</div>
</body></html>
Erläuterung:
Indem hinter @page ein selbst vergebenener Name notiert wird - im obigen Beispiel ist es der Name querformat - sollte ein spezielles Seiten-Layout erstellt werden können. Innerhalb der geschweiften Klammern waren die üblichen Angaben zum Seiten-Layout zu notieren. Benannte Seiten sollten nur dann verwendet werden, wenn ein Element vorkommt, für das eine CSS-Eigenschaft page: notiert ist. Im Beispiel wird für div-Elemente mit dem Klassennamen uebersicht bestimmt, dass solche Elemente den Seitentyp querformat erzwingen. Wenn nun also im HTML-Quelltext steht: <div class="uebersicht">...</div>, dann sollte für die Darstellung dieses Elements der Seitentyp querformat erzwungen werden.
Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und zu Elementen, die per Tastatur selektiert, gerade mit der Maus überfahren oder angeklickt werden, bestimmen.
Pseudoklassen werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoklassen gelten teilweise nur für das a-Element in HTML, daher wird vor dem Doppelpunkt das a notiert. In den Formatdefinitionen für die einzelnen Pseudoklassen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die folgenden Pseudoklassen bedeuten:
:link = für Verweise zu noch nicht besuchten Seiten :visited = für Verweise zu bereits besuchten Seiten :focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0) :hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0) :active = für gerade angeklickte Elemente
Beachten Sie:
Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.
Netscape 4.x und der Internet Explorer 3.0 interpretieren noch nicht alle Angaben. Insbesondere reagiert Netscape 4.x noch nicht auf die Pseudoklasse a:hover. Der Internet Explorer interpretiert :focus als :active. Opera ignoriert zunächst :focus und wendet die für diesen Zustand definierten Eigenschaften erst bei nachfolgendem :hover zusätzlich an.
Die Pseudoklassen :focus, :hover und :active gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für h1:active CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maustaste gedrückt wird die definierten Eigenschaften an. Im Internet Explorer bis einschließlich Version 6 funktioniert keine dieser allgemeingültigen Pseudoklassen und in Version 7 lediglich :hover.
Sie können für Absätze mit längerem Fließtext für die erste Zeile des Absatzes ein separates Erscheinungsbild erzwingen. Ferner können Sie für das erste Zeichen der ersten Zeile ein separates Erscheinungsbild erzwingen. Und schließlich können Sie sogar bestimmen, dass ein erstes Kindelement eines Elements ein besonderes Aussehen erhält. Dies sind typografische Effekte, die von Druckschriften her bekannt sind.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>:first-line, :first-letter, :first-child</title>
<style type="text/css">
p:first-line { font-weight:bold }
p:first-letter { font-size:300%; color:red }
div { background-color:#E0E0E0 }
div p:first-child { background-color:#C0C0C0; }
</style>
</head><body>
<p>Man kann nur Brücken schlagen zwischen Ufern die man
auseinanderhält. Denn wo es keine Gräben gibt, da gibt es
auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein
Leben.</p>
<div>
<p>Und die Moral von der Geschicht:</p>
<p>Traue Philosophen nicht!</p>
</div>
</body></html>
Erläuterung:
Pseudoelemente und Pseudoklassen werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoelemente und Pseudoklassen sind für typische Absatz- oder Überschriftenelemente in HTML gedacht. In den Deklarationen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die Pseudoelemente und Pseudoklassen bedeuten:
:first-child (Pseudoklasse) = das Element, das das erste Kindelement eines anderen Elements ist erhält die CSS-Eigenschaften :first-line (Pseudoelement) = die erste Textzeile des Elements erhält die CSS-Eigenschaften :first-letter (Pseudoelement) = das erste Zeichen des Textes erhält die CSS-Eigenschaften
Beachten Sie:
Der Internet Explorer interpretiert :first-child erst ab Version 7 und :first-line sowie :first-letter erst ab Version 6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="de"><head><title>:lang</title>
<style type="text/css">
:lang(en) { background-color:#ddf; }
:lang(fr) { background-color:#dfd; }
</style>
</head><body>
<p>Viele <span lang="en">Websites</span> enthalten fremdsprachige Wörter.</p>
<p lang="fr">C'est la vie!</p>
</body></html>
Erläuterung:
Pseudoklassen werden zentral in einem style-Bereich notiert. Die hier beschriebene Pseudoklasse bedeutet:
:lang(en) = Elemente, deren Sprachinhalt als en (englisch) ausgezeichnet wurde :lang(fr) = Elemente, deren Sprachinhalt als fr (französisch) ausgezeichnet wurde
Nach :lang ist innerhalb runder Klammern ein Sprachenkürzel zu notieren. Der Selektor :lang(de) trifft auch auf Elemente zu, die mit lang="de-AT" oder lang="de-CH" ausgezeichnet wurden, da nur der Beginn des Attributwertes geprüft wird.
Beachten Sie:
Diese Angaben werden auch vom Internet Explorer 7 noch nicht interpretiert.
Sie können bestimmen, dass vor oder nach einem Element automatisch Inhalt eingefügt wird. Es kann sich um statischen Text, beliebige Ressourcen (meist Grafiken), aber auch um variable Inhalte handeln.
Pseudoelemente werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoelemente bedeuten:
:before = Inhalt, der vor dem notierten Inhalt des Elements eingefügt werden soll :after = Inhalt, der nach dem notierten Inhalt des Elements eingefügt werden soll
Innerhalb der geschweiften Klammern bestimmen Sie dann mit content:, was vor bzw. nach dem in HTML notierten Elementinhalt automatisch eingefügt werden soll.
Im obigen Beispiel wird für das h1-Element bestimmt, dass vor dem Elementinhalt eine Grafik und ein Leerzeichen eingebunden werden.
Vor dem h2-Element wird das Unicode-Zeichen U+2022 (Bullet-Grafik) eingefügt.
Für Überschriften zweiten Grades wird ferner bestimmt, dass beim Überfahren mit der Maus nach dem Element ein Gatterzeichen und der Inhalt des id-Attributs eingefügt werden.
Allen Elementen, die ein title-Attribut aufweisen, wird der Inhalt des Attributs mittels attr([Attributname]) von runden Klammern umschlossen angefügt.
Statischer Text hinter content: muss in Anführungszeichen stehen. Im obigen Beispiel können Sie auch sehen, dass es möglich ist, Angaben zu kombinieren. So bedeutet content:" #"attr(id), dass vor dem Attributwert noch ein statisches Leer- und ein Gatterzeichen eingefügt werden und content:url(../../../src/prev.gif)" ";, dass der Grafik ein Leerzeichen folgt.
CSS 2.1 ergänzt ferner folgende Werte, die erst in CSS3 Bedeutung erlangen werden:
content:none = das Pseudoelement wird nicht generiert content:normal = wie none
Beachten Sie:
Generierter Inhalt wird auch vom Internet Explorer 7 noch nicht interpretiert, von Opera 5 und 6 nur teilweise.
Mittels der Eigenschaft quotes: ist es möglich, die gewünschte Form von Anführungszeichen zu definieren. Als Selektor dient die Pseudoklasse :lang, um der jeweiligen Sprache angepasste Anführungszeichen zu gewährleisten. Die Auszeichnung mittels de-DE dient im Beispiel nur der Unterscheidung der französischen Variante.
Nach quotes: folgen vier in Hochkommata eingefasste Zeichenreferenzen. Der erste Wert steht für das öffnende Zeichen, der zweite für das schließende. Die beiden folgenden stehen analog dazu für verschachtelte Zitate, wenn also innerhalb eines Zitats nochmals zitiert wird. Eingefügt werden die Anführungszeichen schließlich aufgrund der Eigenschaften :before, :after in Verbindung mit content:open-quote bzw. content:close-quote.
Der Abstand zwischen den Anführungszeichen und deren Inhalt findet nur in Frankreich Anwendung und wurde mittels \00A0 (entspricht in HTML ) umgesetzt, um einen unerwünschten Zeilenumbruch zu vermeiden.
Diese Angaben werden auch vom Internet Explorer 7 noch nicht interpretiert. Mozilla Firefox vor Version 1.5 ignoriert die Verschachtelungstiefe und stellt das gesamte Beispiel mit den ersten beiden definierten Zitatzeichen dar. Dies gilt auch für Opera-Versionen vor 7.50, die darüber hinaus nicht alle Arten von Anführungszeichen unterstützen. Safari fügt in allen Versionen lediglich verschachtelte Standard-Anführungszeichen ein.
In der Regel werden Sie für die automatische Nummerierung Überschriftenelemente wie h1 oder h2 angeben und die Nummerierung vor dessen Text setzen. Dann müssen Sie zur Anzeige der Nummerierung im style-Bereich Selektoren wie h1:before oder h2:before notieren. In den geschweiften Klammern folgt dann, wie bei :before und :after üblich, die Eigenschaft content: gefolgt von counter([Name]), um den Wert des Zählers mit dem Namen Name an die aktuelle Stelle einzufügen.
Mit counter-increment:[Name] zählen Sie den Zähler mit dem angegebenen Namen um eins hoch. Sie können auch eine positive oder negative ganze Zahl angeben, mit der gezählt werden soll. So wird mit counter-increment:[Name] -2 um zwei heruntergezählt.
Mit counter-reset:[Name] setzen Sie einen Zähler auf einen Anfangswert von 1. Auch hierbei können Sie eine positive oder negative ganze Zahl anfügen. Damit setzen Sie den Zähler auf diese Zahl als Anfangswert.
Das Zurücksetzen des Zählers ist vor allem wichtig, wenn Sie mit Kapitel-Unterkapitel-Nummerierung arbeiten, wie im obigen Beispiel. Dort wird beim Vorkommen eines neuen h1-Elements der Zähler für h2-Elemente wieder auf 1 gesetzt.
Neben den Funktionen für die Zählerkontrolle kann auch statischer Text notiert werden. Im obigen Beispiel wird als statischer Text ein Leerzeichen und zwischen counter(Ebene01) und counter(Ebene02) jeweils ein Punkt notiert. So entsteht im Beispiel durch die Verwaltung der beiden Zähler für Überschriften erster und zweiter Ordnung ein Nummerierungsschema wie 1, 1.1, 1.2, 2, 2.1, 2.2, 2.3, 3 usw.
Beachten Sie:
Die automatische Nummerierung wird vom Internet Explorer in keiner Version unterstützt.
Ab der CSS-Version 2.0 gibt es verschiedene Eigenschaften, um Elemente einer WWW-Seite exakt im Anzeigefenster des WWW-Browsers zu positionieren und die Position von Elementen untereinander genau zu kontrollieren. Dazu gehören Angaben zum absoluten und relativen Positionieren von Elementen, Angaben zur Ausdehnung von Elementen, Angaben zum Umfließen von Elementen und Angaben zum Überlappen und Anzeigen von Elementen.
Absolutes und relatives Positionieren von Elementen bietet Ihnen die Möglichkeit, das Erscheinungsbild von Web-Seiten stärker medienorientiert zu gestalten. So können Sie für einzelne Bereiche festlegen, wo genau diese Bereiche beginnen sollen. Bereiche können sich überlappen usw. Im Wesentlichen decken diese Eigenschaften die Möglichkeiten der alten Netscape-Layer ab. Im Gegensatz zu den Layern sind sie jedoch ein offizieller Vorschlag des W3-Konsortiums. Netscape und der Microsoft Internet Explorer interpretieren diese Angaben seit ihren 4er-Versionen - allerdings noch mit einigen Einschränkungen bzw. Besonderheiten.
Das Positionieren von Elementen ist eine wichtige Voraussetzung für viele Anwendungsfälle von Dynamischem HTML. Mit Hilfe entsprechender Script-Unterstützung können Sie positionierte Elemente bewegen, ein-/ausblenden, anders überlappen usw.
Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung). relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst. absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit. fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente a4 bis a6 des Beispiels zeigen: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element.
Die Angabe relative bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente r3 und r6). Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente – wie die Elemente s4 und s7 demonstrieren – erhalten.
Mit absolute oder fixed positionierte Elemente werden aus dem normalen Elementfluss entfernt und haben damit keinen Einfluss auf nachfolgende Elemente. Im Beispiel folgt demnach s8 bei der Anzeige direkt auf s7, ohne sich an den im Quelltext dazwischen liegenden Elementen a1 bis a7 und f1 zu orientieren.
Die Angabe position: allein legt noch nicht fest, wo genau ein Element beginnen soll. Es bleibt standardmäßig erst einmal dort, wo es ohne Positionierung auch angezeigt würde. Die gewünschte abweichende Position müssen Sie zusätzlich angeben. Dies können Sie beispielsweise mit Angaben für top, left, bottom oder right tun.
Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines nächsten von static abweichend positionierten Vorfahrenelements beginnt.
Wenn Sie position:relative; top:5px notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.
Beachten Sie:
Die Angabe fixed wird vom Internet Explorer für Windows bis Version 6 gar nicht und von Version 7 nur im standardkonformen Modus unterstützt, Netscape unterstützt sie seit Version 6.1.
Der Internet Explorer 6 berücksichtigt ferner nur einen Eckpunkt, sodass es diesem Browser nicht möglich ist, einem Element bei Angabe mehrerer Eckpunkte unter Verzicht auf width/height eine zu berechnende Breite und/oder Höhe zuzuweisen, wie dies im Beispiel auf das Element a7 zutrifft. Der Internet Explorer 7 berechnet bei Angaben zu top und bottom die Höhe nicht.
Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von oben beginnt.
Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von links beginnt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>left</title>
</head><body>
<div style="position:absolute; top:100px; left:100px;">
<img src="hund.gif" width="208" height="181" alt="Hund"></div>
<div style="position:absolute; top:140px; left:350px; width:200px;
background-color:#FFFFE0; border:1px solid #804000; padding:10px">
Dies ist ein absolut positionierter Text neben einer absolut positionierten Grafik.</div>
</body></html>
Erläuterung:
Mit left: können Sie die Startposition von links bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung.
Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von unten beginnt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>bottom</title>
</head><body>
<div style="position:absolute; bottom:0px; left:100px;">Dies ist ein untenbündiger Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund"></div>
</body></html>
Erläuterung:
Mit bottom: können Sie die Startposition von unten bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung.
Beachten Sie:
Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht, Opera bis Version 6 benötigt zusätzlich die Angabe von height.
Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von rechts beginnt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>right</title>
</head><body>
<div style="position:absolute; top:100px; right:0px;">Rechtsbündiger Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund"></div>
</body></html>
Erläuterung:
Mit right: können Sie die Startposition von rechts bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung.
Beachten Sie:
Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht, Opera bis Version 6 benötigt zusätzlich die Angabe von width.
Sie können bestimmen, wie breit ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr Breite einnimmt als die hier angegebene Breite, können Sie zusätzlich die Eigenschaft overflow verwenden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>width</title>
</head><body>
<p><code>width</code> mit <code>overflow:hidden</code></p>
<h1 style="width:200px; border:10px solid red; padding:10px; font-size:3em; overflow:hidden;">
Eine Überschrift, die möglicherweise breiter ist als erlaubt</h1>
<p><code>width</code> ohne <code>overflow</code></p>
<h1 style="width:200px; border:10px solid red; padding:10px; font-size:3em;">
Eine Überschrift, die möglicherweise breiter ist als erlaubt</h1>
</body></html>
Erläuterung:
Mit width: können Sie die Breite bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für automatische Breite.
Beachten Sie:
Dass im obigen Beispiel wo nötig in der Breite Text abgeschnitten wird, liegt nicht an der Eigenschaft width, sondern an der Angabe overflow:hidden. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht. Wird für overflow kein von visible abweichender Wert notiert, vergrößert der Internet Explorer bis zur Version 6 das Element so weit, bis der Inhalt vollständig sichtbar ist.
Sie können bestimmen, wie breit ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr horizontalen Raum einnimmt als die hier angegebene Breite, können Sie zusätzlich die Eigenschaft overflow verwenden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>max-width</title>
</head><body>
<h1 style="max-width:250px; overflow:hidden; border:solid 1px green; font-size:48px; padding:10px">
Eine Überschrift, bei der das Wort 'möglicherweise' möglicherweise zu breit
für 250px ist</h1>
</body></html>
Erläuterung:
Mit max-width: können Sie die Maximalbreite bestimmen. Erlaubt ist eine numerische Angabe.
Beachten Sie:
Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei positionierten Elementen ab Version 2.0.2.
Sie können bestimmen, wie hoch ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft overflow verwenden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>height</title>
</head><body>
<p><code>height</code> mit <code>overflow:hidden</code></p>
<h1 style="height:240px; width:300px; border:10px solid red; padding:10px; font-size:3em; overflow:hidden;">
Eine Überschrift, die möglicherweise höher ist als erlaubt</h1>
<p><code>height</code> ohne <code>overflow</code></p>
<h1 style="height:240px; width:300px; border:10px solid red; padding:10px; font-size:3em;">
Eine Überschrift, die möglicherweise höher ist als erlaubt</h1>
</body></html>
Erläuterung:
Mit height: können Sie die Höhe bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für automatische Höhe.
Beachten Sie:
Dass im obigen Beispiel wo nötig in der Höhe Text abgeschnitten wird, liegt nicht an der Eigenschaft height, sondern an der Angabe overflow:hidden. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht. Wird für overflow kein von visible abweichender Wert notiert, vergrößert der Internet Explorer bis Version 6 das Element so weit, bis der Inhalt vollständig sichtbar ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>min-height</title>
</head><body>
<div style="position:absolute; top:100px; left:100px; min-height:200px; border:solid 1px blue;
padding:10px"> Fasse dich kurz!</div>
</body></html>
Erläuterung:
Mit min-height: können Sie die Mindesthöhe bestimmen. Erlaubt ist eine numerische Angabe.
Beachten Sie:
Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Konqueror 3.1 interpretiert diese Angabe noch nicht bei absolut positionierten Elementen, ab Konqueror 3.3 stellt er auch solche absolut positionierte Elemente korrekt dar. Safari interpretiert min-height bei positionierten Elementen ab Version 2.0.2.
Sie können bestimmen, wie hoch ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft overflow verwenden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>max-height</title>
</head><body>
<h1 style="max-width:300px; max-height:300px; overflow:hidden; border:solid 1px green;
font-size:48px; padding:10px">Eine Überschrift, die möglicherweise zu hoch
ist für eine Box von 300 mal 300 Pixel</h1>
</body></html>
Erläuterung:
Mit max-height: können Sie die Maximalhöhe bestimmen. Erlaubt ist eine numerische Angabe.
Beachten Sie:
Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei positionierten Elementen ab Version 2.0.2.
Diese Angabe kann von Bedeutung sein, wenn Sie für ein Element oder einen Bereich eine feste oder maximale gewünschte Breite oder Höhe definieren. Angenommen, Sie definieren einen Bereich mit <div>...</div>, für den Sie mit Hilfe der Eigenschaft width eine Breite von effektiv 202 Pixel (da der Rahmen addiert wird) erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (<img>) notieren, bei der das Bild eine Breite von mehr als 200 Pixel aufweist, können Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lösen soll.
Mit overflow: können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:
visible = Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist. hidden = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet. scroll = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie bei einem eingebetteten Frame-Fenster. auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.
Beachten Sie:
Netscape 4.x beherrscht nur overflow:hidden korrekt. Der Internet Explorer bis Version 6 vergrößert bei visible das Element so weit, bis der Inhalt vollständig sichtbar ist. Opera bis Version 6 stellt auto wie visible und scroll wie hidden dar. Konqueror beherrscht die verschiedenen Angaben erst ab Version 3.4 korrekt.
Mit dieser Angabe können Sie die Schreibrichtung bei Elementen erzwingen, und abhängig davon auch, in welche Richtung beispielsweise Breitenangaben berechnet werden, oder an welcher Seite überbreite Inhalte mit overflow abgeschnitten werden. Die Schreibrichtung ist vor allem für die Darstellung von Schriftkulturen wie der arabischen gedacht, wo von rechts nach links geschrieben wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>direction</title>
</head><body style="direction:rtl">
<h1>Hi Junkie!</h1>
<p>Hier könnte möglicherweise alles anders aussehen als normal ...</p>
</body></html>
Erläuterung:
Mit direction: können Sie die Schreibrichtung bestimmen. Folgende Angaben sind möglich:
ltr = von links nach rechts. rtl = von rechts nach links.
Beachten Sie:
Die Browser der 4er-Generation interpretieren diese Angabe noch nicht.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>float</title>
</head><body>
<h1 style="width:400px; float:left; color:red">Überschrift mal anders</h1>
<p style="font-size:120%">Eine Überschrift
muss nicht immer einen langweiligen, über die ganze
Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal
seitlich vom Text stehen, und der Text fließt um die
Überschrift. Auch so kann man lange Texte mal anders gestalten als
sonst üblich.</p>
</body></html>
Erläuterung:
Mit float: können Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. Folgende Angaben sind möglich:
left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen. right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen. none = Kein Umfluss (Normaleinstellung).
Beachten Sie:
Wenn Sie für ein Element eine Angabe zu float notieren, mussten Sie gemäß CSS2 auch eine Angabe zu width definieren. Gemäß CSS 2.1 (und der tatsächlichen Umsetzung durch die Browser) ist dies nicht mehr erforderlich; die Breite richtet sich in diesem Fall nach dem Inhalt.
Wenn Sie mit float einen Textumfluss definieren, möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden Text dann unterhalb des umflossenen Elements fortsetzen. Dazu dient die hier beschriebene Angabe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>clear</title>
</head><body>
<div style="float:left; margin-right:20px; margin-bottom:20px;
border:solid 1px red; text-align:center">
Kapitel<br>
<span style="font-family:Algerian,serif; font-size:96px; color:red">
1 </span></div>
<p style="font-size:120%">In diesem Kapitel geht es um Einführendes.</p>
<p style="clear:left">Dann kommen wir mal zur Sache: ...</p>
</body></html>
Erläuterung:
Mit clear: können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind möglich:
left = Erzwingt bei float:left die Fortsetzung unterhalb. right = Erzwingt bei float:right die Fortsetzung unterhalb. both = Erzwingt in jedem Fall die Fortsetzung unterhalb. none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).
Im obigen Beispiel werden die Eigenschaften float und clear dazu genutzt, eine seitliche, große Kapitelnummer zu notieren, neben der Kapitelnummer einen kleinen Text, worum es in dem Kapitel geht, und unterhalb dieser beiden Elemente dann den normalen Text des Kapitels.
Diese Eigenschaft wirkt nur in Verbindung mit einer Angabe zu position. Wenn Sie mehrere Elemente positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Im Quelltext später notierte Elemente überdecken vorhergehende. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Werte vergeben. Elemente mit höherem Wert überdecken Elemente mit niedrigerem.
Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Per z-index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) überdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und B) können nicht zwischen diesen gestapelt werden.
Beachten Sie:
Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (z-index:-1) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) und weicht damit von Opera und Internet Explorer ab, die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen. Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die Spezifikation gemäß CSS 2.1 umsetzen.
Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Ohne Platzhalter" bedeutet, dass bei Nichtanzeige des Elements auch kein Raum für das Element reserviert wird. In diesem Fall deutet bei der Anzeige also zunächst nichts darauf hin, dass das Element überhaupt existiert. Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.
Ferner können Sie mit der hier beschriebenen Angabe bestimmen, wie ein Element angezeigt werden soll. Sie können bestimmen, dass es einen eigenen (absatzerzeugenden) Block bilden soll, oder dass es mitten im Text (inline) angezeigt werden soll. So können Sie beispielsweise absatzerzeugende Elemente wie Überschriften in Elemente umdefinieren, die keinen eigenen Absatz erzeugen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>display</title>
</head><body>
<h1 style="display:inline">Ich bin ein inline-Element</h1>
<p style="display:inline"> Dieser Text beweist es!</p>
<h1 id="versteckt" style="display:none">
Ich bin ein Block-Element, werde aber nicht angezeigt</h1>
<p>Und dieser Text tut so, als ob sonst nichts wäre!</p>
</body></html>
Erläuterung:
Mit display: können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. Folgende Angaben sind möglich:
block = Erzwingt einen Block - das Element erzeugt eine neue Zeile. inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt. inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element" wie img. Dieser Wert wird erst mit CSS 2.1 eingeführt. list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor. run-in = bewirkt, dass das Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird. none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.
In CSS2 waren noch die folgenden Werte vorgesehen, die jedoch wegen mangelnder Browserunterstützung in CSS 2.1 nicht übernommen werden: marker = sollte automatisch generierten Inhalt für das Element deklarieren. compact = sollte wie run-in bewirken, dass ein Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.
Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache übernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die display-Eigenschaft zu diesem Zweck auserkoren. Folgende Angaben sind in diesem Zusammenhang möglich:
table = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML. inline-table = Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline. table-row = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML. table-cell = Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente th und td in HTML. table-row-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML. table-header-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Kopfzeile einer Tabelle. Wirkt wie das thead-Element in HTML. table-footer-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Fußzeile einer Tabelle. Wirkt wie das tfoot-Element in HTML. table-column = Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das col-Element in HTML. table-column-group = Das Element enthält eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das colgroup-Element in HTML. table-caption. Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML (auch für th-Elemente).
Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut.
Beachten Sie:
Netscape 4.0 und der Internet Explorer 4.0 interpretieren die Angabe display:none korrekt. Die übrigen Angaben werden von der 4er-Versionen der beiden Browser jedoch nur unvollständig oder noch gar nicht interpretiert. Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 7 noch nicht.
Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Mit Platzhalter" bedeutet, dass bei Nichtanzeige des Elements trotzdem Raum für das Element reserviert wird. Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>visibility</title>
<script type="text/javascript">
function onoff () {
if (document.getElementById)
document.getElementById("Ueberschrift").style.visibility = "visible";
document.getElementById("Zeile").style.visibility = "collapse";
}
</script>
</head><body>
<h1 id="Ueberschrift" style="visibility:hidden">Die Überschrift zum Text</h1>
<p>Hier der Text. Aber fehlt da nicht was?</p>
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr id="Zeile">
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
<p><a href="javascript:onoff()">Überschrift anzeigen, Zeile B verstecken!</a></p>
</body></html>
Erläuterung:
Mit visibility: können Sie bestimmen, ob ein Element anfangs angezeigt wird oder nicht. Folgende Angaben sind möglich:
visible = Der Inhalt des Element wird angezeigt (Normaleinstellung). hidden = Der Inhalt des Element wird versteckt (nicht angezeigt). collapse = Spalten oder Reihen einer Tabelle werden versteckt und geben den zuvor benötigten Platz frei. Wirkt auf alle anderen Elemente wie hidden.
Im obigen Beispiel wird die Überschrift zunächst nicht, die Tabelle jedoch vollständig angezeigt. Beim Anklicken des Verweises wird dies jedoch dynamisch geändert. Auf die dazu erforderlichen JavaScript-Befehle wird an dieser Stelle nicht näher eingegangen.
Beachten Sie:
Lediglich Mozilla Firefox gibt in obigem Beispiel den für Zeile B reservierten Platz frei.
Sie können bestimmen, dass nur ein Ausschnitt eines Elements sichtbar angezeigt wird, unabhängig davon, welche Angaben sonst zur Größe des Elements gemacht wurden und unabhängig von der automatischen Größe des Elements. Wenn das Element größer ist als der so definierte Anzeigebereich, wird es an den Seiten entsprechend abgeschnitten. Derzeit können Sie nur ein Rechteck für den Ausschnitt definieren. In Zukunft sollen jedoch auch Polygone, Kreise bzw. Ellipsen möglich sein.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>clip</title>
</head><body>
<div style="position:absolute; top:100px; left:100px; clip:rect(0px, 130px, 130px, 0px);">
Etwas Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund"></div>
</body></html>
Erläuterung:
Mit clip: können Sie einen Ausschnitt für die sichtbare Anzeige definieren. Dahinter folgt der Bezeichner rect (für rectangle, = Rechteck), und dahinter, in runde Klammern eingeschlossen, vier durch Beistriche getrennte numerische Werte oder das Schlüsselwort auto zur Bestimmung des Ausschnitts.
Der erste der vier Werte bezeichnet den Wert für "oben", gemessen an der oberen Elementgrenze
Der zweite der vier Werte bezeichnet den Wert für "rechts", gemessen an der linken Elementgrenze
Der dritte der vier Werte bezeichnet den Wert für "unten", gemessen an der oberen Elementgrenze
Der vierte der vier Werte bezeichnet den Wert für "links", gemessen an der linken Elementgrenze
Damit überhaupt ein Ausschnitt sichtbar ist, muss der Wert für "unten" größer sein als der für "oben" und der Wert für "rechts" größer als der für "links". Das Schlüsselwort auto bedeutet: keine Angabe zu dem betreffenden Wert, das Element soll an der entsprechenden Seite bis zu seiner Elementgrenze angezeigt werden. Negative Werte sind gemäß CSS 2.1 nicht mehr erlaubt.
Beachten Sie:
Die Eigenschaft clip wirkt nur auf absolut positionierte Elemente, deren Wert für overflow von visible abweicht.
Im Internet Explorer funktioniert clip im standardkonformen Modus nur dann, wenn bei der Wertzuweisung auf die – gemäß CSS 2.1 nun zwingend vorgeschriebenen – Kommata verzichtet wird. Auch Version 7 ist von diesem Fehler betroffen.
Außenrand oder Abstand bedeutet: erzwungener Leerraum zwischen dem aktuellen Element und seinem Elternelement oder Nachbarelement. Für ein p-Element, also einen Textabsatz etwa, der direkt innerhalb des body-Elements notiert ist, markieren Angaben zu linkem und rechten Außenrand seinen Abstand zu den Elementgrenzen des body-Elements. Wenn mehrere solcher p-Absätze aufeinander folgen, markieren Angaben zum Außenrand oben und unten den Abstand zwischen den Absätzen. Das folgende Bild veranschaulicht die Möglichkeiten, Außenränder und Abstände zu definieren:
Sinnvoll sind die hier beschriebenen CSS-Eigenschaften für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address oder pre. Block-Elemente sind aber auch HTML-Elemente wie div und table. Auch auf body lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall werden Ränder für den gesamten sichtbaren Körper der HTML-Datei definiert.
Mit negativen Werten, also Angaben wie beispielsweise -50px, können Sie für besondere gestalterische Zwecke erreichen, dass sich Elemente überlappen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-top</title>
<style type="text/css">
h1,h2,h3 { margin-top:3em; }
div.beispiel { margin-top:100px; margin-left:200px; }
</style>
</head><body>
<h1>Überschrift erster Ordnung</h1>
<div class="beispiel">
Bereich mit der Beispiel-Klasse.
<h1>Überschrift erster Ordnung</h1>
</div>
</body></html>
Erläuterung:
Mit margin-top: können Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto oder inherit. Im obigen Beispiel wird für Überschriften 1., 2. und 3. Ordnung ein vorausgehender Abstand von 3em definiert. Ferner wird eine Klasse beispiel für das div-Element definiert. Solche Bereiche haben laut Definition im Beispiel 100 Pixel Abstand zu ihrem vorausgehenden Element (und 200 Pixel Abstand nach links, definiert mit margin-left).
Wenn das Vorgänger- oder Elternelement eine Angabe zu margin-bottom hat, gilt nur eine der beiden Angaben für den Gesamtabstand zwischen den beiden Elementen, und zwar diejenige, die den größten Abstand definiert. Wenn also ein erster Textabsatz margin-bottom:10px hat und ein folgender Textabsatz margin-top:15px, dann wird der Abstand zwischen beiden Absätzen auf 15px berechnet. Wenn eine der beiden Gegen-Angaben negativ ist, wird der tatsächliche Abstand zwischen den beiden Elementen aus dem Wert der positiven abzüglich der negativen Angabe berechnet.
Beachten Sie:
Bei Verwendung im body-Element bestimmt margin-top: den Abstand zum oberen Fensterrand.
Der Wert auto entspricht dem Ausgangswert 0 für diese Eigenschaft, setzt also lediglich einen zuvor definierten Wert zurück.
Einige frühe Netscape 4.x-Versionen beherrschen das Zusammenrechnen von Abstandsangaben oben und unten noch nicht und addieren beide Werte.
Sie können den rechten Abstand/Rand eines Elements festlegen. Wenn das Element einen rechten Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die erste der beiden), dann bedeutet die Angabe den Abstand zum rechts davon liegenden Element. Wenn das Element keinen rechten Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das body-Element festgelegt ist.). Wenn kein übergeordnetes Elternelement mehr da ist (also beim body-Element selbst), dann bezieht sich die Angabe auf den rechten Abstand des Dokumentinhalts vom Anzeigefenster.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-right</title>
<style type="text/css">
p { text-align:right; }
</style>
</head><body>
<p style="margin-right:1em">Dieser rechtsbündig ausgerichtete
Textabsatz hat einen Abstand von 1em zum rechten Rand.</p>
<p style="margin-right:3em">Dieser rechtsbündig ausgerichtete
Textabsatz hat einen Abstand von 3em zum rechten Rand.</p>
<!--usw.-->
</body></html>
Erläuterung:
Mit margin-right: können Sie den Rand/Abstand rechts bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto oder inherit.
Beachten Sie:
Der Wert auto setzt den rechten Abstand auf die gesamte noch zur Verfügung stehende Breite, wirkt sich also ohne Angabe zu margin-left nicht aus. Über margin-left:auto; margin-right:auto können Block-Elemente zentriert werden. Der Internet Explorer unterstützt dies allerdings bis zur Version 5.x noch nicht; Sie können jedoch dessen fehlerhafte Umsetzung von text-align zur Zentrierung von Block-Elementen ausnutzen.
Sie können bestimmen, wie viel Abstand ein Element zu seinem Nachfolgerelement nach unten hin hat, oder - wenn es das letzte Kindelement eines Elements ist - wie viel Abstand es zu dessen unterem Rand hin hat.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-bottom</title></head>
<body>
<p style="margin-bottom:3em">Dieser Textabsatz hat einen
Abstand von 3em zum darauffolgenden.</p>
<p style="margin-bottom:10%">Dieser Textabsatz hat einen
Abstand von 10% zum darauffolgenden.</p>
<p style="margin-bottom:50px">Dieser Textabsatz hat einen
Abstand von 50px zum darauffolgenden.</p>
<p>Dieser Textabsatz dient nur noch zu Vergleichszwecken und hat keinen
definierten Nachabstand.</p>
</body></html>
Erläuterung:
Mit margin-bottom: können Sie den Rand/Abstand nach unten bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto oder inherit. Für Hinweise zu addierenden Angaben für margin-bottom und margin-top bei aufeinanderfolgenden Elementen siehe margin-top.
Beachten Sie:
Bei Verwendung im body-Element bestimmt margin-bottom: den Abstand zum unteren Fensterrand.
Der Wert auto entspricht dem Ausgangswert 0 für diese Eigenschaft, setzt also lediglich einen zuvor definierten Wert zurück.
Bei Netscape 4.x hat die Angabe margin-top (für den Abstand oben) in jedem Fall Vorrang vor der Angabe margin-bottom (für den Abstand unten), weshalb dort das intelligente Addieren zwischen Angaben zu beiden Eigenschaften nicht so funktioniert wie es sollte.
Sie können den linken Abstand/Rand eines Elements festlegen. Wenn das Element einen linken Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die zweite der beiden), dann bedeutet die Angabe den Abstand zum links davon liegenden Element. Wenn das Element keinen linken Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das body-Element festgelegt ist). Wenn kein übergeordnetes Elternelement mehr da ist (also beim body-Tag selbst), dann bedeutet die Angabe den linken Abstand des Dokumentinhalts vom Anzeigefenster.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-left</title>
<style type="text/css">
body { margin-left:100px; }
p,div,table,ul,ol { margin-left:30px; }
</style>
</head><body>
<h1>Eine Überschrift erster Ordnung</h1>
<p>Ein Textabsatz, nochmals weiter eingezogen.</p>
<p>Noch einer davon.</p>
<h2>Eine Überschrift zweiter Ordnung</h2>
<ul>
<li>Ein Listenpunkt</li>
<li>Noch ein Listenpunkt</li>
</ul>
</body></html>
Erläuterung:
Mit margin-left: können Sie den Rand/Abstand links bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto oder inherit. Im obigen Beispiel wird zunächst ein globaler linker Seitenrand von 100 Pixeln definiert, indem diese Angabe dem body-Element zugewiesen wird. Für Fließtextabsätze, Bereiche, Tabellen, und Listen wird zusätzlich ein linker Rand von 30 Pixeln definiert, sodass sich bei diesen Elementen insgesamt ein linker Rand von 130 Pixeln zum linken Fensterrand ergibt. Überschriften etwa, für die nichts weiter festgelegt ist, erscheinen dann links ausgerückt.
Bei Nachbarelementen oder verschachtelten Elementen, bei denen Angaben zu margin-left und margin-right aufeinandertreffen, werden beide Angaben in jedem Fall addiert.
Beachten Sie:
Der Wert auto setzt den linken Abstand auf die gesamte noch zur Verfügung stehende Breite, kann also zur rechtsbündigen Ausrichtung von Block-Elementen verwendet werden. Der Internet Explorer setzt dies allerdings bis zur Version 5.x noch nicht um.
Wenn Sie beispielsweise zwei Grafiken nebeneinander referenzieren und dabei margin-leftangeben, reagiert Netscape 4.x zum Teil sehr unterschiedlich und nicht besonders nachvollziehbar.
Mit margin: können Sie den Rand/Abstand für oben, rechts, unten und links bestimmen. Erlaubt sind ein bis vier numerische Angaben oder die Werte auto und inherit.
Eine Angabe bedeutet: alle vier Ränder des Elements erhalten den gleichen Außenabstand.
Bei mehreren Angaben werden diese abhängig von deren Anzahl interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.
Die hier vorgestellten Eigenschaften kommen aus dem Bereich der Bildbearbeitung. Die Filter berechnen Effekte, die sich auf geeignete Objekte anwenden lassen.
Durch diese Filter werden zwar sehr interessante optische Effekte möglich. Auch kunstvolle Textgestaltung ist damit möglich, was manche Grafik ersparen hilft. Dennoch sind all die Eigenschaften für Filter kein CSS-Standard und ein proprietäres Leistungsmerkmal des Internet Explorer. Andere Browser interpretieren diese Eigenschaften nicht.
Sie können für einzelne Elemente Filter angeben, die das Element dynamisch verändern. Das Prinzip ist immer das gleiche.
Mit filter: können Sie einen Effekt-Filter bestimmen. Hinter dem Doppelpunkt folgt der Aufruf eines Filters. Einige Filter erwarten Parameter, andere nicht. Die Parameter und Ihre Wertangaben zu den Filtern notieren Sie in Klammern unmittelbar hinter dem Filternamen, so wie im obigen Beispiel (strength=50) als Parameter an den Filter Blur() übergeben wird mit einem Gleichheitszeichen. Wenn ein Filter keine Parameter erwartet, notieren Sie trotzdem die Klammern, lassen den Inhalt dazwischen aber leer.
Sie können auch mehrere Filter kombinieren. Im zweiten der obigen Beispiele werden etwa die beiden Filter Blur() und FlipH() kombiniert. Dazu dürfen Sie nur einmal das Schlüssenwort filter: notieren. Zwischen diesem Schlüsselwort und dem nächsten Semikolon (;) zum Abschließen der Stylesheet-Angabe können Sie mehrere Filter notieren. Trennen Sie die Filter durch ein Leerzeichen vor dem Namen des nächsten Filters, so wie im Beispiel vor FlipH().
Die Filter sind für die folgenden HTML-Elemente gedacht (bei anderen funktionieren sie nicht):
body (Effekt betrifft die gesamte angezeigte Seite) button (Effekt betrifft die Schaltfläche) div (Effekt betrifft den Bereich in Verbindung mit den Stylesheet-Angaben width: und/oder height: und/oder position:) img (Effekt betrifft die referenzierte Grafik) input (Effekt betrifft das Eingabefeld) marquee (Effekt betrifft den Lauftext) span (Effekt betrifft den Bereich in Verbindung mit den Stylesheet-Angaben width: und/oder height: und/oder position:) table (Effekt betrifft die Tabelle) td (Effekt betrifft die Datenzelle einer Tabelle) textarea (Effekt betrifft das mehrzeilige Eingabefeld) tfoot (Effekt betrifft den Fußbereich einer Tabelle) th (Effekt betrifft die Kopfzelle einer Tabelle) thead (Effekt betrifft den Kopfbereich einer Tabelle) tr (Effekt betrifft die Zeile einer Tabelle)
Beachten Sie:
Es gibt noch drei weitere Microsoft-Filter, die jedoch Script-Sprachen-Unterstützung benötigen.
Überhaupt werden diese Filter erst so richtig interessant, wenn sie dynamisch verändert werden. Lesen Sie dazu im Kapitel über Dynamisches HTML den Abschnitt Dynamische Filter (nur Microsoft).
Auf dieser Seite werden die Filter beschrieben, die mit dem Internet Explorer 4.0 eingeführt wurden. Mit der Version 5.5 seines Browsers hat Microsoft wieder eine neue, erweiterte Syntax eingeführt.
An die Stelle des Syntax-Schemas: filter:filtername(Eigenschaften)
tritt das neue Syntax-Schema: filter:progid:DXImageTransform.Microsoft.filtername(Eigenschaften)
Mit diesem Filter können Sie Vordergrundelemente mit Hintergrundelementen farblich verschmelzen. Der Filter erlaubt verschiedene Möglichkeiten, wie ein Vordergrundelement aus seinem Hintergrund "heraustreten" kann.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Alpha()</title>
</head><body>
<div style="background-image:url(background3.jpg); padding:20px; text-align:center">
<img src="filter_alpha.gif" style="filter:Alpha(opacity=100, finishopacity=0, style=2)" width="247" height="383" alt="Grafik"></div>
</body></html>
Erläuterung:
Mit filter:Alpha() können Sie Vordergrundelemente und Hintergrundelemente ineinander verschmelzen. Geeignet ist der Filter z.B. für Grafiken, die auf Hintergrundgrafiken erscheinen. Dieser Filter erwartet folgende Parameter:
opacity steht für den Deckgrad am Ursprung der Verschmelzung. Erlaubt sind Werte zwischen 0 und 100. Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100 bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).
finishopacity steht für den Deckgrad am Ende der Verschmelzung. Erlaubt sind Werte zwischen 0 und 100. Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100 bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).
style steht für die Art, in der der Filter wirkt. Erlaubt sind die Werte 0, 1, 2 und 3.
0 bedeutet: Hintergrund und Vordergrund werden farblich addiert. Das Vordergrundelement wird farblich entsprechend manipuliert. Keine Verschmelzung. Angaben zu den anderen Parametern sind in diesem Fall nicht erforderlich, d.h. Alpha(style=0) genügt.
1 bedeutet: linearer Verlauf von einem selbst definierbaren Anfangspunkt zu einem selbst definierbaren Endpunkt. Am Anfangspunkt gilt der Wert, der bei opacity angegeben wird. Ab dem Endpunkt verliert der Wert für opacity seinen Einfluss, und der Wert für finishopacity dominiert. Den Anfangspunkt bestimmen Sie durch startx und starty, den Endpunkt durch finishx und finishy.
2 bedeutet: radialer (elliptischer) Verlauf von innen nach außen. Ganz innen gilt der angegebene Wert für opacity, ganz außen der angegebene Wert für finishopacity. In diesem Fall können Sie Angaben zu startx, starty, finishx und finishy weglassen, so wie im obigen Beispiel.
3 bedeutet: rechteckiger Verlauf von innen nach außen. Ganz innen gilt der angegebene Wert für opacity, ganz außen der angegebene Wert für finishopacity. In diesem Fall können Sie Angaben zu startx, starty, finishx und finishy weglassen, so wie im obigen Beispiel.
startx steht für den Anfangspunkt vom linken Rand aus gesehen in Prozent relativ zur Breite des Elements. Nur in Verbindung mit style=1 von Bedeutung.
starty steht für den Anfangspunkt vom oberen Rand aus gesehen in Prozent relativ zur Höhe des Elements. Nur in Verbindung mit style=1 von Bedeutung.
finishx steht für den Endpunkt vom linken Rand aus gesehen in Prozent relativ zur Breite des Elements. Nur in Verbindung mit style=1 von Bedeutung.
finishy steht für den Endpunkt vom oberen Rand aus gesehen in Prozent relativ zur Höhe des Elements. Nur in Verbindung mit style=1 von Bedeutung.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Blur()</title>
</head><body>
<p>links das Bild in seiner normalen Form, rechts mit Blur()-Filter:</p>
<p><img src="filter_blur.jpg" width="91" height="177" alt="Bild">
<img src="filter_blur.jpg" width="91" height="177" alt="Bild"
style="filter:Blur(direction=45, strength=40)"></p>
<p style="width:100%; padding:20px; font-size:56px; color:red;
filter:Blur(direction=235, strength=6)">Text mit Blur-Effekt</p>
</body></html>
Erläuterung:
Mit filter:Blur() können Sie einen Verwisch-Effekt definieren. Geeignet ist der Filter für Grafiken. Dieser Filter erwartet folgende Parameter:
Den Parameter add brauchen Sie nur anzugeben, wenn Sie add=0 notieren wollen. Dann erscheinen die Konturen der Grafik gar nicht mehr, und am Bildschirm erscheint nur noch die Verwischspur. Der Effekt wird dadurch sehr stark, die eigentliche Grafik ist oft nicht mehr zu erkennen.
direction steht für die Richtung, in die die Verwischspur führt. Es wirkt dann so, als ob die Grafik aus dieser Richtung kommt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Die Verwischspur zeigt nach oben.
45 bedeutet: Die Verwischspur zeigt nach oben rechts.
90 bedeutet: Die Verwischspur zeigt nach rechts.
135 bedeutet: Die Verwischspur zeigt nach unten rechts.
180 bedeutet: Die Verwischspur zeigt nach unten.
225 bedeutet: Die Verwischspur zeigt nach unten links.
270 bedeutet: Die Verwischspur zeigt nach links.
315 bedeutet: Die Verwischspur zeigt nach oben links.
strength steht für die Stärke des Verwisch-Effektes. 0 bedeutet keinen Verwisch-Effekt, jeder höhere Wert die Verwischspur in Pixeln. Beachten Sie jedoch, dass die Grafik innerhalb ihrer normalen Bildgröße dargestellt wird. Verwischspuren von Konturen, die sehr nah am Bildrand sind, werden nur bis zum Bildrand gezogen.
Mit diesem Filter können Sie bei Grafiken eine Farbe als transparent definieren. Anders als bei transparenten GIF-Grafiken werden jedoch auch alle anderen Farben der Grafik betroffen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Chroma()</title>
</head><body>
<p>links das Bild in seiner normalen Form, rechts mit Chroma()-Filter:</p>
<p><img src="filter_chroma.gif" width="106" height="109" alt="Bild">
<img src="filter_chroma.gif" style="filter:Chroma(color=#DDBB99)" width="106" height="109" alt="Bild"></p>
</body></html>
Erläuterung:
Mit filter:Chroma() können Sie eine Farbe in einer Grafik als transparent definieren. Der Filter erwartet folgenden Parameter:
Dieser Filter bewirkt einen Schatteneffekt für alle Konturen eines Elements. Bei Text bilden die Zeichen die Konturen, bei Grafiken sollten Sie nur solche für den Filter benutzen, die eindeutige Konturen haben, z.B. Cliparts.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:DropShadow()</title>
</head><body>
<div style="width:100%; font-size:85px; color:blue; filter:DropShadow(color=#C0C0C0, offx=3, offy=3)">
Text mit Schattenwurf</div>
</body></html>
Erläuterung:
Mit filter:DropShadow() können Sie einen Schattenwurf erzwingen. Der Filter erwartet folgende Parameter:
color steht für die Farbe, die als Schatten definiert werden soll (siehe Farbangaben).
offx steht für die Anzahl an horizontalen Pixel für den Schatteneffekt. Positive Zahlen bewirken einen Schatteneffekt rechts, negative einen Schatteneffekt links.
offy steht für die Anzahl an vertikalen Pixel für den Schatteneffekt. Positive Zahlen bewirken einen Schatteneffekt unten, negative mit Minuszeichen davor einen Schatteneffekt oben.
Den Parameter positive sollten Sie nur angeben, wenn Sie nur für die transparenten Pixel einer Grafik (siehe transparente GIF-Grafiken) einen Schatteneffekt erzwingen wollen. Dazu sollte dieser Parameter den Wert 1 erhalten.
Beachten Sie:
Für verlaufende Schatten können Sie den Filter für filter:Shadow() verwenden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Glow()</title>
</head><body>
<div style="width:100%; font-size:85px; color:#9999CC;
filter:Glow(color=#000000, strength=12)">Glühender Text</div>
</body></html>
Erläuterung:
Mit filter:Glow() können Sie einen glühenden Rand definieren. Dieser Filter erwartet folgende Parameter:
color steht für die Farbe, die als Glühfarbe definiert werden soll (siehe Farbangaben).
strength steht für die Stärke der Wirkung. Erlaubt sind Werte zwischen 1 und 255, praxisgerecht sind aber in den meisten Fällen nur Werte zwischen 1 und etwa 20.
Dieser Filter ist für transparente GIF-Grafiken gedacht. Er ersetzt alle transparenten Pixel der Grafik durch eine gewünschte Farbe und stattdessen alle nicht-transparenten Pixel der Grafik durch die Farbe, die in der Grafik als transparent definiert ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Shadow()</title>
</head><body>
<div style="width:100%; font-size:64px; color:magenta; filter:Shadow(color=#000000, direction=45)">
Text mit Schatten</div>
</body></html>
Erläuterung:
Mit filter:Shadow() können Sie einen Schatten erzeugen. Dieser Filter erwartet folgende Parameter:
color steht für eine Schattenfarbe (siehe Farbangaben).
direction steht für die Richtung, in die der Schatteneffekt führt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Der Schatteneffekt zeigt nach oben.
45 bedeutet: Der Schatteneffekt zeigt nach oben rechts.
90 bedeutet: Der Schatteneffekt zeigt nach rechts.
135 bedeutet: Der Schatteneffekt zeigt nach unten rechts.
180 bedeutet: Der Schatteneffekt zeigt nach unten.
225 bedeutet: Der Schatteneffekt zeigt nach unten links.
270 bedeutet: Der Schatteneffekt zeigt nach links.
315 bedeutet: Der Schatteneffekt zeigt nach oben links.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Wave()</title>
</head><body>
<div style="width:100%; font-size:123px; font-weight:900; color:#FFCCFF;
filter:Wave(freq=5, lightstrength=20, phase=50, strength=6) Shadow(color=#808080, direction=135);">
Wave-Text</div>
</body></html>
Erläuterung:
Mit filter:Wave() können Sie eine wellenartige Verzerrung definieren. Dieser Filter erwartet folgende Parameter:
freq steht für die Wellenfrequenz. Je höher der Wert, desto kleiner die Wellen, je niedriger, desto größer die einzelnen Wellen. Praxisnah sind etwa Werte zwischen 5 und 50.
lightstrength steht für die Stärke des Lichts im Welleneffekt in Prozent. Werte zwischen 0 und 100.
phase steht für den Beginn der Sinus-Wellenphase in Prozent. Werte zwischen 0 und 100. Bei 0 beginnt der Welleneffekt normal, bei 25 etwa beginnt er bei 90°.
strength steht für die Stärke des gesamten Effekts. Praxisnah sind z.B. Werte zwischen 1 und 10.
add steht für die Anzeige der Originalgrafik. add=1 bewirkt, dass die Originalgrafik zu der verzerrten Grafik hinzugefügt wird. Bei add=0 wird die Originalgrafik nicht hinzugefügt.
Tabellen werden erst seit CSS2 gesondert behandelt und haben eigene CSS-Eigenschaften. Dennoch gibt es auch eine Menge Eigenschaften von CSS1, die sich auf Tabellen, Spalten und Zeilen anwenden lassen. Auf die HTML-Elemente table, tr, colgroup, col, thead, tbody, tfoot, th und td lassen sich Formatierungen anwenden wie:
Vor allem aber bei Rahmen genügen die dafür üblichen CSS-Eigenschaften alleine nicht, um den Anforderungen an das Gitternetz einer Tabelle gerecht zu werden. Deshalb bietet CSS2 die Möglichkeit an, zwei verschiedene Rahmenmodelle zu unterscheiden. Dadurch kann dem Browser mitgeteilt werden, wie er die Außenrahmen zweier angrenzender Tabellenzellen behandeln soll.
Für Angaben zur Breite und Höhe von Tabellenspalten oder -zeilen sind die CSS-Eigenschaften width und height zwar geeignet, doch ist es wirklich manchmal wünschenswert, dass vorgegebene Breiten und Höhenangaben in jedem Fall und auch mal mit Priorität vor dem Inhalt der Zellen behandelt werden. Diese Option ist nun mit CSS2 für Tabellen einstellbar.
Andere tabellenspezifische Eigenschaften regeln Angaben, die auch in HTML in Form von Attributen möglich sind. Die entsprechenden Attribute sind in HTML 4.0 jedoch als "deprecated" gekennzeichnet, also als künftig unerwünscht. Stattdessen sollen die hier beschriebenen CSS-Eigenschaften verwendet werden.
Weiterhin wichtig im Zusammenhang mit Tabellen ist seit CSS2 die an anderer Stelle beschriebene CSS-Eigenschaft display. Damit ist es möglich, Tabelleneigenschaften auf andere Elemente als Tabellenelemente anzuwenden. Das mag sich zwar für HTML komisch anhören, aber CSS ist ja auch eine mögliche Style-Sprache zur Darstellung von XML-Daten. Und da es in XML keine Möglichkeit gibt, ein Element mit semantischen Eigenschaften wie "Tabellenzelle" oder "Tabellenzeile" auszuzeichnen, muss das die Style-Sprache übernehmen, die solche Daten anzeigt.
Sie können für Tabellen in HTML mit dem caption-Element eine Tabellenüberschrift bestimmen. Mit der hier beschriebenen Stylesheet-Angabe können Sie die Position dieser Überschrift festlegen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>caption-side</title>
</head><body>
<table border="1">
<caption style="caption-side:bottom">Assoziationen</caption>
<tr>
<th>Berlin</th><th>Hamburg</th><th>München</th>
</tr><tr>
<td>Miljöh</td><td>Kiez</td><td>Bierdampf</td>
</tr><tr>
<td>Buletten</td><td>Frikadellen</td><td>Fleischpflanzerl</td>
</tr></table>
</body></html>
Erläuterung:
Mit caption-side: können Sie die Position der Tabellenüberschrift bestimmen. Folgende Angaben sind erlaubt:
top = oberhalb der Tabelle. bottom = unterhalb der Tabelle.
In CSS2 waren noch die folgenden Werte vorgesehen, die jedoch wegen mangelnder Browserunterstützung in CSS 2.1 nicht übernommen werden:
left = links neben der Tabelle. right = rechts neben der Tabelle.
Beachten Sie:
Diese Eigenschaft wird auch vom Internet Explorer 7 noch nicht interpretiert.
Mit dieser Eigenschaft können Sie entscheiden, wie der Browser Breitenangaben zur Tabelle und zu Tabellenspalten behandeln soll, die Sie mit der CSS-Eigenschaft width angeben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>table-layout</title>
<style type="text/css">
table { width:100%; }
td { border:1px solid #000; vertical-align:top; overflow:hidden; }
</style>
</head><body>
<h1>table-layout</h1>
<h2>table-layout:auto ohne Breitenangabe</h2>
<table>
<tr>
<td>ohne Breitenangabe</td>
<td>ohne Breitenangabe</td>
<td>ohne Breitenangabe - Spalten mit höherem Platzbedarf wird [...] </td>
</tr>
</table>
<h2>table-layout:fixed ohne Breitenangabe</h2>
<table style="table-layout:fixed">
<tr>
<td>ohne Breitenangabe</td>
<td>ohne Breitenangabe</td>
<td>ohne Breitenangabe - Der verfügbare Platz wird unabhängig [...] </td>
</tr>
</table>
<h2>table-layout:fixed mit teilweiser Breitenangabe</h2>
<table style="table-layout:fixed">
<tr>
<td style="width:25%">width:25%</td>
<td style="width:120px">width:120px Donaudampfschifffahrtsgesellschaft</td>
<td>ohne Breitenangabe - Noch verfügbarer Platz wird auf alle Spalten ohne [...] </td>
</tr>
</table>
<h2>table-layout:fixed mit Breitenangabe in allen Spalten</h2>
<table style="table-layout:fixed">
<tr>
<td style="width:25%">width:25%</td>
<td style="width:25%">width:25%</td>
<td style="width:25%">width:25% - Ist die Breite der gesamten Tabelle [...] </td>
</tr>
</table>
</body></html>
Erläuterung:
Mit table-layout: beeinflussen Sie die Tabellenanzeige bei Breitenangaben. Folgende Angaben sind erlaubt:
auto = Zelleninhalt hat Vorrang vor Breitenangaben (Voreinstellung). fixed = Breitenangaben haben Vorrang vor dem Zelleninhalt.
Der Einsatz des Wertes fixed hat zur Folge, dass sich die Zellenbreite nicht wie herkömmlich an deren Inhalt orientiert, sondern an der mittels width explizit vorgegebenen Breite der Spalten der ersten Zeile. Wurde für eine oder mehrere Spalten keine Breite definiert, wird noch verfügbarer Platz auf diese aufgeteilt. Wurden alle Spalten mit einer Breite versehen und ist für die Tabelle insgesamt eine größere Breite definiert, als sich aus der Addition aller Spaltenbreiten ergibt, wird zusätzlich vorhandener Platz unter Berücksichtigung von Rahmenbreiten und Zellabständen zu gleichen Teilen auf alle Spalten aufgeteilt. Wie ein für eine Zelle zu breiter Inhalt dargestellt wird, ergibt sich aus dem Wert der Eigenschaft overflow.
Beachten Sie:
table-layout:fixed wird vom Internet Explorer 5.0 nur mit Breitenangaben für alle Spalten korrekt interpretiert. Ferner gilt für 5.0 und alle späteren Versionen, dass table-layout:fixed irrtümlich auch ohne der explizit notwendigen Angabe von width berücksichtigt wird. Safari hat Schwierigkeiten mit gemischten Breitenangaben.
Mit border-collapse: beeinflussen Sie die Art, wie Einzelrahmen benachbarter Tabellenzellen reagieren. Folgende Angaben sind erlaubt:
separate = Zellenrahmen fallen nicht zusammen (Ausgangswert seit CSS 2.1). collapse = Zellenrahmen fallen zusammen (Ausgangswert in CSS2).
Bei der Angabe collapse kommt es zu Konflikten zwischen Rahmenformatierungen einzelner Zellen. Rahmen, die dabei in jedem Fall Vorrang haben sollen und den gemeinsamen Grenzrahmen der Nachbarzelle überlagern sollen, müssen zu diesem Zweck die CSS-Angabe border-style:hidden erhalten. Rahmen, die in jedem Fall nachrangig sein sollen und von dem Grenzrahmen der Nachbarzelle überlagert werden sollen, müssen die CSS-Angabe border-style:none erhalten. Wenn keine der Zellen die Angabe border-style:hidden enthält, aber eine davon die Angabe border-style:none, entscheidet die Breitenangabe (border-width) zum Rahmen, welche Formatierung beim gemeinsamen Grenzrahmen Vorrang hat. Breitere Rahmen haben dann den Vorrang. Falls auch die Breitenangabe keine Konfliktlösung bringt, da die Breitenangaben gleich sind, dann entscheidet die folgende Reihenfolge von Rahmentypen (border-style:): double, solid, dashed, dotted, ridge, outset, groove, inset.
Das folgende Schaubild verdeutlicht den Zusammenhang:
Wenn eine HTML-Tabelle nicht am Bildschirm angezeigt oder ausgedruckt wird, sondern von einem Sprecher oder Sprachausgabesystem vorgelesen wird (z.B. für Sehbehinderte), entsteht das Problem, dass ein zweidimensionaler Raum eindimensional in der Zeit gelesen werden soll. Mit der hier beschriebenen Angabe können Sie für diesen Fall entscheiden, ob der Inhalt von Kopfzellen bei jeder ihr untergeordneten Datenzelle erneut wiedergegeben werden soll, oder ob der Kopfzelleninhalt nur einmal wiedergegeben werden soll.
Mit speak-header: können Sie das Wiedergabeverhalten für Kopfzelleninhalte bestimmen. Das obige Beispiel bewirkt, dass die Kopfzelle 1 vor den Datenzellen 1 und 3 jeweils wiederholt wird, während die Kopfzelle 2 nur einmal ausgegeben wird. Folgende Angaben sind erlaubt:
always = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen. once = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung).
Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung einen großen Schriftgrad aufweisen, in der Schriftart Helvetica, aber nicht fett erscheinen und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit reinem HTML nicht möglich.
Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Möglichkeiten. So können Sie HTML-Elemente - egal ob Textabsätze, Listen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausstatten. Sie können Elemente im Anzeigefenster des WWW-Browsers positionieren und Abstände definieren. Für Print-Layouts stehen Möglichkeiten zur Definition von Seiten-Layout und Textflusskontrolle bereit. Für die akustische Wiedergabe von Web-Seiten gibt es ein ganzes Arsenal an Eigenschaften, um die künstliche Sprachausgabe zu steuern. Einige CSS-Eigenschaften sind auch in der Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das Aussehen des Cursors.
Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können Sie beispielsweise in einer externen Datei zentrale Definitionen zum Aussehen eines Elements notieren und dieses Stylesheet in viele HTML-Seiten parallel einbinden. Alle Elemente der entsprechenden HTML-Dateien erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner. Sie können Ihre Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.
Stylesheets unterstützen also die professionelle Gestaltung beim Web-Design und helfen beim Corporate Design für große Projekte oder für unternehmensspezifische Layouts.
Genau wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich also um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Für CSS gibt es genau wie für HTML eine Arbeitsgruppe beim W3-Konsortium, die sich um die Weiterentwicklung der Sprache kümmert und sich dabei dem Regelwerk zur Entstehung der so genannten Recommendations (Empfehlungen) des W3-Konsortiums unterzieht.
Wie bei HTML, so gibt es auch bei CSS Sprachversionen, die auf den Neuauflagen der Recommendations basieren. Die Version 1.0 von CSS wurde bereits im Jahr 1996 herausgegeben und 1999 nochmals überarbeitet. 1998 erhielt die Version 2.0 den Status einer Empfehlung. Mittlerweile wird an den Versionen 2.1 und 3.0 parallel gearbeitet. Bei CSS 2.1 handelt es sich um eine korrigierte und geringfügig ergänzte Fassung der zweiten Ausgabe, deren vollständige Bezeichnung CSS Level 2 Revision 1 lautet. Sie ersetzt CSS 2, wird voraussichtlich im Laufe des Jahres 2007 den Status einer Empfehlung erlangen und in der vorliegenden Dokumentation bereits berücksichtigt. Folgende Symbole werden zur Auszeichnung der Sprachversionen verwendet:
Symbol
Bedeutung
Bestandteil der ersten CSS-Version.
Bestandteil der zweiten CSS-Version.
Bestandteil der aktualisierten zweiten CSS-Version.
Es gibt mehrere Sprachen zum Definieren von Stylesheets, CSS ist nur eine davon. Aber es ist diejenige Sprache, die speziell als Ergänzung für HTML geschaffen wurde und deshalb für HTML-basierte Web-Seiten optimiert ist. CSS steht für "Cascading Style Sheets". Andere Style-Sprachen sind die "Document Style Semantics and Specification Language" (DSSSL), die für SGML konzipiert wurde und ebenso wie SGML etwas "sophisticated" ist und die mittlerweile bekanntere "Extensible Stylesheet Language" (XSL), die als Formatierungssprache für XML entwickelt wurde (zu XSL siehe auch Darstellung von XML-Daten).
Im Web können Sie die bisherige Entwicklung und die Weiterentwicklung von CSS auf den Seiten des W3-Konsortiums verfolgen:
Netscape 4.x, der mittlerweile als ausgestorben gelten darf, interpretierte viele Eigenschaften der CSS-Version 1.0 und einen Teil der Eigenschaften der CSS-Version 2.0. Der Internet Explorer kennt weite Teile der CSS-Version 1.0 bereits seit seiner Produktversion 3.0 aus dem Jahr 1996. In der Version 4.0 interpretiert er einen Teil der CSS-Version 2.0 und einige spezielle, von Microsoft eingeführte Eigenschaften. Auf dem Niveau der 4er-Generation beider Browser ist die CSS-Implementierung jedoch noch äußerst unvollständig und recht unterschiedlich, und speziell beim 4er-Netscape gibt es zum Teil noch haarsträubende Fehler. Seit der 5er-Version des Internet Explorer ist die Situation zwar etwas besser geworden, allerdings weist der Microsoft-Browser bis einschließlich Version 6 viele gravierende Schwächen auf. Opera befindet sich in Sachen CSS spätestens seit seiner 5er-Version ebenfalls auf hohem Niveau.
Die umfassendste Implementierung bieten derzeit die aus dem Mozilla-Projekt hervorgegangenen Browser (Mozilla, Firefox, Camino und Netscape ab Version 6), Opera 9 und die beiden auf dem quelloffenen Darstellungsmodul WebKit basierenden Browser Safari (Mac OS X) und Konqueror (Linux). Microsoft machte mit der Veröffentlichung des Internet Explorer 7 einiges an Boden gut, verfehlt das Niveau der Konkurrenz jedoch immer noch deutlich.
Dieser Umstand gebietet es daher, Web-Seiten ausführlich mit verschiedenen Browsern auszutesten. Die CSS-Implementierungen sind einfach noch nicht so einheitlich oder vollständig, als dass Sie darauf vertrauen können, dass alles in jedem Browser genauso aussieht wie in dem, mit dem Sie bevorzugt arbeiten. Schließlich entwickeln Sie für Ihre Besucher und nicht für sich selbst. Ferner sollte Ihnen bewusst sein, dass die optische Wirkung von Web-Seiten auch stark von der eingesetzten Hardware abhängig ist. Web-Seiten werden nun mal nicht nur auf High-End-Computern mit 22-Zoll-Bildschirmen und 16,7 Millionen Farben gelesen. Sie werden auch mit Sub-Notebooks, Handheld-Computern sowie Handys gelesen und mit veralteten PCs angezeigt. Gerade die unterschiedlichen Technologien, die heute im Bereich der Bildschirme auf dem Markt sind, sorgen für sehr unterschiedliche Wirkungen etwa von Farben. Was auf dem einen Bildschirm als beige wirkt, sieht auf dem nächsten aus wie schweinchenrosa. Zwar lassen sich Bildschirme kalibrieren, doch Sie können ja schlecht vom Anwender verlangen, dass er vor dem Betrachten Ihrer Web-Seiten erst seinen Bildschirm neu einstellt. Immerhin besteht ab CSS2 die Möglichkeit, unterschiedliche CSS-Formate für unterschiedliche Ausgabemedien zu definieren. Damit lassen sich viele, jedoch nicht alle Klippen umschiffen.
Zu bedenken ist weiterhin, dass Schriftgrößenangaben in CSS am Bildschirm nicht zwingend zu einheitlichen Ergebnissen führen. Während im Print-Bereich eine 10-Punkt-Schrift immer gleich groß ist, weil nun mal definiert ist, wie groß ein Punkt ist, werden solche Angaben am Bildschirm in Pixel umgerechnet. Dabei ist aber wiederum nicht festgelegt, wie groß ein Pixel ist. Und nicht einmal die Umrechnungsfaktoren sind die gleichen. So rechnet etwa Windows Schriftgrößenangaben anders in Pixel um als etwa grafische Oberflächen unter Linux oder als das Macintosh-Betriebssystem OS X. Ferner bieten moderne Browser die Möglichkeit, Schriftgrade an die Bedürfnisse des Nutzers anzupassen, worauf ebenfalls Bedacht zu nehmen ist. Kurzum - vieles in CSS steht nur genau in der Datei, aber die Ergebnisse am Bildschirm können doch recht unterschiedlich und nicht selten unbefriedigend sein. Testen Sie daher mit möglichst vielen Browsern, um keine Besucher zu verärgern. Idealerweise entwickeln Sie unter Zuhilfenahme der obgenannten qualitativ hochwertigen Browser und korrigieren anschließend Darstellungsfehler in fehlerbehafteten Exemplaren.
Ein ganz wichtiger Aspekt beim Entwerfen von Stylesheets für Web-Seiten sind aber auch die Menschen, die diese Web-Seiten als Besucher betrachten sollen. Es gibt nicht wenige Menschen, die Farben und Formen oder kleine Schrift aufgrund visueller Schwächen nur eingeschränkt wahrnehmen können. Was Sie beim Designen vielleicht als "edel" empfinden, empfinden solche Menschen nur noch als "unleserlich". Und "unleserlich" bedeutet: Sie haben wieder einen Besucher weniger auf Ihren Seiten. Stylesheets verführen aufgrund ihrer Möglichkeiten leicht zur Verwendung ungewöhnlicher Schriftarten oder zu Dingen wie Ton-in-Ton-Farbgebung. So "schön" das auch aussehen mag - es kann je nach Anzeigegerät und visuellem Auflösungsvermögen beim Betrachter schnell auf Kosten der "Usability" (Benutzbarkeit) und damit der Zweckmäßigkeit gehen. Andererseits können Sie Stylesheets auch explizit dafür nutzen, um Seiten für sehschwache Menschen zu optimieren. Ordentliche Farbkontraste, Schriftarten im normalgroßen Bereich, übliche Schriftweiten und Zeilenhöhen, Vermeidung von kritischen Farbkombinationen wie rot/grün bei Hintergrund/Vordergrund - das sind Eigenschaften, die gut besuchte Web-Seiten aufweisen sollten.
Wenn Sie Web-Seiten gestalten, müssen Sie daraus Ihre eigenen Konsequenzen ziehen. Stylesheets erlauben Ihnen völlig neue Möglichkeiten beim Web-Seiten-Layout. Je intensiver Sie Ihre Layouts jedoch von ungewöhnlichen Stylesheet-Effekten abhängig machen, desto problematischer können die Seiten auf schwacher Hardware, bei sehschwachen Menschen oder Nutzern veralteter Browser wirken. Zwar gibt es außer textbasierten Browsern wie Lynx kaum noch Browser mit nennenswerter Verbreitung, die Stylesheets gar nicht unterstützen, doch gerade der Internet Explorer als Browser mit dem bislang höchsten Marktanteil sorgt hinsichtlich CSS für die eine oder andere Überraschung. Bedenken Sie auch, dass das Publikum Ihre Vorstellungen von gutem Design nicht immer teilen muss und CSS eventuell gar gänzlich deaktiviert. Was bleibt, ist die reine HTML-Darstellung. Zu diesem "Härtetest" sollten Sie sich auf jeden Fall zwingen, um zu begutachten, ob die Reihenfolge der Inhalte deren Wichtigkeit entspricht.
Stylesheets bestehen aus Formaten, die Sie für bestimmte HTML-Elemente oder für eine bestimmte Auswahl von HTML-Elementen definieren. Zum Auswählen einer bestimmten Gruppe von HTML-Elementen, für die ein Format gelten soll, gibt es in CSS die Syntax der so genannten Selektoren. CSS-Formate lassen sich entweder in einem zentralen Style-Bereich definieren, in einer externen CSS-Datei oder direkt im einleitenden Tag eines HTML-Elements.
CSS-Formate bestehen aus einer oder mehreren Eigenschaften und Wertzuweisungen an diese Eigenschaften. So können Sie beispielsweise ein Format für Überschriften 3. Ordnung definieren, bei dem Sie für Eigenschaften wie Schriftgröße, Schriftfarbe und Absatz-Abstand entsprechende Werte bestimmen.
Die nachfolgende Regel setzt sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt) und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:
Selektor { Eigenschaft:Wert; }
Die Kombination aus Eigenschaft und Wert wird als Deklaration bezeichnet.
Im Kapitel CSS-Formate definieren wird beschrieben, an welchen Stellen Sie CSS in HTML einbinden können, wie die Selektion von HTML-Elementen funktioniert und welche generellen Regeln für Format-Definitionen gelten. Das Kapitel CSS-Eigenschaften beschreibt dagegen systematisch die einzelnen möglichen Eigenschaften für die Element-Formatierung, die Sie innerhalb von Formaten notieren können, und mögliche Wertzuweisungen für diese Eigenschaften. Im Kapitel CSS-basierte Layouts schließlich wird gezeigt, wie die Möglichkeiten von CSS praktisch zur Gestaltung von Web-Seiten genutzt werden können.
selfhtml-8.1.2.orig/css/formate/anzeige/box_modell_verschachtelung.htm 0000644 0001750 0001750 00000001424 10246426130 024432 0 ustar uwe uwe
Box-Modell: Workaround bei Dokumenttyp HTML 4.01 Transitional ohne URI
Workaround bei Dokumenttyp-Deklaration HTML 4.01 Transitional ohne URI:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Bei numerischen Angaben zu CSS-Eigenschaften, also etwa bei Schriftgrößen, Absatzabständen oder Rändern, stehen Ihnen die weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozent gegenüber "normal") möglich. Benutzen Sie für Ihre Angaben die folgenden Abkürzungen:
Abkürzung
Angabetyp
Bedeutung
Beispiele
pt
absolut
Steht für Punkt. Typografische Maßeinheit. 1 Punkt entspricht 1/72 Inches.
font-size:12pt; line-height:14pt;
pc
absolut
Steht für Pica. Typografische Maßeinheit. 1 Pica entspricht 12 Punkt.
font-size:1pc; line-height:1.2pc;
in
absolut
Steht für Inch. Allgemeines Längenmaß im angelsächsischen Raum. 1 Inch entspricht 2.54 Zentimetern.
border-width:0.1in; margin-left:1in;
mm
absolut
Steht für Millimeter. Allgemeines Längenmaß. 1000. Teil des Urmeters.
margin-bottom:10mm; width:70mm;
cm
absolut
Steht für Zentimeter. Allgemeines Längenmaß. 100. Teil des Urmeters.
font-size:1cm; top:2.54cm;
px
absolut/relativ
Steht für Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen.
border-width:3px; margin-right:60px;
em
relativ
Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Schriftgröße des Elternelements.
font-size:1.2em; line-height:1.5em;
ex
relativ
Steht für bezogen auf die Höhe des Kleinbuchstaben x in diesem Element. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Höhe des Kleinbuchstaben x im Elternelement.
text-transform:uppercase; font-size:1.3ex;
%
relativ
Steht für Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size) zu interpretieren.
font-size:10pt; line-height:120%;
Benutzen Sie bei numerischen Bruchzahlen stets den Punkt als Dezimalzeichen, nicht das deutsche Komma, also etwa 0.2cm und nicht 0,2cm. Auch Minuswerte sind bei einigen Wertzuweisungen möglich, markiert wie üblich durch das Minuszeichen.
Sie können also sehr exakte Angaben notieren, doch Web-Seiten werden in der Regel auf Bildschirmen ausgegeben, und Bildschirme bestehen heutzutage aus Pixeln, wobei die Pixeldichte der einzelnen Bildschirme sehr unterschiedlich sein kann. Der Computer muss Ihre Angaben für die Ausgabe am Bildschirm letztlich in Pixel umrechnen. Dabei kann es zu enttäuschenden Ergebnissen kommen. So erscheinen Schriftgrößen, die an einem Bildschirm gut lesbar sind, in einer anderen Umgebung eventuell als zu klein. Leider sind daran auch die unterschiedlichen Basiseinstellungen der Betriebssysteme mit schuld. So wird unter Windows-Systemen eine Berechnungsgrundlage von 96dpi (Dots per Inch) für die Darstellung von Schriftarten verwendet (bei der Einstellung "große Schriftarten" gar 120dpi), unter Systemen wie Linux und Macintosh sind es dagegen 72dpi. Deshalb erscheinen Schriftgrößen, die unter Windows sauber aussehen, unter den anderen genannten Systemen oft mickrig, während Schriftgrößen, die dort angenehm aussehen, unter Windows wiederum klobig wirken. Aber auch direkte Angaben in Pixeln lösen das Problem nicht unbedingt. Ein Pixel auf einem 13-Zoll-Notebook-Bildschirm mit 1024×768 Pixeln Bildschirmauflösung wirkt ganz anders als ein Pixel auf einem 19-Zoll-Desktop-Bildschirm mit der gleichen Bildschirmauflösung. Andere Angaben wie em oder Prozentwerte umgehen zwar das Problem der unterschiedlichen Bildschirmdarstellungen - aber erstens kann man bei einer Angabe wie 1.2em kaum von "Formatierung" reden, und zweitens bereiten solche Angaben auch andere Probleme. So kann es beispielsweise durch das Prinzip der natürlichen Vererbung passieren, dass Schriftarten bei mehrfach verschachtelten Elementen (etwa bei Listen oder Tabellen) immer kleiner oder größer werden. CSS2 bietet zwar mit den erweiterten Möglichkeiten, Formate für verschachtelte Elemente zu definieren, Maßnahmen zur Abhilfe an, doch das nutzt vorläufig auch nichts, solange es in vielen noch verbreiteten Browsern nicht funktioniert.
Um die "richtigen" und "falschen" Maßangaben ist angesichts all dieser Probleme in einigen Kreisen schon ein richtiger Glaubenskrieg ausgebrochen. Die einen behaupten, man solle sich an Angaben wie pt halten, weil ein Punkt immer gleich groß zu sein hat, die anderen beschwören die em-Angabe wie einen Erlösergott. Fakt ist in jedem Fall, dass Sie niemals darauf vertrauen sollten, dass Größen, die auf Ihrem Bildschirm wunderbar aussehen, woanders genauso wunderbar wirken. Vermeiden Sie deshalb vor allem bei Angaben, die für die Leserlichkeit von Text relevant sind, "extreme" Werte, und reagieren Sie, wenn Sie von mehreren Stellen zu hören bekommen, Ihre Seiten seien schwer lesbar.
Sie können Farbwerte also hexadezimal nach dem Schema #RRGGBB angeben; R ist der Rotwert, G der Grünwert und B der Blauwert der Farbe. Anders als in HTML existiert auch eine Kurzschreibweise der Form #RGB. Hier werden die einzelnen Farbangaben intern verdoppelt, #08a steht demnach für #0088aa. Die hexadezimale Schreibweise erlaubt Groß- und Kleinschreibung.
Eine weitere Möglichkeit, Farben zu definieren, stellt die Stylesheet-Sprache CSS jedoch auch noch zur Verfügung. Das Schema dazu lautet rgb(rrr,ggg,bbb). Der Ausdruck rgb(...) ist dabei immer gleich. Innerhalb der Klammern müssen drei Dezimalwerte oder drei Prozentwerte stehen, durch Kommata voneinander getrennt. Für alle drei Werte sind entweder absolute Zahlen zwischen 0 (kein Anteil der entsprechenden Farbe) und 255 (maximaler Anteil der entsprechenden Farbe) oder Prozentwerte von 0% (kein Anteil an der entsprechenden Farbe) bis 100% (maximaler Anteil der entsprechenden Farbe) erlaubt.
Ab der CSS-Version 2.0 gibt es ferner die Möglichkeit, anwender-relative Farbwörter zu verwenden, hinter denen sich Farben verbergen, die der Anwender an seinem Rechner als Arbeitsumgebung eingestellt hat. Auf diese Weise können Sie zur Gestaltung Ihrer Inhalte Farben verwenden, die auf die Bildschirmumgebungsfarben des Anwenderrechners abgestimmt sind, ohne dass Sie diese Farben kennen. Die erlaubten anwender-relativen Farbwörter werden im Folgenden erläutert.
Bei vielen CSS-Eigenschaften steht eine Auswahl erlaubter Werte zur Verfügung. Das ist nicht anders als bei vielen HTML-Attributen. Genau so, wie Sie etwa eine Überschrift oder einen Textabsatz in HTML mit den Angaben align="left", align="center" oder align="right" ausrichten können, gibt es CSS-Eigenschaften, die bestimmte Schlüsselwörter erwarten. So gibt es etwa die Stylesheet-Angabe text-align zur Ausrichtung von Text, die die gleichen Angaben erwartet, also left, center oder right.
Manche Stylesheet-Angaben erwarten die Zuordnung eines Namens oder auch mehrerer Schlüsselwörter. So können Sie hinter der Stylesheet-Angabe font-family Namen von einer oder mehreren Schriftarten notieren, die Sie für die Formatierung verwenden möchten. Andere CSS-Eigenschaften sind Zusammenfassungen von Einzeleigenschaften. So gibt es beispielsweise die Angabe border (Rahmen), hinter der Sie eine Angabe wie thin solid red notieren können. Trennen Sie solche Angaben zu einer Sammeleigenschaft durch Leerzeichen. Wenn die Angaben selbst Leerzeichen enthalten können, wie etwa bei Namen von Schriftarten, können Sie Kommata zum Trennen verwenden. Für solche Fällen können auch Anführungszeichen empfohlen sein.
Bei Namen wie Schriftartangaben oder Angaben wie left, center usw. ist es zumindest bei der CSS-Anwendung auf HTML-Elemente egal, ob Sie die Angaben groß oder klein schreiben. Das gilt auch für die Stylesheet-Eigenschaften selbst. Wenn Sie CSS allerdings auf XHTML oder gültige XML-Dokumente anwenden, müssen Elementnamen, Attributnamen und Attributzuweisungen so geschrieben werden, wie es in der XML-DTD festgelegt ist. Bei XHTML muss alles klein geschrieben werden.
Beispiele:
<style type="text/css">
p { font-family:"Comic Sans MS",Arial; text-align:center; }
body { border:thin dashed silver; background-color:black; }
DIV.SPEZIAL { BORDER:THICK DOUBLE RGB(0,64,128); }
blockquote[title="Zitat von Goethe"] { color:#000080; }
</style>
Für CSS-Eigenschaften der Sound-Kontrolle für Sprachausgabe, die von den Browsern jedoch bislang nicht unterstützt wird, werden die folgenden Maßangaben aus dem Bereich der Akustik und Zeitmessung verwendet:
Abkürzung
Bedeutung
deg
Kreisgrad, wobei der Kreis in 360 Grad aufgeteilt ist Ein rechter Winkel hat z.B. 90deg
Sie können im head-Element einer HTML-Datei einen Bereich für CSS-Formate definieren.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Element</title>
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>
<body>
<h1>Das style-Element</h1>
</body>
</html>
Erläuterung:
Mit <style...> ... </style> notieren Sie einen Bereich für Stylesheet-Formatdefinitionen (style = Stil, Format). Im einleitenden <style>-Tag müssen Sie den MIME-Typ der Stylesheet-Sprache angeben. Für CSS ist das die Angabe type="text/css". Zwischen dem einleitenden Tag und dem abschließenden </style> können Sie dann zentrale CSS-Formate definieren. Lesen Sie dazu den Abschnitt zentrale Formate definieren.
Beachten Sie:
Damit ältere Web-Browser, die keine Stylesheets kennen, den Inhalt des style-Elements nicht irrtümlich als anzuzeigenden Text interpretieren, können Sie den Inhalt in einen HTML-Kommentar (<!-- ... -->) einbinden, so wie im obigen Beispiel. Obwohl dieses Auskommentieren von Stylesheet-Bereichen eine gängige Praxis ist, wird in den Codebeispielen in SELFHTML darauf verzichtet, denn die Browser aus den Anfangstagen des WWW, die CSS-Bereiche nicht erkennen können, sind weitestgehend zu vernachlässigen. Beachten Sie in diesem Zusammenhang die Unterschiede zwischen XHTML und HTML.
Formate, die Sie auf diese Weise definieren, sind für diese eine HTML-Datei gültig.
Es ist durchaus erlaubt, mehrere style-Bereiche innerhalb des HTML-Dateikopfs zu notieren. Sinnvoll ist das beispielsweise, wenn Sie mal Style-Definitionen mit unterschiedlichen Style-Sprachen und entsprechend unterschiedlichem MIME-Typ in einer HTML-Datei notieren möchten.
In vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres Projekts haben wollen. Dann brauchen Sie die Angaben nicht in jeder Datei zu wiederholen. Stattdessen können Sie die Formate in einer separaten Textdatei definieren und diese Datei einfach in jeder gewünschten HTML-Datei einbinden. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei eingebunden ist.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das link-Element für Stylesheets</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
/* ... hier sind dateispezifische Formate erlaubt ... */
</style>
</head>
<body>
<h1>Das link-Element für Stylesheets</h1>
</body>
</html>
Erläuterung:
Im Dateikopf einer HTML-Datei können Sie mit <link...> eine CSS-Datei referenzieren, die CSS-Formatdefinitionen enthält (link = Verweis). Innerhalb des <link>-Tags müssen die Angaben rel="stylesheet" type="text/css" stehen (rel = relation = Bezug, type = MIME-Typ). Beim Attribut href geben Sie die gewünschte Datei an (href = hyper reference = Hypertext-Referenz). Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, müssen Sie an dieser Stelle Pfadangaben oder absolute URIs notieren. Das funktioniert genauso wie etwa beim Einbinden von Grafiken.
Bei der referenzierten Datei muss es sich um eine reine Textdatei handeln, die die Endung .css haben sollte. Die Datei darf nichts anderes als Definitionen zentraler Formate und Kommentare enthalten. Eine solche CSS-Datei können Sie mit jedem einfachen Texteditor erstellen. In SELFHTML wird beispielsweise eine separate CSS-Datei für alle Dokumentdateien verwendet. Sie können diese CSS-Datei als Text betrachten (der Verweis führt zu einer Datei namens selfhtmlcss.txt, damit die Datei in jedem Fall im Browser angezeigt wird - die CSS-Datei heißt eigentlich selfhtml.css).
Wie auch in HTML-Dateien können Sie in externen Stylesheets optional angeben, welche Zeichenkodierung die CSS-Datei verwendet. Diese Angabe ist für den Web-Browser besonders wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Bytes der Datei in Zeichen umgewandelt werden müssen. Informationen über ISO 8859-1 und andere Kodierungen finden Sie im Abschnitt Zeichenkodierungen (ISO-8859-Familie und andere). Die CSS-Syntax lautet:
@charset "ISO-8859-1";
Diese Angabe muss zwingend als absolut erste im externen Stylesheet stehen und darf nur einmal vorkommen. Im Konfliktfall, also wenn der Webserver im HTTP-Header eine hiervon abweichende Angabe sendet, wird üblicherweise die Angabe des HTTP-Headers verwendet. Innerhalb von style-Bereichen, die im Dateikopf einer HTML-Datei notiert werden ist diese Angabe nicht gestattet, da in diesem Fall die Kodierung der HTML-Datei herangezogen wird.
Beachten Sie:
Wenn Sie mit <link...> eine Datei mit CSS-Formatdefinitionen referenzieren, brauchen Sie keinen Bereich <style...>...</style>. Im obigen Beispiel wird dennoch ein solcher Bereich definiert. Das soll zeigen, dass Sie beide Arten, Formate zu definieren, miteinander kombinieren können. Wenn Sie beide Arten benutzen, haben Formate, die direkt innerhalb von <style...>...</style> definiert werden, im Konfliktfall Vorrang vor den referenzierten Formaten. So können Sie etwa immer wieder verwendete Formate als Basis-Stylesheet importieren und einige davon mit dateispezifischen Formaten ergänzen oder überschreiben. Ebenfalls möglich ist die Einbindung mehrerer Stylesheets mit link-Elementen.
Unabhängig davon, ob Sie Formate zentral definieren oder aus einer separaten CSS-Datei einbinden, können Sie einzelne HTML-Elemente formatieren.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Attribut</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
/* ... hier sind dateispezifische Formate erlaubt ... */
</style>
</head>
<body>
<h1 style="[element-spezifische Formate]">Das style-Attribut</h1>
</body>
</html>
Erläuterung:
Mit dem Universalattributstyle im einleitenden Tag eines Elements können Sie CSS-Formate für dieses eine Element notieren. Weitere Einzelheiten dazu werden im Abschnitt HTML-Elemente direktformatieren beschrieben.
Beachten Sie:
HTML-Elemente müssen HTML-4.0 konform mit Start- und End-Tag notiert sein, damit CSS-Formatierungen darin angezeigt werden. Dies gilt vor allem für Elemente, bei denen früher mal nur die Notation des Start-Tags genügte, etwa bei p, li, option, td und th.
Das obige Beispiel zeigt, dass Sie parallel zu den Formatdefinitionen im HTML-Element auch die Methoden zur zentralen Formatdefinition verwenden können. Im Konfliktfall haben stets die "inneren" Formatdefinitionen Vorrang vor den "äußeren". Wenn Sie also im einleitenden <h1>-Tag eine andere Schriftart angeben, als Sie im zentralen style-Bereich für h1-Elemente festlegen, dann hat die Definition im einleitenden <h1>-Tag Vorrang vor der zentralen Definition, genauso, wie diese wiederum Vorrang vor den Definitionen der eingebundenen externen CSS-Datei hat.
Bildschirm und Drucker beispielsweise sind sehr unterschiedliche Ausgabemedien für ansprechend gestaltete Daten. Beide Ausgabemedien haben ihre eigenen Gesetze. Während am Bildschirm etwa helle Schriften auf dunklen Hintergründen attraktiv aussehen, ist das für die Ausgabe am Drucker keine gute Lösung. Bei der Druckerausgabe sehen dagegen Absatzeinzüge von mindestens 2cm besser aus, während durch entsprechende Angaben am Bildschirm möglicherweise kostbarer Präsentationsraum verschenkt wird. Deshalb können Sie für verschiedene Ausgabemedien verschiedene externe CSS-Dateien einbinden, die unterschiedliche Formatdefinitionen enthalten können. Die Software muss beim Präsentieren der Seiten entscheiden, welche der eingebundenen CSS-Dateien maßgeblich ist. Wenn der Web-Browser also beispielsweise die Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit für das Medium "Bildschirm" bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie für das Medium "Drucker" angeben.
Zunächst benötigen Sie für jedes Ausgabemedium eine Textdatei mit der Endung .css, die nichts anderes als die gewünschten CSS-Formatdefinitionen für das gewünschte Ausgabemedium enthält. In einer HTML-Datei können Sie alle CSS-Dateien wie im obigen Beispiel einbinden. Das Einbinden funktioniert genauso wie bei Formate zentral in separater CSS-Datei definieren beschrieben. Neu ist hierbei nur, dass gleich mehrere <link>-Tags zum Einbinden notiert sind, und dass diese zusätzlich das Attribut media enthalten. Mit diesem Attribut bestimmen Sie, für welches Ausgabemedium die Datei verwendet werden soll, die Sie dann bei der Angabe href einbinden. Sie können einen oder mehrere Medientypen bei media angeben. Mehrere Angaben werden durch Kommata getrennt.
In CSS2 werden folgende möglichen Angaben genannt:
Angabe
Bedeutung
media="all"
CSS-Datei gilt für alle Medientypen.
media="aural"
CSS-Datei gilt für computergesteuerte synthetische Sprachausgabe. Beachten Sie in diesem Zusammenhang auch die CSS-Eigenschaften für Sprachausgabe.
media="braille"
CSS-Datei gilt für Ausgabegeräte mit so genannter "Braille-Zeile". Dabei wird Text eine veränderbare Oberflächenstruktur des Materials der Braille-Zeile umgewandelt und über Abtasten mit dem Finger gelesen. Diese Form des Ausgabemediums ist für blinde Menschen gedacht.
media="embossed"
CSS-Datei gilt für Braille-Drucker. Dabei wird Text in Form von abtastbaren Oberflächenstrukturen in Papier oder ein vergleichbares Material gestanzt. Wie braille ist embossed für blinde Menschen gedacht.
media="handheld"
CSS-Datei gilt für die Anzeige auf tragbaren Kleinstcomputern. Web-fähige elektronische Organizer sind typische Vertreter dieser Gattung.
media="print"
CSS-Datei gilt für den Ausdruck auf Papier. Web-Browser sollten diese Formatdefinitionen verwenden, wenn der Anwender die Web-Seite ausdrucken möchte. Beachten Sie dazu auch die CSS-Eigenschaften für Printmedien.
media="projection"
CSS-Datei gilt für die Datenprojektion mit Beamern und ähnlichen Geräten.
media="screen"
CSS-Datei gilt für die Bildschirmanzeige.
media="tty"
CSS-Datei gilt für nicht-grafische Ausgabemedien mit fixer Zeichenbreite, beispielsweise Fernschreiber. Aber auch für text-orientierte Browser wie Lynx ist dieser Medientyp interessant.
media="tv"
CSS-Datei gilt für TV-ähnliche Ausgabegeräte, die sich durch grobe Bildschirmauflösung und mangelnde Unterstützung beim Scrollen in Text, dafür aber durch Sound-Unterstützung auszeichnen.
Beachten Sie:
Der Internet Explorer interpretiert diese Angaben ab Version 4 zu einem gewissen Teil.
Der Medientyp aural wird in CSS 2.1 "missbilligt", da hierfür der neue Medientyp speech in CSS 3 vorgesehen ist.
Eine CSS-spezifische Einbindung wird innerhalb eines style-Bereichs im Dateikopf oder zwingend am Beginn eines externen Stylesheets notiert. Mit @import oder @import url(…) starten Sie die Angabe. In Hochkommata notieren Sie dahinter den Dateinamen bzw. die Adresse der separaten CSS-Datei. Hinter der Dateiangabe notieren Sie optional, durch Leerraum getrennt, das gewünschte Ausgabemedium. Es dürfen auch mehrere sein, getrennt durch Kommata. Dabei sind die gleichen Medientypen erlaubt wie im HTML-Attribut media. Am Ende der @import-Angabe muss ein Strichpunkt stehen.
Beachten Sie:
Der Internet Explorer 5.x unterstützt die Einbindung über @import nur bezüglich der Ausgabemedien screen und all.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Beschränkung auf Medientypen</title>
<style type="text/css">
@media print {
/* ... Formatdefinitionen zum Drucken ... */
selektor { eigenschaft:wert; }
}
@media screen, handheld {
/* ... Formatdefinitionen zur Bildschirmausgabe ... */
selektor { eigenschaft:wert; }
}
</style>
</head>
<body>
<h1>Beschränkung auf Medientypen</h1>
</body>
</html>
Erläuterung:
Mit @media definieren Sie innerhalb eines style-Bereichs einen Bereich für Formatdefinitionen für ein bestimmtes Ausgabemedium. Für jede Mediensorte, die Sie unterscheiden wollen, können Sie eine solche Einschränkung notieren. Hinter der Regel @media folgt, durch Leerraum getrennt, das gewünschte Ausgabemedium. Sie können auch mehrere Ausgabemedien durch Kommata getrennt in Folge notieren. Erlaubte Angaben sind die gleichen wie im HTML-Attribut media (siehe Medientypen).
Im Anschluss an die @media-Angabe müssen Sie geschweifte Klammern{ und } notieren. Alle Formatdefinitionen, die Sie innerhalb dieser geschweiften Klammern notieren, sind dann nur für das oder die angegebenen Medien gültig.
Um Ihre Formatdefinitionen intern auszukommentieren, steht eine spezielle, an die Programmiersprache C angelehnte Syntax zur Verfügung.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS-Syntax für Kommentare</title>
<style type="text/css">
/*
Basis-Stylesheet
*/
h1 { color:blue; } /* Format für blaue Überschrift, ergänzt am 19.07.2001 */
</style>
</head>
<body>
<h1>CSS-Syntax für Kommentare</h1>
</body>
</html>
Erläuterung:
Innerhalb von <style...>...</style> können Sie mit /* - also einem Schrägstrich und einem Sternzeichen in Folge - einen Kommentar einleiten. Mit der umgekehrten Zeichenfolge - also mit */ - beenden Sie den Kommentar. Anfang und Ende des Kommentars müssen nicht in der gleichen Zeile stehen, auch beliebig viele Leerzeilen sind erlaubt. Kommentare dürfen jedoch nicht verschachtelt werden. Einzeilige Kommentare wie in JavaScript // existieren in CSS nicht.
Sie können dem Browser in einer HTML-Datei mit Hilfe einer Meta-Angabe ausdrücklich mitteilen, dass diese Datei Stylesheet-Definitionen in einer bestimmten Definitionssprache enthält. Die Angabe ist in der gegenwärtigen Praxis und für die CSS-Sprache nicht zwingend erforderlich. Die Angabe dient dazu, um dem Client (also etwa dem Web-Browser), aber auch dem Web-Server eine Möglichkeit zur Verfügung zu stellen, der beiden Seiten helfen soll, sich vor dem Interpretieren der Datei über die zu verwendende Stylesheet-Syntax zu einigen.
Mit <meta http-equiv="Content-Style-Type" content="text/css"> im Kopf einer HTML-Datei erzwingen Sie die CSS-Syntax als verbindlich für Formatdefinitionen innerhalb dieser Datei. Wenn Sie eine andere Stylesheet-Sprache als CSS verwenden wollen, müssen Sie anstelle von "text/css" den MIME-Typ der betreffenden Formatdefinitionssprache angeben.
Sie können einzelne HTML-Elemente innerhalb des sichtbaren HTML-Dokuments mit Hilfe von Stylesheet-Eigenschaften formatieren. Die Formatdefinitionen gelten dann genau für den Geltungsbereich des betreffenden HTML-Elements und nach den Regeln der natürlichen Formatvererbung auch für Kindelemente des betreffenden Elements. Sinnvoll ist diese Möglichkeit, wenn Sie entweder sonst auf CSS verzichten und es nur mal für ein paar Ausnahmen benötigen, oder wenn Sie zentrale Formate verwenden, einzelne Elemente aber anders als mit den dort definierten Formatdefinitionen gestalten möchten.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>style-Attribut</title>
<style type="text/css">
body { background-color:#000000; color:#E0E0E0 }
</style>
</head>
<body>
<h1>Die Seite mit dem besonderen Element</h1>
<p>Hier sind zwar zentrale Formatdefinitionen vorhanden,
aber das folgende Element soll etwas Besonderes sein:</p>
<p style="background-color:#808040; color:#D8FD02;
font-family:'Century Schoolbook',serif; font-size:2em; letter-spacing:3px;
padding:40px; border:double #D8FD02 4px;"
title="Zitat von Francis Picabia">
Unser Kopf ist rund, damit das Denken die Richtung wechseln kann!
</p>
</body>
</html>
Erläuterung:
Sie können Formate für ein HTML-Element definieren, indem Sie innerhalb des einleitenden HTML-Tags das Attribut style und dahinter die gewünschten Formatdefinitionen notieren. Innerhalb der Formatdefinitionen sind CSS-Eigenschaften erlaubt. Dabei gilt die gleiche Syntax wie innerhalb der geschweiften Klammern bei zentralen Formaten. Jede Eigenschaft besteht aus einem Namen, z.B. color (Schriftfarbe) und einem Wert, z.B. #D8FD02, getrennt durch einen Doppelpunkt. Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der letzten Formatdefinition vor dem abschließenden Anführungszeichen darf der Strichpunkt entfallen.
Im obigen Beispiel werden die individuellen Formatangaben auf ein gewöhnliches p-Element angewendet. Es erhält mit Hilfe der CSS-Eigenschaften für Hintergrundfarbe (background-color), Schriftfarbe (color), Schriftart (font-family), Schriftgröße (font-size), Zeichenabstand (letter-spacing), Innenabstand zum Rand (padding) und einem Rahmen (border) ein Aussehen, das überhaupt nicht mehr an einen "Textabsatz" erinnert.
Das Box-Modell definiert die Berechnung der Breite und Höhe von Elementen. Seit der CSS1-Spezifikation des W3-Konsortiums aus dem Jahre 1996 errechnet sich die Gesamtbreite eines Elements aus einer Addition
Dies gilt analog für die Höhe (height) sowie generell für alle Maßeinheiten; diese dürfen auch gemischt angewandt werden.
Grafische Darstellung des Box-Modells:
Beispiel:
Wird ein Element mit einer Breite von 200 Pixel, einer Höhe von 100 Pixel und einem Innenabstand und Rahmen von je 20 Pixel Stärke auf allen Seiten definiert, beträgt die tatsächliche Breite letztendlich 280 Pixel (20 für border-left, 20 für padding-left, 200 für width, 20 für padding-right und 20 für border-right), die Höhe 180 Pixel (20 für border-top, 20 für padding-top, 100 für height, 20 für padding-bottom und 20 für border-bottom). Ein zusätzlich definierter Außenabstand müsste zu diesen Werten nochmals addiert werden.
Als "Box Model Bug" wird der Fehler in älteren Windows-Versionen des Internet Explorer (einschließlich 5.5) bezeichnet, die Innenabstände und Rahmenstärken entgegen der Spezifikation nicht zur Gesamtbreite zu addieren - dies ist nur beim Außenabstand korrekt der Fall. In oben angeführtem Beispiel ergibt sich damit eine Gesamtbreite von 200 Pixel, also lediglich die mittels width definierte Breite. Dem Inhalt stehen nach Subtraktion von 40 Pixel für den Rahmen und weiteren 40 Pixel für den Innenabstand (jeweils 20 Pixel links und rechts) demnach nur mehr 120 Pixel zur Verfügung, was vor allem in vermeintlich pixelgenauen Layouts störende Abweichungen verursacht.
Microsoft bereinigte den Fehler und führte mit Version 6 des Browsers eine Möglichkeit ein, die Darstellung zwischen der falschen und der korrekten Variante umzuschalten. Ein grundsätzlicher Wechsel hin zu einer korrekten Darstellung hätte es mit sich gebracht, dass sehr viele Seiten zwar im Grunde korrekt, aber dennoch anders als vom Ersteller beabsichtigt dargestellt worden wären. Es musste daher eine Möglichkeit gefunden werden, dem Browser mitzuteilen, welchen Modus er benutzen soll.
Man ging davon aus, dass vor allem alte Seiten, die auf Basis des falschen Box-Modells erstellt und nur mit dem Internet Explorer einschließlich Version 5.5 getestet worden waren, keine oder eine Dokumenttyp-Deklaration einer weniger strengen HTML-Variante aufweisen und knüpfte die korrekte Darstellung an die Verwendung spezieller Varianten. Diese Notlösung bot den Vorteil, auf zusätzliche Elemente verzichten zu können.
Dokumente, die als syntaktisch strenge (X)HTML-Variante deklariert sind, werden vom Internet Explorer 6 unter Berücksichtigung des korrekten Box-Modells dargestellt - im sogenannten "standard mode". Auf Seiten, die keine oder eine weniger strenge Deklaration aufweisen, wird das fehlerhafte Microsoft-Box-Modell angewandt, um Abwärtskompatibilität zu gewährleisten. Dieser Modus wird als "quirks mode" bezeichnet.
Auch das Fehlen der Adresse, unter welcher die Dokumenttyp-Definition (DTD) beim W3-Konsortium abgerufen werden kann, bewirkt bei HTML 4.01 teilweise einen Rückfall in den Quirks-Modus.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Box-Modell: Dokumenttyp HTML 4.01 Transitional ohne URI</title>
</head><body>
<p style="width:200px; padding:20px; border:20px solid #66a">
Soll-Breite: 280px
</p>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>
</body></html>
Das Beispiel zeigt in allen Versionen des Internet Explorer und Opera 7 die Anwendung des Microsoft-Box-Modells. Dies gilt nicht für Browser, die auf dem Gecko-Kern basieren (Mozilla, Firefox, Netscape ab Version 6), Konqueror und Opera bis Version 6, welche alle Seiten mit standardkonformer Auslegung des Box-Modells darstellen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<title>Box-Modell: Dokumenttyp HTML 4.01 Strict</title>
</head><body>
<p style="width:200px; padding:20px; border:20px solid #66a">
Soll-Breite: 280px
</p>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>
</body></html>
Dieses Beispiel wird von allen Browsern korrekt dargestellt. Davon ausgenommen sind, wie bereits erwähnt, lediglich Internet Explorer für Windows bis zu Version 5.5 - die Mac-Versionen des Browsers sind nicht betroffen. Diese HTML-Variante führt am ehesten zu einer gleichen Darstellung und sollte daher bevorzugt eingesetzt werden.
Erläuterung:
Alle drei Beispiele weisen im p-Element identische Eigenschaften auf, der Unterschied in der Darstellung ergibt sich einzig aus der Dokumenttyp-Deklaration.
Wie bei den Beispielen angeführt, übernahmen auch andere Hersteller diese Methode und so weisen im Grunde alle aktuellen Versionen verbreiteter Browser ebenfalls einen "Doctype Switch" auf. Opera 7 orientiert sich am Internet Explorer 6, um größtmögliche Kompatibilität zu erreichen. Netscape ab Version 6, Mozilla Firefox, Konqueror und Safari dagegen orientieren sich diesbezüglich immer am Standard. Der Dokumenttyp wirkt sich in diesen Browsern hauptsächlich auf die Fehlerkorrektur, nicht aber auf das Box-Modell aus.
Beachten Sie:
Netscape 4.x berechnet Dimensionen ebenso falsch wie der Internet Explorer 5.x. für Windows.
Um aktuelle Browser in den standardkonformen Anzeigemodus zu schalten, empfiehlt es sich, einen der folgenden "sicheren" Dokumenttypen zu notieren:
HTML 4.01 Transitional mit URI
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Strict mit und ohne URI
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Bezüglich XHTML ist zu beachten, dass der Internet Explorer 6 die Dokumenttyp-Deklaration nur in der ersten Zeile eines Dokuments auswertet. Dies hat zur Folge, dass bei Notation einer XML-Deklaration in den Quirks-Modus geschaltet wird.
<?xml version="1.0" encoding="UTF-8"?>
Diese Zeile ist beim Einsatz von XHTML nicht zwingend erforderlich, Sie können sie unter bestimmten Umständen, die in der oben genannten Erläuterung beschrieben sind, weglassen.
Die einfachste Variante, den Box-Modell-Fehler zu umgehen, besteht darin, auf den Versuch, ein pixelgenaues Layout zu erreichen, zu verzichten und allen Elementen etwas Freiraum zu lassen, sodass etwaige Abweichungen zwar vorhanden sind, aber die Darstellung nicht beeinträchtigen. Sollte dies nicht möglich sein, setzen Sie eine der im folgenden beschriebenen Methoden ein, um eine korrekte Darstellung zu erreichen.
Eine Möglichkeit, eine einheitliche Darstellung zu erreichen, besteht darin, auf die gleichzeitige Angabe von width bzw. height und border/padding bei ein und demselben Element zu verzichten. Dies erreichen Sie mittels eines zusätzlichen Elements, das mit der gewünschten Gesamtbreite entsprechend dem korrekten Box-Modell definiert wird. Dem inneren Element können Sie nun problemlos border und padding zuweisen, da die Berechnung der Breite des äußeren Elements davon nicht beeinflusst wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Box-Modell: Workaround bei Dokumenttyp HTML 4.01 Transitional ohne URI</title>
</head><body>
<div style="width:280px;">
<p style="padding:20px; border:20px solid #66a">Soll-Breite: 280px</p>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>
</div>
</body></html>
Erläuterung:
Das äußere Element weist eine Breite von 280px auf, dies ist der Wert, der sich aus einer korrekten Berechnung ergibt. Die im inneren Element definierten Werte für border und padding wirken sich darauf nicht aus.
Es ist möglich, Browsern die gewünschten CSS-Eigenschaften zukommen zu lassen und problematische Deklarationen vor anderen Browsern mit Hilfe einer CSS-Browserweiche zu "verstecken" - dies wird als "Hack" bezeichnet. Die in diesem Kapitel angeführten Beispiele eignen sich zur Korrektur des Box-Modell-Fehlers.
Speziell zur Umgehung des Box-Modell-Fehlers im Internet Explorer 5.x für Windows eignet sich der "Tan-Hack" (auch "Modified Simplified Box Model Hack" genannt).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Box-Modell: Workaround mittels Modified Simplified Box Model Hack</title>
<style type="text/css">
#bereich {
width:200px; padding:20px; border:20px solid #66a;
}
* html #bereich { /* nur fuer Internet Explorer */
width:280px; /* Version 5.x */
w\idth:200px; /* Version 6 */
}
</style>
</head><body>
<div id="bereich">Soll-Breite: 280px</div>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>
</body></html>
Erläuterung:
Nachdem mit dem Selektor #bereich die gewünschten Eigenschaften wie gewohnt definiert wurden, wird ein gleichlautender Selektor, nun allerdings mit voranstehendem * html notiert. Dabei handelt es sich um den so genannten Star-HTML-Hack, der alle Browser außer dem Internet Explorer bis zur Version 6 von der Interpretation der enthaltenen Deklarationen ausschließt. Zunächst wird für den Internet Explorer 5.x. die Breite gemäß Microsoft-Box-Modell angegeben, danach für den Internet Explorer 6 die korrekte Breite gemäß W3C-Box-Modell. Um den am Beginn für Version 5.x notierten Wert nicht zu überschreiben, wird die Eigenschaft width mit einem Backslash (CSS-Escape-Sequenz) notiert: w\idth. Dies hat zur Folge, dass die ältere Version die Deklaration ignoriert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Box-Modell: Workaround mittels Tantek-Hack</title>
<style type="text/css">
#bereich {
padding:20px; border:20px solid #66a;
width:280px;
voice-family:"\"}\""; /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
voice-family:inherit;
width:200px;
}
</style>
</head><body>
<div id="bereich">Soll-Breite: 280px</div>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>
</body></html>
Erläuterung:
Zunächst werden allen Eigenschaften Werte zugewiesen, die der Internet Explorer 5.x für eine korrekte Darstellung benötigt. Die Deklaration voice-family:"\"}\""; bewirkt, dass nachfolgende Angaben von diesem Browser ignoriert werden. Somit eignet sich dieser Bereich dafür, anderen Browsern die korrekten Werte zur Verfügung zu stellen. Das Ergebnis ist eine gleichwertige Darstellung trotz des Box-Modell-Fehlers des IE 5.x.
Sollte ein im standardkompatiblen Modus neu hinzugekommener Fehler des Internet Explorer 6 oder 7 die Umschaltung in den Quirks-Modus erfordern, können Sie dies auch erreichen, indem Sie einen HTML-Kommentar in die erste Zeile des Dokuments setzen. Andere Browser werden hierdurch nicht beeinflusst und wenden bei entsprechender Dokumenttyp-Deklaration das korrekte Box-Modell an, sodass eine Korrektur nur für die Windows-Variante des Internet Explorer erforderlich ist - dies allerdings für alle Versionen. Künftige Versionen des Internet Explorer könnten solche Dokumente jedoch standardkonform darstellen, sodass sich diese Methode nur dann eignet, wenn Sie bei Erscheinen neuer Browserversionen testen, um eine dann eventuell abweichende Darstellung abermals zu korrigieren.
Wird ein HTML-Dokument, das kein Stylesheet referenziert und auch selbst keinerlei HTML- oder CSS-Formatierungen enthält im Browser aufgerufen, so wird es dennoch mit einem Basis-Layout dargestellt. Überschriften weisen in grafischen Browsern beispielsweise einen größeren Schriftgrad auf, werden fett dargestellt und erzeugen einen neuen Absatz. Dies bedingt ein Browser-Stylesheet, das grundlegende Informationen über darzustellende Elemente für die Anzeige im Browser enthält. Beim W3-Konsortium ist ein Beispiel-Stylesheet für HTML 4 dokumentiert.
Wenn Sie nun Stylesheets in HTML einbinden, ergänzen oder übersteuern Sie damit das Browser-Stylesheet. Autorenseitig definierte Stylesheets werden als Autoren-Stylesheets bezeichnet.
Darüber hinaus besteht für Besucher Ihrer Seiten die Möglichkeit, ein sogenanntes Benutzer-Stylesheet einzubinden, das zusätzliche Definitionen enthält, wie Elemente idealerweise darzustellen sind; es legt beispielsweise eine Mindestschriftgröße oder eine Darstellung mit hohem Farbkontrast fest.
In allen Arten von Stylesheets - auch in ein und demselben - können wiederum widersprüchliche Angaben notiert sein.
<ul id="nav">
<li>Listenpunkt mit <a class="xy" href="ziel.htm">Verweis</a></li>
</ul>
a:link { eigenschaft:wert; }
.xy { eigenschaft:wert; }
#nav a.xy { eigenschaft:wert; }
li a { eigenschaft:wert; }
#nav li a { eigenschaft:wert; }
Erläuterung:
Alle genannten Selektoren wirken für sich genommen auf das im HTML-Quelltext notierte a-Element. Darüber hinaus enthält bereits das Browser-Stylesheet Deklarationen für Verweise - in grafischen Browsern werden diese für gewöhnlich blau und unterstrichen dargestellt. Ein etwaiges Benutzer-Stylesheet muss ebenso berücksichtigt werden.
Um herauszufinden, wie Elemente letztendlich darzustellen sind, folgen Browser den im Folgenden beschriebenen Regeln.
Im ersten Schritt wird ermittelt, ob für ein Element CSS-Eigenschaften definiert wurden, die für den aktuell dargestellten Medientyp gelten. Dies umfasst Browser-, Autoren- und Benutzer-Stylesheets. Wird nur ein zutreffender Selektor gefunden, werden die darin enthaltenen Eigenschaften auf das Element angewandt und die Bearbeitung beim nächsten Element fortgesetzt. Exisitieren jedoch in unterschiedlichen Stylesheets verschieden lautende Angaben, wird im folgenden Schritt deren Ursprung und Prioriät ermittelt.
Definitionen in eingebundenen Stylesheets unterschiedlicher Herkunft werden gemäß folgender Reihenfolge absteigender Wichtigkeit sortiert:
Benutzer-Stylesheet mit !important
Autoren-Stylesheet mit !important
Autoren-Stylesheet
Benutzer-Stylesheet
Browser-Stylesheet
Die Basis für die Darstellung bildet das Browser-Stylesheet. Enthält ein Benutzer-Stylesheet jedoch anders lautende Deklarationen, überschreiben diese das Browser-Stylesheet und legen somit die Darstellung einer Seite ohne jedwede autorenseitige Vorschläge fest. Definieren Sie nun im Autoren-Stylesheet Formatierungen, werden diese höher gewichtet als das Benutzer-Stylesheet. Dies gilt allerdings nicht für Angaben in Benutzer-Stylesheets, die mittels nachfolgend beschriebener !important-Regel festgelegt wurden.
Findet ein Browser nun abweichende Wertzuweisungen an dieselben Eigenschaften in Stylesheets unterschiedlichen Ursprungs, wird diejenige angewandt, die im Stylesheet mit der höchsten Wichtigkeit definiert wurde. Die Bearbeitung wird anschließend beim nächsten Element fortgesetzt. Existieren darüber hinaus in Stylesheets gleicher Wichtigkeit mehrere Selektoren, die das aktuelle Element erfassen, wird im nächsten Schritt die Spezifität der Selektoren ermittelt.
Mit !important ausgezeichnete Deklarationen überschreiben gleichlautende ohne diese Kennzeichnung. Der Einsatz ist sowohl in Autoren- als auch in Benutzer-Stylesheets möglich.
Beispiel:
p { font-size:1em !important; }
Erläuterung:
Die Zeichenkette "!important" wird durch ein Leerzeichen getrennt hinter dem Wert notiert.
Beachten Sie:
In der ersten CSS-Spezifikation wurde die Verwendung der !important-Regel in Autoren-Stylesheets höher bewertet als eine gleichlautende in Benutzer-Stylesheets. Dies wurde mit CSS2 korrigiert, um Benutzern die Möglichkeit zu geben, die Anzeige an ihre Bedürfnisse anzupassen. Somit existiert auf Autorenseite keine Möglichkeit, von Benutzern explizit gewünschte Eigenschaften zu überschreiben.
Alle Selektoren werden zunächst in ihre Bestandteile zerlegt und diese in folgende Kategorien unterteilt:
A enthält den Wert 1, wenn CSS-Deklarationen dem Element direkt per style-Attribut zugewiesen wurden. B entspricht der Anzahl der selektierten ID-Attribute (#id) C entspricht der Anzahl der selektierten anderen Attribute (z.B. Klassen) und Pseudoklassen (.klasse, :pseudoklasse) D entspricht der Anzahl der selektierten Elementnamen (e) und Pseudoelemente (:pseudoelement)
Beispiele:
Selektor
A
B
C
D
style="…" (HTML)
1
0
0
0
#nav a.xy
0
1
1
1
#nav li a
0
1
0
2
#nav a
0
1
0
1
#nav
0
1
0
0
ul li .xy
0
0
1
2
a:link
0
0
1
1
a.xy
0
0
1
1
ul[id="nav"]
0
0
1
1
*.xy
0
0
1
0
li a
0
0
0
2
a:first-line
0
0
0
2
a
0
0
0
1
Erläuterung:
Die Tabelle zeigt die Kategorisierung aller Bestandteile der angeführten Selektoren in absteigender Reihenfolge ihrer Spezifität. Zunächst werden alle Selektoren nach ihrem in Spalte A angeführten Wert absteigend sortiert, danach nach dem in den Spalten B, C und zuletzt nach Spalte D. Ein Wert von "1 0 0 0" ist daher höher als "0 1 2 0" oder "0 0 1 2". Im oben angeführten Beispiel erreicht der Selektor #nav a.xy die höchste Spezifität (0 1 1 1) und überschreibt damit die vorangegangenen Deklarationen. Die nachfolgend notierten Selektoren li a (0 0 0 2) und #nav li a (0 1 0 2) weisen eine geringere Spezifität auf und werden daher übergangen:
Selektor
A
B
C
D
a:link
0
0
1
1
*.xy
0
0
1
0
#nav a.xy
0
1
1
1
li a
0
0
0
2
#nav li a
0
1
0
2
Existiert im Stylesheet nur ein Selektor mit der höchsten ermittelten Spezifität, wird die Regel angewandt und die Bearbeitung beim nächsten Element fortgesetzt. Andernfalls entscheidet die Reihenfolge des Vorkommens.
Beachten Sie:
Der Universalselektor * und HTML-Formatierungen finden keine Berücksichtigung. Die Berechnung erfolgt nicht nach dem Zehnersystem, "0 0 1 2" ist daher spezifischer als beispielsweise "0 0 0 42".
Hinweis:
CSS 2.1 weicht in folgenden Punkten von CSS2 ab:
Direkt in HTML notierte style-Attribute waren in CSS2 noch ID-Attributen gleichgestellt und erhöhten den (nun) unter B angeführten Wert, die nunmehrige Spalte A existierte noch nicht. Pseudoelemente (:first-line, :first-letter, :before und :after), die nun unter D subsumiert werden, wurden bei der Berechnung der Spezifität ignoriert.
Existieren zwei oder mehrere Selektoren mit identischer Gewichtung bezüglich Ursprung und Priorität sowie identischer Spezifität, entscheidet die Reihenfolge des Vorkommens - später notierte Selektoren überschreiben vorangegangene. Deklarationen aus importierten Stylesheets werden hierbei als zuerst vorkommend betrachtet.
Zentrale Formate folgen einem bestimmten Grundmuster:
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Zentrale Formate</title>
<style type="text/css">
h1 { color:red; font-size:48px; }
</style>
</head>
<body>
<h1>48 Pixel und Rot!</h1>
</body>
</html>
Erläuterung:
Das Beispiel enthält in einem style-Bereich eine Formatdefinition für h1-Elemente der Datei, also für Überschriften 1. Ordnung. Solche Formatdefinitionen haben immer den gleichen Aufbau und bestehen aus folgenden Teilen:
Selektor:
Als "Selektoren" wird das bezeichnet, was vor den geschweiften Klammern steht. Ein Selektor wählt aus, wofür die folgenden Definitionen gelten sollen. Im obigen Beispiel gelten die Formate für alle Überschriften 1. Ordnung (h1-Elemente). Es sind jedoch auch komplexere Selektoren möglich sowie mehrere, durch Komma getrennte Selektoren.
Definitionen:
Die eigentlichen Definitionen zum Format stehen stets in geschweiften Klammern { und }. Sie bestehen darin, dass eine oder mehrere CSS-Eigenschaften notiert werden und einen Wert erhalten. Im obigen Beispiel werden etwa die CSS-Eigenschaften color (Schriftfarbe) und font-size (Schriftgröße) verwendet. Der Eigenschaft color wird der Wert red zugewiesen, und der Eigenschaft font-size der Wert 48px. Zwischen Eigenschaft und Wertzuweisung muss stets ein Doppelpunkt stehen. Abgeschlossen wird eine Definition mit einem Strichpunkt (;). Nur bei der letzten Definition vor der schließenden geschweiften Klammer darf der Strichpunkt auch entfallen.
Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.
In einem style-Bereich oder in einer externen CSS-Datei können Sie für HTML-Elementtypen, zum Beispiel zu Absatztypen und Textgestaltung oder für Tabellen-Elementtypen, CSS-Formate definieren. Wenn Sie entsprechende HTML-Elemente dann in der HTML-Datei verwenden, werden alle Formate angewendet, die Sie für den Elementtyp definiert haben. So können Sie beispielsweise für Überschriften 1. Ordnung definieren, dass diese in der Schriftart Helvetica, 26 Pixel, rot, fett und kursiv mit einem Absatznachabstand von 20 Pixel angezeigt werden. Wenn Sie dann im Text der HTML-Datei eine Überschrift 1. Ordnung wie gewohnt definieren, werden diese Formateigenschaften dabei berücksichtigt.
Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps, und zwar ohne spitze Klammern. Im obigen Beispiel werden body (Dokument), h1 (Überschriften 1. Ordnung), p (Textabsätze) und li (Listeneinträge) auf diese Weise notiert. Über den Universalselektor* haben Sie die Möglichkeit, Eigenschaften für alle Elemente zu definieren, wobei jedem Element natürlich nur die jeweils zulässigen Eigenschaften zugewiesen werden.
Wenn Sie ein Format für mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p,li.
Es bedeutet also das gleiche, wenn Sie notieren: h1 { font-family:Helvetica,sans-serif; } h2 { font-family:Helvetica,sans-serif; }
oder wenn Sie notieren: h1, h2 { font-family:Helvetica,sans-serif; }
Dahinter folgen die gewünschten Definitionen. Im obigen Beispiel wird dem body-Element eine hellgelbe Hintergrundfarbe (background-color:#FFFFCC;) und ein linker Randabstand von 100 Pixeln (margin-left:100px;) zugewiesen. Über den Universalselektor wird für alle Elemente zunächst blaue Schriftfarbe (color:blue;) definiert. Überschriften 1. Ordnung (h1) erhalten eine Schriftgröße von 300 Prozent (font-size:300%;), die abweichende Schriftfarbe rot (color:#FF0000;) und den Schriftstil kursiv (font-style:italic;). Textabsätze (p) und Listenpunkte (li) sollen in 110 Prozent Schriftgröße (font-size:110%;) mit einer Zeilenhöhe von 140 Prozent (line-height:140%;) in Schriftart Helvetica, oder wenn nicht verfügbar, dann in Arial, und wenn ebenfalls nicht verfügbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (font-family:Helvetica,Arial,sans-serif;). Außerdem werden auch noch Angaben zum Zeichenabstand (letter-spacing), Wortabstand (word-spacing) und zur Textfarbe gemacht.
Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.
Wenn Sie nichts anderes angeben, übernimmt ein HTML-Element, das innerhalb eines anderen HTML-Elements vorkommt, dessen Eigenschaften und fügt seine eigenen Eigenschaften nur hinzu. Wenn Sie beispielsweise für Überschriften 1. Ordnung die Schriftart Times und die Farbe rot definieren, erscheint Text, der innerhalb einer solchen Überschrift mit <i>...</i> formatiert wird, ebenfalls rot und in Times, aber zusätzlich kursiv.
Sie können mit Hilfe von Stylesheets jedoch bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Elements vorkommt. So können Sie etwa bestimmen, dass <i>...</i> innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während das gleiche Element innerhalb anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Nachfahren-Selektor</title>
<style type="text/css">
h1 { color:red; }
h1 i { color:blue; font-style:normal; }
</style>
</head>
<body>
<h1>Wir lernen <i>Stylesheets</i></h1>
<p>Wir lernen <i>Stylesheets</i></p>
</body>
</html>
Erläuterung:
Im Beispiel wird festgelegt, dass Textabschnitte, die mit <i> ... </i> ausgezeichnet sind, nicht wie sonst üblich kursiv, sondern normal (font-style:normal;), stattdessen aber mit blauer Farbe (color:blue;) dargestellt werden. Aber nur dann, wenn das i-Element innerhalb einer Überschrift 1. Ordnung (h1) vorkommt. Dazu notieren Sie zuerst den Namen des übergeordneten Elementtyps, im Beispiel h1, und dahinter, durch Leerraum getrennt, den Namen des inneren Elementtyps, im Beispiel i.
In der ersten Zeile innerhalb des <body>-Bereichs im obigen Beispiel kommt diese spezielle Definition zum Tragen. In der zweiten Zeile dagegen, wo <i>...</i> innerhalb eines Textabsatzes vorkommt, hat es die übliche Wirkung.
Bei mehreren, durch Komma getrennten Selektoren wird häufig übersehen, dass eine für den ersten Selektor angegebene Verschachtelung die folgenden Selektoren nicht betrifft; über h1 i, b würden alleb-Elemente selektiert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Nachfahren-Selektor, Kind-Selektor, Nachbar-Selektor</title>
<style type="text/css">
div i { color:red; }
div * b { color:violet; }
div > p { color:blue; }
div + p { margin-top:5em; }
</style>
</head>
<body>
<div>
Text in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.
<p>Textabsatz in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.</p>
<table border="1">
<tr>
<td><p>Textabsatz in einer Tabellenzelle.</p></td>
</tr>
</table>
</div>
<p>Textabsatz außerhalb eines div-Bereichs mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.</p>
<p>Noch ein Textabsatz.</p>
</body>
</html>
Erläuterung:
Die Selektoren im Beispiel haben folgende Bedeutung:
Nachfahren-Selektoren
div i { color:red; }
Damit wird wie nach CSS-1.0-Syntax bekannt festgelegt, dass i-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, rote Textfarbe (color:red;) erhalten. Dabei wird das i-Element auch dann rot formatiert, wenn es z.B. in dieser Form vorkommt:
<div><ul><li><i></i></li></ul></div>. Deshalb gibt es ab CSS2 die Möglichkeit, genauer festzulegen, für welche Verschachtelung die Formatdefinition gelten soll.
div * b { color:violet; }
Der Universalselektor * wird hier als Platzhalter für ein beliebiges Element und damit für eine weitere Verschachtelungsebene verwendet. Im obigen Beispiel wird festgelegt, dass b-Elemente, die innerhalb eines div-Bereichs vorkommen, nur dann violette Textfarbe (color:violet;) erhalten, wenn das b-Element in dieser oder einer vergleichbaren Form vorkommt:
<div><p><b></b></p></div>, also mindestens zwei Ebenen unterhalb des div-Elements. Im obigen Beispiel sind verschiedene Textstellen an verschiedenen Stellen mit <b>...</b> ausgezeichnet. Das erste b-Element in dem Text, der zuerst und direkt innerhalb des div-Bereichs notiert ist, erhält noch keine violette Farbe, wohl aber das nächste b-Element im gleichen Satz, da dieses Element bereits zwei Ebenen unterhalb des div-Elements liegt (das i-Element liegt dazwischen).
Kind-Selektor
div > p { color:blue; }
Mit dem Zeichen > wird in diesem Selektor festgelegt, dass p-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, nur dann blaue Textfarbe (color:blue;) erhalten, wenn das p-Element in dieser Form vorkommt:
<div><p></p></div>, also eine Ebene unterhalb des div-Elements. Im obigen Beispiel ist innerhalb des div-Bereichs unter anderem auch eine Tabelle notiert, in der noch mal ein p-Element vorkommt. Dort greift die Formatierung der blauen Farbe nicht, weil das p-Element mehr als eine Verschachtelungsebene unterhalb des div-Elements liegt (die Tabellenelemente sind dazwischen).
Nachbar-Selektor
div + p { margin-top:100px; }
Mit dem Zeichen + wird in diesem Selektor festgelegt, dass p-Elemente, die unmittelbar auf ein div-Element hin folgen, einen Abstand von 100 Pixeln nach oben hin erhalten (margin-top:100px;). Im obigen Beispiel ist das bei dem vorletzten p-Element der Fall. Dieses folgt unmittelbar hinter dem div-Bereich.
Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.
Beachten Sie:
Der Internet Explorer 6.0 interpretiert die Selektoren > und + noch nicht.
Mit Hilfe attributbedingter Formate können Sie in Selektoren angeben, dass Formatdefinitionen nur für Elemente mit bestimmten Attributen oder sogar nur für Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Attribut-Selektoren</title>
<style type="text/css">
p { font-weight:bold; font-family:Tahoma,sans-serif; font-size:1.2em; }
p[align] { color:red; }
p[align=center] { color:blue; text-align:left; }
td[abbr~=Berlin] { background-color:#FFFF00 }
*[lang|=en] { background-color:#FF0000; color:#FFFFFF; }
</style>
</head>
<body>
<p>Das ist ein Textabsatz, ein stinknormaler.</p>
<p align="right">Das ist ein Textabsatz, rechts ausgerichtet.</p>
<p align="center">Das ist ein Textabsatz, zentriert? Wirklich zentriert?</p>
<table border="1"><tr>
<th>Berlin</th>
<th>Hamburg</th>
</tr><tr>
<td abbr="Es folgen Infos zu Berlin">Eine Menge Inhalt zu Berlin</td>
<td abbr="Es folgen Infos zu Hamburg">Eine Menge Inhalt zu Hamburg</td>
</tr></table>
<p>Ein Textabsatz <span lang="fr">avec</span> Text <span lang="en">about</span>
einen <span lang="en-US">English man in New York</span></p>
</body>
</html>
Erläuterung:
In dem Beispiel ist zunächst eine Formatdefinition für alle p-Elemente notiert. Dann folgen jedoch zwei weitere Formatdefinitionen - ebenfalls für p-Elemente, aber nur für solche, die ein Attribut align haben. Mit der Syntax p[align] werden alle p-Elemente erfasst, die ein align-Attribut haben. Mit p[align=center] werden alle p-Elemente erfasst, die ein align="center" im einleitenden Tag haben. Mit td[abbr~=Berlin] werden alle Tabellenzellen des Typs td erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute. Mit *[lang|=en] schließlich werden alle Elemente erfasst, die ein Universalattribut lang mit einem Wert, der mit en beginnt aufweisen und danach eventuell einen Bindestrich enthalten (wie en oder en-US).
Sie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem Universalattributclass. So können Sie beispielsweise für Überschriften 1. Ordnung zwei Varianten erzeugen. Dazu vergeben Sie Namen für die Klassen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Klassen-Selektor</title>
<style type="text/css">
h1 { font-family:Arial,sans-serif; font-size:2em; font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
*.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
.extra.hinterlegt { background-color:#FF0000 }
</style>
</head>
<body>
<h1>H1 ganz normal nur etwas formatiert</h1>
<h1 class="hinterlegt">H1 knallgelb hinterlegt</h1>
<h2>H2 ganz normal, <span class="hinterlegt"> türkis <b class="extra">lila</b> hinterlegt</span></h2>
<h3 class="extra hinterlegt">H3, rot hinterlegt</h3>
</body>
</html>
Erläuterung:
Es gibt zwei Möglichkeiten, Klassen für HTML-Elemente zu notieren: entweder für einen bestimmten HTML-Elementtyp, oder für keinen bestimmten. In jedem Fall bestimmen Sie eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Punkt notieren und unmittelbar dahinter einen Namen für die Klasse angeben. Im obigen Beispiel wird mit h1.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h1 gilt: also z.B. auf HTML-Elemente wie <h1 class="hinterlegt"> anwendbar ist. Mit *.hinterlegt wird im Beispiel demonstriert, dass Sie durchaus den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden können. Der Stern gilt als Universalselektor und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen. Im Beispiel .extra können Sie das sehen. Ein h1-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor h1.hinterlegt bestimmt werden. Ein p-Element mit <p class="hinterlegt"> erhält dagegen die Formatierungen, die mit *.hinterlegt bestimmt werden. Es ist auch möglich, ausschließlich Elemente zu selektieren, die mehrere Klassennamen aufweisen. Notieren Sie in diesem Fall beide Klassenselektoren direkt hintereinander.
Die Namen hinter dem Punkt können Sie frei vergeben, Sie dürfen jedoch
keine Leerzeichen und deutsche Umlaute enthalten,
nicht mit einer Ziffer oder einem Bindestrich beginnen
und sollten keinen Unterstrich enthalten und nicht zu lang sein.
Beachten Sie:
Der Internet Explorer bis Version 6 versagt leider bei der Definition von .extra.hinterlegt und wendet diese Definition auf alle Elemente an, die der Klasse hinterlegt zugewiesen wurden, nicht nur dem Abschnitt, der mit class="extra hinterlegt" explizit beiden Klassen zugewiesen wurde.
Die beiden HTML-Elemente div und span haben besondere Bedeutung für Stylesheets. Der Grund dafür ist, dass sie selber relativ eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Die Darstellung, nicht jedoch die mögliche Verschachtelung, lässt sich mit der Eigenschaft display beeinflussen. Das div-Element eignet sich vor allem dafür, mehrere Elemente zu gruppieren und in ihrer Gesamtheit zu formatieren. Mit dem span-Element hingegen lassen sich kleinere Teilbereiche definieren, deren Darstellung mit CSS gestaltet werden kann.
Das folgende Beispiel zeigt, wie Sie mit <div>, <span> und Klassen Bereiche formatieren können, für die keine speziell dafür vorgesehenen HTML-Elemente existieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Klassen-Selektor</title>
<style type="text/css">
.beitrag { border:1px outset gray; margin:.5em; padding:.5em; background-color:#efd;}
.uebersetzung { border-bottom:1px dotted #900; }
.autor { font-style:italic; }
.datum { font-size:80%; color:#444; }
</style>
</head>
<body>
<div class="beitrag">
<p>Wo finde ich weitere Information über HTML?
<p class="autor">Moritz Ratlos, <span class="datum">21.05.2006</span></p>
</div>
<div class="beitrag">
<p>Beispielsweise in der
<a href="http://www.w3.org/TR/REC-html40/">HTML 4.01-
<span lang="en" title="Empfehlung" class="uebersetzung">Recommendation</span></a>.
</p>
<p class="autor">Max Hilfreich, <span class="datum">22.05.2006</span></p>
</div>
<div class="beitrag">
<p>Vielen Dank für den <span lang="en" title="Verweis" class="uebersetzung">Link!</span></p>
<p class="autor">Moritz Ratlos, <span class="datum">22.05.2006</span></p>
</div>
</body>
</html>
Erläuterung:
Im style-Bereich des Beispiels werden Klassen für beliebige Elemente definiert, die diese Klassen mit class="beitrag", class="datum" usw. verwenden können und damit die entsprechenden Formate annehmen.
Im sichtbaren Bereich der Datei, also zwischen <body> und </body>, wurden Elemente der Typen div, p und span um class-Attribute erweitert. Die einzelnen Beiträge wurden mittels <div class="beitrag">…</div> gruppiert und im Stylesheet mit Rahmen, Abständen und einer Hintergrundfarbe versehen. Die Namen der Verfasser sowie das jeweilige Datum befinden sich in einem mit <p class="autor">…</p> ausgezeichneten Bereich, welcher zur Gänze kursiv angezeigt wird. Das Datum selbst wird aufgrund von class="datum" zusätzlich kleiner und heller dargestellt. Im Verweis des zweiten und im Text des dritten Abschnitts wurden fremdsprachige Bestandteile um die Attribute lang="en", title="…" und class="uebersetzung" ergänzt. Der über die Klasse .uebersetzung zugewiesene untere Rahmen verdeutlicht, dass zusätzliche Information, in diesem Fall die Übersetzung eines Begriffes im title-Attribut, verfügbar ist – grafische Browser stellen dessen Inhalt im Allgemeinen per Tooltip bereit.
So wie Sie Formate für Klassen definieren können, die in HTML mit dem Universalattributclass angesprochen werden, können Sie auch Formate definieren, die über das Universalattribut id angesprochen werden. Da die Wertzuweisung an ein solches Attribut ein dokumentweit eindeutiger Name sein sollte, handelt es sich also einfach um eine zentrale Formatdefinition für das eine Element mit diesem id-Namen. In CSS werden die id-Namen allerdings nicht nur wie beispielsweise in JavaScript als dokumentweit eindeutige Bezeichner betrachtet, sondern auch als elementtypweit eindeutige Bezeichner.
In dem Beispiel werden drei Individualformate definiert: zunächst einmal zwei Individualformate mit den Namen #roterBereich und #blauerBereich. Solche Formate beginnen also mit dem Gatterzeichen #, gefolgt von dem Namen. Ein HTML-Element, das diesen Namen als Wertzuweisung an das id-Attribut benutzt, bekommt dann die entsprechenden Formate zugewiesen. Das obige Beispiel zeigt einen typischen Anwendungsfall für Individualformate, nämlich das Definieren von Formaten für absolut positionierte Bereiche (position:absolute;).
Weiterhin wird ein Individualformat mit dem Selektor h1#Titel definiert. Das ist eine Syntax, die erst seit CSS2 zur Verfügung steht. Dabei wird vor dem Gatterzeichen, das ein Individualformat kennzeichnet, ein HTML-Elementtyp notiert, im Beispiel also h1 für Überschriften erster Ordnung. Hinter dem Gatterzeichen dann wieder der Name des Individualformats. Im Beispiel wird die Formatdefinition nur dann angewendet, wenn es in der HTML-Datei ein h1-Element mit dem Attribut id="Titel" gibt. Wenn es dagegen etwa ein Element div mit id="Titel" gäbe, würde die Formatdefinition dort ignoriert.
Beachten Sie:
Individualformate mit vorangestelltem Elementtyp werden von Internet Explorer 5.x und Netscape 6.0 erkannt, nicht aber von älteren Versionen.
Mittels Pseudoklassen und Pseudoelementen können Sie Deklarationen für HTML-Bestandteile definieren, die sich nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der "erste Buchstabe eines Absatzes". Zum Definieren solcher Pseudoelemente und Pseudoklassen gibt es eine spezielle Syntax.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Pseudoklassen für Verweise</title>
<style type="text/css">
body { font-family:Arial,sans-serif; }
a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
a:focus { color:#00AA00; background-color:#FFFF77; font-weight:bold; }
a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
</style>
</head>
<body>
<p>
Vermutlich kennen Sie die <a href="../../index.htm">Kapiteleinstiegsseite zu CSS</a><br>
Und wohl auch die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a><br>
Aber kennen Sie auch die <a href="../../../intro/hypertext/geschichte.htm">Geschichte von Hypertext</a>?<br>
Oder die <a href="../../../xml/regeln/baumstruktur.htm">Baumstruktur einer XML-Datei</a>?
</p>
</body>
</html>
Erläuterung:
Bei Pseudoelementen und Pseudoklassen notieren Sie zuerst das betroffene HTML-Element, im Beispiel das a-Element für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa link (für noch nicht besuchte Verweisziele), visited (für bereits besuchte Verweisziele), focus (für z.B. mit der Tastatur ausgewählte Verweise), hover (für Verweise, während der Anwender mit der Maus darüber fährt) und active (für angeklickte Verweise). Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter, und dass auch die Reihenfolge von Bedeutung ist, da später notierte Angaben die zuvor notierten überschreiben und sich z.B. a:hover für einen mit der Tastatur ausgewählten Verweis nicht auswirken könnte, wenn a:focus später notiert wird.
Es gibt eine Reihe fester, erlaubter Pseudoelemente und Pseudoklassen. Diese werden werden im Zusammenhang mit den CSS-Eigenschaften im Abschnitt über Pseudoelemente und Pseudoklassen beschrieben.
Sinnvolle Vorkenntnisse zum Verständnis: HTML und Stylesheets und HTML.
Dieser Abschnitt beschreibt, wie Sie Stylesheets in HTML definieren können. Ferner werden die allgemeinen Regeln für Stylesheets angesprochen.
Der Abschnitt besteht aus folgenden Seiten:
Sinnvolle Vorkenntnisse zum Verständnis: HTML.
Dieses Kapitel beschreibt die HTML-Ergänzungssprache der Cascading Stylesheets, mit der Sie HTML-Elemente exakt formatieren und positionieren können.
Der Abschnitt besteht aus folgenden Seiten und Unterabschnitten:
Einfach mit die Maus Richtung linken Fensterrand bewegen.
Um das Menü wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.
Und jetzt kommen noch etliche leere Absätze, damit auch sichtbar wird,
dass das Menü immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.
Dieses Beispiel zeigt, wie Sie eine laufende Uhr, die Sie beliebig formatieren können, so realisieren können, dass sie ab Internet Explorer V4.x und Netscape V4.x funktioniert. In der Praxis eignet sich eine solche laufende Uhr z.B. für Seiten, die dauerhaft eingeblendet werden, z.B. in einem Frame-Fenster, dessen Inhalt sich beim Surfen nicht ändert, oder auf Seiten, die Multimedia-Spiele oder einen eingebetteten Chat enthalten - also auf Seiten, die der Anwender lange anzeigt, ohne darin weiterzuscrollen oder die Seite zu verlassen.
Das Beispiel benutzt die DHTML-Bibliothek, um das zu leisten, was in dem Beispiel an dynamischem HTML erforderlich ist.
Das Beispiel zeigt eine vollständige HTML-Datei, in der die laufende Datums-/Uhrzeit-Anzeige eingebettet ist. Die Datei dhtml.js, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.
<html><head>
<title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function ZeitAnzeigen () {
var Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
"Donnerstag", "Freitag", "Samstag");
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
if (Jahr < 999)
Jahr += 1900;
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var Sekunden = Jetzt.getSeconds();
var WoTag = Jetzt.getDay();
var Vortag = (Tag < 10) ? "0" : "";
var Vormon = (Monat < 10) ? ".0" : ".";
var Vorstd = (Stunden < 10) ? "0" : "";
var Vormin = (Minuten < 10) ? ":0" : ":";
var Vorsek = (Sekunden < 10) ? ":0" : ":";
var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
var Gesamt = Wochentagname[WoTag] + ", " + Datum + ", " + Uhrzeit;
if (DHTML) {
if (NS4) {
setContent("id", "Uhr", null, '<span class="Uhr">' + Gesamt + "<\/span>");
} else {
setContent("id", "Uhr", null, Gesamt);
}
window.setTimeout("ZeitAnzeigen()", 1000);
}
}
</script>
<style type="text/css">
#Uhr { position:absolute; top:10px; left:10px; }
#RestDerSeite { position:absolute; top:50px; left:10px; }
.Uhr { font-family:Arial; font-size:24px; color:blue; }
.RestDerSeite { font-family:Arial; color:black; }
</style>
</head>
<body onload="window.setTimeout('ZeitAnzeigen()', 1000)">
<div id="Uhr" class="Uhr"> </div>
<div id="RestDerSeite" class="RestDerSeite">
<h1>Willkommen auf dieser Seite</h1>
<p>hier gehts ganz normal weiter</p>
</div>
</body>
</html>
Erläuterung:
Im Körper der HTML-Datei im Beispiel werden insgesamt zwei div-Bereiche definiert. Beide Bereiche erhalten einen id-Namen und erhalten über den jeweiligen id-Namen im style-Bereich im Dateikopf entsprechende CSS-Eigenschaften zugewiesen. Beide Bereiche werden absolut positioniert. Ohne diesen Trick wäre die ganze Sache mit Netscape 4.x nicht realisierbar. Der erste Bereich dient zur Anzeige von Datum und Uhrzeit, und der zweite Bereich enthält den gesamten restlichen Inhalt der Datei, weshalb er auch den Namen RestDerSeite trägt.
Der erste Bereich enthält zunächst nur ein geschütztes Leerzeichen. So sieht man zunächst noch nichts von dem Bereich, aber das Leerzeichen ist wichtig, damit der Bereich einen Inhalt hat. Ansonsten würde beim ersten dynamischen Zugriff auf seinen Inhalt mit DOM-fähigen Browsern und den Funktionen der DHTML-Bibliothek ein Fehler erzeugt.
Die Beispieldatei enthält ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden, im zweiten steht die Funktion ZeitAnzeigen(), die für die Zeitanzeige verantwortlich ist. Im einleitenden <body>-Tag ist der Event-Handleronload, der eintritt, wenn die Datei und alle ihre eingebundenen Ressourcen vollständig geladen sind. Diesem Event-Handler ist ein Funktionsaufruf zugeordnet. Er startet die Funktion ZeitAnzeigen(), jedoch eingebettet in eine setTimeout-Anweisung, die den Aufruf um 1 Sekunde bzw. 1000 Millisekunden verzögert. In der ersten Sekunde wird also noch nichts angezeigt.
Innerhalb der Funktion ZeitAnzeigen() wird zunächst ein Array für die deutschen Wochentage definiert. Anschließend ermittelt die Funktion mit Hilfe des Date-Objekts die aktuelle Zeit. Mit Hilfe diverser Formatierbefehlen erzeugt sie dann eine Zeichenkette, die eine ordentliche Datums-/Uhrzeitdarstellung Konvention nach deutscher Konvention enthält. Diese Zeichenkette wird in der Variablen mit dem Namen Gesamt gespeichert. All diese Dinge haben noch nichts mit der Anzeige zu tun.
Der eigentliche DHTML-Teil ist dank der eingebundenen DHTML-Bibliothek kein großes Problem. Mit if (DHTML) wird zunächst abgefragt, ob überhaupt Dynamisches HTML verfügbar ist. Der gesamte Code zum dynamischen Schreiben in den div-Bereich wird davon abhängig gemacht. So werden Fehlermeldungen in Browsern vermieden, die zwar JavaScript, aber kein Dynamisches HTML beherrschen. Dann wird abgefragt, ob mit dem älteren Netscape-Modell gearbeitet wird. Wenn ja, sieht das dynamische Schreiben in den div-Bereich ein klein wenig anders aus als in den übrigen Fällen. Der Grund ist eine weitere Schwäche des Netscape-4-Browsers. Er würde die CSS-Klasse Uhr im einleitenden div-Tag ignorieren, wenn man sie ihm nicht noch mal in Form eines span-Elements mit in den dynamischen Bereich schreiben würde. Nur so erhält die Datums-/Uhrzeitanzeige die CSS-Formatierungen, die im Dateikopf im style-Bereich für die Uhr-Klasse festgelegt werden. Das dynamische Ändern des div-Inhalts geschieht durch Aufruf der Bibliotheksfunktion setContent(), die sich um alle weiteren Einzelheiten kümmert.
In der letzten Anweisung innerhalb der Funktion ZeitAnzeigen() ruft sich die Funktion selber wieder auf, und zwar wieder mit einer durch window.setTimeout() bewirkten Zeitverzögerung von 1000 Millisekunden oder einer Sekunde. Dadurch passiert eine Sekunde lang nichts, und dann wird die Zeit erneut geschrieben.
Angesichts der vielen verschiedenen DHTML-Modelle, die derzeit noch kursieren, ist es für Programmierer oft nicht einfach, sich die ganzen unterschiedlichen Befehle und Zugriffsmöglichkeiten zu merken. Außerdem werden Dateien bei größeren Scripts ganz schön stark aufgebläht, wenn man immer wieder die gleichen Browser-Abfragen und Konstrukte für den Elementzugriff notiert. Besser ist es deshalb, einmal eine Bibliothek an allgemein geschriebenen DHTML-Funktionen zu schreiben, diese in eine externe JavaScript-Datei auszulagern, und die JavaScript-Datei dann in denjenigen Dateien mit einzubinden, wo der Code der DHTML-Funktionen benötigt wird.
Das Beispiel auf dieser Seite stellt eine solche Bibliothek für DHTML-Funktionen vor. Die einzelnen Funktionen werden dabei auch genau erklärt. In den anderen Beispielen in diesem Kapitel kommt die hier erstellte Bibliothek dann zum praktischen Einsatz.
Selbstverständlich können Sie die Funktionsbibliothek für Ihre Zwecke beliebig erweitern. So ist es z.B. denkbar, allgemein geschriebene Funktionen zur CSS-Formatierung oder -Positionierung von Elementen hinzuzufügen. Der hier vorgestellte Grundstock an Funktionen soll vor allem den Zugriff auf Elemente erleichtern und Browser-Abfragen reduzieren.
Der folgende Quelltext zeigt die vollständige DHTML-Bibliothek. Kopieren Sie sich den vollständigen Quelltext und speichern Sie ihn in einer Textdatei mit dem Namen dhtml.js. Dann haben Sie die externe JavaScript-Datei mit den DHTML-Funktionen.
Beispiel - Datei dhtml.js:
/* DHTML-Bibliothek */
var DHTML = false, DOM = false, MSIE4 = false, NS4 = false, OP = false;
if (document.getElementById) {
DHTML = true;
DOM = true;
} else {
if (document.all) {
DHTML = true;
MSIE4 = true;
} else {
if (document.layers) {
DHTML = true;
NS4 = true;
}
}
}
if (window.opera) {
OP = true;
}
function getElement (Mode, Identifier, ElementNumber) {
var Element, ElementList;
if (DOM) {
if (Mode.toLowerCase() == "id") {
Element = document.getElementById(Identifier);
if (!Element) {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "name") {
ElementList = document.getElementsByName(Identifier);
Element = ElementList[ElementNumber];
if (!Element) {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "tagname") {
ElementList = document.getElementsByTagName(Identifier);
Element = ElementList[ElementNumber];
if (!Element) {
Element = false;
}
return Element;
}
return false;
}
if (MSIE4) {
if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
Element = document.all(Identifier);
if (!Element) {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "tagname") {
ElementList = document.all.tags(Identifier);
Element = ElementList[ElementNumber];
if (!Element) {
Element = false;
}
return Element;
}
return false;
}
if (NS4) {
if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
Element = document[Identifier];
if (!Element) {
Element = document.anchors[Identifier];
}
if (!Element) {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "layerindex") {
Element = document.layers[Identifier];
if (!Element) {
Element = false;
}
return Element;
}
return false;
}
return false;
}
function getAttribute (Mode, Identifier, ElementNumber, AttributeName) {
var Attribute;
var Element = getElement(Mode, Identifier, ElementNumber);
if (!Element) {
return false;
}
if (DOM || MSIE4) {
Attribute = Element.getAttribute(AttributeName);
return Attribute;
}
if (NS4) {
Attribute = Element[AttributeName]
if (!Attribute) {
Attribute = false;
}
return Attribute;
}
return false;
}
function getContent (Mode, Identifier, ElementNumber) {
var Content;
var Element = getElement(Mode, Identifier, ElementNumber);
if (!Element) {
return false;
}
if (DOM && Element.firstChild) {
if (Element.firstChild.nodeType == 3) {
Content = Element.firstChild.nodeValue;
} else {
Content = "";
}
return Content;
}
if (MSIE4) {
Content = Element.innerText;
return Content;
}
return false;
}
function setContent (Mode, Identifier, ElementNumber, Text) {
var Element = getElement(Mode, Identifier, ElementNumber);
if (!Element) {
return false;
}
if (DOM && Element.firstChild) {
Element.firstChild.nodeValue = Text;
return true;
}
if (MSIE4) {
Element.innerText = Text;
return true;
}
if (NS4) {
Element.document.open();
Element.document.write(Text);
Element.document.close();
return true;
}
}
Erläuterung:
Die externe JavaScript-Datei darf nichts anderes als JavaScript-Code enthalten, so wie im Beispiel gezeigt. Im Folgenden werden die globalen Variablen und die Funktionen beschrieben. Denn mit diesen Variablen und Funktionen können Sie arbeiten, wenn Sie die Bibliothek verwenden wollen.
In den globalen Variablen wird gespeichert, welche DHTML-Fähigkeiten der Browser unterstützt. Sie werden direkt am Anfang der Bibliothek automatisch mit ihren Werten versorgt und sollten anschließend nicht mehr geändert werden. Die Wirkungsweise der übrigen Funktionen ist davon abhängig, dass die globalen Variablen mit korrekten Werten versorgt sind.
Um in Erfahrung zu bringen, welches DHTML-Modell verwendet werden muss, wird abgefragt, ob bestimmte Objekte existieren.
Zum Testen auf DOM-Verfügbarkeit eignet sich die Frage, ob
document.getElementById existiert, denn das ist eine wichtige DOM-Methode, die in allen DOM-Implementierungen existieren sollte. Beachten Sie, dass manche Browser zwar document.getElementById kennen, aber andere Teile des umfangreichen DOM nicht unterstützen. Wenn Sie spezielle DOM-Techniken verwenden, sollten Sie jeweils im Einzelfall überprüfen, ob die benötigten Objekte zur Verfügung stehen.
Zum Testen auf die ältere Microsoft- und Netscape-Syntax wird auf deren zentrale DHTML-Objekte hin abgefragt. Wenn document.all verfügbar ist, ist Syntax nach dem älteren Microsoft-Modell angesagt. Wenn document.layers verfügbar ist, Syntax nach dem älteren Netscape-Modell.
Zum Schluss wird über window.opera abgefragt, ob es sich um einen Opera-Browser handelt. Dies ist zur Bestimmung des verwendeten DHTML-Modells nicht nötig, aber Opera bedarf an einigen Stellen der Funktionen der Bibliothek einer Sonderbehandlung.
Globale Variable DHTML:
Diese Variable speichert, ob Dynamisches HTML bei dem vom Anwender eingesetzten Browser verfügbar ist oder nicht. Wenn Dynamisches HTML nach irgendeinem der bekannten DHTML-Modelle verfügbar ist, dann erhält sie den Wert true (wahr), wenn nicht, dann den Wert false (unwahr). Mit der simplen Abfrage if (DHTML) können Sie dann im Verlauf eines eigenen Scripts überprüfen, ob überhaupt Dynamisches HTML möglich ist.
Globale Variable DOM:
Diese Variable speichert, ob Dynamisches HTML nach DOM-Syntax möglich ist oder nicht (Wert true oder Wert false). Mit if (DOM) können Sie abfragen, ob ein neuerer Browser am Werk ist, der das DOM in seiner JavaScript-Implementierung unterstützt.
Globale Variable MSIE4:
Wenn der Wert der Variable MSIE4 gleich true ist, dann läuft Ihr Script mit auf einem Internet Explorer der 4er-Generation. Mit if (MSIE4) können Sie also in Ihrem Script abfragen, ob mit dem DHTML-Modell des Internet Explorer 4.x gearbeitet werden muss.
Globale Variable NS4:
Wenn diese Variable den Wert true besitzt, dann läuft Ihr Script mit auf einem Netscape-Browser der 4er-Generation. Wenn ein 6er-Netscape oder ein anderer Abkömmling des Mozilla-Browsers eingesetzt wird, ist stattdessen die Variable DOM gleich true, während NS4 gleich false ist. Mit if (NS4) können Sie also in Ihrem Script abfragen, ob mit der DHTML-Syntax des alten 4er-Netscape gearbeitet werden muss.
Globale Variable OP:
Wenn die Variable OP den Wert true hat, dann läuft Ihr Script auf einem Opera-Browser. Mit if (OP) können Sie also in Ihrem Script abfragen, ob ein Opera-Browser am Werk ist. Handelt es sich um einen neueren Opera-Browser, ist in den Variablen DOM der Wert true gespeichert.
Diese Funktion ist eigentlich die zentrale Funktion der hier vorgestellten Bibliothek. Sie greift auf ein bestimmtes Element im Dokument zu und gibt das Objekt dieses Elements zurück. Das funktioniert mit DOM-fähigen Browsern ebenso wie mit dem älteren Internet Explorer 4.x und in eingeschränkter Form auch mit Netscape 4.x: Sie können in diesem Browser auf Layer und simulierte Layer über deren Namen, ID oder Indexnummer zugreifen sowie auf Grafiken, Links bzw. Anker, Java-Applets und Formulare über deren Namen.
In den meisten Fällen müssen Sie diese Funktion nicht selber aufrufen. Es handelt sich vielmehr um eine Basisfunktion, die von den übrigen Funktionen der Bibliothek benutzt wird. Dennoch gibt es auch Fälle, in denen ein Direktaufruf dieser Funktion einen Sinn hat. Die Funktion erwartet folgende Parameter:
Mode ist die Art und Weise, wie auf ein Element zugegriffen werden soll. Es gibt vier erlaubte Werte für diesen Parameter: "id", "name", "tagname" und "layerindex". Übergeben Sie "id", wenn Sie auf ein Element zugreifen wollen, das ein id-Attribut hat, z.B. <div id="Bereich">. Übergeben Sie "name", wenn das Element, auf das Sie zugreifen wollen, kein id-Attribut, aber dafür ein name-Attribut hat, z.B. <a name="Anker">. Übergeben Sie "tagname", wenn das Element, auf das Sie zugreifen wollen, weder ein id- noch ein name-Attribut hat. Übergeben Sie "layerindex" nur dann, wenn es sich um Netscape-Layer handelt, die über das layers-Objekt mit Hilfe von Indexnummern angesprochen werden sollen.
Identifier ist die nähere Angabe zu dem, was Sie bei Mode festgelegt haben: Wenn Sie bei Mode den Wert "id" übergeben, dann erwartet die Funktion bei Identifier den Wert des id-Attributs. Wenn Sie bei Mode den Wert "name" übergeben, dann erwartet Identifier den Wert des name-Attributs. Wenn Sie bei Mode den Wert tagname übergeben haben, dann erwartet Identifier den gewünschten Elementnamen, also z.B. "h1" oder "div". Wenn Sie bei Mode den Wert "layerindex" übergeben haben, erwartet Identifier die Indexnummer für den gewünschten Netscape-Layer.
ElementNumber wird nur dann benötigt, wenn bei Mode einer der beiden Werte "name" oder "tagname" angegeben wurde. In diesem Fall müssen Sie bei ElementNumber eine Indexnummer angeben, mit der Sie festlegen, das wievielte Element im Dokument mit dem entsprechenden Namen oder Elementnamen Sie meinen. Das erste Element hat die Indexnummer 0, das zweite Nummer 1 usw.
Die Funktion getElement() geht der Reihe nach die möglichen DHTML-Modelle durch und fragt zuerst mit if (DOM) die globale Variable DOM daraufhin ab, ob DOM-Syntax verfügbar ist. Wenn ja, dann wird abhängig von den übergebenen Parametern das gewünschte Element nach DOM-Syntax ermittelt und zurückgegeben. Nur wenn keine DOM-Syntax verfügbar ist, wird versucht, die älteren DHTML-Modelle anzuwenden. Zunächst wird mit if (MSIE4) geprüft, ob das ältere DHTML-Modell von Microsoft verfügbar ist. Wenn ja, wird das Element nach dessen Syntax über das document.all-Objekt ermittelt. Wenn auch die Microsoft-Syntax nicht greift, bleibt noch die ältere Netscape-Syntax, die mit if (NS4) abgefragt wird. In diesem Fall wird aus den übergebenen Parametern der Zugriff auf ein Layer-Objekt konstruiert.
Gleichzeitig erfolgt in der Funktion eine Fehlerbehandlung. In jedem Zweig der Funktion wird jeweils geprüft, ob das gewünschte Element überhaupt existiert. Tritt dieser Fall ein, wird das Element zurückgegeben. Andernfalls wird false zurückgegeben.
Über diese Funktion, die ihrerseits auf die Funktion getElement() zurückgreift, können Sie auf bequeme Weise den Wert eines Attributs eines bestimmten Elements ermitteln - zumindest wenn das DOM-Modell oder das ältere Microsoft-Modell für DHTML verfügbar sind. Neben den drei bereits bekannten ersten Parametern erwartet diese Funktion einen vierten Parameter AttributeName. Bei diesem müssen Sie den Namen des gewünschten Attributs übergeben. Wenn Sie den dritten Parameter ElementNumber nicht angeben, notieren Sie an dessen Stelle das Schlüsselwort null.
Die Funktion getAttribute() benutzt die Objektmethoden getAttribute(), die sowohl im DOM-Modell als auch im älteren Microsoft-Modell verfügbar sind. Bei Netscape 4 dagegen wird die gewünschte Eigenschaft direkt abgefragt.
Die Auswahl des richtigen Objekts übernimmt die Basisfunktion getElement(). Natürlich erfolgt auch in jedem Fall die Überprüfung, ob das gewünschte Objekt überhaupt existiert.
Funktion getContent() - Elementinhalt ermitteln:
Beispielaufrufe:
if (!NS4) Elementinhalt = getContent("id", "Hinweis");
if (!NS4) Elementinhalt = getContent("name", "Verweis", 3);
if (!NS4) Elementinhalt = getContent("tagname", "p", 8);
Über diese Funktion können Sie auf bequeme Weise den Inhalt eines Elements ermitteln - zumindest wenn das DOM-Modell oder das ältere Microsoft-Modell für DHTML verfügbar sind. getContent() bedient sich der Basisfunktion getElement() und reicht ihre drei übergebenen Parameter einfach an jene durch. Bei DOM-Syntax versucht sie, an den Textinhalt des Elements mit firstChild.nodeValue zu kommen, bei Microsoft-Syntax über die Eigenschaft innerText des all-Objekts.
Das ältere Netscape-Modell kennt kein Auslesen von Elementinhalten. In den Beispielaufrufen ist der Funktionsaufruf deshalb davon abhängig gemacht, dass nicht nach älterer Netscape-Syntax gearbeitet wird (if (!NS4)). Sie können diese Funktion zwar auch im Netscape 4 ausführen, sie wird aber immer false anstelle des gewüschten Elementinhalts zurückgeben.
Beachten Sie, dass die Funktion getContent() bei Verwendung des DOM-Modells eine leere Zeichenkette zurückliefert, wenn der erste Kindknoten des Elements kein Text ist, sondern ein weiteres Element. Wenn also beispielsweise notiert ist: <p id="Absatz">der Text</p>
Dann liefert der Funktionsaufruf getContent("id", "Absatz") den Wert der Text zurück. Wenn aber notiert ist: <p id="Absatz"><b>der Text</b></p>
Dann liefert der Funktionsaufruf bei Anwendung des DOM-Modells eine leere Zeichenkette zurück, da es keinen Text als Elementinhalt von p gibt, sondern der Inhalt ein anderes Element, nämlich ein b-Element ist.
Die Parameter sind bei getContent() die gleichen wie bei getElement(). Nur der Wert "layerindex" beim Parameter Mode wird von dieser Funktion nicht verarbeitet, da sich dieser auf Netscape-spezifisches Verhalten bezieht.
Die Funktion getContent() kümmert sich auch um ältere Browser, die Inhalte nicht dynamisch lesen können, jedoch andere Teile der Bibliothek interpretieren. Bevor der Versuch unternommen wird, Inhalte zu lesen, fragt sie ab, ob das gewünschte Objekt existiert und ob auch das Objekt firstChild vorhanden ist. Erst wenn diese Bedingung erfüllt ist, wird versucht den Inhalt zu lesen. Dadurch wird in jedem Fall eine Fehlermeldung vermieden.
Beispielaufrufe: setContent("id", "Hinweis", null, "neuer Hinweistext"); setContent("name", "Verweis", 3, "neuer Verweistext"); setContent("tagname", "p", 8, "neuer Textinhalt des Elements"); if (NS4) setContent("layerindex", 2, null, "neuer Inhalt des Layers");
Mit dieser Funktion können Sie den Inhalt eines Elements dynamisch ändern. Die Funktion setContent() bedient sich für den Zugriff auf das gewünschte Element der Basisfunktion getElement(). Die ersten drei Parameter, die bei denen der übrigen Funktionen gleichen, werden dazu an getElement() weitergereicht. Als vierten Parameter Text erwartet die Funktion setContent() den gewünschten Textinhalt. Beachten Sie, dass dieser Text zumindest beim DOM-Modell und beim älteren Microsoft-Modell nur als reiner Text interpretiert wird. HTML-Formatierungen im Text werden dabei als Klartext interpretiert.
Übergeben Sie bei Parametern, für die Sie keinen Wert angeben, das Schlüsselwort null.
Bei Netscape-Layern benutzt die Funktion setContent() automatisch die üblichen Befehle zum Öffnen des Layer-Dokuments (document.Layer.document.open()), zum Schreiben (document.Layer.document.write()) und zum Schließen (document.Layer.document.close()).
Die Funktion setContent() kümmert sich auch um ältere Browser, die Inhalte noch nicht dynamisch ändern können, jedoch andere Teile der Bibliothek interpretieren. Bevor der Versuch unternommen wird, Inhalte zu ändern, fragt sie daher ab, ob das gewünschte Objekt existiert und ob auch das Objekt firstChild existiert. Erst wenn diese Bedingung erfüllt ist, versucht sie den Inhalt zu ändern. Dadurch wird in jedem Fall eine Fehlermeldung vermieden.
Das folgende Beispiel zeigt, wie Sie die DHTML-Bibliothek verwenden können. Die einzelnen Funktionen werden in dieser Beispieldatei mit konkreten Beispielen aufgerufen. Am besten können Sie die Funktionsweise testen, wenn Sie das Anzeigebeispiel mal mit verschiedenen Browsern aufrufen.
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function Testen() {
var Ausgabetext = "";
if (DHTML) {
Ausgabetext += "DHTML ist aktiviert!\n"
} else {
Ausgabetext += "DHTML ist nicht aktiviert!\n";
}
if (DOM) {
Ausgabetext += "DOM wird unterstützt!\n";
} else {
Ausgabetext += "DOM wird nicht unterstützt!\n";
}
if (MSIE4)
Ausgabetext += "Alte Microsoft-Technologie ohne DOM!\n";
if (NS4)
Ausgabetext += "Alte Netscape-Technologie ohne DOM!\n";
var h1_Inhalt = getContent("tagname", "h1", 0);
if (h1_Inhalt) {
Ausgabetext += "Inhalt des h1-Elements: " + h1_Inhalt + "\n";
} else {
Ausgabetext += "Inhalt des h1-Elements konnte nicht ermittelt werden!\n";
}
var p_Inhalt = getContent("id", "Hinweisabsatz");
if (p_Inhalt) {
Ausgabetext += "Inhalt des p-Elements: " + p_Inhalt + "\n";
} else {
Ausgabetext += "Inhalt des p-Elements konnte nicht ermittelt werden!\n";
}
var Verweis = getContent("name", "Anker", 0);
if (Verweis) {
Ausgabetext += "Verweistext: " + Verweis + "\n";
} else {
Ausgabetext += "Verweistext konnte nicht ermittelt werden!\n";
}
var h1_align = getAttribute("tagname", "h1", 0, "align");
if (h1_align) {
Ausgabetext += "Ausrichtung des h1-Elements: " + h1_align + "\n";
} else {
Ausgabetext += "Ausrichtung des h1-Elements konnte nicht ermittelt werden!\n";
}
var Bild_Hoehe= getAttribute("name", "auge", 0, "height");
if (Bild_Hoehe) {
Ausgabetext += "Bildhöhe: " + Bild_Hoehe + " Pixel\n";
} else {
Ausgabetext += "Die Bildhöhe konnte nicht ermittelt werden!\n";
}
var Bereich_id = getAttribute("id", "Bereich", null, "id");
if (Bereich_id) {
Ausgabetext += "id-Name des Bereichs: " + Bereich_id + "\n";
} else {
Ausgabetext += "id-Name des Bereichs konnte nicht ermittelt werden!\n";
}
setContent("id", "Bereich", null, "Tests sind fertig!");
alert(Ausgabetext);
}
</script>
<style type="text/css">
#Bereich { position:absolute; top:200px; left:10px; width:500px; height:100px; }
</style>
</head><body>
<h1 align="left">Test der dhtml.js</h1>
<hr noshade="noshade" size="1">
<p id="Hinweisabsatz">Die Tests testen die Funktionen der DHTML-Bibliothek</p>
<p><img name="auge" src="../../../src/auge.gif" width="24" height="16" border="0" alt="Testbild">
<a name="Anker" href="javascript:Testen()">Test starten</a></p>
<div id="Bereich"> </div>
</body>
</html>
Erläuterung:
Das Beispiel enthält im sichtbaren Bereich der HTML-Datei eine Überschrift erster Ordnung, einen Textabsatz, einen weiteren Textabsatz mit einem Verweis, vor dem außerdem eine Grafik eingebunden ist, und schließlich einen div-Bereich, der mit Hilfe von CSS absolut positioniert ist. Die entsprechenden CSS-Angaben zur Positionierung stehen im Dateikopf in einem style-Bereich, wo die Formate für #Bereich notiert sind. Generell ist es wegen einiger Schwächen von Netscape 4.x besser, die CSS-Formatierungen der simulierten Layer in einem zentralen Stylesheet gleich im Dateikopf zu notieren und nicht im einleitenden <div>-Tag.
Im Dateikopf sind ferner zwei JavaScript-Bereiche definiert. Der erste ist leer und bindet lediglich die DHTML-Bibliothek ein, die in der externen JavaScript-Datei dhtml.js gespeichert ist. Der zweite Script-Bereich enthält den JavaScript-Code, der die Testaufrufe durchführt.
Das JavaScript innerhalb des Dateikopfes wird aufgerufen, wenn der Anwender auf den Verweis klickt, der in der Datei notiert ist. Dann wird die Funktion Testen() aufgerufen. Diese Funktion wie auch das gesamte JavaScript kann ohne weitere Umwege auf alle globalen Variablen und die Funktionen der DHTML-Bibliothek zugreifen.
Zunächst greift die Funktion Testen() auf die initialisierten globalen Variablen der DHTML-Bibliothek zu und prüft, welches DHTML-Modell verfügbar ist. Abhängig davon, was verfügbar ist, wird die Variable Ausgabetext um einen Text erweitert.
Als nächstes wird mit der Funktion getContent() aus der DHTML-Bibliothek gespielt.
Mit getContent("tagname", "h1", 0) wird via Elementname auf das erste h1-Element (Indexzähler 0) zugegriffen. Der Rückgabewert von getContent() wird in der Variablen h1_Inhalt gespeichert. Abhängig davon, ob diese nach dem Funktionsaufruf eine Zeichenkette mit einer Länge größer 0 enthält (if (h1_Inhalt)), wird die Variable Ausgabetext wieder um einen weiteren Text erweitert.
Zwei weitere Aufrufe von getContent() folgen, die andere Varianten der Parameterversorgung ausprobieren.
Mit getContent("id", "Hinweisabsatz") wird auf das Element mit dem Attribut id="Hinweisabsatz" zugegriffen.
Mit getContent("name", "Anker", 0) wird auf das erste Element im Dokument zugegriffen, bei dem das Attribut name="Anker" notiert ist.
Daran anschließend probiert die Funktion Testen() die Bibliotheksfunktion getAttribute() mit drei Aufrufen aus, einmal über den Elementnamen, einmal über den Tagnamen und einmal über das id-Attribut.
Schließlich wird auch noch setContent() aufgerufen. Damit es in allen Browsern inklusive Netscape 4.x funktioniert, wird der Inhalt des absolut positionierten div-Bereichs neu gesetzt, den Netscape als Layer erkennt.
Am Ende gibt die Funktion Testen() die gesammelten Einzelergebnisse, die sie in der Variablen Ausgabetext zusammengetragen hat, in einem Meldungsfenster aus.
Beachten Sie:
Die DHTML-Bibliothek deckt der Einfachheit halber nicht alle Zugriffsmöglichkeiten ab, die Netscape 4 bietet. Obwohl die Funktion getContent() im Netscape 4 beim Auslesen des Verweistextes scheitert, ist das Auslesen über document.anchors.Anker.text möglich. Auch das Ansprechen von gewissen Elementen - den besagten Grafiken, Java-Applets und Formularen - über deren Indexnummer ist über die DHTML-Bibliothek nur durch umständlich möglich. Wenn Sie ein Element über dessen Tag-Namen ansprechen wollen, können Sie für neuere Browser beim Parameter Mode den Wert "tagname" wählen. Im Netscape 4 können Sie stattdessen die Objekte document.links bzw. document.anchors für a-Elemente, document.applets für applet-Elemente, document.forms für form-Elemente und document.images für img-Elemente verwenden.
Die hier vorgestellte DHTML-Bibliothek leistet nur einige wenige Grundfunktionen, erleichtert den Zugriff auf Elemente etwas und macht in vielen Fällen den JavaScript-Code etwas übersichtlicher und besser lesbar. Es gibt aber noch vieles, was sie nicht leistet. Wenn Sie häufig mit Dynamischem HTML arbeiten, empfiehlt es sich, wenn Sie die DHTML-Bibliothek um eigene, andere Funktionen erweitern. Wichtig ist bei so einer Funktionsbibliothek, dass alle Funktionen allgemein geschrieben sind. Deshalb erwarten die Funktionen in der Regel mehrere Parameter, um ihren Input für die zu verarbeitenden Daten zu erhalten.
Denkbar wären beispielsweise noch Funktionen, die direkt auf CSS-Eigenschaften von Elementen zugreifen, oder Funktionen, die in der Lage sind, ein Element dynamisch neu zu positionieren. Ausgehend davon sind auch Funktionen möglich, die bestimmte Bewegungsabläufe wie Kreisbahnen usw. berechnen und Elemente entsprechend positionieren. Andere denkbare Funktionen könnten sich dem leider noch ziemlich komplizierten, weil sehr unterschiedlich implementierten Event-Handling widmen und dort einiges vereinfachen.
Eine Funktionsbibliothek sollte andererseits jedoch nicht zu groß werden. Denn wenn Sie am Ende zig Kilobyte externes JavaScript einbinden, um drei triviale Anweisungen zu notieren, dann ist eine Funktionsbibliothek nicht angemessen. In solchen Fällen ist es besser, die paar Befehle ohne Zuhilfenahme einer Funktionsbibliothek zu notieren.
Achten Sie stets darauf, dass Ihre Bibliotheken eine Fehlerhandlung durchführen und jeweils die Verfügbarkeit der angesprochenen Objekte überprüft.
Auf vielen Web-Seiten nimmt die Navigation eigentlich viel zu viel Platz weg. Da wird oft ein Drittel des Anzeigefensters geopfert, um eine oder zwei Handvoll Links zu anderen Projektseiten anzubieten. Mit diesen Platzproblemen macht das Beispiel auf dieser Seite Schluss. Bei dieser Lösung gehört die Web-Seite der freien inhaltlichen Gestaltung und dem Text. Die Navigation blendet sich nur dann ein, wenn der Anwender es will. Dazu muss er auch nicht extra irgendwo hinklicken. Er bewegt einfach die Maus Richtung linken Fensterrand, und schon blendet sich dort die Navigationsleiste ein. Bewegt er die Maus wieder weg vom linken Fensterrand, blendet sich die Navigationsleiste automatisch wieder aus. Diesen Effekt kennen viele Anwender in ähnlicher Form von der Windows-Taskleiste und sind deshalb damit vertraut.
Das Beispiel funktioniert mit den Browsern ab der 4er-Generation. Das Beispiel zeigt vor allem, wie man das Problem der unterschiedlichen Event-Handling-Modelle bei den Browsern in den Griff bekommen kann. Das Beispiel benutzt ferner die DHTML-Bibliothek, um auf Elemente zuzugreifen.
Das Beispiel zeigt eine vollständige HTML-Datei mit der dynamischen Navigation. Wenn Sie die Navigation auf mehreren Seiten haben wollen, müssen Sie den JavaScript-Code entweder in alle Seiten einbauen, oder Sie lagern ihn in eine externe JavaScript-Datei aus und binden diese einfach nur ein.
Die Datei dhtml.js, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function Menue () {
if (typeof window.pageYOffset == "number") {
if (NS4) {
getElement("id", "Nav").top = window.pageYOffset + 50;
} else {
getElement("id", "Nav").style.top = window.pageYOffset + 50;
}
} else {
if (typeof document.body.scrollTop == "number")
getElement("id", "Nav").style.top = document.body.scrollTop + 50;
}
if (OP)
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
if (NS4) {
getElement("id", "Nav").visibility = "show";
} else {
getElement("id", "Nav").style.visibility = "visible";
}
}
function noMenue () {
if (NS4) {
getElement("id", "Nav").visibility = "hide";
} else {
getElement("id", "Nav").style.visibility = "hidden";
}
}
function handleMove (ev) {
if (!ev)
ev = window.event;
var mausposition = ev.pageX ? ev.pageX : ev.clientX;
if (mausposition < 20) {
Menue();
} else {
if (mausposition > 250) {
noMenue();
}
}
}
function Event_init () {
if (document.addEventListener) {
document.addEventListener("mousemove", handleMove, true);
} else {
if (NS4) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = handleMove;
} else {
document.body.onmousemove = handleMove;
}
}
if (OP) {
NavLinksPos = 42; // Position des Bereiches NavLinks
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
}
}
</script>
<style type="text/css">
body { color:black; background-color:white; background-image:url(navigation_back.gif);
margin:0; padding:20px 50px; font-family:Tahoma,sans-serif; }
#Nav { position:absolute; top:50px; left:0; visibility:hidden; }
#NavLinks { position:absolute; top:42px; left:42px; }
#Nav a:link {color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:visited { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:hover { color:#FFFFFF; background-color:#000080; font-weight:bold;
font-size:13px; text-decoration:none; }
#Nav a:active { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
</style>
</head>
<body onload="Event_init()">
<div id="Nav">
<img src="navigation.gif" width="250" height="450" border="0" alt="">
<div id="NavLinks">
<a href="http://de.selfhtml.org/">SELFHTML</a><br>
<a href="http://aktuell.de.selfhtml.org/">SELFHTML aktuell</a><br>
<a href="http://forum.de.selfhtml.org/">SELFHTML-Forum</a><br>
<a href="http://aktuell.de.selfhtml.org/artikel/">Artikel</a><br>
</div>
</div>
<h1>Die Seite mit der pfiffigen Navigation</h1>
<p>Einfach mit die Maus Richtung linken Fensterrand bewegen.
Um das Menü wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.</p>
<p>Und jetzt kommen noch etliche leere Absätze, damit auch sichtbar wird,
dass das Menü immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.</p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p>Na, das dürfte reichen :-)</p>
</body>
</html>
Erläuterung:
Im sichtbaren HTML-Bereich der Datei ist zunächst ein größerer div-Bereich notiert, der mit Hilfe von CSS-Eigenschaften im style-Bereich im Dateikopf absolut positioniert wird. Durch die Angabe visibility:hidden wird zunächst einmal alles, was sich in diesem Bereich befindet, nicht angezeigt. Innerhalb dieses Bereichs mit dem id-Namen Nav ist zunächst eine Grafik notiert (navigation.gif) und anschließend ein weiterer, absolut positionierter div-Bereich, wobei aber dort CSS-Zuweisungen wie top:42px oder left:42px als relativ zur oberen linken Ecke des Eltern-div-Bereichs zu interpretieren sind. Die Grafik navigation.gif ist einfach eine optische Unterlage für den nachfolgenden div-Bereich, der die eigentlichen Verweise der Navigationsleiste enthält.
Der Rest des in der Datei notierten statischen HTML-Codes ist für das Beispiel nicht wichtig. Die vielen Textabsätze mit dem erzwungenen Leerzeichen dazwischen dienen nur dazu, viel Dokumenthöhe zu erzeugen, sodass man in der Datei scrollen kann. Denn es soll demonstriert werden, dass die dynamische Navigationsleiste immer an der gleichen Stelle erscheint, auch wenn im Dokument gescrollt wird.
Im einleitenden <body>-Tag der Datei ist der Event-Handleronload notiert. Wenn das Dokument vollständig geladen ist, wird die Funktion Event_init() aufgerufen. Event_init() stößt die Überwachung der Mausbewegungen im Dokument an. Denn nur wenn eine solche Überwachung stattfindet, kann die Navigationsleiste dynamisch eingeblendet werden.
Event-Handling ist leider ein schwieriges Kapitel, da die Implementierungen bislang doch noch recht unterschiedlich sind. Das Beispiel versucht es erst mal nach der neueren DOM-Syntax. Die Abfrage if (document.addEventListener) stellt sicher, dass nur die Browser in den diesen Ausführungszweig nicht gelangen, die Event-Handling nach DOM-Syntax interpretieren. In den entsprechenden Zweig gelangt aber Netscape 6, der die Methode addEventListener() versteht. Mit addEventListener() wird nach DOM-Syntax eine Funktion bestimmt, die aufgerufen wird, wenn ein bestimmtes Ereignis eintritt. Im Beispiel wird das Ereignis mousemove überwacht. Während der Anwender im Dokumentbereich die Maus bewegt, bewirkt diese "Registrierung", dass dann so oft es geht die Funktion handleMove() aufgerufen wird. Zur Bestimmung des zu überwachenden Elementes wird die Funktion getElement() der DHTML-Bibliothek aufgerufen.
Mit if (NS4) fragt die Funktion Event_init() ab, ob ein Netscape-Browser der 4er-Generation am Werk ist. Dort gibt es ebenfalls eine "Registrierung" für Ereignisse. Mit document.captureEvents(Event.MOUSEMOVE) wird das Ereignis "Mausbewegung" registriert, und mit document.onmousemove = handleMove wird die Funktion handleMove() aufgerufen, wenn das Ereignis eintritt.
Für die übrigen Browser erfolgt die Initialisierung der Eventüberwachung mit document.onmousemove = handleMove. Da Opera 5 unter Windows offensichtlich die Position des Div-Bereich NavLinks vergisst, wird die im Stylessheet-Bereich festgelegte Position in der Variablen NavLinksPos gespeichert. Anschließend wird der Bereich NavLinks neu positioniert. Damit auch ältere Versionen von Opera 5 damit zurecht kommen, wird die Eigenschaft pixelTop verwendet. Zur Bestimmung des Elementes wird die Funktion getElement() der DHTML-Bibliothek aufgerufen.
In der Funktion handleMove() sind verschiedene Fallunterscheidungen nötig, um die Mausposition in Erfahrung zu bringen. Im Internet Explorer wird auf das Event-Objekt, das die Daten des Ereignisses enthält, über window.event zugegriffen. In DOM-kompatiblen Browsern sowie in Netscape 4 wird das Event-Objekt als Parameter an die Funktion übergeben, im Beispiel trägt er den Namen ev. Mit if (!ev) wird abgefragt, ob der Parameter gesetzt wurde. Wenn dies nicht der Fall ist, wird mit in ev eine Referenz auf window.event gespeichert. Somit kann das Event-Objekt in jedem Fall über ev angesprochen werden.
Neben den verschiedenen Arten, auf das Event-Objekt zuzugreifen, werden zwei Varianten verwendet, um je nach Browser die Mausposition abzufragen. Die Eigenschaft pageX enthält die horizontale Mausposition gemessen vom linken Dokumentrand, die Eigenschaft clientX gemessen vom linken Fensterrand. In der Praxis sollte dies keinen Unterschied machen. Während clientX dem Internet Explorer und älteren Opera-Versionen bekannt ist, wird pageX von Netscape 4, Netscape 6 sowie neueren Opera-Versionen verstanden. Der Wert der jeweiligen Eigenschaft wird in der Variable mausposition gespeichert.
Wenn nun der Abstand des Mauszeigers vom linken Rand geringer ist als 20 Pixel, wird die Funktion Menu() aufgerufen. Wenn er höher als 250 Pixel ist, die Funktion noMenu().
Die Funktion Menu() blendet die Navigationsleiste ein, und die Funktion noMenu() sorgt dafür, dass die Navigationsleiste nicht oder nicht mehr sichtbar ist. Beide Funktionen führen zu diesem Zweck wieder diverse if-Abfragen zur DHTML-Modellunterscheidung durch und ändern letztendlich hauptsächlich die CSS-Eigenschaft visibility (Sichtbarkeit) des großen div-Bereichs mit dem ID-Namen Nav. Die Funktion Menu() sorgt allerdings außerdem dafür, dass der von ihr auf sichtbar geschaltete Navigationsbereich auch immer schön im sichtbaren Bereich des Dokuments angezeigt wird, egal, wohin der Anwender im Dokument gescrollt hat. Dazu muss die Funktion die aktuelle Pixelposition der "Klopapierrolle" ermitteln, die ein langes Dokument darstellt. Auch dabei ist die Syntax leider wieder völlig unterschiedlich bei den Browsern. Beim Internet Explorer kommt die Funktion über die Eigenschaft document.body.scrollTop an den gewünschten Wert, und bei Netscape-Browsern und Opera über window.pageYOffset. Zu dem ermittelten Wert werden noch mal 50 Pixel dazugezählt, denn in dem div-Bereich mit dem ID-Namen Nav ist ja als top-Angabe, also als Startposition von oben gesehen, ebenfalls der Wert 50 angegeben.
Da Opera 5 beim Ändern der Fenstergröße mit JavaScript gesetzte Positionen "vergisst", wird vor jedem Einblenden des Menüs dem Bereich NavLinks die in der Variablen NavLinksTop gespeicherte Position zugewiesen.
Beachten Sie:
Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. Seien Sie sich auch im Klaren darüber, dass Anwender mit nicht DHTML-fähigen Browsern oder deaktiviertem JavaScript so wie das Beispiel oben notiert ist überhaupt keine Möglichkeit zur Navigation haben. Um zumindest Anwendern, die JavaScript deaktiviert haben, ein Navigieren zu ermöglichen, könnten Sie beispielsweise an einer geeigneten Stelle im normalen Text einen noscript-Bereich notieren, in dem Sie die Navigationsverweise noch mal notieren.
Es gibt Seiten, auf denen Ihre Besucher Bilder sehen wollen. Wenn Sie beispielsweise über eine Stadt oder ein Land berichten oder über ein Treffen mit Freunden, mögen die Besucher gerne Bilder davon sehen. Das hier vorgestellte Beispiel zeigt, wie man solche Bilder einmal anders präsentieren kann. Ohne viel scrollen oder andere Seiten aufrufen zu müssen, kann der Anwender in den vorhandenen Bildern vor- und zurück blättern. Damit der Bildaufbau auch mal etwas anders aussieht als sonst, ist eine Art "Vorhang-Auf"-Effekt eingebaut. Die Bilder werden nicht einfach angezeigt, sondern "enthüllt".
Das Beispiel zeigt eine vollständige HTML-Datei mit dem Bilderbuch.
Die Datei dhtml.js, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.
Im Körper der HTML-Datei des Beispiels werden zwei div-Bereiche definiert. Der erste <div>-Bereich ist zum Anzeigen der jeweils aktuellen Grafik gedacht. Der zweite Bereich enthält Verweise, mit deren Hilfe der Anwender vorwärts und rückwärts durch die Grafiken blättern kann. Beide Bereiche werden mit Hilfe entsprechender CSS-Eigenschaften absolut positioniert. Die entsprechenden CSS-Definitionen stehen im Dateikopf im style-Bereich und beziehen sich auf die ID-Namen der Bereiche.
Die Beispieldatei enthält ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden. Im einleitenden <body>-Tag wird die Funktion Init() aufgerufen, die im JavaScript im Dateikopf notiert ist. Diese Funktion sorgt dafür, dass das erste Bild angezeigt wird.
Damit das Beispiel des Bilderbuches zum Umblättern sauber funktioniert, passiert jedoch schon vorher etwas. Gleich beim Einlesen der Datei, also außerhalb jeder Funktion, wird der JavaScript-Code ausgeführt, der zu Beginn des zweiten JavaScript-Bereichs notiert ist. Dort werden erst mal alle Grafiken eingelesen, die im Verlauf des Umblätterns angezeigt werden sollen. Denn nur wenn die Grafiken zu diesem Zeitpunkt bereits im Arbeitsspeicher sind, gibt es keine Synchronisationsprobleme. Dazu kommt das images-Objekt von JavaScript zum Einsatz. Zuerst wird ein neuer, leerer Array angelegt. Dann wird der Array mit Grafikobjekten gefüllt. Dem jeweiligen Image-Objekt, das zu diesem Zweck erzeugt wird, wird über die src-Eigenschaft eine gewünschte Grafikdatei zugewiesen.
Anschließend werden noch ein paar globale Variablen definiert, die später benötigt werden.
Die Funktion Init() zeigt dann nach ihrem Aufruf die erste Grafik innerhalb des vorgesehenen Anzeigebereichs an. Dabei ist einige Unterscheidungsarbeit nötig, um die verschiedenen Browser und ihre DHTML-Modelle zu bedienen. In Browsern, die das DOM-Modell unterstützen, wird mit den Funktionen createElement() und setAttribute() der img-Elementknoten für das neue Bild erzeugt. Mit appendChild() wird das Bild anschließend an das div-Element mit der ID Bildbereich gehängt. Der Internet Explorer 4 gelangt dagegen in den Zweig, der mit else if (MS4) beginnt. Dort wird die Elementknoten-Eigenschaft innerHTML genutzt, um den gewünschten HTML-Code zusammenzubasteln. Schließlich bleibt noch Netscape 4.x übrig, der in den Zweig else if (NS4) gelangt und die Grafik mit der Funktion setContent() aus der DHTML-Bibliothek zusammengesetzt bekommt. An diesem Beispiel sehen Sie deutlich, wie mühsam das Unterscheiden zwischen Browsern und DHTML-Modellen oft ist. Außerdem können Sie sehen, dass das DOM-Modell bei allen Vorteilen manchmal auch sehr umständlich zu handhaben ist. Eine Eigenschaft wie das Microsoft-proprietäre innerHTML gibt es im W3C-DOM nicht, weil dort neue Knoten streng nach den Regeln der Auszeichnungssprachen-Syntax erstellt und zusammengestellt werden müssen.
Das Blättern zwischen einzelnen Grafiken wird durch die beiden Verweise im zweiten div-Bereich angestoßen. Beide Verweise rufen die gleiche Funktion namens Blaettern() auf, jedoch mit unterschiedlicher Parameterübergabe. Der Vorwärtsverweis übergibt 1, der Rückwärtsverweis -1. Dadurch kann die Funktion Blaettern() diesen Parameter gleich zur Verwaltung benutzen.
Die Funktion Blaettern() fragt zunächst ab, ob entweder das erste oder das letzte Bild der Serie erreicht ist und legt im entsprechenden Fall wieder das letzte bzw. erste Bild als das anzuzeigende fest. So entsteht ein Endlos-Effekt für den Anwender beim Blättern. Anschließend wird der Inhalt des Anzeigebereichs für das Bild neu geschrieben bzw. das src-Attribut des vorhandenen Bildes aktualisiert. Dabei muss ebenso mühsam zwischen den Fähigkeiten der Browser unterschieden werden. Am Ende wird dann noch die Funktion BildAufbauen() aufgerufen.
Die Funktion BildAufbauen() ist für den dynamischen Aufroll-Effekt beim Anzeigen der neuen Grafik zuständig. Dazu wird von der CSS-Eigenschaft clip Gebrauch gemacht. Um sie zu setzen, wird das style-Objekt verwendet. Das Setzen im Netscape 4.x erfordert eine andere Syntax, daher ist erneut eine Fallunterscheidung über if ... else ... nötig. Nach der Wertveränderung des rechten Clip-Rands ruft sich die Funktion BildAufbauen() mittels window.setTimeout() zeitverzögert selbst auf. Dabei kommen die Variablen Schrittweite und Schrittverzoegerung zum Einsatz, die zu Beginn des Script-Bereichs notiert sind. Probieren Sie dort bei der anfänglichen Wertzuweisung ruhig auch mal andere Werte aus.
Am Ende, wenn die oberste if-Bedingung der Funktion BildAufbauen() erfüllt ist, nämlich dass die aktuelle Breite größer als die Anzeigebreite der Grafik ist, gelangt die Funktion in den else-Zweig. Dort wird der clip-Wert für rechts auf den Endwert gesetzt, und die Prozedur des Umblätterns ist abgeschlossen.
Sinnvolle Vorkenntnisse zum Verständnis: HTML, Stylesheets, JavaScript und die verschiedenen DHTML-Modelle.
Dieser Abschnitt beschreibt Lösungen, bei denen einzelne Elemente einer Web-Seite während der Anzeige dynamisch ihren Inhalt ändern.
Der Abschnitt besteht aus folgenden Seiten:
Im Online-Angebot von SELFHTML aktuell finden Sie weitere Anwendungsbeispiele und Links zu anderen Quellen mit Anwendungsbeispielen im Web. Folgende Inhalte kommen in Frage:
Die durchsuchbare Datenbank enthält 1000 Einträge. Suchen Sie nach Begriffen in einer oder mehreren Sprachen. Bei der Suche in mehreren Sprachen werden die Eingaben logisch durch UND verknüpft. Sie dürfen auch das Wildcard-Zeichen * für Teilausdrücke verwenden. Suchen Sie z.B. mal im Feld (Deutsch) nach Arbeits* oder im Feld (Italienisch) nach *ore oder im Feld (Englisch) nach *computer.
selfhtml-8.1.2.orig/dhtml/modelle/anzeige/cardpage.htm 0000644 0001750 0001750 00000005417 10215145603 021120 0 ustar uwe uwe
TestFeedback
Hier Ihr Feedback:
Support
Unser Support ist wirklich Bla Bla
Produkte
Unsere Produkte sind ja so wahnsinnig Bla Bla
HOME
Unser Home ist unser Bla Bla
Die hier vorgestellte Layer-Technik funktioniert nur mit Netscape in der Version 4.x. In der völlig neu programmierten Version 6.0 und den Mozilla-Quellen dazu ist die gesamte Layer-Technik nicht mehr implementiert und funktioniert nicht mehr. Der Grund ist, dass das W3-Konsortium die Layer-Technik abgelehnt hat. Stattdessen wird das Document Object Model (DOM) empfohlen, das auch in Netscape ab Version 6.0 implementiert ist. Die Layer-Technik, wie sie hier beschrieben wird, ist also nur noch im Hinblick auf die Rückwärtskompatibilität zur 4er-Serie der Netscape-Browser von Bedeutung.
"Dynamisches HTML" - das ist bei Netscape 4.x nicht wie im DOM oder beim älteren Modell des Internet Explorers der beliebige nachträgliche Zugriff auf alle Elemente einer HTML-Datei. Sie können mit Netscape 4.x also nicht einfach nachträglich einen Textabsatz, der mit <p>...</p> definiert ist, völlig anders formatieren, oder in eine Überschrift 1. Ordnung verwandeln.
Dynamisches HTML gibt es bei Netscape 4.x nur im Zusammenhang mit positionierten Elementen. Bei Netscape ist Dynamisches HTML die Möglichkeit, positionierte Layer dynamisch zu behandeln, also ein- und auszublenden, zu verschieben usw.
Die Layer-Technologie von Netscape ist allerdings sehr mächtig. Voraussetzung dabei ist das Definieren von Layern in HTML. Es besteht zwar auch die Möglichkeit, ohne das layer-Element Dynamisches HTML für Netscape zu schreiben, doch das ganze Konzept, das Netscape seinem Browser in der Version 4.x als Dynamisches HTML eingebaut hat, basiert auf dem layer-Element. Wenn man auf das layer-Element verzichten will, bleibt einem nur, die Layer zu "simulieren".
Die Beispiele auf dieser Seite konzentrieren sich deshalb im wesentlichen auf die Layer-Technologie. Denn nur so wird der Ansatz deutlich, den Netscape mit seiner Implementierung von Dynamischem HTML verfolgt.
Um die Beispiele auf dieser Seite zu verstehen, müssen Sie vor allem die Layer in HTML kennen sowie Vorkenntnisse in JavaScript mitbringen. Für die Layer-Technik ist vor allem das JavaScript-Objekt layers entscheidend. Dort werden die einzelnen Eigenschaften und Methoden systematisch beschrieben, die hier in den Beispielen verwendet werden.
Sie können Layer mit Hilfe von JavaScript dynamisch anzeigen und verstecken. Je nachdem, wie Sie Ihre Layer definieren, können Sie dadurch die verschiedensten Effekte erzielen. Das folgende Beispiel demonstriert, wie Sie eine "Dia-Show" aus kurzen Texten definieren können. Der Anwender braucht nicht mehr scrollen, sondern klickt sich von einem Text zum nächsten. Die Texte werden in einer "Box" angezeigt.
<html><head><title>Test</title>
<script type="text/javascript">
var AktuellerText = 0;
var Texte = 3;
function NextText () {
++AktuellerText;
if (AktuellerText >= Texte)
AktuellerText = 0;
for (var i = 0; i < Texte; i++)
document.layers[i].visibility = "hide";
document.layers[AktuellerText].visibility = "show";
}
</script>
</head><body>
<layer visibility="show" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
<span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
1.</span><br>Man kann nur Brücken schlagen zwischen Ufern, die man auseinanderhält.</p>
</layer>
<layer visibility="hide" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
<span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
2.</span><br>Je größer die Erwartung, desto unmöglicher die Erfüllung.</p>
</layer>
<layer visibility="hide" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
<span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
3.</span><br>Wer sich aufgibt, liebt nicht, weil er sich nicht liebt; nur wer
sich verschenkt, liebt, weil er sich liebt.</p>
</layer>
<layer top="275" left="50" width="400" bgcolor="#DDFFDD">
<center><form name="Formular" action=""><input type="button" value=" weiter >> "
onclick="NextText()"></form></center>
</layer>
</body></html>
Erläuterung:
Im Körper der Beispiel-HTML-Datei werden insgesamt vier Layer definiert. Die ersten drei Layer enthalten Texte, die dynamisch wechseln sollen. Der vierte Layer enthält einen Button. Wenn der Anwender auf den Button klickt, wird eine JavaScript-Funktion mit Namen NextText() aufgerufen. Diese Funktion wird im Kopf der HTML-Datei in einem JavaScript-Bereich definiert. Die Funktion sorgt dafür, dass der jeweils nächste Text angezeigt wird.
Beachten Sie, dass die ersten drei Layer identische Angaben zur Position enthalten. Die Angaben top="150" (linke obere Ecke beginnt 150 Pixel von oben), left="50" (linke obere Ecke beginnt 50 Pixel von links), width="400" (Breite des Layers: 400 Pixel), und height="125" (Höhe des Layers: 125 Pixel), sind in allen Layern die gleichen. Die drei Layer unterscheiden sich lediglich durch die Angabe des Attributs visibility. Der erste Layer wird mit visibilty="show" auf "sichtbar" gesetzt, die beiden anderen mit visibilty="hide" auf "unsichtbar". Dadurch wird erreicht, dass zunächst nur der erste Layer am Bildschirm angezeigt wird.
Der vierte Layer, also der mit dem Kontroll-Button, enthält ebenfalls Angaben zur Position. Er hat die gleiche Breite wie die beiden ersten Layer und beginnt auch links an der gleichen Position. In der Höhe beginnt er genau 125 Pixel tiefer als die beiden ersten Layer. Da diese eine Höhe von 125 Pixeln haben, schließt der "Kontroll-Button-Layer" also nahtlos an die oberen Layer an. Er enthält keine Angabe zur Sichtbarkeit. Das bedeutet, er ist sichtbar, und das wird sich auch im Verlauf des JavaScripts nicht ändern. Denn der Inhalt dieses Layers steuert ja das Geschehen.
In dem JavaScript-Bereich im Kopf der Datei werden zunächst zwei globale Variablen definiert. Da sie außerhalb jeder Funktion stehen, behält ihr aktueller Wert solange Gültigkeit, wie die HTML-Datei angezeigt wird. In der Variablen AktuellerText wird die Indexnummer des aktuellen Textlayers gespeichert. In Texte wird die Anzahl der dynamisch austauschbaren Texte bzw. Layer gespeichert. Sie könnten anstelle der drei Layer mit Texten auch 10 oder 100 solcher Layer definieren. Entsprechend der Anzahl der definierten Layer müssten Sie nur den Anfangswert von Texte anders zuweisen.
Innerhalb der Funktion NextText() wird zunächst die Nummer von AktuellerText erhöht, denn es soll ja der jeweils nächste Text angezeigt werden. Anschließend werden in einer for-Schleife alle Layer mit Texten auf "unsichtbar" gesetzt. Am Ende wird der Layer desjenigen Textes, der angezeigt werden soll (AktuellerText) auf "sichtbar" gesetzt. Dadurch entsteht der Dia-Show-Effekt.
Beachten Sie:
Netscape dehnt die Layer entsprechend ihres Inhalts aus. Wenn der Inhalt eines Textes im obigen Beispiel größer ist als der definierte Layer-Bereich, überschneidet er sich mit dem Layer des Kontroll-Buttons, jedoch so, dass der Layer mit dem Kontroll-Button über dem unteren Teil des Layers mit dem Text liegt. Der Grund dafür ist, dass der Layer mit dem Kontroll-Button hinter dem Layer mit dem Text definiert wird und daher im "Stack" (Stapel) weiter oben liegt. Wenn Sie die Größe eines Layers unabhängig vom Inhalt fest machen wollen, müssen Sie das Attribut clip benutzen (siehe auch: Anzeigebereich von Layern beschneiden).
Sie können Layer so positionieren, dass diese sich überlappen. Das hat ohne JavaScript meistens allerdings wenig Sinn, denn der Anwender soll die Inhalte der Layer ja sehen können. Mit Hilfe von JavaScript können Sie jedoch bewirken, dass der Anwender sich einen einzelnen Layer in den Vordergrund holen kann, um dessen Inhalt anzuzeigen. Auf diese Weise können Sie auf einer WWW-Seite durchaus verschiedene Inhalte unterbringen, für die normalerweise mehrere Seiten angebracht wären. Im folgenden Beispiel sind die Layer wie in einem Karteikastenstapel aufgereiht. Der Anwender kann einen Layer "herausgreifen".
Im Beispiel werden vier "große" Layer definiert: einer für "Feedback", einer für "Support", einer für "Produkte" und einer für "Home", was bedeuten soll, dass dieser Layer eine Art Homepage, einen Home-Layer darstellt. Dieser Layer wird auch zuerst im Vordergrund angezeigt. Und zwar deshalb, weil er als letzter definiert wird. Wenn Sie bei Layern kein Attribut z-index notieren, liegt immer derjenige Layer ganz oben, der als letzter definiert wird.
Dem Beispiel können Sie auch entnehmen, dass innerhalb der vier großen Layer jeweils zwei "innere" Layer definiert werden. Layer, die innerhalb anderer Layer definiert werden, werden relativ zu ihrem Eltern-Layer positioniert. Dazu müssen Sie sich einen Layer vorstellen wie einen neuen kleinen Dateikörper. Alles, was innerhalb davon notiert wird, wird relativ dazu positioniert.
Die Angaben zu top, left, height und width in den Layern im obigen Beispiel sind alle genau ermittelt, und zwar so, dass die Layer optisch einen sauber sortierten Karteikastenstapel darstellen. Versuchen Sie, die Abhängigkeiten der Positionierungsangaben im Beispiel zu ermitteln. So können Sie erkennen, wie Sie vorgehen müssen, um mehrere Layer nach einem von Ihnen gewünschten Kriterium ordentlich verteilt im Anzeigefenster zu platzieren.
Jeder der "großen" Layer enthält im obigen Beispiel zwei innere Layer: einen Layer, der wie eine Titelleiste wirkt und einen Verweis enthält, und einen Layer, der den eigentlichen Inhalt enthält. Die Verweise in den Titelleisten-Layern rufen eine JavaScript-Funktion namens Hervorheben() auf. Diese Funktion bewirkt das dynamische Hervorholen des "großen" Layers, der zu dem angeklickten Verweis gehört (also des Eltern-Layers von dem Layer, in dem der Verweis steht).
In dem Script-Bereich, in dem die Funktion Hervorheben() steht, wird vor der Funktion eine Variable aktuell definiert. Sie bekommt zu Beginn den Namen des vorne liegenden Layers zugewiesen. Das ist derjenige Name, der beim entsprechenden Layer im id-Attribut vergeben wurde.
Die Funktion Hervorheben() erwartet einen Parameter, nämlich den Namen desjenigen Layers, der anstelle des bisher vorne liegenden Layers hervorgeholt werden soll. Bei den Verweisen, die die Funktion aufrufen, wird denn auch wieder der Name übergeben, der im entsprechenden Layer bei id vergeben ist.
Innerhalb der Funktion Hervorheben() wird zunächst die normale Layer-Reihenfolge hergestellt. Das geschieht durch Zuweisen einer Zahl an die Layer-Objekteigenschaft zIndex. Je höher die Zahl, desto weiter vorne im Stapel liegt der Layer. Das Wiederherstellen der normalen Layer-Reihenfolge bewirkt, dass der "Karteikastenstapel", den das Beispiel darstellt, immer aufgeräumt erscheint.
Anschließend wird der bisher aktive Layer, bezeichnet durch document.layers[aktiv], mit mehreren Anweisungen behandelt. Die Angabe aktiv in den eckigen Klammern zeigt zunächst auf den Layer "Home". Am Ende der Funktion wird der Wert der Variablen aktiv jedoch geändert. Dort wird ihr der Name des neuen hervorgehobenen Layers zugewiesen. Dadurch ist beim nächsten Aufruf der Funktion dieser Layer derjenige, der von document.layers[aktiv] betroffen ist.
Die Anweisungen, die den bisher aktiven Layer betreffen, weisen diesem Attribute zu, die ihn optisch zu einem "untenliegenden" Layer im Karteikastenstapel machen.
Derjenige Layer mit dem Namen, der mit dem Parameter neu_aktiv übergeben wurde, erhält dagegen diejenigen optischen Attribute, die ihn als hervorgehobenen Layer auszeichnen. Er bekommt auch die höchste Zahl für zIndex. Dadurch wird er als oberster Layer angezeigt.
Beachten Sie:
Im Layer Feedback ist ein Formular definiert. Dieses Formular wird im Netscape 4 mit document.layers.Feedback.document.Formular angesprochen, da es Bestandteil des Layers Feedback ist. Ein Layer stellt aus Sicht von Netscape ein Dokument im Dokument dar und hat ein eigenes document-Objekt.
Sie können Layer mit beliebigen Inhalten über das Anzeigefenster springen oder wandern lassen. Das Springen zu einer Stelle ist dabei nur ein einziger Befehl, da dies als Methode im Layer-Objekt von JavaScript zur Verfügung steht. Wenn Sie dagegen zeitgesteuerte Bewegungseffekte wollen, müssen Sie die Positionsberechung vom Startpunkt bis zum Endpunkt des Bewegungsvorgangs "zu Fuß" programmieren. Das folgende Beispiel zeigt, wie so etwas im Prinzip funktioniert.
Innerhalb des Dateikörpers der HTML-Datei im obigen Beispiel wird ein Layer definiert. Dieser Layer enthält insgesamt acht Verweise. Bei jedem Verweis wird JavaScript-Code ausgeführt. Dabei wird der Befehl, den der Verweis dem Anwender anbietet, in die Tat umgesetzt.
Alle Verweise sorgen für eine Neupositionierung des Layers, in dem sie sich selber befinden. Das muss nicht so sein - es ist im obigen Beispiel einfach zu Demo-Zwecken so gelöst. Der Layer, den es dynamisch zu positionieren gilt, könnte auch etwas ganz anderes enthalten, etwa Grafiken, Tabellen usw.
Die ersten vier Verweise führen lediglich Sprünge aus, d.h. beim Klicken auf einen dieser Verweise wird der Layer-Inhalt einfach sofort an einer anderen Stelle im Anzeigefenster angezeigt. Für diese Aufgabe stellt das Layer-Objekt von JavaScript die Methode moveTo() zur Verfügung. Mit einer Anweisung wie document.layers[0].moveTo(...) positionieren Sie den ersten Layer der Datei (der den Index 0 hat) an einer neuen Position. Die Methode moveTo() setzt die neue Position der linken oberen Ecke des Layers. Dazu erwartet die Methode zwei Parameter, und zwar zuerst den Wert für links, und als zweites den Wert für oben. Mit einer Anweisung wie document.layers[0].moveTo(260,10) wird also die linke obere Ecke des Layers auf 260 Pixel von links und 10 Pixel von oben gesetzt. Die Angaben beziehen sich auf das jeweilige Elternelement des Layers. Da der Layer im obigen Beispiel kein Layer innerhalb eines anderen Layers ist, ist das normale Anzeigefenster das Elternelement.
Während das einfache Neupositionieren mit einer einzigen JavaScript-Anweisung möglich ist, die im obigen Beispiel direkt in den entsprechenden Verweisen steht, muss zum dynamischen Bewegen von Layern eine eigene Funktion aufgerufen werden, die den Bewegungsablauf bestimmt. Im obigen Beispiel gibt es zwei solcher Funktionen. Die Funktion hBeweg() kann Layer horizontal nach links oder rechts verschieben, die Funktion vBeweg() leistet das gleiche, nur vertikal nach oben oder unten. Entsprechend werden die Funktionen aufgerufen. Wenn der Anwender einen der Verweise zum Bewegen nach rechts oder links angeklickt, wird hBeweg() aufgerufen, und bei den Verweisen zum Bewegen nach unten oder oben wird vBeweg() aufgerufen.
Beide Funktionen sind allgemein geschrieben. Deshalb erwarten sie als Input auch verschiedene Parameter, die beim Funktionsaufruf zu übergeben sind: LayerNum ist die Indexnummer des Layers, der bewegt werden soll. Da im Beispiel immer der gleiche und einzige vorhandene Layer bewegt werden soll, wird beim Aufruf der Funktionen immer dessen Indexnummer 0 übergeben. bis_links (bei hBeweg()) bzw. bis_oben (bei vBeweg()) ist der neue Endwert, bei dem die Bewegung gestoppt werden soll. Je nachdem, ob der Wert, den Sie dabei übergeben, größer oder kleiner ist als die aktuelle Position des Layers, ergibt sich automatisch die Bewegungsrichtung. Pixel ist die Anzahl der Pixel, um die pro Bewegungsschritt weiter gesprungen wird. Je höher der Wert ist, den Sie dafür übergeben, desto schneller und ruckartiger die Bewegung. Im obigen Beispiel wird in allen Fällen 4 übergeben. Pause ist ein weiterer Parameter zur Beeinflussung der Geschwindigkeit. Je höher der Wert, desto langsamer die Bewegung.
Ein Bewegen von Layern besteht in nichts anderem als einem schrittweise neuen Positionieren des Layers. In den Funktionenen hBeweg() und vBeweg() stehen jeweils etwa in der Mitte zwei Anweisungen der Art document.layers[LayerNum].moveBy(...), von denen immer nur eine ausgeführt wird. Das ist diejenige Anweisung, mit der der Layer jeweils neu positioniert wird. Es handelt sich einfach um den Aufruf der Methode moveBy() des Layer-Objekts. Diese Methode funktioniert genauso wie moveTo(), nur mit relativen Angaben statt mit absoluten.
Damit der Layer nicht nur einmal, sondern weiter bewegt wird, rufen sich die beiden Funktionen hBeweg() und vBeweg() am Ende jeweils selbst wieder auf. Der Schleifen-Effekt, der dadurch entsteht, wird erst abgebrochen, wenn der gewünschte Endwert erreicht ist.
Der Selbstaufruf der Funktion ist in die JavaScript-Methode window.setTimeout() eingebunden. Dadurch kann die Verzögerung berücksichtigt werden, die mit dem Parameter Pause übergeben wurde. Der Selbstaufruf der Funktion wirkt etwas kompliziert. Das liegt daran, dass die Funktion sich auch wieder mit den von ihr erwarteten Parametern aufrufen muss. Leider ist es nicht möglich, dazu einen normalen Funktionsaufruf zu notieren und einfach die übergeben bekommenen Parameter wieder zu übergeben. Stattdessen wird eine Zeichenkette zusammengebaut, welche die Funktion beim Neuaufruf mit tatsächlichen Werten versorgt.
Die übrigen Anweisungen in den beiden Funktionen dienen zur Kontrolle des Bewegungsablaufs, vor allem dazu, dass trotz unterschiedlicher Aufrufparameter am Ende tatsächlich die gewünschte Endposition erreicht wird. So ist Restpixel eine Hilfsvariable, die ermittelt, wie viele Pixel noch zwischen aktueller Layerposition und dem gewünschten Endwert liegen. Wichtig ist auch die korrekte Bestimmung der Bewegungsrichtung. Wenn der gewünschte Endwert der Bewegung kleiner ist als die Position des Layers beim Start der Bewegung, dann muss der Schrittwert, der mit dem Parameter Pixel übergeben wird, als negative Zahl interpretiert werden. Denn nur so kann es "rückwärts" gehen, also nach links oder nach oben. Mit dem Ausdruck Pixel=0-Pixel wird der Schrittwert bei Bedarf auf eine negative Zahl "umgepolt".
Beachten Sie:
Komplexere Bewegungsabläufe benötigen entsprechend komplexere Programmierung. Bei diagonalen Bewegungen ist es nur einfach, solange die Anzahl der Pixel, um die pro Bewegungsschritt weiter positioniert wird, horizontal und vertikal immer proportional ist. Sobald Sie aber "krumme" Aufgaben lösen wollen, etwa die, von oben 10 links 10 nach oben 86 links 623 auf möglichst geradem Weg zu kommen, dürfen Sie in die Tiefen der Arithmetik eintauchen. Und wenn Sie gar Kreis- oder Ellipsenbewegungen wollen, müssen Sie entsprechende geometrische Formeln kennen und die dafür vorgesehenen Methoden des Math-Objekts von JavaScript benutzen.
Durch dynamisches Verändern des angezeigten Bereichs eines Layers lassen sich unzählige interessante Effekte erzielen, zum Beispiel zum dynamischen Aufklappen und Zuklappen von Teilen einer WWW-Seite. Das folgende Beispiel bewirkt drei "Blöcke", von denen zunächst nur Titelzeilen sichtbar sind. Jede Titelzeile enthält einen Verweis. Beim Anklicken des Verweises wird unterhalb der Titelzeile ein Bereich mit Inhalt nach unten aufgerollt. Beim nächsten Anklicken des Verweises wird er wieder zugerollt.
<html><head><title>Test</title>
<style type="text/css">
layer.Text { padding:5px; font-size:18px; font-family:Arial,Helvetica,Sans-Serif; color:#FFFFFF }
layer.Kopf { padding:5px; font-size:14px; font-family:Arial,Helvetica,Sans-Serif; font-weight:bold; }
a:link, a:visited, a:active { color:#FFFFE0; }
a.normal:link { color:#AA5522; text-decoration:underline; }
a.normal:visited { color:#772200; text-decoration:underline; }
a.normal:active { color:#000000; text-decoration:underline; }
</style>
<script type="text/javascript">
var Status = new Array("zu", "zu", "zu");
function AufUndZu (LayerNum) {
var i;
if (Status[LayerNum] == "zu") {
for (i = 2; i < 250; ++i)
document.layers[LayerNum].clip.bottom = i;
Status[LayerNum] = "auf";
} else {
for (i = 250; i > 2; --i)
document.layers[LayerNum].clip.bottom = i;
Status[LayerNum] = "zu";
}
}
</script>
</head><body>
<layer class="Text" left="10" top="70" width="198" height="250" bgcolor="#000099" clip="0,0,198,2">
HTML ist die Sprache für die Strukturierung von Hypertext-Projekten. Logos und Godfather aller
Web-Seiten. Vermutlich das erfolgreichste Dateiformat der EDV-Geschichte.
</layer>
<layer class="Text" left="210" top="70" width="198" height="250" bgcolor="#994000" clip="0,0,198,2">
CSS ist die Sprache für die Formatierung von Web-Seiten. Physis und Sohnprinzip. Klinkt sich
nahtlos in HTML ein und sorgt dafür, das Strukturen zu Farben und Formen werden.
</layer>
<layer class="Text" left="410" top="70" width="198" height="250" bgcolor="#008000" clip="0,0,198,2">
JavaScript ist die Sprache für Dynamische Web-Seiten. Kinesis und Geistprinzip. Klinkt sich nahtlos
in HTML ein und zunehmend auch in CSS. Ist allerdings am schwersten zu verstehen.
</layer>
<layer class="Kopf" left="10" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(0)">HTML</a>
</layer>
<layer class="Kopf" left="210" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(1)">CSS</a>
</layer>
<layer class="Kopf" left="410" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(2)">JavaScript</a>
</layer>
</body></html>
Erläuterung:
In dem Beispiel werden insgesamt sechs Layer definiert. Die ersten drei Layer sind diejenigen, die auf- und zuklappbar sind. Zunächst sind diese Layer zugeklappt. Das wird durch das Attribut clip erreicht. Durch diese Angabe lässt sich der angezeigte Bereich eines Layers beliebig einschränken. Die auf-/zuklappbaren Layer im obigen Beispiel etwa haben durch die Angaben width="198" height="250" eine Breite von 198 und eine Höhe von 250 Pixeln. Durch die Angabe clip="0,0,198,2" wird folgendes erreicht: trotz der definierten Breite und Höhe ist nur der Bereich von links 0 oben 0 bis links 198 oben 2 sichtbar. Das ist nur ein ganz dünner Streifen, der aus optischen Gründen zugelassen wird. Mit 0,0,198,0 wäre von den Layern überhaupt nichts zu sehen.
Die drei unteren Layer sind mit Hilfe der Angaben zu top, left, width und height so positioniert, dass sie genau über den auf-/zuklappbaren Layern stehen. Diese "Kopf"-Layer enthalten Verweise. Bei jedem Klick auf einen Verweis in einem der Kopf-Layer wird der Layer unterhalb davon auf- oder wieder zugeklappt. Dazu wird bei jedem Klick auf einen der Verweise eine JavaScript-Funktion aufgerufen: die Funktion AufUndZu(), die im Kopf der Datei in einem JavaScript-Bereich definiert ist.
In dem JavaScript-Bereich wird vor der Funktion AufUndZu() bereits ein Array, bestehend aus drei Werten, definiert: der Array Status. Alle seine drei Werte erhalten den Anfangszustand "zu". Da dieser Array außerhalb jeder Funktion definiert ist, stehen seine Daten jederzeit zur Verfügung.
Innerhalb der Funktion AufUndZu() wird geprüft, ob ein Layer derzeit auf- oder zugeklappt ist. Dazu bekommt die Funktion beim Aufruf einen Parameter LayNum übergeben. Das ist die Indexnummer des Layers, der auf- oder zugeklappt werden soll. Da im Beispiel die ersten drei definierten Layer davon betroffen sein sollen, kommen also nur die Indexnummern 0, 1 und 2 in Frage. Beim Aufruf der Funktion in den unteren drei Layern werden denn auch genau diese drei Werte übergeben. Mit der Abfrage if (Status[LayerNum] == "zu") vergleicht die Funktion AufUndZu(), was im Array Status als Wert für die übergebene Indexnummer steht. Wenn dort "zu" steht, wird der Layer aufgeklappt. Wenn er aufgeklappt wird, wird der Wert im Array am Ende auf den Wert "auf" gesetzt. Dadurch gelangt die Funktion bei der nächsten Abfrage für den gleichen Layer in den else-Zweig, wo sie genau die umgekehrten Arbeiten durchführt.
Das eigentliche Auf- und Zuklappen geschieht innerhalb der for-Schleife. Dort wird beim Aufklappen von 2 bis 250 gezählt und beim Zuklappen von 250 zurück auf 2. Abhängig vom aktuellen Schleifenwert wird die Unterseite des Clip-Bereichs des Layers mit document.layers[LayerNum].clip.bottom dynamisch verändert. Die Grenzwerte von 2 und 250 hängen mit den definierten Layern zusammen: die 2 ist jener Wert, der bei den Angaben clip="0,0,198,2" vorkommt, und 250 ist die Höhe der definierten Layer (height="250"). Beim Aufklappen wird also der Clip-Bereich im Script dynamisch auf 0,0,198,250 verändert. Das bedeutet: der Layer ist vollständig sichtbar. Beim Zuklappen wird dagegen wieder der Clip-Anfangszustand von 0,0,198,2 wiederhergestellt.
Einen der großen Vorteile des Microsoft-Ansatzes für Dynamisches HTML, nämlich das beliebige Austauschenkönnen von HTML-Elementinhalten, können Sie mit Hilfe von Netscape-Layern zumindest "nachstellen". Der Grund ist, dass Netscape einen Layer wie ein eigenes kleines neues Dokument innerhalb des Elterndokuments behandelt. So sind auch alle JavaScript-Objekte darauf anwendbar, die unterhalb des document-Objekts liegen. Das folgende Beispiel verdeutlicht, wie dies bei Layern im einzelnen funktioniert, und welche Möglichkeiten sich dabei eröffnen.
<html><head><title>Test</title>
<script type="text/javascript">
function DatenSchreiben () {
var Text = document.Input.document.Eingabe.Feld.value;
var Laenge = document.Input.document.Eingabe.Feld.value.length;
document.Output.document.clear();
document.Output.document.write("<p>Sie haben folgenden Text eingegeben:<br>");
document.Output.document.write("<b>" + Text + "<\/b><\/p>");
document.Output.document.write("<p>Der Text hat eine Laenge von ");
document.Output.document.write("<b>" + Laenge + " Zeichen<\/b><\/p>");
document.Output.document.close();
}
</script>
</head><body>
<layer id="Input" bgcolor="#E4EEFF" style="padding:18px" left="10" top="100" width="280" height="280">
<p>Geben Sie in dem Feld Text ein und klicken Sie dann auf "Interaktion"</p>
<form name="Eingabe" action="">
<textarea name="Feld" cols="25" rows="6" wrap="virtual"></textarea><br>
<input type="button" value="Interaktion" width="220" onclick="DatenSchreiben()">
</form>
</layer>
<layer id="Output" style="padding:18px" left="310"
top="100" width="280" height="280">
</layer>
</body></html>
Erläuterung:
Im Beispiel werden zwei Layer definiert: einer mit dem Namen (id) Input und einer mit dem Namen Output. Beide Layer sind so positioniert, dass der Layer für den Output neben dem Layer für den Input erscheint. Der Layer für den Output erhält jedoch zunächst keinen Inhalt. Im Layer für den Input wird dagegen ein Formular definiert. Das Formular besteht aus einem mehrzeiligen Eingabefeld und einem Button. Wenn der Anwender auf den Button klickt, wird die JavaScript-Funktion SchreibeDaten() aufgerufen, die im Kopf der Datei innerhalb eines JavaScript-Bereichs definiert ist.
Die Funktion ermittelt zunächst den eingegebenen Text und dessen Länge. Anschließend schreibt sie diese Daten zur Kontrolle in den Layer mit dem Namen Output. Wichtig ist, dass vor dem dynamischen Schreiben des Inhalts die Methode clear() aufgerufen wird, die den aktuellen Inhalt des Layers löscht, und nach dem Schreiben die Methode close(), die den Vorgang abschließt, sodass beim nächsten Mal ein neuer Schreibzugriff möglich ist. Dazwischen werden die eigentlichen Daten geschrieben, und zwar mit der Methode write().
Alle drei Methoden sind altbekannte Methoden des document-Objekts von JavaScript. Das besondere im Fall der Layer ist, dass das document-Objekt bei den Anweisungen gleich doppelt verwendet wird. Ein Beispiel ist die Anweisung: document.Output.document.clear();. Auch zu Beginn der Funktion, beim Ermitteln des Formularfeldinhalts, kommt diese doppelte Verwendung von document vor. Solche Konstruktionen müssen Sie so verstehen: über das vorne notierte document sind Layer-Objekte ansprechbar, da diese unterhalb des document-Objekts liegen. Output ist im Beispiel der Name eines Layers. Dadurch wird dieser Layer angesprochen. Ein Layer gilt nun aber selbst wieder als "Dokument". Deshalb müssen Sie dahinter nochmals document und dahinter erlaubte Eigenschaften und Methoden des document-Objekts notieren. Die Anweisungen beziehen sich dann auf die Elemente innerhalb des entsprechenden Layers. Im obigen Beispiel etwa kommen Sie an den Formularfeldinhalt nur mit document.Input.document.Eingabe.Feld.value (document.Eingabe.Feld.value würde dagegen eine Fehlermeldung erzeugen).
Beachten Sie:
Der Phantasie sind hierbei kaum Grenzen gesetzt. Alles, was Sie beispielsweise durch Interaktion mit dem Anwender mit Hilfe eines Formulars in JavaScript ermitteln und berechnen können, können Sie auf diese Weise dynamisch ausgeben. Mit Methoden wie window.setTimeout() können Sie auch zeitgesteuert Inhalte in Layer schreiben.
Unter dem Druck von Microsoft und angesichts der Tatsache, dass das W3-Konsortium keine Anstalten machte, das layer-Element und damit die Grundlage für Dynamisches HTML nach dem Netscape-Ansatz in den HTML-Standard zu übernehmen, hat Netscape in die Fähigkeit zum Dynamischen Positionieren auch auf die beiden "abstrakten" HTML-Elemente <div>...</div> und <span>...</span> ausgedehnt. Wenn Sie innerhalb solcher HTML-Tags mit Hilfe Stylesheet-Angaben zur Positionierung des Elements notieren, können Sie mit JavaScript auf solche Angaben zugreifen. Netscape interpretiert die Angaben dann genau so wie bei Layern.
Das Beispiel bewirkt, dass beim Anklicken eines Verweises ein Bild angezeigt wird, das zunächst nicht sichtbar ist. Gleichzeitig erscheint ein neuer Verweis, der das Ausblenden des Bildes erlaubt. Auf diese Weise lässt sich das Bild immer wieder ein- und ausblenden.
In dem Beispiel werden dazu innerhalb des Dateikörpers drei Bereiche mit <div>...</div> definiert. Alle div-Bereiche erhalten CSS-Eigenschaften zur Positionierung, und zwar im Dateikopf in dem style-Bereich. Ohne solche Angaben ist bei Netscape kein dynamischer Zugriff auf das entsprechende Element möglich. Dass die CSS-Angaben zentral definiert werden, hat seine Ursache darin, dass einige Netscape-4-Versionen mit Angaben direkt im einleitenden <div>-Tag Probleme haben.
Die beiden ersten <div>-Bereiche im Beispiel haben die gleichen Angaben zur Positionierung. Sie unterscheiden sich lediglich durch die visibility-Eigenschaft. Dadurch wird bewirkt, dass beide Bereiche an der gleichen Stelle angezeigt werden, der eine Bereich zunächst jedoch ausgeblendet bleibt, während der andere angezeigt wird.
Der dritte <div>-Bereich ist der Behälter für das anzuzeigende Bild. Er ist zunächst auch nicht sichtbar.
Die beiden ersten Bereiche enthalten jeweils einen Verweis. Beim Anklicken des Verweises wird jeweils eine JavaScript-Funktion aufgerufen, die im Kopf der Datei in einem JavaScript-Bereich definiert ist. Der Bereich, der zunächst angezeigt wird, enthält einen Verweis, bei dessen Anklicken die Funktion Zeigen() aufgerufen wird.
Die Funktion Zeigen() tut nichts anderes, als die Anzeigeverhältnisse unter den drei <div>-Bereichen zu ändern. Der erste Bereich, über dessen Verweis die Funktion aufgerufen wurde, wird mit document.ZeigenVerweis.visibility = "hidden" auf unsichtbar gesetzt. Der zweite Bereich, der mit dem anderen Verweis, wird dagegen auf sichtbar gesetzt. Auch der Bereich mit dem Bild wird sichtbar.
Nun werden der zweite Verweis ("Versteck das Bild") und das Bild selbst angezeigt. Beim Klicken auf den Verweis wird die andere JavaScript-Funktion Verstecken() aufgerufen. Diese Funktion arbeitet genau so wie die Funktion Zeigen(), nur umgekehrt.
Der Zugriff auf die <div>-Bereiche wird dadurch möglich, dass ihnen mit dem id-Attribut ein Name gegeben wird. Über document.BereichName ist dann der Zugriff auf Eigenschaften wie visibility, top, left, width, height oder clip möglich. So lassen sich praktisch alle Aufgaben lösen, ohne das <layer>-Tag einzusetzen.
Beachten Sie:
Ein layer-Element lässt sich nur simulieren, wenn der div-Bereich absolut positioniert ist.
Sie können - wie im Beispiel - statt der visibility-Eigenschaften hide und show die Eigenschaften hidden und visible verwenden, da Netscape 4 diese Angaben ebenfalls korrekt interpretiert.
Das Event-Objekt von JavaScript erlaubt es, auf Anwenderereignisse zu reagieren. Es stellt eine Erweiterung der klassischen Event-Handler dar. Das folgende Beispiel demonstriert die Möglichkeiten des Event-Objekts.
<html><head><title>Test</title>
<style type="text/css">
layer { font-size:14px; font-family:Arial }
layer.Kopf { color:#FFFFFF; padding:4px; cursor:hand; }
layer.Text { color:#000000; padding-top:30px; padding-left:4px; padding-right:4px }
</style>
</head><body>
<layer id="Gruen" class="Text" bgcolor="#99FF99" top="170" left="10" width="200" height="180">
<layer id="Gruenkopf" class="Kopf" bgcolor="#000000" top="0" left="0" width="200" height="25">
Titelleiste des grünen Layers
</layer>
Klicken Sie mal mit der Maus in die Titelleiste dieses Layers,
halten Sie die Maustaste gedrückt und ziehen Sie dann die Maus an eine andere Stelle.
</layer>
<layer id="Gelb" class="Text" bgcolor="#FFFF66" top="10" left="310" width="300" height="120">
<layer id="Gelbkopf" class="Kopf" bgcolor="#000000" top="0" left="0" width="300" height="25">
Titelleiste des gelben Layers
</layer>
Klicken Sie mal mit der Maus in die Titelleiste dieses Layers,
halten Sie die Maustaste gedrückt und ziehen Sie dann die Maus an eine andere Stelle.
</layer>
<script type="text/javascript">
Gruen = document.layers["Gruen"];
Gruentitel = document.layers["Gruen"].document.layers["Gruenkopf"].document;
Gelb = document.layers["Gelb"];
Gelbtitel = document.layers["Gelb"].document.layers["Gelbkopf"].document;
Gruentitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
Gruentitel.onmousedown = StartGruen;
Gruentitel.onmouseup = EndGruen;
document.layers["Gruen"].document.layers["Gruenkopf"].onload = GruenReset;
Gelbtitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
Gelbtitel.onmousedown = StartGelb;
Gelbtitel.onmouseup = EndGelb;
document.layers["Gelb"].document.layers["Gelbkopf"].onload = GelbReset;
function GruenReset () {
Gruentitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
}
function GelbReset () {
Gelbtitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
}
function StartGruen () {
Gruentitel.captureEvents(Event.MOUSEMOVE);
Gruentitel.onmousemove = ZiehGruen;
}
function StartGelb () {
Gelbtitel.captureEvents(Event.MOUSEMOVE);
Gelbtitel.onmousemove = ZiehGelb;
}
function ZiehGruen (Ereignis) {
Gruen.left = Ereignis.pageX;
Gruen.top = Ereignis.pageY;
}
function ZiehGelb (Ereignis) {
Gelb.left = Ereignis.pageX;
Gelb.top = Ereignis.pageY;
}
function EndGruen () {
Gruentitel.onmousemove = 0;
Gruentitel.releaseEvents(Event.MOUSEMOVE);
}
function EndGelb () {
Gelbtitel.onmousemove = 0;
Gelbtitel.releaseEvents(Event.MOUSEMOVE);
}
</script>
</body></html>
Erläuterung:
Im Beispiel werden insgesamt vier Layer definiert, davon zwei "äußere" (mit id="Gruen" bzw. id="Gelb") und zu jedem jeweils ein "innerer" (mit id="Gruenkopf" bzw. id="Gelbkopf"). Die inneren Layer sind so gestaltet, dass sie wie Titelleisten zu den jeweils äußeren Layern wirken, daher auch die id-Namen.
Wie Sie erkennen können, steht nirgendwo bei der Layerdefinition oder innerhalb eines der Layer ein JavaScript-Aufruf. Dennoch sind die beiden Titelleisten "sensitiv": wenn der Anwender mit der Maus darauf klickt, die Maustaste gedrückt hält und die Maus bewegt, bewegt sich der gesamte zugehörige "äußere" Layer mit. Der Grund dafür ist das Konzept des Event-Objekts. Es benötigt keine Event-Handler innerhalb von HTML, um JavaScript-Aktionen anzustoßen.
Der JavaScript-Bereich des obigen Beispiels enthält dafür einige "ungewohnte" Dinge. Er wird unterhalb der Layer definiert, weil gleich bei seinem Einlesen Code ausgeführt wird, der sich auf die definierten Layer bezieht. Die Layer müssen zu diesem Zeitpunkt bereits eingelesen sein, sonst gibt es eine Fehlermeldung.
Die ersten vier Zeilen des JavaScript-Codes im Beispiel speichern einfach nur ziemlich lange Objekt-Eigenschaften-Ketten in Variablen, da diese im weiteren Verlauf häufig notiert werden müssen. Danach folgen jeweils vier Anweisungen, und zwar je für den grünen Layer und für den gelben. Die Methode captureEvents() bewirkt, dass Anwenderaktionen überwacht und bei Eintritt gemeldet werden. Die Methode captureEvents() erwartet als Parameter einen Wert. Notieren Sie dazu nach dem Prinzip Event.WELCHER die Events, die überwacht werden sollen. Die gewünschten Events sind durch bitweises Oder (einfacher Vertikalstrich) zu trennen. Welche Events es neben denen im obigen Beispiel gibt, erfahren Sie in der JavaScript-Objektreferenz beim Objekt event.
Beim Eintritt von überwachten Ereignissen werden Funktionen aufgerufen. Beachten Sie dabei die etwas merkwürdige Syntax: mit einer Anweisung wie Gruentitel.onmousedown = StartGruen wird die selbstgeschriebene Funktion StartGruen() aufgerufen, die weiter unten im Script definiert ist. Beim Aufruf dürfen Sie in diesem Fall jedoch keine Klammern hinter dem Funktionsnamen notieren!
Verfolgen Sie nun mal im Beispiel den Fall, dass der Anwender auf die Titelleiste des grünen Layers klickt. Dann wird das Ereignis MOUSEDOWN für Gruentitel gemeldet. Für diesen Fall (onmousedown) wird die Funktion StartGruen aufgerufen. Innerhalb dieser Funktion wird wiederum überwacht, ob der Anwender die Maus bei gedrückter Maustaste bewegt. Wenn ja, wird dort nach dem gleichen Schema die Funktion ZiehGruen aufgerufen. Obwohl die Funktion keinen Parameter übergeben bekommt, erwartet sie einen - auch das gegen alle sonstige Regeln. Der erwartete Parameter ist aber kein "Wert" wie sonst üblich, sondern einfach ein Name für den aktuellen Event. Im Beispiel wurde der Name Ereignis gewählt. Unter dem vergebenen Namen lassen sich Eigenschaften des Event-Objekts ansprechen. Da innerhalb der Funktion ZiehGruen davon Gebrauch gemacht wird, ist ein solcher Name erforderlich. Aktiv ist die Funktion ZiehGruen solange, wie der Anwender die Maustaste bewegt und nicht loslässt. Während dieser Zeit werden "so oft wie möglich" die Eigenschaften PageX (aktuelle Mausposition von links) und PageY (aktuelle Mausposition von oben) von Ereignis abgefragt. Diese Werte werden dem betroffenen Layer dynamisch als neue Werte für die linke obere Ecke zugewiesen. So entsteht der Bewegungseffekt.
Wenn der Anwender die Maustaste loslässt, wird die Funktion ZiehGruen sofort verlassen. Da die Event-Überwachung ja noch aktiv ist, wird jetzt das Ereignis MOUSEUP gemeldet. Für diesen Fall wird die Funktion EndGruen aufgerufen. Diese Funktion enthält zwei Befehle zum "Aufräumen".
Wenn Sie sonst nichts weiter unternehmen würden, wäre der Layer nach dem ersten Bewegen nicht mehr bewegungsfähig. Damit er immer wieder bewegbar ist, tritt automatisch ein LOAD-Ereignis ein. Dieses wird mit onload abgefangen. Dabei wird die Funktion GruenReset aufgerufen. Diese Funktion startet die erneute Überwachung der Ereignisse.
Analog zu dem Handling für den grünen Layer wird mit dem Handling für den gelben Layer verfahren.
<html><head><title>Test</title>
<style type="text/css">
layer { padding:5px; }
p.Verweis { font-size:14px; font-weight:bold; font-family:Arial; color:yellow; }
p.Text { font-size:14px; font-family:Arial; color:white; }
</style>
</head><body>
<layer class="Kopf" bgcolor="#000000" top="175" left="50" width="500" height="200"
clip="0,0,500,25" onmouseover="Zeigen()" onmouseout="Verstecken()">
<p class="Verweis">Was Sie schon immer wissen wollten über ...</p>
<p class="Text"><span style="color:red; font-size:64px">SECHS</span><br>
Es handelt sich dabei einfach um eine Zahl, die exakt ein halbes Dutzend bezeichnet.</p>
<script type="text/javascript">
function Zeigen () {
clip.bottom = 200;
}
function Verstecken () {
clip.bottom = 25;
}
</script>
</layer>
</body></html>
Erläuterung:
Im Beispiel wird ein Layer definiert. Mit dem clip-Attribut wird der Anzeigebereich des Layers jedoch zunächst beschnitten, und zwar so, dass gerade der erste Textabsatz sichtbar ist. Wenn der Anwender mit der Maus über den sichtbaren Layer-Bereich fährt, wird die JavaScript-Funktion Zeigen() aufgerufen. Diese Funktion verändert den Clip-Bereich des Layers so, dass er in ganzer Größe angezeigt wird. Wenn die Maus den Layer-Bereich wieder verlässt, wird die Funktion Verstecken() aufgerufen. Diese Funktion ändert den Clip-Bereich wieder auf den Anfangswert.
Wichtig ist bei dieser Form, dass der JavaScript-Bereich innerhalb des Layers definiert wird. Dann brauchen Sie sich nicht um die korrekte Adressierung des Layers mit Indexnummern oder Namen zu kümmern. Sie können einfach Anweisungen wie clip.bottom = [Wert] (wie im Beispiel) oder Eigenschaften wie top, left oder bgColor notieren, um Wirkungsweise und Aussehen des Layers zu verändern. Welche Eigenschaften Sie ändern können, entnehmen Sie der Referenz zum Objekt layers.
Der Internet Explorer unterstützt ab der Version 4.x spezielle CSS-Eigenschaften, die so genannten Filter. Mit Hilfe solcher Filter sind grafische Effekte möglich, wie sie aus professionellen Grafikprogrammen bekannt sind: Schatteneffekte für Texte oder auch Transparenzdefinitionen für Grafiken, die auf einer WWW-Seite angezeigt werden, gehören zum Repertoire der möglichen Angaben. Als reine CSS-Eigenschaften sind diese Filter statisch. Mit Hilfe von Scripts können Sie die entsprechenden Angaben zu den Filtern jedoch dynamisch beeinflussen. Ferner gibt es zwei Spezialfilter für Blend- und diverse Übergangseffekte. Mit etwas Programmier-Wissen und ästhetischem Gefühl können dabei so ziemlich alle Träume wahr werden, die Web-Designer heimlich immer schon geträumt haben: Grafiken, die sich wie von Geisterhand langsam ein- und ausblenden, fließende Übergänge zwischen Elementen, Texte, die verschwimmen usw.
Der Script-Zugriff auf definierte Filter erfolgt über das filter-Objekt in JScript/JavaScript. Die Beispiele hier können nicht alle Möglichkeiten des Filter-Objekts behandeln. Sie dienen nur zur Veranschaulichung, wie Filter sich durch ein Script dynamisch verändern lassen.
Die Filter-Technik von Microsoft ist jedoch nie ein Standard geworden, und es ist fraglich, ob sie je zum Standard gehören werden.
Im Beispiel wird in einem <div>-Bereich der zugehörige Text (leicht gestört) mit Hilfe von CSS-Eigenschaften formatiert. Zu den Formatierungen gehört auch die Anwendung des FiltersWave(). Damit wird der Effekt des Filters zwar bereits angezeigt, aber es bewegt sich noch nichts. In einem Script unterhalb des so definierten <div>-Bereichs werden die Angaben dieses Filters dynamisch verändert. Da ein Endlos-Effekt mit immer neuen Werten und Kombinationen eingebaut ist, entsteht ein Zitter-Effekt.
Die JavaScript-Funktion wird im obigen Beispiel unterhalb des Bereichs, auf den sie sich bezieht, definiert. Der Grund ist, dass die JavaScript-Anweisungen sofort ausgeführt werden. Der <div>-Bereich, auf dessen Daten die Anweisungen dynamisch zugreifen, sollte zu diesem Zeitpunkt bereits eingelesen und dem Browser bekannt sein. Deshalb steht das Script unterhalb des <div>-Bereichs. Ansonsten könnte es zu Fehlermeldungen kommen.
Innerhalb des Script-Bereichs wird zunächst eine Funktion mit dem Namen DynWave() definiert. Diese Funktion ändert die Parameter freq, phase und strength des Wave-Filters, der bei dem <div>-Bereich definiert wurde. Am Ende ruft sich die Funktion selbst wieder auf. Dadurch entsteht ein Endlos-Effekt. Der Aufruf erfolgt zeitverzögert um 100 Millisekunden. Das ist wichtig, da der Selbstaufruf der Funktion sonst "unendlich schnell" wäre und ein Problem im Arbeitsspeicher verursachen würde (Selbstaufrufe von Funktionen sind nämlich nicht ganz unkritisch, da für jeden Funktionsaufruf neuer Arbeitsspeicherplatz reserviert werden muss).
Da die Funktion zu Beginn überhaupt erst einmal aufgerufen werden muss (sonst würde gar nichts passieren), steht am Ende des Script-Bereichs - außerhalb der Funktion DynWave() - der einmalige Funktionsaufruf DynWave();.
Innerhalb der Funktion im Beispiel können Sie erkennen, wie auf Filter dynamisch zugegriffen wird. Der Zugriff geschieht mit Hilfe des all-Objekts. Bezug ist die Angabe id="Zittertext", die im <div>-Tag vergeben wird. Mit document.all.Zittertext ist dann der Zugriff auf dieses HTML-Element möglich.
Zwei Besonderheiten sind bei Filtern jedoch zu beachten:
Mit einem Ausdruck wie document.all.Zittertext.filters[0].strength greifen Sie auf den Wert zu, der beim ersten definierten Filter des HTML-Elements bei der Angabe strength als Parameter notiert ist. Da die Filter zu den Stylesheet-Angaben gehören, müsste eigentlich document.all.Zittertext.style.filters[0].strength notiert werden. Dies führt beim Internet Explorer jedoch zu Fehlermeldungen. Lassen Sie die Angabe style in der Mitte also weg.
Da ein Element mehrere Filter haben kann, müssen Sie genau angeben, welchen Filter Sie dynamisch ansprechen wollen. Im obigen Beispiel wird mit filters[0] der erste definierte Filter angesprochen. Falls im gleichen <div>-Tag noch einen zweiter Filter definiert wäre, könnten Sie diesen mit filters[1] ansprechen. Also einfach bei 0 zu zählen beginnen. Microsoft erlaubt auch weitere Notationsmöglichkeiten, für das obige Beispiel etwa document.all.Zittertext.filters["wave"].strength oder document.all.Zittertext.filters.wave.strength.
Das hier beschriebene Schema zum Zugreifen auf Filterwerte können Sie auf alle anderen Filter ebenso anwenden. Auch auf solche, die vor allem in Verbindung mit Grafiken sinnvoll sind.
Der blendTrans-Filter ist ein spezieller Filter, der nur in Verbindung mit Scripts sinnvoll ist. Er erlaubt es, einen fließenden Übergang von einer Grafik zu einer anderen Grafik oder von einem Textinhalt zu einem anderen Textinhalt zu definieren. Dadurch werden Effekte wie bei professionellen Dia-Shows oder wie bei Fernsehbildern auf WWW-Seiten möglich.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
Bild1 = new Image();
Bild1.src = "madrid1.jpg";
Bild2 = new Image();
Bild2.src = "madrid2.jpg";
var Bild = 1;
function Bildwechsel () {
if (Bild == 1) {
Bild = 2;
document.all.Madrid.filters.blendTrans.Apply();
document.all.Madrid.src = Bild2.src;
document.all.Madrid.filters.blendTrans.Play();
} else {
Bild = 1;
document.all.Madrid.filters.blendTrans.Apply();
document.all.Madrid.src = Bild1.src;
document.all.Madrid.filters.blendTrans.Play();
}
}
</script>
</head><body>
<p>Klicken Sie auf das Bild, nachdem es vollständig angezeigt ist.</p>
<img id="Madrid" src="madrid1.jpg" style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" width="433" height="278" border="0" alt="Das ist Madrid">
</body>
</html>
Erläuterung:
Das Beispiel bewirkt, dass beim Klicken auf ein Bild dieses Bild langsam in ein anderes übergeht. Wird das andere Bild dann angeklickt, geht es langsam wieder in das erste über.
Dazu wird zunächst bei der Definition des Bildes mit <img...> eine spezielle Stylesheet-Angabe notiert: der Filter blendTrans(...). Dieser Filter erwartet einen Parameter, nämlich die Angabe zu Duration. Damit können Sie angeben, wie lange der Übergang von dem Bild zu seinem Nachfolger dauern soll. Im Beispiel wird 4 angegeben - das steht für 4 Sekunden. Sie können auch Bruchwerte bis zu tausendstel Sekunden angeben, etwa 2.450 (Dezimalzeichen ist ein Punkt!).
Damit ist der Übergangseffekt jedoch nur "registriert". Um ihn tatsächlich auszuführen, ist ein Script erforderlich. Im obigen Beispiel wird im Dateikopf ein JavaScript-Bereich definiert. Dort werden zunächst mit Hilfe des Bildobjekts image beide betroffenen Bilder als Objekte (Bild1 und Bild2) definiert. Der Eigenschaft src der Bildobjekte werden die gewünschten Grafikdateien zugewiesen. Diese Vorarbeit mit dem image-Objekt ist zwar nicht zwingend notwendig, hat aber den Vorteil, dass alle betroffenen Bilder bereits in den Arbeitsspeicher geladen sind, wenn der Übergang angestoßen wird.
Innerhalb der Funktion Bildwechsel() findet dann der eigentliche Übergang statt. Diese Funktion wird aufgerufen, wenn der Anwender auf das Bild klickt. Dazu ist im <img>-Tag der Event-Handleronclick notiert.
In der Funktion Bildwechsel() wird zunächst die Methode Apply() des blendTrans-Filters aufgerufen. Dieser Aufruf ist notwendig, um dasjenige Objekt zu identifizieren, das in ein anderes übergehen soll. Im Beispiel ist das die Grafik, angesprochen über das all-Objekt und den vergebenen id-Namen DynBild. Als nächster Befehl wird der Grafik diejenige neue Grafik zugeordnet, durch die sie ersetzt werden soll. Erst dann sind alle Voraussetzungen erfüllt, um den eigentlichen Übergang zu starten. Dazu wird die Methode Play() des filter-Objekts benutzt.
Die Variable Bild und der else-Zweig in der Beispielfunktion dienen dazu, den Wechseleffekt sicherzustellen. Mit den beschriebenen Befehlen findet der Übergang ansonsten genau einmal statt.
Der Übergangs-Effekt ist nicht nur bei Grafiken möglich, sondern auch bei Text.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
var NormalText = "Wer HTML nicht ehrt";
var AndererText = "ist des Dynamischen nicht wert";
var Text = 1;
function Wechsel () {
if (Text == 1) {
Text = 2;
document.all.MeinText.filters.blendTrans.Apply();
document.all.MeinText.innerText = AndererText;
document.all.MeinText.filters.blendTrans.Play();
} else {
Text = 1;
document.all.MeinText.filters.blendTrans.Apply();
document.all.MeinText.innerText = NormalText;
document.all.MeinText.filters.blendTrans.Play();
}
}
</script>
</head><body>
<p>Klicken Sie auf den folgenden Text:</p>
<div id="MeinText" style="cursor:hand; margin-bottom:100px; font-size:2.6em; color:red; width:14em; filter:blendTrans(Duration=0.5)" onclick="Wechsel()">
Wer HTML nicht ehrt</div>
</body>
</html>
Erläuterung:
Anwendbar ist der blendTrans-Filter bei Text auf die HTML-Elemente: <body>...</body> <div>...</div> <span>...</span> <input> <button> <textarea>...</textarea> <marquee>...</marquee>
sowie auf alle Tabellenelemente. Bei <div>...</div> und bei <span>...</span> müssen Sie Stylesheet-Angaben zu Breite und/oder Höhe des Elements notieren, sonst funktioniert es nicht.
Das obige Beispiel ist im wesentlichen das gleiche wie bei den Grafiken. Im Unterschied dazu wird jedoch ein Übergang zwischen zwei Texten definiert. Der erste Text ist im Dateikörper der HTML-Datei mit <div>...</div> entsprechend der Regeln definiert. Die Realisierung des Übergangs zwischen den beiden Texten ist ähnlich wie bei Grafiken. Anstelle der Objekteigenschaft src (bei Grafiken) müssen Sie bei Texten jedoch die Eigenschaft innerText (wie im Beispiel) oder innerHTML verwenden. Diese Eigenschaften erlauben das dynamische Austauschen des Inhalts, den das angesprochene HTML-Element enthält.
Der revealTrans-Filter ist ganz ähnlich zu handhaben wie der blendTrans-Filter. Während der blendTrans-Filter jedoch nur einfache Blenden von einem Inhalt zum anderen erlaubt, stellt der revealTrans-Filter ein ganzes Arsenal grafischer Überblend-Effekte bereit.
Das Beispiel bewirkt, dass innerhalb von 5 Sekunden (5000 Millisekunden) das angezeigte Bild "rain.gif" zerbröselt und durch das Bild "sun.gif" ersetzt wird.
<html><head><title>Test</title>
</head><body>
<div id="MeinText" style="width:14em; height:150px; font-size:2em; filter:revealTrans(Duration=1,Transition=7)">
Wer HTML nicht ehrt
</div>
<script language="JScript" type="text/jscript">
window.setTimeout("Wechsel()", 2500);
function Wechsel () {
document.all.MeinText.filters.revealTrans.Apply();
document.all.MeinText.innerText = "ist des Dynamischen nicht wert";
document.all.MeinText.filters.revealTrans.Play();
}
</script>
</body></html>
Erläuterung:
Das Beispiel bewirkt, dass der Text Wer HTML nicht ehrt nach 2,5 Sekunden durch den Text ist des Dynamischen nicht wert ersetzt wird, und zwar so, dass der neue Text den zunächst angezeigten Text von rechts her "überrollt".
Dazu wird zunächst der Text Wer HTML nicht ehrt innerhalb eines <div>-Bereichs notiert. Denn der revealTrans-Filter ist im Zusammenhang mit Text auf die folgenden HTML-Elemente anwendbar: <body>...</body> <div>...</div> <span>...</span> <input> <button> <textarea>...</textarea> <marquee>...</marquee>
sowie auf alle Tabellenelemente. Bei <div>...</div> und bei <span>...</span> müssen Sie Stylesheet-Angaben zu Breite und/oder Höhe des Elements notieren, sonst funktioniert es nicht. Im obigen Beispiel werden Breite und Höhe des <div>-Bereichs mit width: und height: festgelegt.
Ferner wird eine spezielle Stylesheet-Angabe notiert: der Filter revealTrans(...). Dieser Filter erwartet zwei Parameter, nämlich die Angabe zu Duration und eine Angabe zu Transition. Mit Duration können Sie angeben, wie lange der Übergang von dem Text zu seinem Nachfolger dauern soll. Im Beispiel wird 1 angegeben - das steht für eine Sekunde. Sie können auch Bruchwerte bis zu tausendstel Sekunden angeben, etwa 2.450 (Dezimalzeichen ist ein Punkt!).
Bei Transition geben Sie die Art an, wie der Filter wirken soll.
<html><head><title>Test</title>
</head><body>
<div id="KommText" style="width:10em; height:3em; font-size:2em; font-weight:bold; color:#0000FF; visibility:hidden; filter:blendTrans(Duration=4)">
Hier kommt der Text
</div>
<script language="JScript" type="text/jscript">
document.all.KommText.filters.blendTrans.Apply();
document.all.KommText.style.visibility = "visible";
document.all.KommText.filters.blendTrans.Play();
</script>
<div id="GehText" style="width:10em; height:3em; font-size:2em; font-weight:bold; color:#0000FF;
visibility:visible; filter:blendTrans(Duration=4)">
Hier geht der Text
</div>
<script language="JScript" type="text/jscript">
document.all.GehText.filters.blendTrans.Apply();
document.all.GehText.style.visibility = "hidden";
document.all.GehText.filters.blendTrans.Play();
</script>
</body></html>
Erläuterung:
Im obigen Beispiel werden insgesamt zwei <div>-Bereiche mit Text definiert. Beide Bereiche erhalten mit der id-Angabe jeweils einen Namen, damit sie per Script ansprechbar sind. Der eine Bereich erhält den Namen KommText, der andere den Namen GehText. Beide Bereiche erhalten auch mit Hilfe der Stylesheet-Angabe visibility eine Angabe dazu, ob sie zunächst angezeigt werden sollen oder nicht. Die Angabe visibility:hidden im ersten der beiden <div>-Bereiche sorgt dafür, dass dieser Bereich zunächst nicht angezeigt wird. Im zweiten Bereich steht dagegen die Angabe visibility:visible. Dadurch wird der entsprechende Text zunächst angezeigt. In beiden <div>-Bereichen wird außerdem der blendTrans-Filter notiert.
Unterhalb jedes der beiden <div>-Bereiche ist ein Script notiert, das den jeweiligen blendTrans-Filter ausführt. Das funktioniert genauso wie bei fließenden Übergängen mit dem blendTrans-Filter. Der Unterschied ist lediglich, dass dem jeweiligen <div>-Bereich zwischen dem Aufruf der Methoden Apply() und Play() kein anderer Text zugewiesen wird, sondern ein neuer Wert für visibility. Der Bereich, der zunächst visibility:hidden zugewiesen bekam, wird innerhalb des Scripts mit der Anweisung document.all.KommText.style.visibility = "visible" sichtbar. Da der Wechsel zwischen unsichtbar und sichtbar jedoch in den blendTrans-Filter eingebunden ist, wird der Text nicht sofort sichtbar, sondern erst durch das Ausführen des blendTrans-Filters.
Mit dem zweiten Text passiert das gleiche, nur umgekehrt.
Das voranstehende Beispiel enthält zunächst zwei Verweise. Die beiden Verweise rufen JavaScript-Funktionen auf. Einer der Verweise ruft die Funktion Einblenden() zum Einblenden einer Grafik auf, der andere die Funktion Ausblenden() zum Ausblenden derselben Grafik. Beide Verweise enthalten auch Stylesheet-Angaben zur Anzeige bzw. Nichtanzeige ohne Platzhalter - (display). Der erste Verweis wird zunächst angezeigt, der zweite nicht. Die Angaben werden in den beiden Script-Funktionen Einblenden() und Ausblenden() dynamisch verändert. So wird ermöglicht, dass der Verweis Grafik einblenden angezeigt wird, wenn die Grafik nicht angezeigt wird, und der Verweis Grafik ausblenden, wenn die Grafik angezeigt wird.
Unterhalb der Verweise wird die Grafik notiert, die ein- und ausblendbar sein soll. Durch Stylesheet-Angabe visibility:hidden wird die Anzeige der Grafik zunächst verhindert. Außerdem erhält die Grafik eine Angabe zum revealTrans-Filter. Wenn der Anwender nun auf den zunächst angezeigten Verweis Grafik einblenden klickt, wird die Script-Funktion Einblenden() aufgerufen. Diese Funktion ändert zwischen dem Aufruf von Apply() und Play() des revealTrans()-Filters die Anzeige der einzublendenden Grafik auf visible. Der Filter wird ausgeführt, und die Grafik wird in der vorgeschriebenen Form (transition = 1) eingeblendet. Ferner tauscht die Funktion Einblenden() noch die Anzeige-Attribute der beiden Verweise aus, sodass nun der Verweis zum Ausblenden der Grafik angezeigt wird.
Die Funktion Ausblenden() leistet das Gleiche, nur umgekehrt. Dabei wird auch die Art des revealTrans-Filters umgekehrt, und zwar durch transition = 0.
Als besonderes Bonbon hat sich Microsoft schließlich noch einfallen lassen, die beiden Filter blendTrans und
revealTrans im Zusammenhang mit Meta-Angaben zu interpretieren. Auf diese Weise werden fließende Übergänge zwischen zwei Web-Seiten möglich.
<html><head><title>Test</title>
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)">
</head><body>
<h1>Hier ist Seite 1</h1>
<p><img src="madrid1.jpg" width="433" height="278" border="0" alt="ein Bild"></p>
<p><a href="uebergang2.htm">und ein Link zu Seite 2</a></p>
</body></html>
Beispiel - Datei uebergang2.htm:
<html><head><title>Test</title>
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=3,Transition=12)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)">
</head><body>
<h1>Und das hier ist Seite 2</h1>
<p>Sie sieht ein klein wenig anders aus, aber nicht viel.</p>
<p><img src="madrid2.jpg" width="433" height="278" border="0" alt="ein Bild"></p>
<p><a href="uebergang1.htm">und das ist ein Link, der wieder zu Seite 1 geht</a></p>
</body></html>
Erläuterung:
Mit <meta http-equiv="Page-Exit"... bestimmen Sie einen Filter, der beim Verlassen der Seite angewendet wird, und mit <meta http-equiv="Page-Enter"... einen Filter, der beim Laden der Seite angewendet wird. Bei content notieren Sie RevealTrans oder BlendTrans und dahinter in Klammern die gewünschten Angaben zu zu Duration und - beim RevealTrans-Filter - Transition. Im obigen Beispiel wird für alle Fälle in beiden Dateien der RevealTrans-Filter mit Transition=12 eingesetzt.
Beachten Sie:
Im Internet Explorer 5.0 war das obige Beispiel nicht nachvollziehbar.
Das Document Object Model (DOM) ist eine vom W3-Konsortium verabschiedete Norm, die zunächst einmal den Programmiersprachen-Zugriff auf beliebige Elemente eines Auszeichnungssprachen-Dokuments beschreibt. Das DOM ist also weder selber eine eigene Programmiersprache, noch ist es auf HTML beschränkt. Es definiert lediglich Objekte, Eigenschaften und Methoden, die eine Programmiersprache umsetzen sollte, wenn sie sich DOM-fähig bezeichnen will. Anwendbar sollen diese Objekte, Eigenschaften und Methoden auf alle Dokumente sein, die in einer XML-gerechten Auszeichnungssprache geschrieben sind. Das W3-Konsortium betont ausdrücklich, dass das DOM nicht einfach nur eine Norm für "Dynamic HTML" sein soll. Das DOM ist auch nicht auf die Client-Seite, also etwa den Web-Browser beschränkt. Ebensogut lässt es sich in serverseitigen Programmen, z.B. in CGI-Scripten einsetzen, um Dokumente dynamisch zu erzeugen.
Wie auch immer - das DOM ist die willkommene Lösung auch für das, was hier unter dynamischem HTML verstanden wird, also das nachträgliche dynamische Verändern von Inhalten einer im Browser-Fenster angezeigten Web-Seite. 1998 erstmals als offizielle W3C-Empfehlung herausgegeben, wurde es im Internet Explorer 5.0 und in dem von der Mozilla-Entwicklergemeinde völlig neu programmierten Netscape-Browser, den Netscape selber unter der Version 6.0 anbot, implementiert (JavaScript-Version 1.5). Die Implementierung ist in den heutigen Browsern noch nicht vollständig. Immer wieder wird man als Programmierer auf rätselhafte Verhaltensweisen im einen oder anderen Browser stoßen. Dennoch ist die Richtung damit vorgegeben, wie Dynamisches HTML in Zukunft programmiert werden wird.
Eine Auszeichnungssprache wie HTML oder auch jede andere, XML-basierte Sprache ist als hierarchische Baumstruktur abbildbar.
Die einzelnen Bestandteile einer solchen Baumstruktur werden als Knoten bezeichnet. Das zentrale Objekt des DOM ist deshalb das Objekt node (node = Knoten). Es gibt verschiedene Knotentypen. Innerhalb eines gewöhnlichen HTML-Dokuments gibt es auf jeden Fall drei wichtige Knotentypen, die Sie unterscheiden müssen: Elementknoten, Attributknoten und Textknoten.
Betrachten Sie zum Verständnis das folgende einfache HTML-Konstrukt: <h1 align="center">Hallo Welt</h1>
In diesem Konstrukt gibt es einen Elementknoten, nämlich den Elementknoten des h1-Elements. Ferner gibt es einen Attributknoten, nämlich den des align-Attributs. Und schließlich gibt es so genannte "Zeichendaten", die an zwei Stellen vorkommen: nämlich einmal als Inhalt des h1-Elements, und einmal bei der Wertzuweisung an das align-Attribut. Diese Zeichendaten stellen selbst Knoten dar, nämlich Textknoten.
Ein weiteres Beispiel-Konstrukt soll das Verständnis vertiefen: <h1 align="center">Hallo <i>Welt</i></h1>
In diesem Beispiel ist die Kursiv-Auszeichnung um das Wort Welt hinzugekommen. Wichtig ist dabei nun zu verstehen, wie die Knotenhierarchie aussieht:
Das h1-Element ist in diesem kleinen Strukturbaum-Ausschnitt der Ausgangsknoten. Dieser Knoten hat nach den Regeln des DOM zwei Kindknoten und einen assoziierten Knoten: die Kindknoten sind zum einen der Textknoten mit dem Wort Hallo und dem Leerzeichen dahinter, sowie der Elementknoten des i-Elements. Das align-Attribut im einleitenden <h1>-Tag ist dagegen kein Kindknoten, sondern ein assoziierter Knoten. Der Attributknoten hat jedoch selbst wiederum einen Kindknoten, nämlich den zugewiesenen Wert (center). Auch der Elementknoten des i-Elements hat wieder einen Kindknoten, nämlich den Textknoten seines Zeicheninhalts, also das Wort Welt.
Die Baumstruktur einer komplexen Web-Seite kann, wie sich aus diesen einfachen Beispielen erschließt, sehr umfangreich und tief verschachtelt sein. In einer Script-Sprache muss es aber möglich sein, möglichst schnell und effizient auf einzelne Knoten zugreifen zu können. Im DOM gibt es daher drei wichtige Methoden des document-Objekts, um zumindest auf jeden beliebigen Elementknoten direkt zugreifen zu können: getElementById() kann auf Elemente zugreifen, die ein dokumentweit eindeutiges id-Attribut enthalten, z.B. <p id="derAbsatz">hier steht der Text</p> getElementsByName() kann auf Elemente zugreifen, die einen Namen besitzen (er muss nicht unbedingt eindeutig sein), z.B. <input name="Eingabefeld" type="text" size="40"> getElementsByTagName() kann auf alle Elemente zugreifen in der Form: "liefere mir das 27. td-Element im Dokument".
Ausgehend von einem ermittelten Elementknoten lässt sich dann schnell auf dessen Attribute und Inhalt zugreifen. Auch dafür stellt das DOM Eigenschaften und Methoden bereit. Dabei gibt es jedoch bei HTML-basierten Web-Seiten zwei Varianten. Einmal können Sie die Eigenschaften und Methoden des node-Objekts dazu verwenden, um auf Kindknoten und assoziierte Knoten eines Elements zuzugreifen. Zum anderen können Sie aber auch die HTML-Elementobjekte benutzen. Vor allem für den Zugriff auf einzelne Attribute eines Elements sind die HTML-Elementobjekte gut geeignet.
Dynamisches HTML kann aber auch darin bestehen, neue Elemente mit Inhalten und Formatierungen zur Anzeigezeit einer Web-Seite neu zu erzeugen. Für diesen Zweck hält das DOM ebenfalls Methoden bereit.
In der Version 1.0 des DOM wurde nur der Zugriff auf Knoten geregelt. Der Zugriff auf zugewiesene Style-Eigenschaften und von Event-Handling ist dort noch ausgespart. In der DOM-Version 2.0 vom November 2000 sind jedoch auch diese für dynamische Web-Seiten wichtigen Gebiete behandelt. Es ist deshalb auf jeden Fall empfehlenswert, bei neu zu erstellenden dynamischen Web-Seiten von den im DOM geregelten Techniken auszugehen. Die älteren Modelle von Microsoft und Netscape sollten derzeit noch aus Gründen der Rückwärtskompatibilität eingesetzt werden, auf die Dauer jedoch langsam aus der Welt verschwinden, damit endlich ein einheitlicher Sprachenstandard das Entwickeln dynamischer Web-Seiten erleichtert.
Es gibt viele sinnvolle Anwendungsfälle zum dynamischen Ändern von zunächst angezeigten HTML-Elementen. Das folgende Beispiel zeigt einen davon. In dem Beispiel wird eine nummerierte Liste von Großstädten zunächst alphabetisch sortiert ausgegeben. Unterhalb der Liste kann der Anwender jedoch mit Hilfe zweier Formular-Buttons zwischen alphabetischer Sortierung oder geographischer Sortierung wechseln.
<html><head><title>Test</title>
<script type="text/javascript">
var geoArray = new Array(6, 7, 0, 1, 4, 3, 8, 9, 2, 5, 11, 12, 10);
var Art = "ABC";
function ABC () {
if (Art == "ABC")
return;
Art = "ABC";
var Staedte = new Array();
for (var i = 0; i < document.getElementsByTagName("li").length; i++)
Staedte[Staedte.length] = document.getElementsByTagName("li")[i].firstChild.nodeValue;
Staedte.sort();
for (i = 0; i < document.getElementsByTagName("li").length; i++)
document.getElementsByTagName("li")[i].firstChild.nodeValue = Staedte[i];
document.getElementById("Art").firstChild.nodeValue = "alphabetisch von A bis Z";
}
function GEO () {
if (Art == "GEO")
return;
Art = "GEO";
var Staedte = new Array();
for (var i = 0; i < document.getElementsByTagName("li").length; i++)
Staedte[Staedte.length] = document.getElementsByTagName("li")[i].firstChild.nodeValue;
for (i = 0; i < document.getElementsByTagName("li").length; i++)
document.getElementsByTagName("li")[i].firstChild.nodeValue = Staedte[geoArray[i]];
document.getElementById("Art").firstChild.nodeValue = "geographisch von Nord nach Süd";
}
</script>
</head><body>
<h1>Große Städte <span id="Art">alphabetisch von A bis Z</span></h1>
<ol>
<li>Berlin</li>
<li>Dortmund</li>
<li>Dresden</li>
<li>Düsseldorf</li>
<li>Essen</li>
<li>Frankfurt</li>
<li>Hamburg</li>
<li>Hannover</li>
<li>Köln</li>
<li>Leipzig</li>
<li>München</li>
<li>Nürnberg</li>
<li>Stuttgart</li>
</ol>
<form name="Formular" action="">
<input type="button" name="abc" value="alphabetisch" onclick="ABC()">
<input type="button" name="geo" value="geographisch" onclick="GEO()">
</form>
</body></html>
Erläuterung:
Im Beispiel ist die nummerierte Liste zunächst mit den Städtenamen in alphabetischer Sortierfolge notiert. In dem Formular unterhalb der Liste sind zwei Klick-Buttons notiert. Der eine ruft die Funktion ABC() auf, der andere die Funktion GEO(). Ein Klick auf ABC() bringt natürlich nichts, da die Liste ohnehin alphabetisch sortiert ist. Also empfiehlt sich zunächst der Klick auf den Button mit der Aufschrift geographisch. Die Funktion GEO(), die er aufruft, prüft zunächst über die Variable Art, ob die Liste bereits geographisch sortiert ist. Wenn dies der Fall ist, wird die Funktion vorzeitig mit return ohne Rückgabewert beendet. Andernfalls erfolgt die Sortierung. Dazu wird mit zuerst var Staedte = new Array(); ein neuer, leerer Array definiert. Das Vorhaben ist, diesen Array mit den Städtenamen aus der Liste zu füllen. Dazu greift die Funktion der Reihe nach in einer for-Schleife alle Elemente vom Typ li ab, die in dem Dokument vorkommen.
Der Zugriff erfolgt mit document.getElementsByTagName("li").
Über document.getElementsByTagName("li").length kann die Anzahl der li-Elemente im Dokument ermittelt werden. Diese Information benutzt die Funktion als Abbruchbedingung für die for-Schleife. Innerhalb der Schleife wird dem Array der Inhalt des jeweils aktuellen li-Elements hinzugefügt.
Mit document.getElementsByTagName("li")[i].firstChild.nodeValue wird dabei auf den Inhalt des jeweiligen li-Elements zugegriffen. Aus DOM-Sicht ist document.getElementsByTagName("li")[i] ein Knoten, nämlich der i.te li-Elementknoten im Dokument. firstChild ist eine Eigenschaft des node-Objekts. Über diese Eigenschaft können Sie auf den ersten Kindknoten eines Knotens zugreifen. Der erste Kindknoten aller li-Elemente im Dokument ist deren Textinhalt, also jeweils ein Städtenamen. Die Eigenschaft firstChild liefert aber noch nicht den Inhalt des Elements, sondern nur das Objekt des Inhalts. Um tatsächlich an den Inhalt heranzukommen, also an den konkreten Städtenamen, muss eine weitere Eigenschaft des node-Objekts bemüht werden, nämlich die Eigenschaft nodeValue. Die Kombination firstChild.nodeValue können Sie sich ruhig merken. Diese Kombination werden Sie häufig verwenden, um an den Inhalt eines Elements zu kommen.
Nachdem der Array mit den Städtenamen gefüllt ist, macht die Funktion GEO() einfach das Umgekehrte und schreibt den Array wieder zurück in die Liste - ebenfalls in einer for-Schleife.
Der Ausdruck document.getElementsByTagName("li")[i].firstChild.nodeValue steht diesmal links von der Zuweisung. Dadurch wird dem Inhalt des Listenelements dynamisch ein neuer Wert zugewiesen. Im Beispiel ist das der etwas vertrackst aussehende Wert Staedte[geoArray[i]]. Die Städte sollen ja geographisch ausgegeben werden. Nun gibt es keinen Algorithmus, der die Geographie kennt. Ganz oben im Script-Bereich ist daher ein Array namens geoArray notiert. Die Zahlen, mit denen er initialisiert wird, sind einfach die Indexnummern der alphabetisch sortierten Städte. So hat geoArray[0] beispielsweise den Wert 6. Dank dieser Information weiß die Funktion GEO(), dass die nördlichste der Städte diejenige ist, die in der alphabetischen Sortierung die Indexnummer 6 hat (Hamburg). Mit Staedte[geoArray[i]] benutzt die Funktion als aktuellen Index für die Stadt, die in die Liste geschrieben werden soll, also einfach den Zugriff auf geoArray.
Die Funktion ABC() geht ganz genauso vor wie die Funktion GEO(). Sie unterscheidet sich nur dadurch von letzterer, dass sie nach dem Einlesen des Staedte-Arrays die Objektmethode sort() auf den Array anwendet, um die Einträge zu sortieren. Dann schreibt sie den sortierten Array einfach zurück in die nummerierte Liste.
Ein weiteres Element wird von beiden Funktionen ebenfalls noch geändert: nämlich das span-Element innerhalb der Überschrift. Da für dieses Element im HTML-Code mit id="Art" ein ID-Wert notiert ist, lässt sich mit document.getElementById("Art") bequem darauf zugreifen. Mit der üblichen Syntax firstChild.nodeValue wird der Text des Elements angesprochen und dynamisch geändert.
Durch das dynamische Hinzufügen, Ändern oder Löschen von HTML-Attributen lassen sich interessante Effekte, aber auch nützliche Zwecke erreichen. Das folgende Beispiel zeigt, wie Sie Verweise dynamisch ändern können.
<html><head><title>Test</title>
<script type="text/javascript">
var TopLinks = new Array("http://www.spiegel.de/",
"http://www.heise.de/newsticker/",
"http://www.encarta.msn.de/",
"http://paperball.fireball.de/",
"http://kochbuch.unix-ag.uni-kl.de/");
var aktuellerLink = 0;
function TopLink () {
document.getElementsByName("Ziel")[0].href = TopLinks[aktuellerLink];
document.getElementsByName("Ziel")[0].firstChild.nodeValue = TopLinks[aktuellerLink];
aktuellerLink += 1;
if (aktuellerLink >= TopLinks.length)
aktuellerLink = 0;
}
function TopLinksFenster (Fenster) {
document.getElementsByName("Ziel")[0].target = Fenster;
}
</script>
</head><body>
<p><a name="Ziel" href="#Ziel">Top-Link?</a><br>
<a href="javascript:TopLink()">Nächster Top-Link!</a><br>
TopLinks: <a href="javascript:TopLinksFenster('_blank')">in neues Fenster laden!</a> oder
<a href="javascript:TopLinksFenster('_self')">ins aktuelle Fenster laden!</a></p>
</body></html>
Erläuterung:
Das Beispiel enthält im sichtbaren Bereich einen "Top-Link", der zunächst auf sich selbst verweist (name="Ziel" href="#Ziel"). Unterhalb davon sind drei weitere Verweise notiert. Der erste verspricht den jeweils nächsten Top-Link zu präsentieren, und die beiden darunter erlauben es dem Anwender festzulegen, wie er die Links öffnen will - ob im gleichen oder in einem neuen Fenster. Alle diese drei Verweise rufen JavaScript-Funktionen auf, die im Dateikopf notiert sind. Der Verweis, der den nächsten Top-Link verspricht, ruft die Funktion TopLink() auf.
Diese Funktion greift mit document.getElementsByName("Ziel")[0] auf das erste Element im Dokument zu, bei dem als Attribut name="Ziel" notiert ist. Das ist im Beispiel bei dem Verweis der Fall, der die TopLinks anzeigen soll und aber bislang auf sich selbst verweist. Geändert werden sollen bei diesem Verweis sowohl sein href-Attribut als auch sein sichtbarer Verweistext. Der Zugriff auf das href-Attribut ist ganz einfach, weil nach der DOM-Syntax der HTML-Elementobjekte jedes denkbare Attribut eines HTML-Elements einfach eine Eigenschaft des entsprechenden HTML-Objekts darstellt. Um auf HTML-Attribute zuzugreifen, brauchen Sie also nur auf das gewünschte Element zuzugreifen und dahinter, durch Punkt getrennt, den Attributnamen als Eigenschaft notieren. Beachten Sie dabei aber die besondere Groß-/Kleinschreibung bei verschiedenen Attributen wie bgColor, vSpace oder cellPadding.
Mit document.getElementsByName("Ziel")[0].href wird im Beispiel also direkt auf den Wert des href-Attributs des gewünschten Verweises zugegriffen. Durch Zuweisung eines Wertes wird das Attribut dynamisch geändert. Im Beispiel wird jeweils ein neuer Wert aus dem weiter oben im Script notierten Array namens TopLinks zugewiesen. Als Indexzähler wird die ebenfalls zuvor schon definierte Variable aktuellerLink verwendet. Diese wird anschließend um 1 erhöht, damit beim nächsten Aufruf der Funktion der nächste Top-Link aus dem Array gesetzt wird. Wenn der Wert von aktuellerLink zu hoch wird, um noch einen Eintrag in dem Array zu finden, wird die Variable wieder auf 0 gesetzt, und beim nächsten Klick wird wieder der erste Eintrag aus dem Array serviert.
Der Zugriff auf den Verweistext erfolgt wieder über firstChild.value.
Die Verweise, die regeln, in welchem Fenster die Top-Links geöffnet werden sollen, rufen jeweils die Funktion TopLinksFenster() auf und übergeben ihr als Parameter den gewünschten Zielfensternamen. Übergeben werden die reservierten Fensternamen _self (Öffnen im eigenen Fenster) bzw. _blank (Öffnen in neuem Fenster). Die Funktion TopLinksFenster() benutzt wieder den bequemen Weg über die HTML-Elementobjekte, um direkt auf die target-Eigenschaft des a-Elements zuzugreifen und das entsprechende Attribut zu setzen. Es ist also kein Problem, Attribute zu setzen, die im HTML-Quelltext eines Elements nicht notiert sind.
Falls Sie mal ein Attribut löschen wollen, haben Sie zwei Möglichkeiten: entweder Sie setzen seinen Wert auf "" (leere Zeichenkette), oder - und das ist sauberer - Sie arbeiten mit der Methode removeAttribute() des node-Objekts.
Seit der DOM-Version 2.0 wird auch geregelt, wie auf Stylesheet-Angaben zugegriffen wird. Dabei hat man sich weitgehend an das seinerzeit von Microsoft eingeführte style-Objekt angelehnt.
Das folgende Beispiel zeigt, wie Sie mit Hilfe der DOM-Technik typisches, klassisches dynamisches HTML mit Bewegung positionierter Elemente schreiben. Dazu dient die Möglichkeit, Elemente mit Hilfe von CSS-Eigenschaften absolut zu positionieren.
Innerhalb des body-Bereichs werden im Beispiel einfach nur drei div-Bereiche ohne weitere Formatierungen notiert. Die ersten beiden enthalten jeweils eine kleine Grafik - ichkreis1.gif ist ein roter Punkt, ichkreis2.gif ein blauer Punkt. Beide Grafiken haben einen transparenten Hintergrund, was wichtig ist, da sich die Punkte im späteren Verlauf des Geschehens öfter überlagern werden.
Im einleitenden <body>-Tag ist der Event-Handleronload notiert. Dieser tritt in Aktion, sobald die Datei vollständig im Browser geladen ist. Dann wird die Funktion Init() aufgerufen, die im Dateikopf notiert ist. Diese Funktion speichert zunächst einmal Referenzen auf die drei div-Elemente in den drei Variablen rp, bp und ich, um die darauffolgenden Zugriffe auf diese Elemente zu verkürzen. Da alle drei div-Bereiche ein id-Attribut haben, ist der Zugriff auf den entsprechenden Elementknoten mit getElementById("roterPunkt") usw. möglich. Anschließend lässt sich mit rp usw. genauso arbeiten, als wenn man jedesmal wieder document.getElementById("roterPunkt") notieren würde.
Über die Variablen rp, bp und ich ist dann auch das style-Objekt ansprechbar. Die Funktion Init() stattet die drei div-Bereiche erst einmal mit anfänglichen CSS-Eigenschaften aus. Alle drei Bereiche werden mit style.position = "absolute" absolut positioniert. Die linke obere Ecke jedes Bereichs wird mit style.left und style.top bestimmt. Der Inhalt des ich-Bereichs, also das Wort ICH, wird groß und auffällig formatiert.
Am Ende ruft die Funktion Init() die beiden anderen Funktionen rpKreis() und bpKreis() auf. Jede dieser beiden Funktionen kontrolliert die Kreisbewegung jeweils eines der beiden Punkte, indem sie letztlich die linke obere Ecke des div-Bereichs, der die jeweilige Grafik enthält, neu berechnet. Dabei kommen die Kreisfunktionen für Sinus (Math.sin()) und Cosinus (Math.cos()) zum Einsatz. Am Ende ruft jede der beiden Funktionen sich selber rekursiv mit window.setTimeout() wieder auf, um die nächste Position des div-Bereichs mit der Grafik zu setzen. Die Variablen wie bpGrad, bpGeschw usw., mit denen diese Funktionen arbeiten, wurden zuvor im globalen Bereich des Scripts initialisiert.
Dynamisches HTML nach DOM bedeutet nicht nur, auf bereits in HTML vorhandene Elemente zuzugreifen, sondern auch neue zu erzeugen und in den Strukturbaum einzuhängen. Wie das funktioniert, zeigt das folgende Beispiel. Es stellt einen primitiven HTML-Editor dar.
Das Beispiel enthält im sichtbaren HTML-Bereich ein Formular mit einer Auswahlliste, einem Eingabefeld und einem Klick-Button. Unterhalb ist noch ein div-Bereich notiert, der jedoch noch keinen konkreten Inhalt hat. In der Auswahlliste des Formulars kann der Anwender einen HTML-Elementtyp auswählen - in den value-Attributen der option-Elemente sind die tatsächlichen HTML-Elementnamen der jeweiligen Auswahl gespeichert. Im Eingabefeld des Formulars kann der Anwender den Textinhalt für das ausgewählte Element eingeben. Wenn er dann auf den Button klickt, wird die Funktion Hinzufuegen() aufgerufen, die im Dateikopf in einem JavaScript-Bereich notiert ist.
Dort wird erst einmal der lange, umständliche Ausdruck document.Formular.Elementtyp.options[document.Formular.Elementtyp.selectedIndex].value in der Variablen Typ gespeichert. Der lange Ausdruck bzw. die Variable speichert den vom Anwender im Formular ausgewählten HTML-Elementtyp, also z.B. "h1" oder "p".
Mit document.createElement(Typ) wird dann ein leeres, neues Element vom Typ Typ erzeugt, also je nach Wert der Variablen Typ z.B. ein h1-Element oder ein p-Element. Damit wird das Element aber noch nicht angezeigt. document.createElement() erzeugt lediglich den Elementknoten, hängt ihn aber noch nicht in den Strukturbaum des Dokuments ein. Im Folgenden muss das Script zwischen Elementen unterscheiden, die einen Textinhalt haben, und solchen, die keinen haben. Das hr-Element für Trennlinien, das der Anwender ebenfalls auswählen kann, kann keinen Textinhalt haben. Alle anderen auswählbaren Elemente dagegen können Textinhalt haben. Durch eine if-Anweisung wird daher abgefragt, ob die Variable Typ den Wert "hr" besitzt. Nur wenn dies nicht der Fall ist, wird der Textknoten mit der Methode document.createTextNode() erzeugt. Als Parameter erhält diese Methode den Text, den der Anwender ins Eingabefeld des Formulars eingegeben hat. Danach wird der Textknoten an den erzeugten Elementknoten gehängt, sodass der Text letztendlich auch sichtbar ist. In allen Fällen wird schließlich das neu erzeugte und in der Variablen Elementknoten gespeicherte Element in den Dokumentbaum eingehängt.
Für alle "Einhäng"-Vorgänge wird die Methode appendChild() des node-Objekts verwendet. Anwendbar ist die Methode auf ein Knotenobjekt, das Kindknoten haben darf. Also beispielsweise Elementknoten. Als Parameter erwartet die Methode einen Knoten, der als Kindknoten eingehängt werden soll.
Wenn im Beispiel also steht: Elementknoten.appendChild(Textknoten);
Dann ist Elementknoten eine Variable, in der zuvor durch createElement() ein Elementobjekt erzeugt wurde, und Textknoten ist eine Variable, die zuvor durch Aufruf von createTextNode() einen Textknoten gespeichert hat.
Mit der Anweisung document.getElementById("User").appendChild(Elementknoten) wird auf den zunächst leeren div-Bereich im Dokument zugegriffen. Diesem Element wird der neu erzeugte Elementknoten hinzugefügt.
Die Normierung des Event-Handling im DOM war zum Redaktionszeitpunkt dieses Dokuments noch nicht abgeschlossen - so fehlte beispielsweise noch die Implementierung von Tastaturereignissen. Der Internet Explorer interpretiert auch noch keine Events nach DOM-Syntax, Netscape 6 dagegen schon. Das folgende Beispiel zeigt das Prinzip, nach dem Event-Handling nach DOM-Syntax funktioniert.
<html><head><title>Test</title>
<script type="text/javascript">
function Ausgeben(Text) {
var LogEintrag = document.createElement("li");
var neuerText = document.createTextNode(Text);
LogEintrag.appendChild(neuerText);
document.getElementById("Log").appendChild(LogEintrag);
}
function handleEingabefeldClick (Event) {
var Text = "Sie haben in das Eingabefeld geklickt. " +
"Event-Typ = " + Event.type + ", " +
"Event-Target-Elementname = " + Event.target.nodeName + ".";
Ausgeben(Text);
}
function handleBereichMove (Event) {
var Text = "Sie haben die Maus im Bereich bewegt. " +
"X-Position = " + Event.clientX + ", " +
"Y-Position = " + Event.clientY + ".";
Ausgeben(Text);
}
function handleBereichClick (Event) {
var Text = "Sie haben in den Bereich geklickt. " +
"X-Position = " + Event.clientX + ", " +
"Y-Position = " + Event.clientY + ".";
Ausgeben(Text);
}
function Init () {
document.getElementById("Eingabe").addEventListener("click", handleEingabefeldClick, false);
document.getElementById("Bereich").addEventListener("mousemove", handleBereichMove, false);
document.getElementById("Bereich").addEventListener("click", handleBereichClick, false);
}
</script>
<style type="text/css">
#Formular { background-color:#EEEEEE; padding:10px }
#Bereich { background-color:#FF0000; color:#FFFFFF; font-weight:bold; width:100px; }
#Log { font-family:Arial,sans-serif; font-size:80%; }
</style>
</head><body onload="Init()">
<form name="Formular" id="Formular" action="">
<input type="text" name="Eingabe" id="Eingabe" size="50">
</form>
<div id="Bereich">Ein Bereich</div>
<ol id="Log">
<li>Ereignisliste</li>
</ol>
</body></html>
Erläuterung:
Im sichtbaren Bereich der HTML-Datei ist ein Formular mit einem Eingabefeld notiert, ferner ein div-Bereich, und schließlich eine leere, nummerierte Liste. Im einleitenden <body>-Tag ist der Event-Handler onload notiert, der jedoch noch nichts mit Event-Handling nach DOM-Syntax zu tun hat. Dort wird einfach erst mal die Funktion Init() aufgerufen, die im Dateikopf notiert ist.
Innerhalb der Funktion Init() geht es jedoch in Sachen DOM-Event-Handling zur Sache. Event-Handling besteht beim DOM zunächst einmal darin, für einen beliebigen Knoten im Dokument eine Ereignisüberwachung zu registrieren. Dazu gibt es die Methode addEventListener(). Mit dem Teil davor, im Beispiel etwa document.getElementById("Eingabe"), wird derjenige Knoten im Dokument angesprochen, für den eine Ereignisüberwachung registriert werden soll. Im Beispiel der Funktion Init() werden insgesamt drei Ereignisüberwachungen angestoßen: eine für das Eingabefeld des Formulars, und zwei für den div-Bereich.
Die Methode addEventListener() erwartet drei Parameter. Der erste Parameter gibt an, welcher Ereignistyp überwacht werden soll. Bei Mausereignissen sind das weitgehend die aus dem JavaScript-Objekt event bekannten Ereignistypen wie click, mouseover, mousedown, mouseup, mousemove. Dazu kommen im DOM Event-Typen wie DOMFocusIn (Knoten erhält den Fokus), DOMFocusOut (Knoten verliert den Fokus), DOMActivate (Knoten wird durch Mausklick oder Tastendruck aktiviert), sowie anwenderunabhängige Ereignisse wie DOMSubtreeModified (Strukturbaum geändert), DOMNodeInserted (Knoten in Strukturbaum eingefügt) oder DOMNodeRemoved (Knoten aus Strukturbaum entfernt). Der Name des gewünschten Ereignistyps muss bei der Parameterangabe in Anführungszeichen stehen.
Der zweite Parameter, den addEventListener() erwartet, ist der Name einer Funktion, die beim Eintreten des Events aufgerufen werden soll. Der Name der Funktion wird ohne Anführungszeichen angegeben. Die angegebene Funktion bekommt automatisch ein Ereignisobjekt übergeben und kann dann damit anfangen was sie will. Dazu weiter unten mehr.
Die Ereignisse werden beim DOM-Event-Handling in drei Phasen verarbeitet: 1. die Capture-Phase (engl. einfangen), 2. die Target-Phase (engl. Ziel) und 3. die Bubbling-Phase (engl. aufsteigen). In der Capture-Phase läuft das Ereignis von dem äußersten Element des DOM-Baums (dem html-Element) zu dem Ziel-Element, für das das Ereignis bestimmt ist. Auf diesem Weg werden alle Event-Handler ausgelöst, die für die passierten Elemente für die Capture-Phase registriert sind. In der Target-Phase werden alle Event-Handler ausgelöst, die für das Ziel-Element registriert sind. In der Bubbling-Phase schließlich wandert das Ereignis schließlich vom Ziel-Element über dessen Eltern-Elemente zurück zum äußersten Element. In dieser Phase werden alle Event-Handler ausgelöst, die für die passierten Elemente für die Bubbling-Phase registriert sind. Nicht bei allen Ereignistypen steigen die Ereignisse auf (Bubbling).
Mit dem dritten Parameter von addEventListener() können Sie bestimmen, in welcher Phase ein Event-Handler aktiv wird. Mit true wird die Handler-Funktion in der Capture-Phase aufgerufen, mit false in der Target- oder Bubbling-Phase. In der Regel sollten Sie false wählen. Dieses Verhalten stellt einen Kompromiss zwischen der Vererbung bei Events (Event-Bubbling) bei dem älteren DHTML-Modell von Microsoft und der Funktion captureEvents() bei dem älteren DHTML-Modell von Netscape dar.
Für jedes Ereignis, das Sie überwachen wollen, benötigen Sie eine Funktion, die auf das Ereignis reagiert - die sogenannte Handler-Funktion. Es ist die Funktion mit dem Namen, der bei addEventListener() als zweiter Parameter angegeben wird. Im obigen Beispiel sollen drei Ereignisse überwacht werden. Deshalb gibt es drei ähnliche Funktionen - mit den Namen handleEingabefeldClick(), handleBereichMove() und handleBereichClick(). Alle drei Funktionen bekommen beim automatischen Aufruf, der beim Eintritt des Ereignisses passiert, das Ereignis als Objekt übergeben. Die Funktionen im Beispiel erwarten deshalb einen Parameter Event. Dieses Ereignisobjekt besitzt Eigenschaften, die Informationen zum Ereignis bereitstellen, und Methoden, mit denen sich die Ereignisverarbeitung steuern lässt. Bei Mausereignissen gibt es beispielsweise Eigenschaften wie clientX (Anzahl Pixel vom linken Rand des sichtbaren Knotenbereichs), clientY (Anzahl Pixel vom oberen Rand des sichtbaren Knotenbereichs), screenX (Anzahl Pixel vom linken Bildschirmrand) oder screenY (Anzahl Pixel vom oberen Bildschirmrand).
Im Beispiel stellen die Funktionen, die ein Ereignis überwachen, einfach nur einen Text zusammen und rufen dann die Funktion Ausgeben() mit dem zusammengestellten Text auf. Die Funktion Ausgeben() erzeugt zuerst mit document.createElement("li") ein neues HTML-Element vom Typ li. Dann erzeugt sie mit document.createTextNode(Text) einen neuen Textknoten mit dem übergebenen Text. Schließlich hängt sie den Textknoten mit appendChild() als Kindknoten in den erzeugten li-Elementknoten ein, und diesen in die im Dokument notierte nummerierte Liste. Auf diese Weise füllt sich die nummerierte Liste dynamisch mit jedem Ereignis, das erkannt wurde.
Beachten Sie:
Noch nicht alle Browser, die prinzipiell Ereignisüberwachung nach DOM-Syntax unterstützen, führen Handler-Funktionen, die für die Capture-Phase registriert sind, korrekt aus. Solche Handler-Funktionen werden nur aktiviert, wenn sich das Ziel-Element des Ereignisses unterhalb des Elements befindet, bei dem die Handler-Funktion für die Capture-Phase registriert wurde. Mozilla Firefox und Safari rufen die Funktion irrtümlicherweise trotzdem auf.
Im Beispiel wurde die herkömmliche Methode onload="Init()" verwendet, um die Funktion Init() beim abgeschlossenen Laden der HTML-Datei aufzurufen, um darin die restliche Ereignisüberwachung zu starten. Diese ist theoretisch durch folgende Konstruktion ersetzbar:
document.addEventListener("load", Init, false);
Allerdings passiert im Mozilla Firefox 1.5 kein load-Ereignis am document-Objekt, obwohl dies im DOM-Standard so vorgeschrieben ist. Eine Alternative wäre die Verwendung von window.addEventListener("load", Init, false). Dies wird zwar breiter unterstützt, allerdings liegt das window-Objekt außerhalb des DOM-Standards.
Der Internet Explorer ab Version 4.x erlaubt es, in kontrollierter Form Daten aus einer externen Datenquelle zu holen und in HTML-Elementen dynamisch anzuzeigen. So ist beispielsweise eine Tabelle denkbar, in der sich der Anwender bei jedem Klick auf einen entsprechenden Button die Bundesliga-Endtabellen der Spielsaisons von 1960 bis heute anzeigen lassen kann. Bei jedem Klick werden aus einer externen Datei eine Reihe von Daten ausgelesen und dynamisch in die Anzeigetabelle übernommen.
Microsoft hat das Konzept der Datenanbindung sehr flexibel ausgelegt. Es gibt diverse Möglichkeiten, auf externe Datenquellen zuzugreifen. Der Zugriff auf eine einfache Textdatei ist nur eine davon. Es besteht ebenso die Möglichkeit, etwa über die Datenbankabfragesprache SQL auf eine Datenbank zuzugreifen, die SQL-Befehle verarbeiten kann. Für die verschiedenen Möglichkeiten der Datenanbindung gibt es verschiedene Datenmodelle. Für jedes der Datenmodelle gibt es ein bestimmtes ActiveX-Control oder ein Java-Applet, das Sie in Ihrer HTML-Datei ansprechen müssen, um die Datenanbindung damit zu realisieren. Die Datenmodelle und deren Einbindung in HTML werden auf dieser Seite vorgestellt.
Die Vorteile der Datenanbindung liegen auf der Hand: Daten können mit einer dafür geeigneten Anwendung gepflegt und gespeichert werden. Eine HTML-Datei kann auf immer aktuelle Daten zugreifen, ohne selbst geändert werden zu müssen. Für das "Holen" der Daten gibt es kein vorgeschriebenes Protokoll. Die Datenanbindung funktioniert also auf allen Umgebungen, ob auf einem WWW-Server, lokal auf einer PC-Festplatte oder auf einer CD-ROM (zumindest auf das einfachste Datenmodell trifft dies zu). Es ist kein zusätzliches CGI-Script erforderlich, das als Vermittler zwischen HTML-Datei und Datenbestand für jede Interaktion zwischen Anwender und Datenbank immer wieder aufgerufen werden muss. Das Know How hat der Browser, und die Steuerung der Datenanbindung wird direkt in der HTML-Datei notiert. Durch dynamisches Austauschen der Inhalte von HTML-Elementen, in denen die Daten angezeigt werden, ist kein neuer Aufbau der WWW-Seite erforderlich.
Aus heutiger Sicht muss das Modell der client-seitigen Datenanbindung, das Microsoft mit dem Internet Explorer 4.0 eingeführt hat, jedoch kritisch betrachtet werden. Der Grund ist einerseits, dass es auf extrem proprietären Konzepten beruht, vor allem was die Einbindung der allgemein unbeliebten ActiveX-Controls betrifft. Und andererseits haben sich Web-Server mittlerweile so stark durchgesetzt, dass es in in den meisten Fällen - auch lokal - sinnvoller ist, server-seitige CGI-Scripts zum Handling der Datenverarbeitung einzusetzen.
Hinweis:
Die Erläuterungen zu den Datenmodellen weiter unten auf dieser Seite sind zum Teil sehr technisch. Das ist leider nicht zu ändern, da die Materie ziemlich komplex ist. Die Erläuterungen zu den Datenmodellen richten sich auch nur an Spezialisten, die wissen, was mit den entsprechenden Begriffen anzufangen ist.
Die hier beschriebene Vorgehensweise erläutert, wie Sie in einer Tabelle einzelne Datensätze aus einer externen Textdatei anzeigen können. Dabei wird das Datenmodell: Tabular Data Control (TDC) verwendet. Mit Hilfe von Buttons kann der Anwender den nächsten oder vorhergehenden Datensatz in die Tabelle laden.
Beispiel Teil 1 - externe Datei adressen.txt mit Daten:
Die externe Datei ist in diesem Beispiel eine einfache Textdatei, z.B. eine Datei mit dem Namen adressen.txt. Die Datei ist so aufgebaut, dass jede Zeile einen Datensatz darstellt. Die einzelnen Felder eines Datensatzes werden in diesem Beispiel durch das Zeichen "|" getrennt. Es könnte auch ein anderes Zeichen sein. Das Zeichen "|" wurde hier gewählt, weil es sehr selten ist und in den Daten selbst nicht vorkommt. In der ersten Zeile der Datei stehen keine Daten, sondern Feldnamen. Der dritte Feldname lautet beispielsweise Strasse. In den eigentlichen Datenzeilen darunter stehen dann in entsprechender Reihenfolge die Daten. So hat das dritte Feld der ersten Datenzeile den Wert Pfisterstr.11. Dies ist also ein Wert für den in der ersten Zeile an dritter Stelle vergebenen Feldnamen Strasse.
Textdateien dieser Art sind nicht besonders komfortabel, wenn man sie selbst in einem Texteditor bearbeiten will. Doch solche Textdateien lassen sich mit fast allen Tabellenkalkulations- und Datenbankprogrammen erzeugen. Meist ist dafür der Datentyp "kommabegrenzt" ("comma delimited") mit der Standard-Dateiendung .csv vorgesehen. Bessere Programme erlauben es dabei auch, ein selbst definierbares Feldbegrenzerzeichen zu vergeben.
Um eine externe Datenquelle in einer HTML-Datei nutzen zu können, müssen Sie zunächst die Quelle und diverse Angaben zu deren Aufbau notieren. Dazu brauchen Sie das <object>-Tag. In dem einleitenden <object>-Tag sind zwei Attribute erforderlich: Mit dem id-Attribut vergeben Sie einen Namen, unter dem Sie später auf die Daten zugreifen können. Der Name sollte passend sein, im obigen Beispiel etwa "Adressen". Als zweiten Parameter müssen Sie das ActiveX-Control referenzieren, dass den gesamten Zugriff auf die externe Datei abwickelt. Bei einfachen Textdateien mit zeilenweisen Datensätzen müssen Sie dabei immer die Angabe classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" notieren. Das ActiveX-Control mit dieser Identifikationsnummer ist im Lieferumfang des Internet Explorers ab Version 4.x enthalten - Sie brauchen sich um nichts weiter zu kümmern. Genau dabei liegt allerdings der Knackpunkt des gesamten Konzepts: ohne solche ActiveX-Controls läuft nichts.
Innerhalb des <object>-Tags notieren Sie Angaben zu Ort und Beschaffenheit der externen Datei.
Mit <param name="DataURL" können Sie die gewünschte Datei ansprechen. Im value-Attribut notieren Sie den Dateinamen. Wenn sich die Datei im gleichen Verzeichnis befindet, genügt der einfache Dateiname. Ansonsten gelten die gleichen Regeln wie bei Verweisen in HTML.
Mit <param name="UseHeader" value="true"> weisen Sie den Browser an, die erste Zeile der externen Datei nicht als Datenzeile zu interpretieren, sondern als Zeile für die Definition der Feldnamen.
Mit <param name="FieldDelim" geben Sie an, welches das Feldtrennzeichen sein soll. Im Beispiel ist dies das Zeichen "|".
Damit sind alle Voraussetzungen geschaffen, um die Daten aus der externen Datei dynamisch in HTML anzuzeigen. Die Anzeige der Daten erfolgt in einer Tabelle. Das einleitende <table>-Tag schafft die nötigen Voraussetzungen, um die Daten in kontrollierter Form anzuzeigen. Zunächst wird in der Tabelle mit dem id-Attribut ein Name vergeben (im Beispiel: Anzeigetabelle). Dieser Name wird bei den Buttons benötigt, die innerhalb der Tabelle das Blättern innerhalb der Datensätze ermöglichen.
Die nächste Angabe im <table>-Tag ist das datasrc-Attribut (data source, Datenquelle). Damit nehmen Sie Bezug auf die externe Datendatei. An dieser Stelle dürfen Sie jedoch nicht die Datendatei selbst angeben, sondern Sie müssen denjenigen Namen angeben, den Sie zuvor im <object>-Tag im id-Attribut vergeben haben. Und zwar mit einem vorangestellten Gatterzeichen #. Dadurch stellen Sie den Bezug zwischen Tabelle und Datenquelle her. Es werden dann alle Parameter berücksichtigt, die Sie innerhalb des <object>-Tags angegeben haben.
Ebenfalls wichtig das Attribut datapagesize (Datenseitengröße) im <table>-Tag. Damit geben Sie an, wie viele Datensätze aus der externen Datei gleichzeitig angezeigt werden sollen. Wenn Sie diese Angabe weglassen, macht der Internet Explorer die Tabelle automatisch so lang, dass alle Datensätze auf einmal darin dargestellt werden. Im obigen Beispiel wird datapagesize="1" angegeben. Dadurch wird immer genau ein Datensatz angezeigt.
Innerhalb der Tabelle können Sie erkennen, wie ein Datensatz aus der externen Datenquelle darin angezeigt wird. Die Tabelle selbst können Sie nach Ihren Wünschen frei gestalten. Wichtig ist nur zu wissen, wie der Bezug zu einem Datensatz der externen Datei hergestellt wird. Im obigen Beispiel geschieht dies innerhalb entsprechender Tabellenzellen mit Hilfe des <span>-Tags. Mit einem, Befehl wie <span datafld="PLZ"></span> weisen Sie den Browser an, in der betreffenden Tabellenzelle den aktuellen Inhalt des Feldes "PLZ" aus der externen Datenquelle anzuzeigen (datafld = data field = Datenfeld). Dabei muss der Wert des Attributs datafld mit dem Feldnamen übereinstimmen, den Sie in der ersten Zeile der externen Datendatei vergeben haben. Beachten Sie dabei auch die exakte Schreibweise.
Neben dem Attribut datafld können Sie in so einem Datenanzeigebereich auch noch das Attribut dataformatas (formatiere Daten als) notieren. Im obigen Beispiel wird davon kein Gebrauch gemacht. Benutzen Sie dataformatas, wenn die Daten in der externen Datei selbst HTML-Elemente enthalten. Mit dataformatas="html" erzwingen Sie dann, dass die Elemente aus der externen Datei als HTML-Elemente interpretiert werden.
Da im obigen Beispiel mit datapagesize="1" festgelegt wurde, dass immer nur ein Datensatz angezeigt wird, erscheint in der Tabelle zunächst der Inhalt der ersten Datenzeile der externen Datei. Natürlich soll der Anwender nun in den Datensätzen blättern können. Dazu werden Buttons zum Vor- und Zurückblättern definiert. Im Beispiel befinden sich diese Buttons in der ersten Tabellenzeile. Sie könnten aber auch an einer anderen Stelle stehen.
Mit <input type=button value=" < "
onclick="document.all.Anzeigetabelle.previousPage();"> wird ein Button definiert, bei dessen Anklicken der vorhergehende Datensatz aufgerufen wird. Mit document.all.Anzeigetabelle greifen Sie dabei auf die Tabelle zu, in der die Daten angezeigt werden (Anzeigetabelle ist dabei der Name, der in der Tabelle mit dem id-Attribut vergeben wurde). Mit <input type="button" value=" > " onclick="document.all.Anzeigetabelle.nextPage();"> wird der Button definiert, der zum nächsten Datensatz springt. Beachten Sie, dass Sie nicht kontrollieren müssen, ob der Anwender gerade den ersten oder letzten Datensatz anzeigt. Es gibt keine Fehlermeldungen, wenn der Anwender versucht, einen nicht vorhandenen Datensatz aufzurufen. Der Button hat dann einfach keine Wirkung.
In diesem Beispiel wird gezeigt, wie Sie dem Anwender ermöglichen können, mit Hilfe eines Suchbegriffes nur diejenigen Datensätze anzuzeigen, in denen der gesuchte Begriff vorkommt. Das Beispiel zeigt auch, wie Sie mit Hilfe von Scripts auf die HTML-Elemente zur Datenanbindung zugreifen können.
Beispiel Teil 1 - externe Datei woerterbuch.txt mit Daten:
Die Datendatei dieses Beispiels zeigt ein mehrsprachiges Fachwörterbuch. In der ersten Zeile werden die Sprachen definiert. Unterhalb davon stehen die Wörter in den jeweiligen Sprachen. Die Einträge zu den Sprachen sind durch Semikola (;) getrennt. Wenn in einer Sprache mehrere Wörter in Frage kommen, werden diese durch Kommata getrennt, so wie in der zweiten Zeile beim italienischen Wort für Rechner: computer, calcolatore.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
function Suchen () {
var Datensaetze = 1000;
document.all.Anzeigetabelle.style.display = "none";
var Suchausdruck = "";
var Suchbegriffe = 0;
if (document.Eingabe.SuchDeu.value != "") {
Suchausdruck = Suchausdruck + "Deutsch = " + document.Eingabe.SuchDeu.value;
Suchbegriffe++;
}
if (document.Eingabe.SuchEng.value != "") {
if (Suchbegriffe > 0) {
Suchausdruck = Suchausdruck + " & Englisch = " + document.Eingabe.SuchEng.value;
} else {
Suchausdruck = Suchausdruck + "Englisch = " + document.Eingabe.SuchEng.value;
}
Suchbegriffe++;
}
if (document.Eingabe.SuchFra.value != "") {
if (Suchbegriffe > 0) {
Suchausdruck = Suchausdruck + " & Franzoesisch = " + document.Eingabe.SuchFra.value;
} else {
Suchausdruck = Suchausdruck + "Franzoesisch = " + document.Eingabe.SuchFra.value;
}
Suchbegriffe++;
}
if (document.Eingabe.SuchIta.value != "") {
if (Suchbegriffe > 0) {
Suchausdruck = Suchausdruck + " & Italienisch = " + document.Eingabe.SuchIta.value;
} else {
Suchausdruck = Suchausdruck + "Italienisch = " + document.Eingabe.SuchIta.value;
}
Suchbegriffe++;
}
if (document.Eingabe.SuchSpa.value != "") {
if (Suchbegriffe > 0) {
Suchausdruck = Suchausdruck + " & Spanisch = " + document.Eingabe.SuchSpa.value;
} else {
Suchausdruck = Suchausdruck + "Spanisch = " + document.Eingabe.SuchSpa.value;
}
Suchbegriffe++;
}
document.all.Begriffe.object.Filter = Suchausdruck;
document.all.Begriffe.Reset();
document.all.Anzeigetabelle.dataSrc = "#Begriffe";
if (document.all.Begriffe.recordset.recordCount < Datensaetze) {
document.all.Anzeigetabelle.dataPageSize = Begriffe.recordset.recordCount;
document.all.Treffer.innerText = Begriffe.recordset.recordCount + " Suchtreffer!";
document.all.Anzeigetabelle.style.display = "block";
} else {
document.all.Treffer.innerText = "0 Suchtreffer!";
}
}
</script>
</head>
<body>
<object id="Begriffe" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="woerterbuch.txt">
<param name="UseHeader" value="true">
<param name="Filter" value="">
<param name="FieldDelim" value=";">
</object>
<p>Die durchsuchbare Datenbank enthält 1000 Einträge. Suchen Sie nach
Begriffen in einer oder mehreren Sprachen. Bei der Suche in mehreren Sprachen
werden die Eingaben logisch durch UND verknüpft. Sie dürfen auch das
Wildcard-Zeichen <b>*</b> für Teilausdrücke verwenden. Suchen Sie z.B. mal im Feld
(Deutsch) nach <b>Arbeits*</b> oder im Feld (Italienisch) nach
<b>*ore</b> oder im Feld (Englisch) nach <b>*computer</b>.</p>
<form name="Eingabe" action="">
Suche nach:<br>
<input name="SuchDeu" type="text" width="40"> (Deutsch)<br>
<input name="SuchEng" type="text" width="40"> (Englisch)<br>
<input name="SuchFra" type="text" width="40"> (Franzoesisch)<br>
<input name="SuchIta" type="text" width="40"> (Italienisch)<br>
<input name="SuchSpa" type="text" width="40"> (Spanisch)<br>
<input type="button" style="width:150px; height:25px;" value="Suche starten" onclick="Suchen()">
</form>
<table border="1" cellpadding="1" cellspacing="0"><tr><td>
<table width="100%">
<tr>
<td valign="top" colspan="5">
<span id="Treffer" style="color:#0000CC; font-weight:bold;"> </span>
</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Deutsch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Englisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Französisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Italienisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Spanisch:</b></td>
</tr>
</table>
<table id="Anzeigetabelle" style="display:none" width="100%">
<tr>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Deutsch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Englisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Franzoesisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Italienisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Spanisch"></span></td>
</tr>
</table>
</td></tr></table>
</body>
</html>
Erläuterung:
Das Beispiel zeigt die vollständige HTML-Datei zur Realisierung einer durchsuchbaren Datenbank. Innerhalb der HTML-Datei wird wie im Beispiel: Datei dynamisch in Tabelle einbinden wieder das <object>-Tag notiert, um die Verbindung zu der externen Datendatei herzustellen. Es wird jedoch ein neuer Parameter angegeben: <param name="Filter" value="">
Mit dem Parameter Filter können Sie die Datensätze, die aus der Datendatei "geholt" werden, begrenzen. Dazu können Sie im value-Attribut Einschränkungskriterien angeben. Bei der Objektdefinition im obigen Beispiel wird value="" notiert. Das bedeutet, es gibt keine Einschränkungen. Alle Datensätze werden gefunden.
In dem längeren Script, das im Kopf der HTML-Datei steht, wird der Wert für Filter dynamisch verändert. Dadurch wird die Anzeige auf bestimmte Datensätze eingeschränkt, nämlich solche, die den Filterkriterien entsprechen.
Die Kriterien für den Filter soll der Anwender durch seine Suchanfrage selbst bestimmen können. Im obigen Beispiel wird dazu unterhalb des <object>-Tags ein Formular definiert (<form name="Eingabe" action="">). Das Formular hat fünf Eingabefelder, eines für jede der fünf Sprachen des mehrsprachigen Wörterbuchs. Mit einem anklickbaren Button kann der Anwender die Suche abschicken. Beim Anklicken des Buttons wird die Funktion Suchen() aufgerufen, die in dem JScript-Bereich im Dateikopf definiert ist (onclick="Suchen()").
Innerhalb der Funktion Suchen() wird zunächst eine Variable Datensaetze mit einem Wert vorbelegt (1000). Das empfiehlt sich bei größeren Datenbeständen. Denn per Voreinstellung liefert der Internet Explorer, wenn er keine Datensätze findet, die dem Suchkriterium entsprechen, alle Datensätze zurück. Angenommen, Sie haben 5000 Datensätze. Dann würde eine Tabelle mit 5000 Zeilen angezeigt. Da dies im Aufbau ziemlich lange dauert, ist eine Begrenzung sinnvoll.
Die Variable Suchausdruck soll die Anwenderkriterien zum Durchsuchen des Datenbestandes aufnehmen. Dabei ist es erforderlich, die Angaben aus den Formularfeldern in eine Zeichenkette zu konvertieren, die den Regeln für den Parameter Filter entsprechen.
Folgende wichtige Regeln gelten für Werte, die bei Filter erlaubt sind (diese Regeln gelten sowohl bei Wertzuweisungen innerhalb des <object>-Tags als auch bei dynamischen Wertzuweisungen innerhalb von Scripts):
Mit Feldname = Wert werden nur Datensätze gefunden, bei denen das Feld Feldname exakt den Wert Wert enthält und nicht mehr und nicht weniger. Bei Name = Meyer werden also nur Meyer's gefunden, keine Meyerbohm's.
Mit Feldname <> Wert werden Datensätze gefunden, bei denen der Wert Wert im Feld Feldname vorkommt - er kann auch exakt damit übereinstimmen. Bei Name <> Meyer werden also Meyer's und Meyerbohm's gefunden.
Mit Feldname > Wert werden Datensätze gefunden, bei denen der Wert von Feldname größer ist als Wert. Bei Name > Y werden also nur Namen gefunden, die mit Z anfangen.
Mit Feldname >= Wert werden Datensätze gefunden, bei denen der Wert von Feldname größer oder gleich ist im Vergleich zu Wert. Bei Name >= Y werden also nur Namen gefunden, die mit Y oder Z anfangen.
Mit Feldname < Wert werden Datensätze gefunden, bei denen der Wert von Feldname kleiner ist als Wert. Bei Name < D werden also nur Namen gefunden, die mit A,B oder C anfangen.
Mit Feldname <= Wert werden Datensätze gefunden, bei denen der Wert von Feldname kleiner oder gleich ist im Vergleich zu Wert. Bei Name <= D werden also Namen gefunden, die mit A,B,C oder D anfangen.
An jeder Stelle ist ein Platzhalterzeichen erlaubt. Dies ist ein Sternzeichen (*). Es steht für kein, eines oder beliebig viele Zeichen.
Sie können auch zwei oder mehrere solcher einfachen Ausdrücke mit den Zeichen & (für UND) oder | (für inklusives ODER) logisch verknüpfen. Wenn Sie mehrere Ausdrücke verknüpfen und dabei sowohl UND also auch ODER verwenden, müssen Sie Klammern verwenden, um eine eindeutige Bewertung des gesamten Kriteriums sicherzustellen. Ein komplexer Ausdruck dieser Art ist etwa Name > M & PLZ = 8*.
Im obigen Script wird mit diversen if-Abfragen aus den Eingabefeldern des Formulars ein gültiger Zuweisungswert für Filter konstruiert. Dabei wird nur die einfachste Bedingung mit dem Istgleichzeiten eingesetzt. Da der Anwender auch selbst das Sternzeichen als Platzhalterzeichen in einem Eingabefeld eingeben kann, genügt diese einfache Suche für viele Fälle. Wenn Sie dem Anwender komplexere Suchabfragen ermöglichen wollen, müssen Sie diesen Teil des Scripts entsprechend aufwendiger gestalten.
Im unteren Teil der Funktion Suchen() steht dann der Befehl: document.all.Begriffe.object.Filter = Suchausdruck;
Damit wird dem Parameter Filter des <object>-Tags der Suchausdruck zugewiesen, der zuvor ermittelt und in der Variablen Suchausdruck gespeichert wurde.
Der nächste Befehl ist ebenfalls von entscheidender Bedeutung: document.all.Begriffe.Reset();
Damit veranlassen Sie den Browser, die Anzahl der anzuzeigenden Datensätze neu zu ermitteln. Da mittlerweile ein Filter bestimmt wurde, findet der Browser nun nur noch Datensätze, die den Bedingungen des Filters entsprechen.
Auf die übrigen Anweisungen des Scripts und die Elemente in der HTML-Datei wird hier nicht näher eingegangen. Es handelt sich dabei um einfaches dynamisches HTML nach den Regeln des Internet Explorers 4.x.
Im Beispiel: Datei dynamisch in Tabelle einbinden werden die externen Daten jeweils in einem span-Element angezeigt. Es gibt eine Reihe weiterer HTML-Elemente, in denen Sie Daten aus Datenfeldern externer Datenquellen anzeigen können. In anderen als diesen Elementen ist die Anzeige externer Daten nicht möglich. Folgende HTML-Elemente sind erlaubt:
Verweise mit <a>...</a>:
Angenommen, Sie haben eine externe Textdatei verweis.txt mit folgenden Zeilen: URL,Verweistext http://de.yahoo.com/,Yahoo Suchdienst
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden: <object id="Verweis" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="verweis.txt"> <param name="UseHeader" value="true"> <param name="FieldDelim" value=","> </object>
Danach können Sie folgenden Verweis konstruieren: <a datasrc="#Verweis" datafld="URL"><span datafld="Verweistext" datasrc="#Verweis"></span></a>
Indem Sie <a datafld="..."> notieren, wird der Inhalt, den das Datenfeld liefert, als Wert für das Attribut href bewertet (im Beispiel liefert das Feld "URL" diese Angaben). Innerhalb des Verweises wird dann mit Hilfe des span-Elements das andere Feld "geholt", nämlich der Verweistext. Solche Verweise machen beispielsweise Sinn, wenn Sie den gleichen Verweis an vielen verschiedenen Stellen auf Ihren Web-Seiten nutzen. Verweisziel und Verweistext sind dann zentral gespeichert und brauchen bei Änderungen nur in der kleinen Textdatei einmal geändert werden. Alle entsprechenden HTML-Verweise sind damit automatisch aktualisiert.
Buttons mit <button>...</button>:
Angenommen, Sie haben eine externe Textdatei daten.txt mit folgendem Aufbau und Beispieleinträgen: Zeile,Text 1,Das ist ein Test 2,mit einem Button 3,spannend - was?
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden: <object id="Daten" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="daten.txt"> <param name="UseHeader" value="true"> <param name="FieldDelim" value=","> </object>
Danach können Sie beispielsweise folgende Tabelle konstruieren: <table id="Anzeige" datasrc="#Daten" datapagesize="1"><tr><td> <form action=""><button datafld="Text" onclick="document.all.Anzeige.nextPage()"></button></form> </td></tr></table>
Damit springt der Anwender bei jedem Klick auf den Button einen Datensatz weiter, und die Button-Beschriftung nimmt den aktuellen Wert des Datenfeldes Text an.
Bereiche mit <div>...</div>:
Mit diesem HTML-Tag können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im Beispiel: Datei dynamisch in Tabelle einbinden mit dem span-Element gemacht wird. Der Unterschied zwischen <div>...</div> und <span>...</span> ist, dass das div-Element einen eigenen Anzeigeblock erzeugt, das span-Element dagegen nicht.
Angenommen, Sie wollen eine kleine Dia-Show programmieren. Dazu können Sie eine Textdatei daten.txt anlegen, die etwa folgenden Aufbau hat: Nummer,Bild 1,meinhaus.gif 2,meinboot.gif 3,meinauto.gif 4,undich.gif
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden: <object id="Daten" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="daten.txt"> <param name="UseHeader" value="true"> <param name="FieldDelim" value=","> </object>
Danach können Sie beispielsweise folgende Tabelle konstruieren: <table "id=Anzeige" datasrc="#Daten" datapagesize="1"><tr> <td> Bild <span datafld="Nummer"></span><br>
<input type=button value=" < "
onclick="document.all.Anzeige.previousPage();"> <input type=button value=" > "
onclick="document.all.Anzeige.nextPage();"> </td><td> <img datafld="Bild"> </td></tr></table>
Damit kann der Anwender mit den Blätterbuttons die Bilder durchblättern.
Frames mit <frame>:
Angenommen, Sie haben eine externe Textdatei besteseite.txt mit folgenden Zeilen: BesteSeite http://de.selfhtml.org/
Nun können Sie folgende HTML-Datei mit einem Frameset konstruieren: <html><head> <object id="UrlDerWoche" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="besteseite.txt"> <param name="UseHeader" value="true"> </object></head> <frameset rows="100,*"> <frame src="meine.htm"> <frame datasrc="#UrlDerWoche" datafld="BesteSeite"> </frameset> </html>
Auf diese Weise können Sie in einem Frame-Fenster eine Seite anzeigen, deren Zieladresse Sie in der separaten Textdatei pflegen. Wichtig ist, dass Sie das object-Element genau an der Stelle platzieren wie im Beispiel.
Eingebettete Frames mit <iframe>:
Siehe das Beispiel bei Frames. Der Unterschied ist, dass Sie das object-Element in einer normalen HTML-Datei platzieren. Mit einem Befehl wie: <iframe datasrc="#UrlDerWoche" datafld="BesteSeite"></iframe>
können Sie dann in der gleichen HTML-Datei in einer eingebetteten Fensterbox den Inhalt der Seite anzeigen, die in der Textdatei angegeben ist.
Labels mit <label>...</label>:
Das label-Element, das neu ist in HTML 4.0, erlaubt die Beschriftung eines Formularfeldes. Im Rahmen der Datenanbindung können Sie dieses HTML-Tag benutzen, wenn Sie die externen Daten in Formularfeldern ausgeben. Sie können dann dem label-Element, das Sie etwa einem Eingabefeld zuordnen, dynamisch den Feldnamen zuweisen, der in der externen Datendatei für dieses Feld definiert ist. Wenn sich der Feldname in der Datendatei dann ändert, wird er bei der Anzeige in der HTML-Datei automatisch aktualisiert. Beispiel: <label for="Vorname" datafld="prename"></label>
Dadurch wird dem Inhalt des label-Elements eines Formularfeldes der Feldname prename zugewiesen, der in der Datenbank definiert ist.
Lauftexte mit <marquee>...</marquee>:
Mit diesem HTML-Element, das mittlerweile allerdings als Musterbeispiel proprietärer HTML-Erweiterungen verschrieen ist, können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im Beispiel: Datei dynamisch in Tabelle einbinden mit dem span-Element gemacht wird. Der Unterschied zwischen <marquee>...</marquee> und <span>...</span> ist, dass das marquee-Element einen Lauftext erzeugt, das span-Element dagegen nicht.
Mit diesem HTML-Element können Sie beispielsweise innerhalb einer Tabelle externe Daten in editierbaren Formularfeldern ausgeben. Das ist besonders dann interessant, wenn geänderte Daten auch tatsächlich in die Datenquelle zurückgeschrieben werden können. Bei einfachen Textdateien ist das derzeit nicht möglich, wohl aber beim Datenmodell: Remote Data Service (RDS) und beim
Datenmodell: JDBC DataSource Applet.
Die Einbindung in HTML erfolgt ähnlich wie im Beispiel: Datei dynamisch in Tabelle einbinden, mit dem Unterschied, dass Sie die Regeln zum Einbinden des gewünschten Datenmodells beachten müssen. Notieren Sie im einleitenden <table>-Tag der Tabelle, in der Sie die Datensätze anzeigen, möglichst die Angabe datapagesize="1". Innerhalb der Tabellenzelle, in der Sie externe Daten auf diese Weise anzeigen wollen, können Sie dann notieren (angenommene Beispiele): <input type="text" datafld="Vorname">
oder: <input type="radio" name="Kunde" value="Bereits Kunde" datafld="BereitsKunde">
oder: <input type="checkbox" name="Zahlweise" value="Mastercard" datafld="Zahlungsweise">
Datenfelder, die in Eingabefeldern vom Typ <input type="text"> angezeigt werden, können normale Texte sein, wie etwa ein Name. Radio-Buttons und Checkboxen stellen dagegen andere Anforderungen. Ein Radio-Button wird bei der Anzeige dann aktiviert, wenn der aktuelle Feldinhalt in der Datenbank mit dem Wert des Attributs value übereinstimmt. Eine Checkbox wird dann markiert, wenn der betreffende Feldinhalt in der Datenbank 1, true oder einen beliebigen Inhalt mit mehr als einem Zeichen enthält. Wenn der Inhalt 0, false oder leer ist, wird die Checkbox nicht markiert.
Formularfelder mit <select>:
Dabei gelten die gleichen Bedingungen wie bei Formularfeldern vom Typ input. Wenn der Wert eines aktuellen Eintrags in der Datenbank mit einem der Werte übereinstimmt, die in der value-Angabe bei einem option-Element innerhalb der Auswahlliste definiert sind, ist diese Auswahl selektiert. Interessant ist diese Ausgabemöglichkeit von externen Daten wie bei anderen Formularfeldern nur, wenn auch ein Zurückschreiben geänderter Daten möglich ist. Bei Auswahllisten etwa kann ein neuer ausgewählter Wert als neuer Feldinhalt gespeichert werden. Der Internet Explorer unterstützt dabei nur die einfache Auswahl, Mehrfachauswahl nicht.
Andere Objekte mit <object>...</object>:
Mit dem object-Element können Sie genau so arbeiten wie mit dem img-Element. Der Unterschied ist, dass Sie beim img-Element auf Grafiken beschränkt sind, während Sie mit dem object-Element beliebige Multimedia-Dateien oder ActiveX-Controls einbinden können. So können Sie, analog zu dem Beispiel beim img-Element, anstelle einer "Dia-Show" eine "Musik-Show" programmieren, die zum Beispiel aus MIDI-Dateien besteht.
In der externen Textdatei notieren Sie die gewünschten MIDI-Dateien, und bei der Einbindung in HTML können Sie dann anstelle der Datenanbindung mit img so etwas notieren wie: <object datafld="Musik" width="0" height="0"></object>
(wobei "Musik" in der Textdatei mit den Daten als Feldüberschrift notiert sein muss).
Java-Applets mit <applet>...</applet>:
Sie können das Feature der Datenanbindung nutzen, um einen Parameter eines Java-Applets aus einer externen Datenquelle zu versorgen. Beispiel: <applet code="verzerr.class"> <param name="bild" datasrc="#aktuell" datafld="b_gates_bild"> </applet>
Dies ist das Datenmodell, wenn die externe Datenquelle eine einfache Textdatei ist, die in jeder Zeile einen Datensatz enthält, und bei der die einzelnen Datenfelder der Datensätze durch ein Begrenzerzeichen, zum Beispiel ein Komma, markiert sind. Geeignet ist dieses Datenmodell für kleinere Datenbestände mit bis zu ein paar tausend Datensätzen. Ein vollständiges Beispiel dafür finden Sie weiter oben im Abschnitt Beispiel: Datei dynamisch in Tabelle einbinden. Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie folgendes Objekt in der HTML-Datei notieren:
Um solche Daten einzubinden, verwenden Sie das im Internet Explorer 4.x eingebaute ActiveX-Control mit der ID 333C7BC4-460F-11D0-BC04-0080C7055A83. Innerhalb des <object>-Tags notieren Sie verschiedene Parameter, die für die Datenpräsentation wichtig sind. Folgende Parameter sind erlaubt:
Notation
Bedeutung
<param name="AppendData" value=>
Mit diesem Parameter können Sie angeben, ob in der Ausgabetabelle beim Blättern für jedes neue Datensatz-Set (entsprechend der Größe von datapagesize die vorhandenen Tabellenzellen überschrieben werden sollen, oder ob neue Tabellenzellen angehängt werden sollen. Mit value=true erzwingen Sie das Anhängen von Daten. Per Voreinstellung werden die vorhandenen Tabellenzellen überschrieben.
<param name="CaseSensitive" value=>
Mit diesem Parameter können Sie angeben, ob bei Vergleichen von Anwendereingaben mit Daten aus der Datenquelle Groß-/Kleinschreibung unterschieden werden soll. Nur interessant bei der Weiterverarbeitung von Daten mit Scripts. Per Voreinstellung wird Groß-/Kleinschreibung unterschieden. Mit value="false" können Sie die Fallunterscheidung ausschalten.
<param name="CharSet" value=>
Mit diesem Parameter können Sie die Kodierung angeben, die für die Daten in der Datendatei maßgeblich ist. Per Voreinstellung ist das die Kodierung ISO-8859-1. Verwenden Sie diesen Parameter nur, wenn die Daten anders kodiert sind, z.B. ISO-8859-5 für Kyrillisch verewnden. Im value-Attribut können Sie den Namen der Kodierung angeben. Nähere Informationen im Abschnitt über Zeichenkodierungen.
<param name="DataURL" value=>
Dieser Parameter ist unbedingt erforderlich. Im value-Attribut geben Sie die Datei an, in der sich die Daten befinden.
<param name="EscapeChar" value=>
Diesen Parameter sollten Sie angeben, wenn in Ihrer Datendatei ein Zeichen als Maskierungszeichen verwendet wird. Das ist z.B. der Fall, wenn Sie in einer kommabegrenzten Datei Kommata innerhalb von Feldern mit einem vorangestellten Backslash \ maskieren. Geben Sie in diesem Fall im value-Attribut das Maskierungszeichen an.
<param name="FieldDelim" value=>
Mit diesem Parameter geben Sie an, welches Zeichen als Trennzeichen für Datenfelder innerhalb einer Zeile der externen Textdatei interpretiert werden soll. Im value-Attribut können Sie das Zeichen angeben.
<param name="Filter" value=>
Mit diesem Parameter können Sie die Datenauswahl einschränken. Per Voreinstellung werden alle Daten aus der externen Datei angezeigt. Interessant ist dieser Parameter vor allem, wenn der Anwender in einem Eingabeformular die Suche selbst definieren kann, und die Eingaben dann mit Hilfe eines Scripts dynamisch diesem Parameter des <object>-Tags zugewiesen werden. Im value-Attribut können Sie den Filter angeben. Beispiele: value="Telefon <> '089*'" findet in einem Feld "Telefon" nur Nummern, die mit 089 beginnen. value="PLZ > '50000'" findet in einem Feld "PLZ" für Postleitzahlen nur Werte, die größer als 50000 sind.
<param name="Language" value=>
Mit diesem Parameter können Sie die Sprache angeben, in der die Daten der externen Datendatei vorliegen. Maßgeblich sind dafür die Sprachennamen, wie sie in ISO 369 definiert sind. Im value-Attribut können Sie die Sprache angeben.
<param name="RowDelim" value=>
Wenn Ihre externe Datendatei so aufgebaut ist, dass am Ende eines Datensatzes ein Datensatzbegrenzerzeichen steht, müssen Sie dieses Zeichen mit diesem Parameter angeben. Notieren Sie im Attribut value das Zeichen.
<param name="Sort" value=>
Mit diesem Parameter können Sie veranlassen, dass bei gleichzeitiger Ausgabe mehrerer Datensätze (also bei datapagesize größer 1) die angezeigten Datensätze nach einem bestimmten Feld sortiert werden. Beispiele: value="PLZ" sortiert auszugebende Daten nach einem Feld namens "PLZ". value="-PLZ" sortiert auszugebende Daten nach einem Feld namens "PLZ", und zwar absteigend (Minuszeichen davor). value="Name; PLZ" sortiert auszugebende Daten erstens nach Name und zweitens nach Postleitzahlen.
<param name="TextQualifier" value=>
Wenn Ihre externe Datendatei so aufgebaut ist, dass alle Datenfelder in bestimmte Zeichen eingeschlossen sind, zum Beispiel in Anführungszeichen, dann sollten Sie mit diesem Parameter das betreffende Zeichen angeben. Mit value="'"'" etwa bestimmen Sie das Anführungszeichen als Zeichen für Feldanfang und Feldende.
<param name="UseHeader" value=>
Diesen Parameter müssen Sie dann angeben, wenn die erste Zeile der externen Datendatei keine Daten enthält, sondern die zugehörigen Feldnamen. Mit value="true" wird die Datendatei so interpretiert, dass die erste Zeile Feldnamen enthält. Mit value="false" wird sie so interpretiert, dass gleich in der ersten Zeile die Daten beginnen.
Über das Datenmodell Remote Data Service (RDS) können Sie die Anbindung einer HTML-Datei an Daten aus einer Datenbank realisieren. Geeignet ist dieses Modell für Datenbanken, die über die Datenbank-Schnittstellen OLE-DB oder ODBC (DBMS) verfügen. Das sind beispielsweise MS Access, Oracle oder SQL-Server wie msql. Über die entsprechenden Produkte und den Aufbau von Datenbanken damit informieren Sie sich bitte bei den betreffenden Herstellern. Um eine solche Datenanbindung im WWW zu realisieren, muss die Datenbankanwendung auf dem Server-Rechner installiert sein. Fragen Sie dazu gegebenenfalls Ihren Provider.
Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie folgendes Objekt in der HTML-Datei notieren:
Um solche Daten einzubinden, verwenden Sie das im Internet Explorer 4.x eingebaute ActiveX-Control mit der ID BD96C556-65A3-11D0-983A-00C04FC29E33. Innerhalb des <object>-Tags notieren Sie verschiedene Parameter, die für die Datenpräsentation wichtig sind. Folgende Parameter sind möglich:
Notation
Bedeutung
<param name="AppendData" value=>
Mit diesem Parameter können Sie angeben, ob in der Ausgabetabelle beim Blättern für jedes neue Datensatz-Set (entsprechend der Größe von datapagesize) die vorhandenen Tabellenzellen überschrieben werden sollen, oder ob neue Tabellenzellen angehängt werden sollen. Mit value="true" erzwingen Sie das Anhängen von Daten. Per Voreinstellung werden die vorhandenen Tabellenzellen überschrieben.
<param name="CaseSensitive" value=>
Mit diesem Parameter können Sie angeben, ob bei Vergleichen von Anwendereingaben mit Daten aus der Datenquelle Groß-/Kleinschreibung unterschieden werden soll. Nur interessant bei der Weiterverarbeitung von Daten mit Scripts. Per Voreinstellung wird Groß-/Kleinschreibung unterschieden. Mit value=false können Sie die Fallunterscheidung ausschalten.
<param name="CharSet" value=>
Mit diesem Parameter können Sie die Kodierung angeben, die für die Daten in der Datendatei maßgeblich ist. Per Voreinstellung ist das die Kodierung ISO-8859-1. Verwenden Sie diesen Parameter nur, wenn die Daten anders kodiert sind, z.B. ISO-8859-5 für Kyrillisch verewnden. Im value-Attribut können Sie den Namen der Kodierung angeben. Nähere Informationen im Abschnitt über Zeichenkodierungen.
Solche Datenanbindungen sind nur sinnvoll, wenn Sie dem Anwender ein HTML-Formular zur Verfügung stellen, in dem er seine Angaben zum Durchsuchen der Datenbank machen kann. Mit Hilfe eines JavaScripts können Sie dann die Anwendereingaben in einen gültigen SQL-Befehl umwandeln, den Sie im Script dem Parameter SQL des object-Tags zuweisen. So können Sie beispielsweise mit der JavaScript-Anweisung: document.all.Datenbank.SQL = Abfrage;
eine SQL-Abfrage zuordnen. In diesem Beispiel ist "Datenbank" der Name, der beim object-Tag mit dem id-Attribut vergeben wird, und Abfrage ist eine Variable, die zuvor aus Formulareingaben des Anwenders einen SQL-Befehl kreiert hat. Bei solchen Datenbanken ist es auch möglich, SQL-Befehle zum Schreiben von geänderten Datensätzen in die Datenbank zurückzuschreiben. Voraussetzung ist, dass die Daten in der HTML-Datei in editierbaren HTML-Eingabefeldern (z.B. <input...>) angezeigt werden.
Ausführliche Informationen zum Einrichten und Realisieren einer Datenbank mit Scripts finden Sie auf den Entwicklerseiten von Microsoft. Suchen Sie dort nach Microsoft Internet Client SDK.
Das Datenmodell JDBC DataSource Applet greift ebenso wie das Datenmodell Datenmodell: Remote Data Service (RDS) auf Datenbanken zu, die über die Datenbank-Schnittstellen OLE-DB oder ODBC (DBMS) verfügen, zum Beispiel MS Access, Oracle oder SQL-Server wie msql. Der Unterschied zwischen dem JDBC DataSource Applet und dem Remote Data Service (RDS) ist, dass letzterer in der HTML-Datei als ActiveX-Control eingebunden wird, während das JDBC DataSource Applet ein Java-Applet ist. Damit will Microsoft seine Datenanbindungs-Technologie anderen Browsern zur Verfügung stellen, die kein ActiveX unterstützen, wohl aber Java. Das tun zwar Netscape und einige andere Browser, doch solange diese das Konzept der Datenanbindung mit Dynamischem HTML nicht unterstützen, hat das Ganze eigentlich wenig Sinn.
Das Java-Applet, das diese Form der Datenanbindung steuert, gehört nicht zum Lieferumfang des Internet Explorers. Auf den Web-Seiten von Microsoft können Sie das JDBC DataSource Applet downloaden. Suchen Sie dort auf den Seiten nach JDBC DataSource Applet.
Um eine solche Datenanbindung im WWW zu realisieren, muss die Datenbankanwendung auf dem Server-Rechner installiert sein. Fragen Sie dazu gegebenenfalls Ihren Provider.
Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie das JDBC DataSource Java-Applet in der HTML-Datei notieren.
Das Java-Applet wird wie in HTML üblich mit dem <applet>-Tag eingebunden. Mit dem Attribut code geben Sie die ausführbare Java-Datei an. Dies ist die Datei JDC.class, die Sie mit dem Download des JDBC DataSource Java-Applets erhalten. Innerhalb des Applets notieren Sie verschiedene Parameter, die das Applet benötigt, um korrekt zu arbeiten. Weiterführende Infos zu den Parametern entnehmen Sie der Original-Dokumentation zu dem Applet. Folgende Parameter erwartet das Applet:
Notation
Bedeutung
<param name="cabbase" value=>
Mit diesem Parameter geben Sie die Datei an, in der der Quellcode des Applets steht. Es handelt sich um eine CAB-Datei. Relative Pfadnamen oder auch absolute Adressen sind dabei erlaubt.
<param name="dbURL" value=>
Mit diesem Parameter geben Sie im value-Attribut die Datei an, in der die Datenbank gespeichert ist. Relative Pfadnamen oder auch absolute Adressen sind dabei erlaubt.
<param name="showUI" value=>
Mit diesem Parameter geben Sie an, ob das Applet innerhalb der HTML-Datei seine eigene Benutzeroberfläche anzeigen soll oder nicht. Mit value="true" wird das Applet angezeigt, mit value="false" nicht. Der Parameter ist optional.
<param name="sqlStatement" value=>
Mit diesem Parameter müssen Sie einen Befehl angeben, den Sie zum Ansprechen der Datenbank absetzen wollen. Dies kann ein beliebiger gültiger SQL-Befehl sein. SQL (Structured Query Language) ist eine standardisierte Datenbankabfragesprache. Diese Sprache und ihre Befehle müssen Sie kennen, um den Parameter mit korrekten Werten zu versorgen.
<param name="allowInsert" value=>
Mit diesem Parameter geben Sie an, ob der Anwender Datensätze durch Ausfüllen entsprechender Eingabefelder neue Datensätze in die Datenbank schreiben darf. Mit value="true" erlauben Sie das Hinzufügen von Daten, mit value="false" verbieten Sie es.
<param name="allowDelete" value=>
Mit diesem Parameter geben Sie an, ob der Anwender angezeigte Datensätze mit Hilfe entsprechender Befehlsbuttons aus der Datenbank löschen darf. Mit value="true" erlauben Sie das Löschen von Daten, mit value="false" verbieten Sie es.
<param name="allowUpdate" value=>
Mit diesem Parameter geben Sie an, ob der Anwender angezeigte Datensätze in entsprechenden Eingabefeldern editieren und geänderte Daten mit Hilfe entsprechender Befehlsbuttons in die Datenbank zurückschreiben darf. Mit value="true" erlauben Sie das Ändern von Daten, mit value="false" verbieten Sie es.
<param name="user" value=>
Mit diesem Parameter können Sie der Datenbank im value-Attribut den Namen eines angemeldeten Users übergeben, sofern die Datenbank dies verlangt. Der Parameter ist optional.
<param name="password" value=>
Mit diesem Parameter können Sie der Datenbank im value-Attribut das Passwort des Users übergeben, sofern die Datenbank dies verlangt. Der Parameter ist optional.
Das Datenmodell XML Data Source könnte in Zukunft sehr interessant werden, da es die vom W3-Konsortium standardisierte Sprache XML zur Definition von Daten benutzt. Bei diesem Datenmodell werden die Daten in einer XML-Datei gespeichert. Für Datensätze und Datenfelder können Sie innerhalb der XML-Datei eigene Tags und deren Verschachtelung erfinden. Ein denkbares Schema für eine Adressendatei wäre etwa: <adresse> <name>Meyer</name> <vorname>Hubert</vorname> <ort>Hamburg</ort> <telefon>040-598487374</telefon> </adresse>
Die Datei muss den Konventionen zum Aufbau einer XML-Datei entsprechen. Lesen Sie dazu das Kapitel über XML/DTDs.
Im Lieferumfang des Internet Explorers 4.x ist ein Java-Applet enthalten, das solche Tag-Strukturen aus XML-Dateien interpretiert und die Datenstruktur daraus ermittelt.
Um diese Art von Datenquelle an eine HTML-Datei anzubinden, müssen Sie das zugehörige Java-Applet in der HTML-Datei notieren.
Das Java-Applet wird wie in HTML üblich mit dem <applet>-Tag eingebunden. Notieren Sie das einleitende <applet>-Tag genau so wie im obigen Schema. Der Grund für den ungewöhnlichen Wert des Attributs code ist, dass dieses Java-Applet eine interne Ressource des Internet Explorers ist und keine separat vorliegende Datei.
Das Applet erwartet genau einen Parameter:
Mit <param name="url" value="datei.xml"> geben Sie im Attribut value den Dateinamen der XML-Datei an. Dabei sind natürlich auch relative Pfadangaben oder absolute Adressen erlaubt.
Was Sie mit XML besonders elegant lösen können, geht etwas weniger elegant auch mit HTML selbst: hinter dem Datenmodell MSHTML Data Source verbirgt sich nichts anderes als eine Konvention, nach der die Daten in einer HTML-Datei gehalten werden - diese HTML-Datei dient dann als externe Quelle für eine andere HTML-Datei, in der die Daten angezeigt werden. Ein Schema für den Datensatz einer Adressendatei wäre etwa: <div id="Adresse"> <span id="Name">Meyer</span><br> <span id="Vorname">Hubert</span><br> <span id="Ort">Hamburg</span><br> <span id="Telefon">040-598487374</span><br> </div>
Um diese Art von Datenquelle an eine HTML-Datei anzubinden, müssen Sie ein einfaches Objekt dafür notieren.
Innerhalb des <object>-Tags vergeben Sie mit dem id-Attribut wie üblich einen Namen, unter dem Sie das Objekt ansprechen und die Daten aus der anderen Datei in einer Tabelle dynamisch anzeigen können. Das Zugreifen auf die Datensätze funktioniert dabei genau so wie im Beispiel: Datei dynamisch in Tabelle einbinden. Im Attribut datafld geben Sie den Namen an, den Sie in der externen HTML-Datei im id-Attribut für jedes gleiche Feld eines Datensatzes vergeben haben, z.B. "Vorname".
Als der Internet Explorer 4.0 im Jahr 1997 ein völlig neues Konzept mit ganz neuen Möglichkeiten des dynamischen Zugriffs auf eine Web-Seite einführte, waren die meisten Web-Entwickler noch gänzlich in dem klassischen JavaScript-Ansatz von Netscape befangen und begriffen gar nicht so recht die Tragweite des neuen Modells. Das Modell erlaubte nichts Geringeres, als beliebige HTML-Elemente inklusive deren CSS-Eigenschaften zu ändern, auszutauschen, neu zu erzeugen, zu löschen usw. Der Browser reagierte dabei wie eine Textverarbeitungs-Software während der Bearbeitung. Wenn Inhalte dynamisch eingefügt wurden, wurde alles, was dahinter stand, automatisch neu positioniert. Obwohl diese Fähigkeit - eben im Hinblick auf moderne Textverarbeitungs-Software - im Grunde genommen von einer professionellen Software zu erwarten ist, war dem zu jener Zeit nicht so. Der 1997 noch dominante Netscape-Browser war genau dazu nicht in der Lage: eine Seite aufgrund dynamischer Änderungen wirklich neu aufzubauen. Auch die Web-Entwickler begriffen lange Zeit nicht, dass es doch viel einfacher und konsequenter ist, beliebige HTML-Elemente, deren Eigenschaften und Inhalte dynamisch zu ändern, anstatt mit der umständlichen Layer-Technik von Netscape zu hantieren.
Das Microsoft-Modell war also richtungsweisend. Aber es war proprietär, ein firmeneigener Vorstoß in neue Welten ohne Absprache mit einem unabhängigen Normierungs-Gremium. Microsoft benahm sich in jener Zeit in der Tat unglaublich aggressiv und versuchte, die verpennte Zeit der Jahre davor aufzuholen. Immerhin hatte Bill Gates noch ganze zwei Jahre zuvor das Internet als unwichtig und für Microsoft bedeutungslos erklärt. Der Versuch, die "Sahnetorte Internet" mit aggressiver Marketing-Politik alleine aufzufressen, gelang jedoch glücklicherweise nur zum Teil. Zwar eroberte der Internet Explorer Monat um Monat mehr Anteile am Browser-Markt und ist mittlerweile längst der am weitesten verbreitete Browser. Doch Microsofts Versuch, eigene Sprachen, Formate und Programmiertechniken zu etablieren, ist fehlgeschlagen. In diesem Punkt reagierte die Web-Gemeinde empfindlich. Man hatte erkannt, dass Software vor allem dann von sich abhängig macht, wenn sie Dateiformate diktiert.
Das DHTML-Modell von Microsoft war also ein wichtiger Meilenstein auf dem Weg zum heute zu empfehlenden DOM. Das DOM weicht aber insofern von dem Microsoft-Ansatz ab, als es nicht auf HTML fixiert ist, sondern gleich alle XML-kompatiblen Tag-Sprachen abdeckt. Der Microsoft-Ansatz ist aus heutiger Sicht nur noch insofern von Bedeutung, wenn Sie dynamische Web-Seiten erstellen wollen, die auch mit dem Internet Explorer 4.x darstellbar sein sollen. Zwar verschwindet dessen Anteil am Browser-Markt immer weiter gegenüber den neueren Versionen, die seit der 5er-Version DOM-fähig sind, doch Web-Design sollte wann immer es möglich ist auch auf ältere Browser-Versionen Rücksicht nehmen.
Es gibt letztlich keine Vorschriften dafür, welche Script-Sprache für Dynamisches HTML verwendet werden soll. Deshalb herrscht hierbei noch etwas Verwirrung.
JavaScript ist jedoch eindeutig die meist verwendete und bekannteste Script-Sprache. Sie wurde durch Netscape eingeführt. Der Internet Explorer interpretiert JavaScript ebenfalls. Dabei hinkt er Netscape jedoch immer etwas hinterher, da Netscape die Lizenzen für JavaScript besitzt und es Microsoft nicht erlaubt ist, den Sprachumfang von JavaScript selbstständig zu erweitern. Mit einem kleinen Kniff hat sich Microsoft aus dieser misslichen Lage befreit: Die Sprache wurde einfach in JScript umbenannt. JScript ist JavaScript plus MS-eigene Spracherweiterungen. JScript enthält etliche Objekte, Methoden und Eigenschaften, die in JavaScript nicht vorkommen. Die meisten dieser Befehle sind für die lokalen Betriebssystemerweiterungen gedacht, die der Internet Explorer 4.x unter MS Windows benötigt. Aber auch das all-Objekt, das in Netscapes JavaScript nicht vorkommt, gehört dazu. Und dieses Objekt ist ganz entscheidend für Dynamisches HTML im Internet Explorer.
Neben JavaScript und JScript beherrscht der Internet Explorer auch noch VBScript. Diese Sprache ist von Visual Basic (VB) abgeleitet. Sie konnte sich bislang jedoch nicht durchsetzen im WWW. VBScript hat eine andere Syntax als JavaScript und JScript. Die Objekte, Eigenschaften und Methoden sind jedoch im wesentlichen die gleichen. Mit VBScript können Sie also ebenfalls Dynamisches HTML schreiben.
Das obige Beispiel ist kein Dynamisches HTML im engeren Sinn. Es soll lediglich demonstrieren, wie Sie unterschiedliche Script-Sprachen einsetzen können, und welche Wirkung dies auf WWW-Browser hat. In dem Beispiel werden drei Script-Bereiche definiert: einer mit JavaScript (<script language="JavaScript" type="text/javascript">), einer mit JScript (<script language="JScript" type="text/jscript">) und einer mit VBScript <script language="VBScript" type="text/vbscript">. Jeder der drei Bereiche schreibt mit Hilfe eines document.write-Befehls (dieser Befehl ist in allen drei Sprachen gleich) eine Zeile in das Dokument. Da ein WWW-Browser nur diejenigen Script-Bereiche ausführt, deren Sprachen er kennt, stehen am Ende genau diejenigen Script-Sprachen auf der Seite, die der benutzte WWW-Browser kennt.
Sie sollten einen Script-Bereich einfach dann mit "JScript" auszeichnen, wenn Sie verhindern wollen, dass Netscape den Bereich interpretiert. Der Internet Explorer 4.x selbst nimmt es andererseits nicht übel, wenn Sie einen Script-Bereich mit "JavaScript" auszeichnen und darin Objekte, Methoden und Eigenschaften verwenden, die eigentlich nur in JScript vorkommen. Wenn Sie einen Script-Bereich mit "JavaScript" auszeichnen und darin microsoft-spezifische JScript-Erweiterungen wie das all-Objekt verwenden, sollten Sie die Ausführung entsprechender Anweisungen von einer Abfrage abhängig machen. Lesen Sie dazu das Thema Abfragen ob ein Objekt existiert in JavaScript.
Beachten Sie:
In modernen Browsern ist es normalerweise ausreichend, das type-Attribut anzugeben. Ältere Browser und Opera 5.12 benötigen jedoch zwingend das Attribut language, um den Script-Bereich von der Bearbeitung auszuschließen.
Das all-Objekt ist beim DHTML-Ansatz von Microsoft der entscheidende Schlüssel. Wie der Name schon verspricht, ist über dieses Objekt jedes einzelne HTML-Element einer HTML-Datei ansprechbar. Das all-Objekt hat etliche Eigenschaften und Methoden, die das dynamische Verändern eines HTML-Elements erlauben. Alle Methoden und Eigenschaften können an dieser Stelle nicht behandelt werden. Rufen Sie dazu die JavaScript-Objektreferenz auf und verschaffen Sie sich einen Überblick über die Eigenschaften und Methoden des Objekts all. Hier soll lediglich ein weiteres Beispiel die Wirkungsweise dieses Objekts verdeutlichen.
<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
var Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
"Donnerstag", "Freitag", "Samstag");
function ZeitAnzeigen () {
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var Sekunden = Jetzt.getSeconds();
var WoTag = Jetzt.getDay();
var Vortag = ((Tag < 10) ? "0" : "");
var Vormon = ((Monat < 10) ? ".0" : ".");
var Vorstd = ((Stunden < 10) ? "0" : "");
var Vormin = ((Minuten < 10) ? ":0" : ":");
var Vorsek = ((Sekunden < 10) ? ":0" : ":");
var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
document.all.Uhr.innerHTML = Datum + " (" + Wochentagname[WoTag] + ")<br>" + Uhrzeit;
window.setTimeout("ZeitAnzeigen()", 1000);
}
</script>
</head>
<body>
<p id="Uhr" style="font-family:Verdana; font-size:200%;
font-weight:bold; color:#CC00CC"></p>
<script language="JScript" type="text/jscript">
window.setTimeout("ZeitAnzeigen()", 1000);
</script>
</body>
</html>
Erläuterung:
Das Beispiel stellt eine vollständige, laufende Uhr mit Datum dar. Dazu wird ein leerer Textabsatz mit <p>...</p> definiert. Stylesheet-Angaben dienen dazu, den Textabsatz nach Wunsch zu formatieren. Obwohl der Absatz zunächst keinen Text enthält, dient er im Verlauf des Scripts als Container (Behälter) für den angezeigten Text mit Datum und Uhrzeit.
Das obere Script ermittelt Datum und Uhrzeit und formatiert es für eine ordentliche, hierzulande übliche Schreibweise. Die Zeichenkette, die ausgegeben werden soll, wird schließlich der Objekteigenschaft document.all.Uhr.innerHTML zugewiesen. Uhr ist dabei der Bezug auf den Namen, der bei der Definition des Textabsatzes mit id definiert wird. Mit der Objekteigenschaft innerHTML können Sie den gesamten Inhalt eines Elements, hier den des benannten <p>...</p>-Elements, dynamisch ersetzen. Da sich die Funktion zur Ausgabe der Zeit jede Sekunde selbst von neuem aufruft, wird jede Sekunde ein neuer Inhalt in das <p>-Tag mit der id="Uhr" geschrieben. Auf diese Weise entsteht der Effekt einer laufenden Uhr.
Es gibt weitere, mächtige Möglichkeiten des all-Objekts. Diese werden in der JavaScript-Objektreferenz beim Objekt all beschrieben. Hier nur noch einige typische Befehlsfolgen:
Angenommen, Sie haben folgendes HTML-Element, ein gewöhnlicher Textabsatz: <p id="derText">Das ist Text in einem Textabsatz</p>
Dann können Sie beispielsweise folgende Dynamische Veränderungen bewirken:
Mit document.all.derText.innerHTML = "<b>neuer Text<\/b> im gleichen Textabsatz"; ändern Sie den Inhalt des Textabsatzes und können dabei auch HTML-Tags zur Formatierung benutzen.
Mit document.all.derText.outerHTML = "<h1>" + document.all.derText.innerHTML + "<\/h1>"; verwandeln Sie den Textabsatz in eine Überschrift 1. Ordnung.
Mit document.all.derText.className = "Wichtig"; weisen Sie dem Absatz eine Stylesheet-Klasse namens Wichtig zu. Wenn Sie eine solche Klasse definiert haben, übernimmt der Absatz alle in der Klasse definierten Stylesheet-Angaben (lesen Sie dazu auch den Abschnitt Formate für Klassen definieren).
Beachten Sie:
Mozilla Firefox unterstützt zwar document.all in der Art, wie sie im Beispiel verwendet wird. Allerdings führt er das Script im Beispiel nicht aus, da es mit <script language="JScript" type="text/jscript"> eingebunden ist. Eingebettet in einen gewöhnlichen JavaScript-Bereich funktioniert das Beispiel auch im Firefox.
Sie können mit Dynamischem HTML nach Microsoft-Syntax dynamisch auf alle CSS-Eigenschaften einzelner HTML-Elemente zugreifen. Dadurch können Sie angezeigte Elemente optisch stark verändern. Wenn etwa eine Überschrift 2. Ordnung anfangs eine Schriftgröße von 18 Pixel hat, können Sie diese dynamisch auf 64 Pixel ändern. "Dynamisch" bedeutet dabei: bei einem Anwenderereignis wie einem Mausklick auf die Überschrift oder automatisch zeitgesteuert, etwa nach drei Sekunden.
Neben der Schriftgröße können Sie auch dynamisch eine Hintergrundfarbe unterlegen, Rahmen um ein Element ziehen, das Element über den Bildschirm wandern lassen und vieles mehr. Die Voraussetzung für diese Effekte sind Stylesheets. Die Syntax von CSS und die Möglichkeiten der Stylesheet-Angaben sollten Sie kennen.
Die Style-Definitionen eines HTML-Elements ändern Sie dynamisch, indem Sie mit Hilfe einer Script-Sprache auf das Element zugreifen und mit neuen Stylesheet-Angaben das Aussehen des Elements ändern.
Das Beispiel zeigt zunächst eine Überschrift 1. Ordnung (<h1>...</h1>). Mit Hilfe des Attributs style bekommt die Überschrift CSS-Eigenschaften zugewiesen. Im Beispiel wird die Schriftgröße auf 100 Prozent gesetzt (font-size:100%).
Das gesamte Beispiel bewirkt, dass die Größe der Überschrift einmal pro Sekunde von 100 auf 350 Prozent wechselt und wieder umgekehrt. Für dieses dynamische Verändern ist ein Script erforderlich. Im obigen Beispiel wird deshalb ein Script-Bereich mit <script language="JScript" type="text/jscript">...</script> definiert. Innerhalb des Script-Bereichs werden zwei Funktionen definiert. Die eine Funktion - MachKlein() - ändert die Schriftgröße der Überschrift auf 100 Prozent, die andere Funktion - MachGross() - auf 350 Prozent. Nach jeweils einer Sekunde (1000 Millisekunden) ruft jede der beiden Funktionen die jeweils andere wieder auf. Dadurch entsteht der Wechseleffekt.
Um das dynamische Verändern der Schriftgröße zu verstehen, müssen Sie folgende Zusammenhänge beachten: im Überschriften-Tag <h1> wird mit dem Attribut id ein Name, nämlich Wechseltext, zugewiesen. Diesen Namen können Sie frei vergeben. Er darf nur aus Buchstaben, Ziffern und Unterstrichen "_" bestehen und darf keine Leerzeichen oder deutschen Umlaute enthalten. Das Script im Beispiel greift mit den Anweisungen, in denen document.all.Wechseltext vorkommt, auf genau dieses Element zu. Mit dem all-Objekt (document.all) werden alle Elemente einer HTML-Datei angesprochen. Durch den Namen dahinter wird genau das Element angesprochen, das diesen Namen hat - im Beispiel Wechseltext. Dahinter folgt das Style-Objekt (style), das dem all-Objekt untergeordnet ist (Einzelheiten zu diesem Objekt erfahren Sie in der JavaScript-Objektreferenz bei style). Über das Style-Objekt können Sie als Eigenschaft eine erlaubte Stylesheet-Angabe notieren. Dabei gelten besondere Schreibweisen in JavaScript/JScript, die im folgenden behandelt werden.
Beachten Sie:
Mozilla Firefox unterstützt zwar document.all in der Art, wie sie im Beispiel verwendet wird. Allerdings führt er das Script im Beispiel nicht aus, da es mit <script language="JScript" type="text/jscript"> eingebunden ist. Eingebettet in einen gewöhnlichen JavaScript-Bereich funktioniert das Beispiel auch im Firefox.
Safari unterstützt nicht den hier dargestellten Zugriff auf Elemente über document.all, hat aber keinerlei Probleme mit der Verwendung des style-Objekts im Beispiel. Denn die Microsoft-Methode zum Zugriff auf CSS-Eigenschaften wurde später vom W3C in den DOM-Style-Standard aufgenommen, den Safari unterstützt..
Wenn Sie Stylesheet-Angaben innerhalb von Script-Sprachen verwenden, müssen Sie die Syntax der Script-Sprache berücksichtigen.
Ein Problem beim Mischen von Stylesheets und JavaScript oder JScript ist es, dass viele Stylesheet-Angaben Bindestriche im Namen haben, wie etwa font-size, margin-top oder background-color. Wenn Sie aus solche Namen in JavaScript oder JScript einen Befehl wie: document.all.MeinText.style.font-size = "200%";
erzeugen, erhalten Sie eine Fehlermeldung. Der Grund ist, dass Bindestriche keine zulässigen Zeichen in Namen sind (der Bindestrich ist in diesen Sprachen ja der Operator für Subtraktionen).
Um dieses Problem zu umgehen, hat Microsoft eine einfache Regel aufgestellt. Wenn in einem Script eine Stylesheet-Angabe ausgelesen oder verändert werden soll, entfällt der Bindestrich, und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
var modus = 1;
function Textspiel () {
if (modus == 1) {
document.all.MeinText.style.fontSize = "200%";
modus = 2;
return;
}
if (modus == 2) {
document.all.MeinText.style.padding = "0.6em";
document.all.MeinText.style.backgroundColor = "#FFFF00";
modus = 3;
return;
}
if (modus == 3) {
document.all.MeinText.style.border = "10px groove #FFCC33";
document.all.MeinText.style.backgroundImage = "url(back.gif)";
modus = 0;
return;
}
if (modus == 0) {
document.all.MeinText.style.fontSize = "100%";
document.all.MeinText.style.padding = "0";
document.all.MeinText.style.backgroundColor = "#FFFFFF";
document.all.MeinText.style.border = "none";
document.all.MeinText.style.backgroundImage = "none";
modus = 1;
return;
}
}
</script>
</head><body>
<p id="MeinText" style=" background-color:#FFFFFF; padding:0; border:none;
background-image:none; cursor:hand" onclick="Textspiel()">Klicken Sie auf diesen Text</p>
</body></html>
Erläuterung:
In dem Beispiel wird am Ende ein Textabsatz mit diversen Stylesheet-Angaben definiert. Einige dieser Stylesheet-Angaben enthalten Bindestriche, nämlich font-size, background-color und background-image. Innerhalb des Scripts, das über dem Textabsatz notiert ist, werden diese und andere Stylesheet-Angaben dynamisch verändert. Sie können erkennen, dass font-size zu fontSize wird, background-color zu backgroundColor und background-image zu backgroundImage - getreu der Regel.
Wenn Sie innerhalb eines Scripts einer Stylesheet-Eigenschaft einen neuen Wert zuweisen wollen, müssen Sie zuerst das gewünschte HTML-Objekt mit der style-Eigenschaft notieren, im obigen Beispiel etwa document.all.MeinText.style.fontSize. Dahinter folgt ein Istgleichzeichen für die Zuweisung, und dahinter der Wert, den Sie zuweisen wollen, also etwa "200%". Dieser Wert muss bei JavaScript und JScript immer in Anführungszeichen stehen.
Diese Art der Wertzuweisung an eine Stylesheet-Angabe unterscheidet sich von der Art, wie Werte zu Stylesheet-Angaben bei normalen Stylesheet-Definitionen zugewiesen werden. Dort notieren Sie anstelle eines Istgleichzeichens einen Doppelpunkt, so wie in den Stylesheet-Definitionen im Textabsatz des obigen Beispiels. Anführungszeichen sind dabei nicht nötig.
Das Script im Beispiel verändert die Formatierung des Textes innerhalb des Textabsatzes, wenn der Anwender mit der Maus auf den Text klickt. Immer, wenn dieses Ereignis eintritt, wird mit Hilfe des Event-Handlersonclick die Funktion Textspiel() innerhalb des Scripts aufgerufen. Das Script
verwaltet eine global definierte Variable namens modus. Abhängig davon, welchen Wert diese Variable hat, werden dem Text diverse neue Stylesheet-Angaben zugewiesen. Das dynamische Verändern des Textabsatzes im Script wird durch die Angabe id="MeinText" im Textabsatz und Befehlen des Typs document.all.MeinText.style bewerkstelligt.
Beachten Sie:
Mozilla Firefox unterstützt zwar document.all in der Art, wie sie im Beispiel verwendet wird. Allerdings führt er das Script im Beispiel nicht aus, da es mit <script language="JScript" type="text/jscript"> eingebunden ist. Eingebettet in einen gewöhnlichen JavaScript-Bereich funktioniert das Beispiel auch im Firefox.
Safari unterstützt nicht den hier dargestellten Zugriff auf Elemente über document.all, hat aber keinerlei Probleme mit der Verwendung des style-Objekts im Beispiel. Denn die Microsoft-Methode zum Zugriff auf CSS-Eigenschaften wurde später vom W3C in den DOM-Style-Standard aufgenommen, den Safari unterstützt.
Eine wichtige Voraussetzung für Dynamisches HTML ist in vielen Fällen die Interaktion zwischen Anwender und angezeigter HTML-Datei. Die angezeigte Datei kann auf Anwenderereignisse wie Mausklicks oder gedrückte Tasten an der Tastatur reagieren und Elemente daraufhin dynamisch verändern. Dazu gibt es Event-Handler und auch ein Event-Objekt. Alle Methoden und Eigenschaften des Event-Objekts und alle einzelnen Event-Handler können an dieser Stelle nicht behandelt werden. Rufen Sie dazu in der JavaScript-Dokumentation die Event-Handler sowie die Referenz des Objekts event auf und verschaffen Sie sich einen Überblick über die Möglichkeiten. Hier soll lediglich ein Beispiel die Wirkungsweise verdeutlichen.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
function SetPos () {
document.all.Springer.style.left = window.event.x;
document.all.Springer.style.top = window.event.y;
}
</script>
</head><body onclick="SetPos()">
<div id="Springer" style="position:absolute; top:100px; left:100px; width:200px;
height:100px; font-size:18px; background-color:#000066; color:#FFFF00; padding:38px;">
Klicken Sie mit der Maus irgendwohin!
</div>
</body>
</html>
Erläuterung:
Das obige Beispiel definiert einen Bereich mit <div>...</div>. Verschiedene Stylesheet-Angaben im einleitenden <div>-Tag sorgen dafür, dass der Bereich gut sichtbar ist und absolut am Bildschirm positioniert wird. Wenn der Anwender während der Anzeige irgendwo im Anzeigefenster des Browsers mit der Maus hinklickt, wird der definierte <div>-Bereich neu positioniert, und zwar so, dass die linke obere Ecke genau an der Stelle beginnt, wo der Anwender hingeklickt hat.
Damit dies möglich ist, muss das gesamte Dokument sofort reagieren, wenn der Anwender mit der Maus irgendwohin klickt. Zu diesem Zweck wird im einleitenden <body>-Tag der Event-Handler onclick notiert. Beim jedem Mausklick im Anzeigefenster wird dann die FunktionSetPos() aufgerufen, die innerhalb des Script-Bereichs definiert ist. Diese Funktion setzt die Werte für die linke obere Ecke des <div>-Bereichs neu. Bezug ist dabei der Name ("Springer"), der im <div>-Tag mit dem id-Attribut vergeben wurde. Mit dem Befehl document.all.Springer.style.left wird die neue Anfangsposition links gesetzt, mit document.all.Springer.style.top die neue Anfangsposition oben. Den neuen Wert für links liefert die Eigenschaft x des window.event-Objekts, den Wert für oben die Eigenschaft y dieses Objekts. Der <div>-Bereich wird dadurch neu positioniert.
Das Event-Objekt hält ständig alle relevanten Anwendertätigkeiten wie Mausposition, Tastaturereignisse, Mausklicks, gedrückte Maustasten usw. in seinen Objekteigenschaften fest. Durch einfaches Abrufen der Eigenschaften vom Typ window.event.[Eigenschaft] können Sie jederzeit aktuelle Ereignisse abfangen. Das Abfangen geschieht durch Notieren von Event-Handlern. Wichtig ist dabei auch, an welcher Stelle Sie ein Ereignis abfangen, also wo Sie den Event-Handler notieren. So könnten Sie im obigen Beispiel den Event-Handler onclick auch im einleitenden <div>-Tag notieren. Dann würden Script-Befehle nur dann ausgeführt, wenn der Mausklick innerhalb dieses <div>-Bereichs vorkommt.
Ein wichtiges Unterobjekt des Event-Objekts ist das Objekt für das angeklickte Element (srcElement). So können Sie etwa mit window.event.srcElement.tagName ermitteln, welches HTML-Tag von einem aktuellen Anwenderereignis betroffen ist. In Ihren Scripts können Sie dann entsprechend reagieren.
Es gibt nicht nur den Event-Handler onclick, sondern viele weitere. Wenn Sie beispielsweise im einleitenden <body>-Tag die Anweisung onkeydown="alert(window.event.keyCode)" notieren, wird bei jedem Drücken einer Taste deren Zeichenwert in dezimaler Form ausgegeben. Denn in der Eigenschaft keyCode des Event-Objekts wird der Tastaturwert festgehalten, sobald der Anwender eine Taste drückt.
Beachten Sie:
Microsoft stellt zum event-abhängigen Ausführen von Scripts noch eine spezielle Syntax bereit, die Sie ebenfalls verwenden können:
Mit einer solchen Anweisung im einleitenden Script-Tag wird das Script nur dann ausgeführt, wenn das angegebene Ereignis (Event) eintritt. In dem Beispiel wird bewirkt, dass der Browser beim Drücken der Leertaste (sie hat den Tastaturcode 32) zu einer anderen Datei springt.
Beachten Sie:
Safari unterstützt zwar den Zugriff auf das Event-Objekt über window.event und kennt auch dessen Eigenschaften srcElement sowie x und y, unterstützt aber nicht den hier dargestellten Zugriff auf Elemente über document.all.
Anwenderereignisse (Events) während der Anzeige einer WWW-Seite werden im Internet Explorer von "innen nach außen vererbt". Wenn der Anwender beispielsweise auf einen mit <b>...</b> als fett ausgezeichneten Text innerhalb eines mit <p>...</p> definierten Textabsatzes klickt, betrifft der Mausklick zunächst nur den fetten Text. Angenommen, der Textabsatz enthält im einleitenden <p>-Tag einen Event-Handler onclick, so würde dieser nicht aktiv, da der Mausklick ja nur den als fett markierten Text innerhalb des Absatzes betrifft. Da das b-Element keinen Event-Handler besitzt, würde der Mausklick unbemerkt bleiben, obwohl er innerhalb des Textabsatzes stattfand, der für den Fall eines Mausklicks einen Event-Handler enthält. Der Bubble-Effekt (wörtlich: Blaseneffekt) bewirkt, dass das Ereignis (der Mausklick) zum jeweils nächsthöheren Element im Elementenbaum der HTML-Datei weitergegeben wird. Auf diese Weise gelangt das Ereignis zu dem p-Element, das den Event verarbeitet. Würde das p-Element auch keinen Event-Handler onclick besitzen, so würde der Bubble-Effekt das Ereignis an das nächsthöhere Element weitergeben, also z.B. an ein div-Element, innerhalb dessen sich der Textabsatz befindet, oder an das body-Element. Wenn nirgendwo ein Event-Handler notiert ist, der auf den Mausklick reagiert, passiert einfach nichts.
<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
function Handle_Click () {
document.all.Info.innerHTML = "Der Bereich, auf den Sie geklickt haben, ist mit <" +
window.event.srcElement.tagName + "> ausgezeichnet und hat die id <i>" +
window.event.srcElement.id + "<\/i>. Der Event wurde jedoch bis ans body-Tag durchgereicht.";
}
</script>
</head>
<body onclick="Handle_Click()">
<div id="Inhalt">
<p id="Text_1">Ein <i id="i_Text">Textabsatz</i>. Klicken Sie hinein</p>
<p id="Text_2">Ein <u id="u_Text">anderer Textabsatz</u>. Klicken Sie hinein</p>
<p id="Text_3">Noch ein <b id="b_Text">Textabsatz</b>. Klicken Sie hinein</p>
<p id="Text_4">Ein letzter <tt id="tt_Text">Textabsatz</tt>. Klicken Sie hinein</p>
</div>
<p id="Info">Hier erscheinen Infos zum Klick</p>
</body>
</html>
Erläuterung:
Im Beispiel werden diverse Texte in verschiedenen HTML-Auszeichnungen definiert. Jedes HTML-Element erhält dabei auch einen Namen (id-Attribut). Der unterste Textabsatz mit id="Info" dient dazu, dynamisch Informationen darüber auszugeben, welches Element der Anwender angeklickt hat. Jedesmal, wenn der Anwender ein Element anklickt, wird die FunktionHandle_Click() aufgerufen, die in einem JavaScript-Bereich im Dateikopf definiert ist. Jedesmal wird in dem Textabsatz "Info" ausgegeben, welches HTML-Tag angeklickt wurde, und welche id es hat. Eigentlich betrifft der Mausklick dabei ja nur das jeweilige Element. Keines dieser Elemente hat jedoch einen Event-Handler onclick, der einen Mausklick abfängt und Script-Code ausführt. Dass der Script-Code trotzdem bei jedem Mausklick ausgeführt wird, liegt am Event-Bubbling. Der Mausklick-Event wird immer weiter "nach außen" gegeben und landet schließlich beim <body>-Tag, das einen Event-Handler onclick enthält.
Der Bubble-Effekt lässt sich auch ausschalten, falls er nicht erwünscht ist. Dazu müssen Sie in einem JScript/JavaScript-Bereich die Anweisung notieren: window.event.cancelBubble = true;
Beachten Sie:
Safari unterstützt zwar den Zugriff auf das Event-Objekt über window.event und kennt auch dessen Eigenschaft srcElement, unterstützt aber nicht den hier dargestellten Zugriff auf Elemente über document.all.
Sinnvolle Vorkenntnisse zum Verständnis: HTML, Stylesheets, JavaScript und der Abschnitt Allgemeines zu Dynamischem HTML.
Dieser Abschnitt behandelt den Ansatz des Document Object Model (DOM) sowie die beiden älteren Modelle für Dynamisches HTML, die Microsoft und Netscape in den 4er-Versionen ihrer Browser verfolgen. Die Modelle sollten Sie kennen und auseinanderhalten können, wenn Sie Dynamisches HTML programmieren.
Der Abschnitt besteht aus folgenden Seiten:
Dynamisches HTML (engl. "Dynamic HTML" oder abgekürzt "DHTML") ist eine Erfindung von Marktstrategen, sagen Kritiker. In der Tat ist Dynamisches HTML keine klassische HTML-Erweiterung in Gestalt neuer HTML-Elemente. Es ist auch keine neue Sprache. Dynamisches HTML ist vielmehr der Sammelbegriff für verschiedene Lösungen, um dem Autor einer Web-Seite zu ermöglichen, Elemente der Web-Seite während der Anzeige dynamisch zu ändern, sei es automatisch oder durch Einwirken des Anwenders.
Beispiel:
<html><head><title>Test</title>
</head><body>
<p id="Absatz"
onclick="document.getElementById('Absatz').firstChild.nodeValue = 'Sehen Sie!'">
Ich bin dynamisch</p>
</body></html>
Erläuterung:
Das kleine Beispiel zeigt Dynamisches HTML nach dem Document Object Model (DOM) in seiner JavaScript-Umsetzung, das in dieser Form allerdings nur mit neueren Browsern (Internet Explorer ab V5.x und Netscape ab Version 6.x) funktioniert. Es dient hier nur dem Zweck, das "Typische" an Dynamischem HTML zu verdeutlichen. In dem Beispiel wird mit <p>...</p> ein gewöhnlicher HTML-Textabsatz definiert. Am Bildschirm steht dann: Ich bin dynamisch. Damit der Textabsatz sein Versprechen auch halten kann, enthält er im einleitenden <p>-Tag einen so genannten Event-Handler, im Beispiel den Event-Handler onclick. Dieser Event-Handler tritt in Aktion, wenn der Anwender mit der Maus auf den angezeigten Text klickt. Im Beispiel verwandelt sich nach dem Anklicken des Textes dessen Inhalt in: Sehen Sie!.
Wie Sie an dem Beispiel erkennen, können Sie also bestimmte angezeigte Inhalte austauschen, ohne dafür jedesmal vollständige neue Seiten laden zu müssen. Das ist eine charakteristische Eigenschaft von Dynamischem HTML. Eine Web-Seite verhält sich also plötzlich wie eine Anwendung, die einmal in den Arbeitsspeicher geladen wird und dann z.B. durch Interaktion mit dem Anwender das Geschehen am Bildschirm bestimmt.
Dynamisches HTML bietet Gestaltern anspruchsvoller Web-Seiten schier unerschöpfliche Möglichkeiten bei der Kontrolle über das Geschehen am Bildschirm. Es fängt mit Kleinigkeiten wie dem obigen Beispiel an. Es geht weiter mit animierten Grafiken, die über den angezeigten Inhalt gleiten oder hüpfen - manche Web-Seiten versuchen, ganze Aquarien abzubilden. Und es geht hin bis zu der Möglichkeit, mit Hilfe von Grafiken und anderen Elementen komplexe, interaktive Spiele, Lernsituationen oder auch selbstablaufende Animationen zu programmieren. Der Phantasie sind kaum Grenzen gesetzt. Der Anwender kann beim Anzeigen einer dynamischen HTML-Datei auch mit viel mehr Reaktionen konfrontiert werden als beim Betrachten einer normalen, statischen Web-Seite. Das hat Vor- und Nachteile. Es kommt immer darauf an, wie man die Features nutzt, ob zur bloßen Selbstdarstellung und Angeberei, oder zum Nutzen des Anwenders. Außerdem sollte sich jeder Entwickler darüber im Klaren sein, dass dynamische Web-Seiten nicht unbedingt für Suchmaschinen-Robots und erst Recht nicht für sehbehinderte Anwender geeignet sind.
"Programmieren" ist auf jeden Fall bei allem angesagt, was mit Dynamischem HTML zu tun hat: Fortgeschrittene Programmierkenntnisse in JavaScript sind Voraussetzung. Im Web finden Sie zwar fertige Lösungen zum Abkupfern, aber wer sich ernsthaft mit der Materie beschäftigen will, um eigene kreative Lösungen zu entwickeln, kommt um die Programmierung nicht herum. Das soll jedoch keine Entmutigung sein. Es gibt durchaus nützliche Anwendungsmöglichkeiten von Dynamischem HTML, die ohne allzugroßen Programmieraufwand auskommen.
Dynamisches HTML wird von Netscape ab Version 4.0 und vom Internet Explorer ab Version 4.0 interpretiert. Leider ist das Thema "Dynamic HTML" bei diesen beiden Browser-Versionen jedoch zu einem Schauplatz im Browser-Krieg verkommen. Denn die Realisierungen sind in beiden Browsern grundverschieden. Vieles muss für das 4er-Level der beiden Browser getrennt kodiert werden (mit doppeltem Kenntnisaufwand), sofern man für beide Browser schreiben will. Vieles funktioniert überhaupt nur mit dem einen oder mit dem anderen Browser. Vor allem kann sich das "echte" dynamische HTML (beliebiger Zugriff auf alle HTML-Elemente einer Web-Seite), wie es der Internet Explorer ab Version 4.0 bereits beherrscht, auf dem 4er-Level der Browser noch nicht richtig durchsetzen, da dort stets auf das wesentlich primitivere, layer-orientierte Modell von Netscape Rücksicht genommen werden muss.
Mittlerweile zeichnet sich jedoch ein einheitlicher Standard ab. Zu verdanken ist dieser Standard dem W3-Konsortium, das auch HTML und CSS normiert. Für den Script-Sprachen-Zugriff auf Elemente einer Web-Seite hat das W3-Konsortium das Document Object Model (DOM) entworfen. Die neueren Versionen der führenden Browser setzen das DOM - wenn auch noch mit deutlichen Schwächen im Detail - in JavaScript um, sodass es in absehbarer Zeit wohl einfacher werden wird, Dynamisches HTML zu programmieren.
In der vorliegenden Dokumentation werden zunächst alle drei Modelle (Microsoft 4er-Level, Netscape 4er-Level und DOM) getrennt vorgestellt (Die verschiedenen DHTML-Modelle). Denn nur wenn Sie die Konzepte klar unterscheiden können, sind Sie in der Lage, Dynamisches HTML so zu schreiben, dass es mit verschiedenen Browsern funktioniert. Im zweiten Schritt können Sie dann sehen, wie sich Dynamisches HTML browser-übergreifend realisieren lässt (Lösungen für die Praxis).
Sinnvolle Vorkenntnisse zum Verständnis: HTML, Stylesheets und JavaScript/DOM.
Dieser Abschnitt beschreibt Lösungen, um HTML-Dateien zu erzeugen, bei denen einzelne Elemente während der Anzeige dynamisch ihren Inhalt ändern.
Der Abschnitt besteht aus folgenden Seiten und Unterabschnitten:
Die Beschriftungen zeigen, welchen in HTML und CSS erlaubten Farbnamen die jeweiligen Farben entsprechen. Die entsprechenden Hexadezimalnotationen sind als zusätzliche Information und zur Kontrolle angegeben.
selfhtml-8.1.2.orig/diverses/anzeige/farbnamen_16.htm 0000644 0001750 0001750 00000005504 10331415360 020700 0 ustar uwe uwe
16 Farben (VGA-Farbpalette) und deren Namen
VGA-Farbpalette (16 Farben) mit Farbnamen
Die Beschriftungen zeigen, welchen in HTML und CSS erlaubten Farbnamen die jeweiligen Farben entsprechen. Die entsprechenden Hexadezimalnotationen sind als zusätzliche Information und zur Kontrolle angegeben.
Es gibt Defacto-Standards im Internet, die einfach gewachsen sind, ohne es je zu einer RFC gebracht haben. Dazu gehört auch der Status, den die Datei robots.txt im Web hat. In einer Datei dieses Namens können Betreiber von Web-Projekten angeben, welcher Such-Robot welche Projektverzeichnisse auslesen darf und welcher was nicht lesen darf. Die Datei enthält also Anweisungen für Robots von Suchmaschinen. Die überwiegende Mehrheit der Robots moderner Suchmaschinen berücksichtigen das Vorhandensein einer robots.txt, lesen sie aus und befolgen die Anweisungen.
Zwar lässt sich auch in einzelnen HTML-Dateien mit Hilfe eines Meta-Tags für Suchprogramme das Auslesen erlauben bzw. verbieten. Doch das betrifft nur die jeweilige HTML-Datei und maximal alle weiteren, durch Verweise erreichbaren Dateien. In einer zentralen robots.txt können Sie dagegen unabhängig von der Datei- und Verweisstruktur Ihres Web-Projekts festlegen, welche Verzeichnisse und Verzeichnisbäume ausgelesen werden dürfen, und welche nicht.
Die robots.txt muss unter diesem Namen (alle Buchstaben klein geschrieben) im Wurzelverzeichnis der Web-Dateien der Domain abgelegt werden. Wenn Sie also einen Domain-Namen mein-name.de haben, dann muss die robots.txt in dem Verzeichnis abgelegt werden, in dem auch die oberste Einstiegsdatei von www.mein-name.de liegt. Der URI wäre also http://www.mein-name.de/robots.txt. Nur so kann sie von Suchmaschinen-Robots, die das Projekt aufsuchen, gefunden werden. Das bedeutet, dass Sie die Technik der robots.txt nur nutzen können, wenn Sie eine eigene Domain haben, nicht aber bei Webspace-Angeboten, wo Sie lediglich ein Homepage-Verzeichnis auf einem Server erhalten, ohne an das Wurzelverzeichnis der Domain zu kommen.
Die robots.txt ist eine reine Textdatei und muss mit einem Texteditor bearbeitet werden.
Die erste Zeile ist lediglich eine Kommentarzeile. Kommentarzeilen werden durch ein Gatterzeichen # eingeleitet.
Ansonsten besteht eine robots.txt aus Datensätzen (records). Im obigen Beispiel sind zwei solcher Datensätze notiert.
Ein Datensatz besteht grundsätzlich aus zwei Teilen. Im ersten Teil wird angegeben, für welche Robots (User-agent) die nachfolgenden Anweisungen gelten. Im zweiten Teil werden die Anweisungen selbst notiert. Die Anweisungen bestehen darin, den zuvor bestimmten Robots etwas zu verbieten (Disallow).
Jede Zeile eines Datensatzes beginnt mit einem der zwei erlaubten Schlüsselwörter User-agent oder Disallow. Dahinter folgt, durch ein Doppelpunkt und Leerzeichen getrennt, die zugehörige Angabe. Zwischen den Datensätzen wird eine Leerzeile notiert. Innerhalb eines Datensatzes muss zunächst mindestens eine Zeile mit User-agent: beginnen. Dahinter ist immer nur eine Angabe möglich. Wenn Sie mehr als einen bestimmten Robot ansprechen möchten, müssen Sie mehrere Zeilen untereinander notieren, die mit User-agent: beginnen - so wie im ersten Datensatz des obigen Beispiels. Unterhalb der Zeilen, die mit User-agent: beginnen, werden die Zeilen notiert, die mit Disallow beginnen. Die Angaben dazu werden dann von den Robots beachtet, die im gleichen Datensatz mit User-agent spezifiziert wurden.
Bei User-agent: ist entweder die Angabe * (Sternzeichen) erlaubt, was so viel bedeutet wie "alle Robots", oder der Name eines bestimmten Robots. Diesen Namen müssen Sie allerdings kennen. Wenn Sie * angeben, sollte in dem gleichen Datensatz keine weitere Angabe zu User-agent folgen, da dies dem Platzhalter für "alle" widersprechen würde.
Hinter jeder Zeile, die mit Disallow: beginnt, können Sie jeweils eine Pfadangabe notieren. Die Robots werden diese Pfade auf Ihrer Seite dann nicht indizieren. Es besteht übrigens keine Möglichkeit, Verzeichnisse explizit für die Indizierung zu erlauben. Ein Schlüsselwort Allow: wurde niemals definiert.
Bei den Angaben zu Disallow: können Sie Verzeichnispfade und einzelne Dateien mit Pfadangabe angeben. Wildcards wie * oder *.* sind dabei nicht erlaubt. Achten Sie darauf, bei Verzeichnispfaden einen abschließenden Schrägstrich / zu notieren. Wenn Sie nämlich beispielsweise /index notieren, wäre auch die Datei /index.html betroffen, und nicht nur das Unterverzeichnis /index/.
Im ersten der obigen Beispiel-Datensätze wird angenommen, dass ein superschlauer Robot namens UniversalRobot/1.0 sowie ein selbstgestrickter Robot namens mein-Robot Daten aus dem Verzeichnis /quellen/dtd/ in ihre Suchmaschinen einspeisen. Das ist aber nicht erwünscht, weil in diesem Verzeichnis beispielsweise DTDs für XML-Dateien abgespeichert sind. Deshalb wird speziell diesen beiden Robots der Zugriff auf dieses Verzeichnis (und alle Unterverzeichnisse davon) verboten.
Im zweiten Datensatz wird allen Robots verboten, die beiden Unterverzeichnisse /unsinn/ und /temp/ auszulesen. Die Verzeichnisnamen sprechen ja für sich, und es ist leicht ersichtlich, wozu dieses Verbot gut ist: nämlich um überflüssigen Datenmüll in den großen Suchmaschinen zu vermeiden. Ferner wird der Zugriff auf die Datei newsticker.shtml verboten. Der Grund könnte sein, dass diese Datei von einem über Server Side Includes eingebundenen CGI-Script laufend aktuelle Daten erhält, weswegen es keinen Sinn hat, diese Datei in Suchmaschinen aufzunehmen.
Beachten Sie:
Mit der folgenden Syntax erlauben Sie keinem Suchmaschinen-Robot, auch nur irgendetwas von ihren Daten auszulesen: User-agent: *
Disallow: /
Mit / bestimmen Sie "alle Daten dieses Verzeichnisses und aller Unterverzeichnisse".
Mit der folgenden Syntax nehmen Sie einen bestimmten Robot namens mein-Robot von allen anderen Verboten aus: User-agent: mein-Robot
Disallow:
Durch eine fehlende Angabe hinter Disallow: wird alles erlaubt!
Web-Browser ignorieren die robots.txt. Es ist also nicht möglich, damit Daten vor Anwendern zu schützen. Lesen Sie zu diesem Zweck den Abschnitt .htaccess - Server-Reaktionen kontrollieren
Aus demselben Grund besteht auch keinerlei Garantie, dass sich Suchmaschinen an die Verbote in robots.txt halten. Ordentlich programmierte Robots beachten die Datei, aber Robots, die mit bösen Absichten das Web durchsuchen, halten sich vermutlich nicht daran. Wenn Sie Informationen sicher vor allen Augen verstecken wollen, richten Sie z.B. einen Passwortschutz ein.
Die in den W3-Spezifikationen immer wieder erwähnte "Angabe von Sprachenkürzeln" wird im RFC 1766 definiert. Diese Sprachenkürzel basieren auf den Normen ISO 639-1 zur Kurzbezeichnung von Sprachen und ISO 3166-1 zur Kurzbezeichnung
von Ländern. Diese von den beiden ISO-Normen vordefinierten Kürzel erlauben solche Angaben wie de für Deutsch, en für Englisch oder en-US für US-Englisch. Der RFC 1766 erlaubt darüber hinaus, feinere Abstufungen für schriftkulturelle, dialektale oder andere lokale Ausprägungen der gleichen Sprache registrieren zu lassen, so z.B. die beiden norwegischen Schriftsprachenvarianten, notiert durch no-nyn und no-bok (wobei diese - in Langform no-nynorsk und no-bokmaal im RFC 1766 beispielhaft aufgezählten -
Kürzel zwischenzeitlich veraltet sind, da es mittlerweile die zweibuchstabigen Kürzel nn und nb gibt). Für Sprachen, die in mehreren Ländern oder von bestimmten
Gruppen gesprochen werden, und bei denen die Länderzuordnung deshalb problematisch ist, wird das einbuchstabige Startkürzel i reserviert.
Die Reservierung erfolgt durch die Internet-Behörde IANA. So werden Bezeichnungen wie i-mingo (Eine
Sprache der Irokesen) möglich. Außerdem wird ein Startkürzel x für den privaten Gebrauch reserviert, wodurch Sprachenkürzel wie x-selfhtml (für "SELFHTMLisch") bezeichnet werden können.
Mittlerweile gibt es den RFC 3066, nach dem auch dreibuchstabige Sprachenkürzel nach der Norm ISO 639-2 erlaubt sind, etwa nds für Niederdeutsch. Die HTML- und CSS-Spezifikationen des W3-Konsortiums beziehen sich an den relevanten Stellen jedoch noch auf den älteren RFC 1766. Für XML gilt der neuere RFC 3066. Ebenso gibt es eine neuere Norm ISO 3166-1 alpha-3, die dreibuchstabige Ländercodes enthält. Maßgeblich für Internet-Belange sind aber in den meisten Fällen noch die älteren, zweibuchstabigen Kürzel.
Für Web-Autoren haben die Sprachenkürzel an folgenden Stellen Bedeutung:
Verschiedene HTML-Elemente haben Attribute, die als Wertzuweisung die Angabe einer Sprache erwarten. So gibt es das Universalattributlang, und ebenfalls erwartet wird eine Sprachangabe bei den Elementen (Attributen) a (hreflang) und link (hreflang).
In JavaScript haben die Sprachenkürzel beispielsweise bei der Eigenschaft navigator.language Bedeutung.
Im Zusammenhang mit der CGI-Schnittstelle gibt es die UmgebungsvariableHTTP_ACCEPT_LANGUAGE, in der solche Sprachenkürzel verwendet werden.
Länderkürzel nach ISO 3166 werden auch noch an anderen Stellen eingesetzt, so etwa bei den landesspezifischen Top-Level-Domains, wie sie beispielsweise in den Statistiken zu einem Web-Projekt auftauchen können.
Die folgenden Sprachenkürzel können Sie auch überall dort verwenden, wo Angaben nach RFC 1766 gefordert sind. In den meisten Fällen reichen die Original-Sprachenkürzel nach ISO 639-1 zur Bezeichnung der Sprache auch vollkommen aus.
Die Tabelle ist nach Kürzeln alphabetisch sortiert und erhebt keinen Anspruch auf aktuelle Vollständigkeit. Streichungen, Ergänzungen, Neueinträge von Sprachenkürzeln notiert die Library of
Congress (dokumentiert auf der Seite ISO 639-2/RA Change Notice).
Falls Sie solche Länderkürzel für zusammengesetzte Sprachenkürzel benutzen, um Ländervarianten von Sprachen zu bezeichnen, also etwa en-US oder de-CH, dann notieren Sie das Länderkürzel in Großbuchstaben. In anderen Zusammenhängen, etwa bei Top-Level-Domains, werden die Länderkürzel dagegen klein geschrieben.
Die Tabelle ist nach Kürzeln alphabetisch sortiert und erhebt keinen Anspruch auf aktuelle Vollständigkeit. Eine aktuelle Liste finden Sie auf der Webseite der International Organization for Standardization (ISO): English country names and code elements.
Wenn ein Web-Browser oder ein Such-Robot oder der Agent eines Proxy-Servers bei einem Web-Server Daten anfordert, schickt er immer auch eine Zeichenkette mit, mit der er sich dem Web-Server gegenüber "namentlich vorstellt". Ein einheitliches oder standardisiertes Schema dafür ist in der Spezifikation zu HTTP 1.1 definiert worden. Nach der Ankündigung der Vorstellung eines "User-Agents" (das ist der Oberbegriff für die anfangs genannten Programme, die Daten anfordern können) wird wenigstens ein Hinweis auf das Produkt oder ein Kommentar übersandt. Nicht definiert ist die für die Praxis notwendige Unterscheidung zwischen verschiedenen Produktversionen oder -typen. Das ist bedauerlich. In der Praxis hat sich eine gewisse Regel herausgeschält: Produktname und Produktversion werden in dieser Reihenfolge und durch Schrägstrich getrennt dargestellt. Es halten sich allerdings nicht alle Browser an dieses Schema. Einige Browser-Typen geben sich als andere aus, und wieder andere erlauben es auch dem Anwender an der Programmoberfläche, eine beliebige Identifikation einzustellen. Wenn der Anwender dann seinen Namen oder irgendeinen Unsinn eingibt, meldet sich der Browser damit beim Server an.
Dennoch wird die Client-Identifikation an verschiedenen Stellen gespeichert und kann in manchen Situationen zu nützlichen Zwecken dienen:
In JavaScript gibt es das navigator-Objekt, das es beispielsweise erlaubt, so genannte "Browserweichen" zu programmieren, um bestimmte JavaScript-Anweisungen nur auszuführen, wenn bestimmte Browser-Typen am Werk sind.
Ein CGI-Script kann die CGI-UmgebungsvariableHTTP_USER_AGENT auslesen, um herauszufinden, von welcher Client-Software es aufgerufen wurde. Auch dabei kann die Information dazu genutzt werden, um bestimmte Anweisungen abhängig auszuführen oder nicht auszuführen.
Bei Statistiken zu einem Web-Projekt gibt es in der Regel auch eine Statistiksorte, die Zugriffszahlen nach Browser-Typen sortiert aufschlüsselt. Grundlage dafür sind ebenfalls die Client-Identifikationen, die der Web-Server bei den Aufrufen erhalten hat.
Netscape gibt sich seit jeher mit dem Namen Mozilla aus. Eindeutig erkennbar ist er daran allerdings überhaupt nicht, denn der Internet Explorer gibt sich beispielsweise ebenfalls als Mozilla aus. Die folgenden Beispiele zeigen einige typische Identifikationen, die jedoch nur für Netscape typisch sind.
Mozilla/5.0b1 [en] (X11; N; Linux 2.2.0 alpha; Nav)
Erläuterung:
Das grundsätzliche Schema für Produktname und Version wird also eingehalten - die Identifikation startet immer mit Mozilla/[Versionsangabe]. Damit ist er allerdings noch nicht von vielen anderen Browsern unterscheidbar! Die Versionsangabe kann auch Zusatzangaben enthalten wie 5.0b1 (was eigentlich für Version 6.0 steht, da Version 5.0 übersprungen wurde, und b1 steht für "Betaversion 1"). Auch andere Zusätze wie 3.01Gold können vorkommen (Gold stand seinerzeit für die erste Variante des Netscape-Browsers, die zugleich WYSIWYG-Editieren erlaubte, also ein Vorläufer des Netscape Composer).
Hinter der Versionsangabe kann in eckigen Klammern ein Sprachenkürzel folgen, das die Sprache der Browser-Bedienelemente angibt. Das Sprachenkürzel ist bei neueren Versionen zwar Standard, aber es kann auch mal fehlen.
In runden Klammern folgen anschließend weitere Informationen. Mehrere davon werden durch Semikolon voneinander getrennt. Zunächst wird die verwendete Plattform genannt. Dabei sind Abkürzungen wie Win95, Win98 oder WinNT für entsprechende Windows-Versionen möglich. Bei allen Unix-basierten Systemen wird an der Stelle meistens X11 angegeben, was für X-Windows steht, und bei Mac-Rechnern Macintosh.
An zweiter Stelle innerhalb der runden Klammern folgt ein Großbuchstabe, der das Sicherheits-Level des Browsers bezeichnet (Länge von Schlüsseln). Ein U steht für "strong security (US)" (diese Version wurde früher aufgrund von Exportbestimmungen nur in den USA vertrieben), ein I für "weak security (international)" (das war die erlaubte Export-Version mit schwacher Verschlüsselung). Das N steht für "no security".
Hinter dem Sicherheitskennzeichen folgen dann noch beschreibende Informationen zum verwendeten Prozessortyp und/oder nähere Angaben zum Betriebssystem.
Alle Teile können Leerzeichen dazwischen haben, aber zwingend ist dies nicht.
Der Internet Explorer gibt sich in seiner Browser-Identifikation deutlich weniger selbstbewusst als sonst. Er versteckt sich stets hinter dem gleichen Codenamen wie die Netscape-Browser, gibt zunächst eine Versionsnummer an, die sich auf Netscape bezieht und rückt dann, durch das Schlüsselwort compatible eingeleitet, mit den Informationen über sich selber heraus. Die folgenden Beispiele zeigen einige typische Identifikationen des Internet Explorers.
Mozilla/4.0 (compatible; MSIE 5.0; AOL 4.0; Windows 95)
Mozilla/4.0 (compatible; MSIE 5.0; MSN 2.5; Windows 98)
Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)
Erläuterung:
Das grundsätzliche Schema für Produktname und Version folgt dem von Netscape und wird also eingehalten - die Identifikation startet immer mit Mozilla/[Versionsangabe]. Die Versionsangabe dahinter bedeutet, zu welcher Netscape-Browser-Version sich der ausgewiesene Internet Explorer voll kompatibel hält. Das ist natürlich immer mit gewissen Vorbehalten zu genießen, denn ein Internet Explorer hat beispielsweise zu keinem Zeitpunkt je das layer-Element in HTML interpretiert, also ist die Behauptung der Kompatibilität zu Netscape 4.0 nicht unbedingt haltbar. Von daher bringt die Versionsangabe hinter dem Mozilla/ beim Internet Explorer keine wirkliche Erkenntnis.
Seine eigentliche Identität verrät der Internet Explorer erst in den runden Klammern. Diese enthalten normalerweise mehrere Angaben, durch Semikolon getrennt. Der erste Teil ist stets das Schlüsselwort compatible. Dahinter folgen die vier Großbuchstaben MSIE, die eigentlich den Bezug zum Internet Explorer herstellen. Dahinter folgt die genaue Versionsangabe.
Alle weiteren Angaben können differieren und eine unterschiedliche Reihenfolge haben. Bei Betriebssystembezeichnungen fällt auf, dass Windows durchweg ausgeschrieben ist, während Macintosh-Versionen des Internet Explorers sich üblicherweise mit Mac plus Unterstrich plus nähere Bezeichnung ausgeben. Wenn es sich um eine Browser-Distribution eines Online-Dienstes wie AOL oder MSN handelt, wird dies in einem Zusatzeintrag wie AOL 4.0 verzeichnet.
Alle Teile können Leerzeichen dazwischen haben, aber zwingend ist dies nicht, besonders bei älteren Versionen nicht.
Die Beispiele zeigen, wie uneinheitlich die unterschiedlichen Browser-Typen sich identifizieren, was die Auswertung nicht gerade erleichtert. In der Regel hilft beim Analysieren beispielsweise mit einem Script nur, im ersten Schritt nach einschlägigen Schlüsselwörtern wie Opera, Mosaic, amaya, Lynx oder ICab zu suchen. Im zweiten Schritt können Sie dann versuchen, durch Suchen nach Teilausdrücken wie Win, Mac, Amiga usw. das Betriebssystem herauszufinden.
Es gibt kein Patentrezept, um "menschliche Seitenbesucher" von Software-Programmen zu unterscheiden, die beim Aufrufen der Web-Seiten im Batchbetrieb arbeiten und beispielsweise die Daten für ihre Suchmaschine indizieren oder Dateien an einen Proxy-Rechner übertragen. Die folgenden Beispiele zeigen ein paar typische Identifikationen solcher Programme.
Identifikation
Eule Robot v3.00 (www.eule.de)
FAST-WebCrawler/0.3 (crawler@fast.no)
Googlebot/2.1 (+http://www.google.com/bot.html)
JCrawler/0.3 (robot; webmaster@netimages.com)
Netscape-Proxy/3.52 (Batch update)
Openfind Robot/1.1A2
W3CRobot/4.0D
WebCrawler/2.0
Lycos_Spider_(T-Rex)/3.0
Aladin/3.324
taz.northernlight.com Gulliver/1.3
Openfind Robot/1.1A2
KIT-Fireball/2.0
URL-Minder/2.4.5
Erläuterung:
Bei Suchmaschinen-Robots gibt es zumindest einige Anhaltspunkte, nach denen sich eine Identifikationszeichenkette durchsuchen lässt. Solche Robots identifizieren sich oft mit Schlüsselwörtern wie Robot, Spider oder Crawler. Viele von ihnen tragen im Namen auch den Namen des zugehörigen Suchdienstes. In den obigen Beispielen sind etwa Google, Fireball, Lycos, Eule, Northernlight und Aladin erkennbar. Generell sind Robots und auch Agenten von Proxy-Servern häufig daran erkennbar, dass sie bei der Identifikation einen Domain-Namen, einen URI oder eine E-Mail-Adresse angeben.
Bei paletten-orientierten Grafiktypen wie dem GIF-Format.
Über die in HTML und CSS angebotenen syntaktischen Möglichkeiten können Sie bis zu 16,7 Millionen verschiedene Farbwerte kodieren. Es gibt jedoch Standard-Paletten, die ganz bestimmte dieser 16,7 Millionen möglichen Farbwerte benutzen. Zwar besteht kein Zwang, sich an diese Paletten zu halten, doch wenn keine gestalterischen Gründe dagegensprechen, bieten diese Paletten eine gewisse Orientierung. Auf jeden Fall haben solche Farbpaletten einen technischen Vorteil: die Chance, dass die Farben auf verschiedenen Hardware-Typen und verschiedenen Betriebssystemen gleich aussehen, ist größer als bei Farben mit "beliebigen" Farbtönen.
Die VGA-Palette ist der kleinste gemeinsame Nenner aller VGA-kompatiblen Grafikkarten und Bildschirme. Für die 16 Farben der VGA-Palette sind in HTML und CSS auch die vordefinierten Farbnamen erlaubt.
Diese Farbpalette wurde seinerzeit von Netscape eingeführt. Alle Netscape-Browser sorgen dafür, dass Farben aus dieser Palette plattformübergreifend richtig dargestellt werden.
Dies ist eigentlich keine Farbpalette im engeren Sinn, sondern eine lose Sammlung von Farben mit bestimmten Farbwerten. Die Sammlung wurde seinerzeit von Netscape eingeführt, um zusätzlich zu der Palette mit den 216 Farben, die einem algorithmischen Schema folgen, noch ein paar vordefinierte Farbtöne für Zwischentöne und Pastellfarben anzubieten. Diese Farbnamen werden von der Mehrzahl der modernen Browser bei Farbangaben in HTML oder CSS interpretiert.
Dieses Kapitel behandelt technische Details, die zum "Werkzeug" eines professionellen Web-Autors gehören, und die zum Teil in verschiedenen anderen Zusammenhängen von Bedeutung sind. In den jeweiligen Abschnitten wird darauf hingewiesen, an welchen Stellen das entsprechende Wissen von Bedeutung ist. Sinnvolle Vorkenntnisse zum Verständnis sind eigentlich alle übrigen Kapitel.
MIME steht für Multipurpose Internet Mail Extensions. Aus dem Namen geht hervor, dass das, was da spezifiziert wird, ursprünglich für E-Mails gedacht war - und zwar für E-Mails mit Attachments (englisch für Anhang). Solche so genannten Multipart-Mails enthalten die gesamten zu übertragenden Daten in einer Datei. Innerhalb der Datei musste eine Konvention gefunden werden, wie die einzelnen Teile (z.B. Text der E-Mail und angehängte ZIP-Datei) voneinander zu trennen seien. Dabei wurde auch ein Schema entwickelt, das der interpretierenden Software mitteilt, um welchen Datentyp es sich bei dem jeweils nächsten Teil der E-Mail handelt.
Das Schema erwies sich nicht nur für E-Mails als nützlich. Fast immer, wenn entfernte Programme (z.B. Web-Browser und Web-Server) wegen einer bevorstehenden Datenübertragung miteinander kommunizieren, geht es auch um die Art der zu übertragenden Daten. Dabei hat sich im gesamten Internet das Schema der MIME-Typen durchgesetzt. Auch im Web stößt man an verschiedenen Stellen auf MIME-Typen:
Verschiedene HTML-Elemente haben Attribute, die als Wertzuweisung die Angabe eines MIME-Typen erwarten, nämlich a (type), form (accept und enctype), input (accept), link (type, object (codetype und type), param (type), script (type) und style (type)
Wenn ein CGI-Script an den aufrufenden Browser einen HTTP-Header sendet, muss es den MIME-Typ der nachfolgenden Daten senden.
In JavaScript gibt es ein eigenes Objekt MIME-Typen, das es erlaubt, in JavaScript die verfügbaren MIME-Typen des Browsers zu ermitteln.
Sowohl jeder Web-Browser als auch jeder Web-Server führt eine Liste mit ihm bekannten MIME-Typen. Bei der Kommunikation müssen sie sich darauf einigen, ob der Empfänger den MIME-Typ akzeptiert, den der Sender senden will. Moderne Browser akzeptieren zwar in der Regel jeden MIME-Typ und bieten dem Anwender einfach an, falls sie den MIME-Typ nicht kennen, die zu empfangenden Daten als Download-Datei abzuspeichern. Web-Server sind dagegen meist empfindlicher. MIME-Typen, die sie nicht kennen, verarbeiten sie nicht. Gerade wenn auf dem Server-Rechner nicht alltägliche Dateiformate bereitgestellt werden, ist es wichtig, den MIME-Typ dafür in der Konfiguration des Web-Servers zu notieren.
Bei Standard-Dateiformaten sollten Sie unbedingt die MIME-Typ-Angaben verwenden, die dafür etabliert sind. Die Übersicht auf dieser Seite weiter unten listet viele bekannte MIME-Typen auf. Wenn Sie trotz Recherchen, zum Beispiel im IANA-Verzeichnis der Media-Typen keinerlei Anhaltspunkte dafür finden, ob es zu einem Dateiformat einen bereits etablierten MIME-Typ gibt, können Sie selber einen festlegen. Gleiches gilt für völlig eigene Dateiformate.
Dazu müssen Sie das Schema der MIME-Typen kennen. Ein MIME-Typ besteht aus zwei Teilen: der Angabe eines Medientyps und der Angabe eines Subtyps. Beide Angaben werden durch einfachen Schrägstrich voneinander getrennt. Beispiele: text/html, image/gif.
Bei den Medientypen gibt es folgende: text = für Textdateien image = für Grafikdateien video = für Videodateien audio = für Sound-Dateien application = für Dateien, die an ein bestimmtes Programm gebunden sind multipart = für mehrteilige Daten message = für Nachrichten model = für Dateien, die mehrdimensionale Strukturen repräsentieren
Subtypen für server-eigene Dateiformate, d.h. Dateitypen, die auf dem Server ausgeführt werden können, werden meist mit x- eingeleitet.
Das Schema der MIME-Typen wird in den Requests for Comments (RFCs) mit den Nummern 2045, 2046 und 2077 festgelegt.
SELFHTML besteht aus mehr als 1.500 Buchseiten. Bei solchen Datenmassen ist es ganz normal, dass viele kleine, zum Teil versteckte Fehler im Text oder in Beispielen enthalten sind. Die SELFHTML-Redaktion hat sich bemüht, so viele wie möglich aus dem Weg zu räumen. Aber absolute Fehlerfreiheit ist bei einem Projekt dieses Umfangs leider nicht im Bereich des Menschenmöglichen.
Doch Fehler kann man korrigieren. Damit alle Korrekturen eine einheitliche Form haben, die das Bearbeiten erleichtert, werden Meldungen zu Fehlern in SELFHTML über das Formular auf dieser Seite abgewickelt. Gemeldete Fehler werden gesammelt und Korrekturen in kommende SELFHTML-Versionen eingearbeitet.
Dieses Formular ist nicht für allgemeine Anfragen und Verbesserungsvorschläge gedacht. Bitte benutzen Sie dafür den Kontakt-Assistenten.
Zum Absenden des Formulars ist eine Verbindung ins Internet erforderlich. Die Daten werden in einer öffentlich zugänglichen Datenbank auf bugs.selfhtml.org gespeichert. Dort können Sie die Bearbeitung der Fehlermeldung verfolgen und um doppelte Meldungen zu vermeiden bereits gemeldete Fehler durchstöbern.
Name und E-Mail-Adresse werden für eventuelle Rückfragen benötigt. In der Regel bekommen Sie keine Antwort der Redaktion, wenn der gemeldete Fehler behoben ist. Bitte beachten Sie, dass diese Kontaktdaten ebenfalls öffentlich zugänglich sein werden. Sie müssen Name und E-Mail-Adresse daher nicht angeben.
Mit * gekennzeichnete Felder müssen ausgefüllt werden.
Die Texte von SELFHTML sind durch das Urheberrecht geschützt. Das Verwenden von Texten aus SELFHTML auf eigenen Web-Seiten oder in anderen Medien verletzt das Urheberrecht und wird bei Entdecken zunächst durch die SELFHTML-Redaktion abgemahnt (kostenlos). Sollte das nichts bewirken, wird anwaltlich abgemahnt (kostenpflichtig). Sollte auch das nichts bewirken, werden gerichtliche Schritte eingeleitet. Da SELFHTML auch als Buch erscheint, entstehen im Falle von Textklau außerdem Rechtsansprüche des Buchverlags.
Web-Anwender werden dazu ermutigt, entdeckte Verstöße an die SELFHTML-Redaktion zu melden. Sie helfen dadurch, die Qualität von SELFHTML zu sichern und das Rechtsbewusstsein von Leuten zu schärfen, die meinen, es sei alles erlaubt, wenn man nur wisse, wie "Copy & Paste" funktioniert.
Einzelne Dinge aus SELFHTML dürfen allerdings durchaus kopiert und übernommen werden. Einzelheiten dazu finden Sie auf der Seite Häufig gestellten Fragen zu SELFHTML.
Das Kopieren und Weitergeben des Dokuments ist erlaubt. Bedingung ist, dass das Dokument stets in vollständiger Form (mit allen Dateien) und in unveränderter Form kopiert und weitergegeben wird. Die Anzahl erlaubter Kopien ist unbegrenzt.
Das Veröffentlichen im Web, in Intranets, in Online-Diensten, Mailboxen oder ähnlichen Medien ist erlaubt. Ebenfalls erlaubt ist das Veröffentlichen auf Datenträgern wie CD-ROMs oder DVDs, auch wenn diese Datenträger kommerziell orientiert sind. Bei kommerziellen Datenträgern besteht jedoch die Einschränkung, dass SELFHTML dort nur Teil einer Sammlung sein darf (z.B. "alles für die eigene Homepage" - mit Software, Dokumentation usw.), nicht jedoch der zentral vertriebene Inhalt. Bei nichtkommerziellen Datenträgern (z.B. Schüler-Distributionen zum Selbstkostenpreis) darf SELFHTML dagegen auch zentraler Datenträgerinhalt sein.
Bedingung bei allen Veröffentlichungen ist, dass das Dokument stets in vollständiger Form (mit allen Dateien) und in unveränderter Form veröffentlicht wird. Nicht erlaubt ist das Einbetten in fremde Framesets oder fremde Seiten. Ebenfalls nicht erlaubt ist das Einfügen von Fremdwerbung in SELFHTML, z.B. Banner-Werbung.
Das Ändern des Dokuments ist generell nicht erlaubt. Das gilt sowohl für den Inhalt als auch für das Dateiformat. Auch das Entfernen unliebsamer Passagen ist nicht erlaubt. Einzige Ausnahme: siehe SELFHTML anpassen. Weitere Ausnahmen wie z.B. Änderungen aufgrund juristischer Probleme sind mit der SELFHTML-Redaktion abzuklären.
Ein zentrales Merkmal der SELFHTML-Dokumentation ist, dass sie kostenlos kopiert, verteilt und weitergegeben werden darf. Als Folge wurde SELFHTML im Laufe der Zeit von Hunderten auf ihrem Webspace zu verschiedenen Zwecken wiederveröffentlicht. Diese Kopien von SELFHTML werden im folgenden "Mirrors" (zu Deutsch "Spiegel") genannt. Damit sind nicht die Download-Mirrors gemeint, welche die nicht entpackte, offizielle Zip-Datei beherbergen, sondern Websites, die die entpackten HTML-Dateien von SELFHTML enthalten.
Beim Kopieren von SELFHTML auf andere Websites sind einige Praktiken aufgekommen, die der SELFHTML-Redaktion mitunter übel aufstoßen. Laut Weitergabe und Wiederveröffentlichung ist das Verändern von SELFHTML grundsätzlich nicht gestattet. Insbesondere ist das Einbinden von Werbung ausdrücklich untersagt. Dennoch wird die Redaktion regelmäßig mit Mirror-Betreibern konfrontiert, die SELFHTML als kostenlose Basis für deren kommerzielle Interessen ansehen.
Ein weiteres Problem aus Sicht der Redaktion ist, dass sich immer mehr veraltete SELFHTML-Versionen im Web finden. Denn viele Webmaster, die einmal eine SELFHTML-Kopie veröffentlicht haben, aktualisieren sie nicht, wenn eine neue SELFHTML-Version erscheint. Suchmaschinen-Nutzer werden dadurch auf Mirrors gelenkt, die veraltete oder fehlerhafte Informationen enthalten. Eine Suche nach SELFHTML + Suchbegriff liefert mittlerweile unzählige irrelevante Treffer. Dies konterkariert die Bestrebungen der Redaktion, Irrtümer und Ungenauigkeiten zu beheben und hilfreiche Erweiterungen zu erarbeiten.
Aus diesen und weiteren Gründen steht die SELFHTML-Redaktion Mirrors allgemein kritisch gegenüber und möchte das Verteilen von SELFHTML in dieser Form langfristig nicht mehr unterstützen. Bei zukünftigen SELFHTML-Versionen wird die Erlaubnis für das Fremdhosting wohl nicht mehr gegeben sein – von einigen gerechtfertigten Ausnahmen abgesehen. Wir ersuchen daher um Verständnis für folgende Anliegen:
Wir bitten Site-Betreiber, vom Anlegen weiterer öffentlicher SELFHTML-Mirrors abzusehen.
So Sie auf Ihrem Webspace bereits einen SELFHTML-Mirror betreiben und dieser nicht unbedingt benötigt wird, ersuchen wir darum, den Mirror zu entfernen und eine Weiterleitung zur offiziellen SELFHTML-Adresse http://de.selfhtml.org/ einzurichten.
Sollten Sie trotz der oben angeführten Gründe weiterhin einen Mirror betreiben wollen, aktualisieren Sie diesen bitte möglichst zeitnah auf die jeweils aktuelle Version.
Zur Erklärung: Mirrors der Version 8.1.2 sind weiterhin erlaubt. Allerdings gibt es gewisse Bedingungen, die an diese Erlaubnis geknüpft sind.
Mit diesen Maßnahmen wollen wir keinesfalls die freie Nutzung und Verbreitung von SELFHTML einschränken. Die Verbreitung der Dokumentation im Zip-Format sowie das Anlegen von Kopien für private und interne Zwecke werden wir immer erlauben und begrüßen. Wir möchten lediglich, dass sich langfristig die SELFHTML-Mirrors im öffentlichen Web reduzieren.
Ein nachvollziehbarer Grund für Veränderungen an der Dokumentation ist die Einbindung eines rechtlich relevanten Impressum-Verweises durch Fremdhoster. Dies ist unter Einhaltung der im Folgenden beschriebenen Richtlinien erlaubt.
Gewünschtes Verhalten von Fremdhostern:
Ein dezenter Verweis auf den Hoster selber. Dezent bedeutet einen Textlink und keine ausufernde Grafik. Idealerweise geschieht dies mit einer der beiden unten vorgeschlagenen SELFHTML-Varianten. Beispiel
Eine Indizierung der gehosteten SELFHTML-Kopie durch Suchmaschinen ist ausdrücklich zu vermeiden. Dies geschieht z.B. mit der Datei robots.txt. In allen Download-Varianten sind Meta-Angaben zur Vermeidung der Indizierung enthalten – diese dürfen keinesfalls entfernt werden.
Eine zeitnahe Aktualisierung auf die jeweils neueste Version von SELFHTML.
Ausdrücklich nicht erlaubt sind:
Das Einbinden von Fremdwerbung, beispielsweise Google AdSense.
Das Einbinden von SELFHTML in ein Frameset.
Jegliche Veränderungen am Aussehen von SELFHTML.
Jegliche Veränderungen am Inhalt von SELFHTML.
Die Redaktion beabsichtigt keinesfalls, dem grassierenden Abmahnwahn Vorschub zu leisten, sondern ersucht um Verständnis für die Tatsache, dass veraltete oder verunstaltete Spiegelungen nicht im Sinne des Projekts sind und appelliert daher an die Fairness aller Betreiber, sich an die genannten Richtlinien zu halten.
Bei den folgenden Vorlagen handelt es sich um Zip-Dateien, die wie gewohnt alle Dateien der SELFHTML-Dokumentation 8.1.2 enthalten. Darüber hinaus wurde in beiden Vorlagen für alle inhaltstragenden Seiten ein Absatz mit der ID #mirror-impressum eingefügt, der in der Standard-Download-Version von SELFHTML nicht enthalten ist.
<p id="mirror-impressum">gehostet von <a href="http://example.org/">example.org</a></p>
Der Inhalt dieses Absatzes kann auf zwei unterschiedliche Arten an Ihre Bedürfnisse angepasst werden. Beide hier vorgestellten Vorlagen sind im Prinzip gleich, allein die Variante der Anpassung ist für den Fremdhoster entscheidend.
Gute Texteditoren oder andere Programme bieten es an, dateiübergreifend bestimmte Textstücke durch andere zu ersetzen. In obigem Download-Archiv befindet sich innerhalb des Absatzes mit der ID #mirror-impressum dieser Text:
8cd8b420-79e7-11db-9fe1-0800200c9a66
So seltsam der Text auch aussieht, ist er doch in SELFHTML einmalig. Wird dann über alle Dateien von SELFHTML nach dieser Zeichenkette gesucht, kann man genau innerhalb dieses Absatzes HTML-Quellcode einbinden, genauer den dezenten Verweis auf das Impressum.
Server Side Includes bieten eine bequeme Variante, auf Seiten des Servers bestimmte Seitenteile zentral vorzuhalten. In den meisten kommerziellen Webhosting-Angeboten sind diese aktiviert. In obigem Download-Archiv ist eine .htaccess-Datei enthalten, die dem Webserver Apache mitteilt, dass alle *.htm-Dateien von SELFHTML als Server Side Includes behandelt werden sollen.
Options Includes
AddHandler server-parsed .htm
Die Unterstützung von SSI ist also davon abhängig, ob der Hoster es erlaubt, Server Side Includes zu aktiviereren und diese auf *.htm-Dateien anzuwenden. Um dies zu eruieren, kontaktieren Sie bitte Ihren Hoster.
Sollte SSI-Unterstützung vorhanden sein, geschieht die Anpassung des Impressum-Verweises durch das Editieren der Datei mirror-impressum.shtml in obigem Archiv. In der Datei befindlicher HTML-Quellcode wird dann mittels SSI auf allen Seiten von SELFHTML zwischen <p id="mirror-impressum und dem End-Tag </p> eingebunden.
Dieses Dokument ist keine Publikation einer offiziellen Stelle. Das Dokument erhebt weder den Anspruch auf Vollständigkeit noch auf Fehlerfreiheit. Für Fehler in kommerziellen Web-Seiten, die auf falsche oder falsch verstandene Beschreibungen in diesem Dokument zurückzuführen sind, übernehmen Autor und Redaktion keine Haftung.
Zielgruppe sind alle Computer-Anwender, die einen Web-Browser ihr Eigen nennen, die möglichst schon einige "Surf"-Erfahrungen im Web gesammelt haben und die nun wissen möchten, wie man selbst Web-Seiten erstellt. Alle Menschen, die sich privat, ehrenamtlich oder beruflich mit dem Erstellen von Web-Seiten beschäftigen, sind angesprochen. Erklärtes Ziel des Dokuments ist es, Menschen Mut zu machen, das, was sie zu sagen haben, selbst im Web zu publizieren und dadurch aktiv an der World Wide Web Revolution teilzunehmen. Denn das Motto des Web lautet: "Everyone's a publisher".
SELFHTML enthält sowohl einführende Kapitel für Anfänger als auch reine Nachschlagekapitel für Profis. Die Dokumentation ist eine Mischung aus Tutorial und Referenz.
Das Motto - die Energie des Verstehens - ist ernst gemeint. SELFHTML richtet sich nicht an Leute, die mit dem Anspruch antreten, alles fertig vorgesetzt zu bekommen und dann damit prahlen zu können, was sie tolles Eigenes geschaffen haben. Diese Dokumentation ist kein "Ihre-Homepage-in-zehn-Minuten"-Quickie. Das Dokument möchte erreichen, dass seine Anwender verstehen was sie lernen und wissen was sie tun, wenn sie an eigenen Web-Seiten arbeiten. Es richtet sich an Lernwillige, die bereit sind, sich mit einer faszinierenden Materie auseinander zu setzen, die aber immer wieder neue Fragen aufwirft, mitunter zur Verzweiflung treibt und viel Zeit zum Entdecken und Ausprobieren erfordert.
Gegenüber der Version 8.1.1 hat sich folgendes geändert:
Es wurden zahlreiche Tippfehler, Ungenauigkeiten und fachlich fehlerhafte Abschnitte korrigiert. In unserer Fehlerdatenbank finden Sie eine (unvollständige) Auflistung der behobenen Fehler.
Die Symbole für die Browserunterstützung wurden abermals vervollständigt. Insbesondere wurden Internet Explorer 7, Firefox 1.5 und 2.0, Opera 8.54, 9.00 und 9.10 sowie Safari 1.0, 2.0 und WebKit (Entwicklerversion) eingepflegt.
In das gesamte CSS-Kapitel wurde CSS 2.1 eingearbeitet, was die Änderung einiger Beispiele nach sich zog.
Die CSS-Eigenschaft outline wurde ergänzt, ebenso die Beschreibung von @charset.
Die CSS-Sidebar wurde um bereits verfügbare Entwürfe von CSS3-Modulen erweitert.
Die Erläuterungen zum CGI-Modul (Perl-Kapitel) wurden erheblich erweitert und modernisiert.
Gegenüber der Version 8.1 hat sich folgendes geändert:
Es wurden zahlreiche Tippfehler, Ungenauigkeiten und fachlich fehlerhafte Abschnitte korrigiert. In unserer Fehlerdatenbank finden Sie eine (unvollständige) Auflistung der behobenen Fehler.
Die Symbole für die Browserunterstützung wurden korrigiert und vervollständigt. Insbesondere wurde mit Konqueror von Version 3.1 bis 3.4 und mit Safari von Version 1.0 bis 2.0 getestet (letzterer allerdings nicht vollständig).
In der JavaScript-Objektreferenz wurden zahlreiche Objekt-Beschreibungen und Anzeigebeispiele verbessert und einige Objekte ergänzt.
Navigationshilfen: Neu dazu gekommen sind Sidebars für JavaScript/DOM, XSLT/XPath und CGI/Perl mit Verweisen innerhalb von SELFHTML, zu W3C-Spezifikationen und Hersteller-Referenzen sowie eine Sidebar für SELFHTML aktuell.
Die Seite über CSS-Sprachausgabe wurden um englischsprachige Beispiele erweitert, um Operas Sprachausgabe Opera Voice zu demonstrieren.
Gegenüber der Version 8.0 hat sich folgendes geändert:
Neu dazu gekommen ist das Unterkapitel CSS-basierte Layouts. Das Kapitel wurde dringend nötig, nachdem CSS als Basis für Webseitenlayouts immer mehr Bedeutung gewinnt.
Neu dazu gekommen ist das Hauptkapitel Webserver/CGI. In das Kapitel sind teilweise Informationen eingeflossen, die vorher in den Kapiteln über Perl und in den diversen technischen Ergänzungen standen. Es sind aber auch neue Seiten zum Apache-Webserver dazu gekommen. Diese Informationen sind wichtig, da der Apache-Server immer stärker zum defacto-Standard für Webserver im Internet wird.
Die Symbolauszeichnungen, welcher Browser welche Features unterstützt und zu welchem Standard diese gehören oder nicht gehören, wurden aktualisiert.
Navigationshilfen: Neu dazu gekommen sind Sidebars für HTML und CSS mit Verweisen innerhalb von SELFHTML, zu W3-Spezifikationen und Hersteller-Referenzen. Verbessert wurde außerdem die eingebaute Suche: Die Suchergebnisse sind nun mittels Karteireiter übersichtlicher aufbereitet und besonders gute Treffer sind den Volltext-Suchergebnissen vorangestellt. Die Suche ist nun nicht nur lokal, sondern auch online verwendbar.
Im Laufe der Monate und Jahre nach Erscheinen der SELFHTML-Version 8.0 wurden hunderte von Fehlern gemeldet, unter denen die meisten der Kategorie "Tippfehler" angehörten, aber auch diverse fachliche Fehler in Beispielen, sowie lückenhafte oder missverständliche Darstellungen. Die SELFHTML-Redaktion hat viel Aufwand betrieben, um diese Fehler und Mängel zu beseitigen. SELFHTML hat dadurch mit der vorliegenden Version deutlich an Detailgenauigkeit gewonnen.
Die weitere Entwicklung von SELFHTML
Seit Version 8.1 ist SELFHTML kein reines Autorenprojekt von Stefan Münz mehr. Das gesamte SELFHTML-Projekt mit den angeschlossenen Online-Angeboten ist so umfangreich und anspruchsvoll geworden, dass längst ein ganzes Team von Developern für den laufenden Betrieb sorgt. Für die Dokumentation SELFHTML ist jetzt ein Redaktionsteam verantwortlich, dem der bisherige Alleinautor Stefan Münz selbstverständlich angehört und beratend zur Seite steht. Ferner ist der Verein SELFHTML e.V. gegründet worden, der das SELFHTML-Projekt vertritt und sich für sein Weiterbestehen einsetzt.
Frühere Versionen
Frühere Versionen von SELFHTML finden Sie im Online-Angebot von SELFHTML aktuell unter SELFHTML (alte Versionen).
SELFHTML steht an vielen Adressen im Web. Bitte haben Sie Verständnis dafür, dass nicht an jeder Adresse die neueste Dokumentversion steht. Das Redaktions-Team pflegt nur die offizielle Adresse. Deshalb finden Sie auch nur auf den SELFHTML-Servern mit Sicherheit die jeweils neueste Version des Dokuments.
Die Original-Online-Version der Dokumentation SELFHTML hat die Adresse:
Neben der Dokumentation SELFHTML gibt es auch noch den erweiterten Raum von SELFHTML aktuell. Die Einstiegsseite zu SELFHTML aktuell ist zugleich die "Portalseite" zu allem rund um SELFHTML.
Wenn Sie einen Link auf SELFHTML setzen wollen, empfiehlt es sich, den Link auf die Adresse der Portalseite zu setzen.
Über die Portalseite erreichen Sie über einen Verweis sowohl die Original-Online-Version der Dokumentation SELFHTML als auch die zahlreichen Angebote des erweiterten Angebots von SELFHTML aktuell.
Wichtige Seiten und Bereiche im erweiterten Angebot von SELFHTML aktuell sind:
Diese Version von SELFHTML verwendet den HTML-Standard 4.01 zur Darstellung. Bei veralteten oder textbasierten Browsern können in einigen Fällen Anzeigeprobleme auftreten, die meisten Informationen sollten jedoch auch mit solchen Browsern lesbar sein.
Bei der Quickbar, der Suche und bei den Kleinen Helferlein wird JavaScript eingesetzt. Diese Teile funktionieren also nur, wenn JavaScript verfügbar und aktiviert ist.
Windows XP SP2
Die Installation des Service Pack 2 für Windows XP führt zu einer Beeinträchtigung der Benutzbarkeit von SELFHTML im Internet Explorer, wenn Sie die Dokumentation von der Festplatte oder von einer CD/DVD aus lesen. Lokale HTML-Seiten, die JavaScript-Elemente enthalten, lösen im Internet Explorer bei jedem Aufruf eine Warnmeldung aus. Wie Sie diese Warnmeldung umgehen können, erläutert der Beitrag Tipps und Tricks: Umgehen der Sperrung der lokalen Zone auf SELFHTML aktuell.
Wenn Sie SELFHTML lokal nutzen und Ihnen einzelne Details des Layouts nicht passen, können Sie das Stylesheet von SELFHTML ändern:
Wechseln Sie dazu auf Betriebssystemebene in das Verzeichnis, in dem Sie SELFHTML abgelegt haben und von da aus in das Unterverzeichnis src. Dort finden Sie unter anderem die beiden Dateien selfhtml.css und selfnosize.css.
Benennen Sie die Datei selfhtml.css um in selfnormal.css.
Benennen Sie die Datei selfnosize.css um in selfhtml.css.
Wählen Sie in Ihrem Browser bei angezeigtem SELFHTML die Reload-Funktion.
Nun wird ein Stylesheet verwendet, in dem keine fixen Angaben zur Schriftgröße enthalten sind. Der Browser zeigt die bei Ihnen eingestellten Normalschriftgrößen an.
Bevor Sie SELFHTML an andere Personen weitergeben oder im Web oder auf Datenträger veröffentlichen, stellen Sie jedoch bitte den Originalzustand wieder her. Benennen Sie dazu Ihre Datei selfhtml.css wieder um in selfnosize.css und selfnormal.css wieder um in selfhtml.css.
Dieses Dokument hat bereits etlichen Lebensläufen eine neue Richtung gegeben. Manche Menschen haben über Nacht ihren bisherigen Job geschmissen und sich ins Abenteuer "Web-Publishing" gestürzt. Sicher war es niemals nur dieses Dokument allein - eine entsprechende innere Bereitschaft war und bleibt stets die Voraussetzung für entscheidende berufliche oder persönliche Veränderungen. Doch die Initialzündung, die das Dokument bei vielen Menschen ausgelöst hat, soll zumindest nicht verschwiegen werden - nicht aus Autoreneitelkeit, sondern als gutgemeinte Warnung. Das Gebiet, auf das Sie sich mit dieser Dokumentation begeben, ist riesig, hat viele verschiedene Facetten und kann süchtig machen. Um darin erfolgreich zu sein, ist jedoch viel Erfahrung erforderlich, die nicht in ein paar Tagen, auch nicht in ein paar Wochen zu haben ist. In den Weiten des "Landesinneren" werden Sie viel Geduld brauchen, und Sie müssen mit Pannen, Raubrittern und Irrwegen rechnen. Als Belohnung dafür können Sie Ihr eigenes Stück Land beackern, neue Menschen kennen lernen und zu einem aktiven "Webber" werden.
Die SELFHTML-Community, das ist die Gemeinschaft aller, die sich regelmäßig in Foren und Chats rund um SELFHTML herumtreiben und auch vor Live-Treffen nicht zurückschrecken. Damit geben sie dem SELF-Raum sein Gepräge und verleihen ihm erst richtig Leben. Danke an all diese Wissens- und Lebensspender.
Danke an alle, die SELFHTML benutzt, weiterempfohlen oder im Unterricht eingesetzt haben. Danke vor allem auch noch einmal an jene, die SELFHTML im Kampf gegen den Abmahnwahn durch Spenden oder Know-How unterstützt haben (siehe auch Recht und Links), an jene, die durch ihre Spende dazu beigetragen haben, dass SELFHTML sich eine den Erfordernissen des Projekts gerecht werdende Server-Hardware zulegen konnte, sowie an die vielen Menschen, die sich für SELFHTML engagiert haben (siehe SELFHTML bedankt sich ...).
Die folgenden Symbole werden in SELFHTML verwendet.
Symbol
Bedeutung
Geschlossener kleiner Ordner - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zur Übersichtsseite eines größeren Abschnitts innerhalb von SELFHTML.
Geöffneter kleiner Ordner - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einem übergeordneten Bereich von SELFHTML. Verweise dieser Art finden Sie in der Kopf- und Fußleiste auf den einzelnen Seiten. Mehrere übergeordnete Ebenen werden von links an eingerückt dargestellt.
Geschlossener großer Ordner - Dieses Symbol kommt im hellgrauen Kopfbereich von Seiten vor und bedeutet: die aktuelle Seite ist eine Kapitelübersichtsseite. Die Seite enthält selbst keine besonderen Informationen, sondern lediglich Verweise zu untergeordneten Seiten, in denen die eigentlichen Informationen enthalten sind.
Kleines Seitensymbol. Datei oder Textstelle innerhalb des Dokuments - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Stelle mit konkreter Information. Das Symbol wird auch bei Querverweisen verwendet.
Kleines Seitensymbol für Beispiel-Seiten, z.B. Seiten mit Anzeigebeispielen oder Quellenhinweisen. Wenn Sie den daneben stehenden Verweis anklicken, wird die entsprechende Seite geladen.
Großes Seitensymbol - Dieses Symbol kommt im hellgrauen Kopfbereich von Seiten vor und bedeutet: die aktuelle Seite ist eine informationstragende Seite.
Pfeilsymbol für eine Textstelle auf der gleichen Seite weiter unten - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Stelle innerhalb der gleichen Datei weiter unten.
In hellgrauen Balken ohne nebenstehenden Verweis: anklicken, um zum Seitenende zu springen.
Pfeilsymbol für eine Textstelle auf der gleichen Seite weiter oben - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Stelle innerhalb der gleichen Datei weiter oben.
In hellgrauen Balken ohne nebenstehenden Verweis: anklicken, um zum Seitenanfang zu springen.
Pfeilsymbol für die vorhergehende Seite. Steht am Ende von Informationsseiten und bedeutet: zur vorhergehenden Seite blättern.
Pfeilsymbol für die nächste Seite. Steht am Ende von Informationsseiten und bedeutet: zur nächsten Seite blättern.
Symbol für E-Mail. Wenn Sie den daneben stehenden Verweis anklicken, können Sie eine E-Mail an die betreffende Person absetzen.
Geschlossener kleiner Ordner; hautfarben - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Übersichtsseite eines größeren Abschnitts im Online-Angebot von SELFHTML aktuell oder im Online-Angebot eines Partnerprojekts von SELFHTML. Das Verweisziel hat das gleiche Layout wie die Seiten von SELFHTML. Um solche Verweise ausführen zu können, ist eine Internet-Verbindung erforderlich.
Geschlossenes kleines Seitensymbol; hautfarben - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Informationsseite im Online-Angebot von SELFHTML aktuell oder im Online-Angebot eines Partnerprojekts von SELFHTML. Das Verweisziel hat das gleiche Layout wie die Seiten von SELFHTML. Um solche Verweise ausführen zu können, ist eine Internet-Verbindung erforderlich.
Symbol für deutschsprachige Seite. Steht vor Verweisen zu externen, deutschsprachigen Web-Angeboten (wird also als Sprachensymbol verwendet, nicht als Ländersymbol).
Symbol für englischsprachige Seite. Steht vor Verweisen zu externen, englischsprachigen Web-Angeboten (wird also als Sprachensymbol verwendet, nicht als Ländersymbol).
Symbol für französischsprachige Seite. Steht vor Verweisen zu externen, französischsprachigen Web-Angeboten (wird also als Sprachensymbol verwendet, nicht als Ländersymbol).
Symbol für HTML 2.0. Bedeutet, dass das beschriebene Feature seit der Version 2.0 zum HTML-Standard gehört.
Symbol für HTML 3.2. Bedeutet, dass das beschriebene Feature seit der Version 3.2 zum HTML-Standard gehört.
Symbol für HTML 4.0. Bedeutet, dass das beschriebene Feature seit der Version 4.0 zum HTML-Standard gehört.
Symbol für XHTML 1.0. Bedeutet, dass das beschriebene Feature zur Version 1.0 des XHTML-Standard gehört.
Symbol für deprecated (missbilligt). Bedeutet, dass das beschriebene Feature noch zum HTML-Standard gehört, in Zukunft jedoch entfallen soll. In der Regel gibt es andere HTML-Elemente oder andere Ergänzungssprachen wie Stylesheets, durch die das entsprechende Feature in Zukunft realisiert werden soll.
Symbol für CSS1. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum CSS-Standard gehört.
Symbol für CSS2. Bedeutet, dass das beschriebene Feature seit der Version 2.0 zum CSS-Standard gehört.
Symbol für XML 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum XML-Standard gehört.
Symbol für XSLT 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum XSLT-Standard gehört.
Symbol für XPath 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum XPath-Standard gehört.
Symbol für DOM 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum DOM-Standard (Document Object Model) gehört.
Symbol für DOM 2.0. Bedeutet, dass das beschriebene Feature seit der Version 2.0 zum DOM-Standard (Document Object Model) gehört.
Symbol für JavaScript 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 von JavaScript verfügbar ist.
Symbol für JavaScript 1.1. Bedeutet, dass das beschriebene Feature seit der Version 1.1 von JavaScript verfügbar ist.
Symbol für JavaScript 1.2. Bedeutet, dass das beschriebene Feature seit der Version 1.2 von JavaScript verfügbar ist.
Symbol für JavaScript 1.3. Bedeutet, dass das beschriebene Feature seit der Version 1.3 von JavaScript verfügbar ist.
Symbol für JavaScript 1.5. Bedeutet, dass das beschriebene Feature seit der Version 1.5 von JavaScript verfügbar ist.
Symbol für JScript, der Microsoft-eigenen Implementierung von JavaScript. Bedeutet in der Regel, dass das beschriebene Feature nur im Internet Explorer verfügbar ist.
Symbol für Internet Explorer 1.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
Symbol für Internet Explorer 2.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
Symbol für Internet Explorer 3.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
Symbol für Internet Explorer 4.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
Symbol für Internet Explorer 5.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
Symbol für Internet Explorer 5.5. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
Symbol für Internet Explorer 6.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird. Das Symbol gilt auch für Netscape 8.
Symbol für Internet Explorer 7. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 1.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 1.1. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 2.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 3.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 4.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 4.01, 4.5, 4.6, 4.7 usw. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit einer dieser Produktzwischenversionen unterstützt wird.
Symbol für Netscape 6.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 6.1. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 6.2. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Symbol für Netscape 7.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Mit Netscape 8 wurden keine Tests durchgeführt, da diese Version die Möglichkeit bietet, die Rendering-Engine (Komponente zur Darstellung von Webseiten) von Firefox oder Internet Explorer einzusetzen. Deren Symbole gelten somit je nach Einstellung des Browsers auch für Netscape 8.
Symbol für Opera 5.12. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird. Ältere Versionen wurden bei Tests nicht berücksichtigt.
Symbol für Opera 6. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Opera 7. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Opera 7.10. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Opera 7.20. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Opera 7.50. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Opera 7.60. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Opera 8. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Opera 9. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Opera 9.10. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Symbol für Mozilla Firefox 1. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird. Ältere bzw. Mozilla-Versionen wurden bei Tests nicht berücksichtigt. Das Symbol gilt auch für Netscape 8..
Symbol für Mozilla Firefox 1.5. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Symbol für Mozilla Firefox 2. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Symbol für Safari 1.0. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird. Ältere Versionen wurden bei Tests nicht berücksichtigt.
Symbol für Safari 1.1. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Symbol für Safari 1.2. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Symbol für Safari 1.3. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Symbol für Safari 2.0.x. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Symbol für Safari WebKit (Entwicklerversion). Bedeutet, dass das beschriebene Feature in der nächsten offiziellen Produktversion unterstützt werden wird.
Symbol für Konqueror 3.1. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird. Ältere Versionen wurden bei Tests nicht berücksichtigt.
Symbol für Konqueror 3.2. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Symbol für Konqueror 3.3. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Symbol für Konqueror 3.4. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Die folgenden Hinweise sollen Ihnen helfen, SELFHTML optimal zu nutzen.
Falls Sie das Dokument gerade online lesen und für Ihre Online-Verbindung Zeit- oder Volumengebühren zahlen: laden Sie sich das Dokument besser auf Ihren Rechner. Sie können dieses Dokument herunterladen (siehe SELFHTML im Web). So können Sie das Dokument ohne Stress lesen.
Kopieren Sie sich Beispiele zu Quelltexten, die Sie verwenden wollen, einfach über die Datenaustausch-Schnittstelle (Zwischenablage) Ihres Rechners direkt aus diesem Dokument in Ihren Editor. Dann brauchen Sie den Code nur noch anzupassen und vermeiden entscheidende Tippfehler. Dies gilt jedoch nur, wenn Sie code-basiert, also mit einem Texteditor oder einem textorientierten HTML-Editor arbeiten, nicht bei Verwendung eines grafischen WYSIWYG-Editors.
Machen Sie sich mit den verschiedenen Navigationshilfen vertraut, um schneller mit SELFHTML arbeiten zu können und schneller an gewünschte Information heranzukommen.
Ich habe eine Frage zum Webdesign.
Ich habe ein Problem beim Erstellen meiner Homepage und suche Hilfe.
Ich habe eine Frage zu HTML, CSS, JavaScript, PHP oder anderen Webtechniken.
Ich brauche Meinungen zu meiner Webseite. oder ähnliches
Ich möchte Verbesserungsvorschläge zur SELFHTML-Dokumentation geben.
Ich möchte die Redaktion bei ihrer Arbeit untersttzen.
Ich habe eine allgemeine Frage die SELFHTML-Dokumentation betreffend. oder ähnliches
Die aktuell vorliegende Ausgabe basiert auf SELFHTML 8.0 von Stefan Münz und wird seit 2004 von einer Redaktion weiterentwickelt. Die SELFHTML-Redaktion besteht aus Mitarbeitern, die über die SELFHTML-Community miteinander bekannt wurden und über hohe Fachkenntnisse und redaktionelle Erfahrung verfügen. Es handelt sich teilweise um Mitglieder der SELFHTML-Developer. Die SELFHTML-Developer betreuen das Umfeld von SELFHTML, z.B. den Server-Betrieb, die Entwicklung von CGI-/Datenbanklösungen und eben auch redaktionelle und organisatorische Aufgaben wie Qualitätssicherung und Kontakte mit Anwendern.
Nachfolgende Redaktionsmitglieder haben an SELFHTML seit Version 8.1 mitgewirkt:
Arbeiten Sie ohne schlechtes Gewissen mit dem Dokument. Obwohl es das Fachwissen mehrerer teuerer Fachbücher enthält, können Sie es frei und kostenlos benutzen. Denn SELFHTML versteht sich selber primär als "technisches Aufklärungswerk" und nicht als Verkaufsschlager.
Dennoch gibt es gute Gründe, SELFHTML zu unterstützen. Je umfangreicher die Dokumentation und das Web-Angebot von SELFHTML werden, desto mehr redaktionelle und technische Power ist für die Pflege erforderlich. Das fängt an bei einem guten Server-Rechner und endet bei den Unmengen von Zeit, die für die Pflege der Dokumentation und des Web-Angebots investiert werden müssen.
Es gibt verschiedene Möglichkeiten, wie Sie SELFHTML unterstützen können. Nachfolgend werden die einzelnen Möglichkeiten beschrieben.
Diese Möglichkeit ist geeignet, wenn Sie einfach einen Betrag Ihrer Wahl als Dank für das Projekt spenden möchten.
Ihre Spende geht an das Vereinskonto des SELFHTML e.V. - einer der beiden Vorsitzenden des Vereins ist der frühere SELFHTML-Alleinautor Stefan Münz. Der Verein setzt sich für die Belange von SELFHTML ein (Details finden Sie auf der Seite Häufig gestellte Fragen zum SELFHTML e.V.).
Die Bankverbindungsdaten für Spendenüberweisungen lauten:
Empfänger: Swen Wacker Kontonummer: 2541180602 Bank: SEB Kiel Bankleitzahl: 21010111
SELFHTML erscheint auch als Buch. Durch den Kauf des Buches unterstützen Sie Stefan Münz und die SELFHTML-Redaktion. Alle weiteren Informationen zu diesem Thema - also aktuelle Ausgaben, Preise und Bestellmöglichkeiten - finden Sie im Online-Angebot von SELFHTML aktuell auf der Seite SELFHTML als Buch.
Sie können SELFHTML auch ohne finanzielle Mittel unterstützen - wenn Sie über spezielles und hohes Fachwissen verfügen. In diesem Fall können Sie zur größeren Attraktivität des Online-Angebots von SELFHTML aktuell beitragen, indem Sie einen oder mehrere Artikel schreiben. Interessant ist diese Möglichkeit der Unterstützung besonders für Web-Profis, die aufgrund ihrer beruflichen Tätigkeit zu speziellen Aspekten des Web-Designs, der Web-Programmierung oder des Web-Projektmanagements tiefere Kenntnisse oder umfangreiche Erfahrungen gesammelt haben. Geben Sie Ihr Wissen in Form von Artikeln weiter! Sie selbst profitieren wiederum davon, dass diese Artikel von vielen Leuten gelesen werden, was Ihnen Anerkennung und neue, interessante Kontakte verschaffen kann.
Alle weiteren Einzelheiten erfahren Sie auf der Seite Haben Sie einen Beitrag? bei den Artikeln im Online-Angebot von SELFHTML aktuell.
Last but not least ist es ausdrücklich erlaubt und erwünscht, SELFHTML von Ihren Seiten aus zu verlinken. Setzen Sie einen Link auf http://www.selfhtml.org/, http://de.selfhtml.org/ oder eine beliebige andere selfhtml.org-Seite, um das Projekt zu unterstützen. Deep-Links (Verweise auf Unterseiten) sind selbstverständlich ebenfalls gestattet.
Dürfen schon - aber solche E-Mails werden schon seit längerer Zeit nicht mehr beantwortet. Die Anzahl von E-Mails mit Fragen ist leider derartig hoch geworden, dass die Beantwortung allein schon ein Fulltime-Job und mehr wäre. Und SELFHTML ist kein Produkt, das mit irgendeinem Support-Anspruch vertrieben wird - es ist ja selber nur der Versuch, ein wenig Support zu leisten. Es gibt im Internet viele Newsgroups, Foren und Mailing-Listen, in denen Fachfragen rund um die eigene Homepage und um Web-Programmierung gestellt werden können - Anfängerfragen ebenso wie Profi-Fragen. Lesen Sie dazu auch den Abschnitt über Support.
Einen automatischen Update-Service gibt es nicht. Was Sie vor sich haben, ist die SELFHTML-Version 8.1.1. Um zu sehen, ob diese Version noch aktuell ist, rufen Sie im Online-Angebot von SELFHTML die Seite Aktuelle Version, Hinweise zur nächsten Version auf.
Es gibt eine Buchumsetzung von SELFHTML. Alle Informationen zu dem Buch, zu aktuellen Auflagen, Preisen, Bestellmöglichkeiten usw. finden Sie im Online-Angebot von SELFHTML aktuell auf der Seite:
Andere Formen druckbarer Dokumente, also beispielsweise Fassungen des Dokuments für MS Word oder in PDF-Form, werden nicht angeboten. SELFHTML ist so umfangreich, dass ein vollständiger Ausdruck des gesamten Dokuments je nach Druckertyp teuerer wäre als das Buch. Und das Ausdrucken einzelner, intensiv genutzter Seiten ist ja auch in den heute verbreiteten Browsern möglich.
Es gibt keine vom Autor ausgehende Übersetzungsinitiative. Solche Initiativen müssen von SELFHTML-Fans kommen, die zweisprachig sind und Interesse und Zeit haben, SELFHTML in ihre andere Sprache zu übersetzen. Welche Übersetzungsaktivitäten aktuell sind, darüber berichten wir im Online-Angebot von SELFHTML aktuell auf der Seite:
Wichtig ist zu dem Thema zunächst alles, was im Abschnitt Copyright steht.
Darüber hinaus gelten die Gepflogenheiten der gewachsenen geistigen Kultur. Das bedeutet im Klartext: Das wörtliche Übernehmen von einzelnen Aussagen aus SELFHTML in eigene Texte ist in Form eines Zitats erlaubt. Das Zitat muss die Quelle des Dokuments eindeutig benennen. Für diesen Zweck gibt es im Web die URIs, also die Web-Adressen. Um aus SELFHTML zu zitieren, nennen Sie als Quellenangabe http://de.selfhtml.org - gefolgt vom Pfad der jeweiligen Seite. Angenommen, Sie möchten diese Passage hier notieren, dann sollte das Zitat den URI http://de.selfhtml.org/editorial/selfhtmlfaq.htm enthalten. Wenn Sie bis auf Anker-Ebene genau zitieren möchten, können Sie das ebenfalls tun (z.B. http://de.selfhtml.org/editorial/selfhtmlfaq.htm#selfhtmltexte). Die Anker der Unterabschnitte werden in der Adresszeile des Browsers angezeigt, wenn Sie am Anfang einer Seite auf den Link zum gewünschten Unterabschnitt klicken.
Zitieren ist jedoch nur für die Wiedergabe einzelner, markanter Aussagen gedacht. Nicht erlaubt ist das Kopieren kompletter SELFHTML-Abschnitte oder SELFHTML-Seiten in eigene Seiten in Ermangelung eigener Inhalte, auch nicht, wenn irgendwo versteckt und verschämt der Hinweis auf das Original steht.
Ja. Alle Code-Beispiele in gelben Kästen und/oder blauer Courier-Schrift dürfen Sie in Ihre eigenen Seiten kopieren und dort ohne Herkunftsangabe für eigene Zwecke verwenden und weiterverarbeiten. Dies ist sogar ausdrücklich erwünscht und unterstützt beim effizienten Erstellen eigener Web-Seiten.
Eine Ausnahme ist es, wenn Sie selber eine Fachdokumentation oder ein Buch zu einem der in SELFHTML behandelten Themen schreiben und ein oder mehrere Beispiele aus SELFHTML in Ihrer eigenen Dokumentation wiederverwenden möchten. In diesem Fall wenden Sie sich bitte an die SELFHTML-Redaktion (siehe Impressum), und schildern Sie Ihr Vorhaben genau. Eine "automatische Erlaubnis" für ein solches Vorhaben besteht nicht.
Einzelne Grafiken, die in SELFHTML vorkommen, dürfen Sie für eigene Seiten verwenden. Das gilt auch für die kleinen Symbolgrafiken mit Dokumentsymbolen, Pfeilen, Flaggen usw.
Ausnahme ist das SELFHTML-Logo (Datei logo.gif) im src-Verzeichnis. Die Grafik selbst ist zwar nicht geschützt, doch ihre über Jahre hinweg etablierte Logo-Bedeutung für SELFHTML und ihre Bekanntheit im Zusammenhang mit SELFHTML bewirkt, dass bei Verwendung eine Verwechselungsgefahr besteht, die juristisch ungünstig für Sie ist.
Nein. Das SELFHTML-Layout kennzeichnet SELFHTML und den SELFHTML-Raum optisch zur Unterscheidung von anderen Web-Angeboten. Es ist das "Corporate Design" von SELFHTML, und deshalb ist es unerwünscht, dieses Layout in einem wiedererkennbaren Sinne für eigene Seiten zu verwenden. Im Kapitel Fertige Layouts finden Sie Layoutvorschläge, die Sie für eigene Seiten frei verwenden können. Darunter ist auch eines (Layout Nummer 6), das eine ähnliche Navigation wie SELFHTML besitzt.
Sie dürfen SELFHTML "as is", also als elektronisches Dokument in seiner Originalfassung gerne im Unterricht einsetzen, egal ob im Informatikunterricht an Schulen oder in kommerziellen Kursen zur beruflichen Weiterbildung. Sie dürfen SELFHTML auch gerne in dieser Form auf CD-ROM an Schüler oder Kursteilnehmer verteilen.
Wenn Sie einzelne Seiten aus SELFHTML ausdrucken und im Unterricht einsetzen, sollte jeder Ausdruck einen Hinweis auf die Originalquelle haben. Es genügt, auf die erste Seite eines Ausdrucks handschriftlich so etwas zu notieren wie "aus SELFHTML (http://de.selfhtml.org/)".
Unerwünscht ist das Kopieren von kompletten Abschnitten aus SELFHTML in eigene Schulungsunterlagen. Dies verstößt gegen den urheberrechtlichen Schutz von SELFHTML.
Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.
Jeder Button wird jeweils dreimal untereinander abgebildet, um zu demonstrieren, wie er z.B. in einer Navigationsleiste wirkt. Alle Buttons sind leer und haben die volle Farbtiefe von 16,7 Millionen Farben, damit Sie Buttons, die Sie verwenden wollen, nach Wunsch beschriften können. Stellen Sie dazu so viele Kopien der leeren Button-Grafik her wie Sie Buttons benötigen. Beschriften Sie die Buttons in einem Grafikprogramm dann nach einheitlichem Muster.
erste Beispiel-Layout gezeigt hat. Die Verwendung von CSS-Eigenschaften wie 
Anzeigebeispiel: So sieht's aus
SELFHTML/Navigationshilfen 
Frames bzw. 
]
Mit CSS 2.1 werden noch die folgenden Werte eingeführt:
