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: Gestalten Sie das Menü
Abbildung 1
Erstellen Sie eine neue Datei in Dreamweaer, zeichnen Sie eine Ebene, fügen Sie eine Tabelle in die Ebene ein (Abbildung 1), ändern Sie die Tabelle, fügen Sie dann Menüelemente hinzu und erstellen Sie Hyperlinks zu jedem Element, um die Unterstreichung des Hyperlinks zu entfernen Sie können den CSS-Stil des Hyperlinks über den CSS-Selektor „Dekoration“ von „Link“ und „Hover“ auf „Keine“ festlegen und die „Farbe“ von „Hover“ festlegen )“ 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).
Schritt 2: Gestalten Sie den dynamischen Effekt 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“ verwandelt, und ziehen Sie die Ebene in die obere rechte Ecke der Seite (so dass das gesamte Menü angezeigt wird). Wenn die Leiste vollständig sichtbar ist, sich der obere Rand jedoch knapp am Seitenrand befindet, öffnen Sie das Zeitleistenfenster im Fenstermenü, wählen Sie die Ebene aus und ziehen Sie sie auf die Zeitleiste. Dreamweaer generiert automatisch ein Animationsobjekt mit einer Länge von 15 Bildern. Ziehen Sie den letzten Keyframe des Animationsobjekts auf das 30. Frame und stellen Sie seine Länge auf 30 Frames ein. 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). Klicken Sie erneut mit der rechten Maustaste auf Bild 15 im Zeitleistenfenster und wählen Sie „Aktion hinzufügen“ aus dem Popup-Kontextmenü, um dem Bild ein interaktives Verhalten hinzuzufügen. 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.
Abbildung 2
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 wir 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 Verhaltensfeld 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.