Seminar DWMX DW Session 013

Transkript

1 Seminar DWMX 2004 DW Session 013

2 Document Object Model die DOM Jegliche Funktionalität von dynamischen Seiten basiert auf dem Zusammenspiel von HTML, JavaScript und CSS. Damit diese sich untereinander verstehen wurde vom W3C das Document Object Model (DOM) entwickelt. Sie ermöglicht es, durch die Scriptsprache JavaScript die Wertzuweisung jedes Elementes einer HTML Seite zu ändern, ohne eine erneute Serveranfrage durchzuführen. Die Elemente müssen hierzu einen eindeutigen Bezeichner erhalten, damit sie unterschieden werden können (-> id). Dieser wird von Dreamweaver automatisch angelegt, wenn ein Name für das Element vergeben wird. <div id="move" style="position:absolute; left:949px; top:-224px; width:239px; height:240px; z- index:33"> Nachdem nun mit Hilfe des Namen über die DOM das Element ausfindig gemacht wurde, kann auf Eigenschaften und Attribute zugegriffen werden.

3 Cursor Problem bei transparenten PNGs Bei der Verwendung von transparenten PNGs ergibt sich das Problem, dass ein Hyperlink nicht mehr durch ein Hand-Symbol, wie es bei normalen Hyperlinks der Fall ist, sichtbar gemacht wird. Hierdurch hat der User keine Möglichkeit, ein nicht verlinktes von einem verlinkten Bild zu unterscheiden. Die Lösung dieses Problems liegt in der Verwendung von CSS. Die benötigte Pseudoklasse besteht im aktuellen Stylesheet schon. a:hover { color: } #6970BE; In der aktuellen Version regelt diese Klasse nur die Farbe. Durch eine weitere Eigenschaft erweitert Sie den Hyperlink mit der gewünschten Funktionalität. a:hover { color: cursor: } #6970BE; hand; Diese Eigenschaft kann auch über die CSS-Stile Definition in der Kategorie Erweiterungen unter Visueller Effekt mit der Eigenschaft Cursor eingestellt werden.

4 Ebenen bewegen/interaktion mit dem User Ebenen können aber nicht nur Ihre Sichtbarkeit, sondern auch ihre Position zur Laufzeit ändern. Dies ist z.b. mit dem Verhalten Ebene ziehen möglich. Anlegen einer Ebene LetterClose (unsichtbar) die das Bild letterclose.png und einer Ebene LetterOpen (sichtbar) die das Bild letteropen.png enthält (beide Unterebenen von MainLayer!). Wenn auf das Bild letteropen.png geklickt wird, soll die Ebene LetterOpen ausgeblendet und die Ebene LetterClose eingeblendet werden. Die Ebene LetterClose muss kurzzeitig über dem Briefkasten platziert werden (!). Bei einem Klick auf das Bild letterclose.png wird das Verhalten Ebene ziehen für die Ebene LetterClose aktiv. Das Ablageziel wird mit der aktuellen Position abgerufen und der Einrastradius soll 100 Pixel betragen. Unter dem Reiter Erweitert wird in dem Feld Wenn abgelegt: JavaScript aufrufen: der Code MM_showHideLayers('LetterClose','','hide'); MM_popupMsg('Thank you for sending ts letter!') eingetragen. Das Optionsfeld Nur wenn eingerastet wird aktiviert. Die Ebene LetterClose erhält wieder die gleichen Koordinaten für left und top wie die Ebene LetterOpen.

5 Die Zeitleiste Dreamweaver bietet eine ähnliche Funktionalität wie Flash wenn es um die Zeitleiste geht. Mit Ihr können Abläufe von Verhalten zeitlich geregelt werden. Anlegen einer Ebene Move, Unterebene von MainLayer (!), die das Bild move.png enthält. Die Ebene Move rechtsseitig der Ebene MainLayer in den negativen Seitenbereich schieben, so dass die Möve nicht mehr sichtbar ist (hierzu an der unteren Kante der Ebene anfassen). Die Zeitleiste über Fenster/Zeitleiste öffnen. Die Ebene Move markieren und Modifizieren/Zeitleiste/Pfad der Ebene aufzeichnen auswählen. Die Ebene an der Unterkante anfassen und nach Belieben bewegen. Im Bedienfeld Zeitleiste über das Kontextmenü die Zeitleiste in Move umbenennen. Oberhalb der Zahlenreihe in der Zeitleiste in das weiße Feld über dem zweiten Bild klicken. Diesem Bild das Verhalten Zeitleiste/Zeitleiste abspielen zuweisen. Der Fahne beim Klicken das Verhalten Zeitleiste/Gehe zu Zeitleistenbild zuweisen, die Zeitleiste Move anwählen und Gehe zu Bild auf 2 setzen.