Objektpositionierung im Microsoft Internet Explorer
Kapitel 31
Alles wird dynamisch
Von Arman Danesch
Mit dem neuen Netscape Communicator (der den Navigator 4 enthält) und dem ebenfalls neuen Internet Explorer 4, haben die beiden Herstellerfirmen eine ganze Reihe von Erweiterungen und neuen Features vorgestellt, die sie dynamisches HTML (dynamic HTML) nennen.
Dynamisches HTML ist allerdings ein etwas unglücklicher Name, da es sich nicht, wie z.B. HTML 3.2, um eine geschlossene Einheit und auch nicht um schlichte Erweiterungen handelt. Dynamisches HTML ist vielmehr ein Satz von Technologien, die von HTML-Erweiterungen bis zu Programmiermöglichkeiten reichen, die es den Web-Autoren erlauben sollen, interaktivere Seiten zu gestalten, um auf die Aktionen des Benutzers reagieren zu können. Zusätzlich soll dynamisches HTML die Möglichkeiten der Designer erweitern, das Erscheinungsbild des endgültigen Dokuments im Browser des Benutzers kontrollieren zu können.
All diese Technologien können sich als nützlich erweisen, um technisch sehr ausgefallene und raffinierte Web Sites zu erstellen. Allerdings gilt es zuvor, eine kleine Hürde zu nehmen: Netscape und Microsoft haben unterschiedliche Vorstellungen davon, was dynamisches HTML ist. Obwohl es Ähnlichkeiten gibt, haben die beiden Firmen unabhängig voneinander ihre eigene Definition von dynamischem HTML geschaffen.
In diesem Kapitel werden wir einen Blick auf dynamisches HTML werfen, die folgenden Themen eingeschlossen:
Was ist dynamisches HTML?
Im Kern richtet sich dynamisches HTML gegen die Philosophie von HTML als Standard durch seine Unabhängigkeit vom Design, völlig plattformunabhängig zu sein, wie das in diesem Buch gezeigt wurde. In der Realität ist das Web allerdings bei einem Punkt angelangt, an dem Design genauso, wenn nicht sogar wichtiger als die Plattformunabhängigkeit sein kann und dieser Tatsache trägt dynamisches HTML Rechnung.
Ohne die Frage, ob Webseiten mit Überlegungen zum Erscheinungsbild entworfen werden sollten, heraufbeschwören zu wollen, erweitert dynamisches HTML - in beiden Varianten - die Möglichkeiten eines Web-Autors, genau dies zu tun, sehr stark (siehe auch Abbildung 31.1).
Abbildung 31.1: |
Unglücklicherweise scheint dynamisches HTML mehr auf Teilung der Lager abzuzielen, als jede andere Erweiterung der Web-Technologie in der Vergangenheit. Sowohl Microsoft als auch Netscape stellen ihre Kreationen in der Werbung für die neuen Versionen ihrer Browser besonders heraus. Web-Designer werden bei der Anwendung vor die schwere Entscheidung gestellt, ob sie überhaupt diese neuen Features nutzen sollen. Um fundierte Entscheidungen treffen zu können, benötigen sie zumindest Grundkenntnisse über die Gemeinsamkeiten und die Unterschiede der Implementationen von dynamischem HTML der beiden Firmen.
Stilvorlagen: Der gemeinsame Kern des dynamischen HTML
Obwohl sich vieles in bezug auf HTML zwischen den beiden Browsern unterscheidet, haben bestimmte Komponenten beide gemeinsam. Dies stellt den besten Ausgangspunkt für unsere Betrachtung des dynamischen HTML dar. Was haben die beiden nun gemeinsam? Es gibt zwei Hauptpunkte:
Kaskadierte Stilvorlagen
Wenn Sie den Medienwahnsinn verfolgt haben, der die Entwicklung und Einführung des Netscape Communicator und des Microsoft Internet Explorer 4 umgab, dann haben Sie auch bestimmt etwas von Stilvorlagen gehört und sicherlich fragen Sie sich, was es damit auf sich hat.
Nun das Konzept ist wirklich einfach.
Denken Sie an Ihr Textverarbeitungsprogramm. Ob Sie Ihre Dokumente mit Word, WordPerfect, Lotus WordPro schreiben, Sie werden bestimmt schon mit irgendeiner Form von Stilvorlagen oder auch Formatvorlagen zu tun gehabt haben. Stilvorlagen erlauben es Ihnen, das Standardlayout bestimmter Teile Ihrer Dokumente zu definieren, und genau das ist auch das Ziel von kaskadierten Stilvorlagen. Mit kaskadierten Stilvorlagen können Sie die Farbe und den Stil von Schriften kontrollieren, Abstände regulieren usw.
Kaskadierte Stilvorlagen sind ein Standard, der vom World Wide Web Consortium (W3C) definiert wurde. Was erwarten läßt, daß man diese in mehr Browsern als nur den Angeboten von Netscape und Microsoft sehen wird. Wir werden uns kaskadierte Stilvorlagen in Kapitel 32, »Styling für Webseiten«, detaillierter ansehen.
Objektpositionierung und Layout-Kontrolle
Eine der zentralen Absichten des dynamischen HTML ist es, den Autoren mehr Kontrolle über das Layout ihrer Dokumente und die Positionierung von Objekten zu geben.
Sowohl Netscape als auch Microsoft haben sich dieser Absicht verschrieben und teilen einige gemeinsame Ansätze, darunter Erweiterungen der kaskadierten Stilvorlagen zur Positionierung von Objekten. Dennoch gibt es klare Unterschiede zwischen den beiden Browsern: Jeder hat seine eigenen Methoden, die Positionierung von Objekten zu kontrollieren.
Wir widmen uns der Objektpositionierung - sowohl im Netscape Communicator als auch im Internet Explorer - im Abschnitt »Objektpositionierung« weiter unten in diesem Kapitel.
Wie Microsoft die Dinge sieht
Microsoft's Ansatz für dynamisches HTML beinhaltet einige Features, die nur im Internet Explorer zu finden sind:
Lassen Sie uns diese einzeln betrachten.
Das dynamische Objektmodell ist der Kern von Microsoft's Ansatz für dynamisches HTML.
Dieses Objektmodell bietet die Mechanismen, durch die es möglich wird, Skripten in Seiten zu integrieren, Änderungen an Stilen und Attributen von Seitenelementen zu programmieren, Elemente zu ersetzen und auf Ereignisse zu reagieren, die vom Benutzer ausgelöst wurden. Man kann sagen, daß dies die Skripting-Umgebung des Internet Explorer 3 ist, der eine Packung Aufputschmittel verabreicht wurde. Im Internet Explorer 3 konnte man mit JSkript und VBSkript, den beiden Skriptsprachen, die in den Internet Explorer integriert sind, nur auf eine eingeschränkte Zahl von Aktionen des Benutzers reagieren und auch nur eine eingeschränkte Zahl von Seitenelementen dynamisch ändern bzw. aktualisieren. Bei diesen Seitenelementen wiederum konnte auch nur auf eine eingeschränkte Anzahl von Attributen zugegriffen werden.
Das dynamische Objektmodell erlaubt es Programmierern hingegen, mit allen Objekten in einer Webseite zu arbeiten, anstatt nur mit bestimmten. Jede Skriptsprache, die vom Internet Explorer 4 unterstützt wird, darunter JSkript und VBSkript, kann zur Erstellung dieser Skripten und Programme verwendet werden.
Die Arbeit mit dem dynamischen Objektmodell macht eine gewisse Programmiererfahrung und Wissen über JSkript oder VBSkript notwendig. Dies ist der Grund dafür, warum es aus dem Rahmen dieses Buches fällt. Allerdings ist es wichtiger, sich bewußt zu sein, daß dieses Modell über die hinausgeht, die in früheren Skript-fähigen Browsern implementiert waren, inklusive Netscape 3 und Internet Explorer 3. Es geht selbst über das hinaus, was Netscape in den Netscape Communicator implementiert hat.
Datenbank-Features
Bei der Besprechung der CGI-BIN-Skripten im Kapitel 19, »CGI-Programmierung«, haben Sie gelernt, daß es möglich ist, Webseiten mit aktuellen Informationen aus Datenbanken zu versehen. Dies kann verwendet werden, um online Kataloge zu erstellen, Reservierungssysteme oder Informationsquellen - im Prinzip alles, was auf aktueller, strukturierter Information beruht - zu erzeugen.
Mit der integrierten Datenbankunterstützung will Microsoft Designern die Möglichkeit geben, Seiten zu erzeugen, die Daten auf dem Client-System bei Erhalt organisieren. Dieses Vorgehen würde den Netzwerk-Verkehr und auch Server-Anfragen effektiv minimieren, da die in den Internet Explorer integrierte Datenbank-Engine die Sortierung und Organisation der Daten übernehmen kann, sobald diese Daten vom Server übertragen wurden.
Multimedia-Controls
Wie bereits im Kapitel 26, »Plug-Ins und eingebettete Objekte«, bei der Besprechung der eingebetteten Objekte erwähnt, beinhaltet der Internet Explorer 4 eine Reihe von Multimedia-Controls. Dabei handelt es sich um ActiveX-Controls, die in Seiten eingebettet werden können, um animierte Bilder anzuzeigen, Schrift zu formatieren, Audio-Dateien zu mischen, Effekte auf Grafiken anzuwenden und Objekte oder Elemente einer Seite in der Ebene zu bewegen.
Für den Internet Explorer 4 sind diverse Multimedia-Controls verfügbar:
Diese Überschrift ist größtenteils selbsterklärend. Dynamisches HTML bietet Ihnen eine präzise Kontrolle über die exakte Positionierung von Elementen auf einer Seite. Sie haben die Möglichkeit, festzulegen, welche Elemente über anderen liegen und diese eventuell verdecken. Kombiniert mit den Skript-Möglichkeiten kann dies ein flexibler Weg sein, um Elemente auf einer Seite zu bewegen und diese anzupassen, während der Benutzer mit dieser interagiert.
Netscape geht seinen eigenen Weg
Genau wie Microsoft hat auch Netscape seine eigenen Vorstellungen zu einem Großteil des dynamischen HTML. Hier die wesentlichen Merkmale, die Netscape eigen sind:
Im Netscape Communicator bietet die Ebenen-Funktion einen Mechanismus für die präzise Kontrolle der Positionierung von Objekten. Sie können übereinanderliegende Ebenen definieren, die sowohl transparenten als auch deckenden Inhalt haben. Über JavaScript können Sie Ebenen verschieben, verstecken und die Beziehungen der Ebenen zueinander verändern.
Die Abbildung 31.2 zeigt ein Anwendungsbeispiel der Ebenenfunktion von Netscape. In diesem Beispiel liegt HTML-Text über einem internen Bild.
Die Details zur Verwendung von Ebenen werden im Abschnitt »Objektpositionierung« weiter unten in diesem Kapitel besprochen.
Während sowohl Microsoft als auch Netscape kaskadierte Stilvorlagen unterstützen, bietet Netscape darüber hinaus noch eine Alternative an: JavaScript-Stilvorlagen. Bei JavaScript-Stilvorlagen wird jede Eigenschaft der Stilvorlage in JavaScript abgebildet. Auf diese Weise können Sie JavaScript verwenden, um Eigenschaften einer Stilvorlage zu definieren und zu manipulieren, wie es das dynamische Objektmodell von Microsoft zuläßt, über Skripten die Eigenschaften von Objekten in einer Seite zu verändern.
Abbildung 31.2: |
JavaScript-Stilvorlagen können bestimmte Stile für beliebige HTML-Elemente definieren. Außerdem kann darüber das Seitenlayout einschließlich Ränder und Schriften geregelt werden.
Nachdem Sie nun eine Vorstellung davon haben, worum es bei dynamischem HTML geht und auch einige der Inkonsistenzen zwischen den Ansätzen von Netscape und Microsoft kennen, wird es Zeit, sich eines der Hauptmerkmale von dynamischem HTML in beiden Browsern anzusehen: die präzise Positionierung von Objekten innerhalb einer Seite.
Mit dem Communicator hat Netscape die Ebenentechnologie vorgestellt, bei der Netscape-eigene Tags HTML erweitern. Microsoft hat sich andererseits dafür entschieden, eine vom W3C vorgeschlagene Erweiterung der kaskadierten Stilvorlagen zu implementieren, um die Möglichkeit zur genauen Positionierung zu geben.
Nehmen Sie einmal das Beispiel für die Ebenentechnik aus Abbildung 31.2: Die Verwendung von Netscape's Ebenentechnologie hat zur Folge, daß die Positionierung im Internet Explorer 4 nicht ausgeführt werden kann, wie das in Abbildung 31.3 zu sehen ist.
Wenn Sie auf der anderen Seite die Erweiterungen der kaskadierten Stilvorlagen ansehen, die von Microsoft implementiert wurden, funktioniert die Positionierung auch im Communicator, der auch diese Erweiterungen unterstützt. In Anbetracht dessen scheint der Einsatz von Netscape's Ebenensystem generell unnötig zu sein. Allerdings ist die Ebenentechnologie leichter zu erlernen, wenn Sie zuvor noch nie mit Stilvorlagen gearbeitet haben. Außerdem integriert sich diese Technik gut in die JavaScript-Umgebung des Communicator. Wenn sich lediglich Netscape-Anwender Ihre Seiten ansehen, wie das in einem Intranet der Fall sein könnte, könnten Sie eventuell dazu geneigt sein, Ebenen anstelle von kaskadierten Stilvorlagen zu verwenden, um Objekte zu positionieren.
Abbildung 31.3: |
Das alles bedeutet nun für Sie, daß Sie ein gutes Verständnis beider Ansätze benötigen, wenn Sie diese neuen Möglichkeiten zur Positionierung verwenden wollen, um den besten Weg für Ihre Bedürfnisse zur Positionierung von Elementen auswählen zu können. Wir beginnen nun mit einer Betrachtung des Ansatzes von Netscape, um anschließend zu sehen, wie Microsoft die Dinge angeht.
Netscape's Ebenen
Netscape hat drei neue Tags erstellt, die alles Nötige zur Erzeugung von Ebenen und Positionierung von Elementen zur Verfügung stellen: <LAYER>, <ILAYER> und <NOLAYER>.
Lassen Sie uns mit einer Besprechung des allgemeinen Konzepts, das hinter den Ebenen steht, beginnen. Ebenen existieren in einer Eltern-Kind-Beziehung. Das bedeutet, eine Ebene kann als Container einer anderen fungieren. Wenn Sie ein Dokument mit dem <BODY>-Tag erzeugen, wird dadurch auch ein Container erzeugt, in dem Ebenen plaziert und manipuliert werden können.
Wenn Ebenen erzeugt werden, können diese entweder in bezug auf die Elternebene oder in bezug auf das gesamte Dokumentfenster positioniert. Durch die Erzeugung einer Ebene in einem Dokument, das sonst keine weiteren Ebenen mehr enthält, wird das gesamte Dokument als Containerebene behandelt.
Am Beispiel von Abbildung 31.4 soll verdeutlicht werden, wie Ebenen ineinander plaziert werden können und dabei eine Eltern-Kind-Beziehung aufweisen, wobei die Elternebene die Kindebene aufnimmt. In diesem Fall enthält die Ebene A die Ebene B. Ebene A befindet sich direkt im Dokument selbst. Die Positionierung der Ebene B kann nun relativ zu der Ebene A oder zu dem Dokumentfenster angegeben werden. Die Ebene A wiederum kann relativ zum Dokumentfenster positioniert werden.
Abbildung 31.4: |
Es gibt in Netscape zwei verschiedene Ebenentypen: explizit positionierte Ebenen und Inline-Ebenen.
Explizit positionierte Ebenen werden mit dem <LAYER>-Tag erzeugt. Werden keine weiteren Attribute angegeben, erzeugt das <LAYER>-Tag eine Ebene, die in der linken, oberen Ecke positioniert wird und die gleiche Breite bzw. Höhe, wie die umgebende Ebene aufweist. Die umgebende Ebene (die Elternebene) ist transparent. Das heißt sie verfügt weder über eine Hintergrundfarbe noch über ein Hintergrundbild, so daß die darunterliegende Ebene anstelle eines Hintergrunds durchscheint.
Eine Ebene wie die gerade besprochene zu erzeugen, ist natürlich nicht besonders nützlich. Im Normalfall werden Sie zumindest die Position der linken, oberen Ecke einer Ebene festlegen wollen. Dies erreichen Sie über die Attribute LEFT und TOP, die die Entfernung der linken, oberen Ecke der Ebene zu der linken, oberen Ecke der Elternebene festlegen.
Betrachten Sie das folgende Beispiel:
<HTML>
<HEAD>
<TITLE>Layer Example 1</TITLE>
</HEAD>
<BODY>
<IMG SRC="logo.gif">
<LAYER TOP=25 LEFT=25><H1>This text is in a layer positioned 25 pixels down
and 25 pixels to the right of the main document window's top-left
corner.</H1></LAYER>
</BODY>
</HTML>
Das Ergebnis sehen Sie in Abbildung 31.5.
Zwei Dinge sollten Sie in diesem Beispiel beachten: Zum einen wird das <LAYER>-Tag mit dem </LAYER>-Tag geschlossen. Dies ist wichtig, um den Teil des Dokuments zu kennzeichnen, der in dieser Ebene angezeigt werden soll. Wenn Sie das Tag nicht schließen würden, würde der Browser nicht erkennen, was Sie für die Ebene vorgesehen haben, und würde die Seite nicht richtig darstellen. Angenommen Sie wollten ein zweites Logo direkt im Anschluß an das erste plazieren und Sie hätten dies im Quelltext nach der Ebenendefinition eingefügt, würden Sie in etwa folgendes erhalten.
<HTML>
<HEAD>
<TITLE>Layer Example 1</TITLE>
</HEAD>
<BODY>
<IMG SRC="logo.gif">
<LAYER TOP=25 LEFT=25><H1>This text is in a layer positioned 25 pixels down
and 25 pixels to the right of the main document window's top-left
corner.</H1></LAYER>
<IMG SRC="logo.gif">
</BODY>
</HTML>
Abbildung 31.5: |
Wie Sie in Abbildung 31.6 sehen können, folgt das zweite Logo unmittelbar auf das erste und die Plazierung der Logos ist unabhängig von der Ebenendefinition. Wenn Sie aber das schließende </LAYER>-Tag weglassen, wird das zweite Bild nicht einmal mehr ansatzweise angezeigt, wie das in Abbildung 31.7 zu sehen ist. Der Navigator wird schlichtweg verwirrt, wenn Sie das <LAYER>-Tag nicht schließen. Aus diesem Grund sollten Sie immer daran denken, es zu schließen.
Es ist noch wichtig zu bemerken, daß in diesem Beispiel für die Ebene die Standardhintergrundeinstellung (transparent) gültig war. Aus diesem Grund scheint das Bild überall dort durch die Ebenen, wo sich in dieser keine Elemente befinden.
Allerdings gibt unvermeidbarerweise Fälle, in denen Sie für eine Ebene eine Hintergrundfarbe bzw. eine Hintergrundgrafik festlegen wollen. Dies erreichen Sie über die Attribute BGCOLOR bzw. BACKGROUND des <LAYER>-Tags. Diese Attribute funktionieren hier genauso wie beim <BODY>-Tag. Der folgende Code z.B. erzeugt eine Begrüßungsseite, die eine Ebene mit einer Hintergrundgrafik verwendet:
<HTML>
<HEAD>
<TITLE>Welcome to Landegg Academy</TITLE>
</HEAD>
<BODY BGCOLOR="black">
<LAYER TOP=100 LEFT=100 BACKGROUND="landegg.gif">
<DIV ALIGN=CENTER><FONT COLOR=black FONT="Arial"
SIZE=7><STRONG>
Welcome to Landegg Academy on the World Wide Web
</STRONG></FONT></DIV>
</LAYER>
</BODY>
</HTML>
Abbildung 31.6: |
Abbildung 31.7: |
Dieses Beispiel erzeugt in etwa das Ergebnis aus Abbildung 31.8.
Abbildung 31.8: |
Beachten Sie allerdings, daß das Ergebnis des Ebenen-Layouts in diesem Beispiel nicht so attraktiv ist, wie es sein könnte. Der Grund hierfür ist, daß sich die Ebene standardmäßig ausgehend von der linken, oberen Ecke der Ebene, basierend auf dem Layout des Inhalts der Elternebene, bis zum rechten Rand der Elternebene erstrecken kann. Die Ebene wird so breit angelegt, daß der Inhalt darin Platz findet. Das gesamte Erscheinungsbild wäre wesentlich ansprechender, wenn die Ebene zum einen nicht so breit, und zum anderen, wenn mehr Schwarz des Hintergrunds des Dokumentfensters am rechten Rand sichtbar wäre.
Dies können Sie über das WIDTH-Attribut erreichen. Sie können dem WIDTH-Attribut die Breite der Ebene in Pixel oder als Prozentzahl angeben. Wenn Sie z.B. dem WIDTH-Attribut den Wert 65% im vorigen Beispiel zuweisen würden, würden Sie in etwa das Ergebnis erhalten, das in Abbildung 31.9 gezeigt ist.
Abbildung 31.9: |
Das HEIGHT-Attribut ist dem WIDTH-Attribut mit Ausnahme des Standardverhaltens ganz ähnlich. Wenn Sie das WIDTH-Attribut weglassen, wird standardmäßig die Ebene so breit als möglich angelegt. Wenn Sie das HEIGHT-Attribut auslassen, sieht die Sache ganz anders aus: Die Ebene wird nur so hoch angelegt, als nötig ist, um den gesamten Inhalt anzuzeigen.
|
Das WIDTH-Attribut funktioniert nicht immer. Wenn Sie eine Breite angeben, die kleiner ist als die Breite eines Elements mit fester Breite (z.B. ein Bild), das sich in dieser Ebene befindet, wird die Breite der Ebene auf die Breite dieses Elements erweitert. Dies wird natürlich nur fortgeführt, solange die Breite der Elternebene dadurch nicht überschritten wird. Diese stellt die maximal mögliche Breite dar. Dies sollten Sie im Hinterkopf behalten, wenn Sie Ihre Ebenen entwerfen. Wenn Sie z.B. eine Ebene definieren, die 80% der Breite des Dokumentfensters einnimmt, und das Fenster des Benutzers ist sehr schmal, wird die Ebene eventuell breiter als 80% der Fensterbreite, um sich an die Breite des Inhalts anzupassen. |
Es gibt ein weiteres Attribut, das Ihnen dabei hilft, das Erscheinungsbild der Ebene und des darin befindlichen Inhalts zu kontrollieren. Betrachten Sie noch einmal das Endergebnis in Abbildung 31.9. Die Ebene sieht wesentlich besser aus, als das im ersten Versuch der Fall war, aber es gibt immer noch einen kleinen Kritikpunkt: Der Text befindet sich sehr nah an den Rändern.
Es würde besser aussehen, wenn man den Abstand zwischen dem Inhalt der Ebene und den Rändern der Ebene kontrollieren könnte - anders ausgedrückt, wären wir gerne in der Lage, jeden der vier Ränder der Ebene einzustellen. Dies erreichen Sie über das CLIP-Attribut. CLIP scheint ein etwas seltsamer Name für ein Attribut zu sein, er leitet sich aber von dem Konzept des Clipping-Rechtecks ab. Dieses Rechteck definiert den sichtbaren Bereich der Ebene. Anders als die Attribute WIDTH, HEIGHT, LEFT und TOP übergeben Sie dem CLIP-Attribut vier Zahlen, die durch Kommas getrennt sind, als Wert. Die Werte legen den Freiraum am linken, rechten, unteren und oberen Rand der Ebene fest.
Die Anweisung CLIP=10,10,100,100 erzeugt z.B. einen sichtbaren Bereich, der jeweils 10 Pixel von der linken bzw. der oberen Ecke der Ebene entfernt sowie 100 Pixel hoch und 100 Pixel breit ist. Ganz ähnlich ist das Ergebnis der Anweisung CLIP=0,0,100,100, nur daß hier der sichtbare Bereich direkt an der linken, oberen Ecke der Ebene beginnt. Die Breite und die Höhe entsprechen der vorigen Anweisung (siehe auch Abbildung 31.11).
Abbildung 31.10: |
Abbildung 31.11: |
Wenn Sie keinen Abstand zwischen dem linken bzw. oberen Rand der Ebene und dem sichtbaren Bereich einfügen wollen, gibt es dafür eine Kurzform des CLIP-Attributs mit nur zwei Parametern für die Breite bzw. die Höhe. Somit entspricht die Anweisung CLIP=0,0,100,100 der Anweisung CLIP=100,100. Das Ergebnis entspricht natürlich auch der Darstellung in Abbildung 31.11.
Benannte Ebenen
Wie auch Frames und Fenster können Sie Ebenen entweder über das NAME- oder über das ID-Attribut Namen geben. Beide Attribute haben die gleiche Wirkung. Indem Sie einer Ebene einen Namen geben, wird es möglich, sich in JavaScript-Skripten bzw. im HTML-Quelltext, wie Sie bei der Behandlung der Z-Reihenfolge im nächsten Abschnitt sehen werden, auf diese zu beziehen bzw. diese gezielt anzusprechen.
Z-Reihenfolge
Bisher haben Sie erfahren, wie man Ebenen, die übereinander liegen und relativ zueinander oder absolut zum Ursprung der Seite plaziert werden, erzeugt.
Allerdings ist mit den Ebenen noch mehr möglich. Dieses Mehr resultiert aus der Möglichkeit, die Z-Reihenfolge zu kontrollieren. Die Z-Reihenfolge legt die Reihenfolge fest, in der die einzelnen Ebenen übereinander liegen. Standardmäßig werden neue Ebenen an oberster Stelle, also über allen anderen bereits vorhandenen Ebenen, angezeigt. Dies ändert sich, wenn Sie einen Z-Index festlegen oder die Position der Ebene in der bestehenden Z-Reihenfolge ändern.
Dies erreichen Sie über die Verwendung eines der folgenden drei Attribute: Z-INDEX, ABOVE und BELOW.
ABOVE und BELOW arbeiten auf ähnliche Weise. Wenn Sie das Attribut ABOVE=irgendeineEbene verwenden, wird die neue Ebene direkt unter der Ebene irgendeineEbene plaziert, d.h. die Ebene irgendeineEbene befindet sich über (engl. above) der neuen Ebene. Ganz ähnlich BELOW: BELOW=andereEbene sagt aus, daß die neue Ebene sich direkt über der Ebene andereEbene befindet, da andereEbene direkt darunter (engl. below) liegt.
Wenn Sie z.B. drei Ebenen mit den Namen logo, title und menu erzeugt haben, können Sie diese im Dokument wie folgt plazieren:
<LAYER NAME="logo">
HTML-Quelltext der Ebene
<LAYER NAME="menu" BELOW="logo">
HTML-Quelltext der Ebene
</LAYER>
<LAYER NAME="title" ABOVE="menu">
HTML-Quelltext der Ebene
</LAYER>
</LAYER>
Dieser Quelltext erzeugt drei Ebenen. Die Ebene logo befindet sich am Boden, title in der Mitte und menu an oberster Position. Dies resultiert daraus, daß sich logo direkt unter menu befindet, wenn menu definiert wird. Anschließend legen wir fest, daß menu direkt über title plaziert werden soll, was title zwischen die beiden zuvor definierten Ebenen schiebt.
Einen weiteren wichtigen Punkt gibt es an dieser Stelle zu beachten: menu und title sind beide innerhalb der Tags <LAYER> und </LAYER> von logo definiert. Das bedeutet, daß logo für menu und title die Elternebene ist. Anders ausgedrückt haben wir es hier mit verschachtelten Ebenen zu tun. Aus diesem Grund sind Angaben zur Plazierung von menu bzw. title relativ zu logo zu sehen.
Die Attribute ABOVE und BELOW sind sehr einfach. Allerdings schränkt diese Einfachheit auch deren Nützlichkeit ein. Wenn Sie viele Ebenen verwenden und sich auf ABOVE und BELOW verlassen, kann es sehr beschwerlich sein, den Überblick darüber zu behalten, welche Ebene sich wo im Stapel befindet.
Dieses Problem kann vermieden werden, indem Sie die Z-Reihenfolge über das Z-INDEX-Attribut des <LAYER>-Tags kontrollieren. Mit diesem Attribut können Sie die Reihenfolge der Ebenen durch die Angabe von Nummern festlegen. Je höher die Nummer ist, desto weiter oben im Stapel befindet sich die Ebene. Ebenen mit niedrigeren Nummern befinden sich darunter. Negative Nummern sorgen dafür, daß Ebenen unter deren Elternebene plaziert werden.
Mit dem Z-INDEX-Attribut kann das vorherige Beispiel wie folgt gestaltet werden:
<LAYER NAME="logo"
Z-INDEX=1>
HTML-Quelltext der Ebene
<LAYER NAME="menu" Z-INDEX=3>
HTML-Quelltext der Ebene
</LAYER>
<LAYER NAME="title" Z-INDEX=2>
HTML-Quelltext der Ebene
</LAYER>
</LAYER>
Ganz offensichtlich ist es durch die Nummern des Z-INDEX-Attributs wesentlich einfacher zu erkennen, wo sich welche Ebene befindet. Außerdem mußte man in dem BELOW-ABOVE-Beispiel den Ebenennamen große Aufmerksamkeit zuteil werden lassen, um die Verhältnisse zu überblicken.
Lassen Sie uns dieses Beispiel mehr ausgestalten, um genau zu verstehen, wie die Z-Reihenfolge funktioniert. Wir wollen damit beginnen, Farben, Positionen und Breiten der einzelnen Ebenen festzulegen:
<LAYER NAME="logo" Z-INDEX=1
BGCOLOR=blue>
LOGO-Ebene
<LAYER NAME="menu" Z-INDEX=3 TOP=100 BGCOLOR=cyan WIDTH=90%>
MENU-Ebene
</LAYER>
<LAYER NAME="title" Z-INDEX=2 TOP=50 BGCOLOR=red HEIGHT=150 WIDTH=80%>
TITLE-Ebene
</LAYER>
</LAYER>
Das Ergebnis sehen Sie in Abbildung 31.12.
Abbildung 31.12: |
Um ein besseres Gefühl dafür zu bekommen, wie die Z-Reihenfolge funktioniert, wollen wir den Z-INDEX-Wert der title-Ebene auf 4 ändern. Was resultiert daraus? Wie Sie in Abbildung 31.13 sehen können, verdeckt als Ergebnis die title-Ebene die menu-Ebene mit Ausnahme des kleinen Rechtecks, das auf der rechten Seite übersteht. Die Ursache dafür ist, daß durch die Änderung der Z-INDEX-Einstellung der title-Ebene von 2 in 4 wir titel über menu plazieren, die selbst den Z-INDEX-Wert 3 hat.
Abbildung 31.13: |
Absolute Positionierung von Ebenen
Bis jetzt war in allen Ebenenbeispielen die relative Positionierung der Ebenen über die Attribute LEFT und TOP beteiligt: Ebenen werden dabei relativ zu deren Elternebene positioniert.
Netscape bietet eine Alternative zu LEFT und TOP in Form der Attribute PAGEX und PAGEY an. Mit diesen Attributen legen Sie den Ursprung (die linke, obere Ecke) der Ebene in bezug auf das Dokumentfenster und nicht in bezug zur direkten Elternebene fest. Wenn natürlich das Dokumentfenster die direkte Elternebene ist, dann hat PAGEX den gleichen Effekt wie LEFT, und PAGEY wie TOP. Wir beginnen mit einer Ebene, die sich im Dokumentfenster befindet:
<LAYER TOP=100 LEFT=100 WIDTH=100
HEIGHT=100 BGCOLOR="black">
</LAYER>
Wie Sie in Abbildung 31.14 sehen können, erzeugt dieses Beispiel auch ohne weiteren Inhalt eine Seite mit einem 100 mal 100 Pixel großen Quadrat darin.
Abbildung 31.14: |
Nun wollen wir eine Ebene in der Ebene plazieren, die wir relativ ausrichten:
<LAYER TOP=100 LEFT=100 WIDTH=100
HEIGHT=100 BGCOLOR="black">
<LAYER TOP=20 LEFT=20 WIDTH=60 HEIGHT=60 BGCOLOR="cyan">
</LAYER>
</LAYER>
Wie erwartet, zentriert dies eine weitere Ebene mit einem cyanfarbenen Hintergrund in der ersten Ebene (siehe auch Abbildung 31.15).
Abbildung 31.15: |
Sie könnten dasselbe Ergebnis erzielen, wenn Sie die Attribute TOP und LEFT durch PAGEX und PAGEY mit den geeigneten Werten ersetzen:
<LAYER TOP=100 LEFT=100 WIDTH=100
HEIGHT=100 BGCOLOR="black">
<LAYER PAGEX=120 PAGEY=120 WIDTH=60 HEIGHT=60 BGCOLOR="cyan">
</LAYER>
</LAYER>
Was würde allerdings passieren, wenn Sie die Werte von PAGEX und PAGEY so verändern, daß sich das cyanfarbene Quadrat auf einmal außerhalb der Elternebene befindet?
<LAYER TOP=100 LEFT=100 WIDTH=100
HEIGHT=100 BGCOLOR="black">
<LAYER PAGEX=0 PAGEY=0 WIDTH=60 HEIGHT=60 BGCOLOR="cyan">
</LAYER>
</LAYER>
Wie Sie in Abbildung 31.16 sehen können, ist die zweite Ebenen trotzdem sie in die erste eingebettet ist, nicht länger an die Grenzen der Elternebene gebunden. Allerdings muß die cyanfarbene Ebene in der Elternebene dargestellt werden. Aus diesem Grund muß die Elternebene soweit nach links oben ausgedehnt werden, daß sie die Kindebene einschließt.
Ähnlich verhält es sich, wenn Sie die Kindebene außerhalb des rechten und unteren Randes plazieren (z.B. PAGEX=250 und PAGEY=250). Das Ergebnis sehen Sie in Abbildung 31.17.
Abbildung 31.16: |
Abbildung 31.17: |
Externe Quelldateien und Ebenen
In allen Beispielen bisher haben wir den Inhalt, der in einer einzigen Datei definiert wurde, verwendet, um Ebenen zu erzeugen. Ebenen können allerdings auch den Inhalt externer Dateien enthalten. Dies erreicht man über das SRC-Attribut des <LAYER>-Tags.
Lassen Sie uns einen Blick auf ein einfaches Beispiel werfen. Wir werden eine Seite erstellen, die das Special des Tages eines Online-Handtuchladens anzeigt (ich bezweifle zwar, daß es einen solchen Laden gibt, aber es klingt ungewöhnlich genug, um es zu versuchen).
Die Seite zeigt das Special des Tages in einer Ebene an, die ihren Inhalt aus einer externen HTML-Datei (daily.html) bezieht. Auf diesem Weg können Sie daily.html jeden Tag editieren, ohne dabei die gesamte Seite bearbeiten zu müssen, was die Verwaltung des Ganzen etwas einfacher macht.
Das Hauptdokument könnte in etwa folgendermaßen aussehen:
<HTML>
<HEAD>
<TITLE>
Towels On-line
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>TOWELS ON-LINE</H1>
<HR>
<LAYER TOP=150 SRC="daily.html">
</LAYER>
</BODY>
</HTML>
Als nächstes muß die Datei daily.html erzeugt werden:
<H2>Today's Special:</H2>
<H3>Red Towels</H3>
All red towels are 25% -- today only. Order now!
Das Ergebnis der zusammengesetzten Einzelteile sehen Sie in Abbildung 31.18.
Beachten Sie bitte, daß das <LAYER>-Tag mit dem Tag </LAYER> geschlossen wurde, obwohl sich nichts zwischen diesen Tags befindet. Dies ist trotzdem nötig. Dafür gibt es zwei Gründe: Wenn Sie im Anschluß an die Ebene Inhalte einfügen wollen, muß der Browser das Ende der Ebene erkennen können. Zum anderen können Ebenen Inhalte, die über das SRC-Attribut angegeben werden, mit Inhalten kombinieren, die direkt zwischen die Tags <LAYER> und </LAYER> eingegeben werden. Wenn Sie diese Möglichkeit nutzen, wird der Inhalt der SRC-Datei vor dem Inhalt zwischen den Tags definiert. Lassen Sie uns eine horizontale Linie unterhalb des Inhalts aus daily.html über diese Technik einfügen:
<HTML>
<HEAD>
<TITLE>
Towels On-line
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>TOWELS ON-LINE</H1>
<HR>
<LAYER TOP=150 SRC="daily.html">
<HR>
</LAYER>
</BODY>
</HTML>
Abbildung 31.18: |
Ebenen verstecken und anzeigen
Das letzte Attribut des <LAYER>-Tags erlaubt es Ihnen, die Sichtbarkeit einer gegebenen Ebene zu kontrollieren. Das Attribut VISIBILITY kennt drei mögliche Werte: SHOW, HIDE und INHERIT.
SHOW und HIDE erklären sich fast von selbst: SHOW bedeutet, daß die Ebene angezeigt wird. HIDE dagegen legt fest, daß die Ebene nicht angezeigt wird. Der Wert INHERIT bedeutet, daß die Ebene ihre Sichtbarkeit aus der Sichtbarkeit ihrer Elternebene ableitet.
Auf den ersten Blick scheint es nicht besonders sinnvoll, eine Ebene über HIDE zu verstecken oder den Sichtbarkeitsstatus von der Elternebene zu erben. Allerdings werden sie extrem nützlich, wenn wir uns weiter unten in diesem Kapitel im Abschnitt »Ebenen und JavaScript« mit Skriptebenen beschäftigen.
Inline-Ebenen
Nachdem wir uns die explizit positionierten Ebenen, die über das <LAYER>-Tag definiert werden, angesehen haben, müssen wir uns nun den Inline-Ebenen widmen und wie sich diese von den explizit positionierten Ebenen unterscheiden.
Inline-Ebenen werden relativ zum aktuellen Fluß des Dokuments, in dem sich diese befinden, positioniert. Sie werden über das Tag <ILAYER> erzeugt. Folgende Zeile erzeugt z.B. eine Inline-Ebene, die nach dem Wort beginnt:
Eine Inline Ebene beginnt <ILAYER>hier!</ILAYER>
Beachten Sie bitte, daß das <ILAYER>-Tag ein schließendes </ILAYER>-Tag benötigt, so wie das <LAYER>-Tag durch ein </LAYER>-Tag geschlossen werden muß.
Die Verwendung des <ILAYER>-Tags ähnelt in vielen Beziehungen der des <LAYER>-Tags. Beide bieten exakt die gleichen Attribute, einschließlich der Attribute NAME, TOP, LEFT, WIDTH und HEIGHT. Im Fall der Inline-Ebenen legen TOP und LEFT allerdings die Position in bezug auf die aktuelle Position im Fluß des Dokuments fest.
Das bedeutet, daß Inline-Ebenen für vielerlei Formatierungsaufgaben verwendet werden können, die zuvor nur durch schwierige Umwege erreicht werden konnten. Gesetzt den Fall, sie wollen die linke Seite eines Absatzes 15 Pixel einziehen. Dafür können Sie folgenden Code verwenden:
<DIV ALIGN=LEFT>
<P>This paragraph is not indented at all.</P>
<P><ILAYER LEFT=15>The first word is indented by 15 pixels
in this example which produces results like what you see here.
</ILAYER></P>
</DIV>
Das Ergebnis sehen Sie in Abbildung 31.19.
Abbildung 31.19: |
Auf ähnliche Weise erzeugt folgender Code das Ergebnis, das Sie in Abbildung 31.20 sehen:
See how we can move a <ILAYER TOP=5>word</ILAYER> five pixels down.
Abbildung 31.20: |
Ebenen in anderen Browsern
Bevor wir uns damit beschäftigen, wie man Ebenen mit JavaScript manipuliert, wollen wir uns damit beschäftigen, wie man Browser versorgt, die Netscape's Ebenentechnologie nicht unterstützen. Wenn Ihr Ebenen-Dokument keine Skripten verwendet, wird der Inhalt Ihres Dokuments in anderen Browsern geladen, da die Tags <LAYER> und </ILAYER>, die ja die Ebenen definieren, einfach ignoriert werden.
Allerdings gibt es Fälle, in denen dies nicht funktioniert: Sobald Sie ein JavaScript-Skript integrieren, das von der Funktionalität der Ebenen abhängig ist, und dieses in einen JavaScript-fähigen Browser ohne Ebenenunterstützung laden, oder wenn die Tags <LAYER> bzw. <ILAYER> ignoriert werden, erzeugt dies Layouts, die nicht für die Präsentation des Inhalts geeignet sind. In diesen Fällen benötigen Sie einen Weg, um alternative Inhalte für Netscape und für andere Browser anzubieten, wie wir dies bereits bei Frames über das <NOFRAMES>-Tag getan haben. Dies ist der Moment, an dem das <NOLAYER>-Tag ins Spiel kommt. Alles, was sich zwischen <NOLAYER> und </NOLAYER> befindet, wird im Netscape Communicator oder anderen Browsern in Zukunft, die Ebenen unterstützen, ignoriert. Folgender Quellcode soll dies verdeutlichen:
Mit Ebenenunterstützung
<NOLAYER>
Ohne Ebenenunterstützung
</NOLAYER>
Ohne Ebenenunterstützung wird nur in Browsern ohne Ebenenunterstützung angezeigt. Ein Problem gibt es in diesem Fall: Mit Ebenenunterstützung wird, abzüglich des eigentlichen Ebenenlayouts, auch in diesen Browsern angezeigt. Aus diesem Grund benötigen Sie einen Weg, den Inhalt vor Browsern zu verstecken, die Ebenen nicht unterstützen, aber es gleichzeitig Netscape und anderen zukünftigen Browsern mit Ebenenunterstützung ermöglichen, die Inhalte der Ebenen anzuzeigen.
Netscape's Lösung für dieses Problem sind bedingende Kommentare. Bedingende Kommentare erlauben es Ihnen, eine Bedingung anzugeben. Diese Bedingung gibt an, ob der Inhalt des Kommentars vom Browser als regulärer HTML-Code ausgewertet werden soll. Die Struktur eines bedingenden Kommentars sieht wie folgt aus:
<--&{"&"};{Testausdruck};
Inhalt der Ebene
-->
Wie Sie sehen können, wird der Kommentar mit <-- eröffnet und mit --> geschlossen, so daß dieser für Browser ohne Ebenenunterstützung wie ein normaler Kommentar aussieht. Der Teil {Testausdruck} ist der Schlüssel dazu, um Netscape dazu veranlassen, den Ebeneninhalt anzuzeigen.
Was ist nun der Testausdruck? Der Testausdruck muß ein richtiger JavaScript-Ausdruck sein und es muß einer sein, über den sich entscheiden läßt, ob der Browser Ebenen unterstützt. Netscape schlägt vor, die Existenz des Objekts document.layers zu prüfen, da dieses Objekt nur in Browsern mit Ebenenunterstützung vorhanden ist. Dafür können Sie den Ausdruck typeof document.layers == "object" verwenden. Das bedeutet, die endgültige Struktur für ein Dokument, das sowohl für Browser mit Ebenenunterstützung als auch für Browser ohne Ebenenunterstützung geeignet ist, sollte folgende sein:
<--&{"&"};{typeof
document.layers == "object"};
Inhalte für Ebenen
-->
<NOLAYER>
Inhalte für Browser ohne Ebenenunterstützung
</NOLAYER>
|
Das Preview Release 4 des Netscape Communicator, das beim Schreiben dieses Buches aktuell war, unterstützte bedingende Kommentare nicht. Dies ist der Grund dafür, daß sich in diesem Abschnitt keine ausführlichen Beispiele befinden. Das endgültige Release des Communicator unterstützt bedingende Kommentare. |
Ebenen und JavaScript
Nachdem Sie nun eine gute Vorstellung von der Funktionsweise der Ebenen haben und Sie Dokumente mit übereinanderliegenden Ebenen aller Art erzeugen können, wird es Zeit sich anzusehen, wo das wahre Potential der Ebenen liegt: Skripten.
Sie haben in den Kapiteln 23 und 24 bereits eine kurze Einführung in JavaScript erhalten. Nun werden wir JavaScript auf Ebenen anwenden.
Es gibt grundsätzlich zwei Möglichkeiten, JavaScript auf Ebenen anzuwenden: über Ereignisbehandlungsroutinen (Eventhandler), um die Reaktionen festzulegen, die auf bestimmte Aktionen des Benutzers in einer Ebene erfolgen sollen. Und anderswo, um Inhalt und Erscheinungsbild einer Ebene beeinflussen zu können.
Lassen Sie uns mit den Ereignisbehandlungsroutinen beginnen. Das <LAYER>-Tag bietet fünf mögliche Ereignisbehandlungen an:
Die meisten dieser Ereignisbehandlungsroutinen sind einfach in der Anwendung. Nehmen Sie die onLoad-Routine. Was wäre, wenn Sie dem Benutzer eine spezielle Willkommensnachricht anzeigen wollten, nachdem die Seite geladen ist? Auf das Beispiel des Online-Handtuchladens bezogen, das wir weiter oben in diesem Kapitel bei der Besprechung des SRC-Attributs verwendet haben, müssen Sie lediglich eine einzige Änderung an der Hauptdatei vornehmen:
<HTML>
<HEAD>
<TITLE>
Towels On-line
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>TOWELS ON-LINE</H1>
<HR>
<LAYER TOP=150 SRC="daily.html" onLoad="alert('Welcome to our Daily
Specials Page');">
<HR>
</LAYER>
</BODY>
</HTML>
Beachten Sie bitte, daß dem <LAYER>-Tag lediglich ein kleiner Teil hinzugefügt wurde: die onLoad-Ereignisbehandlungsroutine zusammen mit einem einzigen JavaScript-Befehl und dessen Werten. Das Ergebnis sehen Sie in Abbildung 31.21.
Abbildung 31.21: |
Es ist wichtig daran zu denken, daß sich die onLoad-Ereignisbehandlung der Ebenen von der onLoad-Ereignisbehandlung des Dokuments, die im <BODY>-Tag verwendet wird, unterscheidet. Die Ereignisbehandlung des <BODY>-Tags wird ausgelöst, sobald das Dokument geladen wird, wohingegen die Ereignisbehandlung der Ebenen ausgeführt wird, wenn die Ebene komplett geladen ist.
Das wahre Potential der Anwendung von JavaScript im Bezug auf Ebenen liegt in der Möglichkeit Ebenen manipulieren zu können. Jede Ebene in einem Dokument wird durch eine Instanz des layer-Objekts repräsentiert.
Das layer-Objekt besitzt einige Eigenschaften, die alle Attribute einer Ebene darstellen. Diese sind in Tabelle 31.1 aufgeführt.
Tabelle 31.1: Die Eigenschaften des layer-Objekts
Eigenschaft |
Beschreibung |
Der Name der Ebene. Repräsentiert das NAME-Attribut. |
|
Die horizontale Position der linken Kante relativ zur Elternebene. Repräsentiert das LEFT-Attribut. |
|
Die vertikale Position der oberen Kante relativ zur Elternebene. Repräsentiert das TOP-Attribut. |
|
Die horizontale Position der linken Kante relativ zum Dokumentfenster. Repräsentiert das PAGEX-Attribut. |
|
Die vertikale Position der oberen Kante relativ zum Dokumentfenster. Repräsentiert das PAGEY-Attribut. |
|
Die Position der Ebene in der Z-Reihenfolge als Integer. |
|
Legt fest, ob die Ebene sichtbar ist. Repräsentiert das VISIBILITY-Attribut. Mögliche Werte: show, hide oder inherit. |
|
Position der oberen Kante des sichtbaren Bereichs der Ebene in Pixeln (Offset von der oberen Kante der Ebene). |
|
Position der linken Kante des sichtbaren Bereichs der Ebene in Pixeln (Offset von der linken Kante der Ebene). |
|
Position der rechten Kante des sichtbaren Bereichs der Ebene in Pixeln (Offset von der linken Kante der Ebene). |
|
Position der unteren Kante des sichtbaren Bereichs der Ebene in Pixeln (Offset von der oberen Kante der Ebene). |
|
Die Breite des sichtbaren Bereichs in Pixeln. |
|
Die Höhe des sichtbaren Bereichs in Pixeln. |
|
Die URL des Hintergrunds der Ebene. Repräsentiert das BACKGROUND-Attribut. Wenn keine Hintergrundgrafik verwendet wird, ist der Wert null. |
|
Die Farbe des Hintergrunds der Ebene. Repräsentiert das BGCOLOR-Attribut. Wenn der Hintergrund transparent ist, ist der Wert null. |
|
Das layer-Objekt der Ebene, die sich in der Z-Reihenfolge direkt über der aktuellen befindet. Wenn sich über der aktuellen Ebene keine weitere befindet, ist der Wert null. |
|
Das layer-Objekt der Ebene, die sich in der Z-Reihenfolge direkt unter der aktuellen befindet. Wenn sich unter der aktuellen Ebene keine weitere befindet, ist der Wert null. |
|
Das layer-Objekt der Ebene, die sich in der Z-Reihenfolge direkt darüber befindet. Wenn die aktuelle Ebene die oberste Ebene ist, ist der Wert das window-Objekt. |
|
Das layer-Objekt der Ebene, die sich in der Z-Reihenfolge direkt unter der aktuellen befindet. Wenn sich unter der aktuellen Ebene keine weitere befindet, ist der Wert null. |
|
Das layer-Objekt der Elternebene dieser Ebene bzw. das window-Objekt, wenn die Ebene nicht in eine andere eingebettet ist. |
|
Die URL der Quelldatei einer Ebene. Repräsentiert das SRC-Attribut. |
Mit Ausnahme von name, siblingAbove, siblingBelow, above und parentLayer kann auf alle diese Eigenschaften in einem Skript schreibend zugegriffen werden.
Bevor wir ein Beispiel betrachten, das ein paar dieser Eigenschaften verwendet, wollen wir wiederholen, wie man mit diesen Eigenschaften im allgemeinen umgeht. Das document-Objekt des Communicator besitzt eine Eigenschaft layers. Diese ist ein Array für layer-Objekte, das alle Ebenen eines Dokuments enthält. Sie können die Namen der Ebenen als Schlüssel verwenden, um auf die einzelnen Ebenen in diesem Array zuzugreifen. Die Syntax hierfür sieht folgendermaßen aus:
Document.layers["Ebenenname"]
Daraus folgt: Um auf eine bestimmte Eigenschaft einer bestimmten Ebene zuzugreifen, können Sie folgende Syntax verwenden:
Document.layers["Ebenenname"].Eigenschaftenname
Nun sind wir bereit, einiges mit diesen Eigenschaften anzustellen. Lassen Sie uns eine einfache Seite erzeugen, die acht farbige Quadrate anzeigt. Jedes Quadrat wird dabei durch eine Ebene mit fester Größe und einer bestimmten Hintergrundfarbe erstellt. Wenn sich die Maus in einer der Ebenen befindet, wird der Name der Hintergrundfarbe in dieser Ebene angezeigt. Verläßt die Maus die Ebene, verschwindet der Name der Farbe - die Farbe bleibt aber bestehen.
Lassen Sie uns zu Beginn das Ebenendokument erstellen:
<HTML>
<HEAD>
<TITLE>Color name with Layers</TITLE>
</HEAD>
<BODY>
<LAYER NAME="red" BGCOLOR="red" TOP=10 LEFT=10 WIDTH=75
HEIGHT=75 onMouseOver="this.src='red.html';"
onMouseOut="this.src='blank.html';">
</LAYER>
<LAYER NAME="blue" BGCOLOR="blue" TOP=10 LEFT=95 WIDTH=75
HEIGHT=75 onMouseOver="this.src='blue.html';"
onMouseOut="this.src='blank.html';">
</LAYER>
<LAYER NAME="green" BGCOLOR="green" TOP=10 LEFT=180 WIDTH=75
HEIGHT=75 onMouseOver="this.src='green.html';"
onMouseOut="this.src='blank.html';">
</LAYER>
<LAYER NAME="maroon" BGCOLOR="maroon" TOP=10 LEFT=265 WIDTH=75
HEIGHT=75 onMouseOver="this.src='maroon.html';"
onMouseOut="this.src='blank.html';">
</LAYER>
<LAYER NAME="black" BGCOLOR="black" TOP=95 LEFT=10 WIDTH=75
HEIGHT=75 onMouseOver="this.src='black.html';"
onMouseOut="this.src='blank.html';">
</LAYER>
<LAYER NAME="yellow" BGCOLOR="yellow" TOP=95 LEFT=95 WIDTH=75
HEIGHT=75 onMouseOver="this.src='yellow.html';"
onMouseOut="this.src='blank.html';">
</LAYER>
<LAYER NAME="grey" BGCOLOR="grey" TOP=95 LEFT=180 WIDTH=75
HEIGHT=75 onMouseOver="this.src='grey.html';"
onMouseOut="this.src='blank.html';">
</LAYER>
<LAYER NAME="cyan" BGCOLOR="cyan" TOP=95 LEFT=265 WIDTH=75
HEIGHT=75 onMouseOver="this.src='cyan.html';"
onMouseOut="this.src='blank.html';">
</LAYER>
</BODY>
</HTML>
Was passiert hier im Detail? Wenn Sie sich die Positionierung der einzelnen Ebenen genau ansehen, stellen Sie fest, daß zwei Reihen mit Ebenen erzeugt wurden. Jede der Ebenen ist dabei ein Quadrat mit einer Kantenlänge von 75 Pixeln. Um die Ebenen herum befindet sich ein Freiraum von 10 Pixeln.
Jede Ebene besitzt eine andere Hintergrundfarbe und verfügt über zwei Ereignisbehandlungsroutinen. Die Ereignisbehandlung onMouseOver ändert die SRC-Eigenschaft des aktuellen layer-Objekts. Diese zeigt danach auf eine einfache HTML-Datei, die den Namen der Hintergrundfarbe der Ebene enthält. Die Datei cyan.html würde z.B. folgendermaßen aussehen:
<FONT
COLOR="black"><STRONG>
CYAN
</STRONG></FONT>
Beachten Sie bitte, daß in jeder Ereignisbehandlung das Schlüsselwort this verwendet wird, um sich auf das Objekt des aktuellen Tag zu beziehen - in diesem Fall das layer-Objekt. Die Ereignisbehandlung onMouseOut legt fest, daß die Datei blank.html in die Ebene geladen werden soll. Dabei handelt es sich einfach um eine leere Datei.
Wenn man all dies zusammenfügt, sieht das Ergebnis wie in Abbildung 31.22 aus.
Sie werden allerdings bemerken, daß es bei diesem Ansatz ein Problem gibt: Wenn Sie ein neues Quelldokument mit diesen Farben in die Ebene laden, paßt die Ebene ihre Größe an dieses neue Dokument an. Das Ergebnis ist, daß unser Quadrat die Größe verändert. Woraus sich nicht gerade die anmutigste Erscheinung ergibt.
Wir können versuchen, dieses Problem durch eine Art Trick zu lösen: Sichtbarkeit und verschachtelte Ebenen. Was wir tun werden, ist folgendes: Wir verwenden für jede Farbe zwei Ebenen. Die erste, ganz unten, stellt das farbige Quadrat dar. Als nächstes eine transparente Ebene, die in die erste eingebettet ist und darüber dargestellt wird. Diese enthält den Namen der Farbe. Nun müssen wir in unseren Ereignisbehandlungsroutinen nur noch die Sichtbarkeit der zweiten Ebene an- und abschalten. Versuchen wir's.
Abbildung 31.22: |
<HTML>
<HEAD>
<TITLE>Color name with Layers</TITLE>
</HEAD>
<BODY>
<LAYER NAME="red" BGCOLOR="red" TOP=10 LEFT=10 WIDTH=75 HEIGHT=75
onMouseOver="this.document.layers['redname'].visibility='show';"
onMouseOut="this.document.layers['redname'].visibility='hide';">
<LAYER NAME="redname" TOP=10 LEFT=10 SRC="red.html"
VISIBILITY="hide"></LAYER>
</LAYER>
<LAYER NAME="blue" BGCOLOR="blue" TOP=10 LEFT=95 WIDTH=75 HEIGHT=75
onMouseOver="this.document.layers['bluename'].visibility='show';"
onMouseOut="this.document.layers['bluename'].visibility='hide';">
<LAYER NAME="bluename" TOP=10 LEFT=10 SRC="blue.html"
VISIBILITY="hide"></LAYER>
</LAYER>
<LAYER NAME="green" BGCOLOR="green" TOP=10 LEFT=180 WIDTH=75
HEIGHT=75 onMouseOver="this.document.layers['greenname'].visibility='show';"
onMouseOut="this.document.layers['greenname'].visibility='hide';">
<LAYER NAME="greenname" TOP=10 LEFT=10 SRC="green.html"
VISIBILITY="hide"></LAYER>
</LAYER>
<LAYER NAME="maroon" BGCOLOR="maroon" TOP=10 LEFT=265 WIDTH=75
HEIGHT=75 onMouseOver="this.document.layers['maroonname'].visibility='show';"
onMouseOut="this.document.layers['maroonname'].visibility='hide';">
<LAYER NAME="maroonname" TOP=10 LEFT=10 SRC="maroon.html"
VISIBILITY="hide"></LAYER>
</LAYER>
<LAYER NAME="black" BGCOLOR="black" TOP=95 LEFT=10 WIDTH=75
HEIGHT=75 onMouseOver="this.document.layers['blackname'].visibility='show';"
onMouseOut="this.document.layers['blackname'].visibility='hide';">
<LAYER NAME="blackname" TOP=10 LEFT=10 SRC="black.html"
VISIBILITY="hide"></LAYER>
</LAYER>
<LAYER NAME="yellow" BGCOLOR="yellow" TOP=95 LEFT=95 WIDTH=75
HEIGHT=75 onMouseOver="this.document.layers['yellowname'].visibility='show';"
onMouseOut="this.document.layers['yellowname'].visibility='hide';">
<LAYER NAME="yellowname" TOP=10 LEFT=10 SRC="yellow.html"
VISIBILITY="hide"></LAYER>
</LAYER>
<LAYER NAME="grey" BGCOLOR="grey" TOP=95 LEFT=180 WIDTH=75
HEIGHT=75 onMouseOver="this.document.layers['greyname'].visibility='show';"
onMouseOut="this.document.layers['greyname'].visibility='hide';">
<LAYER NAME="greyname" TOP=10 LEFT=10 SRC="grey.html"
VISIBILITY="hide"></LAYER>
</LAYER>
<LAYER NAME="cyan" BGCOLOR="cyan" TOP=95 LEFT=265 WIDTH=75
HEIGHT=75 onMouseOver="this.document.layers['cyanname'].visibility='show';"
onMouseOut="this.document.layers['cyanname'].visibility='hide';">
<LAYER NAME="cyanname" TOP=10 LEFT=10 SRC="cyan.html"
VISIBILITY="hide"></LAYER>
</LAYER>
</BODY>
</HTML>
Das Ergebnis sehen Sie in Abbildung 31.23.
Abbildung 31.23: |
Dieses Beispiel macht auf einen wichtigen Punkt aufmerksam: So wie das document-Objekt über ein layers-Array verfügt, besitzt jedes layer-Objekt ein document-Objekt. Dieses wiederum verfügt über ein layers-Array für alle Ebenen, die sich in dieser Ebene befinden. Dies ist der Grund dafür, warum Sie auf die verschachtelten Ebenen mit einem Ausdruck wie dem folgenden zugreifen können:
document.layers["red"].document.layers["redname"]
Die Methoden des layer-Objekts
Zusätzlich zu all diesen Eigenschaften verfügt das layer-Objekt über einige Methoden. Diese Methoden finden Sie in Tabelle 31.2 aufgelistet.
Tabelle 31.2: Methoden des layer-Objekts
Name |
Beschreibung |
Verschiebt die Ebene um die in x und y angegebene Anzahl von Pixeln. x und y können negative oder positive Integer sein. |
|
Verschiebt die Ebene an die von x und y festgelegte Position. Diese Position ist relativ zu der Elternebene oder im Fall von Inline-Ebenen die sich im Textfluß ergebende Position. |
|
Verschiebt eine Ebene an die durch x und y festgelegte Position. Allerdings nicht relativ zur Elternebene, sondern relativ zum Dokumentfenster. |
|
Bringt die Ebene auf die Größe, die in den Argumenten in Pixeln angegeben ist. Das Layout des Inhalts der Ebene wird daran nicht angepaßt, so daß Teile davon verdeckt werden können, wenn Sie die Ebene verkleinern. |
|
Verschiebt die aktuelle Ebene über die als Argument angegebene Ebene. |
|
Verschiebt die aktuelle Ebene unter die als Argument angegebene Ebene. |
|
Lädt Dateiname in die Ebene und setzt die Breite der Ebene auf den in Breite angegebenen Wert. |
Nachdem Sie nun diese Liste gesehen haben, fragen Sie sich vielleicht, was man mit diesen Methoden anfangen kann. Zwei Möglichkeiten möchte ich hier ansprechen:
Lassen Sie uns als Beispiel eine Seite erstellen, die eine Inline-Ebene anzeigt. Zusätzlich soll diese Seite Steuerelemente enthalten, um den Inhalt dieser Ebene zu animieren. Die Benutzer sollten in der Lage sein, folgende Parameter zu beeinflussen:
Der Quellcode der Seite könnte folgendermaßen aussehen:
<HTML>
<HEAD>
<TITLE>The Animated Word</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var animate=true;
var x=1;
var y=0;
var speed=300;
function doMove() {
if (animate) {
document.layers["word"].moveBy(x,y);
setTimeout("doMove()",speed);
}
}
//-->
</Skript>
</HEAD>
<BODY>
<FORM>
<TABLE WIDTH=100%><TR VALIGN=TOP>
<TD WIDTH=25% ALIGN=LEFT>
<INPUT TYPE=button VALUE="START"
onClick="animate=true; doMove();"><BR>
<INPUT TYPE=button VALUE="STOP" onClick="animate=false">
</TD><TD WIDTH=50% ALIGN=CENTER>
<INPUT TYPE=button VALUE="UP" onClick='x=0;y=-1'><BR>
<INPUT TYPE=button VALUE="LEFT" onClick='x=-1;y=0'>
<INPUT TYPE=button VALUE="RIGHT" onClick='x=1;y=0'><BR>
<INPUT TYPE=button VALUE="DOWN" onClick='x=0;y=1'><BR>
</TD><TD WIDTH=25% ALIGN=RIGHT>
<INPUT TYPE=button VALUE="FASTER"
onClick="speed-=50; if (speed < 0) { speed = 1; }"><BR>
<INPUT TYPE=button VALUE="SLOWER" onClick="speed+=50">
</TD>
</TR></TABLE>
</FORM>
<HR>
<H1><ILAYER VISIBILITY=SHOW
NAME="word">Word</ILAYER></H1>
</BODY>
</HTML>
Dieser Quellcode erzeugt die einfache Benutzerschnittstelle, die Sie in Abbildung 31.24 sehen.
Abbildung 31.24: |
Aus der Sicht des Benutzers funktioniert das Programm wie folgt: Die Standard-Richtung der Bewegung ist nach rechts. Wenn der Benutzer auf Start klickt, beginnt sich das Wort Word zu bewegen. Sobald der Benutzer auf eine der Richtungsschaltflächen klickt, verändert sich die Richtung der Bewegung entsprechend. Über die Schaltfläche Stop kann er die Bewegung anhalten. Mit den Schaltflächen Faster bzw. Slower kann er die Geschwindigkeit verändern.
Hinter den Kulissen ist das Programm überraschend einfach - dank der Ebenen.
Es gibt in diesem Programm vier Hauptvariablen:
Die andere Hauptkomponente des Skripts ist die Funktion doMove(). Diese Funktion wird aufgerufen, wenn der Benutzer auf die Schaltfläche Start klickt. Sie führt einige einfache Dinge aus. Zunächst prüft sie den Wert von animate. Ist dieser false, so wird die Funktion verlassen.
Wenn animate true ist, muß die Funktion das Wort bewegen. Als erstes wird die moveBy()-Methode des layer-Objekts aufgerufen, um das Objekt in die von x, y festgelegte Richtung zu bewegen. Jedesmal, wenn doMove() aufgerufen wird, wird das Wort ein Pixel in die vorgegebene Richtung bewegt. Schließlich wird setTimeout() verwendet, um die nächste Bewegung des Wortes zu timen. Dabei gibt speed an, wie lang gewartet werden soll, bis doMove() erneut aufgerufen wird. Auf diesem Weg wird doMove() solange erneut in dem durch speed festgelegten Intervall aufgerufen, bis animate den Wert false hat.
Nun wollen wir uns mal ansehen, was beim Betätigen der einzelnen Schaltflächen passiert. Die Schaltflächen Start und Stop sind schnell erklärt. Über die onClick-Ereignisbehandlung setzt die Start-Schaltfläche animate auf true und ruft doMove() auf, um die Animation zu starten. Stop setzt animate einfach auf false. Wenn animate den Wert true hatte, wird doMove(), wie nach dem letzen Aufruf davor festgelegt, aufgerufen und da animate nun den Wert false besitzt, stoppt die Bewegung.
Die Schaltflächen für die Richtung haben im wesentlichen den gleichen Effekt: Sie setzen die Werte von x und y so, daß die Bewegung in die gewünschte Richtung läuft. Wenn animate true ist, dann wird der nächste planmäßige Aufruf von doMove() die Animation mit den neuen Werten von x und y starten.
Die Schaltflächen zur Kontrolle der Geschwindigkeit scheinen etwas komplizierter zu sein, sind aber nicht besonders schwierig zu verstehen. Wenn der Benutzer versucht, das Ganze schneller zu machen, bedeutet das, Sie müssen den Wert von speed verkleinern, um das Intervall zwischen den einzelnen Ein-Pixel-Schritten des Wortes zu verkleinern. Dies wird in Schritten von 50 Millisekunden getan (ein völlig willkürlicher Wert). Daraus ergibt sich eine Schwierigkeit: Was, wenn speed kleiner als Null wird? Das if-Statement überprüft dies und setzt speed auf Null, falls es dazu kommen sollte. Die Schaltfläche zum Bremsen der ganzen Angelegenheit ist einfacher: Der Wert von speed wird lediglich in Schritten von 50 Millisekunden erhöht. Dabei gibt es eigentlich keine obere Grenze - lediglich der maximale Wert für Integer in der Ausführungsumgebung.
Einen interessanten Punkt gibt es hier anzumerken: Wir verwenden hier eine Inline-Ebene. Aus diesem Grund befindet sich die Ebene direkt hinter der horizontalen Trennlinie. Es ist nicht notwendig, die Größe oder die Position der Ebene anzupassen. Ein weiterer interessanter Punkt ist, daß sich die Ebene im gesamten Dokumentfenster bewegen kann, einschließlich dem Bereich zur Kontrolle der Animation oberhalb der horizontalen Linie, wie Sie das in Abbildung 31.25 sehen können.
Abbildung 31.25: |
Objektpositionierung im Microsoft Internet Explorer
Zu lernen, wie Ebenen in Netscape funktionieren, war eine ziemlich anstrengende Lektion. Die einzige wirkliche Schwierigkeit bei den Ebenen ist, daß Netscape's Hauptrivale Microsoft diese in der neusten Version seines Browsers, Internet Explorer 4, nicht unterstützt.
Nichtsdestotrotz gibt es Wege, um im Internet Explorer 4 ganz ähnlich wie mit Netscape's Ebenentechnologie Objekte zu positionieren. Dafür wird eine vorgeschlagene Erweiterung der kaskadierten Stilvorlagen verwendet. Diese Erweiterung wird sowohl von Netscape als auch von Microsoft unterstützt und ist in gewisser Weise eine Erweiterung der Ebenenfunktionalität.
|
In den Preview Releases der beiden Browser (Netscape Communicator und Internet Explorer 4), die beim Schreiben dieses Buches aktuell waren, war die Unterstützung dieser Erweiterung noch nicht voll ausgereift. Aus diesem Grund sind die Beispiele in diesem Abschnitt eher einfach. |
Wir werden uns in diesem Kapitel noch nicht mit der vollen Syntax der Stilvorlagen beschäftigen - das heben wir uns für das nächste Kapitel auf. Für den Moment reicht es aus zu wissen, daß Stilvorlagen über die Tags <STYLE> und </STYLE> definiert werden:
<STYLE>
Definition der Stilvorlage
</STYLE>
Diese Stilvorlagen können verschiedenen Seitenelementen zugewiesen werden. Alternativ dazu können Sie spezielle Stilvorlagen über das STYLE-Attribut vieler HTML-Tags definieren.
Sie werden beide Techniken kennenlernen, wenn wir uns mit den Beispielen im Laufe dieses Abschnitts beschäftigen.
Lassen Sie uns damit beginnen, ein Gefühl zu bekommen, was man mit diesem Ansatz zur Positionierung von Seitenelementen tun kann. In vielen Belangen kann man die gleichen Dinge tun, die wir bei den Ebenen getan haben. Allerdings unter Verwendung anderer Befehle und teilweise auf anderen Wegen. Sie können Positionen entweder relativ oder absolut festlegen. Sie können Elemente in den Fluß integrieren und Text um diese herumfließen lassen, Sie können die Sichtbarkeit von Elementen kontrollieren und Sie können die Z-Reihenfolge von Elementen festlegen.
Eigenschaften der Positionierung über kaskadierte Stilvorlagen
Die vorgeschlagenen Erweiterungen der kaskadierten Stilvorlagen zur Positionierung umfassen die folgenden Eigenschaften:
Es wird sofort offensichtlich, daß es zwischen diesen Eigenschaften und den Attributen des <LAYER>-Tags viele Ähnlichkeiten gibt, aber diese Eigenschaften auch ein paar zusätzliche Möglichkeiten bieten. So können Sie z.B. beim <LAYER>-Tag nicht festlegen, was zu tun ist, wenn der Inhalt nicht in eine Ebene paßt. Hier haben Sie dagegen die Möglichkeit, dies über die overflow-Eigenschaft festzulegen.
Am einfachsten verwenden Sie diese Eigenschaften im STYLE-Attribute eines HTML-Tags. Das <DIV>-Tag ist ein geeigneter Platz für diese Attribute. Mit diesem Tag können Sie eine Folge von HTML-Statements einschließen, denen dann der Stil zugewiesen wird.
Sehen Sie sich folgendes Beispiel an:
<HTML>
<HEAD>
<TITLE>Style Sheet Positioning</TITLE>
</HEAD>
<BODY>
The following text is positioned using
Cascading Style Sheet properties ...
<DIV STYLE="position: absolute; top:100; left:100; width:100;
overflow:none;">
This text has been positioned in a 100 pixel
wide area offset by 100 pixels from the top
and left of the page.
</DIV>
</BODY>
</HTML>
Das Ergebnis dieses Quelltextes sehen Sie in Abbildung 31.26.
Abbildung 31.26: |
Sie werden sicherlich sofort einige interessante Punkte feststellen:
Die Untersuchung dieses Beispiels wirft bestimmte Fragen auf. Zunächst einmal, wie funktionieren die anderen Werte von overflow?
Lassen Sie uns einen Blick auf overflow:clip werfen. Laut Spezifikation soll in diesem Fall alles, was über den Rand des sichtbaren Bereichs, wie er im Stil definiert ist, hinausgeht, abgeschnitten werden. In Abbildung 31.27 sehen Sie das Ergebnis.
Abbildung 31.27: |
Als nächstes wollen wir den Unterschied zwischen absoluter, relativer und statischer Positionierung betrachten.
Wie Sie bereits gesehen haben, wird ein Element bei der absoluten Positionierung unabhängig von anderen Elementen relativ zum Dokumentfenster plaziert. Ganz deutlich sehen Sie dies, wenn wir zwei Elemente einander teilweise überlappen lassen:
<HTML>
<HEAD>
<TITLE>Style Sheet Positioning</TITLE>
</HEAD>
<BODY>
The following text is positioned using
Cascading Style Sheet properties ...
<DIV STYLE="position: absolute; top:100; left:100; width:100;
overflow:none;">
This text has been positioned in a 100 pixel wide
area offset by 100 pixels from the top and
left of the page.
</DIV>
<DIV STYLE="position: absolute; top:150; left:100; width:100;
overflow:none;">
This text has been positioned in a 100 pixel wide
area offset by 100 pixels from the top and
left of the page.
</DIV>
</BODY>
</HTML>
Wir haben hier nun das <DIV>-Element zweimal eingefügt. Allerdings beim zweiten Mal um 50 Pixel nach unten versetzt. Das Ergebnis ist der vermischte Text, den Sie in Abbildung 31.28 sehen.
Abbildung 31.28: |
Relative Positionierung funktioniert etwas anders. Elemente, die auf diesem Weg positioniert werden, werden in dem Elternelement innerhalb des Flusses des HTML-Dokuments plaziert. Auf diese Weise behält das Element seine natürliche Formatierung, verfügt aber andererseits über einige der Features der absolut positionierten Elemente, wie z.B. Kontrolle über die Z-Reihenfolge und die Sichtbarkeit und die Möglichkeit, Kindelemente einzufügen. In gewisser Weise ähnelt es den Inline-Ebenen des Netscape Communicator.
Diesen relativ positionierten Elementen können Sie die Eigenschaften top, left, width und height zuweisen, um das Element von seiner eigentlichen Position im Fluß des Dokuments aus zu verschieben.
Das folgende Beispiel zeigt, daß Sie über diese Eigenschaften Text nach oben oder unten schieben oder sogar Worte abschneiden können:
<HTML>
<HEAD>
<TITLE>Relative Positioning</TITLE>
</HEAD>
<BODY>
This text includes a
<SPAN STYLE="position: relative; top: -2">word</SPAN>
that is raise two pixels, another
<SPAN STYLE="position: relative; top: 3">word</SPAN>
that is lowered three pixels and yet another
<SPAN STYLE="position: relative; clip: 0 20 20 0; overflow:
clip">word</SPAN>
that is clipped.</BODY>
</HTML>
Das Ergebnis sehen Sie in Abbildung 31.29.
Abbildung 31.29: |
Sie werden feststellen, daß in diesem Beispiel die Tags <SPAN> und </SPAN> verwendet wurden, um den Abschnitt zu kennzeichnen, der positioniert werden soll. Das <DIV>-Tag hätte nämlich zur Folge, daß der Text als neuer Absatz positioniert wird, was zu dem Ergebnis führt, welches Sie in Abbildung 31.30 sehen. Da wir dies nicht wollen, verwenden wir <SPAN>, das den Bereich festlegt, ohne dabei einen neuen Absatz zu beginnen.
Abbildung 31.30: |
Statische Positionierung ist die dritte Alternative im Vorschlag für die Positionierung über kaskadierte Stilvorlagen. Nach der Spezifikation des World Wide Web Consortium ist statische Positionierung identisch mit dem normal dargestellten HTML. Statische Positionierung von Elementen bedeutet, daß diese nicht über Skripten positioniert bzw. neu positioniert werden können. Es wird auch kein Koordinatensystem für Kindelemente erzeugt.
Wenn Sie den Wert von position im vorherigen Beispiel auf static ändern, würde das Ganze wie ein normales HTML-Dokument erscheinen, wie man das auch in Abbildung 31.31 sehen kann. Dies ist auch die Standardeinstellung für diese Eigenschaft.
Abbildung 31.31: |
Wie Sie in den letzten paar Beispielen sehen konnten, macht die Verwendung des STYLE-Attributs zur Positionierung von Elementen Ihren HTML-Code schnell unübersichtlich. Statt dessen können Sie die Tags <STYLE> und </STYLE> zur Definition einer Reihe von Stilen verwenden. Diesen können Sie beschreibende Namen geben, die Sie später zur Zuweisung der Stile verwenden.
Zur Definition plazieren Sie einen <STYLE>-Abschnitt am Anfang Ihres Dokuments:
<STYLE TYPE="text/css">
<!--
Stildefinitionen
-->
</STYLE>
Es gibt zwei Dinge, die man sich dabei merken sollte. Zum einen stellen die HTML-Kommentare sicher, daß die Stildefinitionen nicht in Browsern angezeigt werden, die Stile nicht unterstützen. Zum anderen die Verwendung des TYPE-Attributs des <STYLE>-Tags. Der Grund dafür ist, daß es mehrere Stilvorlagensysteme gibt und kaskadierte Stilvorlagen nur eines davon ist. Alle diese Systeme können innerhalb des <STYLE>-Tags definiert werden. Deshalb müssen Sie dem Browser angeben, welche Art von Stilvorlagen Sie definieren.
Die Syntax der Stildefinition ist einfach:
#Stilname1 { Stildefinition1
}
#Stilname2 { Stildefinition2 }
etc.
Das Gatterzeichen ist obligatorisch. Die Definition der Stile läuft genauso wie im STYLE-Attribut von <DIV> und <SPAN>.
Das vorherige Beispiel, in dem wir Text in einem Quadrat mit 100 Pixel Kantenlänge positioniert haben, könnte wie folgt umgeschrieben werden:
<HTML>
<HEAD>
<TITLE>Style Sheet Positioning</TITLE>
</HEAD>
<BODY>
<STYLE TYPE="text/css">
<!--
#smallbox { position: absolute; top:100; left:100; width:100; overflow:none; }
-->
</STYLE>
The following text is positioned using
Cascading Style Sheet properties ...
<DIV ID="smallbox">
This text has been positioned in a 100 pixel
wide area offset by 100 pixels from the top
and left of the page.
</DIV>
</BODY>
</HTML>
Hier haben wir die Stile direkt nach dem <BODY>-Tag definiert und anschließend diese dem entsprechenden Element zugewiesen, indem wir den Stil im ID-Attribut des <DIV>-Tags angegeben haben.
Zusammenfassung
Dies war ein großes Kapitel, aber Sie haben hoffentlich auch viel daraus gelernt. Was genau haben Sie gelernt?
Wir begannen mit einem Überblick über das dynamische HTML - den Erweiterungen der neuen Browser von Netscape und Microsoft. Sie haben gesehen, wie die beiden Firmen explizite Positionierung, Schriftkontrolle und mehr Teile der Definitionen des dynamischen HTML der beiden Firmen sind. Gleichzeitig haben Sie aber auch gelernt, daß die beiden Firmen unterschiedliche und teilweise inkompatible Ansätze für dieses neue Konzept gewählt haben.
Im Kern beschäftigte sich dieses Kapitel mit einem der zentralen Merkmale des dynamischen HTML, der Ebenen-Positionierung von Objekten auf einer Seite.
Netscape implementiert dies mit seiner Ebenentechnologie. Dabei handelt es sich um einen Satz von HTML-Tags und JavaScript-Objekten, -Eigenschaften und -Methoden, die es Seitenautoren erlauben, Objekte auf der Seite zu positionieren und übereinanderzulegen. Zusätzlich kann man diese bewegen, verbergen und wieder anzeigen.
Microsoft verwendet einen anderen Ansatz im Internet Explorer. Dabei werden die standardisierten kaskadierten Stilvorlagen (über die Sie im nächsten Kapitel mehr lernen) erweitert. Dadurch wird eine ähnliche Funktionalität wie bei Netscape's Ebenentechnologie geboten.
Im nächsten Kapitel werden wir uns einem weiteren zentralen Feature des dynamischen HTML widmen: Stilvorlagen. Sowohl Netscape als auch der Internet Explorer unterstützen kaskadierte Stilvorlagen. Dabei handelt es sich um einen Standard des World Wide Web Consortium zur Definition des Layouts von HTML-Elementen. Darüber hinaus unterstützt Netscape JavaScript-Stilvorlagen - ein anderer Ansatz für die gleiche Aufgabe.
Die Tabelle 31.3 enthält eine kurze Zusammenfassung aller Tags und Erweiterungen, die Sie in diesem Kapitel kennen gelernt haben.
Tabelle 31.3: HTML-Tags und Eigenschaften von Stilvorlagen aus diesem Kapitel
Tag/Eigenschaft |
Attribute |
Verwendung |
<LAYER> |
(Netscape-Erweiterung) Definiert eine Ebene. |
|
NAME |
(Netscape-Erweiterung) Name der Ebene. |
|
ID |
(Netscape-Erweiterung) Name der Ebene (wie NAME). |
|
LEFT |
(Netscape-Erweiterung) Entfernung der linken Kante der Ebene von der linken Kante des Containers in Pixeln. |
|
TOP |
(Netscape-Erweiterung) Entfernung der oberen Kante der Ebene von der oberen Kante des Containers in Pixeln. |
|
PAGEX |
(Netscape-Erweiterung) Entfernung der linken Kante der Ebene von der linken Kante des Dokumentfensters in Pixeln. |
|
PAGEY |
(Netscape-Erweiterung) Entfernung der linken Kante der Ebene von der linken Kante des Dokumentfensters in Pixeln. |
|
SRC |
(Netscape-Erweiterung) URL der Datei, die Inhalte für die Ebene enthält. |
|
Z-INDEX |
(Netscape-Erweiterung) Legt die Position der Ebene in der Z-Reihenfolge fest. |
|
ABOVE |
(Netscape-Erweiterung) Legt die Ebene direkt über der aktuellen fest. |
|
BELOW |
(Netscape-Erweiterung) Legt die Ebene direkt unter der aktuellen fest. |
|
WIDTH |
(Netscape-Erweiterung) Legt die Breite der Ebene fest. |
|
HEIGHT |
(Netscape-Erweiterung) Legt die Höhe der Ebene fest. |
|
CLIP |
(Netscape-Erweiterung) Legt den sichtbaren Bereich der Ebene fest. |
|
VISIBILITY |
(Netscape-Erweiterung) Legt fest, ob die Ebene sichtbar oder versteckt ist oder ihren Sichtbarkeitsstatus von der Elternebene bezieht. |
|
BGCOLOR |
(Netscape-Erweiterung) Die Hintergrundfarbe der Ebene. |
|
BACKGROUND |
(Netscape-Erweiterung) Dateinamen der Hintergrundgrafik der Ebene. |
|
onMouseOver |
(Netscape-Erweiterung) Aktion bei Eintreten des Mauszeigers in die Ebene. |
|
onMouseOut |
(Netscape-Erweiterung) Aktion bei Verlassen des Mauszeigers der Ebene. |
|
onFocus |
(Netscape-Erweiterung) Aktion bei Erhalt des Tastaturfokus. |
|
onBlur |
(Netscape-Erweiterung) Aktion bei Verlust des Tastaturfokus. |
|
onLoad |
(Netscape-Erweiterung) Aktion bei Beendigung des Ladens der Ebene. |
|
<ILAYER> |
(Netscape-Erweiterung) Definiert eine Inline-Ebene. |
|
NAME |
(Netscape-Erweiterung) Name der Ebene. |
|
ID |
(Netscape-Erweiterung) Name der Ebene (wie NAME). |
|
LEFT |
(Netscape-Erweiterung) Entfernung der linken Kante der Ebene von der linken Kante des Containers in Pixeln. |
|
TOP |
(Netscape-Erweiterung) Entfernung der oberen Kante der Ebene von der oberen Kante des Containers in Pixeln. |
|
PAGEX |
(Netscape-Erweiterung) Entfernung der linken Kante der Ebene von der linken Kante des Dokumentfensters in Pixeln. |
|
PAGEY |
(Netscape-Erweiterung) Entfernung der linken Kante der Ebene von der linken Kante des Dokumentfensters in Pixeln. |
|
SRC |
(Netscape-Erweiterung) URL der Datei, die Inhalte für die Ebene enthält. |
|
Z-INDEX |
(Netscape-Erweiterung) Legt die Position der Ebene in der Z-Reihenfolge fest. |
|
ABOVE |
(Netscape-Erweiterung) Legt die Ebene direkt über der aktuellen fest. |
|
BELOW |
(Netscape-Erweiterung) Legt die Ebene direkt unter der aktuellen fest. |
|
WIDTH |
(Netscape-Erweiterung) Legt die Breite der Ebene fest. |
|
HEIGHT |
(Netscape-Erweiterung) Legt die Höhe der Ebene fest. |
|
CLIP |
(Netscape-Erweiterung) Legt den sichtbaren Bereich der Ebene fest. |
|
VISIBILITY |
(Netscape-Erweiterung) Legt fest, ob die Ebene sichtbar oder versteckt ist oder ihren Sichtbarkeitsstatus von der Elternebene bezieht. |
|
BGCOLOR |
(Netscape-Erweiterung) Die Hintergrundfarbe der Ebene. |
|
BACKGROUND |
(Netscape-Erweiterung) Dateinamen der Hintergrundgrafik der Ebene. |
|
onMouseOver |
(Netscape-Erweiterung) Aktion bei Eintreten des Mauszeigers in die Ebene. |
|
onMouseOut |
(Netscape-Erweiterung) Aktion bei Verlassen des Mauszeigers der Ebene. |
|
onFocus |
(Netscape-Erweiterung) Aktion bei Erhalt des Tastaturfokus. |
|
onBlur |
(Netscape-Erweiterung) Aktion bei Verlust des Tastaturfokus. |
|
onLoad |
(Netscape-Erweiterung) Aktion bei Beendigung des Ladens der Ebene. |
|
<NOLAYER> |
Definiert die Inhalte, die in einem Browser ohne Ebenenunterstützung angezeigt werden sollen. |
|
Position |
(Stilvorlagen-Erweiterung) Legt fest, wie ein Objekt positioniert werden soll. |
|
Left |
(Stilvorlagen-Erweiterung) Legt die Position der linken Kante eines Objekts fest. |
|
Top |
(Stilvorlagen-Erweiterung) Legt die Position der obere Kante eines Objekts fest. |
|
Width |
(Stilvorlagen-Erweiterung) Legt die Breite eines Objekts fest. |
|
Height |
(Stilvorlagen-Erweiterung) Legt die Höhe eines Objekts fest. |
|
Clip |
(Stilvorlagen-Erweiterung) Legt den sichtbaren Bereich eines Objekts fest. |
|
Overflow |
(Stilvorlagen-Erweiterung) Legt fest, was passieren soll, wenn ein Objekt größer als der sichtbare Bereich ist. |
|
z-index |
(Stilvorlagen-Erweiterung) Legt die Position des Objekts in der Z-Reihenfolge fest. |
|
Visbility |
(Stilvorlagen-Erweiterung) Legt die Sichtbarkeit eines Objekts fest. |
Fragen und Antworten
Frage:
Einige Leute haben mir geraten, Ebenen nicht zu verwenden, da sie nur von Netscape unterstützt werden. Soll ich Ebenen vermeiden?
Antwort:
Es gibt keine klare Antwort auf diese Frage. Es ist
wahr, das nur der Netscape Communicator Ebenen unterstützt (nicht einmal der Netscape
Navigator 3.0 unterstützt diese). Allerdings ist dies allein noch kein Grund, Ebenen
nicht zu verwenden. Wenn Sie eine Seite für ein kleines Publikum erstellen, wie das z.B.
in einem Intranet der Fall ist, wo Sie sich sicher sein können, mit welchem Browser die
Leute Ihre Seite betrachten, können Ebenen ein nützliches Tool sein. Bedenken Sie auch,
daß auch Frames anfangs eine Erweiterung waren, die nur von Netscape unterstützt wurde.
Auch damals warnten viele Leute davor, Frames zu verwenden. Inzwischen sind sie Standard
und werden auf breiter Basis unterstützt.
Wenn Sie Ebenen verwenden wollen und Bedenken haben, dann sollten Sie das <NOLAYER>-Tag einsetzen.
Dadurch sollte es kaum zu Problemen kommen.
Frage:
Sind die Unterschiede zwischen den Vorstellungen zu dynamischem HTML von Netscape und Microsoft wirklich so wichtig?
Antwort:
Eine weitverbreitete Ansicht im Netz ist, daß dynamisches HTML und die Veröffentlichung von Internet Explorer 4 und Netscape Communicator die Einheitlichkeit von HTML für immer zerbrechen könnte und daß HTML danach nie wieder ein Standard wird. Das würde bedeuten, daß das ganze Konzept, Seiten unter Verwendung eines Standards zu entwickeln, die dann überall angezeigt werden können, in sich zusammenfallen würde.
Ich bin ein bißchen ein Optimist. Jedesmal, wenn die beiden Firmen in bezug auf HTML unterschiedliche Richtungen einschlugen, tendierten sie danach wieder dazu, sich anzunähern. Ich denke, das wird in diesem Fall auch passieren, selbst wenn die Differenzen diesmal ein bißchen größer sind. Die neuen Technologien in beiden Browsern sind zu bedeutend, als daß sie geschmälert werden dürften, und letzten Endes sollte sich alles durchsetzen.
Copyright ©1998 by SAMS, einem Imprint
der Markt&Technik Buch- und
Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X
