Adobe GoLive CS2Webseiten entwickeln mit HTML, CSS, JavaScript, PHP und MySQL

Christian Fleischhauer Helmut Vonhoegen

21

22

23

24

25

26

27

28

29

30

31

32

33

A

B

C

D

�2 Import aus InDesign-Paketen

Die Adobe Creative Suite umfasst Programme für Print- bis Webde-sign. Jede Software arbeitet dabei nicht nur für sich, sondern kann auch den anderen Programmen Daten übergeben und aus der An-wendung heraus öffnen. In einem guten Corporate Design oder einer Kampagne ist ein konsistentes Design äußerst wichtig. Warum also nicht ausgefeilte Printdesigns gleich auf die Website überführen und dort anpassen? Mit InDesign und GoLive ist das möglich. Die Tech-nologie heißt InDesign-Pakete und gleicht den Smart Objects.

Layout ist Layout | Nahezu jedes professionell layoutete Print-Do-kument ist zuvor mit einem richtigen Satzprogramm erstellt worden. Da Adobe mit InDesign CS2 und GoLive CS2 sowohl den Print- als auch den Webbereich mit leistungsfähigen professionellen Lö-sungen abdeckt, liegt es nahe, den Weg zwischen beiden Bereichen abzukürzen und die Daten vom Printdesign direkt ins Webdesign zu übernehmen. Wenn Sie die komplette Creative Suite 2 besitzen, ha-ben Sie höchstwahrscheinlich beide Anwendungen bereits auf Ihrem Rechner installiert.

Vom Print- zum Webdesign | Eine solche Kopplung von Printde-sign und Webdesign ermöglicht offensichtlich erhebliche Synergie-effekte. So können Bilder und Texte, die für ein Printprojekt erstellt oder erfasst wurden, gleichzeitig für ein parallel laufendes Webpro-jekt genutzt werden. Änderungen am Datenbestand des Printpro-jekts, ob bei Abbildungen oder in Texten, sollten sich idealerweise ohne großen Aufwand auf das gleichzeitig bearbeitete Webprojekt übertragen lassen. Lediglich die webspezifische Aufbereitung des An-gebots muss noch in GoLive CS2 erfolgen.

Über InDesign-Pakete finden Sie auch eine Video-Lektion auf der Buch-DVD (Trainerin: Petra Rudolph).

Über InDesign-Pakete finden Sie auch eine Video-Lektion auf der Buch-DVD (Trainerin: Petra Rudolph).

Import aus InDesign-Paketen ���

��� Import aus InDesign-Paketen

InDesign-Pakete für GoLive | Alles dies und noch ein bisschen mehr leistet das Konzept der InDesign-Pakete für GoLive. In einem solchen Paket werden alle Elemente des InDesign-Projekts in »trans-portabler« Form verpackt, sodass einerseits GoLive die Assets leicht übernehmen kann, andererseits die Arbeit und das Know-how des Printdesigners geschützt bleiben. Die Arbeit des Webdesigners lässt sich ja prinzipbedingt nicht gegen die neugierigen Augen anderer schützen. Leider lassen sich Änderungen in einem Paket noch nicht wieder zurück in das zugehörige InDesign-Projekt übernehmen, so-dass der Weg von InDesign zu GoLive im Augenblick noch eine Ein-bahnstraße darstellt.

�2.1 InDesign-Paket erstellen

Verpacken für GoLive ermöglicht also die medienübergreifende Nutzung und Webveröffentlichung von Dokumenten. Bei Grafiken ist dieser Ansatz natürlich leistungsfähiger als der PDF-Import, da die Grafik in voller Qualität zur Verfügung steht und nicht, wie beim Im-port via PDF, zwischendurch möglicherweise auf eine festgelegte Auf-lösung heruntergerechnet wurde. Anders als bei PDF-Bildern können Absender und Empfänger den Prozess genau steuern und Grafiken etwa im Ausgangsformat und gleichzeitig mit eventuellen Beschnei-dungspfaden formatiert zur Verfügung stellen. Text aus InDesign-Pa-keten wird anders als beim Transport über Smart-PDF-Objects auch als Text übernommen. InDesign-Formate werden dabei automatisch in CSS-Stilvorlagen umgewandelt und können in GoLive an die Be-dürfnisse der Darstellung im Web angepasst werden. Da alle Assets im Paket als einzelne Objekte vorliegen, werden auch Probleme wie etwa die Überdeckung verschiedener Seitenelemente vermieden.

InDesign-Datei für GoLive verpacken | Um ein (geöffnetes) InDe-sign-Dokument für GoLive zu verpacken, wählen Sie in InDesign den Menübefehl Datei • Für GoLive verpacken. Die Details des Vorgangs steuern Sie über den Dialog Für GoLive verpacken. Hier können Sie festlegen, ob Zeichen im UTF-8 oder im UTF-16 kodiert werden sollen. Mit einem Markierungskästchen können Sie festle-gen, ob das Paket nach der Erstellung direkt in GoLive angezeigt werden soll. Sie können außerdem festlegen, ob die Originalbilder

21

22

23

24

25

26

27

28

29

30

31

32

33

A

B

C

D

und die formatierten – beispielsweise fürs Web optimierten – Bilder in das Paket mit eingefügt werden sollen. Es können also verschie-dene Varianten eines Bildes in das Paket gepackt werden. In GoLive haben Sie dann die Wahl, welche Version Sie verwenden wollen. Mit Verpacken wird schließlich die Operation gestartet.

InDesign-Paket erzeugen | Nach endlicher Zeit hat InDesign CS2 das Paket für GoLive erstellt. Dabei wird als Vorgabe eine Datei package.idpk und eine Datei package.pdf in dem angegebenen Ord-ner erzeugt. Alle Assets werden in einem Ordner Assets getrennt nach Images und Stories gespeichert. Die Dateien mit Namen story... (und dann immer der Endung incd) enthalten jeweils einen Textar-tikel im XML-Format. Die Bilder befinden sich im Ordner Images, wobei für jedes Bild ein eigener Unterordner vorhanden ist, der sei-nerseits je nach verwendeten Exportoptionen ein bis drei verschie-dene Versionen des Bildes enthalten kann.

F Abbildung �2.1 Der Dialog Für GoLive verpacken in InDesign

F Abbildung �2.1 Der Dialog Für GoLive verpacken in InDesign

F Abbildung �2.2 Fortschrittsanzeige beim Packen eines InDesign-Pakets für GoLive

F Abbildung �2.2 Fortschrittsanzeige beim Packen eines InDesign-Pakets für GoLive

InDesign-Paket erstellen ���

��0 Import aus InDesign-Paketen

Paket in GoLive-Vorschau | In dem Fenster des Pakets stehen im Register InDesign-Layout die verschiedenen Seiten zur Verfügung und lassen sich mit den Steuerelementen in der Statusleiste ansteu-ern.

Die Assets aus dem Paket | Auf dem Assets-Register werden die jeweiligen Ressourcen in einer Ordneransicht angeboten. Über den Inspektor lassen sich die Konvertierungseinstellungen prüfen.

Abbildung �2.� Das Register InDesign-Layout in GoLive CS2

Abbildung �2.� Das Register InDesign-Layout in GoLive CS2

Abbildung �2.� Assets aus dem InDesign-Paket im Register in GoLive

Abbildung �2.� Assets aus dem InDesign-Paket im Register in GoLive

21

22

23

24

25

26

27

28

29

30

31

32

33

A

B

C

D

�2.2 Eigenständiges InDesign-Paket verwenden

Wenn Sie ein Paket für GoLive in InDesign erzeugt und im InDesign-Dialog Für GoLive verpacken die Option Paket nach Fertigstel-lung anzeigen gewählt haben, wird das Paket nach dem Export au-tomatisch in GoLive angeboten. Ist das nicht der Fall, können Sie das Paket von GoLive aus selbst öffnen. Auf der Buch-CD finden Sie das InDesign-Paket mit dem Beispiel im Ordner »indesign2«.

Paket importieren | Um ein InDesign-Paket als eigenständiges In-Design-Paket zu öffnen (also nicht schon als Teil einer Site), wäh-len Sie in GoLive CS2 den Menübefehl Datei • Importieren • Aus InDesign. Wählen Sie den entsprechenden Ordner und darin die Paket-Datei .idpk. Falls Sie eine GoLive-Site-Datei geöffnet haben, fragt GoLive auch, ob es den Ordner in die Site übernehmen soll. Für den Moment soll es aber genügen, mit dem Paket direkt zu arbeiten; die Arbeit mit Paketen erzwingt durchaus nicht die Verwendung der Site-Verwaltung.

Das Paket in GoLive | Das Paketfenster dient der Anzeige der As-sets, der Navigation im Paket und erlaubt eine Vorschau auf die zu erwartende HTML-Seite. Das Register InDesign-Layout gibt im We-sentlichen den Inhalt des oben angesprochenen PDF-Dokuments wieder, allerdings mit zusätzlicher Funktionalität, die das Auswählen und Verwenden der Assets erleichtert. Die Ansicht Assets dagegen listet ähnlich der Bibliothekspalette alle Assets, geordnet nach dem Medientyp, auf.

Assets aufspüren | Die einfachste Möglichkeit, ein bestimmtes As-set aufzuspüren, besteht darin, einfach im Paketfenster zu blättern. Dazu stehen die Navigationselemente am unteren Rand des Paket-fensters zur Verfügung. Diesmal sind die bekannten Navigationsele-mente Erste Seite, Vorherige Seite, Seitennummer, Nächste Seite und Letzte Seite unten rechts am Paketfenster angeordnet. Links da-neben finden Sie die recht häufig gebrauchten Steuerungselemente zur Veränderung der Vergrößerungsstufe.

Eigenständiges InDesign-Paket verwenden ��1

��2 Import aus InDesign-Paketen

Seitenelemente mit Tags markieren | Über die Palette Ansicht kann noch die Option Seitenelemente mit Tags markieren akti-viert werden. Dies bewirkt, dass alle Elemente, die in InDesign mit Tags ausgezeichnet wurden, aktiviert werden.

Schritt für Schritt: Verwenden von InDesign-Assets in einer Webseite

Soll nur auf die Schnelle ein Asset aus einem InDesign-Paket in eine Webseite übernommen werden, von dem auch nicht zu erwarten steht, dass es später in InDesign aktualisiert wird, ist es nicht nötig, das komplette Paket in eine entsprechende Site zu übernehmen. Wie einfach ein solches Paket zu verwenden ist, zeigt die folgende Schritt-für-Schritt-Anleitung.

1 VorbereitungenÖffnen Sie eine neue HTML-Seite und speichern Sie sie unter einem eigenen Namen, etwa InDesign Import.html. Setzen Sie im Seiten-inspektor die Randstärke auf »O«. Öffnen Sie das gewünschte InDesign-Paket mit dem Menübefehl Datei • Importieren • Aus InDesign.

2 Textelement auswählenNavigieren Sie im Paketfenster auf die gewünschte Seite und klicken Sie auf den Textabschnitt, der übernommen werden soll.

Abbildung �2.� Ansichtsoption für ein Paket

Abbildung �2.� Ansichtsoption für ein Paket

21

22

23

24

25

26

27

28

29

30

31

32

33

A

B

C

D

3 Einstellungen für die Konvertierung wählenBei der Übernahme von Texten oder Tabellen in eine Webseite kann dann über den Asset-Konvertierungseinstellungen-Inspektor unter Einfügen als gewählt werden, ob die Elemente als Bearbeit-barer Text, als Smart-Komponete oder als Snapshot-Bild über-nommen werden sollen. Die erste Option erlaubt es, mit dem über-nommenen Text wie gewohnt in HTML zu verfahren. Dabei wird aber die Verbindung zur Datenquelle gekappt.

Smart-Komponenten funktionieren wie andere GoLive-Kompo-nenten, sie halten also eine Verbindung zur Quelle des Elements aufrecht. Zur Bearbeitung müssen die XML-Editor-Funktionen von GoLive genutzt werden. Snapshot-Bilder fügen das Element als Smart PDF-Objekt ein.

Die in InDesign verwendeten Textformatierungen können auto-matisch in CSS-Stile umgewandelt werden, die sich dann wie ge-wohnt mit dem CSS-Editor bearbeiten lassen. Dazu muss nur die Option CSS-Stile verwenden aktiviert werden.

4 Textelement in Website übernehmenZiehen Sie das Textelement aus der Paketvorschau in die Layout-An-sicht Ihrer HTML-Seite. Es folgen die üblichen Dialoge und Abfragen beim Anlegen eines neuen Smart Object. Beim ersten Element muss der Speicherort des Zubehörordners angegeben werden, der die web-optimierten CSS- und Mediendateien enthält.

Eigenständiges InDesign-Paket verwenden ���

��� Import aus InDesign-Paketen

5 Bild einfügenUm ein Bild zu übernehmen, wird ähnlich verfahren. Zunächst wird das Bild im Paket-Fenster markiert und über den Inspektor die ge-wünschte Einstellung für die Übernahme gewählt. Sollen Bildobjekte aus einem Paket übernommen werden, geschieht dies in Form von Smart Objects. Im Asset-Konvertierungseinstellungen-Inspektor kann über die Option Bild mit InDesign-Formatierung verwen-den, gewährleistet werden, dass die dort gewählten Eigenschaften übernommen werden. Unter Web-Format lassen sich zahlreiche Va-rianten für das Bildformat, das für das Bild auf der Webseite verwen-det werden soll, auswählen.

Umgang mit Stylesheets | Bei der Übernahme von Texten kann im Inspektor gewählt werden, in welcher Weise CSS genutzt werden soll. Unter Definition können Sie wählen zwischen Ohne, Inter-nes CSS und Externes CSS. Bei Internes CSS werden die Stildefini-tionen direkt in den Kopfbereich der HTML-Seite geschrieben. Wenn Sie Externes CSS angeben, können Sie im Feld Referenz einen Link für ein externes Stylesheet eintragen, mit dem Sie das Erscheinungs-bild der importierten Daten einheitlich für die gesamte Webseite bzw. für alle Seiten, die dieses Stylesheet benutzen, steuern kön-nen. Die Namen der CSS-Stile werden jeweils aus den im InDesign-Paket gespeicherten Stilen übernommen, ihr Erscheinungsbild aber im CSS-Editor auf die Erfordernisse der Darstellung im Web abge-stimmt.

�2.� InDesign-Paket importieren

Der Import eines InDesign-Pakets in eine GoLive-Website unter-scheidet sich wenig vom Import als eigenständiges Paket. Der we-sentliche Unterschied besteht darin, dass Sie die Site-Datei, in die Sie das Paket übernehmen wollen, geöffnet haben müssen. Legen Sie also für die folgenden Beispiele eine neue leere Site mit dem Namen »InDesign Demo« an. Mit dem Menübefehl Datei • Importieren • Aus InDesign öffnen Sie das gewünschte InDesign-Paket. Bestätigen Sie die folgenden Nachfragen.

21

22

23

24

25

26

27

28

29

30

31

32

33

A

B

C

D

Kopieren in Web-Data | Wenn Sie ein InDesign-Paket in Ihre Site kopieren, wird es nicht nur wie im letzten Abschnitt geöffnet, son-dern vollständig in den web-data-Ordner der Site kopiert. Dies wird auch, wie die Abbildung zeigt, auf dem Site-Register Extras unter InDesign-Pakete angezeigt.

Es ist damit Bestandteil der Site und alle enthaltenen Assets stehen dauerhaft zur Verfügung. Wenn sich später Inhalte oder Assets im ursprünglichen InDesign-Projekt ändern, muss das Paket lediglich in InDesign neu exportiert und in GoLive erneut importiert werden. Alle Smart Objects und verbundenen Inhalte werden dann automa-tisch von GoLive auf den neuen Stand gebracht.

Elemente aus Paketfenster ziehen | Gleichzeitig wird auch das Pa-ketfenster, wie oben schon beschrieben, zur Verfügung gestellt. Um ein Element in Ihre Webseite zu übernehmen, ziehen Sie es also wie oben bereits beschrieben aus dem Paketfenster in die Layout-An-sicht. Das Paketfenster kann über das Kontextmenü des Paketein-trags auf dem Extras-Register erneut geöffnet werden.

F Abbildung �2.� Abfrage vor dem Import in eine geöff-nete Website

F Abbildung �2.� Abfrage vor dem Import in eine geöff-nete Website

Abbildung �2.� Das importierte Paket wird im Register Extras angezeigt.

Abbildung �2.� Das importierte Paket wird im Register Extras angezeigt.

InDesign-Paket importieren ���

��� Import aus InDesign-Paketen

Auswahl überdeckter Objekte

Wenn im InDesign-Paket mehrere Objekte quasi wie ein Stapel übereinan-der liegen, kann es mitunter schwierig oder sogar unmöglich sein, das gewünschte Objekt mit der Maus auszuwählen. In diesem Fall hilft das Kon-textmenü weiter. Klicken Sie mit der rechten Maustaste ˇ bzw. mit gedrückter (Ctrl)-Taste ˛ eine geeignete Stelle in der Paketansicht an, so enthält das Kontextmenü unter dem Punkt Auswahl ein Untermenü mit allen Objekten, die an diesem Punkt übereinander liegen. Wählen Sie ein-fach das gewünschte Objekt aus.

�2.� Komponenten aus InDesign

Schaut man sich den Quellcode einer Seite an, in die eine Textkom-ponente eingefügt wurde, ist zum einen die Auszeichnung mit den CSS-Stilen zu finden, zum anderen aber auch die Realisierung der eingebetteten XML-Komponente in GoLive.

Veränderungssperre | Der Text ist als normaler (mit CSS-Stilen aus-gezeichneter) HTML-Code in die Seite eingefügt. Damit GoLive aber die Verbindung mit der zugehörigen Komponente herstellen kann, ist der eingefügte Code mit einem GoLive-spezifischen csobj-Tag

Abbildung �2.� Quellcode einer Seite mit einer Textkom-ponente aus einem InDesign-Paket

Abbildung �2.� Quellcode einer Seite mit einer Textkom-ponente aus einem InDesign-Paket

21

22

23

24

25

26

27

28

29

30

31

32

33

A

B

C

D

geklammert. Dieses Tag bewirkt, dass GoLive den Text im Layout-Editor gegen jede Veränderung sperrt und die Verbindung zur XML-Komponente im importierten InDesign-Paket hält.

Bearbeitung in InDesign | Eine solche Textkomponente verhält sich ähnlich wie ein Smart Object: Wenn Sie auf das Objekt doppelkli-cken, wird ein Fenster mit den Originaldaten geöffnet. Im Fall von Smart Objects ist das Photoshop CS2 für PSD-Dateien, Illustrator CS2 für Illustrator-SVG-Dateien oder Acrobat für PDF-Dateien. Im Falle von Textobjekten wird die Komponente als XML-Datei im GoLive-eigenen XML-Editor angezeigt.

Abbildung �2.� Quellcode einer Text-komponente im XML-Format

Abbildung �2.� Quellcode einer Text-komponente im XML-Format

Komponenten aus InDesign ���

Bibliografische Information Der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen

Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über

http://dnb.ddb.de abrufbar.

ISBN �-����2-�0�-�

© Galileo Press GmbH, Bonn 2005

1. Auflage 2005

Der Name Galileo Press geht auf den italienischen Mathematiker und

Philosophen Galileo Galilei (1564–1642) zurück. Er gilt als Gründungsfigur

der neuzeitlichen Wissenschaft und wurde berühmt als Verfechter des

modernen, heliozentrischen Weltbilds. Legendär ist sein Ausspruch Eppur se muove (Und sie bewegt sich doch). Das Emblem von Galileo Press ist der

Jupiter, umkreist von den vier Galileischen Monden. Galilei entdeckte die

nach ihm benannten Monde 1610.

Lektorat Thorsten Mücke

Einbandgestaltung Hannes Fuß, www.exclam.de

Herstellung Vera Brauner

Typografie und Gestaltung Vera Brauner

Korrektorat Alexandra Müller, Olfen

Satz Conrad Neumann, München

Gesetzt aus der Linotype Syntax mit Adobe InDesign CS2

Druck Koninklijke Wöhrmann B.V., Zutphen, Niederlande

Das vorliegende Werk ist in all seinen Teilen urheberrechtlich geschützt.

Alle Rechte vorbehalten, insbesondere das Recht der Übersetzung, des Vor-

trags, der Reproduktion, der Vervielfältigung auf fotomechanischem oder

anderen Wegen und der Speicherung in elektronischen Medien.

Ungeachtet der Sorgfalt, die auf die Erstellung von Text, Abbildungen

und Programmen verwendet wurde, können weder Verlag noch Autor,

Herausgeber oder Übersetzer für mögliche Fehler und deren Folgen eine

juristische Verantwortung oder irgendeine Haftung übernehmen.

Die in diesem Werk wiedergegebenen Gebrauchsnamen, Handelsnamen,

Warenbezeichnungen usw. können auch ohne besondere Kennzeichnung

Marken sein und als solche den gesetzlichen Bestimmungen unterliegen.