Was ist ein Frame l Frames teilen BrowserFenster

Was ist ein Frame? l Frames teilen Browser-Fenster in rechteckige Bereiche. l Mehrere Web-Seiten können l gleichzeitig angezeigt werden l unabhängig voneinander gesteuert werden l Web-Seite wird langsamer geladen 9. Frames 1

Frame-Layout entwerfen l Vorab grobes Layout der Web. Seite entwerfen: l Beispiel: l Oberhalb der Titel der Web-Seite l Linke Seite = Navigationsleiste statisch: Inhalt bleibt gleich l Rechter Bereich = zum Anzeigen der Web-Seiten 9. Frames 2

Frames definieren l Frame wird in separater Datei definiert mit Informationen zu: l Größe und Ausrichtung jedes Frames l Name der Web-Seite, die angezeigt werden soll l Befehl <frameset>Definition des Frames</frameset> 1 1 2 3 9. Frames 2 3 3

Grundgerüst zur Frame-Definition <html> <head> <title>Ein Frameset-Dokument</title> </head> <frameset> Definition des Frames </frameset> </html> l Frameset enthält kein <body> l Vor dem Frameset keine anderen HTML-Elemente wie <h 1>, <p>, <table> l Befehle des Dokumentkopfs (<title>) dürfen vor <frameset> eingefügt werden 9. Frames 4

Browser-Fenster aufteilen l Ab Grundgerüst: Browser-Fenster einteilen in Spalten und/oder Zeilen l Attribute cols="Aufteilung" und rows="Aufteilung": l Anzugeben innerhalb des Befehls <frameset> l Zur Aufteilung des Browser-Fensters in Gruppen l Werte in Prozent, Pixel oder *: Ø müssen durch Kommata voneinander getrennt werden Ø Anzahl der angegebenen Werte bestimmt Anzahl der Spalten/Zeilen 9. Frames 5

Beispiele zur Frames-Aufteilung l HTML-Code: <frameset rows="100, *"> Definition des Frames</frameset> l HTML-Code: <frameset cols="20%, *"> Definition des Frames</frameset> l HTML-Code: <frameset rows="100, *, 80"> Definition des Frames</frameset> l HTML-Code: <frameset cols="160, *"> Definition des Frames<frameset rows="10%, 90%"> Definition des Frames </frameset> 9. Frames 6

Befehl <frame> l Teilt Fenster in Bereiche auf l Attribut src="Dateiname": Dateiname = HTML-Datei l Attribut name="xyz": l Jedes Frame braucht einen Namen. l Attribut darf aus Buchstaben, Ziffern und Unterstrichen bestehen (Ausnahme: _self, _parent, _blank, _top). l Groß- und Kleinschreibung wird unterschieden. 9. Frames 7

Beispiel zur Erstellung eines Framesets l Vorab drei Dateien anlegen: flinks. html, foben. html, fhaupt. html <html> <head> <title>Anwenden von Frames</title> </head> <frameset cols="15%, *"> <frame name="FLinks" src="flinks. html" <frameset rows="90, *"> <frame name="FOben" src="foben. html"> <frame name="FHaupt" src="fhaupt. html"> </frameset </html> 9. Frames 8

Fertiges Frameset im Browser 9. Frames 9

Angaben in Pixel l * = Fülle die Fläche mit dem noch verfügbaren Platz. l Es ist vorteilhaft, * in Pixelangaben zu nutzen, ansonsten bleibt das Frame bei Größenänderung gleich groß. l Teilen einer Fläche: Das obere Frame ist doppelt so groß wie unterer: <frameset rows="2*, *">. l Überprüfen Sie, ob alle Informationen zu sehen sind. 9. Frames 10

Angaben in Prozent l Prozentwerte zwischen 1 und 100 l Alle Frames innerhalb eines Framesets = 100% l Beispiel: <frameset rows="25%, 45%, 30%"> l Falls Werte größer 100: Bereiche werden automatisch herunterskaliert. l Gesamtsumme unter 100: l Bereiche werden automatisch heraufskaliert. l Falls relative Größe (*) vorhanden ist, wird Überschuss dem * zugeteilt. 9. Frames 11

Browser ohne Frames l Einige Browser kennen Frames-Befehle nicht. l Informationen für nicht framefähige Browser sind über den Befehl <noframes> zu erhalten. l Befehl <noframes>: l Enthält den Dokumentenkörper <body> l Muss vor dem letzten Frameset eingegeben werden l Wird von framefähigen Browsern ignoriert 9. Frames 12

Einflussnahme auf die Bildlaufleisten l Festlegen, ob Bildlaufleisten sichtbar sind: l Attribut scrolling=yes (immer sichtbar) l Attribut scrolling=no (nie sichtbar) l Attribut scrolling=auto (Browser-abhängig) l Attribut scrolling=no nur bei sehr kleinen Frame- Inhalten (z. B. Logo oder Überschrift) l Beispiel: <frameset rows="60, *"> <frame name="FTitel" src="ftitel. html" scrolling=no> <frame name="FHaupt" src="fhaupt. html" scrolling=auto> </frameset> 9. Frames 13

Beispiel für Festlegung der Bildlaufleiste l Bildlaufleiste immer sichtbar l Nur Überschrift: Bildlaufleiste nie sichtbar l Viel Information im Haupt-Frame: Bildlaufleiste automatisch 9. Frames 14

Frame-Größe festsetzen l Das Attribut noresize unterbindet Größenänderung durch den Anwender. l Das Attribut wird in die Frame-Definition <frame> eingefügt. l Keine Wertangabe l Beispiel: <frame name="Ftitel" src="ftitel. html" noresize> l Auch benachbarte Frames können nicht mehr verändert werden. 9. Frames 15

Umrandung anlegen l Attribut frameborder="Wert": dreidimensionale Umrandung um Frame l frameborder=0 (Umrandung ausgeschaltet) l frameborder=1 (Umrandung eingeschaltet - Standard) l Attribut einfügen innerhalb des Framesets l Beispiel: <!- - Umrandung einschalten - -> <frameset cols="15%, *" frameborder="1"> <!- - Umrandung abschalten - -> <frameset cols="15%, *" frameborder="0"> 9. Frames 16

Frame-Abstand bestimmen l Mit Attribut framespacing="Pixel" werden Frames nicht direkt aneinander dargestellt. l Das Attribut wird innerhalb des Framesets eingefügt. l Beispiel: <!- - Abstand von 5 Pixel - -> <frameset rows="100, *" framespacing="5"> <!- - kein Abstand zwischen den einzelnen Frames - -> <frameset rows ="100, *" framespacing ="0"> 9. Frames 17

Umrandungsbreite festlegen l Mit Attribut border="Pixel" wird Breite der Umrandung festgelegt. l Das Attribut wird innerhalb des Framesets eingefügt. l Wert ab einem Pixel: zweidimensionale Darstellung l Der Wert 0 schaltet Umrandung ab. l Beispiel: <!- - Umrandungsbreite = 10 Pixel - -> <frameset cols="15%, *" border="10"> <!- - Umrandung abschalten - -> <frameset rows ="15%, *" border ="0"> 9. Frames 18

Umrandungsfarbe bestimmen l Mit Attribut bordercolor="Farbe" wird Farbe der Umrandung festgelegt. l Das Attribut wird innerhalb des Framesets eingefügt. l Vordefinierte oder hexadezimale Farbangabe l Frame-Umrandung muss eingeschaltet sein. l Beispiel: <!- - grüne Umrandung - -> <frameset cols="15%, *" border="10" bordercolor="green"> <!- - braune Umrandung - -> <frameset rows ="15%, *" border ="3" bordercolor="#996633"> 9. Frames 19

Abstand des Inhalts im Frame l Attribute marginheight="Pixel" (Randhöhe) marginwidth="Pixel" (Randbreite) l Attribut einfügen innerhalb des Tags <frame> l Beispiele: l Frame mit Zwischenraum l Frame ohne Rand 9. Frames 20

Tipps zum Frame eines Logos l Höhe des Frames auf Höhe des Logos l Bildlaufleiste abschalten l Frame-Größe festsetzen l Ränder des Frames auf 0 Pixel 9. Frames 21

Namen eines Frames angeben <frameset cols="10%, *"> <frame name="links"src="flinks. html"> <frameset rows="90, *"> <frame name="oben" src="foben. html"> <frame name="haupt" src="fhaupt. html"> </frameset> 9. Frames 22

Hyperlinks setzen l Attribut target="Name" l Gibt Verweisziel an, in dem der Hyperlink geöffnet werden soll l Attribut angeben innerhalb <a href=. . . >. . . </a> l Beispiel: <a href="abc. html" target="xyz"<Das Alphabet</a> l Befehl <base target="Name"> l Anzugeben innerhalb des Kopfabschnitts <head></head> l Alle Links innerhalb der Web-Seite werden in Frames mit entsprechenden Namen angezeigt l Beispiel: <head><base target="xyz">. . . </head> . . . <a href="abc. html">Das Alphabet</a>. . . 9. Frames 23

Frames beenden l Dokument wird in neuem leeren Fenster geöffnet: l target="_blank l Dokument wird in dem Frame geöffnet, in dem der Verweis steht: l target="_self l Verweis wird in das übergeordnete Fenster geladen: l target="_parent l Gesamtes Frameset wird geschlossen, Dokument wird in gesamten Browser-Fenster angezeigt: l target="_top 9. Frames 24

Erstes Beispiel aus dem Internet 9. Frames 25

Zweites Beispiel aus dem Internet 9. Frames 26

Drittes Beispiel aus dem Internet 9. Frames 27