Freunde, die QQ zum Chatten verwendet haben, lieben alle die Funktion zum automatischen Ausblenden von Fenstern, die das Fenster frisch, sauber und dynamisch aussehen lässt. Mehrere meiner Freunde möchten ähnliche Dinge zu ihren Webseiten hinzufügen, und nach gemeinsamer Erkundung haben sie Folgendes herausgefunden Dieser Effekt kann mit Dreamweaer erzielt werden. Werfen wir einen Blick auf die Erstellung einer aktiven Menüleiste.
Schritt 1:
Erstellen Sie eine neue Datei in Dreamweaer, zeichnen Sie eine Ebene, fügen Sie eine Tabelle in die Ebene ein (wie in Abbildung 1 gezeigt), ändern Sie die Tabelle, fügen Sie dann Menüelemente hinzu und erstellen Sie Hyperlinks zu jedem Element, das Sie entfernen möchten Wenn Sie die Unterstreichung eines Hyperlinks festlegen, können Sie im CSS-Stilbereich die „Dekoration“ von „Link“ und „Hover“ über die Option „Hover“ auf „Keine“ setzen. „Farbe“ wird auf Rot gesetzt und schließlich wird der festgelegte Stil auf jede Menüleiste angewendet (Sie können die Taste „F12“ drücken, um eine Vorschau des Effekts anzuzeigen).
Abbildung 1
Schritt 2: Gestalten Sie die dynamische Wirkung des Menüs
1. Wählen Sie die Ebene aus, halten Sie die linke Maustaste gedrückt, wenn sich die Maus in die Form eines „Kreuzes“ ändert, und ziehen Sie die Ebene in die obere rechte Ecke der Seite (so dass die gesamte Menüleiste vollständig sichtbar ist, der obere Rand jedoch gerade sichtbar ist). nahe dem oberen Rand der Seite) und öffnen Sie im Fenstermenü das Linienfenster, wählen Sie die Ebene aus und ziehen Sie sie auf die Zeitleiste. Ziehen Sie den letzten Keyframe das Animationsobjekt auf das 30. Bild und legen Sie seine Länge auf 30 Bilder fest. Klicken Sie dann mit der rechten Maustaste auf Frame 15, wählen Sie im Popup-Kontextmenü die Option „Keyframe hinzufügen“, um einen Keyframe einzufügen, und ziehen Sie die Ebene an die entsprechende Position (Abbildung 2).
Abbildung 2 Klicken Sie erneut mit der rechten Maustaste auf Bild 15 im Zeitleistenfenster, wählen Sie im Popup-Kontextmenü „Aktion hinzufügen“ aus, fügen Sie dem Bild ein interaktives Verhalten hinzu, und Dreamweaer öffnet automatisch das Verhaltensfenster. Klicken Sie im Verhaltensbereich auf die Schaltfläche „+“, wählen Sie „Timeline/Timeline stoppen“ aus dem Popup-Menü, öffnen Sie das Dialogfeld „Timeline stoppen“, wählen Sie „Timeline1“ aus und klicken Sie auf die Schaltfläche „OK“, um das Dialogfeld zu schließen . Das Ereignis des interaktiven Verhaltens ist „onFrame15“ und die Aktion ist „Timeline stoppen“, sodass die Wiedergabe der Animation stoppt, wenn die Timeline das 15. Bild erreicht, wodurch die Bounce-Funktion der Menüleiste realisiert wird.
2. Verwenden Sie dieselbe Methode, um am 30. Frame der Zeitleiste ein interaktives Verhalten „Timeline stoppen“ hinzuzufügen und so die Menü-Popup-Funktion zu realisieren. Nach dem Hinzufügen dieser beiden interaktiven Verhaltensweisen erscheint im entsprechenden Frame im Zeitleistenfenster ein blaues Quadrat, das ein interaktives Verhalten darstellt. Aktivieren Sie das Kontrollkästchen „Automatische Wiedergabe und Schleife“, um die automatische Schleife der Animation zu aktivieren (Abbildung 3).
Abbildung 3
3. Jetzt müssen Sie ein Verhalten einrichten, damit die Timeline nach dem Stoppen weiter abgespielt werden kann. Meine Idee ist folgende: Im Normalzustand wird die Menüleiste eingeblendet, behält aber nur die Worte „Campus Grand View“ unten bei, und das Einblenden und Zurückfedern der Menüleiste wird dadurch gesteuert, ob die Maus über „Campus Grand“ bewegt wird „Ansicht“ in der Menüleiste. . Sie können so fortfahren: Wählen Sie in der Menüleiste das Wort „Campus Grand View“ aus (stellen Sie sicher, dass die Hyperlink-Adresse dieses Wortes „#“ ist, also ein leerer Link), und klicken Sie im Verhaltensbereich auf die Schaltfläche „+“. Wählen Sie im Popup-Menü „Timeline/Play Timeline“ aus, wählen Sie im daraufhin angezeigten Dialogfeld „Timeline1“ aus und klicken Sie auf die Schaltfläche „OK“. Nun wird dem Verhaltensfenster ein Verhalten hinzugefügt Wählen Sie in der Dropdown-Liste „Ereignisse“ das Ereignis „onMouseOver“ aus, das angibt, dass die Animation abgespielt wird, wenn sich die Maus über dem Wort befindet (Abbildung 4).
Abbildung 4 An diesem Punkt ist eine aktive Menüleiste fertiggestellt. Sie können die Taste „F12“ drücken, um eine Vorschau des Effekts anzuzeigen.
Diese Menüleiste hat jedoch einen Nachteil: Sie muss verschwinden, wenn die Maus über einen bestimmten Bereich unterhalb der Menüleiste fährt (in diesem Fall die Worte „Campus Grand View“). Wenn Sie die Menüleiste einblenden möchten, klicken Sie einfach darauf Bewegen Sie die Maus von der Menüleiste weg, damit das Menü verschwindet. Möglicherweise müssen Sie Fireworks oder Flash verwenden. Wenn Sie gute Methoden haben, schreiben Sie uns bitte, um dies zu besprechen.
