Multimediakurs Leinfelder: Inhalt/ B:Fortgeschrittene/Modul 6 "Website-Erstellung und Management"/Modul 6.2 "html-Erweiterungen mit GoLive"/6.2.3 Script Actions am Beispiel von GoLive
(© copyright)     Letzte Änderungen:22.10.2002

Modul 6.1./6.2: R. Leinfelders kleines GoLive-Tutorial

Position innerhalb des Kurses

6.2.3 Script Actions am Beispiel von GoLive

Hier behandeln wir weitere Dynamisierungsmöglichkeiten Ihrer Website mit Hilfe sowie die generelle Anwendung von Script-Actions. Diese Dynamisierung wird durch Skripting-Sprachen, insbesondere JavaScript sowie daraus abgeleiteten Weiterentwicklungen erreicht. Die näheren Grundlagen zu JavaScript und weitere Beispiele erfahren Sie in Modul 7.

Eine kleine Einführung in Script Actions

Die auf einer mit klassischem html auf einer Webseite dargestellten Inhalte (Text, Abbildungen) sind statisch. Wenn ein Video oder animiertes GIF eingebaut ist, ist strenggenommen der Inhalt der Webseite nach wie vor statisch. Bild und Video werden beim Aufbau der Seite einmal geladen und laufen dann eben ab. Der Seiteninnhalt insgesamt bleibt gleich und kann nicht verändert werden.

Mit Dynamic html haben Sie im vorhergehenden Kapitel bereits eine Möglichkeit zur Dynamisierung einer html-Seite mittels Skriptprogrammen kennengelernt. Ein im Quellcode der html-Seite eingebettetes Skriptprogramm läuft beim Laden der Seite ab und ändert tatsächlich den dargestellten Seiteninhalt, ohne die html-Seite insgesamt zu wechseln (zu Unterschieden zwischen Programmen und Scriptprogrammen siehe Modul 6.3). Dieses Skriptprogramm wurde von GoLive gemäß unserer im Layout-Modus vorgenommenen "Zielvorgaben" generiert; wir haben es uns bislang nicht näher angesehen.

Bevor wir uns im nächsten Modul Skripte auch von der Syntax her etwas näher ansehen, hier vorab einige wesentliche Punkte zum Verständnis (und damit den Möglichkeiten) von Scripten in html-Seiten.

  1. In den Quellcode eingebettete Skriptprogramme werden beim Laden der html-Seite initialisiert. Sie sind damit noch nicht ausgeführt, jedoch geladen und damit abrufbereit (deshalb stehen sie in aller Regel auch im Header-Teil, so dass sie als allererstes geladen werden.

  2. Zum Ablauf des Skriptprogramms und der damit verbundenen Veränderung des Seiteninhalts (oder anderer programmierbarer Aktionen) benötigen sie einen Auslöser, einen sog. Event.

    Dies kann das erfolgte Laden einer Seite sein (so war es bei den im letzten Modul behandelten Beispielen: nach dem Laden erfolgte die Scriptprogramm-Ausführung, die Floating-Boxes wurden bewegt, ein- und ausgeblendet sowie in ihren Ebenenhöhen verändert). Andere Auslöser können insbesondere Klick auf einen Link (Text oder Bild) sein, Berührung eines Links (Text oder Bild) mit der Maus, Verlassen eines derartigen Links mit der Maus, aber auch Veränderung der Fenstergröße des Browsers, Verlassen einer Seite, Schließen eines Fensters usw. Besonders interessant ist auch die Auslösemöglichkeit einer Skriptaktion durch Aufruf eines bestimmten Keyframes in einer dhtml-Animation.

  3. Die via Events durch Skripte auslösbaren Aktionen sind äußerst vielfältig. Eine kleine Auswahl typischer Skriptfälle wäre:

Die am häufigsten verwendete, da relativ einfach zu handhabende, auf allen Plattformen implementierte (siehe aber dazu Modul 7) ist JavaScript (vgl. Modul 7 und Anhang). Für dynamic html wird JavaScript verwendet. Hierzu werden Floating Frames via JavaScript animiert. Auch für Action Scripts verwendet GoLive JavaScript. Die von GoLive generierten JavaScripte sind sehr komplex, v.a. um Browserinkompatibilitäten aufzufangen. Insbesondere dhtml ist in jedem Browser anders implementiert und erfordert jeweils unterschiedlichen JavaScript-Code (vgl. Modul 7 und Anhang).

Wir werden uns im nächsten Kapitel mit JavaScript näher auseinandersetzen. In diesem Modul erlernen wir jedoch das Arbeiten mit einiger der in GoLive implementierten JavaScript-Aktionen und wollen daraus ein generelles Verständnis zu Aufbau, genereller Struktur und Möglichkeiten von Skripten in Webseiten ableiten.. Wichtig zur richtigen Umsetzung ist also auch für die GoLive-Skript-Aktionen, dass Sie obige kurze Einführung verstanden haben, und hierbei insbesondere die unabdingbare Dreierkombination verinnerlicht haben:

  1. Initialisieren (Vorabladen) eines Scripts, so dass es abrufbereit zur Ausführung ist;
  2. Auslösung eines Ereignises (Events);
  3. Ausführung des Skripts mit entsprechendem "Aktions"-Resultat.

Das gleiche Script kann also insbesondere auch von unterschiedlichen Events ausgelöst werden (Laden einer Seite oder Klick oder Mausover oder Ablauf einer Zeit etc.).

Wir beschränken uns im Nachfolgenden auf eher generelle Ausführungen, da bei Verständnis des oben gesagten Action Scripts weitgehend selbsterklärend sind. Hunderte von fertigen Action-Scripts für GoLive sind übrigens im Netz verfügbar, sie sind teils kostenlos, teils kommerziell zu erwerben. GoLive5 bringt jedoch viele wichtige Scripts gleich mit. Weiterhin können Sie selbstverständlich auch selbst sonstige JavaScripts implementieren (Modul 7).

Auslösung von Aktionen (Events) in GoLive:

Aktions-Skript-Ausführung beim/nach Laden der Seite:

Gehen Sie folgendermaßen vor:

  1. Öffnen Sie den Head-Abschnitt des Layoutfensters
  2. Wählen Sie die Smart-Objects in der Objektpalette
  3. Selektieren Sie den Platzhalter für Aktionsobjekte, die beim Laden einer Seite ausgeführt werden
  4. Ziehen Sie den Platzhalter in den Headabschnitt
  5. Lassen Sie den Platzalter aktiviert und öffnen den Inspektor
    (Hinweis: es gibt auch eine Palette Aktionen - die ist jedoch für Head-Events nicht maßgeblich, leider etwas verwirrend).
    Suchen Sie aus dem Action-Pulldown-Menu eine geeignete Aktion aus
  6. Wählen Sie aus dem Ausführen Menu, ob die Aktion beim Laden (onload) oder Verlassen (onunload) der Seite ausgeführt werden soll (Lassen Sie die anderen Optionen erst mal unberücksichtigt, mehr dazu in Modul 6.3 sowie im Anhang).
  7. Testen Sie die Ausführung Ihres Skripts in der Browservorschau (funktioniert in der Regel nicht in der GoLive-Vorschau).

In obiger Abbildung sind noch einige weitere Punkte markiert (7 fehlt, siehe oben)

  1. Browser-Weiche, ein besonders wichtiges, bereits fertiges Head-Script, welches Sie gleich von hier in die Head-Liste ziehen können (alternativ hätten Sie den Fragezeichen-Platzhalter (3) nehmen können und aus dem Action-Menu das entsprechende Skript auswählen können).
  2. Dies ist ein Platzhalter für eine sogenannte Inline-Aktion. Ist wohl sehr selten zu verwenden. Wir werden es nicht weiter berücksichtigen, verwechseln Sie es aber nicht mit dem Head-Actions-Platzhalter (3).

Hinweis: Es ist klar, dass nicht alle Aktionen, die sich für onload bzw. onunload-Auslöser eignen, auch anderswo geeignet sind. Eine Browserweiche etwa erst duch spätere Aktivierung (z.B. Klick auf Button) auslösen zu wollen, wäre sinnlos, da die Seite dann längst geladen ist. Sie können aber z.B. sinnvoll auch ein zusätzliches Fenster gleich beim Laden einer Seite öffnen lassen, wenn es Ihnen sinnvoll erscheint.

Action-Script-Ausführung durch Maus- oder Tastenbedienung

Dies ist wohl eine der häufigsten Anwendungen zur Auslösung von Aktionen. Gehen Sie folgendermaßen vor (Abbildung unten.

  1. Legen Sie einen Link an. Dies kann Text oder ein ein anklickbares Bild sein.
  2. Anstelle eines Pfades geben Sie nur # ein. Dies bedeutet, dass der Linkklick keine andere Seite aufrufen wird, dies wollen wir in diesem Fall auch nicht (beachten Sie aber unten stehendes Problem und den Workaround)
  3. Öffnen Sie das Fenster "Aktion"
  4. Wählen Sie einen Event-Auslöser (hier Ereignis genannt), z.B. Mausklick
  5. Klicken Sie auf das Eselsohr-Icon für Aktion
  6. Wählen Sie eine geeignete Aktion aus dem Aktionsmenu

Wenn Ihnen Ihre Aktion nicht gefällt, können Sie sie im Aktionsfenster duch Klick auf das Papierkorb-Icon wieder löschen.

Sie können an einen Link auch mehrere Aktionen anfügen und zwar einen pro Ereignis, also z.B. eine Aktion bei Mausklick, eine andere bei Mauseintritt, wieder eine andere bei Mausaustritt etc.

Statt des obigen Pseudolinks (#) können Sie natürlich auch einen tatsächlichen URL eingeben. Dann wird eben bei Auslösung des Linkes und Aufruf einer entsprechenden Seite gleichzeitig noch eine Aktion ausgelöst (z.B. ein Danke-Alert).

Problem und Workaround: Durch Klick auf den Pseudolink # (also im Code als <a href="#" ...> wird die gleiche Seite nochmals neu geladen (aus dem Internspeicher, d.h. dem Cache des Speichers, das geht also sehr schnell). Wenn Sie Aktionsauslösung mit Pseudolinks verbinden, gibt es solange kein Problem, wie sich Ihr Pseudolink im höheren Teil einer html-Seite befindet (also dem Teil, der ohne Scrollen in einem Browserfenster angezeigt wird). Ansonsten wird durch Aufruf des Pseudolinks und damit verbundenem neuen Laden wieder der Startteil der Seite angezeigt und der Leser verliert den Überblick. Ich schlage hierzu folgendes Workaround vor: Machen Sie aus dem Pseudolink einen Ankerlink (z.B. <a href="#back" ....>) und setzen den entsprechenden Anker knapp oberhalb Ihres aktionsauslösenden Links. Die Seite wird bei Linkauslösung dann zwar auch neu geladen, springt aber gleich wieder an die (annähernd) richtige Stelle.
Weitere Lösungsmöglichkeiten behandeln wir in späteren Modulen (z.B. Verwendung eines Formularknopfes zur Linkauslösung; Verknüpfung des Pseudolinks mit einer weiteren, sog. goback-Aktion).

Rollovers: Hieraus ergibt sich gleich eine der besonders häufigen Anwendungen für Script-Aktionen auf Webseiten, den sog. Rollovers. Das sind die Knöpfe, die ihr Erscheinungsbild ändern, wenn man mit der Maus drüberfährt und die bei Anklicken in der Regel einen Link auslösen, wobei sich der Button ggf. nochmals ändert.

Hier lädt also ein Skript bei Seitenstart 2 oder gar drei Bildchen, wobei aber nur eines direkt im Browser angezeigt wird. Bei Mausberührung wird ein weiterer Skriptteil ausgelöst, der nun das zweite Bildchen lädt, verschwindet die Maus wieder, erscheint das erste Bild. Wird auf den Link geklickt, kann ein drittes Bild angezeigt werden, gleichzeitig wird die verlinkte Seite aufgerufen (vom dritten Bildchen sehen Sie also nur etwas, wenn die aufzurufende Seite in einem anderen Fenster oder Frame geladen wird.

Sie müssten also relativ langwierig die einzelnen Aktionen an Mauseintritt, Mausaustritt und Mausklick bzw. Maustaste loslassen an den Link anbinden. Zur Erleicherung bietet Ihnen GoLive eine vorgefertigte Komplett-Komponente. Wählen Sie aus der Smart-Palette des Objektefensters das Objekt mit dem Fragezeichen ("aktives Bild") und ziehen es an die gewünschte Stelle in das Layoutfenster Ihres html-Dokumentes. Bei aktiviertem Platzhalter sagt Ihnen der entsprechende Inspektor alles weitere, es ist dennoch nachstehend kurz erklärt. Wichtig ist, dass die drei Bilder die gleiche Größe haben. Im Modul 7 (Animationen) führen wir vor, wie Sie auf einfache Weise geeignete Bildchen rasch erstellen können. Ansonsten finden Sie auch im Web speziell zur Rollover-Button-Generierung geignete Bildsets (vgl. Linkliste in Modul 2.4

Hier nun die kurze Vorgehenserklärung. Nachdem Sie den Platzhalter "Aktives Bild" auf Ihrer Seite eingefügt haben, gehen Sie im Rollover-Inspektor folgendermaßen vor:

  1. Benennen Sie Ihren Knopf (mehrere Knöpfe auf einer Seite sollten unterschiedliche Namen haben, sonst kann es sein, dass die Aktionen nicht funktionieren)
  2. Aktivieren Sie das Platzhalterbildchen "Normal"
  3. Aktivieren Sie das Kontrollkästchen Bild (bei Bild Normal bereits voreingestellt und nicht änderbar).
  4. Geben Sie den Pfad zum Bild ein, am besten mit Point and Shoot.
  5. Wenn mit dem Rolloverbild ein Link ausgelöst werden soll, aktivieren Sie URL und geben einen Pfad ein, (absolut oder mit Point and Shoot). Wenn es ein nicht aktiver "Pseudolink" sein soll (siehe oben), lassen Sie URL am besten auch aktiviert und geben # ein.
  6. Sollte die zu verlinkende Seite in einem anderen Fenster oder Frame zu öffnen sein, geben Sie hier den Target-Namen ein.
  7. Optional können Sie Status aktivieren und einen Kurztext eingeben, der in der Statusleiste (am unteren Ende des Browsers) angezeigt wird.
  8. Klicken Sie dann auf Bildplatzhalter Cursor (entspricht Mouseover) und wiederholen die Punkte 2-4, wobei Sie nun natürlich das für Mouseover vorgesehene Bild verknüpfen.
  9. Ggf. können Sie den letzten Vorgang für ein durch Klick angezeigtes Bild wiederholen.

Powertipp: Sie können damit übrigens nicht nur Rollover-Buttons generieren, sondern z.B. auch Frage-Antwort-Interaktion oder Beschriftung von Fotos bei Mausberührung bewerkstelligen. Lassen Sie Ihre Fantasie spielen. Einige Anwendungen zeigen wir im Kapitel Animationen.

Hinweis: Leider ist gerade für Aktive Bilder der von GoLive generierte Skriptcode extrem umfassend und verlängert die Ladezeiten der Seiten erheblich, wenn Sie viele Rollovers auf einer Seite eingebaut haben. Im Modul JavaScript by hand - level2 sowie Modul Animationen werden wir hierfür noch kompaktere Alternativen vorstellen.

Aktueller Hinweis zu GoLive 6 (Okt. 2002): In GoLive 6 können Sie jedes bereits eingebaute Bild nachträglich mit dem Inspektor in ein Rollover-Bild umwandeln. Einfach Bild aktivieren, Inspektor aufrufen und dort im Reiter Rollover zusätzliche Rollover-State-Bilder verlinken.
Tipp: auch mit GoLive 5 können bereits eingebaute statische Bilder in Rollovers umgebaut werden, ohne dass das Bild zuvor gelöscht werden müsste. Einfach aus der Smart-Objects-Palette das Rollover-Objekt auf das bereits eingebaute Bild ziehen. Bild aktivieren und mit dem Inspektor die Zusatzbilder für die Rolloverstates aussuchen. Das war's! Funktioniert zumindest in der Mac-Version (wie ist es unter Windows??)

Action-Script-Ausführung durch Erreichen einer bestimmten Position in der Zeitleiste

Dies ist ein besonders interessantes Feature von GoLive. Wenn Sie mit animierten Floating Boxes arbeiten, können Sie in der (gut versteckten) Aktionsspur der Zeitachse Aktionsauslöser eintragen.Einen Aktionsauslöser fügen Sie am besten direkt hinter einem Keyframe ein, indem Sie Befehl-Klicken (Abbildung unten). Lassen Sie ihn markiert und rufen den Inspektor (der sich dann Aktionsinspektor nennt) auf. Dort wählen Sie eine geignete Version aus (wie bei den Head-Aktionen ist es auch hier nicht das Aktionsfenster, mit welchem Sie Aktionen zuordnen. Das Aktionsfenster ist ausschließlich für durch Klick, Mausbewegung oder Tastatureingabe ausgelöste Aktionen vorgesehen).

Wenn Sie verschiedene Szenen mit Floating Boxes im Zeitachsen-Editor erstellt haben (vgl. Modul 6.2.2) können Sie diese durch eine spezielle Aktionmiteinander verbinden. Setzten Sie den Aktionsauslöser direkt hinter vor den letzten Keyframe der ersten Szene und ordnen die Aktion Multimedia/Szene abspielen zu (s.u.) .

Tipp: Sie können auch zeitabhängig Aktionen aufrufen, ohne mit Floating Boxes zu arbeiten. Hierzu gibt es zwei Möglichkeiten.

A: Erstellen Sie eine leere Floating Box (die ohne Inhalt auf der Seite ja nicht angezeigt wird) und duplizieren Sie den dadurch generierten Keyframe im Zeitachsen-Editor. Verschieben Sie das Duplikat auf die gewünsche Zeit, ordnen Sie dort einen Aktionsauslöser zu und verbinden Sie Ihre Aktion mit diesem Auslöser (Sie haben also doch mit einer Floating Box gearbeitet, aber keiner merkt es).

B: Offiziellere Möglichkeit: Fügen Sie einen Head-Aktionsplatzhalter in den Head-Bereich Ihrer Seite ein (siehe oben). Ordnen Sie diesem mit dem Ereignis onload die Aktion Spezial/Warten zu. Daraufhin erscheinen im Aktionsinspektor verschiedene Reiter. Wählen Sie Bedingung, geben dort eine Zeit und ordnen im Reiter Wahr die gewünschte Aktion zu (ggf. im Ordner Falsch eine weitere).

In GoLive-implementierte Aktionen

Probieren Sie die verfügbaren Aktionen einfach aus. Ob Sie besser als Head-Aktion beim Laden der Seite, als Maus- bzw. tasteninduzierte Aktion oder als zeitleistenabhängige Aktion sinnvoll ist, ergibt sich aus dem Aktionskontext. Viele Aktionen können aber von all diesen Ereignissen aufgerufen werden.

Von einigen Aktionen will ich kurz die Wirkung erklären
(Hinweis: es kann sein, dass das eine oder andere der beschriebenen Skripte nicht in Ihrer GoLive-Version vorhanden ist; ich verweise aber nochmals auf entsprechende Seiten im Netz; z.B. via http://www.adobe.com/products/tips/golive.html

Weitere Actions probieren Sie einfach aus.

Damit ist unser GoLive-Tutorial zur fortgeschrittenen Webseitenerstellung beendet. Wir benutzten dabei GoLive-Funktionen zum Einen, um die Möglichkeiten hochqualitativer Webseiten und Website-Editoren exemplarisch vorzustellen, zum anderen, um html-Erweiterungen, wie CSS, dhtml und Script-Aktionen zu erklären. Wir werden in den nachfolgenden Kapiteln etliches davon vertiefen (insb. JavaScript) bzw. im Anhang auf weiterere Tag- und CSS-Attribute, sowie dhtml eingehen, sowie die Weiterentwicklung von html (xhtml, xml) zu erläutern.

Hinweis: Ein wesentliches Element vieler Webseiten, nämlich Formulare, haben wir noch überhaupt nicht behandelt. Wir werden im Modul 9 (interaktive Webseiten und datenbankgenerierte Webseiten) darauf eingehen und hierbei auch die Erstellung von Formularen in GoLive nachreichen.

Weiterhin verfügt GoLive über einen anspruchsvollen Quicktime-Editor. Diesen stelle ich Ihnen in Modul 8.8 (Animationen: interactive Quicktime) vor.

Weitere Funktionen von GoLive finden Sie auch im zugehörigen Programm-Handbuch oder in weiteren Büchern zu GoLive. Insbesondere bei Tabellen, aber auch bei der Einfügung von "handgeschriebenem" JavaScript sowie bei der Site-Verwaltung haben sie noch wesentlich weitere, in unserem Tutorial nicht beschriebene Möglichkeiten.

Zur Vertiefung bzw. weiteren Veranschaulichung unseres GoLive-Tutorials darf ich Sie auf die umfassende Sammlung von Video-Tutorials bei www.adobe.com verweisen. Alle wesentlichen Funktionen finden Sie übrigens unter der Überschrift GoLive4. Unter GoLive5 finden Sie nur einige Neuerungen dieser Version. Das Video-Tutorial-Verzeichnis gibt es unter http://www.adobe.com/web/tips/glvvtco/main.html

Sie sollten inzwischen aber bereits selbst über weitreichende Fähigkeiten verfügen, sehr anspruchsvolle Webseiten zu gestalten. Viel Spaß dabei. Vergessen Sie aber bitte nie, dass viele Skript-Aktionen, sowie dhtml und CSS überwiegend erst ab Browserversionen der vierten Generation verstanden werden. Machen Sie deshalb entweder regen Gebrauch von der Head-Aktion "Browserweiche", wobei Sie eine zusätzliche Version Ihrer Seiten für andere Browser zur Verfügung stellen oder gestalten Sie Ihre Seiten so, dass auch ohne Umsetzung von StyleSheets und dhtml Ihre Seiten noch akzeptabel aussehen. Bei den Actions gibt GoLive in der Regel im jeweiligen Auswahlfenster an, ab welcher Browserversion diese Skripte funktionieren.

 dhtml-Animation