Seminar DWMX DW Session 012

Größe: px

Ab Seite anzeigen:

Download "Seminar DWMX DW Session 012"

Sophie Hochberg
vor 6 Jahren
Abrufe

1 Seminar DWMX 2004 DW Session 012

2 Verhalten Scripting per Klick unter DW Verhalten ermöglichen unter Dreamweaver das Verwenden von kleinen JavaScript Codesegmenten um gewisse Funktionalitäten, die mit reinem HTML nicht möglich sind, zu realisieren. Eine Scriptsprache ist keine Programmiersprache (wie z.b. Java), sondern ein Satz von Anweisungen, die von einem anderen Programm (in diesem Fall dem Browser) interpretiert werden. Die Anwahl von Verhalten ist über das Bedienfeld Verhalten möglich, welches über Fenster/Verhalten eingeblendet werden kann. Dreamweaver fügt bei einem Verhalten einen bestimmten Bereich ein, der jegliche Codesegmente aller verwendeten Verhalten enthält. <script language="javascript" type="text/javascript"> [Verhaltenscode] </script> Einige schon verwendete Verhalten sind bei einem eingefügten Wechselbutton zu finden. Dreamweaver fügt hier bei folgenden Aktionen entsprechende Verhalten ein: onmouseover -> Verhalten, wenn die Maus über das entsprechende Bild fährt onmouseout -> Verhalten, wenn die Maus das Bild verlässt Diese Verhalten erzeugen im <script>-bereich die entsprechenden Funktionen (Anweisungssätze).

3 Verhalten und HTML Verhalten sind Aktionen, die nach dem wenn DAS passiert dann reagiere SO darauf -Prinzip funktionieren. Normalerweise können Elemente unter HTML keine Aktion auslösen, da sie nicht auf Reaktionen des Users reagieren. Eine Ausnahme ist das Anker-Tag (<a>), welches seinen Inhalt sensibel für Klickaktionen macht. Bedingt durch diese Eigenschaft muss z.b. ein <a>-tag vorhanden sein, damit ein Verhalten angewendet werden kann. Ist kein <a>-tag vorhanden, sind die meisten Verhalten inaktiv. Anker Um ein Verhalten an Stellen anfügen zu können, die nicht auf andere Seiten verweisen sollen, kann ein Nulllink verwendet werden. Dieser wird als href durch eine Raute oder ein javascript:; dargestellt. <a href= # target= _self >Tu einfach nichts bei einem Klick</a> <a href= javascript:; target= _self >Tu einfach nichts bei einem Klick</a> Dieser Nullink verweist nur auf die aktuelle Seite selbst (vgl. lokale Anker und lokale Verweise)!

4 Verhalten und HTML Ladezustand Eine weitere Möglichkeit ist die Abfrage, wann ein Element geladen ist. So kann z.b. dem Seiteninhalt (<body>), wenn er geladen wird, ein Verhalten zugewiesen werden. <body onload="[aufruf Verhaltenscode]"> Es ist somit sogar möglich abzufragen, wann einzelne Elemente (z.b. Bilder geladen sind)! Formularelemente Eine letzte Möglichkeit ist die Verwendung von Formularelementen. So kann z.b. dem Button ein Verhalten bei einem Klick hinzugefügt werden. Hierzu muss kein Formular-Tag (<form>) vorhanden sein. <input type= button onclick="[aufruf Verhaltenscode]" value="senden">

5 Verschiedene Ereignisse Die Ereignisse, die eine Aktion auslösen, sind vielfältig, jedoch werden nicht alle Ereignisse von allen Browsern unterstützt. Um hier optimiert für eine bestimmte Zielgruppe arbeiten zu können, bietet Dreamweaver die Einstellung für verschiedene Browserversionen. Im Bedienfeld Verhalten das Plus- Zeichen wählen, danach aus dem Erweiterungsmenü Ereignisse zeigen für die gewünschte Einstellung auswählen. Achtung: Die Standardeinstellung Browser ab 4.0 ermöglicht aus heutiger Sicht die beste Kompatibilität. Eine andere Einstellung wird nur nötig, wenn die Zielgruppe wissentlich mit älteren Browsern arbeitet. onclick beim Anklicken onabort bei Abbruch ondblclick beim Doppelklicken onblur beim Verlassen onkeydown bei gedrückter Taste onchange bei erfolgter Änderung onkeypress bei gedrückter gehaltener Taste onerror bei einem Fehler onkeyup bei losgelassener Taste onfocus bei Aktivierung onmousedown bei gedrückter Maustaste onload beim Laden onmouseout beim Verlassen des Elementes mit dem Cursor onmousemove bei Mausbewegung onmouseover beim Überfahren des Elementes mit dem Cursor onreset beim Zurücksetzen (Formular) onmouseup bei losgelassener Maustaste onselect bei Auswahl von Text onsubmit beim Absenden (Fomular) onunload bei Verlassen

6 Browserunterstützung Für besondere Fälle bietet Dreamweaver eine so genannte Browserweiche an. Da sie selbst aber ein Verhalten ist, muss sie sorgfältig eingesetzt werden, damit der gewünschte Effekt eintritt. Hierbei gilt das Prinzip des Bottom-Up-Verfahrens. Zuerst wird die einfachste Seite angezeigt und, wenn der Browser mehr kann, eine aufwändigere Version geladen. Erstellen einer einfachen Seite mit der geringsten(!) Funktionalität (einfach.htm). Erstellen von einer/zwei erweiterten Version(en) für höhere Versionen (entweder erweitert.htm oder erweitertie.htm und erweitertnn.htm) Hinzufügen des Verhaltens Browser überprüfen mit dem Plus-Zeichen im Bedienfeld Verhalten auf der Seite einfach.htm (hierbei muss eine freie Stelle im Dokument ausgewählt sein, damit das Verhalten dem <body>-tag zugeordnet wird oder über den Tag-Selector anwählen) Für die Felder NN 4.0 oder höher und IE 4.0 oder höher wird entweder die jeweils spezifisch erstellte Version (erweitertnn.htm und erweitertie.htm) oder für beide die erweiterte Version (erweitert.htm) angegeben. Für die jeweiligen andernfalls-fälle wird der Eintrag auf dieser Seite bleiben gewählt. Nun könnte noch eine Alternativ-URL für alle anderen Browser angegeben werden, ansonsten verbleiben auch diese auf dieser Seite.

7 Ein wenig Werbung gefällig? Eine einst viel verwendete Funktionalität ist durch einige freundlichen Menschen heute fast nicht mehr anwendbar Popup Fenster. Diese im eigentlichen Sinne sehr vorteilhafte Funktion wurde für Werbung und das Ausführen von ungewolltem Code benutzt und wird heute durch etliche Virenscanner, Zusatzprogramme und die Browser selbst unterbunden. Aus diesem Grund sollte bei Verwendung kein navigationsrelevanter oder elementar wichtiger Inhalt eingebettet werden. Erstellen einer Seite die als Popup aufgerufen werden soll (accomodation.htm). Erstellen einer Seite, die das Popup-Fenster aufrufen soll (maintemplate.htm) und einbinden eines aufrufenden Elementes (Bed and Breakfast Grafik). Hinzufügen des Verhaltens Browserfenster öffnen zu dem entsprechenden Element. Im folgenden Dialogfeld die aufzurufende Seite (accomodation.htm) unter URL anzeigen auswählen. Festlegen der gewünschten Breite (669) und Höhe (384) des neuen Fensters. Optional: Auswahl der gewünschten Attribute (hier: keine!). Vergeben eines Fensternamens (FindYourAccomodation). Das Dialogfeld mit ok bestätigen. Das Ereignis für dieses Verhalten auf onclick einstellen.

8 Nützliches Scripting Im Folgenden werden einige nützliche Verhalten beschrieben, die in der aktuellen Version der Site Discover Scotland eingesetzt werden können. Optimieren der Statusanzeige Einsatzgebiet: Navigationsleiste, Imagemaps oder Bilder benötigtes Verhalten: Text definieren/statusleistentext festlegen Ereignis: onmouseover -> der gewünschte Text, onmouseout -> ein Leerzeichen Popup-Meldung anzeigen Einsatzgebiet: Kurze Information für den User z.b. bei der Biene, die auf einen Klick mit der Aussage Ey you, be carefull! antwortet. benötigtes Verhalten: Popup-Meldung Ereignis: onclick -> der entsprechende Text Flash Plugin überprüfen Einsatzgebiet: Überprüfung des Zielbrowsers auf einen vorhandenen Flash Player. Möglichkeit zur Fallunterscheidung. benötigtes Verhalten: Plug-In überprüfen Ereignis: onclick -> bei dem Text flying over the scotish Canyons auf der Seite map.htm. Falls das Plugin vorhanden ist, soll zur Seite flight.htm, ansonsten zur Seite noflash.htm gewechselt werden. (Achtung: Keine Versionsunterscheidung!)

Ähnliche Dokumente

PDF created with FinePrint pdffactory trial version http://www.fineprint.com. Dreamweaver - Schulung, Cosima Joergens, S. 1

PDF created with FinePrint pdffactory trial version http://www.fineprint.com. Dreamweaver - Schulung, Cosima Joergens, S. 1 Dreamweaver - Schulung, Cosima Joergens, S. 1 Verhalten JavaScript wird in Dreamweaver mit Verhalten bezeichnet. JavaScripts kö nnen nur in Browsern ausgeführt werden, die JavaScript unterstützen und bei