Bilder aus dem Internet einbinden

IDevice Icon Ziele
Diese Anleitung ist für Interessierte gedacht, die sich mit der Struktur von Internet-Seiten und vor allem mit der Einbindung von Bildern noch nicht so gut auskennen. Hier erfahren Sie: Am Ende wartet eine kleine Übung auf Sie.

Bildinformationen auf Internetseiten finden und nutzen

Die meisten Seiten im Internet sind mit der Seitenbeschreibungssprache HTML und Varianten davon (XHTML) programmiert. eXeLearning ist im Wesentlichen nichts Anderes als ein Konvertierungsprogramm, das Text und ein Grundlayout sowie einige Funktionen in die HTML-Sprache übersetzt. Wichtig ist, dass HTML-Seiten ausschließlich aus Text mit eingebetteten Befehlen, sog. "Tags", bestehen. Jedes einzelne grafische Element einer solchen Seite muss in einer eigenen Datei vorliegen und wird nur nurch Befehle mit der Seite verlinkt. Da jede Datei im Internet eine eigene, welt-einmalige Adresse hat, hat auch jedes Bild und jedes grafische Element auf einer Internet-Seite eine solche Adresse. Im Gegensatz zu den Adressen der Seiten, die in der Adresszeile des Browsers jederzeit sichtbar sind, sind die Adressen der grafischen Elemente (und aller anderen Mediendateien) nicht so ohne Weiteres ersichtlich, aber trotzdem recht einfach herauszufinden.
Das soll am Beispiel einer Seite des Web-Auftritts der Akademie für Lehrerfortbildung und Personalführung Dillingen gezeigt werden. Die Beispiele beziehen sich auf den Browser Firefox. Andere Browser sehen anders aus und stellen die Funktionen auf andere Weise bereit.

Auf dieser Seite (URL: http://alp.dillingen.de/akademie/gebaeude/) befinden sich zahlreiche Bilder und grafische Elemente. Platziert man die Maus über eines davon und drückt man die rechte Taste, öffnet sich ein Kontextmenü mit mehreren Möglichkeiten. Nicht immer sind alle davon zugänglich.

Der einfachste Weg, eine Grafik/ein Bild auf der eigenen Internet-Seite zur Verfügung zu stellen, besteht darin, die Grafikdatei mit der Funktion "Grafik speichern unter ..." auf den eigenen Rechner herunterzuladen und hier in einem geeigneten Verzeichnis zu speichern. Dann baut man diese Grafik wie auf der vorigen Seite beschrieben in die eigene Seite ein.

Oft ist es gut, sich die Grafik zuerst anzeigen zu lassen. Ein scheinbar einzelnes Bild besteht bisweilen aus mehreren Grafiken. Auch das Umgekehrte kommt häufig vor: Ein Foto ist z. B. mit dem Hintergund und umgebendem Text in einer einzigen Grafikdatei gespeichert.
Beim Anzeigen der Grafik ist die Adresse des Bilds in der Adresszeile des Browsers zu finden und kann von dort kopiert werden.

Firefox verfügt außerdem über die Funktion "Grafikadresse kopieren". Damit erhält man die URL, ohne das Bild anzuzeigen.

Die übrigen Funktionen des Kontext-Menüs sind für eXeLerning irrelevant.

Mit der Grafik-Adresse lassen sich Bilder aus dem Internet direkt in eXeLearning-Seiten einbauen, ohne dass diese auf dem eigenen Rechner gespeichert sind. Das ist vor allem deshalb vorteilhaft, weil man damit den Speicherplatz für die Webseiten gering halten kann. Internet-Provider stellen oft nur ein relativ begrenztes Kontingent kostenlos zur Verfügung. Werden bestimmte Schwellwerte überschritten, erhöhen sich die Kosten für die Webpräsenz der Schule z. T. sprunghaft. Wegen der vielen eingebundenen Medien ist diese Handreichung beispielsweise über 250 GB groß.

So bindet man Bilder aus dem Internet direkt in eXeLearning-Seiten ein:

Dies soll am Beispiel des oben zu sehenden Lageplans demonstriert werden.

1. Kopieren Sie die Grafikadresse:
  • Platzieren Sie die Maus über dem Lageplan. Klicken Sie mit der rechten Maustaste und dann im Kontext-Menü auf "Grafikadresse kopieren"
    oder
  • Klicken Sie auf "Grafik anzeigen" und kopieren Sie die URL aus der Adresszeile Ihres Browsers.
Zur Kontrolle: Die Grafikadresse ist http://alp.dillingen.de/img_box/gplan_klein.gif.
2. Klicken Sie im eXeLearning-Editor an die Stelle, an der Sie die Grafik einfügen wollen,
öffnen Sie dann mit Klick auf das "Bild einfügen"-Icon das Eingabe-Fenster "Insert/edit icon".
3. Füllen Sie die notwendigen bzw. gewünschten Zeilen aus.

Notwendig ist nur die URL. Kopieren Sie diese in die Zeile "Image URL".
Die Maße (Dimensions) werden automatisch eingefügt, ebenfalls das Häkchen bei "Constrain proportions".

Auf der Seite "Appearance" bietet es sich an, einen Rahmen zu ziehen und die Grafik etwas vom Text frei zu stellen (siehe "Bilder einbinden").

Mit Klick auf "Insert" wird die Grafik in Ihre Seite eingefügt.

Das Ergebnis sehen Sie unten.

So lange die Verbindung zur Akademie für Lehrerfortbildung nicht unterbrochen oder der dortige Server nicht down ist, werden Sie keinen Unterschied zu den anderen Bildern dieser Handreichung merken. Denn auch diese kommt aus dem Internet. Auf Ihrem Rechner laufen die verschiedenen Bestandteile zusammen und werden erst dann angezeigt, wenn alle "Informationspakete" angekommen sind. Deswegen gibt es auch oft eine kleine Wartezeit, bis die Seiten angezeigt werden, die Filme enthalten.


plan of the academy for teachers training, Dillingen
Diesen Vorgang können Sie sich auch als Video Tutorial erklären lassen.
Web-Alben

Im Internet gibt es Millionen von Fotos, meist in hoher Qualität, die man kostenlos für Unterrichtszwecke nutzen darf. Diese sind in "Webalben" übersichtlich organisiert. Es gibt Hunderte solcher Fotosammlungen, auf drei der verbreitetsten soll hier kurz eingegangen werden:

ist die weltweit größte und bekannteste Sammlung. Betrieben wird es von Yahoo.

ist das von Google angebotene Pendant zu Flickr.

verknüpft Fotos mit Satellitenbildern (Geotagging) - ein hochinteressante Quelle (nicht nur) für Geografielehrer. Panoramio-Bilder findet man auch in Google Maps und anderen Internet-Kartenwerken.

Eingestellt werden die Bilder von Privatleuten, aber auch von Profifotografen. Beim Hochladen entscheidet man, wer die Bilder sehen darf und welche Rechte damit verbunden sind. So lange Sie nicht selbst einen Account (ein Konto) bei diesen Plattformen haben, können Sie "nur" die Bilder sehen, die weltweit für alle freigegeben sind. Intelligente Suchmaschinen erleichtern das Finden von Bildern zu bestimmten Themen oder aus bestimmten Weltregionen.

Grundsätzlich ist es bei allen diesen Plattformen möglich, die Bilder sowohl herunterzuladen als auch direkt zu verlinken. Häufig liegen auch noch Fotos in besserer Auflösung "hinter" den Bildern. Die genannten Webalben verfügen über deutsche Bedienerführung und sind so einfach zu nutzen, dass sie nicht weiter erklärt werden müssen.

iDevice Icon Übung
Im Kapitel "Externe Webseiten einbinden" haben wir einen Text von Peter Handke als Lückenübung eingebunden und eine kurze Information zum Text gegeben. Wäre es nicht schön, diese Seite mit einem Foto von Peter Handke zu illustrieren?

 

Das ist problemlos möglich, denn in Wikipedia gibt es ein solches Foto: http://de.wikipedia.org/wiki/Peter_Handke. Hier habe ich zur Veranschaulichung zwei Browserfenster übereinander gelegt. Im Hintergrund ist die Wikipedia-Seite zu sehen, im Vordergrund die Seite aus der eXeLearning Rechtschreibübung "Literarischer Lückentext".

Versuchen Sie bitte Folgendes:

Binden Sie das Handke-Foto so in die Seite ein, dass es rechts neben dem Text steht, einen dünnen Rahmen und 12 Punkt Abstand zum Text hat.
Unterhalb des Bilds gibt es dazu ein paar Tipps und den Text zum Kopieren (Falls Sie die Übung "Externe Webseiten einbinden" nicht mitgemacht haben).

Auf der Seite "Literarischer Lückentext" steht folgender Text als Aufgabe für die Schüler:

Peter Handke, ein berühmter Schriftsteller, hat viele Jahre lang seine Erlebnisse aufgeschrieben und in Journalen, einer Art Tagebücher, veröffentlicht. Das erste davon trägt den Titel "Das Gewicht der Welt". Ein Text daraus, "Sonntagabendgeräusche", enthält ziemlich viele Wörter mit Doppelkonsonanten. Kannst du sie richtig ergänzen?


So können Sie vorgehen:
  • Öffnen Sie die Seite "Literarischer Lückentext" oder legen Sie eine neue Seite an.
  • Öffnen Sie in einem zweiten Browser-Fenster Wikipedia und suchen Sie nach "Peter Handke" oder klicken Sie auf den obigen Link.
  • Öffnen Sie im eXe-Fenster den Editor (bei vorhandener Seite) oder fügen ein iDevice "Freier Text" ein.
    Fügen Sie ggf. den obigen Text durch Copy-and-Paste ein.
  • Stellen Sie den Cursor an den Anfang der 1. Zeile und klicken Sie auf das Icon "Bild einfügen".
    Es öffnet sich das Kontext-Menü "Insert/Edit image".
  • Bewegen Sie den Mauszeiger auf das Handke-Foto im Wikipedia-Fenster und kopieren Sie die Grafikadresse.
  • Fügen Sie diese in das eXe-Kontextmenü ein.
  • Nehmen Sie die weiteren Einstellungen vor (Seite "Appearance" im eXe-Kontextmenü)
    Mit Klick auf "Insert" sollte das Handke-Foto rechts neben Ihrem Text erscheinen.
  • Schließen Sie den Editor (grünes Häkchen) und speichern Sie die Datei.
Das Ergebnis könnte so aussehen:

Lizenziert unter Creative Commons Attribution Non-commercial Share Alike 3.0 License

eXe Handreichung für Lehrkräfte cc 2009/2010 Johannes Philipp/ALP Dillingen