Guide d'utilisation Annuler

Application de comportements JavaScript intégrés

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

Utilisez cette rubrique pour savoir comment appliquer des comportements JavaScript intégrés dans Adobe Dreamweaver.

Utilisation des comportements intégrés

Les comportements inclus sous Dreamweaver ont été conçus pour fonctionner sur les navigateurs modernes. Les comportements échouent dans les navigateurs plus anciens, sans que l’utilisateur en soit informé.

Remarque :

Les actions de Dreamweaver ont été rédigées avec soin pour fonctionner avec le plus grand nombre de navigateurs possible. Si vous supprimez manuellement le code d’une action de Dreamweaver ou si vous le remplacez par votre propre code, vous risquerez de perdre la compatibilité inter-navigateurs.

Bien que les actions de Dreamweaver aient été rédigées pour accroitre la compatibilité inter-navigateurs, certains navigateurs ne prennent pas du tout en charge JavaScript et de nombreuses personnes désactivent JavaScript sur leur navigateur lorsqu’ils explorent la Toile. Pour optimiser les résultats inter-plates-formes, fournissez d’autres interfaces contenues dans des balises <noscript> afin que votre site reste accessible aux personnes qui n’utilisent pas JavaScript.

Application du comportement Appel JavaScript

Le comportement Appel JavaScript exécute une fonction ou une ligne de code JavaScript personnalisée lorsqu’un événement se produit (vous pouvez rédiger le script vous-même, ou utiliser le code fourni gratuitement dans le cadre de plusieurs bibliothèques de JavaScript sur Internet).

  1. Sélectionnez un objet et choisissez Appel JavaScript dans le menu Ajouter un comportement du panneau Comportements.
  2. Tapez le code JavaScript à exécuter ou le nom de la fonction.

    Par exemple, pour créer un bouton Retour, vous pouvez saisir if (history.length > 0)\{history.back()\}. Si vous avez encapsulé votre code dans une fonction, indiquez simplement le nom de la fonction (par exemple, hGoBack()).

  3. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Changer la propriété

Utilisez le comportement Changer la propriété pour modifier la valeur d’une des propriétés d’un objet (par exemple, la couleur d’arrière-plan d’une balise div ou l’action d’un formulaire).

Remarque :

N’utilisez ce comportement que si vous êtes expert en HTML et en JavaScript.

  1. Sélectionnez un objet et choisissez Changer la propriété dans le menu Ajouter un comportement du panneau Comportements.
  2. Dans le menu Type d’élément, sélectionnez un type d’élément pour afficher tous les éléments nommés de ce type.
  3. Sélectionnez un élément dans le menu ID d’élément.
  4. Choisissez une propriété dans le menu Propriété ou tapez le nom de la propriété dans la zone de texte.
  5. Entrez la nouvelle valeur pour la nouvelle propriété dans la zone Nouvelle valeur.
  6. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Vérifier le plug-in

Utilisez le comportement Vérifier le plug-in pour envoyer les visiteurs sur des pages différentes selon que le plug-in spécifié est installé ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s’ils possèdent 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 Internet Explorer sous Windows. Il est impossible de détecter les plug-ins dans Internet Explorer sur Mac OS.

  1. Sélectionnez un objet et choisissez Vérifier le plug-in dans le menu Ajouter un comportement du panneau Comportements.
  2. Sélectionnez un plug-in dans le menu Plug-in, ou cliquez sur Entrée et tapez le nom exact du plug-in dans la zone de texte adjacente.

    Vous devez utiliser le nom exact du plug-in, tel qu’il apparaît en gras sur la page À propos des plug-ins dans Netscape Navigator (Dans Windows, choisissez la commande Aide > À propos des plug-ins dans le navigateur. Dans Mac OS, choisissez À propos des plug-ins dans le menu Pomme).

  3. Dans la zone de texte Si trouvé, aller à l’URL, spécifiez l’URL destinée aux utilisateurs qui disposent du plug-in.

    Si vous indiquez une URL distante, vous devez faire précéder l’adresse www du préfixe http://. Si vous ne renseignez pas la zone, les visiteurs resteront dans la même page.

  4. Dans la zone de texte Sinon, aller à l’URL, indiquez une autre URL pour les visiteurs qui ne disposent pas du plug-in. Si vous ne renseignez pas la zone, les visiteurs resteront dans la même page.
  5. Spécifiez la procédure à suivre si la détection de plug-in n’est pas possible. Par défaut, lorsque la détection est impossible, l’utilisateur est envoyé à l’URL indiquée dans la zone de texte Sinon. Pour que l’utilisateur soit envoyé vers la première URL (Si trouvé), sélectionnez l’option Toujours aller à la première URL si la détection n’est pas possible. Lorsqu’elle est sélectionnée, cette option signifie « que l’utilisateur possède a priori le plug-in, sauf si le navigateur indique explicitement que ce n’est pas le cas ». En général, activez cette option si le contenu du plug-in est un élément essentiel de votre page ; dans le cas contraire, laissez-la désactivée.
    Remarque :

    Cette option ne concerne qu’Internet Explorer ; Netscape Navigator détecte toujours les plug-ins.

  6. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Tirer l’élément PA

Le comportement Tirer l’élément PA permet au visiteur de faire glisser un élément à positionnement absolu. Utilisez ce comportement 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 l’élément PA (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l’utilisateur doit faire glisser l’élément PA, 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 l’élément PA touche la cible, etc.

Etant donné que le comportement Tirer l’élément PA doit être appelé avant que le visiteur puisse faire glisser l’élément PA, vous devez l’associer à l’objet body (avec l’événement onLoad).

  1. Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un élément PA du panneau Insertion, puis dessinez un div PA dans la vue Création de la fenêtre de document.
  2. Cliquez sur <body> dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document.
  3. Choisissez Tirer l’élément PA dans le menu Ajouter un comportement du panneau Comportements.

    Si l’option Tirer l’élément PA n’est pas disponible, cela signifie probablement qu’un élément PA est sélectionné.

  4. Dans le menu déroulant Elément PA, sélectionnez l’élément PA.
  5. Sélectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement.

    Les mouvements sans contrainte sont adaptés aux puzzles et aux autres jeux à base de glisser-déplacer. Pour les contrôles de déplacement et les objets mobiles (tiroirs, rideaux et stores), choisissez un mouvement contraint.

  6. Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels) dans les zones de texte Haut, Bas, Gauche et Droite.

    Ces valeurs sont relatives à la position de départ de l’élément PA. Pour restreindre les déplacements à l’intérieur d’une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas.

  7. Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les zones de texte Gauche et Haut.

    La cible de dépôt est le point sur lequel vous voulez que l’utilisateur dépose l’élément PA. Un élément PA est considéré comme ayant atteint la cible de dépôt lorsque ses coordonnées d’origine (en haut à gauche) correspondent aux valeurs indiquées dans les zones de texte Gauche et Haut. Ces coordonnées sont relatives à l’angle supérieur gauche de la fenêtre du navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec les coordonnées actuelles de l’élément PA.

  8. Entrez une valeur (exprimée en pixels) dans la zone de texte Aligner si dans pour déterminer la distance minimale à laquelle le visiteur doit approcher de la cible pour que l’élément PA se place automatiquement sur celle-ci.

    Les valeurs importantes permettent à l’utilisateur de trouver plus facilement la cible de dépôt.

  9. Pour des puzzles simples et des défilements d’images, vous pouvez vous en tenir là. Pour définir la poignée de déplacement de l’élément PA, suivre le mouvement de l’élément PA pendant qu’il est déplacé et déclencher une action lorsqu’il est déposé, cliquez sur l’onglet Avancé.
  10. Pour spécifier que l’utilisateur doit cliquer dans une zone particulière de l’élément PA pour pouvoir le déplacer, sélectionnez Zone dans l’élément dans le menu Poignée de déplacement, puis indiquez les coordonnées de l’origine (angle supérieur gauche) de la poignée de déplacement, ainsi que la largeur et la hauteur de celle-ci.

    Cette option est utile lorsque l’image insérée à l’intérieur de l’élément PA contient un symbole de déplacement, par exemple une barre de titre ou une poignée de tiroir. N’activez pas cette option si vous voulez que l’utilisateur soit libre de cliquer n’importe où dans l’élément PA pour le déplacer.

  11. Choisissez, parmi les options de la zone En déplaçant, celles que vous désirez utiliser :
    • Activez l’option Placer l’élément au premier plan si l’élément PA doit être amené au niveau le plus haut de l’ordre de superposition lors de son déplacement. Si vous activez cette option, utilisez le menu déroulant qui apparaît pour indiquer si l’élément PA doit être laissé au niveau de visibilité le plus élevé ou si sa position d’origine dans l’ordre de superposition doit être rétablie.

    • Tapez un code JavaScript ou un nom de fonction (par exemple, monitorAPelement()) dans la zone de texte Appel JavaScript pour que ce code ou cette fonction soit exécuté en boucle pendant le déplacement de l’élément PA. Par exemple, vous pouvez écrire une fonction pour surveiller les coordonnées de l’élément PA et afficher des indications, telles que « Tu brûles » ou « Tu t’éloignes de la cible », dans une zone de texte.

  12. Entrez un code JavaScript ou un nom de fonction (par exemple, evaluateAPelementPos()) dans la deuxième zone de texte Appel JavaScript si vous souhaiter exécuter le code ou la fonction lorsque l’élément PA est déposé. Activez l’option Uniquement si aligné si le code JavaScript indiqué ne doit être exécuté que si l’élément PA a atteint la cible de dépôt.
  13. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Collecte d’informations sur l’élément PA déplaçable

Lorsque vous associez le comportement Tirer l’élément PA à un objet, Dreamweaver insère la fonction MM_dragLayer() dans la section head de votre document. (La fonction conserve l’ancienne convention d’attribution de nom pour les éléments PA (anciennement, calques) de façon à ce que les calques créés dans les versions précédentes de Dreamweaver restent modifiables.) Cette fonction enregistre l’élément PA comme déplaçable et définit trois propriétés pour chaque élément PA déplaçable, MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions JavaScript pour déterminer les positions horizontale et verticale de l’élément PA et s’il a atteint la cible de dépôt.

Remarque :

Les informations fournies ici sont destinées uniquement aux programmeurs JavaScript expérimentés.

Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la position verticale actuelle de l’élément PA) dans un champ de formulaire appelé curPosField. Les champs de formulaires servent à afficher des informations pouvant être continuellement mises à jour, parce qu’ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu après le chargement de la page.

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

Au lieu d’afficher la valeur des propriétés MM_UPDOWN ou MM_LEFTRIGHT dans un champ de formulaire, vous pouvez utiliser ces valeurs de différentes manières. Par exemple, vous pouvez écrire une fonction qui affiche un message dans ce champ selon la distance qui reste à parcourir jusqu’à la cible, ou appeler une autre fonction pour afficher ou masquer un élément PA selon la valeur de cette distance.

Il est particulièrement utile de tester la propriété MM_SNAPPED lorsque vous disposez, sur une page, de plusieurs éléments PA qui doivent tous atteindre leur cible pour que l’utilisateur puisse passer à la page ou à la tâche suivante. Par exemple, vous pouvez écrire une fonction qui compte le nombre d’éléments PA ayant la valeur MM_SNAPPED définie sur true et l’appeler chaque fois qu’un élément PA est déposé. Lorsque le nombre d’éléments PA arrivés sur leur cible atteint le nombre désiré, vous pouvez envoyer l’utilisateur à la page suivante ou afficher un message de félicitations.

Application du comportement Atteindre l’URL

Le comportement Atteindre l’URL ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Ce comportement est utile pour modifier d’un seul clic le contenu de deux cadres ou plus

  1. Sélectionnez un objet et choisissez Atteindre l’URL dans le menu Ajouter un comportement du panneau Comportements.
  2. Choisissez une destination pour l’URL dans la liste Ouvrir dans.

    La liste Ouvrir dans énumère automatiquement les noms de tous les cadres qui se trouvent dans le jeu de cadres actuel, ainsi que la fenêtre principale. S’il n’y a pas de cadres, cette dernière est la seule option.

    Remarque :

    Ne donnez pas à vos cadres les noms top, blank, self ou parent, car cela pourrait produire des résultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec les mots réservés utilisés dans le champ Cible.

  3. Cliquez sur Parcourir pour sélectionner un document à ouvrir ou tapez le nom et le chemin d’accès au fichier recherché dans la zone de texte URL.
  4. Répétez les étapes 2 et 3 pour ouvrir d’autres documents dans d’autres cadres.
  5. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Menu de reroutage

Lorsque vous créez un menu de reroutage en exécutant la procédure suivante : Insertion > Formulaire > Menu de reroutage, Dreamweaver crée un objet de menu et lui associe le comportement Menu de reroutage (ou Menu de reroutage Aller). En principe, il n’est pas nécessaire d’associer manuellement le comportement Menu de reroutage à un objet.

Vous pouvez modifier un menu de reroutage existant de deux manières différentes :

  • Vous pouvez modifier et réorganiser les éléments du menu, modifier les fichiers à rerouter et la fenêtre dans laquelle s’ouvrent ces fichiers, en double-cliquant sur un comportement Menu de reroutage existant dans le panneau Comportements.

  • Vous pouvez modifier les éléments du menu comme vous modifieriez les éléments de n’importe quel menu, en sélectionnant le menu et en utilisant le bouton Valeurs de la liste dans l’inspecteur Propriétés.

  1. Créez un objet Menu de reroutage s’il n’en existe pas déjà dans votre document.
  2. Sélectionnez l’objet et choisissez Menu de reroutage dans le menu Ajouter un comportement du panneau Comportements.
  3. Effectuez les modifications souhaitées dans la boîte de dialogue Menu de reroutage, puis cliquez sur OK.

Application du comportement Menu de reroutage Aller

Le comportement Menu de reroutage Aller est étroitement associé à l’action Menu de reroutage ; il vous permet d’associer un bouton Aller avec un menu de reroutage (pour utiliser ce comportement, vous devez créer au préalable un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien actuellement sélectionné dans le menu de reroutage. En principe, il n’est pas indispensable d’ajouter un bouton Aller à un menu de reroutage : le choix d’un élément de ce dernier provoque en général le chargement d’une nouvelle URL sans aucune intervention supplémentaire. Toutefois, si l’utilisateur choisit l’élément qui est déjà sélectionné dans le menu de reroutage, le reroutage ne se produira pas. En général cela n’a pas d’importance, mais si le menu de reroutage apparaît dans une image et que les éléments du menu assurent la liaison avec des pages dans d’autres images, un bouton Aller est souvent utile, pour permettre aux utilisateurs de choisir à nouveau un élément déjà sélectionné dans le menu de reroutage.

Remarque :

Lorsque vous utilisez un bouton Aller associé à un menu de reroutage, le bouton Aller devient le seul mécanisme permettant à l’utilisateur d’accéder à l’URL associée à la sélection dans le menu. La sélection d’un élément de menu dans le menu de reroutage n’a plus pour effet de rediriger l’utilisateur automatiquement vers une autre page ou un autre cadre.

  1. Sélectionnez un objet qui sera utilisé comme bouton Aller (en général une image) et choisissez Menu de reroutage Aller dans le menu Ajouter un comportement du panneau Comportements.
  2. Dans le menu Choisissez un menu de reroutage, sélectionnez un menu que le bouton Aller activera, puis cliquez sur OK.

Application du comportement Ouvrir la fenêtre Navigateur

Utilisez l’action Ouvrir la fenêtre Navigateur pour ouvrir une page 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 Par exemple, vous pouvez utiliser ce comportement pour ouvrir une image plus grande dans une fenêtre individuelle lorsque l’utilisateur clique sur l’image réduite ; avec ce comportement, vous pouvez adapter la fenêtre à la taille exacte de l’image.

Si vous ne spécifiez aucun attribut pour la fenêtre, elle s’ouvrira avec la taille et les attributs de la fenêtre à partir de laquelle elle a été lancée. Choisir des attributs pour la fenêtre désactive automatiquement tous ceux qui ne sont pas explicitement activés. Par exemple, si vous ne définissez aucun attribut pour la fenêtre, elle peut s’ouvrir en 1024 x 768 pixels et comporter une barre de navigation (affichant les boutons Précédent, Suivant, Démarrage et Actualiser), une barre d’adresse (indiquant l’URL), une barre d’état (en bas, affichant les messages d’état) et une barre de menus (affichant les menus Fichier, Édition, Affichage et d’autres menus). Si vous définissez explicitement une largeur de 640 et une hauteur de 480 pixels, sans aucun autre attribut, la fenêtre s’ouvrira en 640 x 480 pixels, sans aucune barre d’outils.

  1. Sélectionnez un objet et choisissez Ouvrir la fenêtre Navigateur dans le menu Ajouter un comportement du panneau Comportements.
  2. Tapez l’URL à afficher ou cliquez sur Parcourir pour sélectionner un fichier.
  3. Définissez les options pour la largeur et la hauteur de la fenêtre (en pixels) et pour l’incorporation de différentes barres d’outils, barres de défilement, poignées de redimensionnement, etc. Donnez un nom à la fenêtre (n’utilisez pas d’espaces ni de caractères spéciaux) si vous souhaitez qu’elle soit la cible de liens ou qu’elle soit contrôlée en JavaScript.
  4. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Message contextuel

Le comportement Message contextuel 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 ce comportement 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 (\{).

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.
Remarque :

Le navigateur contrôle l’aspect de l’alerte. Si vous désirez avoir davantage de contrôle sur l’apparence, pensez à utiliser le comportement Ouvrir la fenêtre Navigateur.

  1. Sélectionnez un objet et choisissez Message contextuel dans le menu Ajouter un comportement du panneau Comportements.
  2. Tapez votre message dans la zone de texte prévue à cet effet.
  3. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Précharger les images

Le comportement Précharger les images raccourcit le délai d’affichage en mettant en mémoire cache les images qui ne sont pas visibles lors du premier affichage de la page (par exemple, les images qui vont être remplacées par des comportements ou des scripts).

Remarque :

Le comportement Permuter une image précharge automatiquement toutes les images sélectionnées lorsque vous choisissez l’option Précharger les images dans la boîte de dialogue Permuter une image ; il n’est donc pas nécessaire d’ajouter manuellement l’action Précharger les images lorsque vous utilisez l’action Permuter une image.

  1. Sélectionnez un objet et choisissez Précharger les images dans le menu Ajouter un comportement du panneau Comportements.
  2. Cliquez sur Parcourir pour sélectionner un fichier d’image ou tapez le chemin d’accès et le nom du fichier d’une image dans la zone de texte Fichier source des images.
  3. Cliquez sur le bouton Plus (+) en haut de la boîte de dialogue pour ajouter l’image à la liste Précharger les images.
  4. Répétez les étapes 2 et 3 pour les autres images que vous désirez précharger dans la page en cours.
  5. Pour supprimer une image de la liste Précharger les images, sélectionnez-la, puis cliquez sur le bouton Moins (–).
  6. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Texte d’un cadre

Le comportement Texte d’un cadre permet de définir de façon dynamique le texte d’un cadre, en remplaçant le contenu et le formatage d’un cadre par le contenu indiqué. Ce contenu peut être n’importe quel code source HTML valide. Ce comportement permet d’afficher les informations de façon dynamique.

Bien que le comportement 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.

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 (\{).

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.
  1. Sélectionnez un objet et choisissez Texte > Texte du cadre dans le menu Ajouter un comportement du panneau Comportements.
  2. Dans la boîte de dialogue qui s’affiche, sélectionnez le cadre cible dans le menu Cadre.
  3. Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section body du cadre cible.
  4. Entrez un message dans la zone de texte Nouveau HTML.
  5. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Texte du conteneur

Le comportement Texte du conteneur remplace le contenu et le formatage d’un contenu existant (c’est-à-dire, tout élément pouvant contenir du texte ou d’autres éléments) d’une page par le contenu indiqué. Ce contenu peut être n’importe quel code source valide en HTML.

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 (\{).

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.
  1. Sélectionnez un objet et choisissez Texte > Texte du conteneur dans le menu Ajouter un comportement du panneau Comportements.
  2. Dans la boîte de dialogue qui s’affiche, sélectionnez l’élément cible dans le menu Conteneur.
  3. Entrez le nouveau texte ou le nouveau code HTML dans la zone de texte Nouveau HTML.
  4. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Définir le texte de la barre d’état

Le comportement Définir le 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 ce comportement pour décrire la destination d’un lien dans la barre d’état, au lieu d’afficher l’URL associée Cependant, il arrive fréquemment que les utilisateurs ne tiennent pas compte des messages de la barre d’état (certains navigateurs ne prennent pas en charge la définition du texte de la barre d’état). Si votre message est important, pensez à l’afficher sous la forme d’un message contextuel ou comme texte d’un élément PA.

Remarque :

Si vous utilisez le comportement Définir le texte de la barre d’état sous Dreamweaver, le texte de la barre d’état du navigateur ne va pas nécessairement changer du fait que certains navigateurs nécessitent des réglages spéciaux lors de la modification du texte de la barre d’état. Par exemple, dans Firefox, vous devez modifier une option Avancée qui permet à JavaScript modifier le texte de la barre d’état. Pour plus de détails, reportez-vous à la documentation de votre navigateur.

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 (\{).

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.
  1. Sélectionnez un objet et choisissez Texte > Texte de la barre d’état dans le menu Ajouter un comportement du panneau Comportements.
  2. Dans la boîte de dialogue Définir le texte de la barre d’état, tapez un message dans la zone de texte Message.

    Utilisez un message concis. Le navigateur tronquera le message s’il est trop long pour la barre d’état.

  3. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Texte d’un champ de texte

Le comportement Texte d’un champ de texte remplace le contenu d’un champ de texte de formulaire par le contenu indiqué.

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 (\{).

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.

Création d’un champ de texte nommé

  1. Sélectionnez Insertion > Formulaire > Champ de texte.

    Si Dreamweaver vous invite à ajouter une balise de formulaire, cliquez sur Oui.

  2. Dans l’inspecteur Propriétés, tapez le nom du champ de texte. Veillez à utiliser un nom unique dans cette page (n’utilisez pas le même nom pour plusieurs éléments appartenant à la même page, même s’ils se trouvent dans des formulaires différents).

Application de l’action Texte d’un champ de texte

  1. Sélectionnez un champ de texte et choisissez Texte > Texte d’un champ de texte dans le menu Ajouter un comportement du panneau Comportements.
  2. Sélectionnez le champ de texte cible dans le menu Champ de texte et entrez votre nouveau texte.
  3. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Afficher-Masquer les éléments

Le comportement Afficher-Masquer les éléments affiche, masque ou rétablit la visibilité par défaut d’un ou plusieurs éléments de page. Ce comportement permet d’afficher des informations en fonction des interactions de l’utilisateur avec la page. Par exemple, lorsque le pointeur passe sur l’image d’une plante, vous pouvez afficher un élément de page comportant des détails sur le climat idéal de la plante, l’ensoleillement dont elle a besoin, sa taille adulte, etc. Le comportement ne fait qu’afficher ou masquer l’élément pertinent, il ne supprime pas réellement l’élément du flux de la page lorsqu’il est masqué.

  1. Sélectionnez un objet et choisissez Afficher-Masquer les éléments dans le menu Ajouter un comportement du panneau Comportements.

    Si l’option Afficher-Masquer les éléments n’est pas disponible, cela signifie probablement qu’un élément PA est sélectionné. Etant donné que les éléments PA n’acceptent pas les événements dans la version 4.0 des deux navigateurs, vous devez choisir un objet différent, tel que la balise <body> ou un lien (<a>).

  2. Dans la liste Eléments, sélectionnez l’élément que vous souhaitez afficher ou masquer, puis cliquez sur Afficher, Masquer ou Restaurer (cette dernière option restaure la visibilité par défaut).
  3. Répétez l’étape 2 pour les autres éléments dont vous voulez modifier la visibilité. Vous pouvez modifier la visibilité de plusieurs éléments avec un seul comportement.
  4. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Ce comportement a été abandonné depuis Dreamweaver CS5.

Application du comportement Permuter une image

Cette action remplace une image par une autre, en modifiant l’attribut src de la balise <img>. Utilisez ce comportement pour créer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois) L’insertion d’une image survolée ajoute automatiquement à votre page un comportement Permuter une image.

Remarque :

État donné que l’attribut src est affecté par ce comportement, l’image de substitution doit en principe avoir les mêmes dimensions (hauteur et largeur) que l’original. Faute de quoi, l’image intervertie apparaîtrait déformée (compactée ou élargie) de façon à s’adapter aux dimensions de l’image d’origine.

Il existe également le comportement Restaurer l’image intervertie qui restaure la dernière interversion d’images à son état antérieur. Il est automatiquement ajouté lorsque vous associez le comportement Permuter une image à un objet ; en principe, si vous avez laissé cette option activée en associant le comportement Permuter une image, vous n’avez pas besoin de l’utiliser manuellement.

  1. Choisissez Insertion > Image ou cliquez sur le bouton Image du panneau Insertion pour insérer une image.
  2. Dans l’inspecteur Propriétés, indiquez un nom pour l’image dans la zone de texte située à l’extrême gauche.

    Il n’est pas nécessaire de nommer les images ; elles sont nommées automatiquement lorsque vous associez le comportement à un objet. Toutefois, il vous sera plus facile de distinguer les images proposées dans la boîte de dialogue Permuter une image si vous avez vous-même attribué un nom à ces images.

  3. Répétez les étapes 1 et 2 si vous souhaitez insérer des images supplémentaires.
  4. Sélectionnez un objet (en général, l’image que vous voulez remplacer) et choisissez l’option Permuter une image dans le menu Ajouter un comportement du panneau Comportements.
  5. Sélectionnez l’image dont vous voulez modifier la source dans la liste Images.
  6. Cliquez sur Parcourir pour sélectionner le nouveau fichier d’image ou indiquez son chemin d’accès et son nom de fichier dans la zone de texte Définir la source à.
  7. Répétez les étapes 5 et 6 si vous désirez ajouter d’autres images à modifier. Utilisez la même action Permuter l’image pour toutes les images que vous voulez modifier simultanément ; dans le cas contraire, l’action correspondante Restaurer l’image intervertie ne les restaurerait pas toutes.
  8. Sélectionnez l’option Précharger les images pour mettre en mémoire cache les nouvelles images au moment du chargement de la page.

    Cela évite le délai de téléchargement des images lorsqu’un événement déclenche leur apparition.

  9. Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Valider le formulaire

Le comportement Valider le formulaire teste le contenu des champs de texte indiqués pour vérifier que l’utilisateur a entré le type de données correct. Associez ce comportement à des champs de texte individuels à l’aide de l’événement onBlur pour valider ces champs au fur et à mesure que l’utilisateur remplit le formulaire ou associez-le au formulaire à l’aide de l’événement onSubmit pour évaluer divers champs simultanément lorsque l’utilisateur clique sur le bouton d’envoi. L’association de ce comportement à un formulaire empêche l’envoi de formulaires contenant des données non valides.

  1. Pour insérer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire du panneau Insertion.
  2. Pour insérer un champ de texte, choisissez Insertion > Formulaire > Champ de texte ou cliquez sur le bouton Champ de texte du panneau Insertion.

    Répétez cette étape pour insérer plusieurs champs de texte.

  3. Choisissez une méthode de validation :
    • Pour valider les champs individuellement au fur et à mesure que l’utilisateur remplit le formulaire, sélectionnez un champ de texte et choisissez Fenêtre > Comportements.

    • Pour valider plusieurs champs lorsque l’utilisateur envoie le formulaire, cliquez sur la balise <form> dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document, puis choisissez Fenêtre > Comportements.

  4. Sélectionnez Valider le formulaire dans le menu Ajouter un comportement.
  5. Effectuez l’une des opérations suivantes :
    • Si vous validez des champs individuellement, sélectionnez dans la liste Champs le même champ que celui que vous avez sélectionné dans la fenêtre de document.

    • Si vous validez plusieurs champs à la fois, sélectionnez un champ de texte dans la liste Champs.

  6. Activez l’option Obligatoire si le champ doit obligatoirement contenir des données.
  7. Sélectionnez l’une des options d’acceptation suivantes :

    Tout

    Vérifie qu’un champ obligatoire contient des données ; ces dernières peuvent être de n’importe quel type. 

    Adresse électronique

    Vérifie que le champ contient un symbole @.

    Nombre

    Vérifie que le champ contient uniquement des valeurs numériques.

    Nombre de

    Vérifie que le champ contient une valeur numérique comprise dans la plage indiquée.

  8. Si vous validez plusieurs champs, répétez les étapes 6 et 7 pour tout champ supplémentaire à valider.
  9. Cliquez sur OK.

    Si vous validez plusieurs champs lorsque l’utilisateur envoie le formulaire, l’événement onSubmit apparaît automatiquement dans le menu déroulant Evénements.

  10. Si vous validez des champs individuellement, vérifiez que l’événement par défaut est bien onBlur ou onChange. Si ce n’est pas le cas, sélectionnez l’un de ces événements.

    Ces deux événements déclenchent le comportement Valider le formulaire dès que l’utilisateur sort du champ concerné. La différence entre ces deux événements est que onBlur est toujours déclenché, que l’utilisateur ait saisi ou non du texte dans le champ, alors que onChange n’est déclenché que si l’utilisateur a modifié le contenu du champ. L’événement onBlur est préférable si le champ est obligatoire.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?