Apprenez à utiliser l’environnement de codage de Dreamweaver afin de rédiger du code plus rapidement.

Pour rédiger du code dans Dreamweaver, vous pouvez choisir d’utiliser l’espace de travail du développeur. Cet espace de travail affiche le mode Code par défaut et comporte uniquement les panneaux Fichiers et Fragments de code ancrés sur la gauche de l’écran.

Si vous avez besoin de fonctionnalités supplémentaires, cliquez sur Fenêtre et choisissez le panneau requis.

Remarque :

Si les espaces de travail prédéfinis ne proposent pas exactement ce dont vous avez besoin, vous pouvez définir votre propre agencement d’espace de travail. Ouvrez et ancrez les panneaux où vous le souhaitez, puis enregistrez l’espace de travail comme espace de travail personnalisé. Pour plus d’informations, consultez la section Création d’espaces de travail personnalisés.

Manipulation du code dans Dreamweaver

Plusieurs méthodes permettent de rédiger du code dans Dreamweaver. Vous pouvez utiliser :

Vous pouvez basculer entre les différents modes en cliquant sur les boutons Code, Code fractionné et Création/En direct au-dessus de votre espace de travail.

Vous pouvez également utiliser l’Inspecteur de code pour afficher votre code HTML dans une fenêtre flottante. L’Inspecteur de code permet de voir simultanément votre maquette de site web et le code sans avoir à diviser la vue en deux. Pour plus d’informations, consultez la section Affichage du code dans une fenêtre distincte dans l’Inspecteur de code.

Affichage du code dans la fenêtre de document – Mode Code

Choisissez Affichage > Code.

Codage et modification simultanée d’une page dans la fenêtre de document – Mode fractionné

  1. Choisissez Affichage > Code et création.

    Le code apparaît dans le volet supérieur, et la page dans le volet inférieur.

  2. Pour afficher la page au premier plan, choisissez Mode Création au premier plan dans le menu Affichage de la barre d’outils du document.
  3. Pour redimensionner les volets dans la fenêtre de document, faites glisser la barre de division à l’endroit approprié. La barre de division est intercalée entre les deux volets.

    Toutes les modifications apportées dans le mode Création se répercutent automatiquement dans le mode Code. Après avoir effectué des modifications en mode Code, vous devez mettre à jour manuellement le document en mode Création ; il vous suffit pour cela de cliquer dans ce mode ou d’appuyer sur la touche F5.

Affichage du code dans une fenêtre distincte dans l’Inspecteur de code

L’Inspecteur de code permet de travailler dans une fenêtre de code distincte, comme vous le faites en mode Code.

  1. Choisissez Fenêtre > Inspecteur de code. La barre d’outils contient les options suivantes :

    Gestion des fichiers

    Permet de placer ou d’acquérir le fichier.

    Aperçu/Débogage dans le navigateur

    Permet de prévisualiser ou de déboguer votre document dans un navigateur.

    Actualiser mode Création

    Met à jour le document en mode Création, de façon à ce qu’il applique les modifications apportées dans le code. Les modifications apportées dans le code n’apparaissent pas automatiquement dans le mode Création : vous devez exécuter tout d’abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.

    Navigation par code

    Permet de se déplacer rapidement dans le code. Consultez la section Passage à une fonction JavaScript ou VBScript.

    Afficher les options

    Permet de déterminer la façon dont le code est affiché. Consultez la section Définition de l’apparence du code.

Codage plus rapide dans Dreamweaver

Le mode Code dans Dreamweaver propose des fonctionnalités de codage conviviales qui aident les designers à effectuer la transition vers un développement en mode Code, alors que les programmeurs expérimentés peuvent tirer parti d’aides visuelles telles que le retrait automatique, la coloration du code et des polices redimensionnables afin de réduire les erreurs et d’améliorer la lecture.

Voici quelques-unes des fonctionnalités proposées par Dreamweaver.

Conseils et remplissage de code

À mesure que vous entrez du code, la fonction de conseils de code (ou remplissage de code) dans Dreamweaver vous permet de sélectionner des balises, des attributs et des styles CSS dans un menu déroulant. Ce remplissage automatique de code vous permet de saisir du code plus rapidement et avec moins d’erreurs.

Voici un exemple illustrant ce fonctionnement en HTML. 

Lorsque vous commencez à entrer « < », Dreamweaver ouvre un menu déroulant qui répertorie toutes les balises HTML disponibles. À mesure que vous continuez à saisir votre balise, Dreamweaver met automatiquement à jour les options HTML disponibles et vous permet de sélectionner une balise applicable. Lorsque vous appuyez sur la touche Entrée, Dreamweaver insère automatiquement la balise pour vous. Il affiche ensuite une deuxième liste déroulante qui répertorie toutes les propriétés disponibles de cette balise.

La prise en charge de conseils de code est également disponible pour CSS, JavaScript et PHP (versions 5.6 et 7.1 pour PHP). 

Pour plus d’informations, consultez la section Conseils et remplissage de code.

Prise en charge des versions 5.6 et 7.1 de PHP

Dreamweaver prend en charge les versions 5.6 et 7.1 de PHP. 

Vous pouvez choisir de compiler des fichiers PHP de votre site avec la version 5.6 ou 7.1 de PHP à l’aide de la boîte de dialogue Configuration du site (sur une base par site), ou des préférences de l’application (pour tous les fichiers PHP enregistrés en dehors des sites Dreamweaver). Dreamweaver configure ensuite les conseils de code et les contrôles d’analyse Linting pour la version sélectionnée du langage PHP.

Pour les nouveaux sites dans Dreamweaver, le compilateur PHP par défaut est défini sur la version spécifiée vi la commande Modifier > Préférences > PHP.

Pour plus d’informations sur la prise en charge de PHP dans Dreamweaver, consultez la section .

Pour obtenir des informations d’ordre général sur les versions 5.6 et 7.1 de PHP, reportez-vous aux ressources suivantes :

Conseils de code d’objet JavaScript

Dreamweaver prend en charge les conseils de code d’objet en JavaScript. Dreamweaver propose des conseils de code pour des objets JavaScript de base tels que tableaux, dates, chiffres et chaînes. 

En outre, Dreamweaver suit les fonctions JavaScript que vous créez et propose des conseils de code en utilisant vos propres noms de fonction.

Pour plus d’informations, consultez la section Conseils et remplissage de code.

Remaniement du code JavaScript

Dreamweaver prend en charge le remaniement de code. Le remaniement de code correspond au processus de restructuration du code existant d’un ordinateur, sans modifier son comportement externe. Le code est alors plus facile à lire et à comprendre. Le débogage de code permet de gagner du temps car il s’agit de fonctions non essentielles et de remplacements précis. Le remaniement JavaScript permet de renommer fonctions et variables en ayant conscience de leur portée.

Pour plus d’informations, consultez la section Écriture et modification du code

Coloration de code pour différents types de fichiers

Dreamweaver prend en charge la coloration de code pour les codes suivants : HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML et YAML.

Curseurs multiples pour les tâches répétitives

Rédigez plus d’une ligne de code à la fois pour réaliser rapidement certaines actions, telles que la création d’une liste à puces, la mise à jour d’une série de chaînes et l’exécution simultanée de plusieurs modifications.

Cette fonctionnalité est un véritable booster pour la productivité car vous n’avez pas à écrire la même ligne de code plusieurs fois. Plusieurs curseurs le font pour vous immédiatement.

Lors de la rédaction de code, vous pouvez :

  • Ajouter plusieurs curseurs pour ajouter un nouveau contenu à plusieurs endroits
  • Sélectionner un texte en plusieurs emplacements pour appliquer la même modification à différentes parties de votre document

Pour plus d’informations, consultez la section Ajout de plusieurs curseurs ou sélections.

Modification rapide des fichiers de code associés

Pour apporter rapidement des modifications à votre code, placez simplement le curseur sur des fragments de code spécifiques et utilisez le menu contextuel, ou appuyez sur les touches Ctrl + E (Windows) ou Cmd + E (Mac) pour accéder à la fonction Édition rapide.

Dreamweaver vous présente des outils intégrés et options de code contextuelles.

Scénario d’utilisation

Prenons l’exemple suivant :

Vous modifiez un fichier HTML et vous remarquez que quelque chose semble incorrect en mode En direct. Vous basculez ensuite en mode Code et réalisez que vous devez modifier un autre fichier associé (un fichier CSS, par exemple) pour corriger le problème. 

Au lieu de basculer entre les onglets, cliquez avec le bouton droit sur le code et sélectionnez Édition rapide ou utilisez un raccourci clavier : Dreamweaver affiche la section pertinente du code dans le fichier CSS associé directement dans le fichier HTML lui-même.

Vous pouvez ensuite modifier le code CSS sans avoir à quitter la section ou basculer entre les onglets. Les modifications sont automatiquement actualisées dans le fichier CSS.

Pour plus d’informations, consultez la section Édition rapide.

Documentation contextuelle de CSS

La fonction Documentation rapide fournit une documentation concernant les propriétés CSS, directement en mode Code.

Vous n’avez pas à naviguer vers une page web hors de Dreamweaver pour en apprendre davantage sur les propriétés CSS. Pour afficher la fonction Documentation rapide, appuyez sur les touches Ctrl + K (Windows) ou Cmd + K (Mac).

Pour plus d’informations, consultez la section Obtenir de l’aide sur CSS dans Dreamweaver avec la fonction Documentation rapide.

Prise en charge prête à l’emploi de l’outil Emmet

Emmet est un plug-in qui permet un codage à grande vitesse et la génération de code HTML et CSS.

Le plug-in Emmet est inclus dans Dreamweaver, ce qui vous permet d’utiliser des abréviations Emmet sans avoir à exécuter l’étape supplémentaire d’installation du plug-in.

Utilisez des abréviations Emmet en mode Code ou Inspecteur de code sous Dreamweaver et appuyez sur la touche de tabulation pour développer ces abréviations en balises HTML ou en code CSS.

Les abréviations HTML sont développées dans des pages HTML et PHP.

Les abréviations CSS sont développées dans des pages CSS, LESS, Sass, SCSS ou à l’intérieur de la balise de style dans une page HTML.

Pour plus d’informations sur l’utilisation d’Emmet, consultez la section Utilisation du kit de ressources Emmet avec Dreamweaver.

Réduction du code

Dreamweaver permet de réduire des sections de code, de sorte que vous puissiez vous concentrer plus facilement sur les sections que vous modifiez de manière active. 

Vous pouvez réduire le code sur la base des balises ou des crochets, ou en fonction de la sélection. 

Pour plus d’informations, consultez la section Réduction et développement du code.

Validation de code

Dreamweaver propose une robuste fonctionnalité d’analyse Linting destinée à vous aider à déboguer les erreurs éventuelles dans votre code. 

Cette fonctionnalité analyse le code pour signaler toute erreur potentielle ou utilisation suspecte du code. L’analyse Linting dans Dreamweaver permet entre autres de signaler les erreurs de syntaxe HTML, les erreurs d’analyse dans CSS ou les avertissements dans les fichiers JavaScript.

Pour plus d’informations sur l’analyse Linting du code dans Dreamweaver, consultez la section Analyse du code (Linting).

Si vous travaillez avec PHP et que votre document contient un code HTML incorrect, Dreamweaver affiche ce code en mode Création (s’il n’est pas ouvert) et le met en surbrillance en mode Code (selon les préférences que vous définissez).

Si vous sélectionnez le code dans l’un des deux modes, l’inspecteur Propriétés affiche des informations sur les causes de la non-validité du code et sur la manière de le corriger.

Remarque :

L’option de mise en surbrillance du code non valide en mode Code est désactivée par défaut. Pour l’activer, passez en mode Code (Affichage > Code), puis cliquez sur Affichage > Options d’affichage de code > Surligner le code non valide).

Vous pouvez également indiquer vos préférences concernant la correction automatique de certains types d’éléments de code erronés lorsque vous ouvrez un document.

Pour plus d’informations sur la définition des préférences de codage, consultez la section Définition des préférences de codage.

Prise en charge de préprocesseurs CSS

Dreamweaver prend désormais en charge les préprocesseurs CSS courants tels que SASS, Less et SCSS, avec coloration complète du code, conseils de code et compilation. 

La prise en charge de préprocesseurs CSS vous permet de gagner du temps lors de l’utilisation de sites volumineux comportant des feuilles de style complexes.

Pour plus d’informations sur la prise en charge de préprocesseurs CSS dans Dreamweaver, consultez la section Utilisation de préprocesseurs CSS dans Dreamweaver.

Enregistrement et réutilisation de fragments de code

Enregistrez des blocs de code fréquemment utilisés en tant que fragments de code dans le panneau Fragments de code. Vous pouvez ensuite insérer ces blocs de code dans plusieurs pages.

Les fragments de code enregistrés à l’aide du panneau Fragments de code ne sont pas spécifiques au site, et peuvent ainsi être réutilisés dans différents sites.

Vous pouvez également utiliser des fragments de code sur divers appareils, ainsi que dans différentes versions de Dreamweaver à l’aide des paramètres de synchronisation.

Pour plus d’informations, consultez la section Réutilisation de fragments de code.

Aperçu en temps réel dans le navigateur

Vous pouvez prévisualiser rapidement vos modifications de code en temps réel dans le navigateur sans actualiser manuellement ce dernier. Dreamweaver se connecte désormais à votre navigateur afin que les modifications s’affichent instantanément dans ce dernier sans devoir recharger la page.

Pour plus d’informations, consultez la section Aperçu en temps réel dans le navigateur.

Personnalisation des raccourcis clavier

Vous pouvez utiliser vos raccourcis clavier préférés sous Dreamweaver. Si vous êtes habitué à utiliser des raccourcis clavier spécifiques (par exemple, Maj + Entrée pour insérer un saut de ligne, Ctrl + G pour atteindre un emplacement précis du code), vous pouvez les intégrer à Dreamweaver au moyen de l’éditeur de raccourcis clavier.

Pour plus d’informations, reportez-vous à la section Personnalisation des raccourcis clavier.

Ouverture de fichiers en mode Code par défaut

Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple, un fichier JavaScript), il s’ouvre en mode Code (ou dans l’Inspecteur de code), et non pas en mode Création. Vous pouvez définir les types de fichiers à ouvrir en mode Code.

  1. Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).
  2. Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche.
  3. Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous voulez ouvrir automatiquement en mode Code.

    Insérez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne