Frames oder Rahmen im Browserfenster

Größe: px

Ab Seite anzeigen:

Download "Frames oder Rahmen im Browserfenster"

Helga Voss
vor 8 Jahren
Abrufe

1 In dieser Ausbildungseinheit zeigen wir Ihnen, wie Frames oder auch Rahmen im Browserfenster erstellt werden. Dabei möchten wir anmerken, dass zu Frames bereits sehr viel Gegensätzliches geschrieben wurde. Heute sind sich die meisten Internetbenutzer einig. Frames sind nicht schwieriger zu verstehen als andere Techniken auch. Man muss den Umgang mit Frames ganz einfach gut beherrschen, wie jede andere Technik auch. Diese Ausbildungseinheit ist als pädagogische Hilfe gedacht und will Sie mit dem Erstellen von Frames vertraut machen. Voraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um diese Ausbildungseinheit ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen wir Ihnen, sich zunächst die Ausbildungseinheit Eine Mini-Website an einem Nachmittag durchzulesen. Einführung Frames sind Rahmen, mit denen ein Browserfenster geteilt werden kann. Man kann sie sehr einfach erstellen. Allerdings kann es auch sehr schnell zu einem Durcheinander kommen, wenn man sie nicht strikt organisiert. Wenn man vom Teilen eines Fensters spricht, dann bedeutet dies, dass man in einem bestimmten Teil der Website dauerhaft eine Inhaltsübersicht oder ein Menü angezeigt haben möchte (z. B. im oberen Teil des Bildschirms). Weiter sollen beispielsweise in der Mitte einzelne Seiten der Website angezeigt werden und schließlich im unteren Teil schreiben Sie uns. Jeder der Teile heißt Frame oder Rahmen im Browserfenster und ruft eine eigene HTML-Seite auf. Sie finden im Folgenden eine Abbildung mit der Struktur einer Internetseite, die in drei Frames geteilt ist: Frame mit dem Menü der Website Frame, der eine Internetseite anzeigt Frame, der Schreiben Sie uns anzeigt Mit Unterstützung der Europäischen Union

Frames sind nicht schwieriger zu verstehen als andere Techniken auch. Man muss den Umgang mit Frames ganz einfach gut beherrschen, wie jede andere Technik auch.

2 Eine Anleitung zum Erstellen von Frames 1. Erstellen Sie zunächst einen Ordner und nennen Sie ihn meinewebsite. 2. In dem Ordner erstellen Sie nun mit dem Text-Editor (Start -> Programme -> Zubehör -> Editor bzw. mit SimpleText bei einem Macintosh) eine ganz einfache HTML-Seite, die nur einen Link beinhaltet: <title></title> <body> <a href= teilen.html >Hier geht es zu meiner Website</a> Speichern Sie die Datei unter dem Namen index.html (Anmerkung: Wenn es Ihnen unter Punkt 1 nicht gelungen ist den Ordner meinewebsite zu erstellen, dann können Sie dies nun beim Speichern der Datei tun - Datei -> Datei speichern unter : In dem sich öffnenden Fenster haben Sie nun die Möglichkeit vor dem Speichern der Datei, zunächst einen neuen Ordner zu erstellen). Der in der Datei beschriebene Link führt zu einer Datei, die dazu dient, das Fenster in drei unterschiedliche Frames zu unterteilen. 3. Erstellen Sie nun eine Datei teilen.html und kopieren folgenden Code hinein: <frameset rows= 30%,55%,15% > <frame src= menue.html name= oben > <frame src= inhalt.html name= mitte > <frame src= kontakt.html name= unten > </frameset> Was bedeutet dieser Code? Sie haben vielleicht bemerkt, dass die Seite teilen.html im Gegensatz zu jeder klassischen Internetseite keinen Tag <body> besitzt. Der Tag <frameset></frameset> legt fest, dass das Fenster in Frames untergliedert wird. Rows= 30%,55%,15% bedeutet, dass sich das Fenster in 3 Zeilen teilt, wobei die erste Zeile von oben 30 % des Fensters, die zweite 55 % und die dritte 15 % des Fensters einnimmt. Wenn man das Fenster nicht in Zeilen sondern in Spalten teilen wollte, müsste man <frameset rows= 30%,55%,15% > durch <frameset cols= 30%,55%,15% > ersetzen. Der Tag <frameset></frameset> beinhaltet nun 3 Tags <frame></frame>, da wir vorab festgelegt haben, dass das Fenster in 3 Zeilen geteilt werden soll. Wenn wir gewollt hätten, dass das Fenster in 4 Zeilen untergliedert wird, hätte der Tag <frameset></frameset> insgesamt 4 Tags <frame></frame> beinhaltet. Jeder Tag <frame> muss die Attribute src und name beinhalten. Das Attribut src zeigt dem Frame an, wo er die anzuzeigende Seite findet. Das Attribut name dient dazu, dem Frame einen Namen zu geben. Jeder so festgelegte Frame muss einen unterschiedlichen Namen besitzen. Seite 2

mit SimpleText bei einem Macintosh) eine ganz einfache HTML-Seite, die nur einen Link beinhaltet: <title></title> <body> <a href= teilen.

3 4. Nun werden Sie die Seiten menue.html, inhalt.html und kontakt.html erstellen. - Um die Seite menue.html zu erhalten, kopieren Sie folgenden Code: <title></title> <body bgcolor= #FF9900 > Dies ist das Menü - Um die Seite inhalt.html zu erhalten, kopieren Sie folgenden Code: <title></title> <body bgcolor= #0066FF > Der Inhalt - Um die Seite kontakt.html zu erhalten, kopieren Sie folgenden Code: <title> </title> <body bgcolor= #FFFFFF > schreiben Sie uns WICHTIG: Vergewissern Sie sich, dass die Dateien index.html, teilen.html, menue.html, inhalt.html und kontakt.html in dem Ordner meinewebsite abgespeichert sind. Anmerkung: Sie habe sicherlich bemerkt, dass die Seiten menue.html, inhalt.html und kontakt.html innerhalb des Tags <body> das Attribut bgcolor anzeigen. Die Angaben sind dabei jeweils unterschiedlich. Dies dient dazu, dass Sie die 3 Frames mit Hilfe eines Farbencodes später gut unterscheiden können. Seite 3

html zu erhalten, kopieren Sie folgenden Code: <title></title> <body bgcolor= #0066FF > Der Inhalt - Um die Seite kontakt.

4 5. Doppelklicken Sie im Ordner meinewebsite auf die Datei index.html. Die Datei öffnet sich in Ihrem Browser (beispielsweise Internet Explorer oder Netscape). Klicken Sie nun auf den Link Hier geht es zu meiner Website. Folgendes sollte auf dem Bildschirm erscheinen: Eventuell stören Sie die Einfassungen der Frames. In diesem Fall können Sie eine kleine Änderung in der Datei teilen.html vornehmen: Öffnen Sie die Datei teilen.html und schreiben Sie innerhalb des Tags <frameset> im Anschluss an rows= 30%,55%,15% Folgendes: border= 0. Der Code der Datei teilen.html müsste nun folgendermaßen aussehen: <frameset rows= 30%,55%,15% border= 0 > <frame src= menue.html name= oben > <frame src= inhalt.html name= mitte > <frame src= kontakt.html name= unten > </frameset> Seite 4

In diesem Fall können Sie eine kleine Änderung in der Datei teilen.html vornehmen: Öffnen Sie die Datei teilen.

5 Und so sieht nun Ihr Bildschirm aus, wenn Sie auf den Link Hier geht es zu meiner Website klicken: 6. Nun werden wir das Menü ein wenig füllen, indem wir in der Datei menue.html mehrere Links setzen. Mit ihnen sollen im mittleren Frame unterschiedliche Inhalte angezeigt werden können. Jeder Link steht für einen unterschiedlichen Inhalt im mittleren Frame. Der Übersicht halber werden wir das Menü als Tabelle darstellen. (für weitere Informationen zum Erstellen von Tabellen unter HTML, sehen Sie die Ausbildungseinheit Eine Mini-Website an einem Nachmittag). Ersetzen Sie den aktuellen Code in der Datei menue.html durch folgenden: <title> Dokument ohne Titel </title> <body bgcolor= #FF9900 > <table width= 600 border= 0 cellspacing= 0 cellpadding= 0 > <tr> <td><a href= inhalt.html target= mitte >Eingangsseite</a></td> <td><a href= seite1.html target= mitte >Seite 1</a></td> <td><a href= seite2.html target= mitte >Seite 2</a></td> </tr> Seite 5

Der Übersicht halber werden wir das Menü als Tabelle darstellen.

6 </table> Das Menü enthält nun 3 Links. Jeder der Links führt zu einer unterschiedlichen Seite. Es handelt sich bei den Links um klassische Hypertext-Links, denen man das Attribut target (auf Deutsch = Ziel) beifügt. Anschließend bestimmt man das Ziel (also den Zielframe). Dies ist der Frame, in dem die vom Link bestimmte Seite angezeigt werden soll. Man könnte die Zeile <a href= inhalt.html target= mitte >Eingangsseite</a></td> folgendermaßen übersetzen: Wenn man auf den Text Eingangsseite klickt, dann suche mir die Seite inhalt.html und zeige sie mir im Frame mit dem Namen mitte an. Probieren Sie Folgendes aus: Noch immer in der Datei menue.html, ersetzen Sie den alten Code: <td><a href= inhalt.html target= mitte >Eingangsseite</a></td> <td><a href= seite1.html target= mitte >Seite 1</a></td> <td><a href= seite2.html target= mitte >Seite 2</a></td> Frames oder Rahmen im Browserfenster durch den neuen Code: <td><a href= inhalt.html target= unten >Eingangsseite</a></td> <td><a href= seite1.html target= unten >Seite 1</a></td> <td><a href= seite2.html target= unten >Seite 2</a></td> Wenn Sie nun auf einen der Links klicken, werden Sie bemerken, dass die aufgerufene Datei nicht mehr im oberen Rahmen sondern im unteren Rahmen angezeigt wird. 7. Am Ende dieser pädagogischen Ausbildungseinheit fügen wir zu unserer Website eine letzte Seite hinzu. Dies ist die Seite mein .html. In der Datei kontakt.html setzen wir einen Link zu dieser Seite. Wenn Sie auf den Link klicken, erscheint in der Mitte der Seite unsere -Adresse. Verändern Sie hierfür zunächst die Datei kontakt.html : <title>dokument ohne Titel</title> <body bgcolor= #ffffff > <a href= mein .html target= mitte >schreiben Sie uns</a> Dann erstellen Sie die Datei mein .html, indem Sie folgenden Code kopieren: <title>dokument ohne Titel</title> <body bgcolor= #9999FF > <p>sie erreichen mich unter folgender Adresse:<a href= mailto:mein @mein .com > mein @mein .com </a> </p> Wenn Sie auf den Link schreiben Sie uns im unteren Frame klicken, wird die Seite mein .html im mittleren Frame angezeigt. Schließlich erstellen Sie die Seite 1 und die Seite 2. Hierzu müssen Sie lediglich die Datei inhalt.html öffnen und einmal als seite1.html und einmal als seite2.html speichern und im Code Der Inhalt durch Seite 1 und durch Seite 2 ersetzen. Kehren Sie zur Liste der Ausbildungseinheiten zurück. Dort können Sie ein Beispiel herunterladen. Seite 6

Dies ist der Frame, in dem die vom Link bestimmte Seite angezeigt werden soll. Man könnte die Zeile <a href= inhalt.

Ähnliche Dokumente

Kapitel 3 Frames Seite 1

Kapitel 3 Frames Seite 1 3 Frames 3.1 Allgemeines Mit Frames teilt man eine HTML-Seite in mehrere Bereiche ein. Eine Seite, die mit Frames aufgeteilt ist, besteht aus mehreren Einzelseiten, die sich den