Les amis qui ont utilisé QQ pour discuter adorent tous sa fonction de masquage automatique des fenêtres, qui peut donner à la fenêtre un aspect frais, propre et dynamique. Plusieurs de mes amis souhaitent ajouter des éléments similaires à leurs pages Web et, après une exploration conjointe, ils ont découvert ceci. cet effet peut être obtenu avec Dreamweaer. Jetons un coup d'œil à la production d'une barre de menu active.
Étape 1 : Faites apparaître le menu.
Créez un nouveau fichier dans Dreamweaer, dessinez un calque, insérez un tableau dans le calque (comme indiqué dans la figure 1), modifiez le tableau, puis ajoutez des éléments de menu et créez des hyperliens vers chaque élément à supprimer. le soulignement d'un lien hypertexte, vous pouvez modifier le style CSS du lien hypertexte. Dans le panneau de style CSS, définissez la "Décoration" de "Lien" et "Survol" sur "Aucun" via le sélecteur CSS ". Color" est défini sur rouge, et enfin le style défini est appliqué à chaque barre de menu (vous pouvez appuyer sur la touche "F12" pour prévisualiser l'effet).
Figure 1
Étape 2 : Concevoir l'effet dynamique du menu
1. Sélectionnez le calque, maintenez le bouton gauche enfoncé lorsque la souris prend la forme d'une "croix" et faites glisser le calque vers le coin supérieur droit de la page (de sorte que toute la barre de menu soit entièrement exposée mais que le bord supérieur soit juste près du bord supérieur de la page), et ouvrez l'heure dans le panneau Ligne du menu de la fenêtre, sélectionnez le calque et faites-le glisser vers la timeline. Dreamweaer générera automatiquement un objet d'animation d'une longueur de 15 images. l'objet d'animation à la 30ème image et définissez sa longueur sur 30 images. Cliquez ensuite avec le bouton droit sur l'image 15, sélectionnez l'option "Ajouter une image clé" dans le menu contextuel contextuel pour insérer une image clé et faites glisser le calque vers la position appropriée (Figure 2).
Figure 2 Cliquez à nouveau avec le bouton droit sur l'image 15 dans la fenêtre de chronologie, sélectionnez « Ajouter une action » dans le menu contextuel contextuel, ajoutez un comportement interactif à l'image et Dreamweaer ouvrira automatiquement le panneau de comportement. Cliquez sur le bouton "+" dans le panneau de comportement, sélectionnez "Timeline/Stop Timeline" dans le menu contextuel, ouvrez la boîte de dialogue "Stop Timeline", sélectionnez "Timeline1" et cliquez sur le bouton "OK" pour fermer la boîte de dialogue. . L'événement du comportement interactif est "onFrame15" et l'action est "Stop Timeline", de sorte que lorsque la timeline atteint la 15ème image, l'animation s'arrête, réalisant ainsi la fonction de rebond de la barre de menu.
2. Utilisez la même méthode pour ajouter un comportement interactif « Stop Timeline » à la 30ème image de la timeline, réalisant ainsi la fonction de menu contextuel. Après avoir ajouté ces deux comportements interactifs, un carré bleu apparaît sur le cadre correspondant dans la fenêtre timeline, qui représente un comportement interactif. Cochez la case « Lecture automatique et boucle » pour permettre à l’animation de boucler automatiquement (Figure 3).
Figure 3
3. Vous devez maintenant configurer un comportement pour permettre à la timeline de continuer à jouer après son arrêt. Mon idée est la suivante : dans l'état normal, la barre de menu apparaît mais ne conserve que les mots "Campus Grand View" ci-dessous, et le pop-up et le rebond de la barre de menu sont contrôlés par le passage de la souris sur le "Campus Grand View". Afficher" dans la barre de menu. . Vous pouvez continuer ainsi : sélectionnez le mot "Campus Grand View" dans la barre de menu (assurez-vous que l'adresse du lien hypertexte de ce mot est "#", c'est-à-dire un lien vide), cliquez sur le bouton "+" dans le panneau de comportement , et dans la fenêtre contextuelle, sélectionnez "Timeline/Play Timeline" dans le menu, sélectionnez "Timeline1" dans la boîte de dialogue qui apparaît et cliquez sur le bouton OK. À ce moment, un comportement sera ajouté au panneau de comportement, et. sélectionnez l'événement "onMouseOver" dans sa liste déroulante "Événements", indiquant que l'animation sera jouée lorsque la souris sera sur le mot (Figure 4).
Figure 4 À ce stade, une barre de menu active est terminée. Vous pouvez appuyer sur la touche "F12" pour prévisualiser son effet.
Mais cette barre de menu a un défaut : elle doit disparaître lorsque la souris passe dans une zone spécifique en dessous de la barre de menu (dans ce cas, les mots « Campus Grand View »). Si vous souhaitez faire apparaître la barre de menu, cliquez simplement. Éloignez la souris de la barre de menu pour faire disparaître le menu. Vous devrez peut-être utiliser Fireworks ou Flash. Si vous avez de bonnes méthodes, veuillez nous écrire pour en discuter.
