Environnement de codage sous Dreamweaver

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.

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

• Mode Code : disposition épurée et minimaliste qui vous permet de travailler uniquement avec le code, sans fenêtres ni panneaux superflus. Pour plus d’informations, consultez la section Affichage du code dans la fenêtre de document.
• Mode fractionné : cette vue affiche les deux modes Code et En direct (ou Création), afin de pouvoir visualiser les modifications que vous apportez à mesure que vous entrez du code. Pour plus d’informations, consultez la section Codage et modification simultanée d’une page dans la fenêtre de document – Mode fractionné.

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

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

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.

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 .

• Définition de préférences PHP
• Conseils de code PHP

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

• Migration de PHP 5.6.x à PHP 7.0.x : http://php.net/manual/en/migration70.php
• Migration de PHP 7.0.x à PHP 7.1 : http://php.net/manual/en/migration71.php
• Pour en savoir plus sur PHP 7.1 : http://php.net/releases/7_1_0.php

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.

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.