PC Welt 1996 Counselor

home *** CD-ROM | disk | FTP | other *** search

/ PC Welt 1996 Counselor / COMPUSERVE.ISO / tutorial / selfhtml / effekte.gif < prev next >

Wrap

Text File | 1996-04-28 | 12.0 KB | 255 lines

<html> <head> <title>Marquee-Effekte und Dia-Shows</title> </head> <body bgcolor=#FFFFFF text=#000000 link=#009999 vlink=#006680 alink=#990099> <body bgcolor=#FFFFFF text=#000000 link=#009999 vlink=#006680 alink=#990099> <a name="top"><img src="web.gif" align=left></a> <img src="goback.gif"> <a href="selfhtml.htm#toc">Inhaltsverzeichnis</a> <hr noshade size=4> <h1>Marquee-Effekte und Dia-Shows</h1> <img src="goto.gif"> <A HREF="#a1">Marquee-Effekte</a> <img src="goto.gif"> <A HREF="#a2">Dia-Shows</a> <img src="goto.gif"> <A HREF="bspmarq.htm">Anzeigebeispiele: Marquee-Effekte</a> <img src="goto.gif"> <A HREF="n2dshow.htm">Anzeigebeispiele: Dia-Shows</a> (nur mit Netscape 2.x möglich, da Frames verwendet werden!) <hr noshade> <a name="a1"><h2><img src="msie.gif" alt="MS Internet Explorer ab V2.0"> Marquee-Effekte</h2></a> Sie können erreichen, daß ein Text mitten im übrigen Text automatisch horizontal scrollt, so wie in dem von Windows bekannten Bildschirmschoner "Marquee". Diese Angaben werden bislang jedoch nur vom MS Internet Explorer ab Version 2.0 interpretiert. Beispiel <PRE> <marquee>Dieser Text wird horizontal wie am Laufband gescrollt</marquee> </PRE> Mit <marquee> leiten Sie den zu scrollenden Text ein. Dahinter folgt der Text, der gescrollt werden soll. Am Ende des zu scrollenden Textes notieren Sie ein abschließendes </marquee>. <a name="a11"><h3>Scroll-Richtung bestimmen</h3></a> Per Voreinstellung werden Marquee-Texte vom Internet Explorer von rechts nach links gescrollt. Sie können die Scroll-Richtung umkehren. Beispiel <PRE> <marquee direction=right>Dieser Text wird von links nach rechts gescrollt</marquee> </PRE> Durch die Zusatzangabe direction=right im einleitenden Tag von <marquee ... > erzwingen Sie die Scrollrichtung von links nach rechts. Mit der Zusatzangabe direction=left stellen Sie die Scroll-Richtung auf rechts nach links (Voreinstellung). <a name="a12"><h3>Scroll-Geschwindigkeit einstellen</h3></a> Der Internet Explorer verwendet intern eine bestimmte Scroll-Geschwindigkeit. Sie können eine eigene Geschwindigkeit bestimmen. Die Geschwindigkeit können Sie durch zwei Parameter beeinflussen: 1. durch die Anzahl der Pixel zwischen einem "Scroll-Zustand" und dem nächsten, und 2. durch die Angabe der Verzögerung zwischen zwei Scroll-Zuständen. Beispiel <PRE> <marquee scrollamount=50 scrolldelay=5>Dieser Text wird ziemlich schnell gescrollt</marquee> </PRE> Durch die Zusatzangabe scrollamount= im einleitenden Tag von <marquee ... > bestimmen Sie die Pixelanzahl zwischen den Scroll-Zuständen, und durch die Zusatzangabe scrolldelay= legen Sie die Verzögerung zwischen zwei Scroll-Zuständen in Millisekunden fest. <a name="a13"><h3>Hin- und herwechselnder Marquee-Text</h3></a> Sie können bestimmen, daß der sich der Marquee-Text abwechselnd von rechts nach links und von links nach rechts bewegt. Dabei wird die Laufrichtung des Textes umgekehrt, sobald der Text einen der beiden Fenster- bzw. Seitenränder berührt. Beispiel <PRE> <marquee behavior=alternate>Dieser Text wird hin- und herbewegt</marquee> </PRE> Durch die Zusatzangabe behavior=alternate im einleitenden Tag von <marquee ... > erzwingen Sie den Wechsel-Effekt. <a name="a14"><h3>Marquee-Text zusätzlich hervorheben</h3></a> Sie können den als Marquee-Effekt definierten Textabschnitt zusätzlich hervorheben, indem Sie eine eigene Hintergrundfarbe für diesen Textabschnitt definieren. Der Scroll-Effekt findet dann optisch gesehen in einem andersfarbigen Kasten statt. Beispiel <PRE> <marquee bgcolor=#C00000>Dieser Scroll-Text erscheint auf knallrotem Hintergrund</marquee> </PRE> Durch die Zusatzangabe bgcolor= im einleitenden Tag von <marquee ... > erzwingen Sie, daß der gescrollte Text in einem andersfarbigen Rahmen erscheint. Für das Definieren der Farbe gelten die gleichen Regeln wie beim Definieren von dateiglobalen <img src="goto.gif"> <a href="farbform.htm#a2">Hinter- und Vordergrundfarben</a>. Wenn Sie eine besondere Hintergrundfarbe für den Marquee-Bereich definieren, müssen Sie darauf achten, daß die Vordergrundfarbe des Marquee-Textes dazu kontrastiert. Nur dann ist der Marquee-Text gut lesbar. Sie müssen also evtl. eine kontrastierende Vordergrundfarbe bestimmen. Beispiel <PRE> <marquee bgcolor=#C00000>Scroll-Text</marquee> </PRE> In diesem Beispiel wird mit Hilfe der Anweisung für <img src="goto.gif"> <a href="text.htm#a5">Schriftfarben</a> (font color...) eine weiße Textfarbe (#FFFFFF) definiert, die zu dem knallroten Hintergrund (#C00000) kontrastiert. Um den Kontrast zu verstärken, wird der Text zusätzlich mit ... gefettet. <a name="a15"><h3>Umgebenden Text ausrichten</h3></a> Sie können bestimmen, daß Text, der im gleichen Absatz wie der Marquee- Text steht, im Verhältnis zu dem Marquee-Text ausgerichtet wird. Beispiele <PRE> <marquee algin=top>Marquee-Text</marquee> und oben daran ausgerichteter Text <marquee algin=middle>Marquee-Text</marquee> und mittig daran ausgerichteter Text <marquee algin=bottom>Marquee-Text</marquee> und unten daran ausgerichteter Text </PRE> Durch die Zusatzangabe align=top im einleitenden Tag von <marquee ... > erreichen Sie, daß der umgebende Text obenbündig zu dem Marquee-Text ausgerichtet wird. Mit align=middle wird der umgebende Text mittig ausgerichtet, mit align=top untenbündig. Ferner können Sie die Höhe des Marquee-Bereichs sowie die Abstände zwischen dem Marquee-Text und dem Text davor bzw. dahinter festlegen. Beispiele <PRE> <marquee height=20 hspace=10>Marquee-Text</marquee> </PRE> Durch die Zusatzangabe height= im einleitenden Tag von <marquee ... > bestimmen Sie die Höhe des Marquee-Bereichs. Diese Angabe ist vor allem interessant, wenn Sie für den Marquee-Bereich eine eigene Hintergrundfarbe bestimmen. Mit der Höhe des Marquee-Bereichs legen Sie dann die Höhe des andersfarbigen Kastens fest, in dem der Marquee-Text gescrollt wird. Die Angabe erfolgt entweder absolut in Pixeln (wie im Beispiel), oder in Prozent relativ zur Höhe des Anzeigefensters. Um einen Prozentwert anzugeben, hängen Sie hinter die Wertangabe einfach ein Prozentzeichen % (z.B. height=10%). Mit hspace= bestimmen Sie den Abstand zwischen Marquee-Text und dem "normalen" Text, der unmittelbar davor bzw. dahinter folgt. Diese Angabe ist nur von Bedeutung, wenn Sie den Marquee-Bereich mitten im Text definieren. Wenn Sie den Marquee-Bereich in einem eigenen Absatz definieren, ist diese Angabe bedeutungslos. Die Angabe des Abstands zum Text davor bzw. dahinter erfolgt in Pixeln. Der angegebene Abstand gilt sowohl für den Text davor als auch für den Text dahinter. <hr noshade> <img src="goback.gif"> <a href="#top">Seitenanfang</a> <hr noshade> <a name="a2"><h2><img src="netscap2.gif" alt="Netscape ab V2.0"><img src="msie.gif" alt="MS Internet Explorer ab V2.0"> Dia-Shows</h2></a> Mit Hilfe eines Tricks im Kopf einer HMTL-Datei können Sie mehrere Text- oder Grafikinhalte automatisch nacheinander anzeigen lassen (Dia-Show-Effekt). Dieser Trick ist vor allem in Verbindung mit <img src="goto.gif"> <a href="frames.htm">Frames</a> (separaten Fensterbereichen) praktisch. So können Sie z.B. in einem Frame Information anbieten, während in einem anderen Frame automatisch Bilder in abwechselnder Folge angezeigt werden. Sie brauchen für jedes "Dia" eine eigene HTML-Datei. Mit Hilfe einer Anweisung im Dateikopf wird nach einer bestimmten Zeit automatisch die nächste Datei aufgerufen. Das folgende Beispiel arbeitet mit vier Dateien. Beispiel 1. Datei (DAT1.HTM) <PRE> <html> <head> <title>1. Datei der Dia-Show</title> <meta http-equiv="Refresh" content="8; url=dat2.htm"> </head> <body> Überschriften, Text, Verweise, Grafikreferenzen usw. </body> </html> </PRE> Beispiel 2. Datei (DAT2.HTM) <PRE> <html> <head> <title>2. Datei der Dia-Show</title> <meta http-equiv="Refresh" content="4; url=dat3.htm"> </head> <body> Überschriften, Text, Verweise, Grafikreferenzen usw. </body> </html> </PRE> Beispiel 3. Datei (DAT1.HTM) <PRE> <html> <head> <title>3. Datei der Dia-Show</title> <meta http-equiv="Refresh" content="6; url=dat4.htm"> </head> <body> Überschriften, Text, Verweise, Grafikreferenzen usw. </body> </html> </PRE> Beispiel 4. Datei (DAT4.HTM) <PRE> <html> <head> <title>1. Datei der Dia-Show</title> <meta http-equiv="Refresh" content="7; url=dat1.htm"> </head> <body> Überschriften, Text, Verweise, Grafikreferenzen usw. </body> </html> </PRE> Mit dem HTML-Tag <meta http-equiv="Refresh" ... > und der in den Beispielen verwendeten Syntax können Sie erzwingen, daß nach einer anzugebenden Zeit automatisch die nächste, ebenfalls anzugebende Datei aufgerufen wird. Mit der Zusatzangabe content="6; bestimmen Sie die Anzeigedauer der Datei in Sekunden. Die 6 im Beispiel bedeutet also, daß die Datei 6 Sekunden lang angezeigt wird. Danach wird die nächste Datei aufgerufen, die mit url=..." spezifiziert wird. Notieren Sie den gesamten Befehl inclusive der etwas ungewohnten Stellung der Anführungszeichen so wie in den Beispielen oben angegeben. Setzen Sie jeweils Ihre gewünschte Anzeigedauer und den Namen der nächsten aufzurufenden Datei ein. Im obigen Beispiel enthält die letzte der vier Dateien wieder einen Aufruf der ersten Datei. So erzeugen Sie eine "Endlosschleife", d.h. die Dia- Show läuft solange ab, bis der Anwender mit Hilfe der Navigationsmittel seines Browsers (oder bei Frames: in einem anderen Anzeigefenster einen Verweis anklickt und dadurch) eine andere Datei aufruft. Hinweis: Der Dia-Show-Effekt funktioniert nur, solange der Anwender die Maus bewegt oder scrollt. <hr noshade> <img src="goback.gif"> <a href="selfhtml.htm#toc">Inhaltsverzeichnis</a> <img src="goback.gif"> <a href="#top">Seitenanfang</a> </body> </html>