Lektion 6 - iframes

Wenn man auf deiner Startseite einen Link betätigt, öffnet sich die Antwortseite über das ganze Browserfenster. Mit Hilfe eines neuen Fensters auf deiner Startseite, einem iframe, kannst du deine Unterseite im selben Browserfenster laden, ohne jedesmal einen Zurück-Button drücken zu müssen, um zurück zum Menü zu gelangen.

6.1 Einen iframe einfügen

Am besten macht sich ein iframe in eine Tabellenzelle. So kannst du auch links und rechts davon Links plazieren.

Das Tag, mit dem man einen iframe einfügt, heißt iframe. Es gibt ein öffnendes und ein schließendes Tag, wobei jedoch nichts dazwischen steht. Mit Hilfe des Schlüsselworts 'src' wird die URL eingefügt, die geladen werden soll, wenn man die Seite, auf der sich der iframe befindet, öffnet. Mit frameborder legst du die Breite des Fensterrahmens fest. Hier sind das 0 Pixel, was also "Keinen Rahmen anzeigen" bedeutet.
Der Name des iframes ist wichtig, damit wir den Links, die sich darin öffnen sollen, sagen können, dass sie sich genau darin öffnen sollen.

Wenn du diesen iframe nun auf deiner Startseite eingefügt hast, siehst du, dass sich die ganze Seite samt Layout noch einmal darin läd. Deshalb solltest du den Inhalt deiner Startseite nun auf einer einzelnen Seite abspeichern, wie du es auch bei uebermich.html oder mit den Galerien gemacht hast. Auf der Startseite index.html bleiben lediglich alles, was zum Layout gehört, wie die Links oder eine Überschrift deiner Seite. Zum Beispiel etwa so:

Deine neue Seite mit dem Inhalt der Startseite kannst du z.B. startseite.html nennen und im Ordner seiten/ speichern. Änder dann den Pfad im iframe zu dieser Seite.

6.2 Höhe und Breite festlegen

Auf Telien findest du ein kleines Tutorium über Cascading Style Sheets (CSS) mit denen man eine Seite Layouttechnisch verschönern kann. CSS ist eine eigene Skriptsprache, deshalb habe ich sie im HTML Kurs bisher nicht erwähnt.
Mit CSS kann man aber auch einen iframe verschönern und festlegen, wie breit und wie hoch er sein soll. Bisher nimmt dein iframe die Größe deiner ganzen Tabellenzelle ein. Das muss nicht unbedingt schlimm sein, da du weißt, wie man die Größe einer Tabellenzelle festlegt, aber manchmal ist es praktisch, die Größe des iframes direkt im iframe-Tag zu steuern.

Will man CSS Code direkt in ein HTML Tag schreiben, so geschieht das immer mit dem Schlüsselwort 'style'.

CSS sieht ein bißchen anders aus, als HTML, aber die wichtigen Elemente sollten zu erkennen sein. Im Schlüsselwort style werden die Eigenschaften Höhe und Breite gleichzeitig übergeben. Die Höhe (height) sind hier 600 Pixel, und die Breite (width) 500 Pixel. Füge diese Eigenschaftzuweisung nun in dein iframe-Tag ein, und passe Höhe und Breite gegebenfalls an.

6.3 Linkverweise

Damit sich deine Unterseiten im iframe öffnen, muss ihnen die Eigenschaft Ziel mitgegeben werden. In Lektion 4 hatten wir in diesem Sinne bereits die Eigenschaft target="_blank". Nun sollen sich die Links hier aber nicht in einem neuen Fenster öffnen, sondern im iframe. Und deshalb haben wir diesem einen Namen gegeben, und zwar "Seite". Das Ziel des Links ist der iframe mit dem Namen "Seite".

Wenn deine Webseite so groß wird, dass ein Linkmenü im Layout nicht mehr ausreicht, kannst du auch Links zu Untermenüs einfügen. Diese Untermenüs schreibst du wie gehabt je in eine eigene HTML-Seite. Anstelle des Linkmenüs auf deiner Startseite, füge einen weiteren iframe ein und andere Links, die auf die Seiten der neuen Menüs verweisen. Gib dem zweiten iframe aber einen anderen Namen, damit du ihn über eine andere target Bezeichnung ansteuern kannst.

6.4 Übung