Sie sind hier: edv-beratung-thomas.de / Workshop: Dia-Schau nur mit HTML


Fotos auf Ihrer Website? So präsentieren Sie Ihre Bilder übersichtlich!

Workshop Diashow: Dia-Schau einrichten nur mit HTML:

Sie möchten den Besuchern Ihrer Website ersparen, sich mühsam durch die 683 Bilder Ihres Malediven-Urlaubs zu klicken? Machen Sie aus Ihren Bildern eine Dia-Schau.


Dia-Schau einrichten über Javascript? Die Nachteile:

Im Internet werden zwar viele Javascript-Vorlagen angeboten. Doch die Javascript-Diashows haben auch Nachteile:
Dia-Schau einrichten mit reinem HTML: Die Vorteile:

Eine Dia-Schau läßt sich auch mit reinem HTML umsetzen, wenn man die HTML-Weiterleitungsfunktion verwendet. Die Vorteile liegen auf der Hand: Sie haben eine technisch solide Lösung, Ihre Dia-Schau läuft unter jedem Browser, Sie können hoch- und querformatige Bilder anzeigen und je Bild unterschiedliche Beschreibungstexte am Bildschirm ausgeben.

Einziger Nachteil: Fleißarbeit ist angesagt, weil für jedes Bild eine eigene HTML-Datei erforderlich ist. Den doppelten Aufwand haben Sie, wenn Sie Ihren Besuchern nicht nur die Dia-Schau, sondern zusätzlich eine Blätter-Funktion für Ihre Bilder anbieten wollen.

In diesem Fall brauchen Sie für jedes Bild zwei HTML-Dateien: In der Datei mit der Blätter-Funktion bieten Sie jeweils drei Links an: "zum vorhergehenden Bild", "Dia-Schau starten" und "zum nächsten Bild". Die Datei für die Dia-Schau enthält die HTML-Weiterleitung an die nächste Bilddatei und den Link "Dia-Schau beenden".


Blätter-Funktion: Muster-Code der HTML-Datei für das 2. Bild (bild-002.htm):

    <html>
    <head<
    <title>Bild 002</title>
    <meta http-equiv="content-type"
          content="text/html;charset=iso-8859-1">
    </head>
    <body>
      <table width="100%" summary="">
      <tr>
        <td align="left">Beschreibung A</td>
        <td align="right">Beschreibung B</td>
      </tr>
      </table>
      <table align="center" summary="">
      <tr>
        <td align="center">
          <img src="bild-002.jpg" width="640" height="480" border="2"
            alt="Beschreibung C">
        </td>
      </tr>
      </table>
      <table width="100%" summary="">
      <colgroup>
        <col width="280"><col width="240"><col width="280">
      </colgroup>
      <tr>
        <td align="left">
          <a href="bild-001.htm">zum vorhergehenden Bild</a>
        </td>
        <td align="center">
          <a href="dias-003.htm">Dia-Schau starten</a>
        </td>
        <td align="right">
          <a href="bild-003.htm">zum nächsten Bild</a>
        </td>
      </tr></table>
    </body>
    </html>
  

Dia-Schau: Muster-Code der HTML-Datei für das 2. Bild (dias-002.htm):

    <html>
    <head>
    <title>Bild 002</title>
    <!-- nach 8 Sekunden Verzögerung:
         Weiterleitung zu Datei dias-003.htm: -->
    <meta http-equiv="refresh" content="8; url=dias-003.htm">
    <meta http-equiv="content-type"
          content="text/html;charset=iso-8859-1"<
    </head>
    <body>
    <table width="100%" summary="">
    <tr>
      <td align="left">Beschreibung A</td>
      <td align="right">Beschreibung B</td>
    </tr>
    </table>
    <table align="center" summary="">
    <tr>
      <td align="center">
        <img src="bild-002.jpg" width="640" height="480" border="2"
          alt="Beschreibung C">
      </td>
    </tr>
    </table>
    <table width="100%" summary=""><tr><td align="center">
      <a href="bild-002.htm">Dia-Schau beenden</a>
    </td></tr></table>
    </body>
    </html>
  

Dia-Schau und Blätter-Funktion erstellen: So gehen Sie vor:

  1. Kopieren Sie über die Windows-Zwischenablage jeweils den HTML-Code für beide Dateien in Ihren HTML-Editor.

  2. Fügen Sie die Formatierungen für Ihr Layout und Ihre Meta-tags hinzu, passen Sie die Beschreibungen, Bildnamen und Bildabmessungen an und legen die Verzögerungszeit für die Weiterleitung fest.

  3. Wenn Sie für die Blätter-Funktion und für die Dia-Schau jeweils eine getestete Muster-Datei haben, kopieren Sie beide Dateien in der Anzahl Ihrer Bilder und ändern dann in den kopierten Dateien title-tag, Weiterleitungs-url, die Beschreibungen, Bildnamen und -abmessungen sowie die Links.

  4. Abschließend legen Sie fest, auf welche Datei Sie in der letzten Dia-Schau-Datei weiterleiten (auf die erste Dia-Schau-Datei?), und bestimmen die Link-Ziele "zum vorhergehenden Bild" in der ersten und "zum nächsten Bild" in der letzten Datei der Blätter-Funktion.

  5. Bei Bedarf setzen Sie zusätzlich in Ihrer Steuerleiste einen Link auf die erste Datei Ihrer Dia-Schau und unterlegen ihn mit dem Link-Text "Dia-Schau starten".

Sie erleichtern sich die Arbeit beim Kopieren und Umbenennen und Abändern kopierter Dateien erheblich, wenn Sie für alle Ihre Dateien das gleiche Namens-Schema verwenden und die Dateien aufsteigend durchnummerieren. Für das gleichzeitige Umbenennen mehrerer Dateien gibt es besondere Programme wie etwa Joe (siehe auch Kurzbeschreibung in Windows: Tips & Tricks).

"Sprechende" Dateinamen wie kaethe-im-bikini.htm oder currywurst-in-der-strandbar.htm mögen sonst zwar viele Vorteile haben, beim massenhaften Umbenennen und Abändern kopierter Dateien sind sie aber lästig. Ich verwende hier für die Dateien mit der Blätter-Funktion das Schema bild-nnn.htm und für die Dateien für die Dia-Schau das Schema dias-nnn.htm.


Verzögerungszeit vor Weiterleitung ermitteln:

Um die für Ihre Bilder geeignete Verzögerungszeit zu ermitteln, sollten Sie zunächst einige HTML-Dateien und die zugehörigen Bilder auf Ihren Server hochladen und die Dia-Schau von dort testweise ablaufen lassen. Das Zeitempfinden mancher Browser ist recht eigenartig und ihr Verzögerungsverhalten vor der Weiterleitung oft unterschiedlich, je nachdem, ob die Dateien auf der lokalen Festplatte oder auf dem Server liegen.


Die superkomfortable Benutzerführung: Dia-Schau, Blätter-Funktion und anklickbare Miniatur-Bildübersichten:

Wenn Sie auf Ihrer Website neben Dia-Schau und Blätter-Funktion zusätzlich noch Miniatur-Bildübersichten anbieten, von denen aus jedes Bild im Großformat aufgerufen werden kann, bieten Sie Ihren Besuchern für Ihre Bilder eine superkomfortable Benutzerführung:

Entscheiden Sie selbst, ob Ihre Bilder Ihnen diesen Aufwand wert sind.


Und so sieht's dann aus:

Bilder aus der Fränkischen Schweiz

Zur Startseite
Stand: 01.03.2006 nach oben ©2005-2018 Gösta Thomas