Leseprobe - Andrea Kuhne

andrea.kuhne.de

Leseprobe - Andrea Kuhne

10

Mehr Pep auf der Seite: Interaktivität mit Verhalten

10.1 Technisch beleuchtet: Ereignisse und Aktionen

10.2 Ziehbare Elemente erstellen

10.3 Bild austauschen

10.4 Fenster nach Maß: Browserfenster öffnen

10.5 Attraktive Spry-Effekte für den sofortigen Einsatz

10.6 Gezielt modifi zieren: CSS-Eigenschaften ändern

10.7 Viele auf einen Streich: Einblenden/Ausblenden

10.8 Mehr Möglichkeiten: JavaScript aufrufen

10.9 Wortwechsel: Text einstellen


464 10. Mehr Pep auf der Seite: Interaktivität mit Verhalten

Im Bedienfeld Verhalten stellt Dreamweaver eine umfangreiche Auswahl an Aktionen zur

Verfügung, die über JavaScript realisiert werden. Sie können die Skripte nutzen und über

Dialogfelder modifi zieren, ohne JavaScript-Kenntnisse zu besitzen. In diesem Kapitel möchte

ich Ihnen die Möglichkeiten und Einsatzgebiete vorstellen, die sich hinter den Verhalten

verbergen.

10.1 Technisch beleuchtet: Ereignisse und Aktionen

Ein Verhalten stellt eine Kombination aus einem Ereignis und einer darauffolgenden Aktion

dar. Das Ereignis wird in den meisten Fällen vom Benutzer ausgelöst. Es gibt darüber hinaus

auch Ereignisse, die zu bestimmten Zeiten zwangsläufi g stattfi nden. In dem Moment, in dem

ein Dokument geladen wird, ist das Ereignis onload für den body per se eingetreten. Beispielsweise

wird dieses Ereignis genutzt, um Bilder vorauszuladen, damit sie zu einem anderen

Zeitpunkt zur Verfügung stehen und nach einer Interaktion des Benutzers ohne Verzögerung

dargestellt werden können.

JavaScript im head: typische Ansicht im Quelltext nach dem Anwenden eines Verhaltens.

Dreamweaver setzt die Funktionen, die zum jeweiligen Verhalten zählen, in den head-Bereich

des Dokuments. Ein einleitendes und ein abschließendes Element kennzeichnen den

JavaScript-Block:

...

Das auslösende Ereignis onload fi ndet beim Laden des Dokuments statt, dass die Funktion

MM_preloadImages() aufruft:


10.1 Technisch beleuchtet: Ereignisse und Aktionen

465

Um eine browserübergreifende Darstellung zu gewährleisten, ist der von Dreamweaver

generierte Code nicht unbedingt durchschaubar. Vermeiden Sie manuelle Änderungen, um

die Funktionalität der Verhalten zu gewährleisten.

JavaScript externalisieren

Unter Umständen ist Ihnen der JavaScript-Quelltext (der mitunter sehr umfangreich sein

kann) zu unübersichtlich und Sie möchten ihn nicht mehr im Dokument haben. Nun lässt er

sich nicht löschen, ohne dass das Verhalten damit zerstört wird. Mit dem Befehl JavaScript

externalisieren lassen sich die Funktionen aus dem head-Bereich in eine externe Datei

auslagern.

Wählen Sie Befehle/JavaScript externalisieren.

JavaScript-Block aus dem Kopfbereich auslagern.

Die Datei wurde als laden.js im gleichen Ordner gesichert ...

... und mit dem Dokument wieder verknüpft.


466 10. Mehr Pep auf der Seite: Interaktivität mit Verhalten

Bedienfeld Verhalten

Wählen Sie das Bedienfeld unter Fenster/Verhalten oder mit [Umschalt]+[F4].

3 2 4

1

Bedienfeld Verhalten, für das aktuelle Element verwendbare Verhalten.

1

2

3

Wählen Sie das HTML-Tag, das mit einem Verhalten ausgestattet werden soll.

Hinter dem + stehen die Verhalten, die auf das aktuell gewählte Element (hier body)

angewendet werden können.

Festgelegte oder alle Ereignisse werden angezeigt.

Ansichtssache: festgelegte oder alle Ereignisse.

4 Wenn mehr als ein Verhalten defi niert wurde, lässt sich mit – ein Ereignis entfernen.

Die Pfeiltasten verschieben Ereigniswerte nach oben oder unten.


Werden Befehle ausgegraut dargestellt, hat das

zwei mögliche Ursachen. Entweder ist nicht das

richtige Element markiert bzw. in die Seite integriert

(ein Formular lässt sich nur überprüfen,

wenn eines eingefügt wurde) oder es werden nur

Ereignisse angezeigt, die für ältere Browserversionen

gelten sollen.

Nicht alle Verhalten sind jederzeit anwählbar.

Veraltete Verhalten

Einige Verhalten sind in die Rubrik Veraltet

abgerutscht. Sie entsprechen nicht mehr dem

aktuellen Standard, dem Dreamweaver sich verschrieben

hat, werden aber noch jenen Nutzern

zur Verfügung gestellt, die in älteren Versionen

etwa mit Zeitleisten oder Pop-up-Menüs gearbeitet

haben und die Seiten in der CS4-Version

trotzdem editieren möchten.

Nicht mehr en vogue, aber noch im Spiel: Browser überprüfen.

10.1 Technisch beleuchtet: Ereignisse und Aktionen

467


468 10. Mehr Pep auf der Seite: Interaktivität mit Verhalten

10.2 Ziehbare Elemente erstellen

Für das Verhalten AP-Elemente ziehen werden absolut positionierte div-Container auf ziehbar

gesetzt. Der Benutzer kann Seitenelemente über die Seite schieben und neu anordnen.

Mit dieser Technik lassen sich bspw. kleinere Puzzles realisieren. Dieses Verhalten ersetzt

keineswegs die Möglichkeiten, die Ihnen Flash bietet, und generiert außerdem einen beträchtlichen

Quellcode, sodass dieses Feature dosiert eingesetzt werden sollte. Für kleinere

Spielereien ist es jedoch geeignet.

Seitenelemente vorbereiten

Wenn Sie mit diesem Verhalten arbeiten möchten, bedenken Sie, dass Sie es mit absolut

positionierten Containern zu tun haben. Diese verhalten sich im Dokument unabhängig

von anderen Elementen, sodass Sie das Layout, in das Sie AP-Elemente ziehen einbinden

möchten, ggf. darauf abstimmen müssen. Die Arbeit mit AP-Elementen wird ab Seite 206

ausführlich beschrieben. Das Ziel dieses Beispiels wird sein, dass ich vier vorbereitete

Bilder in ziehbare Container einfüge. Der Benutzer kann die Bilder (genau genommen die

Container) über die Seite bewegen und an einem bestimmten – von mir defi nierten Bereich

– ablegen bzw. einrasten lassen. Über das entsprechende Werkzeug AP Div zeichnen erstelle

ich den ersten Container und füge das erste Bild direkt ein. Die Position des div spielt zu

diesem Zeitpunkt keine Rolle. Vielmehr ist es wichtig, dass Höhe und Weite an die des Bildes

angepasst werden und der Container eine ID zugewiesen bekommt.

Eigenschaften des Containers #lio.

AP-Element mit Bild.

Um die anderen drei Container zu erstellen, halte ich die Taste [Strg]/[cmd] gedrückt, was

bewirkt, dass ich nicht jedes Mal das Werkzeug AP Div zeichnen neu anwählen muss. Ich markiere

die Container mit gedrückter [Umschalt]-Taste und vergebe im Bedienfeld Eigenschaften


10.2 Ziehbare Elemente erstellen

469

die Werte für Höhe und Breite. Hier ist es wichtig, dass px hinter dem Wert steht, andernfalls

können die AP-Elemente nicht korrekt dargestellt werden. Für die neu angelegten Container

muss ich IDs vergeben, damit sie sich später über das Verhalten ansprechen lassen.

Mit [Umschalt] markierte Container.

Um die Kontrolle zu behalten, sollten die Bedienfelder CSS-Stile sowie AP-Elemente beide

geöffnet sein. Hier kann ich die angelegten Container überblicken und editieren. Die Stapelreihenfolge

verändere ich im Bedienfeld AP-Elemente. Alle zum Einsatz kommenden

Container sollten benannt sein, überfl üssige Elemente werden entfernt.

Alles im Blick: CSS-Stile und AP-Elemente.

Gestapelt und verteilt: Die Elemente sind vorbereitet.


470 10. Mehr Pep auf der Seite: Interaktivität mit Verhalten

Das Anlegen absolut positionierter Elemente erzeugt die CSS-Angaben intern im head-

Bereich. Da ich davon ausgehen kann, dass diese Container einmalig und nur in diesem

Dokument vorkommen, muss ich die Stile nicht unbedingt auslagern.

So weit, so gut. Das Dokument ist bereit für ein Verhalten.

Verhalten zuweisen

Beim Anlegen eines Verhaltens sollte man sich immer fragen: „Wann soll was ausgelöst

werden?“ Die Antwort darauf lässt sich direkt in eine Aktion umwandeln. Ich möchte, dass

die Puzzleteile sofort (also wenn das Dokument aufgerufen wurde) ziehbar sind. Daraus

resultiert, dass das Verhalten auf body mit dem verknüpften Ereignis onload angewendet

werden muss und im Bedienfeld Verhalten Tag im rechten oberen Bereich stehen

sollte. Wird dort Tag angezeigt, ist noch ein Container markiert. Dann ist im Übrigen

auch das Verhalten AP-Elemente ziehen nicht anwählbar.

Einstellungen zu den ziehbaren Elementen.

Wahl des Verhaltens.


10.2 Ziehbare Elemente erstellen

471

In den Grundeinstellungen gebe ich die ID des ersten Containers an. Ich beginne links

oben. Die Bewegung soll uneingeschränkt auf der ganzen Seite möglich sein. Das Ablageziel

muss ich errechnen und in Pixelwerten eintragen. Das AP-Element rastet automatisch an

der gewünschten Position ein, wenn es 50 Pixel vom Ablageziel entfernt ist. Wenn Sie die

Ziehbewegung einschränken möchten, können Sie über die Angabe Beschränkt Werte für

oben, unten, rechts und links angeben. Die Werte beziehen sich allerdings nicht auf das

Dokumentfenster, sondern werden relativ zu dem ziehbaren Container defi niert.

Ist die Bewegung beschränkt, kommen weitere Eingabefelder hinzu.

Unter dem Register Erweitert bestimme ich, ob das ganze Element oder nur ein Teilbereich

ziehbar ist. Da die Bilder übereinanderliegen und der Benutzer irgendein Teil des Puzzles

ziehen wird, lege ich noch fest, dass das jeweils markierte Element nach vorn gebracht

werden soll.

Erweiterte Möglichkeiten.

Das Ergebnis lässt sich nicht in der Live-Ansicht überprüfen. Wechseln Sie in die Browservorschau,

um die Funktionalität zu testen.

Per Klick wird das Element in den Vordergrund geholt; rechts: eingerastetes Element nach der Ziehaktion.


472 10. Mehr Pep auf der Seite: Interaktivität mit Verhalten

Im Bedienfeld Verhalten kann ich mit einem Doppelklick auf den Ereigniswert das Dialogfeld

aufrufen und – wenn nötig – die bereits vergebenen Werte modifi zieren. Um weitere

Verhalten für die anderen Container hinzuzufügen, klicke ich wieder auf + und füge AP-

Elemente ziehen noch mal hinzu.

Ein AP-Element ist ziehbar, alle AP-Elemente sind ziehbar.

Alle AP-Elemente sind an ihrem Platz.

Fortgeschritten: JavaScript aufrufen

Im Dialogfeld AP-Element ziehen steht unter Erweitert die Option JavaScript aufrufen zur

Verfügung. Damit lässt sich nach einer vollzogenen Ziehaktion ein weiteres Skript ausführen.

Beispielsweise können Sie ein nächstes HTML-Dokument aufrufen oder eine Pop-up-Meldung

mit einer Zusatzinformation für den Benutzer bereitstellen. Als Beispiel kombiniere ich das

Verhalten AP-Elemente ziehen mit dem Verhalten Popup-Meldung.

Wird das Bild dem richtigen Text zugeordnet, soll eine Erfolgsmeldung angezeigt werden.


10.2 Ziehbare Elemente erstellen

473

Um einen JavaScript-Aufruf vornehmen zu können, muss das Verhalten erst mal angewendet

werden. Danach ist ein wenig Arbeit im Quelltext nötig.

Popup-Meldung anlegen.

In diesem Fall wird die Pop-up-Meldung angezeigt, wenn das Dokument geladen wird, weil

es auf den body angewendet wurde. Es soll aber erst zu sehen sein, wenn das Bild an der

richtigen Stelle einrastet. Nun muss ich den Funktionsaufruf im Quelltext orten, ausschneiden

und dem bestehenden Ereignis hinzufügen.

1

Im Quelltext suche ich den Funktionsaufruf. Da er für den body defi niert wurde, ist es

nicht so schwierig, ihn zu fi nden. Die Funktion steht im head-Bereich und bleibt dort

erhalten.

Quelltext nach dem Anwenden eines weiteren Verhaltens.

2 Ich markiere den Bereich ...

Funktionsaufruf für die Pop-up-Meldung.


474 10. Mehr Pep auf der Seite: Interaktivität mit Verhalten

3 ... und schneide ihn mit [Strg]/[cmd]+[X] aus.

4 Mit einem Doppelklick auf die Aktion im Bedienfeld Verhalten rufe ich das Dialogfeld

zu der bereits bestehenden Aktion auf und kopiere den Text aus der Zwischenablage

in das Eingabefeld JavaScript aufrufen.

Der Aufruf muss einfach eingefügt werden.

5 In der Browservorschau überzeuge ich mich von der Funktionalität.

6 Da sich der Text noch in der Zwischenablage befi ndet, kann ich ihn zum Einfügen in

den JavaScript-Aufruf des zweiten Containers direkt ein weiteres Mal einsetzen. Der

Text wird entsprechend abgeändert.

Für den zweiten Container ...

... wird in der erweiterten Ansicht der Text eingefügt und entsprechend modifi ziert.

In der Vorschau wird die Pop-up-Meldung angezeigt, wenn das zweite Bild an seinem Platz ist.

Ähnliche Magazine