Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 8: Eigene Buttons mit Photoshop

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.

Profis stellen Buttons natürlich nicht so umständlich her wie wir in dieser Lektion. Viel einfacher gehts mit Fireworks - und das kommt erst später... Denn es ist wie so oft: Wenn man das Grundprinzip à la "The Hard Way" begriffen hat, kann man später allfällige Probleme viel besser lösen.

Wir wissen nun, wie man eigene Fotos ins Netz stellt und wie man sie als JPG speichert. Heute lernen wir, wie man eigene Buttons farbreduziert als GIF speichert und wie man mit zwei GIFs im Dreamweaver ein Rollover machen kann - einen Button, der seine Farbe ändert, wenn man mit der Maus drüber fährt.

Also: Photoshop öffnen! Und gleich mit Ctrl+N eine neue Datei machen, 200x200 Pixel, Inhalt weiss...

... und mit OK bestätigen. Danach im Werkzeugkasten eine schöne, dunkle Farbe auswählen (schwarz, blau, grün) und das Textwerkzeug öffnen:

Nun aufs Bild einen Text schreiben, z.B. "Home" oder "Links":

Danach folgende Schritte ausführen:

• Zurück zum Auswahlwerkzeug wechseln (im Werkzeugkasten links oben)
• Ctrl+A für "Alles markieren" wählen
• Ctrl+C (kopieren)
• Ctrl+N (Neue Datei), Enter
• Ctrl+V (einfügen)

Nun sieht man, dass Photoshop bei Alles Markieren / Kopieren nur gerade den Umrissen des Textes entlang geht. Wir haben nun zwei Dateien - die zweite, kleinere wird die Grundlage für das Rollover sein:

Nun müssen wir das kleine Bild als GIF speichern. Wie wir aus der Theorie wissen, sind GIFs für Bilder mit wenigen Farben (wie z.B. Buttons) die geeignete Dateiform, denn GIFs können farbreduziert werden. Vereinfacht gesagt: Je weniger Farben in der Farbtabelle eines GIFs gespeichert sind, desto kleiner ist das Bild.

Und das geht so (ohne die einfachere Fassung "Für Internet speichern" zu vergessen - aber eben, wir wollen ja "The Hard Way"):

• Bild / Modus / indizierte Farben (d.h. überflüssige Farben werden aus dem Bild entfernt)
• Frage nach "auf Hintergrundebene reduzieren" mit JA beantworten
• Im folgenden Dialog Palette Lokal (Perzeptiv) wählen, Erzwungen "keine", Dither "ohne":
  
  
  
• Nun bei den Farben einige Zahlen nacheinander eingeben - so wenig wie möglich und so viel wie nötig, dass das Bild sauber aussieht, d.h. wie im Original. Je nach Anzahl Farben auf die Veränderungen im Bild achten!
• Hier erreichen wir bei etwa 11 Farben ein Optimum bei möglichst wenig Farben. Wir stellen fest: Zu wenig Farben bewirken, dass die Ränder treppenartig werden:

• Fazit: Wenn wir genug Farben haben, OK klicken und das Bild innerhalb Ihrer Site als GIF speichern. Bei der Frage nach "Normal oder Interlaced" > "Normal" wählen. (Interlaced würde heissen: Das Bild erscheint nadisna, zuerst unscharf, dann immer besser.

Dasselbe müssen wir nun für das zweite Bild machen - dasjenige, das erscheint, wenn man mit der Maus über das erste fährt. Dazu müssen wir zurück zum ersten Bild (200x200 Pixel).

Bitte in den Textmodus wechseln und das Wort markieren. Danach in der Symbolleiste die Textfarbe wechseln, diesmal einen ganz anderen Farbton wählen, z.B. rot:

Danach die obigen Schritte wiederholen:

• Zurück zum Auswahlwerkzeug wechseln (im Werkzeugkasten links oben)
• Ctrl+A für "Alles markieren" wählen
• Ctrl+C (kopieren)
• Ctrl+N (Neue Datei), Enter
• Ctrl+V (einfügen)

Nun sind wir wieder am selben Ort wie oben - und müssen diese Datei auf die selbe Art als farbreduziertes GIF speichern. Wissen Sie noch, wie's geht?

Das fertige Bild, das nu etwa so aussehen sollte...

... speichern Sie am besten mit dem selben Namen wie das Original, mit "-over" am Schluss. So wissen Sie immer, welche beiden Bilderpaare zusammengehören.

Dreamweaver: Ein Rollover-Effekt entsteht

Sie sollten nun also z.B. ein Bild "button.gif" und ein Bild "button-over.gif" haben. Früher musste man nun von Hand ein Javascript programmieren, das die beiden Bilder sich bei Mauskontakt austauschen lässt und im Idealfall das zweite Bild bereits beim Laden ins Cache lädt. Diese Zeiten sind zum Glück vorbei - im Dreamweaver muss man nur noch "Einfügen / Grafikobjekte / Rollover-Bild" wählen (Dreamweaver MX: "Einfügen / Interaktive Bilder / Rollover-Bild"), und dieser Dialog öffnet sich:

Unter "Originalbild" und "Rollover-Bild" mittels "Durchsuchen" die richtigen Bilder wählen, vorausladen aktivieren (so erscheint das Bild beim drüberfahren umgehend und muss nicht zuerst vom Server geladen werden), einen allfälligen ALT-Text eingeben und die Datei wählen, die erscheinen soll. Das ganze sieht dann so aus... und mit einem Klick gehts zurück zur Übungsübersicht:

Wichtig zu wissen ist noch, dass bei Rollovers Original- und Rolloverbild aufs Pixel genau die selben Ausmasse haben müssen, da es sonst zu Verzerrungen kommt.

Um also diesen Effekt hier zu erreichen...

... müssen Sie das zweite Bild ebenfalls mit 77x22 Pixeln speichern und den kleineren Text einmitten.

Wer nun keine Bilder selbst machen will: Hier sind alle drei zum Üben, alle 77x22 Pixel!

Zur Veranschaulichung habe ich die Border auf 1 gesetzt. Beim Speichern mit der rechten Maustaste wird der Rahmen aber nicht mitgespeichert.

Und noch ein Hinweis: Wenn Bilder einmal mit indizierten Farben als GIF gespeichert sind, sollten Sie daran keine Änderungen mehr vornehmen. Jede Änderung wird einen Qualitätsverlust zur Folge haben, da Sie ja nur noch mit einer reduzierten Farbtabelle arbeiten. Daher wiederum der Tipp: Gut planen! Oder im Notfall mit Bild / Modus / RGB-Farbe zurück in den "vollen" Farbmodus wechseln - am Schluss aber vor dem Speichern als GIF wieder in den indizierten Farbmodus verwandeln.

Weitere Javascript-Effekte einfach gemacht

Sehen Sie sich in der Dokumentation um - dort steht, wie man einfach ohne Javascript-Kenntnisse weitere lustige Effekte machen kann, zum Beispiel wenn Sie mit der Maus über diesen Button fahren...

So können Sie z.B. weiter auch können Browserfenster ohne Navigationselemente in einer bestimmten Grösse erscheinen lassen, den Text der Statusleiste ändern usw. Fahren Sie zum Beispiel mal über dieses Image und schauen Sie, was passiert...

... genau, Sie können auch Bild X durch Bild Y austauschen, wenn Sie über Bild A fahren.

Nicht vergessen: Auf den Elementen, an die der Effekt gekoppelt ist, sollte ein "leerer Link" stehen, d.h. ein Link ins Leere, mit Vorteil steht im Link-Feld nur "javascript:;" (ohne Anführungszeichen) oder aber ein "Gartenhag" (#). Ersteres bedeutet: Hier wird ein Javascript ausgeführt, das aber nicht näher definiert ist - sprich: es passiert bei einem Klick auch nichts. Der Gartenhag bewirkt dasselbe ohne Script; der Nachteil ist aber, dass der Cursor auf der Seite, die den Link enthält, ganz nach oben springt. Die Javascriptlösung ist also eleganter.

Die soeben beschriebene Funktion "Objekt A überfahren, aber Objekt B ändert sich" ist etwas tricky und funktioniert so...

Zuerst muss man allen Bildern einen zusätzlichen Namen vergeben. Dieser wird in ein bestimmtes Feld des Eigenschaften-Fensters eingetragen:

Klicken Sie also auf jedes Bild, das mit dem geplanten Austausch-Effekt zu tun hat, und tragen Sie ins erwähnte Feld (das ungeschickterweise, wie man sieht, keine Legende trägt...) den Zusatznamen ein. Der Zusatzname soll leicht merkbar sein; man muss dem Namen genau ansehen, auf welches Bild er sich bezieht. Der Name hat nichts mit dem Dateinamen zu tun, sondern ist eine Zusatzbezeichnung, damit die Javascripts sauber funktionieren. Der Name darf später (wenn die Scripts gesetzt sind) auch nicht mehr geändert werden.

Wenn dies erledigt ist, klicken Sie auf das "Ursprungsbild" (jenes Bild, das Sie mit der Maus überfahren oder anklicken, damit sich ein anderes ändert). Wählen Sie nun im Fenster "Verhalten" (falls nicht vorhanden, mittels Befehl "Fenster / Verhalten" einblenden) das Plus-Zeichen und wählen Sie "Bild austauschen":

Im nun folgenden Fenster wählen Sie mittles einfachem Klick jenes Bild aus, das sich ändern soll, und geben Sie beim Feld "Quelle einstellen auf" das neue Bild an:

Sobald ein Bild mit einem Effekt belegt wurde, erhält es einen Stern. Auch hier gilt: Original- und Austauschbild müssen die selbe Grösse haben.

Sie können natürlich (was meistens nicht sehr sinnvoll ist), mehrere Effekte auf einen Klick haben; beispielhaft gesprochen: Wenn Sie auf Bild A klicken, kann sich Bild B1 und Bild B2 verwandeln, aber auch gleichzeitig Bild C1 in Bild C2.

Wählen Sie jeweils immer aus, dass Sie die Bilder vorausladen und die Bilder bei onMouseOut (wenn Sie mit der Maus wieder vom Bild wegfahren) wiederherstellen. Testen Sie am Schluss alles im Browser.

Im "Verhalten"-Fenster sehen Sie nach Abschluss der Aktionen alle Aktionen, die auf dem Bild "liegen":

Mit dem "Verhalten"-Fenster können Sie übrigens auf das jeweils angeklickte Element beliebige andere Effekte legen bzw. hinzufügen und deren Details bestimmen...

...sowie bei welcher Aktion die Aktion ausgeführt werden soll (onClick, onMouseOver, onLoad usw.) - klicken Sie dazu im "Verhalten-Fenster" einmal auf den Effekt und wählen Sie im dazugehörigen Pulldown-Menu die Aktion aus:

Sofern nicht so viel Effekte wie hier angezeigt werden, wählen Sie unter "Ereignisse zeigen für > Browser ab 4.0" aus. Viel Spass beim Experimentieren!

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.