Fireworks, Flash und Dreamweaver. Der Grundlagenkurs zu Macromedias ''Dreamteam

Fireworks, Flash und Dreamweaver

Patricia Bosselaar

Fireworks, Flashund Dreamweaver

Der Grundlagenkurs zu Macromedias Dreamteam

An imprint of Pearson Education

Mnchen Boston San Francisco Harlow, England Don Mills, Ontario Sydney Mexico City

Madrid Amsterdam

http://www.addison-wesley.dehttp://www.pearsoned.dehttp://www.pearsoned.dehttp://www.addison-wesley.de

Die Deutsche Bibliothek CIP-Einheitsaufnahme

Ein Titeldatensatz fr diese Publikation ist bei Der Deutschen Bibliothek erhltlich

Die Informationen in diesem Produkt werden ohne Rcksicht auf einen eventuellen Patentschutz verffentlicht.Warennamen werden ohne Gewhrleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit grter Sorgfalt vorgegangen. Trotzdem knnen Fehler nicht vollstndig ausgeschlossen werden. Verlag, Herausgeber und Autoren knnen fr fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung bernehmen. Fr Verbesserungsvorschlge und Hinweise auf Fehler sind Verlag und Autoren dankbar.

Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulssig.

Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwhnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden.

Umwelthinweis: Dieses Produkt wurde auf chlorfrei gebleichtem Papier gedruckt.Die Einschrumpffolie zum Schutz vor Verschmutzung ist aus umweltvertrglichem und recyclingfhigem PE-Material.

Die hollndische Originalausgabe trgt den Titel: Dynamisch webdesign 2001 by Site Wide Management Ltd./Pearson Education Uitgeverij BV

Die in diesem Buch behandelte Trainingsmethode darf nicht ohne Zustimmung von Site Wide Management Ltd. fr Trainingsprogramme oder -Kurse bearbeitet werden (werder als bungsmaterial noch als organisatorische oder inhaltliche Grundlage).Patricia Bosselar ist ein geschtzes Markenzeichen.

10 9 8 7 6 5 4 3 2 1

04 03 02 01

ISBN 3-8273-1792-4

2001 by Addison-Wesley Verlag, ein Imprint der Pearson Education Deutschland GmbHMartin-Kollar-Strae 1012, D-81829 Mnchen/GermanyAlle Rechte vorbehalten

Einbandgestaltung: Helmut Kraus, Dsseldorfbersetzung: Henrik Schrder, Felix Hlsey, Peter Wittmann

(Gesamtverantwortung und Redaktion: Henrik Schrder, Kln)Lokalisierung der CD-ROM: Andreas Diel, KlnLektorat: Klaus Hofmann, [email protected]: Friederike Daenecke, ZlpichHerstellung: Anna Plenk, [email protected]: mediaService Dirk Matzke, SiegenDruck und Verarbeitung: Ksel, Kempten

Printed in Germany

InhaltsverzeichnisVorwort 19

Vorwort der Autorin 20

Einleitung 21e.1 Das Dreamteam..........................................21e.2 Tipps ......................................................... 22e.3 bungen.................................................... 22e.4 Internet-Anarchie....................................... 22e.5 Macintosh und/oder Windows?................. 23e.6 Welcher Browser? Internet Explorer

oder Netscape?.......................................... 23e.7 Welche Browserversion? ........................... 23e.8 Welche Internet-Verbindung? .................... 23e.9 Welches Computersystem?........................ 23e.10 Monitorgre und Bildschirmauflsung? .. 24e.11 Java(Script) ja oder nein? ........................ 24e.12 Plug-Ins oder ActiveX? ............................... 24e.13 Planung und Vorbereitung......................... 24e.14 Die CD-ROM zum Buch .............................. 25e.15 Die Website zum Buch............................... 25

Fachbegriffe 27

Fireworks 29

1 Anwendungsmglichkeiten 311.1 Merkmale von Fireworks.............................31

Werkzeuge fr den Entwurfsprozess ..........31Funktionen fr einen einfachen, effizienten Produktionsprozess................................... 32

Werkzeuge und Funktionen fr spezielle Internet-Lsungen....................... 32Dateiformate: Importieren, Exportieren und Speichern............................................ 33

1.2 Systemanforderungen ............................... 341.3 Integration mit Dreamweaver .................... 341.4 Anmerkungen ............................................ 35

2Arbeitsumgebung 372.1 Das Dokumentenfenster ........................... 372.2 Voreinstellungen........................................ 382.3 Ein neues Dokument erstellen ................... 402.4 Leinwand ................................................... 402.5 Symbolleisten............................................ 422.6 Bedienfelder und Inspektoren ................... 432.7 Navigieren ................................................. 452.8 Anzeigemodus ........................................... 452.9 Browservorschau ...................................... 462.10 Hilfsmittel: Lineale, Gitternetz

und Hilfslinien............................................ 462.11 Kontextmens............................................ 472.12 Mauszeiger und Schieberegler................... 48

3Werkzeuge 493.1 Die Werkzeugleiste .................................... 493.2 Das Bedienfeld Werkzeugoptionen............ 493.3 Objekte ...................................................... 503.4 Objektmodus und Bildbearbeitungsmodus 513.5 Drehen, spiegeln, neigen und verzerren .....513.6 Das Bedienfeld Info.................................... 533.7 Der Objekt-Inspektor ................................. 53

4Vektoren 554.1 Vektorobjekte erstellen ............................. 554.2 Vektorpfade und Bzier-Punkte ................. 564.3 Vektorpfade ndern ................................... 57

6 Inhaltsverzeichnis

4.4 Vektorpfade umformen ............................. 584.5 Einen Pfad duplizieren............................... 594.6 Einen Pfad vergrern oder verkleinern .... 594.7 Vektorpfade kombinieren.......................... 59

5 Text 615.1 Einen Text erstellen ....................................615.2 Text formatieren ........................................ 625.3 Schriftart ................................................... 625.4 Schriftgre .............................................. 635.5 Farbe und Stil ............................................ 635.6 Unterschneidung ....................................... 635.7 Zeilenabstand............................................ 635.8 Ausrichtung, Orientierung und Richtung ... 645.9 Horizontale Skalierung .............................. 645.10 Grundlinienverschiebung .......................... 645.11 Anti-Aliasing .............................................. 655.12 Textobjekte ............................................... 655.13 Text importieren ........................................ 655.14 Text an einen Pfad anfgen ....................... 665.15 Text in Vektorobjekt oder

Bitmap konvertieren.................................. 66

6Farben, Linien, Fllungen, Effekte und Stile 67

6.1 Arbeiten mit Farben .................................. 676.2 Das Bedienfeld Farbfelder ......................... 676.3 Das Bedienfeld Farbmischer ...................... 696.4 Pinselstrich und Fllen .............................. 696.5 Das Bedienfeld Pinselstrich ....................... 69

Pinselstrich .................................... 706.6 Das Bedienfeld Fllen................................ 726.7 Texturen und Muster ................................ 73

Die Optionen des Bedienfelds Fllen ..................................... 73

6.8 Das Bedienfeld Effekt ............................... 746.9 Effekte anwenden...................................... 746.10 Effekte anwenden...................................... 766.11 Effekte lschen.......................................... 766.12 Effektkombinationen speichern................. 776.13 Standardeffekte ..................................... 77

6.14 Filter als Live-Effekte verwenden ............... 77Die Effekte Weichzeichnen ..................... 80Die Effekte Andere.................................. 80Die Effekte Scharf stellen ....................... 80

6.15 Das Bedienfeld Stile................................... 80Einen neuen Stil generieren ........................81Einen Stil zuweisen .....................................81Einen Stil ndern.........................................81

7 Bitmaps 837.1 Bildobjekte im Objektmodus bearbeiten ... 837.2 Bildobjekte im Bildbearbeitungsmodus

bearbeiten ................................................. 847.3 Pixel markieren .......................................... 847.4 Markierte Pixel bearbeiten......................... 857.5 Die Werkzeuge

des Bildbearbeitungsmodus ...................... 85Bitmaps.......................................... 86Bilder maskieren ............................ 87

8Frames und Ebenen 898.1 Das Bedienfeld Frames .............................. 898.2 Frames hinzufgen .................................... 898.3 Frames lschen.......................................... 908.4 Frames verwenden..................................... 908.5 Frames und Ebenen ................................... 908.6 Allen Frames Objekte hinzufgen .............. 908.7 Die Option Auf Frames verteilen ..............918.8 Exportieren .................................................918.9 Frames importieren.....................................91

FreeHand, Frames und animiertes GIF............................................ 92

8.10 Der Zwiebelschicht-Effekt .......................... 928.11 Einstellungen fr GIF-Animationen............. 938.12 Das Bedienfeld Ebenen.............................. 948.13 Standardebenen ........................................ 948.14 Neue Ebenen erstellen............................... 948.15 Ebenen lschen ......................................... 958.16 Mit Ebenen arbeiten................................... 958.17 Ebenen und Frames ................................... 968.18 Exportieren ................................................ 96

Eine GIF-Animation erstellen .......... 96

Inhaltsverzeichnis 7

9Optimieren und exportieren 999.1 Mit Hilfe von Bedienfeldern optimieren

und exportieren ........................................ 999.2 Optimieren und exportieren mit Hilfe

des Dialogfelds Exportvorschau ...............1029.3 Der Vorschaubereich ...............................1029.4 Die Exporteinstellungen der Registerkarten

des Dialogfelds Exportvorschau ...............1049.5 Die Registerkarte Optionen des

Dialogfelds Exportvorschau......................1049.6 Die Formate GIF und animiertes GIF.......... 1049.7 Anmerkungen zur Transparenz ................. 107

GIF und Transparenz ..................... 108Transparenz und Anti-Aliasing ...... 109

9.8 JPEG.......................................................... 1109.9 Der Export-Assistent und der

In Grsse exportieren-Assistent ............ 1129.10 Die Registerkarte Datei des

Dialogfelds Exportvorschau...................... 1129.11 Die Registerkarte Animation des

Dialogfelds Exportvorschau...................... 1139.12 Das Dialogfeld Exportieren ....................... 1149.13 Inhalte exportieren .................................. 1179.14 Einen Bildbereich exportieren................... 1199.15 HTML-Quelltext kopieren.......................... 119

10Den Produktionsprozess beschleunigen 121

10.1 Das Projektprotokoll................................. 12110.2 Die Option Suchen und Ersetzen...........12210.3 Wo soll gesucht und ersetzt werden? .......12310.4 Was soll gesucht und ersetzt werden?...... 123

Text suchen und ersetzen......................... 123Eine Schriftart suchen und ersetzen .........124Eine Farbe suchen und ersetzen ...............124URLs suchen und ersetzen........................124Nichtwebfhige Farben suchen und ersetzen............................................. 124

10.5 Batchverarbeitung....................................12510.6 Batch-Skripts............................................127

Batchverarbeitung mit der Option Suchen und Ersetzen ................. 127

10.7 Das Bedienfeld Verlauf .............................12910.8 Arbeitsschritte rckgngig machen...........13010.9 Arbeitsschritte wiederholen......................13010.10 Arbeitsschritte in verschiedenen

Dokumenten kopieren und einfgen......... 13110.11 Einen Fireworks-Befehl mit Hilfe des

Bedienfelds Verlauf erstellen.................... 131Einen Fireworks-Befehl erstellen...132

11Symbole 135Ein neues Symbol erstellen.......................136Ein oder mehrere markierte Objekte in ein Symbol verwandeln.............................136Ein Symbol auf der Leinwand einfgen .....137Ein Symbol von mehreren Frames erstellen .......................................137Symbole bearbeiten..................................137Symbole lschen.......................................138Eine Instanz bearbeiten ............................138Die Verknpfung einer Instanz aufheben ..138

11.1 Symbole exportieren, importieren und aktualisieren .....................................138Kopieren, einfgen und verschieben.........139Exportieren und importieren .....................139

11.2 Importierte Symbole aktualisieren............14011.3 Die Verknpfung mit dem originalen

Symbol aufheben......................................14011.4 Tweening mit Symbolen............................140

GIF-Animation mit Tweening ......... 141GIF-Animation mit Tweening

von Effekten..............................................143

12Spezielle Internet-Werkzeuge und -Funktionen 145

12.1 Das Bedienfeld URL ..................................14612.2 Imagemaps und Hotspots.........................146

Hotspots .......................................14812.3 Segmente .................................................150

Einstellungen von Segmentobjekten im Objekt-Inspektor festlegen...................152Segmentobjekte und Exporteinstellungen 153Segmente exportieren ..............................154

Segmente......................................154


12.4 Segmente und Hotspots kombinieren ...... 156Anmerkungen zum Thema Segment- und Hotspot-Objekte:...............................156

12.5 HTML-Eigenschaften.................................156Segment-Optionen .................................. 157Imagemaps...............................................159

12.6 Verhaltensweisen ..................................... 15912.7 Parameter der Verhaltensweisen.............. 162

Einfaches Rollover ....................................162Bild austauschen......................................162Grafik fr Navigationsleiste einstellen...... 163

Eine Rollover-Schaltflche mit der Verhaltensweise Einfaches Rollover erstellen ..................165

Eine Navigationsleiste erstellen....167Hotspots und Segmente in

Kombination mit der Verhaltensweise Bild austauschen......................................168

12.8 Schaltflchensymbole .............................. 169Ein Schaltflchensymbol erstellen............ 170Eine Schaltflche bearbeiten ....................174Den Text einer Schaltflche bearbeiten ... 175URL-Link, Ziel, Dateiname oder Exporteinstellungen einer Schaltflche ndern.................................. 175

Eine Navigationsleiste mit Schaltflchensymbolen erstellen.............. 177

12.9 Das HTML-Dokument................................ 181Eine Navigationsleiste mit

Segmenten, Hotspots und der Verhaltensweise Bild austauschen .......183

Ein Bild durch ein externes Dokument austauschen............................ 188

13Tipps & Tricks 193

Flash 195

1 berblick 1971.1 Internet, World Wide Web.........................1971.2 Stand-alone-Anwendung ..........................1971.3 Digitale Videodateien oder nummerierte

Bitmaps fr Multimedia-Anwendungen.....1971.4 Bitmap- oder Vektordateien fr

die weitere Bearbeitung in Grafikprogrammen................................197

1.5 Merkmale von Flash..................................1981.6 Importieren und Exportieren.....................1991.7 Systemanforderungen ..............................1991.8 Anmerkungen ...........................................199

2Arbeitsumgebung 2012.1 Einstellungen........................................... 202

Kategorie Allgemein................................. 202Kategorie Bearbeitung............................. 203

2.2 Kategorie Zwischenablage ....................... 2042.3 Filmeigenschaften.................................... 204

Bildrate .................................................... 205Die Gre der Bhne ............................... 205Hintergrundfarbe ..................................... 206

2.4 Die Bhne ................................................ 2062.5 Hilfsmittel im Arbeitsbereich.................... 206

Lineale ..................................................... 206Gitternetz................................................. 206Hilfslinien................................................. 207Ausrichten an den Hilfslinien ................... 207Hilfslinien verschieben oder lschen ....... 207

2.6 Die Zeitleiste............................................ 2072.7 Bedienfelder ............................................ 2092.8 Tastenkombinationen ............................... 2112.9 Zoomen und Scrollen ...............................2132.10 Der Mauszeiger.........................................2142.11 Abspielen..................................................2142.12 Dateien und Dateiformate.........................215


3Werkzeuge 2173.1 Werkzeugleiste ........................................2173.2 Farben ......................................................2183.3 Die Bedienfelder Fllung und Linie ...........219

Das Bedienfeld Linie.................................219Das Bedienfeld Fllung............................ 220

3.4 Vektorgrafiken......................................... 2203.5 Linienwerkzeug ........................................2213.6 Rechteck- und Ellipsenwerkzeug ..............2213.7 Das Freihandwerkzeug ............................ 2223.8 Das Pinselwerkzeug ................................ 223

Zeichnen mit dem Pinselwerkzeug................................ 223

3.9 Das Stiftwerkzeug ................................... 2243.10 Das Pfeilwerkzeug ................................... 226

Markieren .................................... 2273.11 Das Lassowerkzeug ................................. 2273.12 Das Unterauswahl-Werkzeug .................. 2273.13 Auswahl drehen oder skalieren ............... 2283.14 Auswahl verschieben............................... 228

Auswahl kopieren.................................... 2293.15 Auswahl ausrichten ................................. 2293.16 Vektorobjekte bearbeiten........................ 230

Mit Hilfe des Pfeilwerkzeugs (mit dem schwarzen Pfeil in der Werkzeugleiste) ... 230Mit Hilfe des Unterauswahl-Werkzeugs (mit dem weien Pfeil in der Werkzeugleiste) ................................ 230Mit Hilfe des Stiftwerkzeugs (mit der Fllfeder in der Werkzeugleiste)..231

3.17 An Objekten ausrichten ........................... 232An Objekten ausrichten ............... 233

3.18 Ausschneiden und zusammenfgen ........ 2333.19 Gruppieren .............................................. 234

Ausschneiden, zusammenfgen und gruppieren........................................ 234

3.20 Spezialeffekte.......................................... 235Linien in geschlossene Vektorpfade umwandeln ......................... 235Vektorformen vergrern oder verkleinern ...................................... 235Anti-Aliasing auf Vektorobjekte anwenden ........................ 236

3.21 Andere Werkzeuge................................... 236Das Radiergummiwerkzeug ..................... 236Das Farbeimerwerkzeug .......................... 237Tintenfasswerkzeug................................. 237Pipette ..................................................... 237

3.22 Farben und Farbverlufe .......................... 2373.23 Farbtne entfernen und hinzufgen......... 2383.24 Farbverlufe erstellen und zur

Palette hinzufgen................................... 2393.25 Farben importieren und exportieren ........ 240

Farben und Fllungen....................2413.26 Farbverlufe verwenden und ndern........ 242

Farbverlufe mit und ohne Sperrung ......................................... 243

4Text 2454.1 Textwerkzeug........................................... 245

Textobjekte erstellen ............................... 245Text bearbeiten........................................ 246Textblock bearbeiten ............................... 246

4.2 Textattribute ndern ................................ 246Bedienfeld Zeichen .................................. 246Bedienfeld Absatz.................................... 248Bedienfeld Fllung................................... 249Bedienfeld Textoptionen.......................... 249

Text .............................................. 252Dynamischer Text, Texteingabe

und statischer Text .................................. 253Text und Hyperlinks ..................... 254

5 Bibliotheken, Symbole und Instanzen 257

5.1 Symbole................................................... 2575.2 Bibliothek ................................................ 259

Bibliotheksfenster........................ 2625.3 Instanzen ................................................. 263

Eigenschaften der Instanz........................ 2645.4 Farbeffekte in Instanzen........................... 2655.5 Symbole bearbeiten................................. 265

Symbole und Instanzen................ 2675.6 Schriftartsymbole .................................... 269

Ein Schriftartsymbol erstellen und verwenden ........................................ 269


5.7 Gemeinsame Bibliotheken....................... 270Eine gemeinsame Bibliothek erstellen..... 270Symbole aus einer gemeinsamen Bibliothek importieren............................. 272Bestandteile gemeinsamer Bibliotheken verndern ........................... 273Einige Anmerkungen zur Arbeit mit gemeinsamen Bibliotheken ..................... 273

6Ebenen und Szenen 2756.1 Ebenen .................................................... 275

Ebenen einfgen oder lschen ................ 276Ebeneneigenschaften .............................. 276Ebenen aktivieren, ausblenden und sperren ............................................. 277Die aktive Ebene...................................... 277

6.2 Pfadebenen, Maskenebenen und Fhrungsebenen............................... 278Pfadebenen ............................................. 278Maskenebenen........................................ 278Fhrungsebenen ..................................... 279

6.3 Szenen .................................................... 279Mit Szenen arbeiten ................................ 279Szenen in einem Flash-Player-Film .......... 280

7 Animation 2817.1 Bilder, Schlsselbilder

und Zwischenbilder ..................................281Bilder und Schlsselbilder erstellen ........ 282

7.2 Bilder und Zeitleiste ............................... 283Bildbezeichnungen.................................. 285

7.3 Bild-fr-Bild-Animation............................ 286Bild-fr-Bild-Animation ................ 286

7.4 Bewegungs-Tweening ............................. 288Schlsselbilder in ein Bewegungs-Tween einfgen ....................................... 290Drehen in einem Bewegungs-Tween.........291Abbremsen ...............................................291

Bewegungs-Tween, Methode 1 .... 292Bewegungs-Tween, Methode 2... 293

7.5 Form-Tweening........................................ 294Form-Tweening ............................ 294

7.6 Die Zeitleiste lesen .................................. 295

7.7 Farbeffekte animieren.............................. 296Farbeffekte in einem

Bewegungs-Tween animieren .................. 2967.8 Bewegungs-Tween an einem

Pfad ausrichten ....................................... 297Einen Bewegungs-Tween erstellen .......... 297Eine Pfadebene erstellen ......................... 297Den Pfad der Pfadebene erstellen............ 297Das Objekt am Pfad entlang fhren ......... 297Ein schon erstelltes Bewegungs-Tween mit einem Pfad kombinieren .................... 298

Bewegungs-Tween eines springenden Balls .................................... 299Objekte in mehreren Ebenen mit Hilfe einer Pfadebene animieren ...................... 300

Bewegungs-Tween mehrerer Objekte entlang eines Pfades .................. 300

7.9 Form-Tweening mit Formmarken ............. 302Formmarken................................. 303

7.10 Zwiebelschalen ........................................ 304Eine vollstndige Animation verschieben. 305Zwiebelschalen verwenden, um eine Animation genau abzustimmen ............... 305

Zwiebelschalen ............................ 3067.11 Animation in Symbolen............................ 307

Animation in Symbolen ................ 3077.12 Animation von Maskenebenen................. 308

Text mit einem durchlaufenden Farbverlauf als Banner ............................. 308

8Interaktivitt: ActionScript (Einfhrung) 311

8.1 Das Bedienfeld Aktionen........................... 3118.2 Basisaktionen ...........................................3138.3 Bilder benennen .......................................3138.4 Bildaktionen .............................................314

Bildaktionen..................................3148.5 Schaltflchensymbole und Aktionen.........315

Schaltflchen ................................318Animierte Schaltflche ..................319

8.6 Einer Schaltflche mehrere Aktionen zuweisen................................... 320

8.7 Hotspot-Schaltflchen ............................. 320Hotspots .......................................321


9Audio und Bitmaps 3259.1 Sounds .................................................... 325

Sounds in der Zeitleiste........................... 326Sound in

einem Schaltflchensymbol..................... 3269.2 Das Bedienfeld Sound ............................. 3279.3 Sounds komprimieren ............................. 329

Sounds ........................................ 3329.4 Bitmaps ................................................... 3349.5 Fireworks PNG ........................................ 3359.6 FreeHand................................................. 337

Farbeffekte .............................................. 337Bitmap als Fllung................................... 337Der Zauberstab........................................ 338Bitmaps nachzeichnen ............................ 338

9.7 Bitmaps komprimieren ............................ 339Bereits komprimierte Bitmaps................. 340

Bitmaps ........................................3419.8 Die Option Aktualisieren

im Bibliotheksfenster ............................. 3429.9 Die Option Bearbeiten

im Bibliotheksfenster ............................. 343

10ActionScript 34510.1 Das Bedienfeld Aktionen ......................... 345

Normaler Modus und Expertenmodus .... 34510.2 Aktionsliste ............................................. 346

Kopieren, Einfgen und Lschen im Bedienfeld Aktionen ................................ 346Das Popupmen Optionen im Bedienfeld Aktionen ................................ 347Die Reihenfolge im ActionScript .............. 348Hilfe im Bedienfeld Aktionen ................... 348Tastenkombinationen im Bedienfeld Aktionen ................................ 348

10.3 Aktionen in Filmsequenzen...................... 34910.4 Ereignis, Objekt/Ziel, Aktion.................... 349

Ereignisse ............................................... 349Ziele ........................................................ 350Filmsequenzen oder andere Flash-Player-Filme als Ziel ....................... 350

10.5 Aktionen .................................................. 35310.6 Variablen ................................................ 353

10.7 Ausdrcke ............................................... 35410.8 Operatoren ............................................. 35510.9 Aktionen bersicht................................ 355

Die Aktion goto ........................................ 356Die Aktion goto ............................ 356

Die Aktion getURL .................................... 357getURL ......................................... 358

Die Aktion FSCommand............................ 358Die Aktionen loadMovie und unloadMovie..................................... 359

Die Aktionen loadMovie und unloadMovie..................................... 360Die Aktion loadVariables.......................... 360

Die Aktion loadVariables...............361Die Aktion with .........................................361

Die Aktion with............................. 362Die Aktionen if, else und else if ................ 363

Passwort ...................................... 363Die Aktion setProperty ............................. 364

Die Aktionen setProperty und getProperty....................................... 366Die Aktion setVariable ............................. 367

Die Aktion setVariable.................. 367Die Aktion while....................................... 369

Die Aktion while ........................... 369Die Aktionen duplicateMovieClip und removeMovieClip ............................. 370

Die Aktionen duplicateMovieClip und removeMovieClip ...............................371Die Aktionen startDrag und stopDrag ...... 372

Die Aktion dragMovieClip............. 37310.10 Weitere Anwendungsmglichkeiten......... 374

Popupmen ............................................. 374Popupmen ................................. 374

Eingabeformular ...................................... 377Eingabeformular .......................... 377

Preloading-Animation .............................. 379Preloading-Animation mit der

Aktion if ................................................... 380Tastaturereignis........................................381

On keyPress und with....................381Textfeld mit Bildlauf................................. 382

Text mit Bildlauf ........................... 382Sound mit einer Schaltflche starten und anhalten............................................ 383


Sound mit einer Schaltflche starten und anhalten ............................... 383Andere Mauszeiger.................................. 384

Anderer Mauszeiger..................... 38410.11 Drucken aus dem Flash Player ................. 38510.12 Smart-Filmsequenzen.............................. 388

Smart-Filmsequenz...................... 38810.13 Debugging............................................... 389

Vor dem Start .......................................... 390Regeln und Vereinbarungen .................... 390Testen und speichern .............................. 390Debugger..................................................391Die Registerkarte berwachen..................391

10.14 Film-Explorer ........................................... 392Suchen im Film-Explorer .......................... 393Mit dem Film-Explorer arbeiten................ 393

11Testen, Optimieren und Exportieren 397

11.1 Testen ..................................................... 39711.2 Wie knnen Sie Flash-Filme optimieren? . 39911.3 Exportieren als Flash-Player-Film..............40111.4 Exportieren mit der

Option Verffentlichen ............................ 403Einstellungen fr Verffentlichungen Registerkarte Formate .......................... 404Einstellungen fr Verffentlichungen Registerkarte Flash ............................... 404Einstellungen fr Verffentlichungen Registerkarte HTML .............................. 404Einstellungen fr Verffentlichungen Registerkarte GIF .................................. 408Einstellungen fr Verffentlichungen Registerkarte JPEG .................................410Einstellungen fr Verffentlichungen Kategorie PNG........................................410Welches Bild wird als GIF-, JPEG- oder PNG-Dokument exportiert?............... 411

11.5 Flash Player 5 und ltere Versionen ......... 411Untersuchen, ob Flash Player 5

vorhanden ist ...........................................41211.6 Vorlagen...................................................41311.7 Einen Flash-Player-Film im Browser

bildschirmfllend abspielen .....................414

11.8 Die Aktion getURL mit dokumentrelativenURL-Links..................................................414

11.9 Den Flash Player im Browser deaktivieren 415Internet Explorer unter Windows mit ActiveX-Steuerelement .............................415Netscape unter Windows ..........................415Netscape unter Macintosh ........................415Internet Explorer unter Macintosh ............416

11.10 QuickTime.................................................416

12Tipps & Tricks 419Macintosh Windows ...............................419Symbole....................................................419Tweening-Animation .................................419Zoomfaktor ...............................................419Illustrator, FreeHand und CorelDraw........ 420Bibliothek ................................................ 420Internet Explorer fr Macintosh ............... 420Netscape.................................................. 420Interessante Websites ..............................421

Mit Dreamweaver dynamische Websites erstellen 423

1 Anwendungsmglichkeiten 4251.1 Flexible und offene Arbeitsumgebung...... 425

Funktionalitt .......................................... 425Kompatibilitt .......................................... 426

1.2 Merkmale von Dreamweaver ................... 4261.3 Systemanforderungen ............................. 4271.4 Anmerkungen .......................................... 427

Die bungen ............................................ 427

2Arbeitsumgebung 4292.1 Das Dokumentenfenster .......................... 4292.2 Browservorschau ......................................431


2.3 Tooltipps und Online-Hilfe ...................... 4322.4 Paletten, Inspektoren und Fenster .......... 4322.5 Objektpalette .......................................... 4332.6 Eigenschaften-Inspektor ......................... 4352.7 Launcher ................................................. 4352.8 HTML-Inspektor ....................................... 4352.9 Elemente markieren ................................ 4362.10 Kontextmens ........................................ 4372.11 Farben .................................................... 4382.12 Mit Dreamweaver arbeiten ...................... 4392.13 Layout-Hilfen .......................................... 440

Bildvorlage ............................................. 440Gitternetz .................................................441Lineale......................................................441

2.14 Dreamweaver als Hter Ihrer Website...4412.15 Einstellungen........................................... 4422.16 Dokumente mit einem externen

Editor ffnen ........................................... 442

3Eine Website in Dreamweaver definieren 445

3.1 Lokaler Ordner ........................................ 4453.2 Zugriffsinformationen ............................. 4463.3 Eine Website schrittweise definieren....... 447

Kategorie Lokale Infos ............................ 447Kategorie Web-Server-Infos..................... 448Kategorie Ein-/Auschecken ..................... 449Kategorie Sitemap-Layout ....................... 450Mehrere Websites ....................................451

3.4 Das Site-Fenster ...................................... 4523.5 Eine bereits bestehende Website

mit Dreamweaver bearbeiten .................. 453Eine Website definieren ............... 453

4Links und Hyperlinks 4554.1 Browservorschau..................................... 4574.2 Einen Link verfolgen ............................... 4574.3 Links erstellen ......................................... 4584.4 Das Ziel des Links ................................... 4594.5 Anker....................................................... 4594.6 E-Mail-Links............................................. 4604.7 Nowhere-Links ........................................ 4604.8 Script-Links ..............................................4614.9 Links berprfen ......................................461

5 Eine Webseite erstellen 4635.1 Eine neue Webseite auf Basis eines

neuen, leeren Dokuments erstellen ......... 4635.2 Dateigre............................................... 4645.3 Testen...................................................... 4645.4 Ziel-Browser berprfen ......................... 465

6Text 4676.1 Wrapping und Abstze............................. 4676.2 Text kopieren und einfgen ..................... 4676.3 Textformatierung ..................................... 468

Standard-HTML-Tags zur Textformatierung im Eigenschaften-Inspektor ..................... 468Absatz- und berschrift-Tag .................... 468Textcharakteristika .................................. 469

6.4 HTML-Stile ............................................... 472HTML-Stile erstellen................................. 473Einen HTML-Stil anwenden: ..................... 474Einen HTML-Stil bearbeiten: .................... 474Einen HTML-Stil entfernen: ...................... 474

6.5 Hyperlinks fr Text erstellen ................... 474Die Homepage erstellen............... 475Site-Map-bersicht ...................... 479

7 Bilder 4817.1 Bilder einfgen .........................................4817.2 Eigenschaften-Inspektor .......................... 482

Ein Bild auf der Homepage einfgen................................. 483

7.3 Imagemaps und Hotspots........................ 484Imagemaps .................................. 487

8Tabellen und Ebenen 4898.1 Tabellen................................................... 489

Eine Tabelle erstellen............................... 489Ausschneiden, kopieren und einfgen..... 493Tabellen-Tags und Tabellenformatierung 493Zeilen und Spalten hinzufgen und lschen ............................................. 494Zeilen oder Spalten in Tabellen numerisch oder alphabetisch sortieren ... 494Professionell gestaltete Tabellenlayouts zur schnellen Tabellenformatierung......... 495


Tabellen....................................... 495Tabellen formatieren

und sortieren........................................... 4978.2 Tabellendaten importieren ...................... 498

Importieren Sie Tabellendaten aus Excel ................................................. 499

8.3 Eine Tabelle exportieren .......................... 5008.4 Ebenen .................................................... 500

Ebenen anzeigen, markieren, lschen und ndern .............................................. 502Ebeneneigenschaften mit dem Eigenschaften-Inspektor einstellen ......... 503

8.5 Netscape-Resize Fix hinzufgen/entfernen ............................. 504

Ebenen ........................................ 5058.6 Absolute Positionierung mit Hilfe von

Ebenen und Konvertierung von Ebenen in Tabellen .............................................. 506

Tracing-Bild, Ebenen und Tabellen............................................ 508

8.7 Eine Standard-Webseite in eine Webseite mit Ebenen umwandeln ........... 509

9HTML 511Server Markup Tags.................................. 511

9.1 HTML-Inspektor ........................................5129.2 Der Quick-Tag-Editor ................................513

Das Hints-Popupmen..............................514Der Modus HTML einfgen....................515Der Modus Tag bearbeiten....................515Der Modus Tag um Objekt legen ...........516Ein HTML-Tag entfernen ...........................516

9.3 Externe HTML-Editoren.............................5179.4 HTML-Quelltext optimieren ......................5179.5 Word-HTML-Dokumente optimieren .........518

Ein Word-HTML-Dokument ffnen.519

10Frames 52110.1 Frames erstellen ...................................... 52210.2 Frames speichern .................................... 52210.3 Frameset- und Frame-Eigenschaften ....... 523

Frameset-Eigenschaften .......................... 524Frame-Eigenschaften ............................... 525

10.4 Browservorschau..................................... 52510.5 Hyperlinks ............................................... 526

10.6 NoFrames-Inhalt ...................................... 526Eine neue Webseite mit

Frames erstellen ...................................... 52610.7 Vordefinierte Framesets einfgen ........... 530

Links ........................................................ 530Rechts...................................................... 530Oben........................................................ 530Unten........................................................531Links und oben .........................................531Links oben ................................................531Oben links.................................................531Aufteilen .................................................. 532

11Stylesheets 53311.1 Verschiedene Arten von CSS-Stilen.......... 53411.2 Einen CSS-Stil definieren ......................... 534

Kategorie Typ........................................... 535Kategorie Hintergrund ............................. 536Kategorie Block........................................ 536Kategorie Feld.......................................... 536Kategorie Rahmen ................................... 537Kategorie Liste......................................... 537Kategorie Positionierung ......................... 537Kategorie Erweiterungen ......................... 538

11.3 CSS-Stile bearbeiten................................ 53811.4 Externe Stylesheets ................................. 538

Ein neues, externes Stylesheet erstellen.. 539Ein externes Stylesheet verknpfen......... 540Ein externes Stylesheet bearbeiten...........541

11.5 CSS-Stile anwenden..................................54111.6 CSS-Stile in HTML-Markup konvertieren . 542

CSS-Stile ...................................... 543

12Formulare 549Beispiel:................................................... 550

12.1 bersicht ber die Objekte, die in ein Formular eingefgt werden knnen.... 552Textfelder................................................. 552Schaltflchen ........................................... 552Kontrollkstchen...................................... 552Optionsschaltflchen ............................... 553Listen und Mens .................................... 553Bildfelder ................................................. 554

Ein E-Mail-Formular erstellen ....... 555


13Verhaltensweisen 55913.1 Verhaltensweisen verwenden.................. 56013.2 Verhaltensweisen und Hyperlinks ............56113.3 Verhaltensweisen bearbeiten ...................56113.4 Verhaltensweisen und Browser ............... 56213.5 In Dreamweaver standardmig zur

Verfgung stehende Verhaltensweisen ... 563JavaScript aufrufen .................................. 564Eigenschaft ndern.................................. 564Browser berprfen ................................ 564Plug-In berprfen .................................. 565Shockwave- oder Flash-Film steuern ....... 565Ebene ziehen ........................................... 565Gehe zu URL ............................................ 566Sprung-Men .......................................... 566Sprung-Men Gehe zu ............................. 567Browser-Fenster ffnen ........................... 567Audio abspielen....................................... 568Popup-Meldung....................................... 568Bilder vorausladen .................................. 568Bild fr Nav-Leiste festlegen.................... 569Text definieren > Textrahmen einstellen . 569Text definieren > Ebenentext festlegen ... 570Text definieren > Text der Statusleiste .... 570Text definieren > Text von Textfeld einstellen ................................... 570Ebenen ein-/ausblenden ..........................571Bild austauschen......................................571Vertauschtes Bild wiederherstellen ......... 572Zeitleiste > Zeitleiste wiedergeben........ 572Zeitleiste > Zeitleiste anhalten .............. 572Zeitleiste > Gehe zu Zeitleisten-Bild ...... 572Formular berprfen ............................... 573

13.6 Verhaltensweisen in HTML-Dokumenten, die mit lteren Versionen von Dreamweaver erstellt wurden.................. 573

Rollover-Bilder erstellen .............. 574Mittels der Aktion Browser

berprfen eine Webseite mit Ebenen in eine Seite mit einer Tabelle konvertieren................................ 576

Frames in Kombination mit der Aktion Gehe zu URL .............................. 577

Hotspots in Kombination mit der Aktion Bild austauschen....................... 578

13.7 Das Objekt Navigationsleiste einfgen. 578Eine Navigationsleiste erstellen:.............. 579Eine vorhandene Navigationsleiste bearbeiten ....................581Der Navigationsleiste ein Bild als Schaltflche hinzufgen .......................... 582

Frames und das Objekt Navigationsleiste einfgen................... 582

13.8 Ein Sprung-Men einfgen ...................... 584Ein Sprung-Men erstellen....................... 584Ein Sprung-Men bearbeiten ................... 586

Ein Sprung-Men einfgen........... 586

14Animationen mit Zeitleisten 58914.1 Eine Animation erstellen .......................... 590

Eine Animation durch Verschieben der Ebene im Dokumentenfenster erstellen ....591Schlsselbilder hinzufgen.......................591Schlsselbilder entfernen oder verschieben ......................................591Eine Animation verkrzen oder verlngern ........................................591Eine Animation mit einem anderen Zeitleistenbild beginnen lassen ............... 592Eine Animation entfernen......................... 592Das Objekt einer definierten Animation austauschen ........................... 592Animationen kopieren und einfgen ........ 592Verhaltensweisen an einem bestimmten Bild der Zeitleiste ausfhren.................... 593

14.2 Bildeigenschaften ndern ........................ 59314.3 Mehrere Zeitleisten.................................. 594

Eine Animation mit einer Zeitleiste erstellen ................................... 594

Ebene vorausladen ...................... 598Zeitleisten in Kombination

mit der Aktion Gehe zu URL .................. 599


15Bibliothekselemente und Vorlagen 601

15.1 Bibliothekselemente ................................601Was Sie ber Bibliothekselemente wissen mssen:....................................... 602Was knnen Sie mit einem Bibliothekselement anfangen? ................ 602Bibliothekselemente erstellen................. 603Bibliothekselemente einfgen................. 603Bibliothekselemente ndern ................... 604Webseiten mit Bibliothekselementen aktualisieren ........................................... 604Verhaltensweisen in einem Bibliothekselement bearbeiten ............... 605Ein Bibliothekselement lschen............... 606Bibliothekselemente in Dokumenten als editierbar definieren .......................... 606

Bibliothekselemente.................... 60615.2 Vorlagen.................................................. 607

Was Sie ber Vorlagen wissen mssen: .. 608Vorlagen erstellen ................................... 609Vorhandene Elemente einer Vorlage als editierbaren Bereich definieren.......... 609Einen leeren Bereich als editierbar definieren.................................610Editierbare Bereiche in gesperrte Bereiche umwandeln................................610Vorlagen ndern .......................................610Vorlagen verwenden................................. 611Die Verknpfung zwischen Vorlage und Webseite aufheben............................612Editierbare Bereiche einer Webseite suchen ......................................612Auf welcher Vorlage basiert die Webseite? ...........................................612Auf Vorlagen basierende Webseiten nach einer nderung der Vorlage aktualisieren................................613Zeitleisten, CSS-Stile und Verhaltensweisen in Vorlagen verwenden 613Zum Schluss noch einige Anmerkungen ...614

Vorlagen .......................................614Vorlagen austauschen ..................617

16Verlauf-Palette 619Arbeitsschritte mit Hilfe der Verlauf-Palette rckgngig machen ......... 620Arbeitsschritte mit Hilfe der Verlauf-Palette wiederholen .................... 620Arbeitsschritte mit Hilfe der Option Aufzeichnung starten wiederholen ........621Arbeitsschritte mit Hilfe der Verlauf-Palette in verschiedenen Dokumenten kopieren und einfgen ............................ 622Einen Dreamweaver-Befehl mit Hilfe der Verlauf-Palette erstellen .................... 623

Einen Dreamweaver-Befehl erstellen........................................ 624

17Head-Bereich 62517.1 Objektpalette Kategorie Head ............... 625

Meta einfgen.......................................... 626Schlsselwrter einfgen ........................ 626Beschreibung einfgen ............................ 626Aktualisierung einfgen........................... 626Basis einfgen ......................................... 626Hyperlink einfgen................................... 626

18Site-Management 62718.1 Site-Fenster ............................................. 628

Die Ansicht des Site-Fensters................... 628Schaltflchen im Site-Fenster .................. 628Dropdown-Liste der Sites......................... 629Ansicht Dateien der Site ....................... 629Ansicht Site-Map...................................... 630Aktuelle Task stoppen ............................. 630

18.2 Szenarien zur Datenbertragung ............. 630Verbindung herstellen ............................. 630bertragung von entfernter Site zum lokalen Ordner (Ein-/Auschecken aktiviert)...................... 630bertragung vom lokalen Ordner zur entfernten Site (Ein-/Auschecken aktiviert).......................631bertragung von entfernter Site zum lokalen Ordner (Ein-/Auschecken nicht aktiviert)..............631


Lokale Bearbeitung (Ein-/Auschecken aktiviert) ..................... 632Abhngige Dateien einschlieen?............ 632

18.3 Welche Version ist aktueller?................... 633Dokumente im lokalen Ordner oder in der entfernten Site synchronisieren......... 634FTP-Protokoll ........................................... 635

18.4 Site-Map-bersicht ................................. 635Die Basisstruktur einer Website

im Site-Fenster definieren ....................... 636Dokumente ein- und ausblenden............. 637Eine andere Webseite als Stammordner anzeigen ........................... 638Seitentitel oder Dokumentnamen............ 638Site-Map speichern ................................. 638Bedeutung der Site-Map-Symbole........... 638

18.5 Dokumente und Ordner im Site-Fenster verschieben, umbenennen und reorganisieren .................................. 639

18.6 Hyperlinks in der gesamten Website ndern ....................................... 639

Site Management, Hyperlinks und Browser berprfen.......................... 640

18.7 Design Notes ............................................641HTML-Dokumenten Design Notes hinzufgen .................................... 642Design Notes zu Objekten hinzufgen..... 643

18.8 Text, HTML-Quelltext und Tags suchen und ersetzen ............................... 643

Suchen und ersetzen ................... 645Noch einige Hinweise: ............................. 647

19Dreamweaver und Fireworks 64919.1 Dreamweaver Fireworks:

Bilder in Fireworks optimieren................. 649Ein Bild in Fireworks optimieren ...651

19.2 Dreamweaver Fireworks: Fireworks als externer Bildeditor ............. 653

Ein Bild von Dreamweaver aus bearbeiten ........................................ 654

19.3 Fireworks & Dreamweaver Verhaltensweisen ................................. 654

19.4 Dreamweaver Fireworks: Fireworks-HTML-Dokumente.................... 655Das Objekt Fireworks-HTML einfgen verwenden: .............................. 656

In Fireworks eine Schaltflche erstellen .............................. 656

Fireworks-HTML-Quelltext mit Hilfe der Zwischenablage kopieren und einfgen............................................ 657

In Fireworks eine komplette HTML-Seite erstellen................................ 658

19.5 Fireworks HTML aktualisieren ............... 660HTML aktualisieren .......................661

19.6 Fireworks als Dreamweaver-Bibliothekselement exportieren................661

In Fireworks ein Dreamweaver-Bibliothekselement erstellen ................... 662

20Dreamweaver und Flash 66520.1 Dreamweaver einen Flash-Film auf

der Webseite einfgen............................. 66520.2 Flash-Filme im

Dokumentenfenster abspielen................. 66620.3 URL-Links in Shockwave Flash-Filmen...... 667

Einen Flash-Film auf der Webseite einfgen................................... 667

Ein Flash-Film in einem Frame ...... 669

21Ihr ganz persnlicher Dreamweaver 671

21.1 Voreinstellungen.......................................67121.2 Der Configuration-Ordner ......................671

Objekte .................................................... 672Menstruktur........................................... 673HTML-Stile ............................................... 673Behaviors ................................................ 673Commands .............................................. 673Browser berprfen................................. 673HTML-Formatierung ................................. 674Default.HTM............................................. 674Eigenschaften-Inspektor .......................... 674

Der Objektpalette ein selbst erstelltes Objekt hinzufgen.................... 674


22Tipps & Tricks 67722.1 Allgemeines............................................. 67722.2 Allgemeine Tipps ..................................... 67722.3 Leistungsfhigkeit ................................... 67722.4 Probleme mit Bildern, wenn

Dreamweaver auf einem Macintosh eingesetzt wird ........................................ 678

22.5 Tabellen .................................................. 67822.6 Vorlagen.................................................. 67822.7 Verhaltensweisen .................................... 67922.8 Die Verhaltensweise Audio abspielen .. 680

Netscape ................................................. 680Internet Explorer unter Windows ............. 680Internet Explorer unter Macintosh ........... 680

22.9 Frames..................................................... 68022.10Ebenen .....................................................68122.11 Site-Management .....................................68122.12Weitere Informationsquellen ....................681

Index Fireworks 683

Index Flash 687

Index Dreamweaver 691

19

Vorwort

For several years now, Macromedia has been offeringweb professionals a powerful integrated working envi-ronment, through its range of software. No other soft-ware vendor does this in such a seamless way. This inte-grated working environment has become the de factostandard for the production and design of dynamic websites. Because it has become this standard, web develo-pers can be confident that gaining skills with the toolswill be recognised by both clients and other developersalike.

Web professionals are constantly looking for waysthat they can add value to their services, to differentiatethemselves from their competitors. An integrated wor-king environment with Dreamweaver, Fireworks andFlash, provide the tools to create better, more innovativeand well-structured web sites, whilst minimising the timeit takes to do so. It is this combination of time-saving andcreativity that will drive that competitive differentiation.

Each of these Macromedia applications individuallyis a powerfull tool, but it is really only using them in com-bination that the true power is realised. That is why it iswonderful that this book has been written and written bysuch an experienced and knowledgeable autor.

The book is based upon the concept of this integra-ted working environment, resulting from the combineduse of Fireworks, Flash and Dreamweaver. From the au-thors wide training expericience and talking to costu-mers, she knows that this concept appeals to Web pro-fessionals for the reasons given before. The book is pa-cked with exercises that will train people with the skills to

exploit the opportunities and benefits of the integrateduse of this software

Patricia Bosselaar has been employed by PromateSystems BV (who are Macromedias distributor in Hol-land) for 13 years. From the first days of Promates dis-tributorship she has handled all the technical support forMacromedia products and this has brought her into con-tact with thousands of customers designers, develo-pers and web professionals.

She has also always been Promates key presenter attrade shows, events and seminars. When Promate set upa programm of Macromedia training courses six yearsago, Patricia became the key trainer for all Macromediaproducts.

Because of her extensive support and training experi-ence, Patricia knows how to challenge people to get themost out of the integrated use of these world class tools.The book comes with a CD filled with exercises, greatsamples and valuable links to useful web sites. I trustthat you will find the knowledge that she is sharing withyou, empowering, useful and valuable.

Sue Thexton

Vice-President, Macromedia EuropeVice-Chairman, British Interactive Multimedia Associa-tionChairman, BAFTA Interactive Entertainment Committee(British Academy of Film and Television Arts)

20

Vorwort der Autorin

Dieses Buch ist im Rahmen zahlreicher Trainingskurse zuFireworks, Flash und Dreamweaver entstanden, die ichschon seit lngerer Zeit bei der Firma Promate Systems,dem Vertriebspartner von Macromedia in den Niederlan-den, betreue.

Die Kommunikation mit den Kusrsteilnehmern warein wichtiger Ausgangspunkt fr dieses Buch. Die Fra-gen, die die Teilnehmer stellen, und die Dinge, die sie he-rausfinden, sorgen bei jedem Training dafr, dass auchich immer noch etwas dazulerne. Meine Kursteilnehmerhaben sich hufig Klarheit erbeten und mich des fterenmit alternativen Lsungsvorschlgen berrascht. Wie beiden meisten anderen Programmen lernt man auch beiFireworks, Flash und Dreamweaver nie aus. Sie mssensich immer wieder aufs Neue fragen, ob es nicht eine in-telligentere, schnellere und effizientere Lsung gibt, umein bestimmtes Ergebnis zu erzielen.

Auerdem geht es dabei um Werkzeuge, die Sie indie Lage versetzen, Ihre eigene Kreativitt in ein Produktumzusetzen, das anderen Menschen Freude bereitetoder sich vorteilhaft fr sie auszahlt. Wenn Sie die Tech-niken der Programme erst einmal beherrschen, werdenIhnen zumeist nur noch von Ihrer eigenen KreativittGrenzen auferlegt.

Dieses Buch hat nicht den Anspruch, die Mglichkei-ten von Flash, Fireworks und Dreamweaver in vollem Um-fang auszuschpfen. Das Ziel dieses Buches ist vielmehr,es Ihnen anhand der Informationen und bungen zu er-mglichen, dynamische Webseiten zu entwickeln und da-

bei die Mglichkeiten dieses Software-Trios optimal aus-zunutzen.

Eine gute Software befindet sich stets in der Entwick-lung, und das gilt auch fr die Bcher, die sich mit dieserSoftware beschftigen. Angesichts der vergleichsweisekurzen Produktzyklen von Fireworks, Flash und Dream-weaver ist dieses Buch versionsunabhngig angelegt.Die bungen basieren zum Zeitpunkt des Erscheinensauf den Versionen Flash 5, Dreamweaver 3 und Fireworks3. Zu neuen Programmversionen werden kostenlose Text-updates angeboten, die Sie ber das Internet herunterla-den und ausdrucken knnen. Zugang zu diesen speziellfr die Leser des Buches bereitgestellten Textaktualisie-rungen erhalten Sie ber die Datei Liesmich.rtf auf derbeigelegten CD-ROM.

Dieses Buch verfhrt nach der Methode Learning bydoing. Es ist also kein Buch, mit dem man sich gemt-lich auf dem Sofa niederlsst. Es ist vielmehr ein Lesenbeabsichtigt, bei dem der Computer immer in Reichweiteist, so dass Sie das Gelesene gleich ausprobieren und mitHilfe der bungen umsetzen knnen. Auf der CD-ROM zudiesem Buch finden Sie alle bungsdateien und die dafrbentigte Software vor. Haben Sie die Tastatur und dieMaus in Reichweite? Dann lassen Sie sich nun von derMagie des Macromedia-Dreamteams berraschen. Ler-nen Sie, dynamische Websites zu gestalten, die sich vonanderen Websites unterscheiden.

Patricia Bosselaar

21

Einleitung

e.1 Das DreamteamDie Firma Macromedia stellt seit Jahren Software zur Ent-wicklung von Multimedia-Lsungen her denken Sie bei-spielsweise an Programme wie Director und Authorware.

Mittlerweile werden die Produkte von Macromediamehr und mehr zum Standard fr das Erstellen dynami-scher und interaktiver Websites. Mit Fireworks bearbei-ten Sie Ihr Bildmaterial, das Sie im Internet einsetzenwollen. Mit Flash erstellen Sie Animationen und Naviga-tionslsungen. In Dreamweaver importieren Sie das inFireworks und Flash vorbereitete Material und bauendort schlielich eine dynamische Website auf. Nicht nurdiese Software-Tools, sondern auch die Technologie vonMacromedia hat sich mittlerweile zu einem allgemein an-erkannten Standard entwickelt. Das Flash-Aftershock-Plug-In oder das ActiveX-Steuerelement sind beispiels-weise im Lieferumfang der neuesten Betriebssystem-Ver-sionen von Windows und Macintosh sowie der neuestenVersionen von Netscape und des Internet Explorers ent-halten.

Ein groer Vorteil ist die Integration der Macromedia-Programme. Was die Integration angeht, bietet Macro-media den Internet-Profis meiner Ansicht nach momen-tan die beste und damit produktivste Arbeitsumgebung.Lassen Sie mich dies an einigen Beispielen erlutern:U Eine mit Director erstellte Multimediaproduktionknnen Sie in Dreamweaver sehr leicht in eine Webseiteeinbetten.U In Fireworks knnen Sie Rollovers und Hotspotserstellen, die von Dreamweaver problemlos als solcheerkannt werden und die dort eventuell noch bearbeitetwerden knnen.U Ihnen stehen mehrere Mglichkeiten zur Verfgung,um Fireworks von Dreamweaver aus zu starten und einBild zu bearbeiten.

U In Dreamweaver knnen Sie einen Shockwave-Flash-Film mit allen gewnschten Parametern in eine Webseiteeinbauen.

Dieser einzigartige Vorteil, den die Integration von Fire-works, Flash und Dreamweaver bietet, stellt fr mich den Ausgangspunkt dieses Buches dar.

Die Website von Macromedia (http://www.macromedia.combzw. http:// www.macromedia.com/ de) ist eine wichtigeInformationsquelle, da Sie dort fr jedes Programm zahl-reiche technische Informationen vorfinden. Auerdemwerden Ihnen dort eine bersicht der Bugs, die bekann-ten Probleme und damit einhergehenden Lsungsmg-lichkeiten, herunterladbare Extras, Tipps und Tricks, Tu-torials sowie Workshops angeboten.

Fr jedes Produkt gibt es eine Diskussionsgruppe,die Sie abonnieren knnen, um sich weltweit mit den An-wendern der verschiedenen Programme auszutauschen.

Auerdem haben Sie mit Hilfe der Wish List die Mg-lichkeit, Ihre Wnsche bei Macromedia zum Ausdruck zubringen.

Da weltweit sehr viele Anwender Macromedia-Pro-dukte einsetzen, gibt es zahllose Websites, die sich aus-schlielich oder teilweise der Software von Macromediawidmen.

Soweit mir diese Websites bekannt sind, werde ichsie auf der CD zu diesem Buch bercksichtigen. Dort fin-den Sie jeweils ein HTML-Dokument mit Links zu diesenWebsites. ffnen Sie diese Dokumente in Ihrem Browser,um die Websites zu besuchen.

Ebenso wie bei den meisten anderen Programmenfhren auch in Fireworks, Flash und Dreamweaver vieleWege nach Rom. Mit anderen Worten: Derselbe Effekt,

http://www.macromedia.comhttp://www.macromedia.com/

22 Kapitel Einleitung

dieselbe Funktion und derselbe Arbeitsschritt knnenhufig auf mehrere Weisen durchgefhrt werden.

Die Anleitungen in diesem Buch beziehen sich zu-meist auf die Werkzeuge und Funktionen der Bedien- undDialogfelder. Falls erforderlich, werden die ber die Me-ns anzusteuernden Alternativen vorgestellt.

Wenn ich der Ansicht bin, dass es eine bestimmteMethode gibt, mit der sich ein Arbeitsschritt schnellerausfhren lsst, dann werde ich Ihnen diese Mglichkeitvorstellen. Das schliet jedoch nicht aus, dass dieser Ar-beitsschritt auch noch auf eine andere (vielleicht prakti-schere) Weise durchgefhrt werden kann. Vieles lsstsich mit Hilfe der rechten Maustaste (Windows) oder der(Ctrl)-Taste (Macintosh) schneller erledigen. In diesemFall wird ein so genanntes Kontextmen mit den aktuellrelevanten Funktionen und mglichen Einstellungen ein-geblendet. Wenn Sie mit einem Macintosh arbeiten, istdies vielleicht ein etwas ungewhnliches Verfahren, aberes ist der Mhe wert, sich diese Methode anzueignen.Auf diese Weise knnen Sie sich viele Mausaktionen er-sparen.

e.2 TippsIch habe versucht, Ihnen mglichst viele Hintergrundin-formationen zu Sachverhalten zu erlutern, mit denenSie konfrontiert werden knnen und die Sie im Auge be-halten sollten. Dies geschieht unter anderem in Form von

e.3 bungenDa man ein Programm nur erlernen kann, wenn man auchdamit arbeitet, finden Sie in diesem Buch zahlreichebungen vor. So knnen Sie das Gelesene gleich auspro-bieren.

Jede bung steht fr sich, und falls sich einebung auf eine zuvor besprochene bung desBuches bezieht, finden Sie auf der CD zumeist

Tipp- und Achtung-Hinweisen.

ein Dokument, mit dem Sie diese bung durchfhrenknnen, ohne die vorhergehende bung durcharbeitenzu mssen.

Wenn die bungsdokumente im Text nur bei ihremNamen genannt werden, dann befinden sie sich auf derCD im Ordner bungen. Dieser Ordner enthlt wie-derum die Unterordner Fireworks und Flash. Die ent-sprechenden bungsdokumente finden Sie also jeweilsin den Ordnern, die den betreffenden Programmnamentragen.

Auerdem enthlt die CD zwei Ordner, in denen sichdie Dokumente einer Website befinden.

Die Fireworks-Website finden Sie im Ordner FWSite und die Dreamweaver-Website im Ordner DWSite. Wenn Sie diese bungen durchfhren, mssenSie diese Ordner auf Ihre Festplatte kopieren. Auer-dem mssen Sie den Schreibschutz der Dokumente auf-heben, bevor Sie damit arbeiten knnen.

In den bungen werden die Dokumente und Ordnerfolgendermaen bezeichnet:

FW Site\HTML der Unterordner HTML des OrdnersFW Site.

FW Site\HTML\Set.htm das Dokument Set.htm imUnterordner HTML des Ordners FW Site.

Fr die bungen zu Dreamweaver empfiehlt es sichInternet Explorer 4 oder hher, Netscape Communicator4 oder hher sowie einen Browser der Version 3 auf Ih-rem Computer zu installieren. Auf diese Weise knnenSie die Webseiten mit verschiedenen Browsern undBrowserversionen anschauen.

e.4 Internet-AnarchieSie werden Fireworks, Flash und Dreamweaver wahr-scheinlich vornehmlich fr das Erstellen von Websitesverwenden. Das Internet ist ein Medium, das Sie nichtwirklich unter Kontrolle haben, denn im Grunde genom-men wissen Sie nicht viel ber den Besucher Ihrer Web-site. Auerdem gibt es zahlreiche unterschiedliche Brow-ser und Browserversionen. Deshalb sollten Sie beim Er-stellen und Verwalten von Websites Ihrem potenziellenPublikum Rechnung tragen. Am besten definieren Sie frden Durchschnittsbesucher, den Sie mit Ihrer Websiteerreichen mchten, eine Art Minimalkonfiguration.

Kapitel e.5 Macintosh und/oder Windows? 23

Auf der Grundlage der weiter unten aufgefhrten Frage-stellungen knnen Sie eine solche Minimalkonfigurationfestlegen.

Am besten wre es natrlich, wenn Sie selbst zuHause ber diese Minimalkonfiguration verfgen wr-den, um Ihre Website auf diesem System regelmig zutesten.

Wenn Sie dementsprechend vorgehen, knnen Siesich viele unangenehme berraschungen bei der Verf-fentlichung der Website ersparen.

Meiner Ansicht nach sollten Sie sich folgende Fragenstellen:

e.5 Macintosh und/oder Windows?Die meisten Anwender verwenden Windows. Wenn Sieeine Website auf einem Macintosh entwickeln, mssenSie beispielsweise bercksichtigen, dass die Farben aufeinem Macintosh-Monitor heller dargestellt werden alsauf einem Windows-Monitor.

e.6 Welcher Browser? Internet Explorer oder Netscape?

Mittlerweile hat Netscape gegenber dem Internet Explo-rer mehr und mehr an Boden verloren. Der Internet Explo-rer ist standardmig sowohl im Lieferumfang von Win-dows 98 und Windows ME (bzw. 2000) als auch von Mac-intosh OS 9.x bzw. OS X enthalten.

Zwischen dem Internet Explorer und Netscape gibt eszahlreiche Unterschiede, beispielsweise bei der Verwen-dung von Ebenen und der Untersttzung bestimmterCSS-Einstellungen.

e.7 Welche Browserversion?DHTML wird vom Internet Explorer und von Netscape abVersion 4 untersttzt. Dies bedeutet, dass Sie Ebenenund Style Sheets einsetzen knnen. Wenn eine Webseite,in der Ebenen und Style Sheets verwendet werden, in ei-nem Browser der Version 3 geffnet wird, bleibt nicht vieldavon brig.

Auerdem gibt bei den verschiedenen Browserversi-onen auch Unterschiede bei der Untersttzung von Java-Script. So wird JavaScript beispielsweise vom Internet Ex-

plorer erst ab Version 4 vollstndig untersttzt. WollenSie eine Website fr Browser der Version 4 entwickelnund zustzlich eine zweite Version der Website fr Brow-ser der Version 3 (oder niedriger) anbieten? Oder wollenSie eine Website fr Browser der Versionen 3 (oder nied-riger) entwickeln und dabei ganz auf DHTML verzichten?

e.8 Welche Internet-Verbindung?Verfgt Ihre Zielgruppe ber ein Modem mit einer Ge-schwindigkeit von 14.400 Kbps, 28.800 Kbps oder 56.000Kbps, ber eine ISDN-Karte oder ber eine 100-Mbps-Netzwerkverbindung?

Diese Frage ist insofern von Bedeutung, da IhreWebseite so schnell wie mglich geladen werden soll.Abgesehen von der Verbindungsgeschwindigkeit solltedie Dateigre der Dokumente generell natrlich so ge-ring wie mglich sein. Aber bei langsameren Verbindun-gen spielt dieser Aspekt eine noch grere Rolle. Auer-dem ist auch bei einer ISDN-Verbindung nicht immer eineoptimale bertragungsgeschwindigkeit garantiert.

Die durchschnittliche bertragungsgeschwindigkeitbetrgt bei einem 14.400-Kbps-Modem 1200 Bytes proSekunde, bei einem 28.000-Kbps-Modem 2400 Bytes proSekunde und bei einem 56.000-Kbps-Modem 4800 Bytespro Sekunde.

Selbstverstndlich handelt es sich dabei nur umDurchschnittswerte. Die Auslastung des Internets, die Ser-ver-Geschwindigkeit und die Geschwindigkeit des Compu-ters sind Variablen, die die tatschliche bertragungsge-schwindigkeit der Daten beeinflussen.

e.9 Welches Computersystem?Verfgt Ihre Zielgruppe ber einen Pentium IV oder G4?Oder ber einen 200-Mhz-Pentium oder ber einen 68-K-Macintosh?

Kleine Dokumente sind nicht immer eine Garantie freine optimale Darstellung. Eine weitere wichtige Variableist die Prozessorgeschwindigkeit, vor allem dann, wenndie Dokumente erst dekomprimiert und vom Prozessordes Computers bearbeitet werden mssen, bevor sieim Browser angezeigt werden knnen.

Das ist beispielsweise bei einem in eine Webseite ein-gebetteten Shockwave-Flash-Film der Fall. Die Vektorob-

24 Kapitel Einleitung

jekte des Shockwave-Flash-Films mssen vom Prozessorerst umgerechnet werden, damit sie auf dem Monitorangezeigt werden knnen. Je mehr komplexe Vektorob-jekte mit verschiedenen Effekten, wie Farbverlufen undTransparenz, der Shockwave-Flash-Film enthlt, destowichtiger wird die Prozessorgeschwindigkeit. Auch wenndie Dateigre des Dokuments sehr gering ist, kann sichein langsamer Prozessor nachteilig auf die Darstellungdes Films auswirken.

e.10 Monitorgre und Bildschirmauflsung?

Verfgt Ihre Zielgruppe ber einen 15-Zoll-, einen 17-Zoll-oder ber einen noch greren Monitor? Wenn Sie nichtwollen, dass der Besucher der Website scrollen muss, umalle Informationen auf Ihren Webseiten sehen zu knnen,dann mssen Sie auch diese Variable bercksichtigen.

Untersttzt der Monitor 256 Farben (8 Bit), High Color(16 Bit) oder True Color (24 Bit)? Wenn Sie von 256 Far-ben ausgehen, sollten Sie sich bei der Verwendung vonBildern an die Palette mit den 216 browsersicheren Far-ben halten.

e.11 Java(Script) ja oder nein?Wenn Sie beispielsweise in Fireworks oder DreamweaverVerhaltensweisen verwenden wollen, dann mssen Siewissen, ob Ihre Zielgruppe Java(Script) aktiviert hat odernicht. Verhaltensweisen generieren nmlich im HTML-Dokument ein JavaScript. Das gleiche gilt, wenn Sie Java-Applets verwenden wollen.

Die meisten neueren Browserversionen kommen gutmit Java und JavaScript zurecht. Die lteren Versionendes Internet Explorers hingegen kommen damit wenigeroder gar nicht klar.

e.12 Plug-Ins oder ActiveX?Wollen Sie auf Ihren Webseiten Elemente verwenden, dienicht als Standard vorausgesetzt werden knnen, wie zumBeispiel QuickTime, Shockwave Director oder Shockwave-Flash-Filme? In diesem Fall mssen Sie sich fragen, inwie-weit die Besucher Ihrer Website das entsprechende Plug-In oder ActiveX-Steuerelement auf ihren Computern instal-liert haben.

Wird der Besucher, wenn das Plug-In oder das ActiveX-Steuerelement nicht vorhanden ist, bereit sein, diese he-runterzuladen und eventuell zu installieren? Und was be-kommt der Besucher zu sehen, der nicht ber das ent-sprechende Plug-In oder ActiveX-Steuerelement verfgt?

e.13 Planung und VorbereitungDie Planung und die Vorbereitung einer Website stelleneinen entscheidenden Faktor fr das Erstellen von Web-seiten und den Aufbau der Website dar. Je genauer Siesich darber im Klaren sind, wie Ihre Webseiten ausse-hen und wie Ihre Website strukturiert sein soll, destoleichter wird Ihnen die Arbeit von der Hand gehen.

Wenn Sie die Website auf Papier skizziert haben, dannwird es Ihnen in Dreamweaver nicht schwer fallen, dieWebseiten zu erstellen. Sie wissen dann nmlich schon,welche Webseiten, welche Inhalte, welche Links, welcheFrames, welche Dokumentnamen und Seitentitel Sie ver-wenden wollen. Auerdem wissen Sie dann schon, welcheInhalte mehrfach bentigt werden, so dass Sie diese In-halte direkt als Bibliothekselemente oder Vorlagen defi-nieren knnen.

Wenn Sie eine Skizze von einem Flash-Film angefer-tigt haben, dann werden Sie den Film effizienter undschneller erstellen knnen.

Wenn Sie wissen, zu welchen Webseiten und zu wel-chen Frames Links definiert werden mssen oder welcheHintergrundfarbe eine Webseite erhalten soll, dann wirdIhnen dieses Wissen das Erstellen der Bilder und Naviga-tionshilfen in Fireworks erleichtern.

Kapitel e.14 Die CD-ROM zum Buch 25

e.14 Die CD-ROM zum BuchDank der Zustimmung von Macromedia kann ich Ihnenauf der CD zu diesem Buch die Trialversionen von Fire-works, Flash und Dreamweaver zur Verfgung stellen. Sieknnen also sofort mit der Arbeit beginnen, ohne dieSoftware erst von der Website von Macromedia herunter-laden zu mssen.

Das Buch ist als umfassender Grundlagenkurs ange-legt. Auf der CD-ROM finden Sie das bungsmaterial, aufdas in den bungen verwiesen wird siehe dazu auchAbschnitt e.3 bungen. Darber hinaus bietet Ihnen dieCD Links zu den verschiedenen Websites von Macrome-dia, die auf die in diesem Buch behandelte Software aus-gerichtet sind. Um Ihnen zu zeigen, was Sie mit dem Dre-amteam von Macromedia alles anstellen knnen, fgeich diesen Websites noch die Links zu meinen persnli-chen Favoriten hinzu.

e.15 Die Website zum Buchber die CD-ROM erhalten Sie Zugang zu einer speziellfr die Leser dieses Buches entwickelten Website, fr dieneben der hollndischen auch eine deutsche Sektionaufgebaut wird. Dort finden Sie die zwischenzeitlich ak-tualisierten Versionen der Texte, die neuesten Links so-wie einige Beispiel-Websites. Auerdem habe ich vor,den Lesern dort die Mglichkeit zum Erfahrungsaus-tausch zu geben.

27

Fachbegriffe

2-Bit-Bild: ein Schwarz-Wei-Bild, das ausschlielichschwarze und weie Pixel enthlt.

4-Bit-Bild: ein Farbbild oder ein Bild mit Graustufen mit16 Farben.

16-Bit-Bild: ein Farbbild mit 65.500 Farben.24-Bit-Bild: ein Farbbild mit 16,7 Millionen Farben.32-Bit-Bild: ein Farbbild mit 16,7 Millionen Farben und ei-

ner 8-Bit-Maske, die fr die Transparenz bentigtwird.

ADPCM: die Abkrzung von Adaptive Pulse Code Modu-lation. Eine Audiokompression, bei der die Soundsnach zeitlichen Wertvernderungen durchsucht wer-den. Die Vernderungen der Sounds werden an-schlieend komprimiert. Dabei handelt es sich umein verlustreiches Komprimierungsverfahren, d.h. dieSoundqualitt wird durch die Komprimierung verrin-gert. Audiodateien, die mit dieser Methode kompri-miert werden, mssen beim Abspielen dekompri-miert werden.

Anti-Aliasing: eine Technik, die dazu verwendet wird,scharfe Kanten zu unterdrcken. Dabei werden Pixelhinzugefgt, die sich aus den Farben der Rnder zu-sammensetzen. So werden beispielsweise dem Lini-enrand einer schrgen schwarzen Linie auf einemweien Hintergrund Pixel in Graustufenfarben hinzu-gefgt.

Bitmap-Dateiformate: Bilder in einem Bitmap-Dateifor-mat werden durch Pixel beschrieben und angezeigt.Bitmap-Dateiformate verfgen ber eine Auflsung(dpi). Wenn Sie ein Bitmap-Bild vergrern, knnenSie die Pixel als quadratische Flchen erkennen.

Dithering: das Erzeugen zustzlicher Farbpixel an denStellen, an denen Farben vorkommen, die nicht in deraktuellen Farbpalette vorhanden sind. Die in derFarbpalette nicht vorhandenen Farben werden dannsimuliert. Abhngig von der Strke ist das Ditheringauf einem Bild als eine Art Rastermuster zu erkennen.

DHTML: die Abkrzung fr Dynamic Hypertext MarkupLanguage. Eine HTML-Version, die zustzliche Funk-tionalitt untersttzt, wie beispielsweise Ebenen zur

absoluten Positionierung und Cascading Style Sheetszur Textformatierung.

DPI: die Abkrzung fr Dots Per Inch. DPI gibt die Aufl-sung von Bitmap-Bildern an, d.h. die Anzahl der Pixelpro Zoll.

Wenn Sie ein Bild in einer guten Qualitt druckenwollen, bentigen Sie eine hohe Auflsung. DerartigeDokumente sind zumeist sehr gro. Wenn Sie Bilderfr das Internet erstellen, werden die Bilder auf ei-nem Computermonitor angezeigt. Ein Computermo-nitor kann standardmig 72 dpi anzeigen. Von da-her haben fr das Internet bestimmte Bilder eine ma-ximale Auflsung von 72 dpi.

FTP: die Abkrzung fr File Transfer Protocol. Dabei han-delt es sich um eine Methode, um mit Hilfe einesNetzwerks oder einer Telefonverbindung Dateien zubertragen.

GIF: die Abkrzung fr Graphics Interchange Format. Da-bei wird ein Bild mit Hilfe der verlustfreien LZW-Kom-pression komprimiert. GIF-Dokumente knnen maxi-mal 256 Farben enthalten. Weniger Farben verringerndie Dateigre des Dokuments. GIF-Dokumente un-tersttzen Index-Transparenz.

HTML: die Abkrzung fr Hypertext Markup Language.Die Programmiersprache zur Beschreibung von Web-seiten. Ein HTML-Dokument ist ein ASCII-Text-Doku-ment, das die Tags und Parameter enthlt, die den In-halt der Webseite definieren.

JPEG: die Abkrzung fr Joint Photographic ExpertsGroup. Dabei wird ein Bild mit Hilfe einer verlustrei-chen Kompressionsmethode komprimiert. Abhngigvon der von Ihnen festgelegten Qualitt werden ber-flssige Pixel entfernt, wodurch sich die Dateigredes Dokuments verringert. Bei JPEG-Dokumentenhandelt es sich immer um 24-Bit-Bilder mit 16,7 Milli-onen Farben. JPEG-Dokumente untersttzen keineTransparenz.

LZW-Kompression: eine verlustfreie Komprimierungsme-thode fr das GIF-Format, das von Lempel-Ziv undWelch entwickelt wurde. Bei dieser Methode werden

28 Kapitel Fachbegriffe

die Farbvernderungen der Pixel auf einer horizonta-len Linie analysiert. Je mehr Farbvernderungen vor-handen sind, desto umfangreicher wird das Doku-ment.

PNG: Abkrzung fr Portable Network Graphic. In diesemFormat knnen Sie Bilder mit bis zu 32 Bit speichern.Auerdem untersttzen PNG-Dokumente Alpha-Trans-parenz. Das Format wird von Browsern der Version 4oder hher untersttzt.

Shockwave: ein von Macromedia speziell fr Internet-An-wendungen entwickeltes Dateiformat. Shockwave-Dokumente sind komprimiert und knnen von Macro-media-Programmen, wie Flash und Director, aus ex-portiert werden.

Es gibt Dateiformate fr Shockwave Flash, Shock-wave Director und Shockwave Authorware.

Um ein Shockwave-Dokument abspielen zu kn-nen, wird ein Shockwave-Player bentigt. Wenn einShockwave-Dokument in eine Webseite eingebettetist, muss der Browser ber das entsprechende Shock-wave-Plug-In oder ActiveX-Steuerelement verfgen.

Streaming: eine Technik, mit der Daten ber eine Mo-dem- oder Netzwerkverbindung bertragen werdenknnen. Beim Streaming werden die ersten Daten ei-nes Dokuments geladen, dann wird mit dem Abspie-len des Dokuments begonnen, und whrend desAbspielens wird der Rest des Dokuments geladen.

Tags: die Komponenten von HTML.URL: die Abkrzung fr Uniform Resource Locator, der

Name und die Adresse eines Dokuments im Internet.Vektor-Dateiformate: Bei diesem Format werden die Ele-

mente eines Bildes nicht durch Pixel (Punkte), sondernmit Hilfe so genannter Ankerpunkte beschrieben. Einegerade Linie wird beispielsweise durch zwei unter-schiedlich positionierte Ankerpunkte beschrieben. Zwi-

schen diesen beiden Ankerpunkten wird dann auf demMonitor eine Linie gezeichnet. Wenn Sie einen der An-kerpunkte verschieben, wird eine neue Linie generiert.Der Prozessor des Computers muss ein Vektorbild inPixel umrechnen, damit es auf dem Bildschirm darge-stellt werden kann.

Vektorbilder knnen ohne Qualittsverlust undohne, dass die Pixel zu sehen sind, skaliert werden.Darber hinaus knnen Sie diese Bilder ohne Quali-ttsverlust vergrern.

Auerdem ist die Dateigre von Vektordoku-menten in der Regel sehr gering in jedem Fall vielgeringer als die der Dokumente von Bitmap-Bildern.

Da ein Vektordokument erst vom Prozessor desComputers in Pixel umgerechnet werden muss,stellt die Prozessorgeschwindigkeit einen entschei-denden Faktor dafr dar, wie schnell das Bild auf demMonitor dargestellt werden kann.

Websichere Palette: Dabei handelt es sich um die Farbpa-lette mit 216 Farben, die auf einem Monitor mit 256Farben korrekt und ohne Dithering dargestellt wer-den kann, und zwar sowohl in Netscape als auch imInternet Explorer auf einem Macintosh oder unterWindows.

Standardmig wird angenommen, dass die web-sichere Palette 216 Farben enthlt; hexadezimal aus-gedrckt eine Kombination von 00, 33, 66, 99, CCoder FF und in RGB-Werten ausgedrckt von 0, 51,102, 153, 204 und 255. Es scheint, als wrden vierFarben im Internet Explorer unter Windows nicht kor-rekt dargestellt, und zwar #0033FF (RGB: 0, 51, 255),#3300FF (RGB: 51, 0, 255), #00FF33 (RGB: 0, 255, 51)und #33FF00 (RGB: 51, 255, 0).

Wenn man diese vier Farben ausnimmt, enthltdie Palette eigentlich nur 212 browsersichere Farben.

Fireworks

Die meisten Programme zur Bildbearbeitung und zur grafischen Gestaltung wurden ursprnglich speziell fr Druckerzeugnisse entwickelt. Fireworks gehrt zu der neuesten Generation der Grafikpro-gramme und wurde speziell fr das Internet entwi-ckelt. In Fireworks finden Sie alle Werkzeuge und die entsprechende Funktionalitt, um so schnell und effizient wie mglich Webgrafiken zu erstellen.

Fireworks ist eine All-in-one-Anwendung und bietet Ihnen eine komplette Arbeitsumgebung fr die Erzeugung von Web-Grafiken. Mit Fireworks knnen Sie all das erledigen, wofr Sie frher mehrere Anwendungen bentigten.

31

1 AnwendungsmglichkeitenKurz gefasst:

Mit Fireworks erstellen Sie Bilder fr das Internet. Sie knnen Ihre Fireworks-Dokumente als GIF, JPEG, PNG und ani-miertes GIF exportieren.Sie knnen eine komplette Webseite in Fireworks erstellen. Fireworks exportiert die Bilddokumente und das HTML-Do-kument zusammen mit dem bentigten HTML-Quelltext und den JavaScripts.Dabei liee sich beispielsweise an eine Navigationsleiste mit Rollover-Schaltflchen, Hyperlinks und Hotspots denken,die Sie in einem Frame verwenden wollen. Sie bentigen dabei keinen HTML-Editor, und Sie mssen auch keine ZeileJavaScript schreiben. Sie definieren alles in Fireworks, und beim Export wird das HTML-Dokument inklusive der ben-tigten Bilddokumente erzeugt.Wenn Sie dann auch noch beim Export den richtigen Verzeichnispfad der Dokumente angegeben haben, mssen Sienur noch in Dreamweaver das HTML-Dokument in dem betreffenden Frame ffnen, und schon sind Sie fertig.Fireworks basiert auf dem RGB-Farbmodell und ist auf Bildschirmauflsungen hin angelegt. Es ist somit fr Printanwen-dungen weniger geeignet.

1.1 Merkmale von FireworksIm folgenden werden die Merkmale der Arbeitsumge-bung von Fireworks aufgefhrt, mit der Sie schnell undeffizient Webgrafiken erstellen knnen.

Werkzeuge fr den Entwurfsprozess

U Fireworks ist eine Kombination aus Photoshop Free-Hand/Illustrator/CorelDraw und Debabelizer.In Fireworks knnen Sie eine Grafik zugleich vektorba-siert und bitmap-orientiert bearbeiten. Ihnen stehenWerkzeuge zur Erstellung und Bearbeitung von Vektorob-jekten und Bitmap-Pixeln zur Verfgung.U Fireworks arbeitet mit (beispielsweise aus Photo-shop und FreeHand) bekannten Techniken und Werkzeu-gen.U Sie knnen verschiedene grafische Bitmap- und Vek-tor-Dateiformate, darunter Freehand und Photoshop inFireworks importieren.Scanner und digitale Kameras werden untersttzt.

U Fireworks kennt so genannte Live-Effekte wie die Op-tionen Schlagschatten und Prgen sowie verschie-dene Photoshop-Filter. Zu den wichtigsten Eigenschaftenvon Fireworks zhlt die Tatsache, dass alles jederzeit ver-ndert werden kann. So kann beispielsweise ein Schat-ten hinter einer Bitmap oder einem Vektorobjekt vern-dert werden, wobei dieser bei einer Anpassung derBitmap oder des Vektorobjekts ebenfalls angepasst wird.U Der Text eines Fireworks-Dokuments kann jederzeitverndert werden. Auerdem stehen Ihnen hier zahlrei-che Textformatierungsmglichkeiten wie Unterschnei-dung, Zeilenabstand, Grundlinienverschiebung und hori-zontale Skalierung zur Verfgung.U Die Option Zwiebelschicht-Effekt dient als Hilfs-mittel bei der Erstellung von GIF-Animationen oder Roll-over-Schaltflchen. Ebenen knnen ber Frames ver-teilt werden, um GIF-Animationen einfacher erstellenund bearbeiten zu knnen. Animationen knnen in Fire-works abgespielt werden.

32 Kapitel 1 Anwendungsmglichkeiten

U Die Optionen Vereinigen, berschneiden, ff-nen und Zuschneiden stehen fr die Kombination vonPfaden zur Verfgung.U In Fireworks kann eine Browservorschau angezeigtwerden.

Funktionen fr einen einfachen, effizienten Produktionsprozess

U Vorschau: Bevor Sie tatschlich exportieren, knnenSie alle Aspekte der zu exportierenden Datei bereits be-urteilen. Die von Ihnen definierten Rollover knnen Siesich in Fireworks anschauen. Eine Optimierung mit einer Vorschau des Bildes erfolgtgem den gewhlten Exporteinstellungen. Mehrere Op-tionen knnen nebeneinander verglichen werden, umdas beste Qualitts-/Gren-Verhltnis des Bildes zu er-reichen.U GIF- und JPEG-Dokumente werden stark komprimiert,so dass die Dokumente sehr wenig Speicherplatz benti-gen und die Ladezeit der Website entsprechend verkrztwird.U Vektor-Dateiformate, Adobe Illustrator (.ai) und Flash(.swf) werden exportiert. Oder Sie kopieren die Vektor-pfade und fgen diese in Illustrator, Flash, FreeHand undCorelDraw ein.U Sie knnen eine Bibliothek mit oft verwendeten Gra-fik- und Schaltflchen-Objekten anlegen. Diese Symboleknnen Sie per Drag&Drop in das Bild einfgen. WennSie in der Bibliothek ein Symbol ndern, werden auch dieKomponenten aktualisiert, die dieses Symbol verwen-den.U Fireworks verfgt ber das Bedienfeld Verlauf. Hierknnen Sie Aktionen, die Sie im Dokument durchgefhrthaben, wiederfinden und rckgngig machen. Auerdemknnen Sie eine Auswahl von Aktionen als Fireworks-Be-fehl speichern. Dieser Befehl erscheint danach im MenBefehle und ist mit einem einzig

Documents

Fireworks, Flash und Dreamweaver. Der Grundlagenkurs zu Macromedias ''Dreamteam