Accueil du site > LOGICIELS > DREAMWEAVER

Dreamweaver : Les comportements

Les comportements Dreamweaver insèrent du code JavaScript dans des documents pour permettre aux utilisateurs d’interagir avec une page Web afin de la modifier ou d’effectuer certaines tâches. Un comportement est la combinaison d’un événement et d’une action déclenchée par cet événement. Dans le panneau Comportements, vous pouvez ajouter un comportement à une page en spécifiant une action, puis l’événement qui déclenche cette action.

Afficher le menu contextuel

Utilisez ce comportement pour créer ou modifier un menu contextuel Dreamweaver ou pour ouvrir et modifier un menu contextuel Fireworks inséré dans un document Dreamweaver.

Définissez les options dans la boîte de dialogue Afficher le menu contextuel pour créer un menu contextuel horizontal ou vertical. Vous pouvez faire appel à cette boîte de dialogue pour définir ou modifier la couleur, le texte et la position d’un menu contextuel.

Afficher / Masquer les calques

Cette action affiche, masque, ou rétablit la visibilité par défaut d’un ou plusieurs calques. Cette action permet d’afficher des informations en fonction des interactions de l’utilisateur avec la page. Par exemple, lorsque le curseur passe sur l’image d’une plante, vous pouvez afficher un calque comportant des détails sur le climat idéal de la plante, l’ensoleillement dont elle a besoin, sa taille adulte, etc.

L’action Afficher-masquer les calques sert également à créer un calque de préchargement, c’est-à-dire, un grand calque qui cachera d’abord le contenu de la page, puis disparaîtra à la fin du chargement de tous les éléments de la page.
[ Comment ça marche ]

Appel Javascript

L’action Appel JavaScript vous permet d’utiliser l’inspecteur de comportements pour déclencher l’exécution d’une fonction ou d’une ligne personnalisée de code JavaScript lorsqu’un événement se produit.
[ Comment ça marche ]

Atteindre l’URL

L’action Atteindre l’URL ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Cette action est particulièrement utile pour modifier d’un seul clic le contenu d’un ou plusieurs cadres. Elle peut également être appelée au sein d’un scénario pour ouvrir une nouvelle page après un délai spécifié.
[ Comment ça marche ]

Changer la propriété

Utilisez cette action pour modifier la valeur de l’une des propriétés d’un objet (par exemple, la couleur d’arrière-plan d’un calque ou l’action d’un formulaire). C’est le navigateur cible choisi qui détermine si les propriétés sont modifiables ou non ; beaucoup plus de propriétés sont exposées à JavaScript dans Microsoft Internet Explorer (IE) 4.0 que dans IE 3.0 ou Netscape Navigator 3.0 ou 4.0. Par exemple, vous pouvez modifier de façon dynamique la couleur d’arrière-plan d’un calque.
[ Comment ça marche ]

Contrôler Shockwave ou Flash

Utilisez l’action Contrôler Shockwave ou Flash pour lire, arrêter ou rembobiner une animation Shockwave ou Flash, ou pour aller à une image précise dans cette animation.
[ Comment ça marche ]

Définir image barre de navigation

Utilisez l’action Définir image barre de navigation pour transformer une image en image de barre de navigation, ou pour modifier l’affichage et les actions des images d’une barre de navigation.

L’onglet Base de la boîte de dialogue Définir image barre de navigation permet de créer ou de modifier une ou plusieurs images d’une barre de navigation, de modifier l’URL cible des boutons de la barre de navigation, et de sélectionner une autre fenêtre pour l’affichage de cette URL cible.

L’onglet Avancé de la boîte de dialogue Définir image barre de navigation permet de modifier l’état d’autres images du document, en fonction de l’état du bouton actuellement sélectionné. Par défaut, lors d’un clic sur un élément d’une barre de navigation, tous les autres éléments de celle-ci sont automatiquement restaurés dans leur état "Image normale" ; l’onglet Avancé vous permet de définir un changement d’état pour une autre image lorsque l’image sélectionnée entre dans l’état "Image survolée" ou "Image cliquée".
[ Comment ça marche ]

Déplacement de calque

Cette action permet à l’utilisateur de déplacer un calque. Utilisez cette action pour créer des puzzles, des contrôles de déplacement et autres éléments mobiles de l’interface.
Vous pouvez spécifier la direction vers laquelle l’utilisateur peut faire glisser le calque (horizontalement, verticalement, ou dans toutes les directions), une cible vers laquelle l’utilisateur doit faire glisser le calque, si ce dernier doit être aimanté par la cible ou non lorsqu’il arrive à moins d’un certain nombre de pixels de la cible, l’action à déclencher lorsque le calque touche la cible...
Comme l’action Déplacement de calque doit être appelée avant que le calque puisse être déplacé par l’utilisateur, vérifiez bien que l’événement qui déclenche l’action se produit avant que l’utilisateur aie la possibilité de tenter de faire glisser le calque. Le mieux est d’associer cette action à l’objet BODY (à l’aide de l’événement onLoad), mais vous pouvez également l’associer à un lien remplissant la totalité du calque (par exemple un lien autour d’une image), à l’aide de l’événement onMouseOver.
[ Comment ça marche ]

Intervertir une image

L’ action Intervertir une image remplace une image par une autre, en modifiant l’attribut SRC de la balise IMG. Utilisez cette action pour créer des substitutions d’images (effets de survol) et autres effets sur des images (y compris la substitution de plusieurs images à la fois).
Comme seul l’attribut SRC est affecté par cette action, l’image de substitution doit en principe avoir les mêmes dimensions (hauteur et largeur) que l’original, afin de lui éviter des déformations.
[ Comment ça marche ]

Jouer le son

Utilisez cette action pour reproduire un son. Par exemple, vous pouvez mettre en place un effet sonore lorsque l’utilisateur passe au-dessus d’un lien, ou jouer une séquence musicale lorsque la page est en cours de chargement.
[ Comment ça marche ]

Masquer le menu contextuel

Utilisez les options de position pour définir l’emplacement de l’affichage du menu par rapport à l’image ou au lien de déclenchement. Vous pouvez également définir si le menu doit être masqué ou non lorsque l’utilisateur éloigne le pointeur du déclencheur.

Menu de reroutage

Lorsque vous créez un menu de reroutage à l’aide de la fonction Insertion > Objet de formulaire > Menu de reroutage, Dreamweaver crée un objet menu et lui associe le comportement approprié. En principe, il n’est pas nécessaire d’associer manuellement l’action Menu de reroutage à un objet. Dans l’inspecteur de comportements, double-cliquez sur une action Menu de reroutage existante pour modifier le cadre dans lequel s’ouvrira un fichier lié, ou pour ajouter ou modifier une invite de sélection au sein du menu .
[ Comment ça marche ]

Message contextuel

Cette action fait apparaître un message d’alerte JavaScript, avec le texte que vous avez spécifié. Comme les alertes JavaScript ne disposent que d’un seul bouton (OK), utilisez cette action pour informer l’utilisateur plutôt que pour lui proposer un choix.

Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades {}. Pour afficher une accolade, faites-la précéder d’une barre oblique inversée \{.

Ouvrir une fenêtre de navigateur

Utilisez l’action Ouvrir une fenêtre du navigateur pour ouvrir une URL dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la nouvelle fenêtre, dont sa taille, ses attributs (redimensionnable ou non, dispose d’une barre de menu ou non, etc.), ainsi que son nom.

Si vous ne spécifiez aucun attribut, elle s’ouvrira avec la taille et les attributs de la fenêtre à partir de laquelle elle a été lancée. Le choix de certains attributs désactive automatiquement tous ceux qui ne sont pas explicitement activés. Par exemple, si vous ne définissez pas d’attributs pour la fenêtre, elle peut ou non s’ouvrir en 640 x 480 pixels et disposer du menu et des barres d’outils suivantes : navigation, adresses et état. Si vous définissez explicitement une largeur de 640 et une hauteur de 480 pixels, sans autres spécifications, la fenêtre s’ouvrira en 640 x 480 pixels et n’aura pas de barre de navigation, d’adresse ou d’état, pas de menu, pas de poignées de redimensionnement, et pas de barres de défilement.
[ Comment ça marche ]

Précharger les images

Cette action place dans la mémoire cache du navigateur les images qui ne sont pas immédiatement affichées lors du chargement de la page (par exemple les images de substitution appelées par un scénario, un comportement ou une fonction en JavaScript). Cela évite à l’utilisateur d’attendre que ces images soient chargées, lorsqu’un événement déclenche leur apparition.
[ Comment ça marche ]

Scenario

• Lire et arrêter le scenario
Utilisez les actions Jouer le scénario et Arrêter le scénario pour permettre aux utilisateurs d’exécuter et d’arrêter un scénario en cliquant sur un lien ou un bouton ou pour démarrer et arrêter un scénario automatiquement lors du survol d’un objet (lien, image, etc.). L’action Jouer le scénario est automatiquement associée à la balise body avec l’événement onLoad lorsque vous sélectionnez l’option Lecture auto dans le panneau Scénarios.
[ Comment ça marche ]

• Atteindre l’image du scenario

Cette action amène la « tête de lecture » sur l’image indiquée. Vous pouvez l’utiliser dans le canal Comportements du panneau Scénarios pour reproduire en boucle certaines parties du scénario, pour créer un lien ou un bouton Rembobiner ou pour permettre à l’utilisateur de passer directement à d’autres parties de l’animation.
[ Comment ça marche ]

Texte

• Texte d’un champ texte

Cette action remplace le contenu d’un champ texte de formulaire par le contenu indiqué.

• Texte de la barre d’état

L’action Texte de la barre d’état affiche un message dans la barre d’état, dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser cette action pour décrire la destination d’un lien dans la barre d’état, en remplacement de l’affichage de l’URL associée. Pour voir un exemple de message d’état, amenez la souris sur n’importe quel bouton de navigation dans les pages de l’aide de Dreamweaver.(*)

• Texte d’un cadre

L’action Texte d’un cadre vous permet de remplacer de façon dynamique le contenu et le formatage d’un cadre par le contenu indiqué. Ce contenu peut être n’importe quel texte valide en HTML. Cette action permet de modifier les informations de façon dynamique.
Bien que l’action Texte d’un cadre permette de remplacer le formatage d’un cadre, vous pouvez activer l’option Préserver Couleur d’arrière-plan pour conserver les attributs actuels pour l’arrière-plan de la page et la couleur du texte.(*)

- Pour créer un jeu de cadres :

Choisissez Modifier > Jeu de cadres > Fractionner le cadre à gauche, à droite, vers le haut ou vers le bas.

• Texte d’un calque

L’action Texte du calque remplace le contenu et le formatage d’un calque existant sur la page par le contenu indiqué. Ce contenu peut comporter n’importe quel code source valide en HTML.

L’action Texte du calque remplace le contenu et le formatage d’un calque existant par le contenu indiqué, mais conserve les attributs du calque, y compris la couleur. Vous pouvez formater le contenu en incorporant des balises HTML dans le champ Nouveau HTML de la boîte de dialogue Texte du calque.(*) [ Comment ça marche ]

(*)Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions, pour peu qu’ils soient valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades {}. Pour afficher une accolade, faites-la précéder du caractère d’échappement, une barre oblique inversée \{.

Valider le formulaire

Cette action teste le contenu des champs texte indiqués pour vérifier que l’utilisateur a tapé le type de données correct. Associez cette action à des champs individuels de formulaire à l’aide de l’événement onBlur pour valider ces champs au fur et à mesure que l’utilisateur remplit le formulaire. Vous pouvez aussi associer cette action au formulaire à l’aide de l’événement onSubmit, pour évaluer divers champs en même temps lorsque l’utilisateur clique sur le bouton d’envoi. Associez cette action au formulaire pour éviter de l’envoyer au serveur si l’un des champs contient des données non valides.
[ Comment ça marche ]

Vérifier le navigateur

Utilisez cette action pour aiguiller les visiteurs vers des pages différentes selon la marque et la version de leur navigateur. Par exemple, vous pouvez aiguiller les utilisateurs de Netscape Navigator 4.0 ou version ultérieure sur une page, les utilisateurs de Internet Explorer 4.0 ou version ultérieure sur une autre, et laisser sur la page en cours les utilisateurs d’un autre type de navigateur.
Il est utile d’associer ce comportement à la balise BODY d’une page qui est compatible avec presque tous les navigateurs (et qui n’utilise pas d’autre JavaScript) ; ainsi, les visiteurs de la page qui ont désactivé JavaScript verront toujours quelque chose.

Une autre option consiste à associer ce comportement à un lien nul (sans destination, balise A) pour que l’action détermine sur quelle page le lien renvoie, selon l’éditeur et la version du navigateur du visiteur.
[ Comment ça marche ]

Vérifier le Plug-in

Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon que le plug-in spécifié est installé ou non. Par exemple, vous pouvez envoyer les utilisateurs sur une page s’ils disposent de Shockwave, et sur une autre dans le cas contraire.
Remarque : Il est impossible de détecter des plug-ins spécifiques dans Microsoft Internet Explorer (IE) à l’aide de JavaScript Toutefois, si vous sélectionnez les plug-ins Flash ou Director, le code VBScript approprié sera automatiquement ajouté à votre page pour les détecter dans IE sous Windows.
[ Comment ça marche ]

Format PDF l l afficher une version imprimable de cet article Imprimer cet article