Baue Seite aus Bildersammlung

1. HTML5-Template ( mit TOKEN-Platzhalter )

2. Ersetzungstexte ( ErsetzungsTOKEN )

*H1_TEXT: Bilder von ...

*DEFINE_TEMPLATE1:
<p class="CLASS_P_BILD"> BILD_NAME
<br />
<a href="javascript:void(0)"
  onclick='img_center("DIR_BIG/BILD_NAME-BIG.EXT","_blank");return false;'>
             <img src="DIR_WEB/BILD_NAME-WEB.EXT" alt="Bild: BILD_NAME" />
</a>
</p>

*VERWENDE_FUNKTION: replace FOLGE_VON_BILDERN width DEFINE_TEMPLATE1 and BILD_NAME textarea TA3
*CLASS_P_BILD: center
*DIR_BIG: ./img-big
*DIR_WEB: ./img-web

*.jpg-BIG.EXT: .jpg
*.jpg-WEB.EXT: .jpg

*HEADER_CONTENT: 
<meta charset="utf-8" />
<meta name="robots" content="index, noimageindex" />
<link rel="stylesheet" href="../../kern/frame-info.css" />
<script>
  function img_center(bild_into, dst_frame, center_big_htm) {
    dst_frame = dst_frame || "_blank"; center_big_htm = center_big_htm || "./center-big.htm";
    window.open(center_big_htm + '?' + bild_into, dst_frame);
  }
</script>

3. Bildnamen ( je Zeile ein Bildname )

4. Erstelle HTML5-Quelltext aus Folge von Bildnamen

Vorschau

Infos

Es kann HTML5-Code aus Templates generiert werden. Gebraucht werden die komprimierten Bilder.

Gegeben  : Zahlreiche Kamera-Bilder
Gewünscht: HTML5-Seite ( als Quellcode ), die diese 
           Bilder ( in -web- und -big-Qualität )
           enthält
Gewünscht: Halbautomatische Erstellung 
           mit Manipulations- und Anpassungmöglichkeiten

Die halbautomatische Erstellung braucht zahlreiche Bearbeitungsschritte von Hand! Diese werden nachfolgend beschrieben.

A ) Alle Kamerabilder auf eine kleine Web-Größe bringen
( "auf web" komprimieren ).
Alle Kamerabilder auf eine größere Web-Größe bringen
( "auf big" komprimieren )
B ) Alle Namen der Kamerabilder ermitteln.
Diese werden im HTML-Quellcode gebraucht.
C ) Alle Namen in ein HTML5-Template einsetzen.

A: Kamera-Bilder fürs Web aufbereiten

Zu A: Beschrieben wird die Umwandlung von Kamera-Bilder fürs Web mit "Windows" und "Adobe photoshop elements".

Von den ausgewählten Kamera-Bildern 
soll auf dem Rechner jeweils 
  ein großes   img-big   Bild und 
  ein kleines  img-web   Bild erzeugt werden:  Wie?
---------------------------------------------------------------

A1. gewünschte Kamera-Bilder als Kopie 
    in ein temporäres Verzeichnis für 
    die  img-big Bilder kopieren
A2. mit Adobe photoshop elements 
     Datei 
       Öffnen ... alle Bilder im temp Verzeichnis markieren
A3. mit Adobe photoshop elements 
     mehrere Dateien verarbeiten ...
A4. Alle speichern mit
     Bilder skaliern Breite 1024 Pixel  und  Auflösung 96 dpi 
     =========================================================
     dies liefert die größeren    -big Bilder

---------------------------------------------------------------
DANN ALLES in einem WEITEREN temporäres Verzeichnis für die  
img-web  Bilder wiederholen 
---------------------------------------------------------------

Punkte A1., A2., A3., 
A4. Alle speichern mit
     Bilder skaliern Breite 448 Pixel   und Auflösung 96 dpi  
     =========================================================
     dies liefert die kleineren     -web Bilder

B: Alle Namen der Bilder schreiben

Für den HTML-Quellcode werden alle Namen der Kamerabilder gebraucht. Sind diese Dateien in einem Verzeichnis, so können die Namen mit einer auführbaren Dateie dir.bat erstellt werden. Die Datei dir.bat wird in das Verzeichnis mit den Bildern kopiert und gestartet. dir.bat schreibt dann die Bildnamen in die Textdatei dir.txt dir.bat enthält

DIR /B /L /A-D *.* >dir.txt

C: HTML5 Quellcode erstellen

Zu C: In diese Seite werden die Bildnamen verwendet und der HTML5 Quellcode erstellt. Der Erstellungsvorgang erfolg mit 4. Erstelle HTML5-Quelltext aus Folge von Bildnamen.
Natürlich sind vorher die Bilder-Namen von dir.txt in das Eingabefeld unter 3. Bildnamen ( je Zeile ein Bildname ) zu kopieren.

D: -web-Klick öffnet -big-Bild

Die erzeugte HTML5-Seite kommt in ein Verzeichnis my_ordner. Wird auf der erzeugte HTML5-Seite auf ein kleines Bild geklickt, so wird die die Seite center-big.htm mit Hilfe von window.open(center_big_htm + '?' + bild_into, dst_frame) aufgerufen. Die url wird der center-big.htm Seite per GET übergeben. Das ausgewählte Bild wird in center-big.htm goß und zentriert angezeigt.