Die Weiterverarbeitung im ePub-Dokument

(Auszug aus "ePub für (In)Designer — Mit InDesign Schritt für Schritt zum E-Book" von Sascha Heck & Yves Apel)

Wie auch schon bei anderen Arbeitsschritten entpacken Sie die ePub-Datei oder öffnen sie direkt mit Sigil oder einem anderen Editor, der diese Funktion unterstützt. Öffnen Sie das Kapitel mit dem Bildraster und suchen Sie nach dem Code der Bilder.

<p class="Text"><img class="image" width="32%" src="images/IMG_1137_fmt.png" alt="IMG_1137.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1138_fmt.png" alt="IMG_1138.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1141_fmt.png" alt="IMG_1141.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1154_fmt.png" alt="IMG_1154.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1159_fmt.png" alt="IMG_1159.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1160_fmt.png" alt="IMG_1160.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1247_fmt.png" alt="IMG_1247.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1249_fmt.png" alt="IMG_1249.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1312_fmt.png" alt="IMG_1312.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1368_fmt.png" alt="IMG_1368.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1393_fmt.png" alt="IMG_1393.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1410_fmt.png" alt="IMG_1410.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1418_fmt.png" alt="IMG_1418.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1423_fmt.png" alt="IMG_1423.JPG"/></p>
<p class="Text"><img class="image" width="32%" src="images/IMG_1439_fmt.png" alt="IMG_1439.JPG"/></p>

Um den Bildraster zu erzeugen, muss dieser Bildercode gesäubert und verändert werden.

Schritt 1: Unnötige Elemente entfernen

Die Bilder sind mit dem Element <p> umschlossen, das entfernt werden kann.

<img class="image" width="32%"src="images/IMG_1137_fmt.png" alt="IMG_1137.JPG"/>
<img class="image" width="32%"src="images/IMG_1138_fmt.png" alt="IMG_1138.JPG"/>
<img class="image" width="32%"src="images/IMG_1141_fmt.png" alt="IMG_1141.JPG"/>
<img class="image" width="32%"src="images/IMG_1154_fmt.png" alt="IMG_1154.JPG"/>
<img class="image" width="32%"src="images/IMG_1159_fmt.png" alt="IMG_1159.JPG"/>
<img class="image" width="32%"src="images/IMG_1160_fmt.png" alt="IMG_1160.JPG"/>
<img class="image" width="32%"src="images/IMG_1247_fmt.png" alt="IMG_1247.JPG"/>
<img class="image" width="32%"src="images/IMG_1249_fmt.png" alt="IMG_1249.JPG"/>
<img class="image" width="32%"src="images/IMG_1312_fmt.png" alt="IMG_1312.JPG"/>
<img class="image" width="32%"src="images/IMG_1368_fmt.png" alt="IMG_1368.JPG"/>
<img class="image" width="32%"src="images/IMG_1393_fmt.png" alt="IMG_1393.JPG"/>
<img class="image" width="32%"src="images/IMG_1410_fmt.png" alt="IMG_1410.JPG"/>
<img class="image" width="32%"src="images/IMG_1418_fmt.png" alt="IMG_1418.JPG"/>
<img class="image" width="32%"src="images/IMG_1423_fmt.png" alt="IMG_1423.JPG"/>
<img class="image" width="32%"src="images/IMG_1439_fmt.png" alt="IMG_1439.JPG"/>

Schritt 2: Den Bildcode abändern

Auch im Bildcode sind noch zu viele Informationen enthalten, denn die Klasse und die Breitenangaben können dort entfernt werden. Merken Sie sich jedoch den Wert bei der Breitenangabe, da Sie diesen Prozentsatz später noch brauchen.

<img src="images/IMG_1137_fmt.png" alt="IMG_1137.JPG"/>
<img src="images/IMG_1138_fmt.png" alt="IMG_1141.JPG"/>
<img src="images/IMG_1154_fmt.png" alt="IMG_1154.JPG"/>
<img src="images/IMG_1159_fmt.png" alt="IMG_1159.JPG"/>
<img src="images/IMG_1160_fmt.png" alt="IMG_1160.JPG"/>
<img src="images/IMG_1247_fmt.png" alt="IMG_1247.JPG"/>
<img src="images/IMG_1249_fmt.png" alt="IMG_1249.JPG"/>
<img src="images/IMG_1312_fmt.png" alt="IMG_1312.JPG"/>
<img src="images/IMG_1368_fmt.png" alt="IMG_1368.JPG"/>
<img src="images/IMG_1393_fmt.png" alt="IMG_1393.JPG"/>
<img src="images/IMG_1410_fmt.png" alt="IMG_1410.JPG"/>
<img src="images/IMG_1418_fmt.png" alt="IMG_1418.JPG"/>
<img src="images/IMG_1423_fmt.png" alt="IMG_1423.JPG"/>
<img src="images/IMG_1439_fmt.png" alt="IMG_1439.JPG"/>

Schritt 3: Container erstellen

Der Speicherort der Bilder ist jetzt definiert, doch ähnlich wie in InDesign müssen die Bilder in einen Rahmen eingesetzt werden. Dafür muss für jedes einzelne das Element <div> erstellt werden. Die genaue Angabe lautet <div class="[beliebiger Name]"> und wird vor den Bildcode eingefügt. In HTML muss jedes angefangene Tag auch wieder geschlossen werden. In dem Fall haben Sie das Element <div> geöffnet und müssen es wieder schließen, indem am Ende des jeweiligen Bildes </div> eingefügt wird. Seine Eigenschaften werden später in der CSS-Datei definiert.

<div class="bildraster"><img src="images/IMG_1137_fmt.png" alt="IMG_1137.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1138_fmt.png" alt="IMG_1138.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1141_fmt.png" alt="IMG_1141.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1154_fmt.png" alt="IMG_1154.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1159_fmt.png" alt="IMG_1159.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1160_fmt.png" alt="IMG_1160.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1247_fmt.png" alt="IMG_1247.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1249_fmt.png" alt="IMG_1249.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1312_fmt.png" alt="IMG_1312.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1368_fmt.png" alt="IMG_1368.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1393_fmt.png" alt="IMG_1393.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1410_fmt.png" alt="IMG_1410.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1418_fmt.png" alt="IMG_1418.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1423_fmt.png" alt="IMG_1423.JPG"/></div>
<div class="bildraster"><img src="images/IMG_1439_fmt.png" alt="IMG_1439.JPG"/></div>

Schritt 4: Bilder in HTML gruppieren

Bildverknüpfungen und Rahmen sind angelegt und müssen gruppiert werden, damit das Lesegerät auch weiß, dass diese Bilder zusammengehören und nicht getrennt werden sollen. Wie im Schritt zuvor wird auch hier ein Element angelegt, das alle Bilder umschließt. Der Name ist wieder beliebig. Diesmal wird das Element aber nicht vor jedem Bild eingefügt, sondern nur vor dem ersten Bild. Der Code sieht dann wie folgt aus:

<div class="bildgruppe">
   <div class="bildraster"><img src="images/IMG_1137_fmt.png" alt="IMG_1137.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1138_fmt.png" alt="IMG_1138.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1141_fmt.png" alt="IMG_1141.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1154_fmt.png" alt="IMG_1154.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1159_fmt.png" alt="IMG_1159.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1160_fmt.png" alt="IMG_1160.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1247_fmt.png" alt="IMG_1247.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1249_fmt.png" alt="IMG_1249.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1312_fmt.png" alt="IMG_1312.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1368_fmt.png" alt="IMG_1368.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1393_fmt.png" alt="IMG_1393.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1410_fmt.png" alt="IMG_1410.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1418_fmt.png" alt="IMG_1418.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1423_fmt.png" alt="IMG_1423.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1439_fmt.png" alt="IMG_1439.JPG"/></div>
</div>

Schritt 5: Zeilen festlegen

Im Beispiel wurden fünf Zeilen zu je drei Bildern angelegt. Die Zeilenschaltungen fehlen noch im HTML und müssen manuell angelegt werden. Dafür benötigen wir den Code <br />, der durch das »/« sowohl Anfangs- als auch Endcode ist. <br /> wird am Ende jedes dritten Bildes (da drei Bilder pro Reihe) eingefügt.

<div class="bildgruppe">
   <div class="bildraster"><img src="images/IMG_1137_fmt.png" alt="IMG_1137.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1138_fmt.png" alt="IMG_1138.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1141_fmt.png" alt="IMG_1141.JPG"/></div><br />
   <div class="bildraster"><img src="images/IMG_1154_fmt.png" alt="IMG_1154.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1159_fmt.png" alt="IMG_1159.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1160_fmt.png" alt="IMG_1160.JPG"/></div><br />
   <div class="bildraster"><img src="images/IMG_1247_fmt.png" alt="IMG_1247.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1249_fmt.png" alt="IMG_1249.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1312_fmt.png" alt="IMG_1312.JPG"/></div><br />
   <div class="bildraster"><img src="images/IMG_1368_fmt.png" alt="IMG_1368.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1393_fmt.png" alt="IMG_1393.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1410_fmt.png" alt="IMG_1410.JPG"/></div><br />
   <div class="bildraster"><img src="images/IMG_1418_fmt.png" alt="IMG_1418.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1423_fmt.png" alt="IMG_1423.JPG"/></div>
   <div class="bildraster"><img src="images/IMG_1439_fmt.png" alt="IMG_1439.JPG"/></div><br />
</div>

Schritt 6: Anlegen der Definitionen für die »Bildrahmen«

Wechseln Sie mit Ihrem Editor zur template.css-Datei. Sie haben für jedes Bild einen Rahmen angelegt und in einer Gruppe definiert. Sie benötigen also zwei Definitionen. Gehen Sie zum Ende der CSS-Datei und geben dort einen »Punkt« (.), gefolgt von dem gewählten Namen, gefolgt von {} für jede Definition ein.

.bildgruppe {
}
.bildraster {
}

Schritt 7: Eigenschaften festlegen

Legen Sie folgende Eigenschaften für beide Definitionen an:

/* Befehl, um die Eigenschaften der Bildgruppierung zu definieren */
  .bildgruppe {
    page-break-inside: avoid; /* Gruppiert Bilder zusammen */
  }

/* Befehl, um die Eigenschaften der Bilderrahmen zu definieren */
  .bildraster {
    width: 32% !important; /* Verkleinert die Bilder auf 32% */
    padding: 0px 0px 12px 0px; /* Erstellt 12 px Abstand unter jedem Bild */
    display: inline-block; /* Ermöglicht mehrere Bilder in einer Zeile */
  }
Darstellung des Bildrasters in iBooksAbbildung: Darstellung des Bildrasters in iBooks.
Click-Vergrößerung in iBooks Abbildung: Indem Sie in iBooks doppelt mit dem Finger auf ein Bild tippen, können die Leser das Bild einzeln vergrößern und im Detail anschauen.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema ePub & InDesign bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © dpunkt.verlag GmbH 2012
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "ePub für (In)Designer" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Wieblinger Weg 17, 69123 Heidelberg, fon 06221-14830, fax 06221-148399, hallo(at)dpunkt.de