Dreamweaver: Einsatz von JavaScript
Zu der Interaktivität einer Webseite gehört, dass bestimmte Reaktionen auf Benutzerereignisse wie dem Bewegen des Mauszeigers folgen. Bekannte Beispiele sind Navigationsleisten oder andere Schaltflächen, die ihr Aussehen ändern, wenn man mit dem Mauszeiger darüber fährt. Eine andere Reaktion könnte ein sich öffnendes Informationsfenster im Browser sein. Dahinter stecken bestimmte JavaScript-Befehle, die in Dreamweaver bereits vordefiniert sind und deshalb nicht mehr geschrieben werden müssen, sondern nur noch in die Webseite eingefügt werden.Rollover - Grafiken
Die Möglichkeiten, die Dreamweaver für den Einsatz von JavaScript bietet, sind vielfältig. In dieser Dokumentation sollen zwei konkrete Beispiele behandelt werden, um das Prinzip der Anwendung zu verdeutlichen. Das erste Beispiel ist die Erstellung von Rollover - Grafiken. Solche Grafiken lassen sich mit diesem Programm ohne viel Aufwand erstellen, machen aber einen sehr professionellen Eindruck.Für diesen sehr typischen Einsatz von JavaScript auf Webseiten muss man zuerst die Grafiken auswählen, die angezeigt werden sollen, wenn sich die Webpage aufbaut und wenn der User die Maus über die erste Grafik führt. Man benötigt also pro Schaltfläche mit Rollover - Effekt zwei Bilder, wobei man natürlich in einer Navigationsleiste durchaus für jeden Schalter die gleichen zwei Bilder verwenden kann, da eine Unterscheidung durch die Beschriftung möglich ist. Nun öffnet man eine einfache HTML-Seite (Datei - Neu - Einfache Seite - HTML) und lädt die erste Grafik in die HTML-Seite, indem man "Einfügen -Bild" verwendet.
Hat man die erste Grafik ausgewählt und markiert, geht es mit dem Menüpunkt "Fenster - Verhalten" weiter. Dieses Fenster ist bereits aus dem Kapitel zur Formularerstellung und Überprüfung bekannt. Erneut ist dieses Fenster zuerst leer. Man muss auf das Plus-Zeichen klicken, um die Möglichkeiten in diesem Fenster einsehen zu können. Unter den zahlreichen Optionen wählt man für diese Aufgabe das "Navigationsleistenbild". Der sich öffnende Dialog erfragt nun schlicht und einfach, welches Bild wann gezeigt werden soll. Man legt also fest, wie das Seitenelement heißen soll, welches das Up-Bild ist, welches das Over-Bild, das Down-Bild und das Over bei Down - Bild sein soll. Als Eingaben können noch der Alternative Text sowie die URL eingegeben werden, die angesteuert werden soll, wenn man auf dieses Navigationselement klickt. "Bilder vorausladen" ist eine sinnvolle Option, um Wartezeiten für das zweite Bild zu vermeiden, denn mit dieser Option wird nicht nur das erste sondern auch gleich das zweite Bild geladen, wenn sich die Seite aufbaut.
Darstellung: Erstellung eines Navigationsleistenbildes
Wenn man nach den Eingaben den Dialog mit OK schließt, ist schon die erste Rollover-Grafik fertiggestellt. Für eine Navigationsleiste müssen jedoch alle Schalter mit diesem Effekt versehen werden. Dazu markiert man jeweils das nächste Bild und wiederholt den oben beschriebenen Ablauf Schritt für Schritt. Wenn man seine vielleicht sieben Navigationselemente alle derart bearbeitet hat, sitzt die Erstellung von solchen Mouse - Over -Effekten. Nun hat man es sich nicht nur verdient, den Browser zur Vorschau zu öffnen, um das Werk zu betrachten, dies ist auch mehr als sinnvoll. Insbesondere sollte man alle auf dem Rechner verfügbaren Browserversionen nutzen, um einen umfassenden Test zu machen, zumindest mit den marktführenden Browsersystemen.
Die Vorschau ist jeweils über den Menüpunkt "Datei - Vorschau im Browser" und mit der Auswahl der einzelnen Browser möglich.
Fenster in bestimmter Größe öffnen
Stellen Sie sich vor, Sie wollen auf Ihrer Webseite einen kurzen Informationstext anzeigen, wenn der Besucher beim Befüllen eines Formulars eine Hilfestellung wünscht. Natürlich könnten Sie einen Link "Formularhilfe" anbieten, der ein weiteres Fenster öffnet, das Sie als Hyperlink mit dem Ziel "_blank" realisiert haben. Alleine mit HTML wird der kurze Hilfe-Text jedoch in einem vollständigen Browserfenster geöffnet. Dies sieht wenig professionell aus und führt eher zu einer Enttäuschung bei dem User, der plötzlich sieht, wie kurz die ihm angebotene Hilfe ist.Besser ist es, wenn sich ein kleines Fenster öffnet, das gerade genug Platz für den Hilfetext bietet. Das kann man über JavaScript erreichen und mit Dreamweaver sogar, ohne eine Zeile Code schreiben zu müssen. Zuerst erstellt man den Link-Text und markiert diesen. Dann verwendet man wieder den Menüeintrag "Fenster - Verhalten" und wählt über das Plus-Zeichen den Eintrag "Browserfenster öffnen". Der entsprechende Dialog fragt zum einem nach der URL, die in einem neuen Fenster geöffnet werden soll. Dann kann man die explizite Fensterbreite und -Höhe (in Pixel) eintragen. Dem neuen Fenster gibt man einen passenden Namen.
Darstellung: Definition eines neuen, sich öffnenden Browserfensters
Diese zwei Beispiele veranschaulichen die Mächtigkeit von Dreamweaver, das aufgrund der Befüllung der skizzierten Dialoge im Hintergrund den passenden Code schreibt. Wer sich für JavaScript näher interessiert, sollte auch die anderen Optionen aus dem Fenster "Verhalten" austesten und auch eine Blick in die Code-Ansicht innerhalb des Dokumentenfensters riskieren.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Verwendung von PHP und MySQL
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project