Erstellen Sie interaktive Rollover Buttons in Dreamweaver

April 8

Alle Besucher Ihrer Website werden erwarten Ihre Schaltflächen ändern, wenn die Maus über sie. Rollover anzuzeigen, dass eine Schaltfläche aktiv ist, und Sie klicken Besucher woanders dauert. Wenn Sie Ihre HTML-Referenz überprüfen, entdecken Sie, dass Sie Rollover nicht hinzufügen können; Sie müssen JavaScript oder CSS verwenden. Oder können Sie Dreamweaver den Code für Sie zu schreiben.

Anweisungen

1 Entwerfen Sie Ihre Navigationsleiste oder Webseitenoberfläche in Ihrem Lieblings Bildeditor. Halten Sie die Elemente, die noch nie auf einer Ebene ändern. Verschieben Sie die Schichten mit Elementen, die auf eine Ebene mit dem Namen "Fixed" und die Elemente, die auf eine zweite Schicht mit dem Namen "Normalzustand." mit der Rollover ändern werden sich nie ändern Rollover-Schnittstellenelemente könnte Hintergrund, Text, Symbolleisten oder Spezialeffekte auf die Ebene angewendet.

2 Duplizieren Sie die Ebene "Fixed" und nennen Sie es "Rollover." Nehmen Sie Änderungen, die Sie entsprechend den neuen Rollover-Staat machen möchten. Blenden Sie die Ebene "Rollover".

3 Wählen Sie die Grafik-Editor Web Slice-Werkzeug. Slice jede Schaltfläche und nennen Sie es mit der Softwares Segment Optionen Palette (oder Werkzeug). Sie sollten auch den URL-Link in der Bildbearbeitungs-Software hinzufügen zu können. Wenn dies nicht der Fall ist, können Sie es in Dreamweaver hinzufügen.

4 Exportieren Sie das Bild als ein HTML-Dokument mit Slices (es ist wichtig, dass die Ebene "Rollover" in diesem Stadium nicht sichtbar sein). Überprüfen Sie die neue HTML-Datei in einem Browser, um sicherzustellen, dass alle Segmente angezeigt werden. Wenn man weiß das originale HTML Datei zu arbeiten, den "Rollover" Layer anzuzeigen und Ausblenden der "Normalzustand"-Schicht. Wählen Sie die Schaltfläche Segmente nur und als "Nur ausgewählte Slices" in einen Unterordner im Bilderordner zu exportieren.

5 Öffnen Sie die HTML-Datei in Dreamweaver. Sie sollten Ihre gesamte Bild im Dokumentfenster wieder zusammengesetzt sehen. Wählen Sie das Schaltfläche-Segment, die Zellbegrenzung Tabelle zu offenbaren.

6 Öffnen Sie die Palette der Verhaltensweisen. Klicken Sie auf das "+"-Symbol, und wählen Sie "Bild austauschen" aus dem Pull-Down-Menü öffnen Sie den Dialog Bild austauschen. Überprüfen Sie erneut, um sicherzustellen, dass die Rechte-Taste aktiviert ist, und überprüfen Sie die "Preload Bilder" und "Wiederherstellung der Bilder auf Maus raus" Optionen. Klicken Sie auf "Durchsuchen", um das Bild-Slice, den, das Sie gespeichert, für den Rollover-Staat zu finden.

7 Vorschau der Webseite in Ihrem Browser. Wenn alles ordnungsgemäß funktioniert, können die Web-Seite speichern und auf Ihren Server hochladen.

Tipps & Warnungen

  • Wenn Ihre Grafik-Editor nicht unterstützt, schneiden, müssen Sie schneiden die einzelnen Elemente aus Ihrem Dokument und speichern Sie sie als separate Dateien, die ein Schmerz sein wird.
  • Achten Sie darauf, Ihre Rollover-Bilder in einen Unterordner im Bilderordner zu speichern. Andernfalls werden die normalen Zustand Schaltflächenbilder überschrieben.

SIE KÖNNEN AUCH GERNE