Druckansicht von http://lehrerfortbildung-bw.de/allgschulen/sonder/fb_sonder/bild/irfan_bspl/html/index.htm, Stand 21. May. 2012

Sie sind hier: > Startseite > Allgemein bildende Schulen > Sonderschule > Einsatz neuer Medien im Unterricht der Sonderschule

Mit IrfanView eine Html-Bilderschau erstellen

Diese Anleitung beschreibt, wie man mit IrfanView HTML-basierte Anleitungen oder Dokumentationen erstellt und diese mit Text versieht. Es wird davon ausgegangen, dass die in der Anleitung benutzen Bilder bereits vorliegen ( interner Link Download der Bilder [zip] [12,5MB]) und alle im selben Verzeichnis originale liegen. Sie erfahren außerdem, wie man die HTML-Vorlagen anpassen sowie einen längeren Text zu jedem Bild eingeben kann. Für die Eingabe des Textes wird sinnvollerweise ein HTML-Editor verwendet, bspw. das kostenlos erhältliche Programm Nvu, das Sie von extern http://www.nvu-composer.de/ herunterladen können. Eine Kurzanleitung zum Programm Nvu finden Sie auf diesem Server in der interner Link Werkstatt.

A Fotos vorbereiten

Starten Sie IrfanView
Öffnen Sie das erste Bild im Verzeichnis originale (Datei | Öffnen)

Zunächst werden die Fotos umbenannt und auf die richtige Größe gebracht. Dazu benutzen Sie die Stapelverarbeitungsfunktionen von IrfanView.

Drücken Sie dazu die Taste B.
Wählen Sie die Option Batch-Konvertierung + Umbenennen.
Klicken Sie auf die Schaltfläche Alle hinzufüg.
Im Feld Optionen für Batch-Umbenennen geben Sie als Muster ein: agar_###.

(Eine ausführliche Beschreibung der Batch-Umbenennen-Funktion finden Sie in der interner Link Anleitung.)

Wählen Sie als Zielverzeichnis ein zuvor erstelltes Verzeichnis bearbeitet.
Setzen Sie das Häkchen bei Spezialoptionen verwenden.
Klicken Sie dann auf die Schaltfläche Spezial-Opt.
Im sich nun öffnenden Fenster setzen Sie das Häkchen im Feld Größe ändern und im Feld Proportional. Als neue Größe tragen Sie den Wert 640 ein. Als Maßeinheit wählen Sie Pixel.
Bestätigen Sie die Einstellungen mit einem Klick auf OK.
Klicken Sie nun auf Start, um die Stapelverarbeitung auszulösen.
IrfanView bringt nun alle Bilder aus dem Verzeichnis original auf die gewählte Größe, benennt sie fortlaufend um und speichert sie dann im Verzeichnis bearbeitet.

B HTML-Anleitung erstellen

Öffnen Sie nun das erste Bild agar_001.jpg im Verzeichnis bearbeitet.
Drücken Sie die Taste T, um den Thumbnail-Viewer zu starten.
Im rechten Fenster des Thumbnail-Viewers klicken Sie mit der rechten Maustaste auf eines der Bilder und dann im Kontextmenü auf alle markieren.
Klicken Sie noch einmal im rechten Fenster die rechte Maustaste und dann im Kontextmenü auf den Eintrag Selektierte Thumbnails als HTML speichern.

Es öffnet sich das Fenster HTML erzeugen. Hier können Sie einige Einstellungen vornehmen.

Im Feld HTML-Name tragen Sie ein Agar-Agar.html.

Dies ist der Name der Start-Datei.

Wählen Sie als Zielverzeichnis ein zuvor erstelltes Verzeichnis html.

In der Standardeinstellung versieht IrfanView alle Vorschaubildchen mit der Datei-Suffix _t. Wenn Sie möchten, können Sie auch ein Präfix verwenden.

Als Seitentitel geben Sie ein: Agar Agar Startseite.

Die Anzahl der Spalten für die Vorschaubildchen können Sie optional auf 6 setzen, wenn Sie wollen.

Nachdem alle Einstellungen abgeschlossen sind, klicken Sie auf die Schaltfläche Starten.

IrfanView erstellt nun eine Startseite mit Vorschaubildchen und für jedes Foto im Verzeichnis eine HTML-Seite.

Um das Ergebnis zu betrachten, öffnen Sie im Explorer die Datei Agar-Agar.html durch einen Doppelklick.

Die Datei öffnet sich in Ihrem Standardbrowser. Mit einem Klick auf das erste Vorschaubildchen starten Sie die Anleitung. Sie werden feststellen, dass jede Seite drei Links enthält:

prev (links oben)
next (rechts oben)
Thumbnails (in der Mitte unten)

Diese Beschriftungen lassen sich dauerhaft ändern, indem man die von IrfanView benutzte HTML-Vorlage bearbeitet.

C HTML-Vorlage bearbeiten

Öffnen Sie den Windows-Explorer
Gehen Sie zum Verzeichnis C:\Programme\IrfanView\Html.
Öffnen Sie die Datei frame.html im Editor, indem Sie mit der rechten Maustaste auf die Datei klicken und dann im Kontextmenü zuerst auf Öffnen mit und dann auf Editor klicken.

Die Datei öffnet sich im Editor. Ersetzen Sie nun prev durch Zurück, next durch Weiter und Thumbnails durch Start. Anschließend speichern Sie die Datei.
Editor
Auf die bereits erstellten Dateien der Agar-Agar-Anleitung wirkt sich diese Änderung nicht mehr aus. Deshalb müssen Sie nun die unter B beschriebenen Schritte noch einmal wiederholen.

D Texte einfügen

Nun werden Sie den Bildern einen Erklärungstext hinzufügen. Dazu brauchen Sie den HTML-Editor Nvu.

Starten Sie Nvu und öffnen Sie die Datei agar_001.html.
Wählen Sie den Ansichtsmodus Normal am linken unteren Rand des Arbeitsfensters.

Sie können nun den Text agar_001.jpg durch einen anderen Text ersetzen.

Markieren Sie dazu agar_001.jpg. Überschreiben Sie dann den alten mit einem neuen Text.

Der Text kann anschließend wenn gewünscht noch formatiert werden. Danach muss die Datei nur noch gespeichert werden.

Sie können sich diese Anleitung als download PDF-Dokument [336 KB] herunterladen.

Zuständiger Redakteur: Mario Schmid, schmidmlehrerfortbildung-bw.de
© Landesakademie für Fortbildung und Personalentwicklung an Schulen, für diese Seite gilt http://lehrerfortbildung-bw.de/impressum/copyright/urheber_standard.html
Letzte Änderung: 07.01.2008