info@a-coding-project.de

Fireworks: Webeffekte

Fireworks stellt eine so genannte Web-Ebene bereit. Dabei handelt es sich um eine spezielle Ebene, die im Vordergrund eines Dokumentes angezeigt wird und dem Anwender die interaktiven Elemente wie Hotspots oder Segmente anzeigt. Doch nicht nur Image-Maps gehören zu den Webeffekten auch Verknüpfungen, Schaltflächen und animierte Bilder sind bei Grafiken im Einsatz für dasWWWunverzichtbar. Die Arbeit mit Webobjekten ist mit Hilfe von FireworksMX ganz einfach. Mit dieser Anwendung lassen sich sogar ganze Webseiten erstellen, dafür sind Grundkenntnisse in HTML und JavaScript von Vorteil.

URLs verwenden

Manche Webobjekte sollen über ein oder mehrere Verknüpfungen verfügen, die den Nutzer zu weiterführenden Informationen weiterleiten. So eine Verknüpfung lässt sich in dieser Anwendung in der Bedienfeldgruppe "Elemente" mit dem Bedienfeld "URL" einstellen. Bitte beachten Sie, dass URLs nur auf Hotspots, Segmente und Schaltflächen angewendet werden können. Lesen Sie dazu bitte den Abschnitt Segmente und Hotspots. Häufig verwendete URLs können in der URL-Bibliothek gesammelt werden, so dass bei der Wiederverwendung schnell darauf zugegriffen werden kann. In dem Bedienfeld "URL" können Sie URLs hinzufügen, bearbeiten und löschen. Wenn in einem Dokument eineURLmehrfach verwendet wurde und diese geändert werden soll, dann nutzen Sie die Funktion Suchen & Ersetzen. Über den Menübefehl Bearbeiten -> Suchen können Sie ein Dialogfenster öffnen in dem Sie in dem zweiten Dropdown-Menü die Option "URL suchen" auswählen. Tragen Sie in das Textfeld "Suchen" die ursprünglicheURLein und unter "Ersetzen" den neuen Hyperlink, klicken Sie dann auf die Schaltfläche "Alles ersetzen". Wenn Sie beispielsweise für jeden Kunden eine eigene URL-Bibliothek anlegen möchten, dann können Sie dies wie folgt tun. Öffnen Sie über das Optionsmenü des Bedienfeldes "URL" den Befehl "NeueURLBibliothek" und geben Sie in dem sich öffnenden Dialogfenster den entsprechenden Kundennamen ein. Der von Ihnen eingegebene Namen wird im URL-Bedienfeld in dem Dropdownliste "Aktuelle URL-Bibliothek" angezeigt. Um dieser neuen URL-Bibliothek neue Hyperlinks hinzuzufügen wählen Sie, falls nicht schon aktiv, die gewünschte URL-Bibliothek aus und tragen Sie in das Feld "Hyperlink" eineURLein. Anschließend klicken Sie auf das Pluszeichen. Für jede weitereURLin dieser Bibliothek gehen Sie wie soeben beschrieben weiter vor. Selbstverständlich können Sie später jederzeit neue URLs einer Bibliothek zufügen. Um bei der Erstellung einer neuenURLdiese gleichzeitig einem geeigneten Webobjekt zuzuweisen, wird das Segment, der Hotspot oder die Schaltfläche markiert bevor wie oben beschrieben eineURLder Bibliothek zugefügt wird. Um URLs, die in einem Dokument nicht verwendet werden, aus der Bibliothek zu entfernen, öffnen Sie das Optionsmenü des Bedienfeldes und wählen den Befehl "nicht verwendete URLs löschen" aus. Einzelne URLs können Sie aus den Bibliotheken auch so entfernen in dem Sie diese markieren und dann auf das Papierkorb-Icon unten rechts im Bedienfeld klicken. Sie können auch über den Befehl "URL löschen" des Optionsmenüs einen markierten Hyperlink aus der URL-Bibliothek löschen.

Segmente und Hotspots

Segmente, die das Grundgerüst für interaktive Objekte bilden, sind keine Bilder, sondern bestehen aus HTML-Code. Diese Objekte können in der Web-Ebene des Programms angezeigt, ausgewählt und umbenannt werden. Per Drag & Drop können Sie interaktives Verhalten Segmenten zuweisen und dadurch im Arbeitsbereich rasch Rollover- und Bildaustauscheffekte erzielen. Mit Hotspots die auch unter dem Begriff Imagemaps bekannt sind können ebenfalls interaktive Elemente in eine Webgrafik eingebaut werden. In den Imagemaps, die aus einem HTML-Code bestehen, werden die Koordinaten für ein Bild gespeichert.

Arbeit mit Segmenten

Mit dem Segmentierwerkzeug können Sie eine Grafik in einzelne Stücke zerteilen und diese als HTML-Datei zusammen mit den einzelnen Bildern speichern. Um beispielsweise ein Scribble einer Website in einzelne Segmente aufzuteilen wählen Sie das Segmentierwerkzeug aus und ziehen mit der gedrückten Maustaste um jedes einzelne Segment einen Rahmen. Das Programm stellt jedes einzelne Segment in grün mit einem roten Rand dar. Im Eigenschaftsinspektor können Sie jedem Segment einen Typ (Grafik oder HTML) zuweisen. Bei der voreingestellten Auswahl Grafiken wird das Segment mit einer durchscheinenden grünen Farbe angezeigt. Wählen Sie allerdings HTML als Typ aus, dann wird dieses Segment als undurchsichtiges grünes Kästchen angezeigt. Über die Schaltfläche "Bearbeiten" unterhalb des ausgewählten Segmenttyps HTML können Sie einen Editor öffnen in dem Sie den gewünschten HTML-Text eingeben können. Für den Segmenttyp Grafik können Sie im Eigenschaftsinspektor die Exporteinstellungen für die Segmente einstellen, einen Hyperlink eintragen oder auch aus bereits eingetragenen eineURLauswählen, einen Alt-Text eingeben, der angezeigt wird, wenn das Bild nicht dargestellt werden kann und das Zielfenster für den Browser angeben. Um nun eine in Fireworks erstellte Seite als HTML-Datei auszugeben ist es sinnvoll zuerst die HTML-Einstellungen zu überprüfen. Führen Sie den Menübefehl Datei -> HTML-Einstellungen aus. Es öffnet sich das Dialogfenster "HTML-Einstellungen" mit den Registern Allgemein, Tabelle und Dokumentenspezifisch. In dem Reiter "Allgemein" können Sie den beim Export auszugebenden HTML-Stil einstellen sowie die Dateierweiterung wie zum Beispiel .htm, .asp, .php oder auch .xhtml auswählen. Darüber hinaus stehen Ihnen hier noch zwei Checkboxen zur Verfügung mit denen Sie HTML-Kommentare einschließen und die Kleinschreibung von Dateinamen erzwingen können. Über die Registerkarte "Tabelle" haben Sie die Möglichkeit die Abstände für HTML-Tabellen zu steuern und eine spezifische Farbe für die Zellen einzustellen. Auf der Registerkarte "Dokumentenspezifisch" können Sie eine Formel für die Benennung von Segmenten angeben. Der unter Standard-Alt-Tag eingetragene Text wird an der Stelle angezeigt, an der die Grafik erscheinen soll. Er wird bereits angezeigt während die Grafik noch lädt. Manche Internetbrowser können diesen Text auch als Quickinfo anzeigen. Für sehbehinderte Web-Nutzer stellt dieser Text ebenfalls eine Hilfe dar. Aktivieren Sie die Checkbox "HTML-Dateien mit mehreren Navigationsleisten exportieren", wenn eine Navigationsleiste exportiert werden soll, die mehrere Seiten miteinander verknüpft. Das Programm exportiert dann eine zusätzliche Seite für jede Schaltfläche die sich in der Navigationsleiste befindet. Sollte das zu exportierende Dokument aus Zeichen von verschiedenen Zeichensätzen bestehen, so aktivieren Sie noch die Checkbox "UTF-8 Codierung verwenden". Wenn Sie die eingegebenen Änderungen als Standard festlegen möchten klicken Sie auf die Schaltfläche "Standardeinstellungen festlegen" das Programm fragt dann noch einmal nach, ob Sie die Änderungen wirklich als Standard übernehmen möchten. Bestätigen Sie mit "OK" und klicken in dem Dialogfenster "HTML-Einstellungen" nochmals auf "OK". Neben dem rechteckigen Segmentierwerkzeug können Sie über das kleine schwarze Dreieck bei dem Segmentierwerkzeug auch das Werkzeug für die Polygone Segmentierung auswählen. Klicken Sie mit dem Polygon-Segmentierwerkzeug mit mehreren Mausklicks einen Rahmen um das gewünschte Objekt. Um einem ausgewählten Segment ein interaktives Verhalten zuzuordnen öffnen Sie über den Menübefehl Fenster -> Verhalten das gleichnamige Bedienfeld. Über die Symbolschaltfläche + können Sie dem markierten Segment ein Verhalten zuordnen. Beispielsweise können Sie zwischen den Funktionen Rollover, Bild austauschen, Navigationsleistenbild festlegen, Popupmenü anzeigen und Statusleistentext festlegen auswählen. Natürlich können Sie auch mehrere interaktive Funktionen einem Segment zuweisen.

Die Segmente in der Ansicht
Darstellung: Die Segmente in der Ansicht

Der HTML-Code der oben angezeigten in Fireworks erstellten Homepage sieht folgendermaßen aus:

<html>
<head>
<title>home.gif</title>
<meta http-equiv="Content-Type" content="text/html;">
<!--Fireworks MX 2004 Dreamweaver MX 2004 target.  Created 
Sun Apr 15 16:20:50 GMT+0200 2007-->
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="640">
<!-- fwtable fwsrc="Unbenannt" fwbase="home.gif" 
fwstyle="Dreamweaver" fwdocid = "1324849645" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="203" height="1" border="0" 
    alt=""></td>
   <td><img src="spacer.gif" width="437" height="1" border="0" 
    alt=""></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" 
    alt=""></td>
  </tr>

  <tr>
   <td colspan="2"><a href="home.htm" target="_self"><img 
    name="home_r1_c1" src="home_r1_c1.gif" width="640" 
    height="143" border="0" alt="Home"></a></td>
   <td><img src="spacer.gif" width="1" height="143" border="0" 
    alt=""></td>
  </tr>
  <tr>
   <td><img name="home_r2_c1" src="home_r2_c1.gif" width="203" 
    height="53" border="0" alt=""></td>
   <td rowspan="3" valign="top"><p>Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit. Donec molestie. Sed aliquam sem 
    ut arcu. Phasellus sollicitudin. Vestibulum condimentum 
    facilisis nulla. In hac habitasse platea dictumst. Nulla 
    nonummy. Cras quis libero. Cras venenatis. Aliquam posuere 
    lobortis pede. Nullam fringilla urna id leo. Praesent aliquet 
    pretium erat. Praesent non odio. Pellentesque a magna a mauris 
    vulputate lacinia. Aenean viverra. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos 
    hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor 
    et, rutrum et, tortor. </p></td>
   <td><img src="spacer.gif" width="1" height="53" border="0" 
    alt=""></td>
  </tr>

  <tr>
   <td><img name="home_r3_c1" src="home_r3_c1.gif" width="203" 
    height="48" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="48" border="0" 
    alt=""></td>
  </tr>

  <tr>
   <td><img name="home_r4_c1" src="home_r4_c1.gif" width="203" 
    height="41" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="41" border="0" 
    alt=""></td>
  </tr>
  <tr>
   <td><img name="home_r5_c1" src="home_r5_c1.gif" width="203" 
    height="48" border="0" alt=""></td>
   <td rowspan="3"><img name="home_r5_c2" src="home_r5_c2.gif" 
    width="437" height="132" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="48" border="0"  
    alt=""></td>
  </tr>
  <tr>
   <td><img name="home_r6_c1" src="home_r6_c1.gif" width="203" 
    height="47" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="47" border="0"  
    alt=""></td>
  </tr>
  <tr>
   <td><img name="home_r7_c1" src="home_r7_c1.gif" width="203" 
    height="37" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="37" border="0" 
    alt=""></td>
  </tr>
</table>
</body>
</html>

Wie ein Hotspot erzeugt wird

Ein Beispieleinsatz für eine Imagemap kann ein Teamfoto sein, bei dem der Besucher einer Seite per Klick auf einen Kopf mehr über dieses Teammitglied erfährt. In der Werkzeugliste stehen drei verschiedene Hotspot-Werkzeuge zur Auswahl bereit. Wenn Sie auf das kleine schwarze Dreieck unten rechts auf dem Hotspot-Werkzeug drücken haben Sie die Auswahl zwischen dem Hotspot- Rechteck, dem Hotspot-Kreis und dem Hotspot-Polygon. Wählen Sie das passende Werkzeug aus markieren Sie, durch Ziehen und Klicken mit der Maus, den gewünschten Bereich im Arbeitsfenster. Solange der gezeichnete Hotspot markiert ist können Sie im Eigenschaftsinspektor dem Hotspot einen Namen geben, seine Größe anpassen, die Form ändern, einen Hyperlink sowie einen alternativen Bildtext eintragen und das Zielfenster, in dem die damit verknüpfte Seite geöffnet werden soll, auswählen.

Schaltflächen und Popupmenüs

Mit dieser Bildbearbeitungssoftware können Sie interaktive Schaltflächen für Ihren Internetauftritt erstellen. Mit Hilfe des Fireworks Schaltflächeneditors geht das ganz einfach.

Neue Schaltfläche einfügen

Um eine neue Schaltfläche zu erstellen führen Sie den Menübefehl Bearbeiten -> Einfügen -> Neue Schaltfläche aus. In dem Schaltflächeneditor können Sie mit den üblichen Werkzeugen eine eigene Schaltfläche entwerfen. Wenn Sie ein Objekt in den Reiter "Up" des Schaltflächeneditor gezeichnet haben und dann auf die Reiter "Over", "Down" oder "Over bei Down" wechseln können Sie über die Schaltfläche unten links innerhalb des Editors "

Weiterlesen: ⯈ Weitere Funktionen

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant