PC Magazin Premium XXL Windows 7.5 (Vorschau)

IT PROFESSIONAL
DVD CD
PROGRAMMIERUNG Beispiel-Datei 115
JavaScripte und Plug-ins
Eine Reihe von Anbietern stellt kostenlose Scripte und Plugins
für Bildergalerien, Karussels, Image-Rotators und einige
andere zum Teil ungewöhnliche Effekte bereit.
www.kostenlose-javascripts.de
Für Flash und Flex gibt es ebenfalls eine ganze Reihe kostenloser
Templates und Anwendungen, mit deren Hilfe Sie
Pageflips und Karussell-Galerien erstellen. Auch für das JavaScript-Framework
jQuery existieren viele weitere Librarys
und Plug-ins für tolle Effekte.
itemWidth: 110,
itemHeight: 62,
itemMinWidth: 50,
items: ‚a‘,
reflections: .5,
rotationSpeed: 1.8
}
);
}
Im Content-Bereich Ihres HTML-Dokuments erstellen Sie einen DIV-
Container und vergeben eine eindeutige ID. In unserem Beispiel karussel.
Alle Bilder, die Bestandteil der Animation sein sollen, müssen
innerhalb dieses Containers und einer Link-Anweisung ohne
Ziel liegen. Der HTML-Quelltext:
In Ihrer CSS-Datei vergeben Sie Style-Anweisungen wie Größe, Position
und Hintergrundfarbe. Möglich sind weitere Formatierungen
wie Rahmen oder Schatten. Achten Sie bei der Angabe von Höhe
und Breite auf das richtige Seitenverhältnis, um die Bilder nicht zu
verzerren.
#karussel{
width: 700px;
height: 150px;
background-color: #111;
position: absolute;
top: 200px;
left: 100px;
}
Browser möglich ist. Erstellen Sie eine einfache Liste und vergeben
Sie eine Klasse. Der HTML-Quellcode:
Deklarieren Sie die Klassen in Ihrer CSS-Datei. Die Größenangeben
der Bilder wählen Sie frei. Achten Sie hier darauf, dass die Proportionen
erhalten bleiben. Ergänzen Sie eventuell die Stil-Definitionen
mit Border-Angaben und Hover-Effekten. Ein Beispiel finden Sie auf
Heft-DVD unter Magazin/IT Professional/Webtechnik/Galerie.html.
Tipp 5
Direkte-Export aus InDesign ab CS5
■ InDesign CS5 bietet die bequeme Option, Pageflip-Dokumente im
Flash-Format über die integrierte Export-Funktion zu erstellen.
Legen Sie ein neues Dokument in der Größe der vorhandenen PDF-
Dateien an. Wählen Sie Datei/Platzieren sowie die Checkbox Import-
Optionen aktivieren. Bestimmen Sie die Seiten des PDF-Dokuments,
die Sie für das PageFlip verwenden. Platzieren Sie jede PDF-Seite
auf einer Seite im InDesign-Dokument und speichern Sie die Datei.
Über Datei/Exportieren/SWF gelangen Sie zu einem Optionsfenster.
Hier bestimmen Sie die Ausgabegröße, Papierfarbe und wählen zwischen
verschiedenen Übergängen. Aktivieren Sie die Option HTML-
Dokument erstellen, integriert InDesign beim Export die erzeugte
SWF-Datei direkt in den Quelltext.
pk
#karussel a{
position: absolute;
width: 110px;
}
Tipp 4
Die einfache Lösung mit HTML-Code
■ Wer nicht auf Scripte, Erweiterungen und Plug-ins angewiesen
sein will, kann seine Bilder per CSS in einer Vorschau-Galerie anzeigen.
Die möglichen Effekte sind hier zwar eingeschränkt. Der Vorteil
liegt jedoch darin, dass Sie keinerlei Scripte und Plug-ins benötigen
und deshalb die Darstellung auf nahezu jeder Plattform und jedem
Export-Artikel: Im
Beispiel sehen Sie die
Export-Funktion für
PageFlips als SWF-Datei
aus InDesign CS5. Für
andere Layout- und
Grafik-Programme gibt
es ebenfalls praktische
Zusatzmodule.
www.pc-magazin.de PC Magazin 9/2012