Galileo Computing < openbook >
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.


Kompendium der Informationstechnik
 von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
Buch: Kompendium der Informationstechnik
gp Kapitel 17 Webdesign
  gp 17.1 Grundgedanken zum Webdesign
    gp 17.1.1 Bildschirmauflösung und Farbtiefe
    gp 17.1.2 Die technischen Fähigkeiten der Browser
  gp 17.2 Web-Bildbearbeitung mit Fireworks MX
    gp 17.2.1 Bilder optimiert für das Web speichern
    gp 17.2.2 Das passende Dateiformat wählen
    gp 17.2.3 Den Export des Bildes vorbereiten und durchführen
    gp 17.2.4 Animierte GIFs erstellen
    gp 17.2.5 Segmente und Verhalten
  gp 17.3 Webdesign mit Macromedia Dreamweaver MX
    gp 17.3.1 Bearbeiten von HTML-Dokumenten
    gp 17.3.2 Hinzufügen verschiedener Elemente
    gp 17.3.3 Website-Funktionen
    gp 17.3.4 Layers und Verhalten
  gp 17.4 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)


Galileo Computing

17.2 Web-Bildbearbeitung mit Fireworks MX  downtop

Macromedia Fireworks ist ein speziell für die Belange des Webdesigns optimiertes Bildbearbeitungsprogramm. Neben klassischen Bildbearbeitungsfunktionen wie Farbkorrektur und Filter verfügt es über Vektorgrafikfunktionen sowie eine Reihe spezieller Tools, die nicht nur Bilder, sondern vorgefertigte HTML-Bausteine exportieren. Abbildung 17.1 zeigt die Arbeitsoberfläche von Fireworks im Überblick.


Abbildung 17.1   Die Arbeitsoberfläche von Fireworks MX

Abbildung
Hier klicken, um das Bild zu Vergrößern


In diesem Abschnitt werden einige spezielle Fähigkeiten von Fireworks vorgestellt. Um die hier gezeigten Lösungen sinnvoll umsetzen zu können, sollten Sie über Grundkenntnisse in der allgemeinen Bildbearbeitung verfügen. Die eigentlichen Bildbearbeitungsfähigkeiten von Fireworks werden in diesem Buch nämlich nicht beschrieben; alles, was Sie über Ebenen, Masken oder Farbkorrekturen wissen müssen, erfahren Sie in Kapitel 8, Bildbearbeitung und Grafik, am Beispiel des Programms Adobe Photoshop. Im gleichen Kapitel wird auch das Vektorgrafikprogramm Adobe Illustrator vorgestellt, was für das Verständnis der zahlreichen vektororientierten Funktionen von Fireworks hilfreich ist.

Fireworks-Arbeitsmittel

Die wichtigsten Arbeitsmittel von Fireworks sind folgende:

gp  Die Werkzeugpalette (Fenster • Werkzeuge beziehungsweise (STRG) + (F2)) enthält eine Reihe verschiedener Mal- und Zeichenwerkzeuge, Auswahlhilfsmittel und weitere Arbeitshilfen.
gp  Die Eigenschaften-Leiste (Fenster • Eigenschaften oder (STRG) + (F3)) ist kontextsensitiv, enthält also je nach ausgewähltem Objekt unterschiedliche Optionen und Einstellungen.
gp  Mit Hilfe der Optimieren-Palette (Fenster • Optimieren, Taste (F6)) wird eingestellt, unter welchem Dateiformat das aktuelle Bild oder der markierte Bildteil exportiert werden soll. Fireworks unterstützt die wichtigsten Dateiformate für das Web, für Offline-Multimedia-Produktionen oder auch für Print-Arbeiten. Neben dem grundlegenden Format können Sie verschiedene Optionen einstellen.
gp  Dokumentfenster verfügen neben den heute selbstverständlichen Hilfsmitteln wie Linealen, herausziehbaren Hilfslinien und einem einstellbaren Zoomfaktor über vier verschiedene Ansichtsmodi, die über die vier Registerkarten links oben ausgewählt werden können: Original zeigt das Bild so, wie es geöffnet und bearbeitet wurde. Vorschau ist eine Ansicht der in der Optimieren-Palette eingestellten Formatoptionen. Über 2fach und 4fach können Sie zwei beziehungsweise vier frei einstellbare Ansichten miteinander vergleichen.

Ebenen

Fireworks arbeitet mit der Ebenentechnik, ist also in der Lage, verschiedene Bilder und Zeichnungen wie auf transparenten Folien übereinander zu legen. Die Ebenenpalette (Fenster • Ebenen oder Taste (F2)) funktioniert fast genau wie in Photoshop (siehe Kapitel 8). Ebenen können Bitmap-Bilder, Vektorzeichnungen oder Text enthalten.

Arbeitsdateien werden in Fireworks im PNG-Format abgespeichert. Dennoch sollten Sie eine Arbeitsdatei niemals unmittelbar in eine Webseite einbetten: Ebenen, Vektorgrafik und andere Zusatzinformationen werden in dieser Datei mitgespeichert, ein Browser kann damit aber nichts anfangen. Fireworks-Arbeitsdateien sind deshalb für das Web deutlich zu groß. Sie sollten die gewünschte Komprimierung also stets über die Optimieren-Palette einstellen und das Bild anschließend über Datei • Exportieren speichern, selbst dann, wenn Sie ausdrücklich das PNG-Format wünschen.


Galileo Computing

17.2.1 Bilder optimiert für das Web speichern  downtop

Wenn Sie ein Bild in Fireworks bearbeiten und für den Webeinsatz exportieren möchten, müssen Sie zuerst die korrekte Auflösung für das Bild einstellen. Die rechnerische Auflösung von Bildern für den Bildschirmeinsatz – etwa für das Web – beträgt immer 72 Pixel pro Inch, weil Browser und andere bildschirmorientierte Anzeigeprogramme diesen Wert zugrunde legen. Mit der Realität hat diese Angabe überhaupt nichts zu tun; beispielsweise erscheint ein einzelner Pixel bei einer Auflösung von 800 x 600 auf einem iMac-Monitor erheblich kleiner als bei der Darstellung durch einen Beamer auf einer Leinwand.

Insofern sollten Sie sich merken, dass die einzige interessante Maßeinheit für die Web-Bildbearbeitung der Pixel ist; alle anderen Angaben wie cm oder Inch, die in der DTP-Welt eine wichtige Rolle spielen, sind hier relativ zu den 72ppi zu sehen und daher ohne Bedeutung.

Bildgröße und Auflösung

Bildgröße und Auflösung werden in Fireworks über den Dialog Modifizieren • Leinwand • Bildgröße... eingestellt. Falls die Auflösung bereits 72 Pixel/Zoll beträgt, müssen Sie keine Änderung vornehmen. Andernfalls sollten Sie zunächst nur die Auflösung korrekt einstellen, ohne die tatsächliche Bildgröße zu manipulieren. Zu diesem Zweck müssen Sie das Auswahlfeld Bild neu auflösen deaktivieren und anschließend den neuen Wert für die Auflösung eintragen. Diesen Schritt müssen Sie zunächst mit OK bestätigen; wenn Sie die Bildgröße selbst ändern möchten, rufen Sie denselben Dialog einfach erneut auf.

Um die Bildgröße zu ändern, müssen Sie Bild neu auflösen wieder ankreuzen. Wichtig ist, dass Sie nur die Werte im oberen Abschnitt des Dialogs unter Pixelabmessungen ändern dürfen, eine Änderung im unteren Bereich hätte die erneute Umstellung der Auflösung zur Folge. Nützlich ist übrigens das Optionsfeld Proportionen beschränken: Es sorgt dafür, dass bei der Änderung eines Wertes der jeweils andere proportional umgerechnet wird; es findet also keine Verzerrung des Bildes statt.

Neben dem Ankreuzfeld Bild neu auflösen können Sie die Interpolationsmethode auswählen. Dabei handelt es sich um die Rechenmethode für das Hinzufügen beziehungsweise Weglassen von Pixeln. Möglich sind hier folgende Werte:

gp  Für eine illustrative Grafik mit wenigen, flächigen Farben, die als GIF gespeichert werden soll, wird Nächster Nachbar ausgewählt; Pixel werden einfach nach Bedarf in ihrer Originalfarbe verdoppelt oder weggelassen. Das Ergebnis ist, dass die skalierte Version auf keinen Fall geglättet wird.
gp  Für Halbtonbilder mit vielen Farben, die kaum farbgleiche Flächen enthalten und eher als JPEG gespeichert werden, sollte Bikubisch eingestellt werden. Bei dieser Methode bestimmen alle acht umgebenden Pixel die neue Farbe eines Pixels mit; das Ergebnis ist ein stark geglättetes Bild.
gp  In allen anderen Fällen, zum Beispiel bei Schwarz-Weiß-Fotos, die als JPEG gespeichert werden, oder Farbfotos, die wegen erwünschter Transparenz als GIF gespeichert werden, könnten die dazwischen liegenden Methoden besser geeignet sein: Bilinear betrachtet nur die vier horizontal und vertikal benachbarten Pixel zur Bestimmung der neuen Farbe; es wird in diesem Fall zwar geglättet, aber nicht ganz so stark. Weich glättet sogar noch weniger.

Allgemein gilt, dass Sie ein Bild nicht zu stark vergrößern sollten, weil die Qualität ansonsten zu sehr leiden würde – schließlich kann ein Bildbearbeitungsprogramm keine Informationen hinzuerfinden.


Galileo Computing

17.2.2 Das passende Dateiformat wählen  downtop

Die meisten Browser unterstützen ohne Plug-in-Unterstützung drei verschiedene Bilddateiformate: GIF, JPEG und PNG. In diesem Unterabschnitt wird anhand von Fallbeispielen erläutert, welches dieser Formate Sie wann verwenden sollten. Wenn Sie Genaueres über die technischen Eigenschaften dieser Dateiformate wissen möchten, können Sie diese in Kapitel 11, Datei- und Datenformate, nachschlagen.

GIF – Graphics Interchange Format

Das GIF-Format wurde seit 1987 im Auftrag von CompuServe entwickelt, war also von Anfang an als spezielles Online-Bildformat gedacht.

Ein GIF unterstützt maximal eine Farbtiefe von 8 Bits, das heißt, es zeigt höchstens 256 Farben aus einer angepassten Farbpalette an. Für Fotos und andere halbtonreiche Bilder mit Farbverläufen oder Ähnlichem ist es daher in der Regel nicht geeignet.

Andererseits wird ein GIF verlustfrei komprimiert; es verwendet auf jeden Fall die LZW-Komprimierung, die beim TIFF-Format optional zur Verfügung steht. Da bei dieser Kompressionsmethode nebeneinander liegende, farbgleiche Pixel beziehungsweise wiederkehrende Muster zu einer Einheit zusammengefasst werden, wird ein solches Bild stärker komprimiert, je weniger Farben es enthält.

GIF-Transparenz

Ein weiteres unterstütztes Merkmal von GIF-Dateien ist die Transparenz. Die Farbtabelle eines Bildes kann den speziellen Eintrag »transparent« enthalten, um die Anzeige einzelner Pixel zu unterdrücken. Allerdings ist keine echte Alpha-Transparenz möglich; Pixel werden entweder mit voller Deckkraft angezeigt oder gar nicht.

Angenehm ist auch die Tatsache, dass ein GIF interlaced abgespeichert werden kann: In diesem Fall wird es beim Laden nicht zeilenweise von oben nach unten aufgebaut, sondern die Zeilen werden versetzt geladen. Gerade bei langsameren Internetverbindungen hat dies den Vorteil, dass Bilder schon während des Ladevorgangs im Ganzen erkennbar werden.

Es handelt sich bei GIF übrigens nicht einfach um ein Dateiformat für ein einzelnes Bild, sondern um ein Hüllformat für mehrere Bilder innerhalb derselben Datei. Der Header einer GIF-Datei kann Anweisungen enthalten, die die Anzeigedauer der einzelnen Bilder bestimmen. Dies ergibt die bekannten animierten GIFs, die beispielsweise häufig als Werbebanner auf Webseiten eingesetzt werden.

JPEG – Joint Photographic Expert Group

Das JPEG-Format wurde ab 1991 von einer unabhängigen Expertenkommission entwickelt. Im engeren Sinne ist JPEG der Name dieser Kommission; das Bildformat heißt eigentlich JFIF (JPEG File Interchange Format).

JPEG-Bilder unterstützen eine beliebige Farbtiefe von bis zu 8 Bits pro Kanal (bei den für das Web verwendeten RGB-Bildern also 24 Bits oder mehr als 16,7 Millionen Farben).

JPEG-Komprimierung

Die Komprimierung von Bildern dieses Dateiformats erfolgt stets verlustbehaftet. Sie basiert auf der farbphysiologischen Erkenntnis, dass Helligkeitsunterschiede erheblich stärker vom menschlichen Auge wahrgenommen werden als Farbtonschwankungen. Aus diesem Grund wird der Helligkeitswert jedes einzelnen Pixels gespeichert, während jeweils nur der Durchschnitt der Farbtöne aus einem quadratischen Bereich gespeichert wird. Die Größe dieses Quadrats ist der wichtigste Gesichtspunkt der einstellbaren JPEG-Qualität.

Besonders gut geeignet ist das JPEG-Format für Fotos und andere halbtonreiche Bilder. Dagegen eignet es sich überhaupt nicht für Illustrationen mit größeren gleichfarbigen Flächen, für die das GIF-Format oder eventuell PNG gewählt werden sollte.

Ähnlich wie GIF-Bilder interlaced abgespeichert werden können, besteht bei JPEG die Möglichkeit, das so genannte Progressive-JPEG-Format auszuwählen. Es geht sogar noch einen Schritt weiter als Interlaced-GIF, indem es ein JPEG-Bild nicht nur zeilenweise, sondern in beide Richtungen versetzt lädt. Der einzige Nachteil dieser Variante besteht darin, dass ganz alte Browser (zum Beispiel die 3er-Versionen von Netscape und Internet Explorer) sie nicht unterstützen und stattdessen gar kein Bild anzeigen.

Bitte beachten Sie, dass Sie ein Bild, das bereits als JPEG abgespeichert wurde, nicht noch einmal in diesem Format speichern sollten – bei jedem JPEG-Kompressionsvorgang kommt es erneut zum Verlust von Bilddetails. Sie sollten also stets eine Arbeitskopie in einem verlustfreien Format wie Fireworks PNG, Photoshop PSD oder TIFF behalten.

JPEG-Nachteile

Einer der größten Nachteile von JPEG-Dateien besteht darin, dass sie keine Transparenz unterstützen. Bilder in diesem Format sind auf jeden Fall rechteckig. Dies ist der einzige Grund, warum Sie manchmal gezwungen sind, Fotos im eigentlich völlig ungeeigneten GIF-Format zu speichern. Abgesehen davon ist JPEG ein Dateiformat für genau ein Bild und unterstützt daher keine Animation wie das GIF-Format. Allerdings können Sie eine Abfolge von JPEG-Bildern mit Hilfe von JavaScript abspielen, was in Kapitel 19 am Beispiel einer Diashow demonstriert wird.

PNG – Portable Network Graphics

Ab den 4er-Versionen der beiden wichtigsten Browser wird auch das PNG-Format allgemein im Web unterstützt. Es wurde zunächst aus lizenzrechtlichen Gründen entwickelt: Vor einigen Jahren erlangte ein amerikanisches Unternehmen ein Patent auf die LZW-Komprimierung, die für das GIF-Format verwendet wird. Daraufhin begann dieses Unternehmen, von Providern, Webmastern und Herstellern von Bildbearbeitungsprogrammen Lizenzgebühren für die Verwendung von GIFs zu kassieren. Aus diesem Grund wurde PNG (gesprochen »Ping«) als freie Alternative zum GIF-Dateiformat entwickelt.

PNG-Farbtiefen

PNG kann jedoch auch erheblich mehr als GIF: Während die 8-Bit-Variante genau dieselben Optionen bietet wie ein entsprechendes GIF, und dabei auch noch etwas mehr Speicherplatz belegt, ist das 24-Bit-PNG aus einem wichtigen Grund sehr interessant: Als einziges Web-Dateiformat unterstützt es echte Alpha-Transparenz, das heißt, die Deckkraft eines Pixels kann in 256 Stufen von voll deckend bis absolut durchsichtig frei gewählt werden. Dies ermöglicht beispielsweise geglättete Ränder auf beliebigen Hintergründen und teiltransparente Bildteile wie Autofenster oder Brillengläser.

Nebenbei ist PNG, wie bereits erwähnt wurde, das eigene Dateiformat von Fireworks. Aus den oben angesprochenen Gründen sollten Sie allerdings Ihre Arbeitsdatei nicht auf einer Webseite veröffentlichen.


Galileo Computing

17.2.3 Den Export des Bildes vorbereiten und durchführen  downtop

Bevor Sie ein Bild endgültig für den Einsatz auf einer Webseite exportieren, sollten Sie im Dokumentfenster zuerst auf die Registerkarte Vorschau umschalten oder sogar auf 2fach beziehungsweise 4fach, um die Vor- und Nachteile verschiedener Formate zu vergleichen.

Oben im Dokumentfenster, neben den vier Karteireitern, steht im Vorschaumodus die zu erwartende Dateigröße für die aktuell eingestellte Optimierung sowie die voraussichtliche Download-Zeit bei einem Modem mit 56,6 kBit/s. Bei 2fach oder 4fach stehen diese Angaben unter jeder einzelnen Detailansicht.

Im Folgenden werden die Einstellungen näher erläutert, die für die verschiedenen weborientierten Dateiformate in der Optimieren-Palette vorgenommen werden können. Die nicht für das Web gedachten Formate TIFF und BMP werden hier nicht näher erläutert.

Ganz oben in der Optimieren-Palette können Sie unter Einstellungen einige vorgefertigte Exportoptionen auswählen. Mit Hilfe des Plus-Buttons können Sie die aktuellen eigenen Einstellungen als Vorauswahl hinzufügen, über den Minus-Button können Sie eine solche Sammlung von Optionen wieder entfernen.

JPEG-Einstellungen und -Export

Wählen Sie zunächst unmittelbar unter den Einstellungen das grundlegende Dateiformat JPEG aus.

Die unter Matt ausgewählte Farbe wird als neue Hintergrundfarbe an transparenten Stellen des Bildes eingesetzt, da JPEG – wie bereits erwähnt – keine Transparenz unterstützt.

Unter Qualität wird der JPEG-Kompressionsfaktor eingestellt. Die möglichen Werte reichen von 0 (sehr schlechte Qualität, kleinste Datei) bis 100 (hervorragende Qualität, aber große Datei). Es ist ratsam, ungefähr bei 50 bis 60% anzufangen und den Wert je nach Anschein langsam noch weiter zu senken, solange die Qualität akzeptabel bleibt. Ist sie dagegen bereits zu schlecht, müssen Sie möglicherweise einen höheren Wert wählen.

Selektive Qualität bietet die Möglichkeit, das Bild automatisch in verschiedene Bereiche zu unterteilen, die je nach Bedarf verschieden stark komprimiert werden. Exportiert werden sie dabei im Endeffekt als mehrere Einzelbilder; dabei ist es möglich, den benötigten HTML-Code automatisch von Fireworks generieren zu lassen.

JPEG-Fehler beseitigen

Die Option Glätten sorgt für ein mehr oder weniger starkes Weichzeichnen, das den gefürchteten JPEG-Artefakten (Treppenfehlern bei zu glatten Farbflächen) entgegenwirken kann. Auf der anderen Seite werden klare, kontrastreiche Linien durch zu starkes Glätten unscharf und matschig.

Nachdem Sie alle Einstellungen nach Ihren Wünschen vorgenommen haben, können Sie den Befehl Datei • Exportieren aufrufen, um das Bild mit den gewählten Optionen zu speichern. Für solche einfachen JPEG-Exporte reicht hier unter Dateityp die Einstellung Nur Bilder; andere Optionen erzeugen automatisch HTML-Code oder Ähnliches.

GIF-Einstellungen und -Export

Wenn Sie GIF-Bilder ohne Transparenz erstellen möchten, funktioniert das folgendermaßen:

GIF-Paletten

Als Dateiformat wird in der Optimieren-Palette GIF eingestellt. Daneben können Sie über Matt die Farbe bestimmen, in der transparente Bereiche des Bildes eingefärbt werden sollen. Anschließend müssen Sie eine geeignete Farbpalette auswählen. Hier gibt es eine Reihe von Möglichkeiten, die je nach Bild und Verwendungszweck unterschiedlich gut geeignet sind:

gp  Adaptiv erzeugt eine Palette, die sich möglichst nah an den Farben des eigentlichen Bildes orientiert. Besonders gut geeignet ist sie für den Fall, dass Sie gezwungen sind, ein Foto als GIF zu speichern, zum Beispiel, weil Sie Transparenz benötigen.
gp  WebSnap-Adaptiv bildet einen Kompromiss zwischen der Web216-Palette und der Einstellung »Adaptiv«; Fireworks versucht, möglichst viele Farben aus der Web-Palette zu wählen. Bei dieser Option handelt es sich um die Voreinstellung, die für die meisten Fälle am besten geeignet ist.
gp  Web 216 ist die bereits erwähnte websichere Farbpalette. Sie liefert das kompatibelste Ergebnis für alle Arten von Browsern, ist jedoch für viele Bilder ungeeignet, weil die Farben des Bildes nicht zu den Farben dieser Palette passen. Wenn Sie selbst Grafiken erstellen, die Sie als GIF-Bilder in eine Website einbetten möchten, sollten Sie von vornherein bevorzugt Farben aus der Web-Palette verwenden.

Alle anderen Möglichkeiten sind Spezialpaletten, die im Wesentlichen für andere Zwecke als das Web besser geeignet sind – beispielsweise werden für Multimedia-Autorensysteme wie Macromedia Director traditionell eher die Windows- beziehungsweise die Mac  OS-Systempalette eingesetzt.

Farbanzahl reduzieren

Neben der Palette können Sie die maximale Anzahl der Farben auswählen, die verwendet werden soll. Fireworks wählt die häufiger vorkommenden Farben aus und lässt die selteneren weg. Je weniger Farben das Bild letzten Endes hat, desto kleiner wird die Datei. Der Versuch, die Anzahl der Farben zu reduzieren, lohnt sich also immer.

Der einstellbare Verlust mit Werten von 0 bis 100 verkleinert die Datei durch das künstliche Erzeugen von Verlusten. Wie Sie wissen, ist GIF eigentlich ein verlustfrei komprimierendes Format; diese Einstellung führt den Verlust willkürlich herbei.

Das Rastern kompensiert Farben, die in der Tabelle nicht vorkommen, durch die zufällige Streuung vorhandener Nachbarfarben. Das sieht allerdings bei einer zu starken Rasterung nicht besonders vorteilhaft aus und vergrößert zudem die Datei.

GIF-Transparenz einstellen

Wenn Sie transparente GIFs herstellen möchten, müssen Sie zusätzlich eine der beiden möglichen Einstellungen aus dem Transparenz-Popup der Optimieren-Palette auswählen:

gp  Indextransparenz: Zunächst werden alle vollständig transparenten Bereiche aus dem Originalbild zu transparenten Pixeln des GIF-Bildes; alle Pixel mit einer höheren Deckkraft als 0 werden dagegen voll deckend gezeichnet. Ganz bestimmte Farben der Farbtabelle werden also transparent gesetzt. Geeignet ist diese Einstellung für grafische Darstellungen mit harten, pixeligen, vorzugsweise horizontal oder vertikal geraden Rändern.
gp  Alpha-Transparenz: Hier wird die Transparenz genau aus der Ebenentransparenz des Bildes erzeugt. Alle Pixel mit mittlerer Deckkraft werden mit der eingestellten Matt-Farbe gemischt, um einen nahtlosen Übergang zu einer bestimmten Dokument-Hintergrundfarbe herzustellen.

Ganz unten in der Optimieren-Palette wird die aktuelle Farbtabelle angezeigt. Hier sind diejenigen Farben, die aus der Web-Palette stammen, mit einer kleinen Raute gekennzeichnet. Mit den darunter liegenden Buttons können Sie von links nach rechts folgende Operationen durchführen:

gp  Der erste Button, Farbe in Transparenz hinzufügen, setzt die nächste im Bild oder in der Palette angeklickte Farbe transparent.
gp  Mit Hilfe des zweiten Buttons, Farbe aus Transparenz entfernen, können Sie die nächste in der Originalansicht des Bildes angeklickte Farbe wieder deckend machen, das heißt sie aus den transparenten Farben der Palette wieder entfernen.
gp  Der dritte Button, Farbe für Transparenz wählen, setzt alle bisher transparenten Farben auf deckend zurück und macht allein die Farbe transparent, die als nächste angeklickt wird.
gp  Der erste Button in der zweiten Gruppe, Farbe bearbeiten, öffnet den eingebauten Farbwähler des Betriebssystems und ermöglicht das Ersetzen der aktuell in der Palette angeklickten Farbe durch eine andere.
gp  Der Würfel-Button, Websicher machen, ersetzt die zurzeit in der Palette ausgewählte Farbe gegen die nächstgelegene Farbe aus der Web-Palette.
gp  Das Vorhängeschloss, Farbe sperren, schützt eine Farbe davor, dass sie durch Auswählen einer anderen Palettenoption oder durch Reduzieren der Farbanzahl entfernt oder in die Web-Palette verschoben wird. Bestimmte Farben eines Bildes, beispielsweise Firmenfarben oder die verschiedenen Grün-Töne von Pflanzen, sollten auf diese Weise geschützt werden.
gp  Die beiden letzten Buttons ermöglichen das Hinzufügen beziehungsweise Entfernen von Farben.

Wie bereits angedeutet, gibt es zwei verschiedene Arten der GIF-Transparenz. Bei der einen Variante werden harte, in Kurven pixelige Kanten verwendet; dafür können solche Bilder auf beliebigen Hintergründen platziert werden. Die andere Form ist für die Verwendung auf einer bestimmten Hintergrundfarbe optimiert – alle Pixel mit weniger als 100 Prozent Deckkraft werden mit dieser Farbe gemischt, um einen nahtlosen Übergang zu ermöglichen.

Wenn Sie die »allgemein gültige« Transparenz für einen beliebigen Hintergrund herstellen möchten, müssen Sie schon während der Bildbearbeitung bei allen Werkzeugen, die auf die Außenkonturen entlang des transparenten Bereichs wirken sollen, in der Eigenschaften-Leiste jegliches Glätten ausschalten – und zwar sowohl bei den Zeichen- als auch bei den Auswahlwerkzeugen: Bei den Auswahlwerkzeugen müssen Sie beispielsweise Rand: Hart einstellen, bei Text die Option Kein Anti-Alias.

Vor dem Exportieren müssen Sie anschließend in der Optimieren-Palette unter Matt die Hintergrundfarbe auf Transparent (das rot durchgestrichene Quadrat oben im Dialog) stellen.

Weiche Kanten entfernen

Bei den meisten freizustellenden Objekten, die sich bereits auf transparentem Hintergrund befinden, ergibt sich beim Erstellen eines transparenten GIFs ein anderes Problem: Am Rand des Objekts existieren falschfarbige (oft weiße) Pixel, die sich auf andersfarbigem Hintergrund als unangenehme »Blitzer« bemerkbar machen. Sie können folgendermaßen vorgehen, um diese unerwünschten Randpixel loszuwerden:

gp  Wählen Sie den transparenten Bereich mit dem Zauberstab aus; als Optionen sollten Sie Rand: Hart einstellen, die Toleranz (notwendige Farbähnlichkeit) dagegen je nach Bedarf.
gp  Zoomen Sie anschließend die Bildansicht stark, um die Anzahl der störenden Pixel um die Auswahl herum einzuschätzen.
gp  Wählen Sie zum Schluss Auswählen • Auswahlrahmen erweitern... und geben Sie die gewünschte Anzahl von Pixeln ein, um die Sie die Auswahl ausweiten möchten. Anschließend können Sie den ausgewählten Hintergrundbereich mit der Taste (Entf) löschen.

Wollen Sie dagegen eine Transparenz erzeugen, die für eine bestimmte Hintergrundfarbe optimiert ist, dann dürfen Sie bei den jeweiligen Werkzeugen ohne Einschränkung das Glätten verwenden; je nach gewünschtem Effekt sind verschiedene Stärken möglich. Bei Text hängt der Anti-Alias-Grad beispielsweise von der Schriftgröße ab.

Vor dem Exportieren wird Matt dann auf die jeweils gewünschte Farbe eingestellt.

PNG-Einstellungen und Export

Über das Format PNG 8 braucht hier kaum ein Wort gesagt zu werden: Die Einstellmöglichkeiten und das Ergebnis sind mit einem entsprechenden GIF absolut identisch. Allerdings belegt eine 8-Bit-PNG-Datei ein wenig mehr Speicherplatz als ein GIF mit denselben Einstellungen. Insofern brauchen Sie 8-Bit-PNGs eigentlich nie zu verwenden, zumal der Inhaber des LZW-Patents inzwischen keine Lizenzgebühren mehr einfordert.

Bei PNG 24 beziehungsweise PNG 32 können Sie dagegen außer der Hintergrundfarbe Matt überhaupt keine Einstellungen vornehmen. Das liegt daran, dass PNG 24 überhaupt keine Transparenz unterstützt, sondern lediglich dazu dient, ein Bild verlustfrei mit seiner ursprünglichen Farbtiefe auf eine Webseite zu stellen. Das PNG-32-Format bietet dagegen echte Alpha-Transparenz, es gibt deshalb das Bild verlustfrei und mit allen seinen Deckkraft-Schwankungen wieder. Der Preis, den Sie dafür zahlen müssen, ist allerdings eine recht stolze Dateigröße und damit eine relativ lange Ladezeit.


Abbildung 17.2   Verschiedene Bilddateiformate im Vergleich

Abbildung
Hier klicken, um das Bild zu Vergrößern


Dateiformate im Vergleich

In Abbildung 17.2 werden verschiedene Dateiformate direkt miteinander verglichen: Ein grauer Kreis wird jeweils einmal auf weißem und einmal auf schwarz-weißem Schachbrett-Hintergrund dargestellt. Während das JPEG-Format aufgrund der Darstellungsfehler, der Dateigröße und der fehlenden Transparenz in beiden Fällen ungeeignet ist, sind die Favoriten für den jeweiligen Hintergrund verschiedene: Auf weißem Hintergrund sollten Sie eindeutig das für Weiß optimierte zweite Bild mit der Einstellung Matt: weiß verwenden. Auf dem Schachbrett können Sie sich entweder für das optimal geglättete, aber recht große 32-Bit-PNG, oder für das erste, leicht pixelige, aber dafür erheblich kleinere Transparent-GIF entscheiden.


Galileo Computing

17.2.4 Animierte GIFs erstellen  downtop

Auch wenn das in Kapitel 20 ausführlich vorgestellte Programm Flash in den meisten Fällen die erheblich bessere Wahl für Animationen im Web darstellt, ist das animierte GIF in bestimmten Bereichen trotzdem noch immer gefragt – das häufigste Anwendungsgebiet dürfte wohl nach wie vor das Werbebanner sein. Die blinkenden und flackernden Aufzählungszeichen, Trennlinien oder Mail-Buttons aus den Kindertagen des WWW sind dagegen inzwischen erfreulicherweise fast ausgestorben.

Die einfachste Art und Weise, in Fireworks ein animiertes GIF zu erstellen, ist die automatische Animation einer Ebene oder eines Vektorobjekts. Diese funktioniert folgendermaßen:

1. Markieren Sie ein Objekt im Bild, das animiert werden soll. Hier ist nicht gemeint, dass Sie im Bildbearbeitungsmodus mit Hilfe von Lasso, Zauberstab oder ähnlichen Auswahlwerkzeugen einen Teil einer Bitmap-Ebene auswählen sollen, sondern dass Sie mit dem normalen Auswahlpfeil ein ganzes Objekt auswählen müssen – in der Regel handelt es sich um den gesamten Inhalt einer Ebene.
       
2. Wählen Sie Modifizieren • Animation • Auswahl animieren... Im entsprechenden Dialog müssen Sie anshließend alle relevanten Einstellungen vornehmen:
       
Unter Bilder wird eingestellt, aus wie vielen Einzelbildern die Animation bestehen soll. Verschieben bestimmt, um wie viele Pixel das Objekt insgesamt bewegt werden soll. Unter Richtung wird die Richtung der Bewegung in Grad angegeben. Der Wert unter Skalieren auf legt fest, dass die Endgröße den angegebenen Prozentsatz der Anfangsgröße betragen soll. Die Opazität legt die Entwicklung der Deckkraft fest. Die Änderung der Opazität funktioniert nur auf einer voll deckenden Hintergrundfarbe. Sie kann auf transparentem Hintergrund nicht funktionieren, da das GIF-Format eben keine echte Alpha-Transparenz kennt. Gegebenenfalls müssen Sie die Hintergrundfarbe unter Modifizieren • Leinwand • Leinwandfarbe oder über die Matt-Einstellung in der Optimieren-Palette anpassen. Unter Drehen wird schließlich ein Drehwinkel in Grad sowie dessen Richtung angegeben.

Wenn Sie diesen Dialog im Nachhinein wieder aufrufen möchten, um etwas zu ändern, müssen Sie das entsprechende Objekt erneut anklicken und Modifizieren • Animation • Einstellungen... wählen. In der Eigenschaften-Leiste steht ein Großteil dieser Optionen ebenfalls zur Verfügung.

Symbole

Das animierte Objekt wird durch diese Vorgehensweise in ein festes Symbol konvertiert; die Symbole sind in der Bibliothek (Fenster • Bibliothek) zu finden.

Nachdem Sie eine Animation eingerichtet haben, können Sie die Dauer und die Reihenfolge der Frames (Einzelbilder) der Animation in der Frame-Palette (Fenster • Frames oder (Shift) + (F2)) einstellen. Die Dauer für ein Frame wird durch Doppelklick auf die rechts neben dem Namen stehende Zahl eingestellt. Wenn Sie die Dauer mehrerer Frames gleichzeitig einstellen möchten, können Sie diese Frames zunächst mit Klick und (Shift) + Klick markieren. Ein anschließender Doppelklick auf die Dauer eines dieser Frames stellt den eingetragenen Wert für alle ein. Gemessen wird die Dauer in Hundertstelsekunden.

Mit Hilfe der Buttons unten im Dokumentfenster können Sie sich eine Animation probeweise ansehen. Als Exportformat müssen Sie in der Optimieren-Palette Animiertes GIF auswählen.


Galileo Computing

17.2.5 Segmente und Verhalten  toptop

Durch Segmente (oder Slices) wird ein Gesamtbild in mehrere Einzelbilder aufgeteilt, wobei Fireworks automatisch den passenden HTML-Code generieren kann, um diese Bilder in einer Tabelle zusammen zu halten.

Segmente können beispielsweise für das Erledigen folgender Aufgaben verwendet werden:

gp  Ein großes Bild mit unterschiedlichen Regionen kann unterteilt werden, um diese Bereiche jeweils auf andere Art und Weise zu komprimieren. Beispielsweise könnten Sie das größtmögliche Rechteck in der Mitte des Bildes als JPEG abspeichern und die nicht rechteckigen Ränder als GIF, weil sie Transparenz benötigen.
gp  Einzelne Teile des Bildes können mit einem Verhalten versehen werden, etwa mit einem Rollover-Effekt oder mit interaktiven Popup-Menüs. Auch den nötigen JavaScript-Code für solche Verhaltensweisen kann Fireworks automatisch schreiben.

Image Maps

Nah verwandt mit den Segmenten sind die Hotspots, die für das automatische Erstellen von Image Maps verwendet werden können. Sie werden mit Hilfe der drei Hotspot-Werkzeuge (Rechteck, Kreis oder Polygon) im Abschnitt Web der Werkzeugpalette aufgezogen; in der Eigenschaften-Leiste werden anschließend die Hyperlink-Eigenschaften für den jeweiligen Hotspot eingestellt. Im Gegensatz zu Segmenten erzeugen Hotspots nur eine Bilddatei, aber zusätzlichen HTML-Code für die Image Map.

Einfachste Methode: Segmentierung durch Hilfslinien

Wenn Sie Slicing ohne weitere Optionen durchführen möchten, etwa bei Rollover-Regionen, deren JavaScript-Code Sie selbst schreiben möchten, dann genügt die folgende einfache Variante:

1. Blenden Sie die Lineale ein (Ansicht • Lineale).
       
2. Ziehen Sie aus den Linealen Hilfslinien nach Bedarf heraus.
       
3. Wählen Sie Datei • Exportieren... Unter Dateityp müssen Sie HTML und Bilder auswählen. Unter HTML erzeugt die Einstellung HTML-Datei exportieren eine vollständige neue HTML-Datei. In Zwischenablage kopieren legt den HTML-Code in die Zwischenablage, damit Sie ihn an der gewünschten Stelle in eine bestehende Seite einfügen können.
       
    Wählen Sie unter Segmente die Option Segmente entlang Hilfslinien erstellen aus.
       

Vollwertige Segment-Objekte

Diese werden mit dem Segmentierwerkzeug erzeugt, dem grünen Quadrat mit dem roten Rand und dem Messer im Web-Abschnitt der Werkzeugpalette (Taste (K)). Wählen Sie dieses Werkzeug einfach aus und ziehen Sie so viele Segmente auf wie nötig – gegebenenfalls können Sie vorher Hilfslinien anlegen, um exakte Segmente zu erzeugen, da die Hilfslinien magnetisch sind.

Nachdem Sie solche echten Segment-Objekte erzeugt haben, können Sie ihnen zum einen mit Hilfe der Optimieren-Palette jeweils ein eigenes Exportformat zuweisen. Darüber hinaus können Sie ihnen in der Verhaltenspalette eine Reihe verschiedener Verhalten zuweisen. Klicken Sie einfach das betreffende Segment an und wählen Sie mit Hilfe des Plus-Buttons das gewünschte Verhalten aus.

Das Verhalten »Einfaches Rollover«

Das simpelste Beispiel für ein Verhalten ist das Einfache Rollover: In jedem Segment, in dem dieses Verhalten definiert ist, wird beim Darüberrollen mit der Maus der Inhalt von Frame 2 des Dokuments gezeigt, ansonsten der Inhalt von Frame 1.

Im Einzelnen funktioniert das Erstellen solcher Rollover-Zustände folgendermaßen:

1. Definieren Sie mit Hilfe des Segmentierwerkzeugs die Segmente, denen dieses Verhalten zugewiesen werden soll.
       
2. Erzeugen Sie die Rollover-Verhalten für die Segmente: Markieren Sie jeweils das gewünschte Segment mit dem Standard-Auswahlpfeil. Tragen Sie in der Eigenschaften-Leiste unter Hyperlink die URL ein, auf die der entsprechende Link verweisen soll, und wählen Sie Einfaches Rollover aus dem Popup-Menü unter dem Plus-Button in der Verhalten-Palette.
       
3. Fügen Sie ein zweites Frame hinzu, das den gewünschten Rollover-Zustand des Bildes enthält:
       
    Öffnen Sie die Frame-Palette. Duplizieren Sie das erste Frame, indem Sie es auf das Symbol Neues Frame am unteren Rand der Palette ziehen, wenn der Rollover-Zustand nur eine geringfügige Modifikation des Normalzustands ist. Durch einfachen Klick auf dieses Symbol erzeugen Sie dagegen ein neues, leeres Frame, wenn der Rollover-Zustand völlig anders aussehen soll.
       
4. Erstellen Sie im zweiten Frame die entsprechenden Rollover-Zustände der Bereiche.
       
5. Wählen Sie schließlich Datei • Exportieren..., um die einzelnen Bilder sowie ein fertiges HTML-Dokument mit dem für das Rollover notwendigen JavaScript-Code zu erzeugen.
       
    Unter Segmente müssen Sie diesmal Segmente exportieren auswählen; in der Regel wird auch Bereiche ohne Segmente einschließen aktiviert.
       
    Über den Button Optionen... können Sie den Dialog HTML-Einstellungen öffnen, in dem bestimmt werden kann, wie der exportierte HTML-Code beschaffen sein soll. Auf der Registerkarte Allgemein werden die Haupteinstellungen für die HTML-Datei vorgenommen. Die wichtigste Einstellung ist hier HTML-Stil: Je nachdem, mit welchem Programm Sie Ihre HTML-Dokumente erstellen, können Sie eine der Optionen auswählen. Am häufigsten wird Fireworks in Zusammenarbeit mit dem weiter unten beschriebenen Dreamweaver eingesetzt – die Option Dreamweaver HTML beziehungsweise Dreamweaver XHTML ist nach meiner Erfahrung außerdem diejenige, die in der Mehrzahl der Browser am besten funktioniert. Auf der Registerkarte Tabelle können Sie das Tabellenlayout näher bestimmen, während unter Dokumentspezifisch vor allem die Zusammensetzung der Bilddateinamen gewählt werden kann.
       

Das Verhalten »Bild austauschen«

Im Unterschied zum einfachen Rollover bietet das Verhalten Bild austauschen eine Reihe zusätzlicher Optionen. Beispielsweise muss das Segment, in dem das Rollover stattfindet, nicht dasselbe sein wie das Segment, in dem das Bild ausgetauscht wird.

In dem Dialog des Verhaltens Bild austauschen können Sie die folgenden Optionen einstellen:

gp  Ganz oben wird das Segment ausgewählt, das ausgetauscht werden soll. Sie können entweder links oben in der Liste den Namen oder rechts oben in der schematischen Übersicht das Abbild des passenden Segments anklicken. Voreingestellt ist das Segment, dem Sie das Verhalten zuweisen.
gp  Als Nächstes können Sie unter Zeigt ausgetauschtes Bild aus wählen, woher das Austauschbild stammen soll. Sie können sich entweder für ein bestimmtes Frame oder für eine externe Datei entscheiden.
gp  Wenn Sie Bilder vorausladen aktivieren, wird ein JavaScript hinzugefügt, das die Austauschbilder bereits beim Öffnen des HTML-Dokuments lädt. Dies ist in der Regel empfehlenswert.
gp  Durch die Option Bild bei onMouseout wiederherstellen wird das ursprüngliche Bild beim Herausziehen des Mauszeigers wiederhergestellt – je nach konkretem Verwendungszweck ist diese Option angebracht.

Das Verhalten »Navigationsleistenbild festlegen«

Mit Hilfe dieses Verhaltens können Sie aus einem Segment ein vollwertiges Element einer Navigationsleiste machen, also einen Hyperlink, der anders als das einfache Rollover mindestens drei verschiedene Zustände hat: Frame 1 ist der Normalzustand, Frame 2 der Rollover-Zustand und Frame 3 der Gedrückt-Zustand. Optional können Sie Frame 4 als separaten Zustand für ein Rollover mit bereits gedrückter Maustaste festlegen, wenn Sie OverDown-Status einschließen (Frame 4) ankreuzen.

Leider muss dieses Verhalten für jedes an der Navigationsleiste beteiligte Segment einzeln ausgewählt werden.

Das Verhalten »Popup-Menü anzeigen«

Aus einem Segment heraus wird bei Rollover (oder einem anderen Ereignis, falls dies in der Verhalten-Palette verändert wird) ein Menü auf einem frei schwebenden DHTML-Layer eingeblendet. Dieses Menü kann in mehrere Untermenüs verschachtelt werden; jeder Eintrag kann ein Hyperlink sein. Ein solches Menü wird folgendermaßen eingerichtet:

1. Wählen Sie das gewünschte Segment aus und fügen Sie in der Verhalten-Palette das Verhalten Popup-Menü anzeigen hinzu. Im erscheinenden Dialog werden auf vier Registerkarten der Inhalt, das Erscheinungsbild, erweiterte Einstellungen und die Position des Menüs relativ zum Segment eingestellt.
       
2. Um einen Menüeintrag hinzuzufügen, können Sie unter der Rubrik Text einfach den gewünschten Text eingeben. Unter Hyperlink können Sie die URL eingeben, auf die eine Auswahl dieses Menüeintrags verweisen soll (falls er nicht noch Untermenüpunkte enthält). Außerdem kann unter Ziel wie üblich das Zielfenster oder –frame für den Link angegeben werden. Nachdem die Eingabe vollständig ist, können Sie den Plus-Button oder (Enter) drücken, um den nächsten Eintrag einzufügen.
       
    Falls der aktuelle Eintrag ein Untermenüeintrag sein soll, markieren Sie ihn einfach unten in der Liste und klicken Sie rechts oben auf den Button Menü einrücken; der Button links daneben (Menü nach außen rücken) stuft den Eintrag wieder eine Ebene höher.
       
    Wenn Sie einen Eintrag wieder entfernen möchten, wählen Sie ihn einfach aus und drücken Sie den Minus-Button.
       
    Die Einstellung des Aussehens für das Menü erklärt sich intuitiv von selbst.
       
  

Einstieg in PHP 5

Einstieg in Java

C von A bis Z

Einstieg in C++

Einstieg in Linux

Einstieg in XML

Apache 2




Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de