Lektion 17 - Externe Inhalte - Der Iframe

Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von Admin » Di 19. Aug 2014, 11:17

Externe Inhalte...

Hin und wieder möchte man externe Inhalte in der Webseite einbinden. Hierfür gibt es Inline-Frames - eingebettete Frames. Mit einem Inline-Frame schneidest du praktisch ein Loch in deine Seite, durch die du Inhalte anderer Webseiten sichtbar machst. Es gibt viele Beispiele, für die du einen Inlineframe verwenden kannst:
  • für dein Gästebuch
  • für eine Shoutbox
  • für eine Straßenkarte von Google
  • eine Werbung
  • ....
Dies sind nur ein paar Beispiele, es gibt noch viele kleine Spielsachen, die im Internet angeboten werden, die du als kleines Gimmick in deine Seite einbinden kannst.

Auch ein Inline-Frame ist ein Element. <iframe></iframe>

Der KompoZer unterstützt das Einbinden von Frames nicht, deshalb gibt es dafür keinen Knopf, den du dazu verwenden kannst. - Aber du hast ja einen Texteditor in KompoZer eingebunden.

Okay, noch nicht? Dann wird es jetzt aber Zeit. In Lektion 1 ist für Windows-Nutzer das Programm notepad++ hinterlegt. Es gibt aber noch viele weitere freie und kommerzielle Texteditoren auf dem Markt. Nur bitte verwende nicht den Texteditor von Windows, da dieser keine Syntax hervorheben kann und es für dich wirklich schwierig wird, dich im Quelltext damit zurechtzufinden.

Zum Einbinden des Texteditors öffne Menü Bearbeiten (oder Extras) - Einstellungen - Register Hilfsanwendungen.

[col]
  1. Wähle im Drop-down-Menü Anwendung den Texteditor.
  2. Klicke anschließend auf Benutzerdefinierte Anwendung.
  3. Dann wähle über den kleinen Ordner den Pfad zu deinem Texteditor. Unter Windows sollte das je nach Partitionierung auf Laufwerk c:\Programme\notepad++.exe sein. KompoZer trägt den Dateipfad in das Textfeld ein. Ich arbeite unter Linux, mein Texteditor ist bluefish.
  4. Klicke auf OK und starte KompoZer neu, sodass er die Einstellungen übernimmt.
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Im Texteditor siehst du den Quellcode deiner Seite. In den anderen Lektionen habe ich den Quellcode angehängt, sodass du eine Vorstellung davon bekommst, wie es im Texteditor aussieht, was du da gemacht hast.

Alle Elemente werden im Quellcode mit einer öffnenden spitzen Klammer und einer schließenden spitzen Klammer dargestellt. Der Inhalt steht dazwischen z.B.

<h1>Dies ist eine Überschrift der 1. Ordnung</h1>

Wenn du nun auf deiner Seite im Quellcode etwas verändern möchtest, z.B. einen Inlineframe einfügen, musst du dir den TAG heraussuchen, wo du den Frame einfügen möchtest.

In meinen Anfängen habe ich mit einem kleinen Trick gebastelt. In der WYSIWYG-Ansicht habe ich ein Wort an die Stelle geschrieben, wo ich einen Quelltextblock eingeben wollte - z.B. Nudelholz.Im Quelltext brauchte ich dann nur nach diesem Wort zu suchen und es durch den Code ersetzen.

Der Inlineframe wird auch mit entsprechenden TAGs markiert. Im öffnenden TAG wird noch der Pfad zur Seite eingefügt, die im Inlineframe angezeigt werden soll:

Code: Alles auswählen

<iframe src="http://www.meineshoutbox.de"></iframe>
Nicht jeder Browser kann einen Inlineframe lesen, deshalb solltest du zwischen die TAGs einen Text mit einem Link zur Seite setzen, die im Inlineframe angezeigt wird. Auf diese Weise kann auch ein Besucher, dessen Browser Probleme mit der Anzeige eines Inlineframes hat, die Seite aufrufen. Dein Code könnte also so aussehen:

Code: Alles auswählen

<iframe src="http://www.meineshoutbox.de">Dein Browser kann den Inhalt dieses Iframes nicht anzeigen. Du findest den Inhalt über diesen Link: http://www.meineshoutbox.de </iframe>
Wichtig beim Einfügen eines externen Links ist immer das http:// davor zu setzen.

Die Größe legst du über dein Stylesheet fest.

Übung

Starten wir durch ...

Bevor du deine iframe irgendwo einfügst, musst du erst einmal etwas haben, was du einfügen kannst. Wenn du ein Gästebuch einbinden möchtest, musst du dich erst bei einem Anbieter für Gästebücher registrieren. Dort bekommst du den Code, den du einbinden musst.

Das Gleiche gilt für Shoutboxen, Werbeblöcke ...

Also erst registrieren, dann einbinden.
Öffne deine Seite Gästebuch mit KompoZer. Füge zuerst eine Überschrift auf deiner Seite ein und eventuell ein bisschen Text. Jetzt kannst du ja mal den Trick mit dem Nudelholz versuchen.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion18-2.png[/popup]
[col]Dann öffnest du über die Symbolleiste deinen Editor. Die Seite wird im Texteditor geöffnet.

Nun suche die Stelle aus, wo du den Inlineframe für deine externe Anzeige einfügen möchtest.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Lösche den Absatz <p>Nudelholz</p>

Und ersetze ihn durch den Inlineframe zu deinem Gästebuch:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Speichere die Seite im Texteditor und schließe ihn.

KompoZer fragt dich nun, ob du die Änderungen übernehmen willst. Klicke hier auf "Änderungen übernehmen".

KompoZer zeigt dir den Ausschnitt zu deinem Gästebuch an. Leider ist es noch sehr klein. Lege also eine neue Styleregel an: iframe

Stelle in den Boxeigenschaften eine Höhe und Breite ein. Sodass dein Gästebuch gut sichtbar ist und ein Besucher nicht quer scrollen muss:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Fertig ist dein Externer Eintrag.

Hier wie immer der Quelltext:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Kontakt</title>
<meta content="Anke Lange" name="author">
<link rel="stylesheet" href="styles.css" type="text/css">
</head><body>
 
<div id="seite">
<div id="kopf">
<h1>Überschrift 1<br>
</h1>

</div>
<div id="navi">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="hobby.html">Hobby</a></li>
  <li><a href="galerie.html">Galerie</a></li>
  <li><a href="glossar.html">Glossar</a></li>
  <li><a href="termine.html">Termine</a></li>
  <li><a href="gaestebuch.html">Gästebuch</a></li>
  <li><a href="wegbeschreibung.html">Wegbeschreibung</a></li>
  <li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="inhalt">
<br>
<h2>Gästebuch</h2>

<p>Hat dir meine Seite gefallen, so freue ich mich über ein kurzes Feedback in meinem Gästebuch.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

<iframe src="http://218766.multiguestbook.com/">Ihr
Browser kann leider keine eingebettenten Frames anzeigen: Sie können
sich die Seite über diesen Link anzeigen lassen:
<a> href="http://218766.multiguestbook.com/Gästebuch/</a></iframe>

<p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. <br>
 <br>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
</p>

<p>
</p>
</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>
</body></html>
Und der Styles für deinen iframe:

Code: Alles auswählen

iframe {
   width: 90%;
   margin-left: 5%;
   height: 450px;
}

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von kp2709 » So 31. Aug 2014, 18:59

hi, es ist doch ein schöner tag zum faulenzen :lol:.
hier bin soweit, mal schauen?
http://reikuma27.reikuma.bplaced.de/web/index.html

grüße aus bayern

kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von camouflage1984 » Mo 1. Sep 2014, 01:51

Hallo Kurt

Sieht gut aus.
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von eibauoma » Mo 22. Sep 2014, 20:08

Mein Gästebuch ist eingebunden, bleibt zu wünschen, dass es von allen Spam-Freudigen verschont bleibt. ;)
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von camouflage1984 » Di 23. Sep 2014, 04:43

Hallo eibauoma

Das sieht gut aus....
Habe versucht etwas einzutragen aber das hat nicht Funktioniert....

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von eibauoma » Di 23. Sep 2014, 07:09

gaestebuch.jpg
gaestebuch.jpg (43.03 KiB) 706 mal betrachtet
Hallo Anke und Camouflage - die Einträge musste ich erst aktivieren - es hat also funktioniert

Danke an Euch beide :)
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von Hellriders » So 30. Aug 2015, 17:41

so mein gästebuch ist fertig.

gaestebuch.html
für 10€ im jahr nehmen die sogar die werbung raus, mal sehen vielleicht mach ich es.

wenn ich mehrere iframe verwende, haben die nun alle dieselbe größe? :o

gruß micha

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von camouflage1984 » Mo 31. Aug 2015, 01:52

Hallo Micha
Hellriders hat geschrieben:wenn ich mehrere iframe verwende, haben die nun alle dieselbe größe?
Ja, warum willst du mehrere verwenden? Dann kannst du das über css und eine id oder klasse lösen ;) , das hast du ja jetzt gelernt ;)

Weiter gehts...

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von Moendel » Mo 11. Jan 2016, 14:36

Hier würde ich gerne aussetzen, da ich weder in naher noch ferner Zukunft vorhabe, so etwas
wie ein Gästebuch, Shoutbox o.ä. zu nutzen und mich nicht für 1maliges Üben irgendwo registrieren möchte.

Allerdings: Der Editor geht bei mir seltsame Wege:
Ich habe versucht den Texteditor einzubinden, ist ja nicht wirklich kompliziert- jedoch-:Keine Reaktion wenn ich das Symbol nutze.
(Kompozer wurde jedesmal neu gestartet)

Darum habe ich es mehrfach versucht – und dabei 1x den Fehler gemacht,
den Link nicht unter Texteditor sondern Webbrowser anzulegen

Tja – dann zeigt Kompozer mir unter Symbolleiste-Vorschau Webbrowser den Editor. :o
Aber das ist ja nicht das , was ich möchte. Bin etwas irritiert. :?:

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 17 - Externe Inhalte - Der Iframe

Beitrag von anke » Mo 11. Jan 2016, 16:31

Hallo Moendel

ich weiß nicht, warum das so ist, aber um den Texteditor nutzen zu können, muss man die Ansicht einmal ändern. Ich schalte immer in die geteilte Ansicht und dann wieder zurück. Anschließend kann ich den Texteditor in der Symbolleiste aktivieren.

Gruß Anke

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast