Exportieren von Inhalt in HTML | CS6 & CS5.5

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

InDesign exportiert keine von Ihnen gezeichneten Objekte (wie z. B. Rechtecke, Ovale und Polygone), keine Hyperlinks (abgesehen von Hyperlinks, die auf Web-Seiten und Textanker im Dokument verweisen), keine eingefügten Objekte (einschließlich eingefügte Illustrator-Bilder), 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).

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“).

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

Allgemeine Optionen

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

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

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.

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.

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.

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

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

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

Startet den Browser, sofern vorhanden.

Bildoptionen

Gibt an, wie Bilder in HTML exportiert werden.

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

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

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.

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 E-Book-Geräte) und 300.

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.

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

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

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.

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.

Erweiterte Optionen

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

Cascading Style Sheets (CSS) sind gesammelte Formatierungsregeln, die das Aussehen 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.

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.

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

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.

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

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.

Ähnliche Themen

Erstellen und veröffentlichen Sie E-Books, Broschüren, Flyer, Postkarten, Poster, interaktive Seitenlayouts und mehr mit Adobe InDesign.