Dreamweaver (ci-après dénommé DW) fournit un mécanisme appelé « Comportement » pour vous aider à créer des comportements interactifs dans la page. Le comportement est une série d'actions effectuées sur une page Web, à travers lesquelles l'utilisateur interagit avec la page. En utilisant le comportement de DW, vous pouvez obtenir des effets de page dynamiques riches et réaliser une interaction utilisateur-page sans écrire une seule ligne de code.
Un comportement est composé d'événements et d'actions. Un événement est le résultat du déclenchement d'une action et une action est un code JavaScript pré-écrit utilisé pour effectuer une tâche spécifique, telle que l'ouverture d'une fenêtre de navigateur, la lecture d'un son, etc.
Lorsque vous utilisez des comportements sur un élément de page, vous spécifiez les actions et les événements à déclencher. DW a fourni certaines actions que vous pouvez appliquer aux éléments de la page.
1. Quelques comportements intégrés de base
1. Appeler JavaScript (Call JavaScript)
Ce comportement vous permet de configurer le script JavaScript correspondant à appeler lorsque certains événements sont déclenchés pour implémenter l'action correspondante. Lors de la définition de ce comportement, vous pouvez saisir directement des scripts ou des fonctions JavaScript.
2. Modifier la propriété (Change Property)
Ce comportement vous permet de modifier dynamiquement les propriétés de l'objet, telles que la taille de l'image, la couleur d'arrière-plan du calque, etc. Notez que la définition de ce comportement dépend de la prise en charge du navigateur.
3. Vérifier le navigateur
Il existe certaines différences dans les capacités de prise en charge des différents navigateurs. Grâce à ce comportement, nous pouvons vérifier la version du navigateur pour accéder à différentes pages.
4. Vérifier le plug-in
Parfois, les pages que nous créons nécessitent le support de certains plug-ins, comme les pages Web réalisées avec Flash, il est donc nécessaire de vérifier le plug-in du navigateur de l'utilisateur pour voir s'il dispose du plug-in spécifié. installé. C’est exactement ce que fait ce comportement.
5. Contrôler Shockwave ou Flash (Control Shockwave ou Flash)
Shockwave et Flash sont des objets qui sont souvent insérés dans la production de pages Web en cours. Ce comportement est utilisé pour contrôler ces objets. Vous pouvez l'utiliser pour contrôler la lecture, l'arrêt et le retour de l'animation, et vous pouvez également contrôler l'image à laquelle accéder directement.
6. Déplacer le calque (faire glisser le calque)
Le comportement "Déplacer le calque" peut réaliser le mouvement des calques sur la page, et même le mouvement du contenu en couches.
7. Aller à l'URL (Go To URL)
Vous pouvez spécifier la fenêtre actuelle du navigateur ou la fenêtre frame spécifiée pour charger la page spécifiée.
8. Menu de saut
Le comportement "Menu de saut" est principalement utilisé pour éditer des formulaires de saut.
9. Boîte de dialogue de message contextuel (Message contextuel)
Si vous souhaitez afficher une boîte de dialogue d'informations sur la page ou envoyer un message d'invite à l'utilisateur, vous pouvez utiliser ce comportement.
2. Exemple simple
Ci-dessous, nous prendrons des images dynamiques comme exemple pour présenter l'utilisation des comportements. Vous devez d’abord créer deux images 1 et 2 de la même taille. Voici les étapes spécifiques.
1. Ouvrez DW pour créer une page et insérez la figure 1 dans cette page.
2. Sélectionnez Figure 1 dans la fenêtre d'édition DW.
3. Sélectionnez "Comportements" dans le menu "Fenêtres" ou appuyez sur F8 pour ouvrir le panneau Comportement. Notez que dans le menu contextuel Événements pour, « Navigateurs 3.0 et versions ultérieures » doit être sélectionné.
4. Appuyez sur le bouton "+" pour ajouter un nouveau comportement - "Échanger l'image" et la boîte de dialogue "Échanger l'image" apparaîtra. Dans la liste des images, vous verrez une liste de toutes les images de la page. Sélectionnez l'image 1 que vous souhaitez transformer. Il s'agit de l'image originale lorsque le pointeur de la souris la survole, elle sera remplacée par une image 2 en surbrillance. remplaçant.
5. Cliquez sur le bouton Parcourir et sélectionnez celle que vous souhaitez remplacer. Grâce à l'événement "onMouseOver", l'image 2 sélectionnée remplace l'image d'origine 1.
6. Sélectionnez les paramètres par défaut pour le pré-appel et le stockage des images.
L'option "Précharger les images" signifie que lorsque la page entière est téléchargée, les images transformées sont placées dans le cache du navigateur. Lorsque le spectateur déplace le pointeur de la souris sur l'image Notre histoire pour la première fois, il peut à peine sentir l'image en surbrillance. Il n'y a aucun retard dans l'apparition de . L'option "Restaurer les images onMouseOut" signifie que lorsque l'événement "onMouseOut" (souris sortie) se produit, l'image sera automatiquement restaurée à son état d'origine.
7. Une fois les paramètres terminés, cliquez sur le bouton « OK » pour fermer la boîte de dialogue « Échanger l'image » et appliquer les paramètres précédents.
À ce stade, le panneau Comportement contient les événements et les actions que vous venez de définir pour l'image. Il y a une marque d'action "Swap Image" à côté de l'événement "OnMouseOver", et au-dessus il y a l'événement "onMouseOut" et l'action correspondante "Swap Image Restore" (ce comportement se produit lorsque vous acceptez la valeur par défaut dans la boîte de dialogue Swap Image options de boîte définies).
8. Fermez le panneau Comportement. Appuyez sur F12 pour prévisualiser la page. Lorsque vous déplacez le pointeur de la souris sur l'image 1, vous constaterez qu'elle a été remplacée par l'image 2.
L'exemple ci-dessus n'est qu'un simple exemple d'application du comportement de DW. Il existe de nombreuses autres utilisations, je ne les expliquerai donc pas une par une ici. De plus, DW permet également aux utilisateurs d'utiliser des comportements étendus, qui peuvent être téléchargés depuis la page d'accueil de Macromedia.