Galileo Design < openbook > Galileo Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
1 Einleitung
2 Projektablauf für die Buchwebsite
3 Programmgrundlagen
4 Dreamweaver erweitern
5 Eine Site erstellen
6 Grundlegende Dokumenteinstellungen
7 Tabellen in Dreamweaver
8 Bilder im Web
9 Framesets
10 Aktionen
11 Die Zeitleiste
12 CSS in Dreamweaver
13 Ebenen
14 Hyperlinks
15 Vorlagen und Bibliotheken
16 Formulare
17 Quelltext de Luxe
18 Dreamweaver und Flash
19 Office-Daten einfügen
20 Dynamische Websites – eine Einführung
21 Einführung in PHP
22 Lokalen Webserver installieren
23 Dynamische Sites in Dreamweaver einrichten
24 MySQL-Grundlagen
25 Datenbanken mit Dreamweaver anbinden
26 PHP und Dreamweaver
27 Datenbanken abfragen
28 Daten einfügen und dynamische Formulare
29 Datensätze bearbeiten
30 Benutzer authentifizieren und Zugriffsrechte festlegen
31 Fortgeschrittene Techniken
32 Dreamweaver 8 und XML
33 Menüs für dynamische Verhalten
Stichwort

Download:
- ZIP, ca. 33 MB
Neuauflage bestellen
Ihre Meinung?

Spacer
 <<   zurück
Dreamweaver 8 von Richard Beer, Susann Gailus
Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
Buch: Dreamweaver 8

Dreamweaver 8
mit CD
639 S., 39,90 Euro
Galileo Design
ISBN 978-3-89842-739-5
gp 10 Aktionen
  gp 10.1 JavaScript in Dreamweaver
  gp 10.2 Aktionen
    gp 10.2.1 Rollover erstellen
    gp 10.2.2 Browserweichen
    gp 10.2.3 Plugins überprüfen
    gp 10.2.4 Ein Popup-Menü
    gp 10.2.5 Mehrere Frames gleichzeitig austauschen


Galileo Computing

10.2 Aktionen  downtop

Dreamweaver bietet eine ganze Menge Aktionen an, die in den meisten Fällen völlig ausreichend sind. Zudem können Sie sich natürlich Aktionen bzw. Verhalten auch als Erweiterung installieren.

Bedienfeld Verhalten | Um mit Verhalten zu arbeiten, öffnen Sie das Bedienfeld Verhalten über das Menü Fenster • Verhalten oder mit der Tastenkombination + . Zunächst müssen erst einmal einige Kleinigkeiten richtig eingestellt sein, damit später alles fehlerfrei funktioniert.

Klicken Sie im Fenster auf das kleine Pluszeichen, und Sie sehen die Palette mit den möglichen Verhaltensaktionen.

Abbildung 10.2 Das Bedienfeld Verhalten

Fast ganz unten im Bedienfeld Verhalten sehen Sie den Auswahlpunkt Ereignisse zeigen für . Stellen Sie hier Browser ab 4.0 ein. Mit dieser Einstellung legen Sie fest, für welche JavaScript-Version der Code erstellt werden soll. Mit der Einstellung Browser ab 4.0 können Sie fast alle aktuellen Browser abdecken.

Bei der Einstellung für bestimmte Browser werden Ihnen wesentlich mehr auslösende Ereignisse angezeigt, so zum Beispiel für IE ab 5.5. Da diese JavaScript-Versionen jedoch nicht standardkonform sind und immer nur von einem spezifischen Browser unterstützt werden, sind sie in der Praxis eher wertlos.


Galileo Computing

10.2.1 Rollover erstellen  downtop

Um ein Verhalten zu erstellen, müssen Sie das Element, das auf ein bestimmtes Ereignis reagieren soll, in Ihrem Dokument markieren. Das können Bilder, Verlinkungen oder auch das gesamte Dokument sein.

Abbildung 10.3 Vorgaben für Verhalten

In unserem Beispiel soll mit dem Bild News eine Aktion verbunden werden. Wenn Sie ein Bild anwählen, haben Sie im Eigenschafteninspektor die Möglichkeit, diesem einen Namen zu geben . Erst durch eine vom Dateinamen unabhängige Bezeichnung eines Elementes kann dieses mit JavaScript angesprochen werden. Wenn ein Element einen vom Dateinamen unabhängigen Namen hat, spielt der Inhalt des Elementes keine – oder kaum – eine Rolle. In unserem Beispiel benennen wir das Element einfach nur mit »Bild«.


Automatische Namensvergabe
Dreamweaver vergibt auch automatisch Namen für Bilder, denen Verhalten hinzugefügt werden. Wir raten Ihnen jedoch, den Namen selbst zu definieren, Dreamweaver nummeriert die Bilder einfach unübersichtlich durch. Vergeben Sie immer eindeutige Namen und erleichtern sich so weitere Schritte. Achten Sie bei den Bezeichnungen darauf, dass Sie keine Leerzeichen und Sonderzeichen verwenden.

Durch Klicken auf das Pluszeichen im Verhaltensfenster können Sie dem Objekt, das Sie auswählen, ein Verhalten zuweisen. In unserem Fall ist es das Verhalten Bild austauschen.

Abbildung 10.4 Bild für Rollover-Aktion auswählen

Wie Sie in Abbildung 10.4 sehen, erscheint in der Dialogbox der Name Ihres Bildes. Alle anderen Bildobjekte in Ihrem Dokument wurden von Dreamweaver automatisch benannt. Klicken Sie jetzt auf Durchsuchen, um das Bild auszuwählen, das Sie bei erfolgtem Ereignis anzeigen möchten.

Da es sich um ein Rollover handelt, bietet Ihnen Dreamweaver in weiser Voraussicht zwei weitere Optionen an:

  • Bilder vorausladen: Im Normalfall werden Bilder in einer Website dann geladen, wenn sie auch dargestellt werden sollen. Bei einem Rollover wäre dies zu spät. Bis das Bild dann geladen würde, haben Sie die Aktion längst wieder beendet. Damit dies nicht geschieht, fügt Dreamweaver ein JavaScript ein, das dafür sorgt, dass Bilder, die für Rollover benötigt werden, gleich mit dem Hauptdokument geladen werden.
  • Bilder bei onMouseOut wiederherstellen: Sie möchten sicherlich, dass Ihre Schaltfläche wieder den normalen Zustand anzeigt, wenn die Maus sie wieder verlässt. Bei einem einfachen JavaScript, das nur das Bild bei einem Ereignis austauscht, wäre dies nicht der Fall. Aus diesem Grund wird hier bereits eine zweite Aktion zum Wiederherstellen des Ausgangszustandes eingefügt.

Abbildung 10.5 Menüfenster Verhalten mit möglichen Aktionen

Nach Abschluss der Arbeiten sehen Sie im Bedienfeld Verhalten die neu eingetragenen Aktionen. Wenn Sie in der Tag-Palette eines der Ereignisse anklicken, sehen Sie ein Popup, indem Sie die Art der Ereignisse im Rahmen der von Ihnen gewählten Vorgaben (Browser ab 4.0) einstellen können.

Rechts daneben werden die Aktionen aufgelistet, in unserem Fall der Bildaustausch und die Wiederherstellung des Bildaustausches.

Durch Klicken auf Verhalten hinzufügen und Ereignis entfernen können Aktionen hinzugefügt oder entfernt werden.

Mit den beiden Pfeilen nach oben und unten kann die Reihenfolge der Aktionen geändert werden. Manchmal kommt es vor, dass bei vielen definierten Aktionen einiges nicht so läuft wie vorgesehen. Dann ist es oft hilfreich, die Reihenfolge der Aktionen zu verändern, und es funktioniert.


Galileo Computing

10.2.2 Browserweichen  downtop

Sie kennen sicher all die Einschränkungen in Design und Programmierung durch unterschiedliche Browser. Eine Möglichkeit, verschiedene Versionen einer Website für unterschiedliche Browsertypen anzubieten, ist, mit einer Browserweiche zu arbeiten.

Jeder Browser hinterlässt bei Zugriff auf eine Website eine Kennung. Diese Kennung kann man abfragen und auswerten. Eine Browserweiche leitet den Besucher auf verschiedene Websites weiter, die für den jeweiligen Browsertyp perfektioniert sind. Dreamweaver bietet in seinen Aktionen eine Browserweiche an.

Aufruf durch JavaScript | Einige negative Eigenschaften einer Browserweiche sollten nicht unerwähnt bleiben. Die Funktion wird durch JavaScript erreicht. Hat ein Benutzer JavaScript deaktiviert, kommt er auf keine der angegebenen Websites, sondern muss »von Hand« weitergeleitet werden. Dies geschieht durch einen Link in dem Dokument, das die Browserweiche enthält.

Ein weiterer Nachteil ist, dass manche Suchmaschinen auf automatische Weiterleitungen allergisch reagieren. Für eine Suchmaschine ist nicht zu unterscheiden, ob es eine funktionelle Weiterleitung ist, oder einfach nur Suchmaschinen-Spamming.


Alternative PHP
Eine wesentlich elegantere und schnellere Browserweiche können Sie mit PHP aufbauen. Hierbei ist es völlig unerheblich, ob der Benutzer JavaScript aktiviert hat oder nicht. PHP ist rein serverseitig. Auch Suchmaschinen bekommen diese Form der Weiterleitung nicht mit.

Browserweiche einfügen | Zum Einfügen einer Browserweiche mit JavaScript legen Sie ein neues Dokument an oder klicken in einem bestehenden Dokument in einen leeren Bereich. Das Skript muss dem Body des Dokuments zugeordnet werden, da es beim Laden des Dokumentes ausgeführt wird.

Sie erhalten die Dialogbox aus Abbildung 10.6 (siehe Seite 176), wenn Sie in der Bedienfeldgruppe Verhalten auf das Plus-Symbol klicken und anschließend Browser überprüfen aus dem Menü auswählen. Tragen Sie die gewünschten Parameter ein und Dreamweaver 8 erstellt Ihnen das benötigte JavaScript.

Abbildung 10.6 Konfiguration einer Browserweiche


Galileo Computing

10.2.3 Plugins überprüfen  downtop

Eine ähnliche Funktion wie die Browserweiche bietet die Plugin-Überprüfung. Plugins sind zusätzliche Programme, die in einem Browser installiert werden, um bestimmte Funktionen oder Darstellungen zu ermöglichen. Das bekannteste Beispiel dafür ist das Flash Player-Plugin.

Abbildung 10.7 Plugin-Überprüfung

Plugin-Überprüfung einfügen | Zur Dialogbox gelangen Sie wieder über die Bedienfeldgruppe Verhalten und den Menüpunkt Plugin überprüfen. Ist das ausgewählte Plugin im Browser des Benutzers vorhanden, wird die Seite damit angezeigt – ist es nicht vorhanden, wird der User auf eine Alternativseite weitergeleitet.

Notwendig wird dieses durch Dreamweaver automatisch generierte JavaScript beispielsweise bei Websites mit Flash. Sie werden beim Surfen im Internet feststellen, dass viele Flash-Sites eine HTML-Alternative anbieten. Surfer ohne Flash-Plugin werden automatisch auf eine HTML-Seite geleitet.

Da eine hundertprozentig zuverlässige Plugin-Überprüfung nicht immer möglich ist, sollte in jedem Fall eine Seite angegeben werden, auf die gewechselt wird, wenn die Erkennung fehlschlägt.


Galileo Computing

10.2.4 Ein Popup-Menü  downtop

Gute Popup-Menüs zu erstellen ist nie einfach gewesen. Mit Dreamweaver und Layern war es bisher eine mittlere Katastrophe. Im Web gibt es zwar eine Menge fertige Skripts dafür, aber die wenigsten sind auch in allen Browsern lauffähig.

Doch diese Probleme waren gestern: Popup-Menüs wie in Abbildung 10.8 können Sie in schon mit Dreamweaver MX 2004 direkt über Dialogmenüs erstellen, ohne sich mit meterlangen JavaScripts herumschlagen zu müssen. Dreamweaver erzeugt diese einfach aus den Angaben, die sie bequem eingeben. Sogar in Netscape 4.7 funktionieren die Menüs einwandfrei.

Abbildung 10.8 Popup-Menü

Schritt für Schritt: Erstellen eines Popup-Menüs mit Dreamweaver 8 (Beispiel)

1 Anlegen der Menüpunkte

Legen Sie zunächst eine einfache Menüleiste an. Sie können dazu Grafiken verwenden oder einfache Hyperlinks wie in Abbildung 10.8 dargestellt.

Markieren Sie den gewünschten Menüpunkt, der mit einem Popup-Menü hinterlegt werden soll. In der Bedienfeldgruppe Verhalten wählen Sie jetzt über das Plus-Symbol die Option Popup-Menü anzeigen aus.

Das Konfigurationsmenü beginnt damit, dass Sie die einzelnen Menüpunkte mit dem Hyperlink und eventuellen Zielen in einem Frameset anlegen. Die Reihenfolge der Menüpunkte können Sie auch noch nachträglich mit den Pfeiltasten ändern.

2 Anlegen der Designvorgaben

Im nächsten Schritt werden im Reiter Darstellung die groben Designvorgaben wie Schrift und Farben, eingestellt. Dreamweaver 8 zeigt in einer Vorschau, wie das Menü aussehen wird. Hier können Sie auch festlegen, ob das Menü horizontal oder vertikal im Dokument verlaufen soll.

3 Erweiterte Layoutvorgaben

Der nächste Punkt ermöglicht Ihnen, das Layout noch genauer anzupassen. Hier können Tabellenparameter und Verzögerungen beim Ausklappen eingestellt werden.

4 Positionieren des Menüs

Als letzten Schritt müssen Sie nun festlegen, an welcher Position des Hauptmenüpunktes das Popup-Menü erscheinen soll. Diese Position kann sehr genau vergeben und auch noch nachträglich korrigiert werden.

Das Aussehen eines Popup-Menüs lässt sich vollständig an die umliegende Gestaltung anpassen. Zur Not kann dies auch noch nachträglich in CSS vollzogen werden.

Der einzige Nachteil der so erstellten Popup-Menüs ist leider, dass Dreamweaver dafür eine externe, 37 KB große JavaScript-Datei ausspuckt. Aber einmal geladen, bleibt sie im Cache des Benutzers, und alles funktioniert reibungslos ohne Wartezeiten.


Galileo Computing

10.2.5 Mehrere Frames gleichzeitig austauschen  toptop

Die Aktion gehe zu url kann benutzt werden, um mehrere Frames gleichzeitig auszutauschen. Lesen Sie dazu auch das Kapitel 9 über Frames. Dort wird auch der Hintergrund dieser Aktion eingehend erläutert.

Wählen Sie die gewünschte Verlinkung in Ihrem Dokument an und fügen Sie zunächst ein Ziel für die Aktion hinzu. Nachdem die Aktion erfolgreich erstellt wurde, öffnen Sie die Dialogbox Gehe zu URL durch einen Doppelklick auf diese Aktion im Bedienfeld Verhalten erneut und fügen ein weiteres Ziel hinzu. Dieses wird der bestehenden Aktion als weiterer Parameter hinzugefügt.

Abbildung 10.9 Verlinkung mehrer Dokumente gleichzeitig in einem Frameset

Schritt für Schritt: Erstellen der Rollover-Effekte auf der Buchwebsite

Abbildung

Beginnend mit dem Menüpunkt NEWS legen wir jetzt die Rollover-Effekte für die einzelnen Navigationspunkte der Buchwebsite an.

1 Verhalten hinzufügen

Wählen Sie das entsprechende Bild aus und fügen Sie im Bedienfeld Verhalten die Aktion Bild austauschen hinzu. Den Bildern X.gif ist jeweils ein X_over.gif zugeordnet.

Erstellen Sie für jeden Menüpunkt eine Aktion zum Bildaustausch.

2 Funktion überprüfen

Vergessen Sie nicht, die Funktion anschließend im Browser zu überprüfen.



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.






 <<   zurück
  
  Zum Katalog
Zum Katalog: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Adobe Dreamweaver CS3 - Der praktische Einstieg






 Adobe Dreamweaver
 CS3 - Der praktische
 Einstieg


Zum Katalog: Adobe Dreamweaver CS3 - Videotraining






 Adobe Dreamweaver
 CS3 - Videotraining


Zum Katalog: Adobe Flash CS3 - Videotraining






 Adobe Flash CS3 -
 Videotraining


Zum Katalog: Adobe Photoshop CS3






 Adobe Photoshop CS3


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Design]
[Schulungen direkt von den Autoren: firstART- Agentur für Design und Consulting]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de