- Guide de l’utilisateur de Dreamweaver
- Introduction
- Dreamweaver et Creative Cloud
- Espaces de travail et affichages Dreamweaver
- Configuration de sites
- À propos des sites Dreamweaver
- Création d’une version locale de votre site
- Connexion à un serveur de publication
- Configuration d’un serveur d’évaluation
- Importation et exportation des paramètres d’un site Dreamweaver
- Importation de sites web d’un serveur distant vers la racine de votre site local
- Fonctions d’accessibilité dans Dreamweaver
- Paramètres avancés
- Définition des préférences de site pour le transfert de fichiers
- Indication des paramètres du serveur proxy dans Dreamweaver
- Synchronisation des paramètres de Dreamweaver avec Creative Cloud
- Utilisation de Git dans Dreamweaver
- Gestion des fichiers
- Création et ouverture de fichiers
- Gestion des fichiers et des dossiers
- Acquisition et placement de fichiers depuis ou vers votre serveur
- Archivage et extraction de fichiers
- Synchronisation de fichiers
- Comparaison de fichiers pour analyse de leurs différences
- Masquage de fichiers et de dossiers dans votre site Dreamweaver
- Activation des notes de conception pour les sites Dreamweaver
- Prévention de l’exploitation potentielle de Gatekeeper
- Mise en page et design
- Utilisation d’assistances visuelles pour la mise en forme
- À propos de l’utilisation de CSS pour mise en forme de votre page
- Création de sites web en responsive design avec Bootstrap
- Création et utilisation des requêtes de multimédia dans Dreamweaver
- Présentation de contenus dans des tableaux
- Couleurs
- Design réactif à l’aide de mises en forme à grille fluide
- Extract dans Dreamweaver
- CSS
- Description des feuilles de style en cascade
- Mise en forme de pages avec CSS Designer
- Utilisation de préprocesseurs CSS dans Dreamweaver
- Comment définir les préférences de Style CSS dans Dreamweaver
- Déplacement des règles CSS dans Dreamweaver
- Conversion de code CSS intégré en règle CSS dans Dreamweaver
- Utilisation de balises div
- Application de dégradés à l’arrière-plan
- Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
- Formatage du code
- Contenu de page et actifs
- Définition des propriétés de page
- Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
- Utilisation du texte
- Recherche et remplacement de texte, de balises et d’attributs
- Panneau DOM
- Modification en mode En direct
- Le codage de documents dans Dreamweaver
- Sélection et affichage d’éléments dans la fenêtre de document
- Définition des propriétés de texte dans l’inspecteur Propriétés
- Vérification de l’orthographe d’une page web
- Utilisation de règles horizontales dans Dreamweaver
- Ajout et modification de combinaisons de polices dans Dreamweaver
- Utilisation d’actifs
- Insertion et mise à jour des dates dans Dreamweaver
- Création et gestion des actifs favoris dans Dreamweaver
- Insertion et modification d’images dans Dreamweaver
- Ajout d’objets multimédias
- Ajout de vidéos dans Dreamweaver
- Insertion de vidéo HTML5
- Insertion de fichiers SWF
- Ajout d’effets audio
- Insertion de fichiers audio HTML5 dans Dreamweaver
- Utilisation d’éléments de bibliothèque
- Utilisation de texte arabe et hébreu dans Dreamweaver
- Liens et navigation
- Effets et widgets jQuery
- Codage de sites web
- À propos du codage dans Dreamweaver
- Environnement de codage dans Dreamweaver
- Définition des préférences de codage
- Personnalisation de la coloration du code
- Rédaction et modification de code
- Conseils et remplissage de code
- Réduction et développement de code
- Réutilisation de code à l’aide de fragments
- Analyse linting de code
- Optimisation du code
- Modification de code en mode Création.
- Utilisation de contenu d’en-tête pour les pages
- Insertion d’inclusions côté serveur dans Dreamweaver
- Utilisation des bibliothèques de balises dans Dreamweaver
- Importation de balises personnalisées dans Dreamweaver
- Utilisation de comportements JavaScript (instructions générales)
- Application de comportements JavaScript intégrés
- À propos de XML et de XSLT
- Exécution de transformations XSL côté serveur dans Dreamweaver
- Exécution de transformations XSL côté client dans Dreamweaver
- Ajout d’entités de caractère pour XSLT dans Dreamweaver
- Formatage du code
- Flux de travaux inter-produit
- Installation et utilisation des extensions pour Dreamweaver
- Mises à jour intégrées dans Dreamweaver
- Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
- Utilisation de Fireworks et Dreamweaver
- Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
- Intégration entre Dreamweaver et Business Catalyst
- Création de campagnes de messagerie personnalisées
- Modèles
- À propos des modèles Dreamweaver
- Reconnaissance des modèles et des documents basés sur un modèle
- Création d’un modèle Dreamweaver
- Création de régions modifiables dans des modèles
- Création de régions et de tables modifiables dans Dreamweaver
- Utilisation de régions facultatives dans les modèles
- Définition d’attributs de balises modifiables dans Dreamweaver
- Comment créer des modèles imbriqués dans Dreamweaver
- Modification, mise à jour et suppression de modèles
- Exportation et importation de contenus xml dans Dreamweaver
- Application ou suppression d’un modèle depuis un document existant
- Modification de contenu dans les modèles de Dreamweaver
- Règles de syntaxe pour les balises de modèle dans Dreamweaver
- Définition des préférences de surbrillance pour des régions de modèle
- Avantages de l’utilisation de modèles dans Dreamweaver
- Terminaux mobiles et écrans multiples
- Sites dynamiques, pages et formulaires web
- En savoir plus sur les applications web
- Configuration de l’ordinateur pour le développement d’applications
- Résolution des problèmes de connexion aux bases de données
- Suppression des scripts de connexion dans Dreamweaver
- Conception de pages dynamiques
- Présentation des sources de contenu dynamique
- Définition de sources de contenu dynamique
- Ajout de contenus dynamiques aux pages
- Changement des contenus dynamiques dans Dreamweaver
- Affichage d’enregistrements d’une base de données
- Fourniture et dépannage de données en temps réel dans Dreamweaver
- Ajout de comportements de serveur personnalisés dans Dreamweaver
- Création de formulaires à l’aide de Dreamweaver
- Utilisation de formulaires pour la collecte des informations sur les utilisateurs
- Création et activations des formulaires ColdFusion dans Dreamweaver
- Création de formulaires web
- Prise en charge améliorée de HTML5 pour les éléments de formulaire
- Développement d’un formulaire à l’aide de Dreamweaver
- Création visuelle d’applications
- Création de pages principales et détaillées dans Dreamweaver
- Création de pages de recherche et de résultats
- Création d’une page d’insertion d’enregistrements
- Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
- Création de pages de suppression d’enregistrement dans Dreamweaver
- Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
- Création d’une page d’enregistrement
- Création d’une page de connexion
- Création d’une page à accès restreint
- Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
- Utilisation de composants ColdFusion dans Dreamweaver
- Test, aperçu et publication de sites web
- Résolution des problèmes
Comment définir des préférences de codage, des thèmes de code, des formats et des préférences de correction de code sous Dreamweaver.
Vous pouvez définir des préférences de codage, par exemple le formatage ou la coloration du code, en fonction de vos besoins.
- Pour définir les préférences avancées, utilisez l’éditeur de la bibliothèque de balises (voir la section Gestion des bibliothèques de balises).
- Dreamweaver prend en charge le formatage des types de fichiers CSS, JS et PHP. Pour plus d’informations sur la personnalisation du formatage de code PHP, CSS et JS, consultez la section Formatage du code.
Définition de l’apparence du code
Le menu Affichage > Options d’affichage de code permet de configurer le renvoi à la ligne des mots, l’affichage du numéro des lignes de code, la coloration de la syntaxe des éléments de code, la mise en retrait du code, ainsi que l’affichage des caractères masqués.
-
Affichez le document en mode Code ou dans l’Inspecteur de code.
-
Choisissez Affichage > Options d’affichage du code.
-
Activez ou désactivez l’une des options suivantes :
Renvoi à la ligne
Renvoie le code à la ligne pour le rendre visible sans qu’il soit nécessaire de le faire défiler horizontalement. Cette option n’insère aucun saut de ligne ; elle a pour seule fonction de simplifier la consultation du code.
Numéros de lignes
Affiche le numéro des lignes de code sur le côté.
Caractères masqués
Permet d’afficher les caractères spéciaux au lieu d’un simple espace blanc. Par exemple, un point apparaît pour masquer chaque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe remplace chaque saut de ligne.
Remarque :Les retours à la ligne contextuels que Dreamweaver utilise pour le renvoi du texte à la ligne ne sont pas symbolisés par une marque de paragraphe.
Coloration de la syntaxe
Active ou désactive la mise en couleurs du code. Pour plus d’informations sur la modification des couleurs à appliquer, consultez la section Définition des couleurs du code.
Retrait auto
Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entrée pendant la rédaction du code. La nouvelle ligne de code s’aligne au même niveau que la ligne qui la précède. Pour plus d’informations sur la modification de l’espacement du retrait, consultez l’option Taille de tabulation dans Définition du format du code.
Modification du format du code
Vous pouvez modifier l’aspect de votre code en définissant des préférences de formatage telles que la mise en retrait, la longueur de ligne et la casse des noms de balises et d’attributs.
Toutes les options de formatage du code, à l’exception de l’option Remplacer la casse de, ne s’appliquent automatiquement qu’aux nouveaux documents et aux ajouts à des documents que vous créez par la suite.
Pour modifier le formatage d’un document HTML existant, ouvrez ce document puis cliquez sur Edition > Code > Appliquer le format source.
-
Cliquez sur Edition > Préférences.
-
Sélectionnez la catégorie Format du code dans la liste de gauche.
-
Parmi les options suivantes, définissez celles de votre choix :
Retrait
Indique si le code généré par Dreamweaver doit être mis en retrait (en conformité avec les règles de retrait définies dans ces préférences).
Remarque :La majorité des options de retrait de cette boîte de dialogue ne s’appliquent qu’au code généré par Dreamweaver et non au code entré par vos soins. Pour que chaque nouvelle ligne entrée s’aligne au même niveau que la précédente, sélectionnez Afficher > Option d’affichage de code, option Retrait auto. Pour plus d’informations, consultez la section Définition de l’apparence du code.
Avec
(Zone de texte ou menu contextuel) Spécifie le nombre d’espaces ou de tabulations que Dreamweaver doit utiliser afin de mettre en retrait le code généré. Par exemple, si vous tapez 3 dans la zone de texte et que vous sélectionnez Tabulations dans le menu contextuel, le code généré par Dreamweaver sera mis en retrait de trois tabulations à chaque niveau de mise en retrait.
Taille de la tabulation
Détermine la taille, en caractères, de chaque tabulation en mode Code. Par exemple, si cette taille est définie sur 4, chaque tabulation s’affiche en mode Code sous la forme d’un espace long de 4 caractères. De plus, si la taille du retrait est définie sur 3 et que les caractères utilisés sont des tabulations, le code généré par Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond à un espace de 12 caractères en mode Code.
Remarque :Dreamweaver effectue les mises en retrait à l’aide de tabulations ou d’espaces mais ne convertit pas une série d’espaces en tabulation lors de l’insertion de code.
Emmet
Sélectionnez cette option si vous prévoyez d’utiliser des abréviations Emmet dans votre code. Cette option garantit que lorsque vous appuyez sur la touche de tabulation, Dreamweaver convertit l’abréviation Emmet en code HTML ou CSS complet. Pour plus d’informations sur l’utilisation d’Emmet, consultez la section Utilisation du kit de ressources Emmet avec Dreamweaver.
Type de saut de ligne
Permet d’indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hébergera votre site. Le choix du type de caractères de saut de ligne approprié (CR, CR/LF, LF) garantit que votre code source HTML s’affiche correctement lorsqu’il est affiché à partir du serveur distant. Ce paramètre est également utile lorsque vous travaillez avec un éditeur de texte externe qui ne reconnaît que certains types de retours de chariot. Par exemple, utilisez CR/LF (Windows), si votre éditeur de texte est le Bloc-notes de Windows, et CR (Mac) s’il s’agit de SimpleText.
Remarque :Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s’applique qu’en mode de transfert binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous téléchargez (en réception) des fichiers en mode ASCII, Dreamweaver définit les sauts de ligne en fonction du système d’exploitation de votre ordinateur ; si vous transférez des fichiers en mode ASCII, les sauts de ligne sont toujours définis comme CR/LF.
Balise TD : Ne pas inclure de saut de ligne dans la balise TD
Résout un problème de rendu qui se rencontre dans certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont placés immédiatement après une balise <td> ou juste avant une balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne après une balise <td> ou avant une balise </td>, même si le formatage de la bibliothèque de balises indique qu’un saut de ligne devrait être inséré.
Formatage avancé
Permet de définir des options de mise en forme pour les différents attributs et balises dans la boîte de dialogue Éditeur de la bibliothèque de balises.
Espace blanc
(Version japonaise uniquement) Permet de sélectionner un espace insécable ( ) ou un espace Zenkaku pour votre code HTML. L’espace blanc sélectionné avec cette option est utilisé pour les balises vides lors de la création d’un tableau et lorsque l’option « Autoriser plusieurs espaces consécutifs » est activée dans les pages de codage japonaises.
Taille minimale de pliage de code
La taille de pliage de code par défaut est deux lignes. Avec ce paramètre par défaut, tous les fragments de code qui contiennent au moins deux lignes de code peuvent être réduits. Les fragments de code qui sont inférieurs à deux lignes peuvent uniquement être réduits en sélectionnant le code. Pour plus d’informations sur le pliage de code, consultez la section Réduction et développement du code.
Définition des préférences de correction de code
Les préférences de correction de code permettent de spécifier les préférences de modification de code par Dreamweaver lors de l’ouverture de documents, lorsque vous copiez et collez des éléments de formulaires ou que vous entrez des valeurs et adresses URL à l’aide des outils (par exemple, l’inspecteur Propriétés). Ces préférences sont sans effet lorsque vous modifiez du code HTML ou des scripts en mode Code.
Si vous désactivez ces options de correction, les éléments de marquage non valides sont affichés dans la fenêtre de document pour le code HTML qu’il aurait corrigé.
-
Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).
-
Sélectionnez la catégorie Correction du code dans la liste de gauche.
-
Parmi les options suivantes, définissez celles de votre choix :
Corriger les balises incorrectement imbriquées et non fermées
Corrige les balises qui se chevauchent. Par exemple, <b><i>texte</b></i> est réécrit en tant que <b><i>texte</i></b>. Cette option insère également des guillemets et des crochets de fermeture s’ils sont absents.
Renommer les éléments de formulaire lors du collage
Garantit l’absence de noms d’objets de formulaire en double. Cette option est activée par défaut.
Remarque :Contrairement à d’autres options de cette boîte de dialogue de préférences, cette option ne s’applique pas à l’ouverture d’un document, mais uniquement lorsque vous copiez et collez un élément de formulaire.
Supprimer les balises de fermeture superflues
Supprime les balises de fermeture auxquelles ne correspond aucune balise d’ouverture.
M’avertir lors de la correction ou de la suppression de balises
Affiche un récapitulatif des codes HTML techniquement non valides que Dreamweaver a tenté de corriger. Ce récapitulatif indique l’emplacement du problème (à l’aide des numéros de ligne et de colonne), pour vous permettre de vérifier la correction et veiller à ce qu’elle produise l’effet voulu.
Ne jamais corriger le code : Dans les fichiers avec extensions
Permet d’empêcher Dreamweaver de corriger le code dans les fichiers portant les extensions indiquées. Cette option est particulièrement utile pour les fichiers contenant des balises propriétaires.
Coder <, >, & et " dans les valeurs d’attributs à l’aide de &
Garantit que les valeurs d’attribut entrées ou modifiées à l’aide des outils Dreamweaver (par exemple, l’inspecteur Propriétés) ne contiennent que des caractères autorisés. Cette option est activée par défaut.
Remarque :Cette option et les options suivantes ne s’appliquent pas aux adresses URL entrées en mode Code. De plus, ces options n’entraînent pas de modification dans le code déjà présent dans un fichier.
Ne pas coder les caractères spéciaux
Empêche toute modification des adresses URL par Dreamweaver en vue de n’utiliser que des caractères autorisés. Cette option est activée par défaut.
Coder caractères spéciaux dans les URL à l’aide de &#
Garantit que, lorsque vous entrez ou modifiez des adresses URL à l’aide des outils Dreamweaver (par exemple, l’inspecteur Propriétés), ces URL ne contiennent que des caractères autorisés.
Coder caractères spéciaux dans les URL à l’aide de %
Fonctionne de façon identique à l’option ci-dessus, mais utilise une autre méthode pour coder les caractères spéciaux. Cette méthode de codage (à l’aide du signe %) offre une meilleure compatibilité avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caractères utilisés dans certaines langues.
Définition des préférences de conseils de code
Utilisez les préférences relatives aux conseils de code pour configurer la manière dont vous souhaitez que ces conseils de code s’affichent pour vous.
-
Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).
-
Sélectionnez la catégorie Conseils de code dans la liste de gauche.
-
Parmi les options suivantes, définissez celles de votre choix :
Balises de fermeture
Indiquez la façon dont vous souhaitez que Dreamweaver ferme les balises.
- Après avoir tapé "</" -
- Après avoir tapé le signe « > » de la balise d’ouverture - Sélectionnez cette option si vous voulez que Dreamweaver ajoute automatiquement une balise de fermeture lorsque vous fermez la balise d’ouverture.
- Jamais - Définissez cette option si vous ne souhaitez pas que Dreamweaver ajoute automatiquement des balises de fermeture.
Activation des conseils de code
Sélectionnez cette option pour activer ou désactiver les conseils ou le remplissage de code dans Dreamweaver. Pour plus d’informations sur les fonctions de conseils et de remplissage de code de Dreamweaver, consultez la section Conseils et remplissage de code.
Activer les infobulles descriptives
Sélectionnez cette option pour que des descriptions apparaissent avec les conseils de code. Ces descriptions fournissent des informations supplémentaires sur le code que vous rédigez.
Insertion automatique des accolades Lorsque cette option est sélectionnée, une accolade fermante est automatiquement ajoutée dans le code lorsque vous insérez une accolade ouvrante. Lorsque la case n’est pas cochée, aucune accolade fermante n’est insérée si vous saisissez une accolade ouvrante. Cette option s’applique à tous les types d’accolades et de fichiers (html, php, css, js).
Insertion automatique des guillemets Lorsque cette option est sélectionnée, des guillemets fermants sont automatiquement ajoutés dans le code lorsque vous insérez des guillemets ouvrants. Lorsque la case n’est pas cochée, les guillemets fermants se s’insèrent pas automatiquement si vous saisissez des guillemets ouvrants. Cette option s’applique aux guillemets simples et doubles pour tous les types de fichiers (html, php, css, js).
Définition de préférence pour remplissage automatique de codes
Vous pouvez activer et désactiver la fermeture automatique de crochets et guillemets en procédant comme suit :
-
Ouvrez le fichier brackets.json à partir de l’emplacement suivant :
- Win : %appdata%\Adobe\Dreamweaver CC 2018\en_US\Configuration\Brackets\
- Mac : ~/Library/Application Support/Adobe/Dreamweaver CC 2018/en_US/Configuration/Brackets/
-
Pour désactiver la fermeture automatique de crochets et parenthèses, définissez autoCloseBraces sur False.
-
Pour désactiver l’insertion automatique des guillemets correspondants, définissez autoCloseQuotes sur False.
Si vous souhaitez activer la fermeture automatique des crochets et des guillemets correspondants, définissez les valeurs mentionnées ci-dessus sur True.
-
Enregistrez le fichier .json et lancez Dreamweaver.
Définition de préférences PHP
Vous pouvez définir l’environnement de développement du codage PHP dans lequel vous souhaitez travailler. Vous pouvez le faire sur une base spécifique au site pour différents sites sur lesquels vous travaillez, ou sur une base générale pour tous les fichiers PHP enregistrés en dehors des sites Dreamweaver.
Dreamweaver configure les conseils de code et les contrôles d’analyse Linting pour la version sélectionnée du langage PHP.
Pour définir des préférences de version de code PHP pour des fichiers non spécifiques à un site, procédez comme suit :
-
Choisissez Édition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).
-
Définissez le langage PHP dans la liste des catégories à gauche.
-
Choisissez une version PHP dans la liste déroulante Version PHP, puis cliquez sur Appliquer.
Pour définir la version PHP pour un site spécifique, effectuez les étapes suivantes :
-
Dans la boîte de dialogue Configuration du site, sous Paramètres avancés, sélectionnez PHP.
-
Choisissez une version PHP dans la liste déroulante Version PHP, puis cliquez sur Enregistrer.
Définition de thèmes de couleur et thèmes de code
En fonction de vos préférences, vous pouvez sélectionner un thème de couleur au démarrage de Dreamweaver. Cette préférence peut être modifiée à tout moment.
-
Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).
-
Sélectionnez la catégorie Interface dans la liste de gauche.
-
Choisissez un thème de couleur dans la liste.
-
Une fois le thème de l’interface choisi, définissez le thème du code.
Vous avez le choix entre un thème sombre ou clair.
-
Cliquez sur Appliquer pour enregistrer les modifications.
Vous pouvez décider de personnaliser davantage la coloration du code en fonction de vos besoins. Pour plus d’informations, consultez la section Personnalisation de la coloration du code.
Utilisation d’un éditeur externe
Vous pouvez spécifier un éditeur externe à utiliser pour l’édition de fichiers possédant des extensions précises. Par exemple, vous pouvez lancer un éditeur de texte comme BBEdit, le Bloc-notes ou TextEdit à partir de Dreamweaver pour modifier les fichiers JavaScript (JS).
Vous pouvez attribuer différents éditeurs externes pour différentes extensions de nom de fichier.
Définition d’un éditeur externe pour un type de fichier
-
Cliquez sur Edition > Préférences.
-
Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.
Ouvrir en mode Code
Précise les extensions de noms de fichiers à ouvrir automatiquement en mode Code sous Dreamweaver.
Recharger les fichiers modifiés
Permet d’indiquer ce que Dreamweaver doit faire lorsqu’il détecte que des changements ont été apportés de l’extérieur à un document déjà ouvert sous Dreamweaver.
Enregistrer au démarrage
Permet d’indiquer si Dreamweaver doit systématiquement enregistrer le document actif avant de lancer l’éditeur, ne jamais enregistrer le document ou vous demander s’il doit l’enregistrer ou non à chaque lancement de l’éditeur externe.
Fireworks
Vous pouvez associer Fireworks à Dreamweaver en indiquant ici le chemin d’accès à l’application.
Adobe
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?