Darstellung einer Bilderserie mit html-Seiten


Die Darstellung einer Bilderserie mit hml-Seiten für häusliche Vorführungen und zum Vorzeigen im Internet (Beispiel sind unter Städte und Kulturlandschaften in Deutschland und Österreich zu sehen) kann auf sehr einfache Weise verwirklicht werden. Sie müssen zu diesem Zweck Ihre Bilder mit dem Windows-Explorer in B(1).JPG, B(2).JPG, B(3).JPG ….. umbenennen und anschließend durch Anklicken von Bilder eine gepackte Datei „Bilder.exe“ aus unserem Internet-Speicher herunterladen. Wenn Sie Bilder.exe nach Anklicken entpackt haben, finden Sie ein Verzeichnis „Bilder“ mit dem Unterverzeichnis „ALBUM“. Letzteres enthält 200 htm-Seiten S1.htm, S2.htm.. und 200 html-Seiten Seite1.htm, Seite2.htm..... In das Verzeichnis Bilder (nicht in das Verzeichnis „ALBUM“) müssen B(1).JPG, B(2).JPG.. gebracht werden. Sie können stattdessen auch „ALBUM“ in das Verzeichnis Ihrer Bilder bringen. Wenn Sie danach Seite1.htm im ALBUM anklicken, dann erscheint das erste Bild B(1).JPG , wie dies an einem Beispiel in der Abb. 1 zu sehen ist.

Abb. 1


Wenn Sie daraufhin das Zeichen neben dem Bild anklicken, dann erscheint B(2).JPG (siehe Abb.2).




Abb. 2


Durch Anklicken der Winkel rechts und links vom Bild gelangt man zu den Bildern mit größerer bzw. kleinerer Bildnummer.


Wenn Sie S1.htm anklicken, dann erscheint wieder das Bild der Abb.1, diesmal aber ohne Winkel. Nach 5 s folgt das Bild der Abb.2, nach weiteren 5 s das nächste Bild usw..


Damit Sie diese Bilder Ihren Bedürfnissen entsprechend anpassen und mit Unterschriften versehen können, müssen Sie die html-Seiten im Verzeichnis ALBUM mit dem txt-Editor öffnen.


Unten sehen Sie die Quelltexte der Seiten Seite2.htm und S2.htm. Sie erkennen, wo Sie die Bildunterschriften setzen müssen und wo Sie einen Kommentar einfügen können. Blau sind die Stellen markiert, an denen die Bildhöhe und im Fall S2.htm auch die Verweilzeit (content="5) eines Bildes festgelegt ist. Mit url=S3.htm in S2.htm wird bestimmt, dass auf S2.htm die Seite S3.htm folgt. Die Angaben mit # sind Befehle zur Festlegung der Farben.

#c00000"| rot, #94bd5e"|grün, #0066cc"| blau, #e2d574"| beige, #000000"|schwarz, #ffffff"| weiß

Wenn Sie nur 100 Bilder haben, dann sollten Sie in der 100. Seite statt url=S101.htm die Adresse url=S1.htm schreiben, damit die Serie wieder vom 1.Bild an gezeigt wird. Außerdem ist in diesem Fall der Abschnitt <B><A HREF="Seite101.htm">></B> in der Seite100 unerwünscht. Diese Zeile steht für den in diesem Fall unnötigen, zur nächsten Seite101 weisenden Winkel.


Seite2.htm

<HEAD>

<TITLE>Bild 2</TITLE>

<META charset=utf-8/'>

<HEAD/>

<HTML>

<FONT FACE = 'Times New Roman serif'>

<STYLE><P { color: "#ffffff" } A:link { color:"#ffffff" } A:visited { color:"#ffffff" }></STYLE>

<BODY>

<body bgcolor="#c00000"lang=DE Text = "#ffffff" LINK= "#ffffff" VLINK= "#ffffff" style='tab-interval:35.4pt'><FONT SIZE=7 color="#ffffff"><P ALIGN=CENTER>

<nobr><A NAME="Bild"</A>

<B><A HREF="Seite1.htm"><</A></B>

<A HREF="../B(2).JPG"><IMG SRC="../B(2).JPG"NAME="Grafik1"HEIGHT=600 BORDER=0></A>

<B><A HREF="Seite3.htm">></B></A>

</nobr><BR><FONT SIZE=7> hier ist die Bildunterschrift

</P><P ALIGN=JUSTIFY STYLE="margin-left: 1cm; margin-right: 1cm">

hier kann ein Kommentar geschrieben werden

</FONT></BODY></HTML>



S2.htm

<HEAD>

<TITLE>Bild 2</TITLE>

<META charset=utf-8/'>

<META http-equiv='refresh' content='5; url=S3.htm'

<HEAD/>

<HTML>

<FONT FACE = 'Times New Roman serif'>

<STYLE><P { color: "#ffffff" } A:link { color:"#ffffff" } A:visited { color:"#ffffff" }></STYLE>

<BODY>

<body bgcolor="#c00000"lang=DE Text = "#ffffff" LINK= "#ffffff" VLINK= "#ffffff" style='tab-interval:35.4pt'><FONT SIZE=7 color="#ffffff"><P ALIGN=CENTER>

<nobr><A NAME="Bild"</A>

<A HREF="../B(2).JPG"><IMG SRC="../B(2).JPG"NAME="Grafik1"HEIGHT=600 BORDER=0></A>

</nobr><BR><FONT SIZE=7> hier ist die Bildunterschrift

</P><P ALIGN=JUSTIFY STYLE="margin-left: 1cm; margin-right: 1cm">

hier kann ein Kommentar geschrieben werden

</FONT></BODY></HTML>


Sie können die Bilder auch mit Musik oder einer hörbaren Rede im mp3-Format versehen. Wenn z.B. die im Bilderverzeichnis enthaltene Musikdatei B(2).mp3 abgespielt werden soll, dann müssen Sie die folgenden zwei Zeilen vor die letzte Zeile der html- Programme setzten.


<BR><BR><center><P ALIGN=CENTER><audio id='audio_with_controls' controls autoplay

SRC= '../B(2).mp3' type='/mp3'</audio></P></center>



Sie können die Bilder auch auf einer html-Textseite Text.html in einem Rahmen zeigen. Dafür müssen Sie in Text.html an einer dafür vorgesehenen Stelle mit den folgenden Zeilen einen Rahmen erzeugen.


<center><iframe height="650" width="1000" scrolling="no" COLOR="#ffffff" frameborder="0" src="...../ALBUM/S1.htm">

</iframe></center>


"...../ALBUM/S1.htm" ist die Adresse von S1.htm in Bezug auf Text.html. Achten Sie darauf, dass die Höhe des Rahmes (frame) größer ist als die des Bildes, damit die Bildunterschrift sichtbar wird. <A HREF="../B(2).JPG"> sollte bei dieser Art der Darstellung gelöscht werden. Diese Angabe bewirkt, dass beim Anklicken des Bildes dieses ohne Rahmen erscheint, bei erneutem Anklicken vergrößert wird, was durch einen weiteren Klick wieder rückgängig gemacht werden kann. Die unterstrichene Zeile im Programm S2 sollte in diesem Fall auch gelöscht werden, damit die Farben (außer der Schriftfarbe) von der übergeordneten Seite übernommen werden.


Bei einer Nachbearbeitung der html-Seiten mit Word oder Open-Office kann es passieren, dass diese Schreibprogramme beim Speichern eine falsche Angabe über die Bildweite (width) eintragen. In einem solchen Fall sollte die Angabe mit width gelöscht werden.

Im Verzeichnis „Bilder“ finden Sie neben „ALBUM“ auch noch die html-Seite „Bilderverzeichnis.htm“. In ihr sind alle Seiten aufgelistet. Ihre Namen sind mit den zugehörenden Seiten im Verzeichnis „ALBUM“ verlinkt. Sie können dieses Bilderverzeichnis mit Word oder Open-Office Ihren Wünschen entsprechend nachbearbeiten.


Anmerkung zur Umbenennung mit dem Explorer:

Die Bilder, welche zur Umbenennung vorgesehen sind werden markiert. Anschließend wird das 1. Bild mit einem Rechtsklick zur Umbenennung vorbereitet. Wird als neuer Name B.JPG eingegeben, dann wird aus dem Namen des 1. Bildes B (1).JPG, aus dem des 2. B (2).JPG usw.. Nun muss der Zwischenraum zwischen B und der Klammer ( beseitigt werden. Wieder werden alle Bilder zur Umbenennung markiert. Wird im 1. Bild der Zwischenraum gelöscht, dann geschieht dies auch bei allen anderen Bildern.