Exportieren von Inhalt in HTML

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.

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 Web-Seiten verweisende Hyperlinks. Tabellen können auch als HTML-Datei exportiert werden. InDesign behält die Formatierung, wie Tabellen- und Zellenkonturen, bei. Tabellen erhalten eindeutige IDs und können in Dreamweaver als Spry-Datensätze referenziert werden. Platzierte Audiodateien und h.264-Videodateien sind durch die HTML5-Tags <audio> und <video> gekennzeichnet. InDesign exportiert auch gezeichnete Objekte (z. B. Rechtecke, Ovale und Polygone), eingefügte Objekte (darunter eingefügte Illustrator-Bilder) und in Pfade konvertierten Text.

Was wird nicht exportiert?

InDesign exportiert keine Hyperlinks (abgesehen von Links, die auf Web-Seiten und Textanker im Dokument verweisen), keine XML-Tags, Bücher, Lesezeichen, SING-Glyphen, Seitenübergänge, Indexmarken, Objekte auf der Montagefläche, die nicht ausgewählt wurden und nicht die Seite berühren, oder Musterseitenobjekte (es sei denn, diese wurden überschrieben oder vor dem Export ausgewählt).

Exportieren in HTML

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.

Allgemein

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 überschrieben wurden, und Seitenobjekte auf ausgeblendeten Ebenen. XML-Tags sowie generierte Indizes und Inhaltsverzeichnisse werden ebenfalls ignoriert.

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 „Basierend auf Seitenlayout“ ausgewählt ist, bestimmt InDesign die Lesereihenfolge von Seitenobjekten anhand der Bindung des Dokuments (von links nach rechts oder von rechts nach links).

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-Export-Reihenfolge 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 beim Export nicht 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.

Wählen Sie die Formatierungsoptionen für Aufzählungszeichen und Nummerierung aus.

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 formatiert sind. Wählen Sie „In Text umwandeln“, wenn Sie Aufzählungszeichen unter Verwendung des Tags als Text formatieren möchten. Falls Sie die automatischen Aufzählungszeichen von InDesign verwendet haben, werden untergeordnete Aufzählungszeichen ebenfalls berücksichtigt.

Nummern: 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 formatiert sind.

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

Startet den Browser, sofern vorhanden.

Bild

Gibt an, wie Bilder in HTML exportiert werden.

Original: Exportiert das Originalbild in den Unterordner <document_name>-web-images. 

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.

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

Wählen Sie die Auflösung der Bilder in Pixel pro Zoll (ppi – Pixels per Inch). 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 wählen. Zur Auswahl stehen die Werte 72, 96, 150 (Mittelwert für alle modernen E-Book-Geräte) und 300.

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

Geben Sie die Bildausrichtung an: links, zentriert oder rechts. Sie können auch einen oberen und unteren Abstand angeben.

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 von PNG werden die Einstellungen für die Bildkomprimierung deaktiviert.Verwenden Sie PNG für verlustfreie Bilder oder Bilder mit Transparenz.

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

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.

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.

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

Erweitert

Legen Sie im Bereich Erweitert CSS- und JavaScript-Optionen fest. Cascading Stylesheets (CSS) sind eine Sammlung von Formatierungsregeln, die das Aussehen des Inhalts auf einer Web-Seite 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 Web-Seite steuern.

Wählen Sie diese Option, wenn Klassen im HTML nicht mit aufgenommen werden sollen. Damit werden die Klassen und id -Attribute im Tag beim HTML-Export entfernt. Alle redundanten div-Tags im HTML-Code werden ebenfalls entfernt.

Wählen Sie diese Option, wenn Klassen in HTML mit eingeschlossen werden sollen.

CSS generieren: Geben Sie an, ob InDesign ein CSS für die exportierte Datei generieren soll. Wenn Sie die Option „CSS generieren“ auswählen, können Sie auch die Option „Lokale Abweichungen beibehalten“ auswählen, um auch lokale Formatierungen wie kursiv oder fett einzuschließen.

Lokale Abweichungen beibehalten: Schließt lokale Formatierungen wie „Fett“ oder „Kursiv“ mit ein.

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. Sie können Dreamweaver verwenden, um die externe CSS-Einrichtung zu bestätigen.

Wählen Sie Skript hinzufügen aus, um ein JavaScript auszuführen, wenn die HTML-Seite geöffnet wird. In InDesign wird nicht überprüft, ob das JavaScript vorhanden oder gültig ist.