Aktionen steuern mihilfe der Verhaltenspalette in Dreamweaver

JavaScript ist gegenüber Java relativ einfach zu erlernen. Nachteil ist jedoch, dass der Code nicht auf jedem Browser sofort lauffähig ist und man so für fast jeden Browser ein paar Code-Zeilen anpassen muss. Gut ist jedoch, dass mir diese Arbeit Dreamweaver abnimmt. Denn der erzeugte Code funktioniert 100% auf IE / Firefox usw. Was ich nicht möchte, ist, in diesem Workshop JavaScript zu erklären. Ich möchte aber zeigen, wie es in Dreamweaver verwendet wird. Und los geht’s!

Dreamweaver bietet schon von Haus aus eine Menge vorgefertigter Aktionen/Scripte an. Wem die nicht ausreichen, der kann gerne auf der Adobe-Webseite weitere kostenlos herunterladen (wie das geht, habe ich im Workshop zum Erweiterungsmanager erklärt).

Zuerst öffne ich das Verhaltensfenster. Das geht unter Menü>Fenster>Verhalten.

Danach ein Klick auf das Plus-Zeichen, um zu schauen, welche Aktionen ich zur Auswahl habe:

Wir empfehlen:
Dreamweaver-Video-Training

 

Damit die Scripte sauber ablaufen, sollte vorher noch bei Ereignis zeigen für folgende Option ausgewählt werden:

 

Um jetzt z.B. einen Button auszutauschen, sobald ich mit der Maus drüberfahre, klicke ich zuerst den Button in meiner Dreamweaver-Vorlage an und danach ein Klick auf der Palette Verhalten>Pluszeichen>Bild austauschen. Danach öffnet sich ein Dialog, worin ich das Bild aussuchen kann, welches ich ersetzt haben möchte, sobald ich mit der Maus auf den Button in der Webseite komme:

 

Sobald ich auf OK geklickt habe, wird der Quellcode automatisch erzeugt. Danach ändert sich automatisch der Button von Bild 1 in Bild 2. Der Quellcode dafür, der jetzt von Dreamweaver erzeugt wurde, würde so aussehen:

 

Da es sich um ein Rollover handelt, bietet Dreamweaver zwei weitere Optionen an:

  • Bilder vorausladen: Normalerweise werden Bilder in einer Website erst dann geladen, wenn diese auch dargestellt werden sollen. Jedoch wäre es bei einem Rollover viel zu spät. Bis das neue Bild geladen würde, wäre der Besucher mit der Maus schon längst wieder vom Button weg. Damit dies nicht geschieht, fügt Dreamweaver ein JavaScript ein, das dafür sorgt, dass Bilder, die für Rollover benötigt werden, gleich mit dem Hauptdokument geladen werden.
  • Bilder bei onMouseOut wiederherstellen: Damit die Schaltfläche nach Verlassen der Buttons wieder Bild 1 anzeigt, wird automatisch ein neues Ereignis von Dreamweaver hinzugefügt. Bei einem einfachen JavaScript, das nur das Bild bei einem Ereignis austauscht, wäre dies nicht der Fall.

 

Jetzt könnte ich noch einen Ausblende-Effekt hinzufügen – dazu bindet Dreamweaver automatisch eine externe JavaScript-Datei ein (SpryEffects.js)

 

Ich habe das mal als kleines Video zu besseren Verdeutlichung aufgenommen:


Mit den beiden Pfeilen in der Verhaltenpalette nach oben und unten kann die Reihenfolge der Aktionen geändert werden. Es kann nämlich vorkommen, dass bei bestimmten Aktionen einiges nicht so läuft wie vorgesehen. Dann ist es hilfreich, die Reihenfolge der Aktionen zu verändern.

 

Browserweiche einfügen

Zum Einfügen einer Browserweiche mit JavaScript gehe ich wie gewohnt in die Verhaltenspalette, klicke jedoch vorher in der Code-Ansicht fast ganz oben auf <body>. Das Skript muss dem Body des Dokuments zugeordnet werden, da es beim Laden des Dokumentes ausgeführt wird.

 

Dann in der Verhaltenspalette auf ~Veraltet>Browser überprüfen. Danach erscheint diese Dialog-Box:

 

Hier kann ich jetzt alle Parameter eingeben, wie die Webseite auf einen bestimmten Browser reagieren soll. Schade ist jedoch, dass hier nur der IE und Netscape ausgewählt werden kann. Darum ist die Funktion nicht mehr wirklich up-to-date.

Plug-Ins überprüfen


Auch lässt sich mithilfe der Verhaltenspalette prüfen, ob ein bestimmtes Plug-In installiert ist. Vor allem bei Flash macht sich das sehr gut.

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training