iFrames eignen sich dazu, externe Inhalte in einem bestimmten Bereich einer HTML-Datei anzeigen zu lassen. Dabei spielt es keine Rolle, ob die Inhalte von fremden Webseiten oder vom eigenen Dateisystem eingebunden werden.
Dieses Tutorial ist mittlerweile veraltet.
Als Erstes erstellen wir eine beliebige Tabelle oder einen DIV-Tag (Layer/Ebene). Für unser Beispiel habe ich mich für eine Tabelle entschieden. Anschließend wechseln wir in Dreamweaver in die geteilte Codeansicht und markieren die Stelle in der Codeansicht, wo wir unseren iFrame platzieren wollen.
Abb.1
Nun wechseln wir in der Einfügen-Leiste von Dreamweaver auf den Registerreiter 'HTML', gehen auf die Schaltfläche 'Frames' und wählen "Schwebender Frame" aus.
Abb.2
Dreamweaver fügt daraufhin folgenden Code ein:
<iframe></iframe>
Abb.3
Jetzt kann man in der Codeansicht den iFrame-Tag bearbeiten bzw. anpassen. Möchte man hierfür ein vernünftiges Ergebnis erhalten, muss man jedoch über fundierte HTML-Kenntnisse verfügen.
Dreamweaver wäre nicht Dreamweaver, wenn das Programm nicht eine kleine Überraschung für uns bereithielte. Es gibt eine weitere komfortablere Möglichkeit, in Dreamweaver einen iFrame einzufügen:
Wir markieren wieder in der Codeansicht die Stelle, an der ein iFrame eingefügt werden soll. Nun rufen wir folgenden Menüpunkt auf: Einfügen/Tag (Strg+E)
Abb.4
Daraufhin öffnet sich das Fenster Tag-Auswahl.
Abb.5
Hier wählen wir aus dem Baummenü auf der linken Seite den Eintrag: HTML-Tags/Seitenelemente/Allgemein
In der rechten Fensterhälfte wählen wir den Eintrag: iframe und klicken auf Einfügen. Jetzt öffnet sich das Fenster: Tag-Editor: iframe
Abb.6
Hier können wir jetzt sämtliche Einstellungen tätigen.
Im Eingabefeld 'Quelle' kann man entweder eine komplette URL zu einer anderen Seite inklusive http eingeben, so z.B.: http://www.traum-projekt.com/ , oder man klickt auf den danebenstehenden Button "Durchsuchen" und wählt eine Datei aus dem Dateisystem aus.
Auf der linken Seite des Fensters kann man noch weitere Bereiche auswählen und weitere Einstellungen vornehmen.
Nach einem Klick auf OK fügt Dreamweaver den kompletten Code für den iFrame ein.
<iframe src="http://www.traum-projekt.com/" name="traumframe" width="400" marginwidth="0" height="200" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0" allowtransparency="true"></iframe>
Wir schließen die Tag-Auswahl speichern unser Dokument und erfreuen uns an unserem ohne Hilfsmittel in Dreamweaver erstellten iFrame.
Um zu kommentieren musst Du eingeloggt sein.