|
|
Alle Support-Themen im Überblick
|
| Frames | |
|
Bauen Sie sich ZUERST die HTML-Dateien, die in das Gerüst eingehängt werden, erstellen Sie sich DANN das Frameset und laden die HTML-Dateien in dieses Frameset. Um Frames zu erstellen oder zu bearbeiten, rufen Sie sich über die Framespalette auf dem Monitor. Aufgabe A Bauen Sie die Datei "frameset.html" nach (ein einfaches Frameset).
1. Als erstes legen Sie zwei (zunächst leere) Dateien an: "navigation.html" und "inhalt_start.html". Sichern Sie die Dateien in einen eigenen Ordner. 2. Legen Sie nun eine neue Datei mit dem Namen "frameset.html" an. Sie ist das "Gerüst" für die eben erstellten zwei HTML-Dateien. Um die eigentlichen "Frames" (Rahmen) anzulegen, gehen Sie über das Menü und wählen dann "oben" aus. Ihre Seite hat sich jetzt geteilt. Der obere Teil wird die Navigation beinhalten, der untere enthält den eigentlichen Inhalt. Öffnen Sie die Framespalette über Menü .
In der Framespalette können Sie jeweils den Bereich aktivieren, den Sie bearbeiten wollen. Um das ganze Frameset auszuwählen, klicken Sie in der Framespalette auf den äußeren Rahmen (in der oberen Abbildung schwarz dargestellt). Die Eigenschaftenpalette sieht dann folgendermaßen aus:
Sie können verschiedene Angaben zum Frameset festlegen. Geben Sie folgendes ein: Rahmen "nein", Rahmenbreite "0", Angabe zur Höhe der Zeile: Wert = '120" und Einheiten "Pixel". Dieser Wert bestimmt die Höhe des oberen Frames, wenn dieser in der Zeilenauswahl (ganz rechts in der Eigenschaftenpalette) aktiviert ist. Die beiden Frames müssen noch benannt werden, außerdem sollen die vorhin erstellten Dateien "navigation.html" und "inhalt_start.html" in das Frameset gehängt werden. Dies geschieht wieder über die Eigenschaftenpalette. Um einen bestimmten Frame auszuwählen, klicken Sie in der Framespalette in den zu ändernden Bereich (topFrame oder mainFrame). Sie sehen, dass sich die Eigenschaftenpalette hierbei ändert.
Benennen Sie in der Eigenschaftenpalette die Frames mit "navigation"
und "inhalt" (im Feld unter "Frame-Name"). Weisen
Sie dann dem Frameset die richtigen Dateien zu: Quelle ist "navigation.html"
(für den navigations-frame) und "inhalt_start.html" (für
den Frame "Inhalt"). Das obere Frame soll weder Scrollbalken
noch die Möglichkeit einer Größenänderung durch den
Anwender bekommen: Rollen = "nein", "Keine Größenänderung"
muß aktiviert sein. Der Rahmen soll nicht sichtbar sein: Rahmen
also "Nein". Rahmenfarbe und Angabe von Höhe/Breite des
Rahmens bleiben leer. Sie können zum Testen verschiedene Einstellungen ausprobieren, z.B. sichtbare, eingefärbte Rahmen. 3. Füllen Sie die Seiten nun mit Inhalten. Dazu sollten Sie das Frameset schließen und zunächst die Seite "navigation.html" öffnen. Legen Sie die im Menü Hintergrundfarbe "cc9966", Hyperlinks "000000" und besuchte Hyperlinks "990000" an. Fügen Sie eine Tabelle ein: 2 Zeilen, 1 Spalte, Zellauffüllung 5, Breite 90%. Öffnen Sie die Datei "rohtext.html" aus dem Materialordner oder von Ihrer Schulungs-CD und kopieren sich den Text für die Navigation in die untere Zeile der Tabelle. Der Text soll noch einen Abstand zur oberen Kante bekommen. Geben Sie der oberen Tabellenzeile eine Höhe von 70 Pixel. Bedenken Sie, dass später, wenn die Seite im Frameset angezeigt wird, nur die oberen 120 Pixel zu sehen sind. Schließen Sie die Datei und öffnen "frameset.html" um zu sehen, ob alles an der richtigen Stelle steht. Es folgt die Seite "inhalt_start.html": Legen Sie eine Tabelle an mit 2 Zeilen, 1 Spalte, Zellauffüllung 5, Breite 90%. Öffnen Sie sich die Datei "rohtexte.html" in Dreamweaver und kopieren den Text für die Startseite heraus. Setzen Sie den kopierten Text in die untere Zeile der Tabelle ein. Laden Sie das GIF "einguterrat.gif" in die gleiche Zelle, stellen in der Eigenschaftenpalette die Ausrichtung auf "rechts" und geben ihm einen horizontalen Abstand zum Text von 60 Pixel. Die obere Tabellenzeile erhält eine Höhe von 30 Pixel. Überprüfen Sie das Frameset im Browser. Je nach Einstellung Ihrer Bildschirmauslösung und Schriftgröße im Browser ist jetzt ein vertikaler Scrollbalken zu sehen oder nicht. Falls nicht, erhöhen Sie stufenweise die Schriftgröße im Browser oder skalieren Sie das Browserfenster, bis der Scrollbalken erscheint. Wie Sie sehen, verschwindet der Inhaltstext beim Scrollen nach unten unter dem Navigationsframe, die Navigation aber bleibt stehen. 4. Erstellen Sie nun noch folgende Seiten neu: "hausmittel.html",
"schoenheitspflege.html" und "teezubereitung.html".
Füllen Sie die Seiten mit dem jeweiligen Text aus der Rohtextdatei
Auch diese Texte sollen in einer Tabelle (gleiche Formatierung wie Tabelle
der Inhaltsseite) liegen. 5. Verlinkung der Seiten: Öffnen Sie das komplette Frameset. Markieren Sie in der Navigation "Hausmittel" und setzen einen Link zur Seite "hausmittel.html". Es muß nun angegeben werden, in welchen Frame die Seite geladen werden soll. Rechts neben dem Eingabefeld "Hyperlink" sehen Sie das Eingabefeld "Ziel", hier wählen Sie "inhalt" aus. Verfahrenen Sie genauso mit den anderen Links (Startseite ist "inhalt_start.html"). Nach dem Verlinken der Seiten dürfen Sie die Namen der Frames ("inhalt" und "navigation") nicht mehr ändern. Testen Sie das Frameset im Browser. Öffnen sich die Links im richtigen Frame? Aufgabe B Erweitern Sie die Datei "frameset.html" (bauen Sie ein komplexes Frameset).
1. Sie haben eben ein einfaches Frameset erstellt. Nun lernen Sie, wie Sie ein verschachteltes Frameset bauen können. Stellen Sie sich vor, das eben erstellte Frameset soll noch eine Unter-Navigation im Inhaltsteil bekommen. So soll es aussehen:
Kopieren Sie sich die Dateien "navigation.html", "inhalt_start.html", "hausmittel.html", "schoenheitspflege.html" und "teezubereitung.html" in einen neuen Ordner. 2. Erstellen Sie eine neue Datei "navigation_inhalt.html" mit der Hintergrundfarbe "990000", Text = "ffffff", Hyperlinks = "ffffff", besuchte Hyperlinks = "CC9966". Das neue Frameset für den Inhalt soll "frameset_inhalt.html" heißen. Legen Sie diese Datei neu an und gehen über das Menü zu . Benennen Sie das linke neue Frame in der Eigenschaftenpalette mit "navigationinhalt". Quelle ist "navigation_inhalt.html", Rollen = nein, keine Größenänderung, kein Rahmen, Breite des Frames ist 160px, Rahmen = nein. Wenn Sie in der Framespalette das Frameset aktivieren und dann den Quelltext aufrufen, sehen Sie, dass das Framest aus zwei columns (Spalten) besteht z.B.: Die erste Angabe (160px) steht für die Breite des linken Frames. Die Angabe nach dem Komma legt die Breite des rechten Frames fest. Hier tragen Sie bitte ein Sternchen (*) ein. Dies bedeutet, dass es sich nicht um eine feste Größe handelt, sondern sich variabel dem Browserfenster anpasst:
Das rechte Frame benennen Sie mit "inhalt", Quelle ist "inhalt_start.html", Rollen = auto, keine Größenänderung, kein Rahmen. Somit ist das innere Frameset fertig erstellt. 3. Um das Frameset komplett zu machen, erstellen Sie noch eine neue Datei "frameset.html", teilen es in 2 Frames: das obere = "navigation.html", 120px hoch, das untere bekommt das eben erstellte Frameset "frameset_inhalt" zugewiesen. Bitte auch hier keine Rahmen etc. Der Frame, in das neue Frameset verschachtelt wird, bekommt in der Eigenschaftenpalette
den Namen "frameset_inhalt" : Aktivieren Sie in der Framespalette jetzt das ganze Frameset und bearbeiten den Quelltext folgendermaßen:
4. Das Frameset ist fertig. Damit später die Navigation funktioniert, d.h. alle Seiten in die richtigen Frames geladen werden, müssen Sie jetzt noch die Struktur der Ordner und Dateien anlegen: Legen Sie 3 neue Ordner an: "hausmittel, schoenheitspflege und teezubereitung". Ziehen Sie die drei dazu passenden Inhalts-Dateien in den jeweiligen Ordner. Außerdem erhält jeder Ordner die Dateien "frameset_inhalt.html", "navigation_inhalt.html" und "inhalt_start.html" (bitte Dateien duplizieren und in die Ordner legen). Die Dateien "frameset.html" und "navigation.html" müssen Sie nicht kopieren. Sie bleiben für alle Seiten (Themen) die Gleichen, während sich die Datei "navigation_inhalt.html" und die Inhaltsseite je nach Thema ändern. 5. In die drei Dateien "inhalt_start.html" schreiben Sie einen kurzen Text, z.B.: "Hausmittel. Wählen Sie bitte ein Thema aus". Dieser Text erscheint als erstes, wenn der Besucher in der Hauptnavigation auf "Hausmittel" klickt. 6. In die Datei "frame_inhalt.html" sollen nun jeweils die Themen der Seiten untergebracht werden. Für "Hausmittel" die Themen: Abszess, Appetitlosigkeit, Atemnot, das heißt, jedes Thema bekommt auch eine eigene Seite, die im "inhaltsframe" angezeigt wird. Wir übernehmen jeweils nur die ersten 3 Themen, damit es nicht zuviel wird. Ändern Sie zuerst die Verlinkung in der Hauptnavigation "navigation.html", damit die Dateien in den neuen Ordnern gefunden werden. In der Eigenschaftenpalette muß Ziel = "framesetinhalt" sein, damit die Seiten in den richtigen Frame geladen werden. Sie können stattdessen testweise z.B. einmal "navigationsinhalt" eingeben, um zu sehen, was im Browser passiert. 7. Bearbeiten Sie nun die Unternavigation für das Thema "Hausmittel". Fügen Sie untereinander die Themen "Abszess", "Appetitlosigkeit" und "Atemnot" ein, Hyperlinkfarbe = "ffffff", besuchte Hyperlinks = "cc9966". Erstellen Sie für die 3 Themen die dazugehörigen HTML-Seiten, indem Sie sich aus der Datei "hausmittel.html" den jeweiligen Text herauskopieren und einsetzen. Verlinken Sie die Navigation mit den 3 Seiten. Da Sie die Seite allein (ohne Frameset) geöffnet haben, erscheinen unter "Ziel" keine Vorgaben (die Seite für sich allein weiß nicht, dass sie sich in einem Frameset befindet). Geben Sie hier "Ziel = Inhalt" ein. 8. Verfahren Sie mit den anderen beiden Themen genauso. Nehmen Sie jeweils die ersten 3 Unterthemen für die Navigation. Testen Sie Ihre Framesets in verschiedenen Browsern unter Mac, Unix und Windows.
In jedes Frameset gehört ein ausgefüllter NOFRAMES-Bereich. Wählen Sie bearbeiten. Dieser Inhalt wird in Browsern angezeigt, die Frames nicht anzeigen können. Frames lassen sich löschen, indem Sie im Dokumentenfenster die Trennlinien zwischen den Frames bei gedrückter Maustaste aus dem Fenster herausziehen. Sie können auch mit der Objektepalette Frames erstellen. Sollen in einem Link auf ein Frameset andere als die in dem Set vorgesehenen Standardseiten angezeigt werden, lässt sich sich dieses mit Hilfe des JavaScripts "Gehe zu URL" erreichen, alternativ baut man extra für diesen Link ein eigenes Frameset. Achtung Netscape Bug (Programmfehler): Bei einem passgenauem Layout (wenn z.B. zwei Elemente in zwei Frames ohne Zwischenraum direkt aneinanderstoßen müssen), sollten Sie die Framegrößen nur in 10er Schritten wählen. Auch in Dreamweaver gibt es einen Frameset-Bug: In einem Dreamweaver Frameset findet sich unter bestimmten Umständen für ein Frameset, welches aus einem festen und einem variablen Frame besteht, die Angabe "150,1*". Die 1 vor dem Sternchen muss in diesem Fall gelöscht werden. Unter Windows wird zusammen mit Dreamweaver 4 das Programm "Homesite" ausgeliefert. Homesite hat einen komfortablen "Framewizard" der von einigen Webdesignern sehr geschätzt wird.
Nennen Sie die Vor- bzw Nachteile von Frames. Literaturhinweise und Links Dr. Web über Frames: http://www.drweb.de/frames/index.shtml |
|
Letzte Aktualisierung dieser Datei am: 24.6.2008 Haben Sie Anregungen, Kritik oder Ideen zu dieser Seite? Sie können hier einen Kommentar schreiben. Bislang wurden zu dieser Seite keine Kommentare geschrieben |
Technik
Schritt
für Schritt
Tipps
Kontrollfragen
und Übungsaufgaben