Neben den klassischen Webeditoren wie Dreamweaver, GoLive oder HomeSite sowie zahllosen anderen HTML-orientierten Tools hält der Markt eine Unzahl nützlicher Hilfsmittel für den Webdesigner bereit. Wir haben fünf davon näher unter die Lupe genommen und präsentieren ihre Möglichkeiten im praktischen Einsatz.
Dabei haben wir neben kommerziell vertriebenen Produkten wie dem Animationswerkzeug Visual GIF Animator und dem 3D-Webeditor iSpace auch die Shareware-Anbieter berücksichtigt: Oft finden sich gerade in dieser Szene hervorragende Programmierer, die ihre Erzeugnisse günstig anbieten. Ein Paradebeispiel dafür ist ein höchst raffinierter Menügenerator, mit dem sich ohne Programmierung DHTML-basierte Pop-ups und ganze Menüsysteme erstellen lassen, die unter allen gängigen Browsern tadellos funktionieren.
Alle vorgestellten Tools ordert man am besten direkt von der Website des Herstellers; die meisten davon sind per Download auch in einer Testversion zu haben. Wer sein Herz für ein oder mehrere der gezeigten Produkte erwärmen kann, zahlt allerdings neben der geringen Nutzungsgebühr einen hohen Preis: Fast alle gezeigten Tools verführen zu stundenlangem Pröbeln, Umgestalten und Testen.
Auch im Flash-Zeitalter ist GIF-Animation nach wie vor ein beliebtes Mittel, einer ansonsten statischen Webseite ein bisschen Leben einzuhauchen. Die meisten Programme zum Erzeugen bewegter Grafiken arbeiten formatnah: Die Animationen werden Frame für Frame aus einzelnen GIF-Bildern zusammengestellt; allenfalls bietet das Programm noch einige Spezialeffekte wie automatisch erzeugte Überblendungen zwischen zwei GIFs.
Der Visual GIF Animator aus dem dänischen Hause Matchware, das daneben für seine Multimedia-Software Mediator bekannt ist, funktioniert anders. In diesem Programm stellt man die Animation objektorientiert aus einzelnen Elementen zusammen. Effekte und Objektbewegungen bringt man anhand einer Timeline millisekundengenau auf die Reihe. Zum Schluss exportiert man die Animation im Animated-GIF- oder AVI-Format. Für GIF-Animationen kann beim Exportvorgang die Maximalgrösse der erzeugten Datei angegeben werden. Visual GIF Animator bietet damit ähnliche Möglichkeiten wie das leider nicht mehr erhältliche Headline Studio vom ehemaligen Hersteller Metacreations.
Anhand eines einfachen Beispiels - der Schriftzug "Forever InfoWeek" erscheint mit zwei Animationseffekten auf einem Banner - lässt sich die auf den ersten Blick ungewohnte Funktionsweise des Programms rasch erlernen.
• Öffnen Sie das Programm und wählen Sie aus dem Willkommensdialog die Option Neues Dokument erzeugen. Es erscheint ein Dialogfenster, das verschiedene vordefinierte Grössen zur Wahl stellt, darunter das Standard-Bannerformat 468x60 Pixel. Wählen Sie dieses Standardformat.
• Die Oberfläche von Visual GIF Animator ist dreiteilig: Zuoberst befindet sich die Arbeitsfläche, auf der das eingestellte Format der Animation vorgegeben erscheint. Unten sieht man die noch leere Timeline sowie, links davon, die Objektliste. Dazu kommen die stets sichtbare Werkzeugbox sowie verschiedene, je nach Kontext eingeblendete Paletten.
• Klicken Sie auf das Bildsymbol in der Werkzeugbox, um das in einem anderen Programm vorbereitete Hintergrundbild zu importieren. Mit dem nun erscheinenden Bild-Cursor klicken Sie auf der Arbeitsfläche die rechte obere Ecke des Bildes an und wählen die zu importierende Datei aus dem Dialog aus. Da das Bild bereits die korrekte Grösse hat, empfiehlt es sich, im folgenden Dialog die Option Rahmen auf Bildgrösse anpassen zu aktivieren - so wird das Bild automatisch als Hintergrund auf das gesamte Banner gelegt. Das Bild erscheint nun auch als Objekt in der Objektliste.
• Wählen Sie das Textsymbol in der Werkzeugbox und klicken Sie auf das Banner. Sie können nun den ersten Teil unseres Spruchs "Forever" eingeben und in der Textpalette Schriftart, -grösse und -farbe bestimmen. Bestätigen Sie die Änderungen mit einem Klick auf das grüne Häkchen rechts in der Textpalette und ziehen Sie den Text mit der Maus an die gewünschte Stelle.
• Nun stellen wir weitere Attribute des neuerstellten Textobjekts ein: Klicken Sie das Textobjekt mit der linken Maustaste an und wählen Sie Eigenschaften, um die entsprechende Palette anzuzeigen. Hier können Sie nach Herzenslust Einstellungen für Schatten, Glüheffekt, Farben, Ränder und vieles mehr vornehmen. Es macht auch Sinn, dem Objekt einen eindeutigen Namen zu geben; sonst erscheinen alle Textobjekte in der Objektliste mit der gleichen Bezeichnung "Text".
• Das Banner ist nun bereit für die erste Animation. Die Optionen Zeigen und Ausblenden bieten zahlreiche vordefinierte Effekte, mit denen sich ohne weiteren Aufwand attraktive Resultate erzielen lassen. Ziehen Sie das Symbol Zeigen aus der Aktionspalette auf die erste Spur der Timeline. Es erscheint der Dialog Objekt zeigen. Wählen Sie hier zunächst das zu animierende Objekt und dann den gewünschten Effekt - zum Beispiel Scrollen rechts federnd auf der Karteikarte Scrollen. Die Länge des Effekts lässt sich ebenfalls hier einstellen; den Anfangspunkt bestimmt man durch Verschieben des Effekts in der Timeline, ebenso die Gesamtlänge der Animation durch Verschieben des Ende-Symbols.
• Damit der eingestellte Effekt wirklich zu sehen ist, muss das Textobjekt vor dem Testen als unsichtbar markiert werden. Klicken Sie dazu in der Arbeitsfläche den Text mit der rechten Maustaste an und deaktivieren Sie die Option Objekt zeigen. Nun können Sie mit einem Klick auf den Button Dokument testen das Ergebnis ansehen.
• Der zweite Teil unseres Werbespruchs "InfoWeek" soll buchstabenweise von rechts oben ins Banner hineinfliegen. Erzeugen Sie dazu ein weiteres Textobjekt und plazieren Sie es auf der korrekten Endposition. Als zweites wird für diesen Effekt ein Animationspfad benötigt. Sie erstellen ihn, indem Sie in der Werkzeugbox das Animationspfad-Werkzeug anwählen und auf der Arbeitsfläche nacheinander die Punkte anklicken, die der Pfad durchlaufen soll. Alle Punkte können nachträglich verschoben und die Rundungen des erzeugten Bezier-Pfades nachgebessert werden. Wichtig: Animationspfade sind unabhängig von Objekten. Welches Objekt auf welchem Pfad animiert wird, bestimmt erst die Zuordnung im gewählten Animationseffekt.
• Ziehen Sie nun das Symbol Effekt Animation auf die zweite Spur der Timeline und plazieren Sie den Beginn direkt nach dem Ende des Effekts in der ersten Spur. Es erscheint der Dialog Animations-Effekt. Hier wählen Sie den zweiten Text als Objekt und den erstellten Pfad als Animationspfad. Zusätzlich können Sie die Dauer des Effekts und den Zeitversatz einstellen, mit dem die einzelnen Buchstaben erscheinen. Wählen Sie unter Teil-Grösse die Option Buchstaben sowie die Einstellung zum Objekt hin. Mit den Kurven im unteren Teil des Fensters können Sie das Einblendverhalten festlegen.
• Nun ist die Animation fertig und kann erneut getestet werden. Vergessen Sie nicht, zuvor wieder beide Textobjekte als unsichtbar zu markieren. Zum Exportieren als Animated-GIF wählen Sie aus dem Datei-Menü Exportieren/ Animiertes GIF. Im Exportdialog lässt sich zusätzlich zur Anzahl Farben und der gewünschten Geschwindigkeit auch die Maximalgrösse der erzeugten Datei angeben. Das Programm versucht dann so lange mit einer geringeren Framerate zu exportieren, bis die angegebene Grösse unterschritten wird. Je nach Ausgangsmaterial und Effekten kann dies zu durchaus ansprechenden oder aber zu nicht akzeptablen Resultaten führen - eine lange Animation mit mehreren Objekten und komplexen Effekten lässt sich nun halt einmal nicht als 10-Kilobyte-GIF mit 12 Frames pro Sekunde abspeichern.
Der gut ausgestattete Webdesigner steht immer wieder vor der gleichen Herausforderung: Man entwirft seine Seiten auf einem grossen Bildschirm mit einer Auflösung von 1600x1200 Pixel oder mehr, ist sich aber gleichzeitig bewusst, dass der Durchschnitts-User gerade mal über 1024x768 Pixel verfügt, von den noch kleineren Screens mobiler Geräte wie Palm oder Pocket PC ganz zu schweigen.
Um die Seitendarstellung unter verschiedenen Auflösungen ohne dauerndes Umschalten der eigenen Bildschirmauflösung zu testen, bedient man sich mit Vorteil eines kleinen, aber genialen Tools: BrowserMaster, der Nachfolger des nun als Freeware erhältlichen BrowserSizer, ist laut Hersteller "ein Tool für Web-Developer, erstellt von Web-Developern" und erfüllt genau diesen einen Zweck.
Das Programm läuft unter sämtlichen Windows-Versionen, erscheint als Symbol im System-Tray der Taskleiste und bietet eine Reihe nützlicher Features:
• Kontrolle der Fenstergrösse von Internet Explorer ab Version 3 und Netscape Navigator ab Version 2
• Kontrolle der Grösse des aktiven Fensters von beliebigen Applikationen
• voreingestellte Standardgrössen und Benutzer-definierte Spezialgrössen
• Grössendefinition mit oder ohne Einrechnen der Windows-Taskleiste und der Office-Toolbar
• Browser-unabhängige Bookmarks
• Check auf Browser-sichere Farbpaletten
Wer kennt sie nicht, die netten Nachrichtenticker, die aktuelle News in kompakter Form mit gemächlich durchlaufenden Textzeilen präsentieren? Die einfachste Art, solche Laufschriften zu erzeugen, funktioniert leider nur im Internet Explorer und bietet ausser simpler Laufschrift keine weiteren Funktionen - der HTML-Befehl marquée. Die Programmierung eines vergleichbaren Effekts in DHTML setzt intime Kenntnisse voraus und ist nicht in fünf Minuten zu erledigen. Deshalb bietet der Shareware-Markt eine ganze Reihe von vorgefertigten, mehr oder weniger brauchbaren Hilfsprogrammen zum Erzeugen von Tickeranzeigen.
Die flexibelsten Funktionen bietet die Applet Headline Factory der Firma CoffeeCup Software, die auch durch einen HTML-Editor für Linux und den Wireless Builder zum Erstellen von WAP-Seiten und WBMP-Bildern bekannt ist. Die Applet Headline Factory erzeugt aufgrund einiger Angaben, die der Webdesigner per Dialog erfasst, ein Java-Applet samt zugehörigen HTML-Befehlen zum Einbau in eine bestehende Webseite.
Das Erstellen einer Tickeranzeige erfolgt in drei Schritten:
• Auf der Karte General gibt man Breite und Höhe des Applet-Bereichs an, ebenso können hier Farbe, Dicke und Stil einer allfälligen Umrahmung festgelegt werden. In den Scroll Settings gibt man an, wie schnell der Text laufen und wie lange die einzelnen Schlagzeilen pausieren sollen, bevor der Text weiterläuft. Die Angaben sind allerdings in einer wenig anschaulichen Zahlenskala gehalten; man kommt nicht ohne mehrfaches Ausprobieren aus, bevor man den gewünschten Effekt erzielt, wozu sowohl eine Preview-Funktion (zeigt nur Grösse und Darstellung an, nicht die Live-Laufschrift) als auch die Direktanzeige im Browser zur Verfügung steht. Auf Wunsch lassen sich zusätzlich Scroll-Buttons in den Ticker einblenden, mit denen der Betrachter von Hand durch die Schlagzeilen blättern kann - für eine automatische Tickeranzeige jedoch eigentlich weniger empfehlenswert.
• Unter Headlines werden die anzuzeigenden Texte definiert. Sie können entweder einzeln im Dialog eingegeben und optional mit einem Hyperlink, einem Bild sowie einer Art Tooltip ergänzt werden, der bei Mausberührung am oberen Applet-Rand erscheint. In diesem Fall sind die Schlagzeilen fixer Bestandteil des Applets, das bei jeder Textänderung neu generiert werden muss. Oder man erfasst sie in einem externen Textfile - dann kann die Anzeige jederzeit durch Ändern dieses Files mutiert werden, aber die Verknüpfung zu anderen URLs, die Bilder und der Tooltip entfallen.
• Im Tab HTML zeigt die Factory den generierten HTML-Text an. Er wird per Copy&Paste im Webeditor an passender Stelle auf eine Webseite kopiert. Im gleichen Verzeichnis sollten auch die zugehörige, mitgelieferte Java-Klasse Headline.class sowie allenfalls das Textfile mit den externen Headline-Texten und die eingebundenen Bilder liegen.
Dieses sensationelle JavaScript- und DHTML-basierte Menüsystem macht das Erstellen komplexer, individuell gestalteter Navigationsbalken und Pop-up-Menüs für Websites zum Kinderspiel. Man erstellt damit Menüsysteme samt hierarchischen Untermenüs und Rollover-Effekten, die sich auf Wunsch sogar frei auf der Webseite verschieben lassen und magnetisch dem Fensterrand anfügen. Einige Webeditoren und Bildbearbeitungsprogramme wie Fireworks bieten mittlerweile ebenfalls integrierte Pop-up-Menü-Generatoren, aber kein anderes Tool kommt punkto Flexibilität und Funktionalität an diese Shareware heran.
Zum Erstellen von Menüs muss auf dem Entwicklungssystem Internet Explorer 4 oder 5 vorhanden sein; es werden zwei verschiedene Varianten des Tools für die beiden Browserversionen installiert. Beim ersten Start prüft das Programm, ob der für den Betrieb benötigte Windows Scripting Host auf dem System vorhanden ist. Die generierten Menüs laufen problemlos sowohl unter Internet Explorer als auch unter Netscape Navigator.
Der Aufbau eines Menüsystems ist ausserordentlich einfach: Ein Wizard leitet Schritt für Schritt durch die ersten Konfigurationsschritte; die einzelnen Menüoptionen definiert man danach in einer bequemen Oberfläche.
• Zunächst legt man fest, wie das Menü aktiviert wird. Zur Wahl stehen die Aktivierung mit der linken (konventionelles Pop-up-Menü) oder rechten Maustaste (Ersetzen des Kontextmenüs ab IE 5 und Navigator 4), per Doppelklick, permanente Anzeige (für Hauptnavigation) oder Aktivierung per Klick auf ein bestimmtes Bild, das auf der Seite angezeigt wird.
• Danach folgen die Einstellung des Farbschemas, der Schriftarten und der Grösse der Randzone sowie Angaben, in welchen Verzeichnissen die erzeugten Menüs plaziert werden sollen. Auf Wunsch baut das Tool den generierten Code gleich selbst in eine vorgegebene HTML-Seite ein.
• Die Menüoptionen definiert man nun ausserhalb des Wizard in der eigentlichen Oberfläche des Tools. Für jeden Eintrag lassen sich die Bezeichnung und die Aktion festlegen, die beim Aktivieren der Option durchgeführt wird: Link zu einer URL im selben oder einem neuen Fenster, Öffnen eines Untermenüs oder Ausführen einer JavaScript-Funktion. Die Variante in neuem Fenster erlaubt die exakte Spezifikation von Fenstergrösse und Interface-Elementen; es lässt sich zum Beispiel automatisch ein 200x200 Pixel grosses, nicht veränderbares Browserfenster ohne Toolbar und URL-Anzeige erzeugen. Zu jeder Menüoption kann ausserdem zusätzlich ein Bild angezeigt werden.
Neue Untermenüs werden im linken unteren Bereich des Fensters definiert; die internen Namen der Untermenüs dürfen im Gegensatz zur später auf der Webseite erscheinenden Bezeichnung der Menüoptionen allerdings auf keinen Fall Umlaute enthalten.
• Das erstellte Menü wird im linken Bereich des Tool-Fensters laufend angezeigt, ist dort allerdings nicht funktionsfähig. Der Header Menu created with Pop-Up erscheint nur in der Freeware-Version; in einer bezahlten Shareware- oder kommerziellen Version kann er durch einen eigenen Menükopf ersetzt oder ganz weggelassen werden.
• Mit einem Klick auf den roten Button generiert das Tool sämtliche Files, die für die Anzeige des Menüs benötigt werden, darunter getrennte Pop-up-Scripts für Internet Explorer und Navigator, die vom ebenfalls generierten HTML-Code automatisch aufgerufen werden, sowie GIF-Files für die Grundelemente des Menüs und die eingebundenen Bilder. Das Menü funktioniert anstandslos, sofern auf der Webseite nicht bereits ein onLoad-Handler im Body-Tag oder ein window.onload-Eventhandler in irgendeinem JavaScript vorhanden ist. In diesem Fall müssen die Onload-Anweisungen von Hand in den Pop-up-Code verschoben werden.
Pop-Up generiert auch eine HTML-Beispielseite, mit der sich das Menü sofort auf dem Entwicklungssystem testen lässt. Für die Publikation auf dem Webserver sollte jedoch nicht der Code dieser Sample-Seite verwendet werden, sondern die im Tool-Fenster angezeigten Befehle.
Die Freeware-Version ist, neben der permanenten Anzeige des Default-Menü-Headers, mit zwei weiteren Limitationen behaftet: Die erstellten Menüs können zwar generiert und in Webseiten eingebaut, aber nicht für spätere Mutationen gesichert werden, und es sind nur die vordefinierten Farbschemata möglich. Die registrierte Version für Home-User, die das Erstellen beliebig vieler Menüs für den persönlichen Gebrauch ermöglicht, kostet zwanzig Dollar. Mit hundert Dollar schlägt die Version für Webdesigner zu Buche, die ihre Menüs auf den Sites ihrer Kunden einsetzen wollen - angesichts der gebotenen Funktionsfülle ein mehr als gerechtfertigter Obolus.
Mit iSpace erstellte Websites profitieren von der 3D-Erfahrung des Herstellers Caligari, der mit seinem Modeling- und Animationsprodukt TrueSpace seit langem massgeblich in der 3D-Szene mitmischt. Das Resultat sind Webseiten mit dreidimensionalem Look, die der iSpace-Anwender aufgrund der mitgelieferten Vorlagen sowie allenfalls selbst erstellter, aus anderen Programmen importierter 3D-Elemente zusammenstellt. iSpace bietet dazu einen 3D-Workspace, in dem die Webseite als 3D-Szene komplett mit Lichtern und Materialien komponiert wird, enthält jedoch ausser einem Textwerkzeug und den üblichen Grundformen wie Kegel, Zylinder und Würfel keine eigenen Modeling-Tools. Mit iSpace verpasst man einer Webseite wie folgt den typischen 3D-Look, falls man nicht auf eine der mitgelieferten Vorlagen zurückgreifen will:
• Mit den Tabellenwerkzeugen wird zunächst die Struktur der Seite gezeichnet. Jede Zelle der Tabelle kann später ein Element aufnehmen, zum Beispiel einen Button oder einen 3D-Schriftzug. Mit den Werkzeugen Draw Table und Erase Table erzeugt und löscht man die Zelleneineilung rasch.
• Aus dem Objektmenü ganz links im iSpace-Fenster wählt man nun die Objektkategorien und Objekte, die den einzelnen Zellen zugeordnet werden sollen. Das Paket kommt mit diversen Bibliotheken von animierten und statischen Buttons, Hintergründen, Umrahmungen und 3D-Fonts.
• Die Elemente werden per Drag&Drop aus der Objektliste in den 3D-Arbeitsraum gezogen. Auf die gleiche Weise lassen sich die vordefinierten Beleuchtungsanordnungen auf die Gesamtszene und die Materialien auf ein selektiertes Objekt oder einen Teilbereich eines Objekts, zum Beispiel den Rand einer 3D-Schrift, anwenden.
• Die einzelnen Objekte verschiebt und rotiert man im 3D-Raum mit dem sogenannten Widget, das beim Auswählen direkt neben dem Objekt erscheint. Die Eigenschaften eines Objekts können im Properties-Dialog eingestellt werden, der durch einem Klick mit der rechten Maustaste erscheint. Das Programm bietet, ähnlich einer vollen 3D-Applikation, zahllose Einstellmöglichkeiten. Experimentieren ist angesagt.
• Während des Editierens kann man beliebig zwischen der perspektivischen 3D-Ansicht und dem rechtwinkligen Blick auf die Seite von oben wechseln, der auch auf der definitiven Webseite erscheint. Mit dem Render-Befehl kann das Resultat Zellenweise oder für die ganze Seite zwischendurch immer wieder kontrolliert werden. Dies ist sehr zu empfehlen, da die permanente Solid-Darstellung zuweilen überhaupt nicht dem definitiv gerenderten Resultat entspricht.
• Fällt die gestaltete Seite zur Zufriedenheit aus, erstellt iSpace auf den Befehl Render all into the file eine HTML-Seite und rendert per Raytracing sämtliche benötigten Grafiken in fotorealistischer Qualität samt Lichtern, Lensflares und Schattenwurf. Pro Zelle der Tabelle wird ein Grafikelement generiert; bei Buttons zusätzlich je eine Grafik für den Mouseover- und Mousedown-Status.
Auf diese Weise entstehen je nach Gestaltungsaufwand wunderschöne Webseiten, die jedoch ziemlich datenintensiv sind: Die durch das 3D-Rendering entstandenen, mit Antialiasing und Lichtverläufen ausgestatteten Grafiken sind nicht gerade schlank an Kilobyte. Unsere kleine Beispielseite wiegt sage und schreibe 208 Kilobyte, wovon allerdings die strukturierten Hintergründe den Löwenanteil beanspruchen.
