Hilfe, ich habe weder die Konturenführung noch das Objektformat erstellt!

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

Sie befinden sich in der Situation, dass Sie die finale ePub-Datei bereitgestellt haben? Sie haben bereits etliche Änderungen im HTML- und CSS-Code der ePub-Datei vorgenommen, aber die Konturenführung und die Objektformate für die Bilder vergessen? Wie schon in einem berühmten Roman können wir Ihnen auch hier nur raten:

Don't panic

Abbildung: Don't panic.

Sie werden wohl ein ähnliches Bild wie das folgende vor sich sehen:

Konturenführung und Objektformate für Bild vergessen

Abbildung: Ausgangssituation für Konturenführung und Objektformate für die Bilder vergessen.

Öffnen Sie die betreffende HTML-Datei mit einem Editor und suchen Sie die Codestelle, die mit <div class="group"> anfängt.

<div class="group">
   <div class="image">
      <p class="para-style-override-2"><img width="109" height="204" src="images/125px-Katana-_Klinge_fmt.jpeg" alt="125px-Katana-_Klinge.jpg"/></p>
   </div>
   <div class="story">
      <p class="impressum para-style-override-3"><span>Querschnitt durch die Klinge eines Katana.</span></p>
   </div>
</div>

Ändern Sie das Wort »group« in der ersten Zeile in ein beliebiges Wort Ihrer Wahl, z.B. <div class="umfliessen">.

<div class="umfliessen">
   <div class="image">
      <p class="para-style-override-2"><img width="109" height="204" src="images/125px-Katana-_Klinge_fmt.jpeg" alt="125px-Katana-_Klinge.jpg"/></p>
   </div>
   <div class="story">
      <p class="impressum para-style-override-3"><span>Querschnitt durch die Klinge eines Katana.</span></p>
   </div>
</div>

Wechseln Sie mit dem Editor zur CSS-Datei (template.CSS) und fügen Sie dort ganz zum Schluss folgende Codezeilen hinzu:

div.umfliessen {
  float: left;
  width: 150px;
  margin: 3px 12px 12px 0;
}

wobei der Code float: left; oder float: right; die Position des Bildes auf der linken oder rechten Seite angibt. Hinter dem »div« muss Ihr frei gewählter Name stehen.

Das war’s dann auch schon und es genügt, in jeder HTML-Datei die Zeile bei jedem Bild in <div class="umfliessen"> zu ändern.

  

<< 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