Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Vortrag: Frames & Javascript
2
Frames erstellen Um Frames zu definieren, brauchen Sie eine spezielle HTML-Datei, in der ein Frameset definiert wird. Das Frameset bestimmt die Fensteraufteilung. Für eine solche Datei ist ein anderes Grundgerüst erforderlich als das sonst übliche Grundgerüst von HTML-Dateien.
3
Quellcode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>Beschreibung des Frameset-Inhalts</title> </head> <frameset ...> <!-- Frameset-Definition --> <frame ...> <!-- Frame-Fenster-Definition --> <noframes> <body> <h1>Alternativ-Inhalt</h1> <p>Wird angezeigt, wenn der Browser keine Frames darstellen kann.</p> <p>Mindest-Inhalt sollten eine Kurzbeschreibung und eine Sitemap sein.</p> </body> </noframes> </frameset> </html>
4
Frames erstellen Dateien mit Frameset-Definitionen kein body-Element besitzen. Anstelle des body-Elements, also nach dem abschließenden </head>-Tag für den Dateikopf, werden die Frames definiert. Dabei können Sie: Framesets definieren Frames zu einem Frameset definieren Noframes-Bereich definieren Mit Framesets bestimmen Sie die Aufteilung der Frame-Fenster
5
Frames verwenden zum schnellen Wechseln zwischen Informationseinheiten
zum ständigen Einblenden projektglobaler Steuerverweise zum gleichzeitigen Anzeigen von zu vergleichenden Informationen bei besonders kunstvoller Seitengestaltung
6
Links in neuem Fenster Zielfenster für Verweise bestimmen
Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Es sei denn, Sie haben in den Kopfdaten der HTML-Datei eine Zielfensterbasis angegeben und dort etwas anderes bestimmt.
7
Quellcode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>Zielfenster für Verweise bestimmen</title> </head> <body> <h1>SELFHTML aktuell</h1> <p>immer wieder neu: <a href=" target="_blank">SELFHTML aktuell</a> </p> </body> </html>
8
Links in neuem Fenster Mit dem Attribut target im einleitenden <a>-Tag können Sie ein Zielfenster für den Verweis festlegen _blank, um den Verweis in einem neuen Fenster zu öffnen, _self, um den Verweis im aktuellen Fenster zu öffnen, _parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen, _top, um bei verschachtelten Framesets alle Framesets zu sprengen.
9
Verweise zu anderen Frames:
Wenn Sie mit Frame-Sets arbeiten, werden Sie häufig in einem Frame-Fenster Verweise anbieten wollen, bei derem Anklicken das Verweisziel in einem anderen Frame-Fenster angezeigt werden soll.
10
Quellcode Teil 1 - Frame-Definitionen: <frameset cols="250,*">
<frame src="verweise.htm" name="links"> <frame src="startseite.htm" name="rechts"> <noframes> <body> <p>Alternativ-Inhalt (Zusammenfassung, Sitemap ...)</p> </body> </noframes> </frameset> Teil 2 - Verweise in verweise.htm: <a href="startseite.htm" target="rechts">Startseite</a><br> <a href="news.htm" target="rechts">News</a><br> <a href="feedback.htm" target="rechts">Feedback</a><br> <a href="impressum.htm" target="rechts">Impressum</a><br>
11
Verweise zu anderen Frames:
Voraussetzung für Verweise zu anderen Frames ist, dass die Frame-Fenster eines Framesets Namen erhalten. Im obigen Beispiel wird ein Frameset mit zwei Frame-Fenstern definiert, die mit dem Attribut name im <frame>-Tag die Namen links und rechts erhalten. Für das Setzen eines Verweises zu einem anderen Frame-Fenster gelten beim href-Attribut wie üblich die Regeln zum Referenzieren in HTML.
12
Funktionen von Javascript:
JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich Web-Seiten optimieren lassen. JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden zur Laufzeit vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser entsprechende Interpreter-Software.
13
Javascript einbinden:
Quellcode: <html> <head><title>Test</title> <script type="text/javascript"> alert("Hallo Welt!"); </script> </head> <body> </body> </html>
14
Javascript einbinden:
Mit <script type="text/javascript"> leiten Sie einen Bereich für JavaScript innerhalb einer HTML-Datei ein (script = Quelltext, type = MIME-Typ). Die Angabe zum MIME-Typ ist seit HTML 4.0 Pflicht.
15
Definitionen: MIME-Typ = MIME steht für Multipurpose Internet Mail Extensions. missbilligten Attributen = deprecated selbst definierten Funktion = Mit Hilfe von Funktionen können Sie eigene, in sich abgeschlossene JavaScript-Prozeduren programmieren HTML-Kommentar = HTML beinhaltet die Möglichkeit, an beliebigen Stellen innerhalb einer HTML-Datei Kommentare einzufügen
16
Auslesen des Browsers / der Monitor-Auflösung/ Weiterleiten
Das Skript kommt in den <head> - Bereich der Seite. Zunächst wird in der ersten Zeile des Skriptes die Größe der Bildschirmbreite ermittelt, und diese dann der Variablen screen zugewiesen. Danach wird eben diese Bildschirmweite mit einer if - else if Konstruktion verglichen. Ist die Breite z.B. 800, dann wird der Besucher über den Befehl location.href auf die Seite index800.html umgeleitet.
Ähnliche Präsentationen
