Eurokicker
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Dreamweaver > iFrames mit Dreamweaver

iFrames mit Dreamweaver

Dreamweaver Tutorial

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.

iFrames erstellen, Teil 1

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.
tooltipp

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.
tooltipp

Dreamweaver fügt daraufhin folgenden Code ein:
tooltipp

 

HTML
<iframe></iframe>

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.

iFrames erstellen, Teil 2

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)
tooltipp


Daraufhin öffnet sich das Fenster Tag-Auswahl.
tooltipp

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
tooltipp


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.

HTML
<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.

 

Autor: Torsten

Abbildungen

Abb. 01 - zum Vergrößern auf das Bild klicken

Abb. 01 - zum Vergrößern auf das Bild klicken

Abb. 02 - zum Vergrößern auf das Bild klicken

Abb. 02 - zum Vergrößern auf das Bild klicken

Abb. 03 zum Vergrößern auf das Bild klicken

Abb. 03 - zum Vergrößern auf das Bild klicken

Abb. 04 - zum Vergrößern auf das Bild klicken

Abb. 04 - zum Vergrößern auf das Bild klicken

Abb. 05 - zum Vergrößern auf das Bild klicken

Abb. 05 - zum Vergrößern auf das Bild klicken

Abb. 06 - zum Vergrößern auf das Bild klicken

Abb. 06 - zum Vergrößern auf das Bild klicken

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping


Ferienwohnungen
TP-Partner
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
d. Webdesigner
PSD Tutorials
Medizin

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /