Das Exportieren in HTML ist eine einfache Möglichkeit, InDesign-Inhalte in eine internetfähige Form zu bringen. Wenn Sie Inhalte als HTML exportieren, können Sie steuern, wie Text und Bilder exportiert werden. Die Namen von Absatz-, Zeichen-, Objekt-, Tabellen- und Zellenformaten aus InDesign, die auf die exportierten Inhalte angewendet wurden, werden übernommen. Die HTML-Inhalte werden mit gleichnamigen CSS-Formatklassen gekennzeichnet. Mithilfe von Adobe Dreamweaver oder einem anderen CSS-fähigen HTML-Editor können Sie mühelos Formatierungen und Layouts auf Inhalte anwenden.

Was wird exportiert?

InDesign exportiert alle Textabschnitte, verknüpfte und eingebettete Bilder, SWF-Filmdateien, Fußnoten, Textvariablen (als Text), Aufzählungs- und nummerierte Listen, interne Querverweise sowie auf Text und Webseiten verweisende Hyperlinks. Tabellen werden ebenfalls exportiert, bestimmte Formatierungen, wie z. B. Tabellen- und Zellkonturen, werden jedoch nicht exportiert. Tabellen erhalten eindeutige IDs, sodass sie in Dreamweaver als Spry-Datensätze referenziert werden können. Platzierte Audiodateien und h.264-Videodateien sind durch die HTML5-Tags <audio> und <video> gekennzeichnet.

Was wird nicht exportiert?

InDesign exportiert keine von Ihnen gezeichneten Objekte (wie z. B. Rechtecke, Ovale und Polygone), keine Hyperlinks (abgesehen von Hyperlinks, die auf Webseiten und Textanker im Dokument verweisen), keine eingefügten Objekte (einschließlich eingefügten Illustrator-Bildern), keinen in Pfade konvertierten Text, keine XML-Tags, Bücher, Lesezeichen, SING-Glyphen, Seitenübergänge, Indexmarken, Objekte auf der Montagefläche, die nicht ausgewählt wurden und die Seite nicht berühren, oder Musterseitenobjekte (es sei denn, diese wurden überschrieben oder vor dem Export ausgewählt).

  1. Wenn Sie nicht das gesamte Dokument exportieren möchten, wählen Sie die zu exportierenden Textrahmen, Textbereiche, Tabellenzellen oder Grafiken aus.
  2. Wählen Sie „Datei“ > „Exportieren“ und anschließend „HTML“ aus der Liste „Dateityp“ (Windows) bzw. „Format“ (Mac OS).
  3. Geben Sie einen Namen und Speicherort für das HTML-Dokument an und klicken Sie auf „Speichern“ (Windows) bzw. „Sichern“ (Mac OS).
  4. Legen Sie im Dialogfeld „HTML-Exportoptionen“ in den Bereichen „Allgemein“, „Bild“ und „Erweitert“ die gewünschten Optionen fest und klicken Sie dann auf „OK“.

Ein Dokument mit dem angegebenen Namen und der Erweiterung .html (z. B. „Newsletter.html“) wird erstellt. Sofern angegeben, wird an demselben Speicherort auch ein Unterordner mit Bildern für das Web angelegt (z. B. „Newsletter-web-images“).

HTML-Exportoptionen

Legen Sie im Dialogfeld „HTML“ die folgenden Optionen fest.

Allgemeine Optionen

Der Bereich „Allgemein“ enthält die folgenden Optionen:

Exportieren

Legt fest, ob nur die ausgewählten Objekte oder das gesamte Dokument exportiert werden sollen. Wenn ein Textrahmen ausgewählt ist, wird der gesamte Textabschnitt einschließlich Übersatztext exportiert.

Wenn die Option „Dokument“ ausgewählt ist, werden alle Seitenobjekte von allen Druckbögen exportiert, ausgenommen Musterseitenobjekte, die nicht übergangen wurden, und Seitenobjekte auf ausgeblendeten Ebenen. XML-Tags sowie generierte Indizes und Inhaltsverzeichnisse werden ebenfalls ignoriert.

Inhaltsreihenfolge/Sortieren

Mit dieser Option legen Sie die Leserichtung der Seitenobjekte fest.

Basierend auf Seitenlayout

Die Leserichtung ergibt sich aus der Anordnung der Elemente auf der Seite.

Wenn „Basierend auf Seitenlayout“ ausgewählt ist, bestimmt InDesign die Lesereihenfolge der Seitenobjekte, standardmäßig von links nach rechts und von oben nach unten. Manchmal werden die Design-Elemente nicht in der gewünschten Lesereihenfolge angezeigt – dies kann insbesondere bei komplexen Dokumenten mit mehreren Spalten vorkommen. Mit Dreamweaver können Sie Inhalte neu anordnen und formatieren.

(nur asiatische Versionen) Wenn „Auf Seitenlayout basieren“ ausgewählt ist, bestimmt InDesign die Lesereihenfolge von Seitenobjekten anhand der Bindung des Dokuments (von links nach rechts oder von rechts nach links). Manchmal werden die exportierten Design-Elemente nicht in der gewünschten Lesereihenfolge angezeigt – dies kann insbesondere bei komplexen Dokumenten mit mehreren Spalten vorkommen. Mit Dreamweaver können Sie Inhalte neu anordnen und formatieren.

Wie XML-Struktur

Wenn „Wie XML-Struktur“ ausgewählt ist, werden die Reihenfolge des exportierten Inhalts und der zu exportierende Inhalt über das XML-Strukturbedienfeld festgelegt. Wenn der Inhalt bereits über Tags verfügt, können Sie die Tags im XML-Strukturbedienfeld ziehen, um die XHTML-Exportreihenfolge festzulegen. Wenn der Inhalt über keine Tags verfügt, können Sie im Menü des Strukturbedienfelds die Option „Objekte ohne Tags hinzufügen“ auswählen, um Tags zu erstellen, deren Reihenfolge Sie neu sortieren können. Wenn ein Objekt nicht beim Export berücksichtigt werden soll, können Sie das Tag im XML-Strukturbedienfeld löschen. (Wenn Sie ein Tag löschen, wird nicht der Inhalt aus der INDD-Datei gelöscht.) Siehe Festlegen von Tags für Seitenobjekte.

Wie Artikelbedienfeld

Die Leserichtung ergibt sich aus der Reihenfolge der Elemente im Artikelbedienfeld. Nur die aktivierten Artikel werden exportiert. Siehe Einschließen von Artikeln beim Export.

Steg

Geben Sie einen einfachen Steg in Ems oder Pixeln an. Damit die Kompatibilität mit verschiedenen Bildschirmen gewährleistet ist, sollten Sie die Einheit „Ems“ verwenden. Der gleiche Wert wird auf alle vier Ränder (oben, unten, links, rechts) angewendet.

Aufzählungszeichen

Wählen Sie „Nicht sortierten Listen zuordnen“, wenn Sie Absätze mit Aufzählungszeichen in Listenelemente konvertieren möchten, die in HTML mit dem Tag <ul> formiert sind. Wählen Sie „In Text umwandeln“, wenn Sie Aufzählungszeichen unter Verwendung des Tags <p> als Text formatieren möchten. Falls Sie die automatischen Aufzählungszeichen von InDesign verwendet haben, werden untergeordnete Aufzählungszeichen ebenfalls berücksichtigt.

Nummerierung

Bestimmt, wie Nummern in der HTML-Datei konvertiert werden. Falls Sie die automatische Nummerierung von InDesign verwendet haben, werden untergeordnete Aufzählungszeichen ebenfalls berücksichtigt.

Sortierten Listen zuordnen

Konvertiert nummerierte Listen in Listenelemente, die in HTML mit dem Tag <ol> formatiert sind.

Statisch sortierten Listen zuordnen

Konvertiert nummerierte Listen in Listenelemente, weist jedoch basierend auf der aktuellen Nummer des Absatzes in InDesign ein Attribut <value> zu.

In Text konvertieren

Konvertiert nummerierte Listen in Absätze, die mit der aktuellen Absatznummer als Text beginnen.

HTML nach Export anzeigen

Startet den Browser, sofern vorhanden.

Bildoptionen

Bilder kopieren

Gibt an, wie Bilder in HTML exportiert werden.

Original

Exportiert das Originalbild in den Unterordner „<Dokumentname>-web-images“. Wenn Sie diese Option wählen, werden alle anderen Optionen abgeblendet.

Optimiert

Ermöglicht das Ändern von Einstellungen, um die Art und Weise des Bildexports festzulegen.

Mit Serverpfad verknüpfen

Wenn Sie diese Option wählen, werden Bilder nicht in einen Unterordner exportiert. Sie haben stattdessen die Möglichkeit, eine lokale URL (wie images/) einzugeben, die vor die Bilddatei gesetzt wird. Im HTML-Code zeigt das Link-Attribut den von Ihnen festgelegten Pfad und die Erweiterung an. Diese Option ist besonders effektiv, wenn Sie Bilder selbst in webkompatible Bilder konvertieren.

Aussehen aus Layout beibehalten

Aktivieren Sie diese Option, um die Bildobjektattribute aus dem Layout zu übernehmen.

Auflösung (ppi)

Geben Sie die Auflösung der Bilder in Pixel pro Zoll (ppi – Pixels per Inch) an. Bei Betriebssystemen liegt die Auflösung standardmäßig bei 72 ppi oder 96 ppi. Bei Mobilgeräten hingegen reicht sie von 132 ppi (iPad) über 172 ppi (Sony Reader) bis hin zu über 300 ppi (iPhone 4). Sie können für jedes ausgewählte Objekt einen eigenen Auflösungswert angeben. Zur Auswahl stehen die Werte 72, 96, 150 (Mittelwert für alle modernen eBook-Geräte) und 300.

Bildgröße

Geben Sie an, ob die Bildgröße einen festen Wert haben oder im Verhältnis zur Seite angepasst werden soll. Bei „Relativ zur Seite“ wird ein relativer Prozentwert festgelegt, der auf der Größe des Bildes im Verhältnis zur Breite der InDesign-Seite basiert. Bei Auswahl dieser Option werden die Bilder proportional und relativ zur Breite des Lesebereichs neu skaliert.

Bildausrichtung und -abstände

Geben Sie die Bildausrichtung (links, zentriert, rechts) sowie die Werte für „Abstand davor“ und „Abstand danach“ an.

Einstellungen gelten für verankerte Objekte

Aktivieren Sie diese Option, um diese Einstellungen auf alle verankerten Objekte anzuwenden.

Bildumwandlung

Lässt Sie wählen, ob die optimierten Bilder im Dokument in das GIF-, JPEG- oder PNG-Format umgewandelt werden. Wählen Sie „Automatisch“, wenn in InDesign automatisch entschieden werden soll, welches Format jeweils verwendet wird. Bei Auswahl des PNG-Formats werden die Einstellungen für die Bildkomprimierung deaktiviert.Verwenden Sie das PNG-Format für verlustfreie Bilder oder Bilder mit Transparenz.

GIF-Optionen (Palette)

Lässt Sie steuern, wie Farben beim Optimieren von GIF-Dateien in InDesign gehandhabt werden. Das GIF-Format hat eine reduzierte Farbpalette mit maximal 256 Farben.

Wählen Sie „Flexibel (ohne Dithering)“, um eine Farbpalette anhand einer repräsentativen Auswahl von Farben in der Grafik zu erstellen, und zwar ohne das so genannte Dithering (Mischen kleiner Farbpunkte zur Simulation zusätzlicher Farben). Wählen Sie „Web“, um eine Palette websicherer Farben zu erstellen, die eine Teilmenge der Windows- und Mac OS-Systemfarben bilden. Wählen Sie „System (Win)“ bzw. „System (Mac)“, um anhand der integrierten Farbpalette des Systems eine Palette zu erstellen. Bei Auswahl dieser Option kann es zu unerwarteten Ergebnissen kommen.

Aktivieren Sie „Interlace“, um die Bilder allmählich durch Füllen fehlender Zeilen zu laden. Wenn diese Option nicht aktiviert ist, wirkt das Bild zunächst verschwommen, wird aber langsam klarer, bis es die vollständige Auflösung erreicht.

JPEG-Optionen (Bildqualität)

Bestimmt, wie bei jedem erstellten JPEG-Bild zwischen Komprimierung (für kleinere Dateien) und Bildqualität abgewogen wird. Mit „Niedrig“ erstellen Sie kleine Dateien mit geringer Bildqualität.

JPEG-Optionen (Formatmethode)

Bestimmt, wie schnell JPEG-Grafiken angezeigt werden, wenn die Datei, die das Bild enthält, im Web geöffnet wird. Mit „Progressiv“ werden JPEG-Bilder beim Laden in einem Web-Browser allmählich und mit zunehmender Detailschärfe angezeigt. (Mit dieser Option erstellte Dateien sind etwas größer und benötigen bei der Anzeige mehr Arbeitsspeicher.) Wählen Sie „Standard“, damit jede JPEG-Datei erst nach dem vollständigen Laden angezeigt wird; vorher ist ein Platzhalter zu sehen.

Objektkonvertierungseinstellungen ignorieren

Ignoriert Objektexporteinstellungen, die auf einzelne Bilder angewendet wurden. Siehe Anwenden von Objektexportoptionen.

Erweiterte Optionen

Legen Sie im Bereich „Erweitert“ CSS- und JavaScript-Optionen fest.

CSS-Optionen

Cascading Style Sheets (CSS) sind gesammelte Formatierungsregeln, die das Aussehen einer Webseite bestimmen. Wenn Sie eine Seite unter Verwendung von CSS formatieren, trennen Sie den Inhalt von der Darstellung. Der Inhalt Ihrer Seite – also der HTML-Code – befindet sich in der HTML-Datei selbst. Die CSS-Regeln, aus denen sich die Präsentation des Codes ableitet, befinden sich in einer anderen Datei (in einem externen Stylesheet) oder im HTML-Dokument (normalerweise im Head-Abschnitt). Sie können beispielsweise unterschiedliche Schriftgrade für ausgewählten Text festlegen und mit CSS das Format und die Positionierung von Blockelementen auf einer Webseite steuern.

Eingebettetes CSS

Wenn Sie in XHTML exportieren, können Sie eine Liste von CSS-Stilen erstellen, die im Head-Abschnitt der HTML-Datei mit Deklarationen (Attributen) aufgeführt wird.

Wenn „Formatdefinitionen berücksichtigen“ ausgewählt ist, versucht InDesign, entsprechende CSS-Äquivalente für die Attribute der InDesign-Textformatierung zu finden. Wenn diese Option deaktiviert ist, enthält die HTML-Datei leere Deklarationen. Sie können diese Deklarationen später in Dreamweaver bearbeiten.

Wenn „Lokale Abweichungen beibehalten“ ausgewählt ist, werden lokale Formatierungen, wie Kursiv oder Fett, berücksichtigt.

Kein CSS

Wenn Sie diese Option auswählen, wird der CSS-Abschnitt aus der HTML-Datei übersprungen.

Externe CSS-Datei (CS5.5)

Geben Sie die URL des vorhandenen CSS-Stylesheets an. Normalerweise handelt es sich dabei um eine relative URL wie „/styles/style.css“. In InDesign wird nicht überprüft, ob das CSS vorhanden oder gültig ist, daher sollten Sie die Einstellungen zu einem externen CSS mit Dreamweaver prüfen.

Zusätzliche CSS-Datei (CS6)

Geben Sie CSS mithilfe der Schaltfläche „Stylesheet hinzufügen“ an.

JavaScript-Optionen

Wählen Sie „Mit externer JavaScript-Datei verknüpfen“, um ein JavaScript auszuführen, wenn die HTML-Seite geöffnet wird. Geben Sie die URL des JavaScripts an (in der Regel handelt es sich um eine relative URL). In InDesign wird nicht überprüft, ob das JavaScript vorhanden oder gültig ist.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie