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
