9. Frames1 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.

Präsentation zum Thema: "9. Frames1 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."—  Präsentation transkript:

1 9. Frames1 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

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

3 9. Frames3 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 Befehl Definition des Frames Befehl Definition des Frames 123123 1 23

4 9. Frames4 Grundgerüst zur Frame-Definition Frameset enthält kein Frameset enthält kein Vor dem Frameset keine anderen HTML-Elemente wie,, Vor dem Frameset keine anderen HTML-Elemente wie,, Befehle des Dokumentkopfs ( ) dürfen vor eingefügt werden Befehle des Dokumentkopfs ( ) dürfen vor eingefügt werden Ein Frameset-Dokument Definition des Frames

5 9. Frames5 Browser-Fenster aufteilen l Ab Grundgerüst: Browser-Fenster einteilen in Spalten und/oder Zeilen Attribute cols="Aufteilung" und rows="Aufteilung" : Attribute cols="Aufteilung" und rows="Aufteilung" : Anzugeben innerhalb des Befehls 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

6 9. Frames6 Beispiele zur Frames-Aufteilung HTML-Code: Definition des Frames HTML-Code: Definition des Frames HTML-Code: Definition des Frames Definition des Frames HTML-Code: Definition des Frames Definition des Frames

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

8 9. Frames8 Beispiel zur Erstellung eines Framesets Anwenden von Frames l Vorab drei Dateien anlegen: flinks.html, foben.html, fhaupt.html

9 9. Frames9 Fertiges Frameset im Browser

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

11 9. Frames11 Angaben in Prozent l Prozentwerte zwischen 1 und 100 l Alle Frames innerhalb eines Framesets = 100% Beispiel: Beispiel: 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.

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

13 9. Frames13 Einflussnahme auf die Bildlaufleisten l Festlegen, ob Bildlaufleisten sichtbar sind: Attribut scrolling=yes (immer sichtbar) Attribut scrolling=no (nie sichtbar) Attribut scrolling=auto (Browser-abhängig) Attribut scrolling=no nur bei sehr kleinen Frame- Inhalten (z.B. Logo oder Überschrift) Attribut scrolling=no nur bei sehr kleinen Frame- Inhalten (z.B. Logo oder Überschrift) Beispiel: Beispiel:

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

15 9. Frames15 Frame-Größe festsetzen Das Attribut noresize unterbindet Größenänderung durch den Anwender. Das Attribut noresize unterbindet Größenänderung durch den Anwender. Das Attribut wird in die Frame-Definition eingefügt. Das Attribut wird in die Frame-Definition eingefügt. l Keine Wertangabe Beispiel: Beispiel: l Auch benachbarte Frames können nicht mehr verändert werden.

16 9. Frames16 Umrandung anlegen Attribut frameborder="Wert" : dreidimensionale Umrandung um Frame Attribut frameborder="Wert" : dreidimensionale Umrandung um Frame frameborder=0 (Umrandung ausgeschaltet) frameborder=1 (Umrandung eingeschaltet - Standard) l Attribut einfügen innerhalb des Framesets Beispiel: Beispiel:

17 9. Frames17 Frame-Abstand bestimmen Mit Attribut framespacing="Pixel" werden Frames nicht direkt aneinander dargestellt. Mit Attribut framespacing="Pixel" werden Frames nicht direkt aneinander dargestellt. l Das Attribut wird innerhalb des Framesets eingefügt. Beispiel: Beispiel:

18 9. Frames18 Umrandungsbreite festlegen Mit Attribut border="Pixel" wird Breite der Umrandung festgelegt. 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. Beispiel: Beispiel:

19 9. Frames19 Umrandungsfarbe bestimmen Mit Attribut bordercolor="Farbe" wird Farbe der Umrandung festgelegt. 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. Beispiel: Beispiel:

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

21 9. Frames21 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

22 9. Frames22 Namen eines Frames angeben

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

24 9. Frames24 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

25 9. Frames25 Erstes Beispiel aus dem Internet

26 9. Frames26 Zweites Beispiel aus dem Internet

27 9. Frames27 Drittes Beispiel aus dem Internet