Dreamweaver für Einsteiger

Die Dreamweaver Programmoberfläche
Texte und Bilder formatieren
Seitenlayout mit Tabellen
Bilder und Farben
Einführung in einfache Javascripte
HTML Quellcode
Veröffentlichen von Webprojekten
Gifanimationen, Hintergrundbilder und Imagemaps
Über die Grundlagen hinaus
Literaturhinweise und weiterführende Informationen

JavaScript ist eine Erweiterung zu HTML, die von der Firma Netscape entwickelt wurde.
Mit JavaScript können Sie Bilder bei Mausberührung austauschen, Formulareingaben überprüfen und allerlei lustige Effekte erzeugen.
Die Sache hat allerdings einen Haken - nicht alle Anwender haben JavaScript in ihrem Browser aktiviert und dann funktioniert unsere schöne Programmierung nicht mehr. Vermeiden Sie also Webseiten, in denen die Navigation von einem JavaScript-fähigen Browser abhängig ist. Sie würden viele Surfer vom Besuch Ihrer Website ausschließen.
Dreamweaver liefert eine Menge an vorgefertigten Skripten mit. Sie müssen die Skripte glücklicherweise nicht von Hand schreiben.

Technik

Um JavaScript in eine HTML-Seite zu schreiben, benutzen Sie die Verhaltenpalette.
In dem folgenden Beispiel sollen sich die Navigationsbilder austauschen, wenn der Anwender die Maus über die Navigationsgrafik bewegt (in JavaScript auch "RollOver" oder "MouseOver" genannt).
Sie sehen diesen Effekt nicht in Dreamweaver, sondern nur im Browser und auch nur dann, wenn im Browser JavaScript aktiviert ist.

Aufgabe

Bauen Sie die Seite "javascript_vorlage.html" nach. Da Sie diese Seite mit 3 weiteren Seiten verlinken, erstellen Sie auch die Seiten "schoen.html", "geld.html" und "tee.html"

Schritt für Schritt

1. Für die Startseite "javascript_vorlage.html" Erstellen Sie eine Tabelle: 1 Zeile, 3 Spalten, 700px breit.

2. Sie bauen nun eine Navigationsleiste, die einen "MouseOver"-Effekt erhält. Die linke Spalte erhält eine Breite von 300 Pixeln und die vertikale Ausrichtung "oben". 300 Pixel ist auch die Breite der Buttons. Laden Sie in diese einzelne Zelle die folgenden 3 Grafiken (Navigations-Buttons): "schoen_0.gif", "geld_0.gif", "tee_0.gif" Die "0" im Dateinamen steht für den Zustand "0", also ein Button, der sich im "Ruhezustand" befindet. Man könnte ihn z.B. auch "_off" nennen.

Geben Sie den Buttons in der Eigenschaftenpalette im Eingabefeld "Bild" eindeutige Namen. Es dürfen keine Sonder- oder Leerzeichen verwendet werden.

3. Bevor Sie die Seite verlinken, stellen Sie die Seite fertig. Die mittlere Zelle erhält einen Breite von 50px (dient als Abstandshalter zwischen Navigation und Text), die rechte Zelle 350px, Ausrichtung vertikal "oben". Die vorhin eingegebene Breite der Tabelle von 700px löschen Sie nun wieder, diese Angabe ist überflüssig, da wir allen 3 Zellen eine Breite gegeben haben. Kopieren Sie sich nun den Text aus der Datei "rohtext.html" und fügen ihn in die rechte Zelle ein.

4. Nun verlinken Sie die Seite und belegen die Buttons per JavaScript mit einem MouseOver-Effekt:
Aktivieren Sie den Button "schoen_0.gif" und wählen in der Eigenschaftenpalette unter "Hyperlink" die Datei "schoen.html". Öffnen Sie im Menü Fenster > Verhalten die Verhaltenpalette. Klicken sie auf die Schaltfläche "+" und wählen Sie "Bild austauschen" aus. Es öffnet sich das folgende Fenster:

Sie sehen hier Ihre 3 Buttons aufgelistet, klicken Sie auf "schoen", falls es nicht schon aktiviert ist. Unter "Quelle einstellen auf" wählen Sie die Grafik aus, die bei einem "MouseOver" zu sehen sein soll, in diesem Fall "schoen_1.gif" aus dem Materialordner. "Bilder vorausladen" sollte aktiviert sein, damit die Buttons nicht erst dann geladen werden, wenn der Anwender mit der Maus über die Navigation fährt.
Und dann sollen die Buttons natürlich wieder im Originalzustand zu sehen sein, wenn die Maus den Button verlässt (onMouseOut). Dieses also auch aktivieren.

Wie Sie in der unten gezeigten Verhaltenpalette sehen, ist es möglich, statt dem "onMouseOver" verschiedene andere Events (Benutzeraktionen) wie "onKeyDown" oder "onClick" anzugeben. Diese variieren je nach Browser-Version.

5. Testen Sie nun im Browser (nicht in Dreamweaver, hier funktioniert es nicht), ob Ihr soeben erstelltes JavaScript funktioniert. Wenn alles in Ordnung ist, gilt die gleiche Prozedur für die beiden anderen Buttons. Auch diese testen Sie bitte noch einmal in verschiedenen Browsern und auf möglichst vielen Plattformen (PC, Mac, Linux, Unix).

6. Fertigstellen der 3 Folgeseiten: Da die Folgeseiten genauso angeordnet sein sollen, wie die Startseite (javascript_vorlage.html), kopieren Sie sich die gesamte erstellte Tabelle und fügen sie jeweils in die 3 Folgeseiten ein. Die Texte holen Sie sich wieder in der Datei "rohtext.html" und tauschen sie einfach aus. Verlinken Sie den Text "zurück zur Startseite" mit der Seite "javascript_vorlage.html" aus dem Ordner "Vorlage".

7. Jetzt müssen Sie natürlich auf jeder Folgeseite jeweils den Navigationspunkt dieser Seite ändern. Nehmen wir z.B. die Seite "schoen.html": Damit der Anwender sofort erkennt, dass er sich auf dieser Seite befindet, sollte der Button im "aktiven" Zustand zu sehen sein, der Button "schoen_1.gif" also. Sie brauchen somit auch keinen "MouseOver" mehr. Entfernen Sie das JavaScript "MouseOver" indem Sie es in der Verhaltenpalette aktivieren und dann die Schaltfläche "-" (minus) klicken. Wie Sie sehen, ist automatisch auch das "MouseOut" verschwunden.

In der Eigenschaftenpalette entfernen Sie auch den Link auf diese Seite, wir befinden uns ja bereits hier. Und unter "Quelle" wählen Sie den Button "schoen_1.gif" aus.

Punkt 7 wiederholen Sie für die beiden anderen Folgeseiten...

8. Fertig! Sie haben sich soeben eine Website mit einer Start-, drei Folgeseiten und eingebundenem JavaScript erstellt. Testen Sie alles noch einmal ganz genau in verschiedenen Browsern. Sollte ein Anwender JavaScript in seinem Browser deaktiviert haben, funktioniert Ihre Website trotzdem, da sie über HTML verlinkt ist. Lediglich der MouseOver-Effekt wäre nicht zu sehen.

Tipps

JavaScript wird direkt in den Quelltext der HTML-Seite geschrieben und vom Browser ausgeführt. Das Ausführen des Programmcodes auf der Clientseite macht diese Technik fehleranfällig. Sicherer ist es, kritische Programmierungen mit Cgi oder PHP auf dem Server laufen zu lassen.
JavaScript hat übrigens nichts mit der Programmiersprache Java zu tun.
Nehmen Sie die Ratschläge in unseren Übungsdateien nicht allzu ernst. Zu Risiken und Nebenwirkungen fragen Sie bitte nicht sfk sondern Ihren Arzt oder Apotheker.

Kontrollfragen und weitere Übungen

Wie aktiviert bzw. deaktiviert man JavaScript im MS Internet Explorer bzw. Netscape Navigator?
Erzeugen Sie die PopUp-Meldung "Hallo Welt", wenn Sie mit der Maus eine Grafik anklicken.
Für die Fortgeschrittenen: Es gibt eine Unzahl von fertigen Javascriptprogrammierungen kostenlos im Internet. Bauen Sie solche Scripte von Hand in Ihre Seite ein.

Literaturhinweis

JavaScript Bibliothek: http://javascript.internet.com/
Englischsprachiges JavaScriptforum: http://www.webreference.com/javascript/

Letzte Aktualisierung dieser Datei am: 09.6.2005
Autor: Stephan Franke · Impressum und Hinweise zu diesen Seiten · Suche
Diese Seiten wurden produziert von: sfk

Haben Sie Anregungen, Kritik oder Ideen zu dieser Seite? Sie können hier einen Kommentar schreiben.
Ihr Kommentar wird am Ende dieser Seite angefügt.

Bislang wurden zu dieser Seite keine Kommentare geschrieben