Dreamweaver CC 2017 (édition de novembre 2016)

Dreamweaver a été repensé pour les designers web habitués à la programmation. Il est plus précis, plus efficace et plus rapide que jamais, avec un tout nouvel éditeur de code, une interface utilisateur plus intuitive offrant un thème sombre en option, et plusieurs améliorations telles que la prise en charge des préprocesseurs CSS.

Lisez ce qui suit pour obtenir une présentation rapide de ces nouvelles fonctionnalités et des améliorations apportées.

Pour obtenir un résumé des fonctionnalités introduites dans les versions antérieures de Dreamweaver, voir Résumé des nouvelles fonctionnalités | Versions 2015 de Dreamweaver CC.


Tout nouvel éditeur de code

Diverses améliorations ont été apportées à l’éditeur de code de Dreamweaver, pour vous permettre de coder de manière simple, rapide et efficace.

Les conseils de code aident les nouveaux utilisateurs à maîtriser les langages HTML, CSS et autres normes du web, tandis que les aides visuelles comme l’indentation automatique, la coloration du code et les polices redimensionnables limitent les erreurs et facilitent la lecture du code. 

Conseils de code

La fonctionnalité de conseils de code de Dreamweaver a été optimisée afin de fournir à l’utilisateur des informations utiles sur le code sélectionné.

Dans les versions précédentes de Dreamweaver, lorsque vous saisissiez un crochet ouvrant, vous obteniez une liste déroulante de code pertinent.

Dans cette édition, vous profitez non seulement du code approprié mais aussi d’informations supplémentaires qui vous permettent de coder rapidement en HTML, CSS et autres technologies web, directement dans Dreamweaver. 

Conseils de code améliorés
Conseils de code améliorés

Pour en savoir plus, voir Conseils et remplissage de code.

Affichage du code amélioré

L’aspect général du code a été optimisé pour une meilleure lisibilité. Ces améliorations portent notamment sur le formatage et la coloration du code ainsi que sur le redimensionnement de la police. 

Formatage de code

Lorsque vous rédigez du code, Dreamweaver y insère automatiquement des retraits, de manière à éviter les erreurs de retrait et à améliorer la lisibilité. 

Coloration du code

Dreamweaver prend désormais en charge la coloration du code pour davantage de types de fichiers.

Ainsi, la coloration de code est disponible pour les types 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. 

Vous pouvez modifier la mise en surbrillance de la syntaxe de différents types de fichiers directement à partir de la barre d’état en mode Code.

Redimensionnement de la police

Utilisez les raccourcis clavier suivants sans quitter le mode Code pour redimensionner la police :

  • Appuyez sur Ctrl++ (Windows) ou Cmd++ (Mac) pour augmenter la taille de la police.
  • Appuyez sur Ctrl+- (Windows) ou Cmd+- (Mac) pour réduire la taille de la police
  • Appuyez sur les touches Ctrl+0(Win) ou Cmd+0 (Mac) pour réinitialiser la taille de police par défaut

Pour en savoir plus sur ces modifications, voir Environnement de codage dans Dreamweaver.

Prise en charge des préprocesseurs CSS

Désormais, Dreamweaver prend en charge les préprocesseurs CSS courants tels que Sass, Less et SCSS, avec coloration du code, conseils de code et compilation, ce qui vous fait gagner du temps et donne du code net et précis.

Prise en charge des préprocesseurs CSS
Prise en charge des préprocesseurs CSS

Pour plus d’informations sur la prise en charge des préprocesseurs CSS dans Dreamweaver, voir Préprocesseurs CSS.

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 à votre navigateur afin que les modifications s’affichent instantanément dans le navigateur sans devoir recharger la page. 

Aperçu des modifications en temps réel dans le navigateur
Aperçu des modifications en temps réel dans le navigateur

Pour plus d’informations, voir Aperçu en temps réel.

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 (sous Windows) ou Cmd + E (sous Mac) pour accéder à la fonction Édition rapide.

Dreamweaver propose des outils intégrés et des options de code contextuelles.

Pour plus d’informations, voir Édition rapide.

Modification rapide du code associé sans avoir à ouvrir plusieurs fichiers ou onglets
Modification rapide du code associé sans avoir à ouvrir plusieurs fichiers ou onglets

Documentation contextuelle de CSS

Dreamweaver fournit une documentation contextuelle concernant les propriétés CSS, directement en mode Code.

Vous n’avez plus à sortir de Dreamweaver et à ouvrir une page web pour avoir plus de renseignements sur une propriété CSS. Pour afficher l’aide relative au langage CSS, appuyez sur Ctrl+K (sous Windows) ou Commande+K (sous Mac).

Documentation rapide pour CSS dans l’interface du mode Code de Dreamweaver
Documentation rapide pour CSS dans l’interface du mode Code de Dreamweaver

Pour plus d’informations, voir Documentation contextuelle de CSS.

Plusieurs curseurs pour rédiger et modifier le code

Pour rédiger plusieurs lignes de code simultanément, utilisez plusieurs curseurs. 

Cette fonctionnalité est un véritable atout en termes de productivité, car vous n’avez pas à écrire la même ligne de code plusieurs fois.

Pour appeler plusieurs curseurs, effectuez l’une des opérations suivantes :

  • Pour ajouter des curseurs sur plusieurs lignes continues, maintenez la touche Alt enfoncée, puis faites glisser la souris à la verticale. 
  • Pour ajouter des curseurs sur plusieurs lignes de texte discontinues, appuyez sur la touche Ctrl, puis cliquez sur les différentes lignes où vous souhaitez placer le curseur.
  • Pour sélectionner le texte de plusieurs lignes continues, appuyez sur la touche Alt et faites glisser la souris en diagonale.
  • Pour sélectionner le texte de plusieurs lignes discontinues, sélectionnez un bloc de texte, puis appuyez sur la touche Ctrl (Windows) ou Cmd (Mac) et continuez avec les autres sélections. 

Interface utilisateur moderne

Dreamweaver dispose maintenant d’une interface plus intuitive et personnalisable, avec des menus et des panneaux plus accessibles, ainsi qu’une barre d’outils contextuelle qui peut être configurée pour afficher uniquement les outils dont vous avez besoin.

Cette nouvelle interface offre également quatre niveaux de contraste (du plus clair au plus foncé), pour faciliter la lecture et la modification des lignes de code.

Voici des captures d’écran de l’ancienne et de la nouvelle interface utilisateur.

Interface utilisateur - versions Dreamweaver 2015

Nouvelle interface utilisateur - version Dreamweaver CC 2017


Modification des menus, espaces de travail et barres d’outils

Dans cette version, les menus, barres d’outils et espaces de travail de Dreamweaver ont également été repensés. Lisez la suite pour en savoir plus sur les modifications apportées.

Modifications apportées à l’espace de travail

L’interface de Dreamweaver est optimisée pour inclure les espaces de travail par défaut suivants :

  • Espace de travail du développeur

Cet espace de travail est minimaliste et n’inclut, par défaut, que les panneaux les plus essentiels pour les développeurs codant des sites web, tels que les panneaux Fichiers et Fragments de code.

  • Espace de travail standard 

Cet espace de travail comporte tout ce dont vous avez besoin lorsque vous travaillez en mode Code et Création, notamment les panneaux Fichiers, Bibliothèques CC, CSS Designer, Insertion, DOM, Actifs et Fragments de code.

Remarque :

Après avoir sélectionné un espace de travail, vous pouvez le personnaliser en y ajoutant ou en supprimant des panneaux. Pour en savoir plus sur la personnalisation des espaces de travail, voir Création d’espaces de travail personnalisés.

Voici un résumé des différences entre les espaces de travail fournis dans Dreamweaver CC 2015 et Dreamweaver CC 2017.

Dreamweaver CC 2015

  • Débutant
  • Code
  • Par défaut
  • Création
  • Extract

Dreamweaver CC 2017

  • Développeur
  • Standard

Pour plus d’informations sur les modifications apportées à l’espace de travail, voir Espace de travail de Dreamweaver.

Modifications apportées au menu

Le menu de l’application a été revu de manière à supprimer les éléments peu utilisés et à en déplacer d’autres vers un emplacement de menu plus intuitif.

Pour obtenir une description détaillée des modifications apportées au menu de l’application Dreamweaver, voir Menus repensés.

Modifications apportées à la barre d’outils

Désormais, la barre d’outils est commune à toutes les vues. Elle affiche uniquement les outils requis pour la vue dans laquelle vous travaillez.

Néanmoins, vous pouvez la personnaliser pour afficher tous les outils dont vous avez besoin. 

Pour plus d’informations, voir Présentation de la barre d’outils .

Modifications apportées à la barre d’état

Désormais, la barre d’état affiche des informations utiles lorsque vous travaillez en mode Code. 

Vous pouvez désormais :

  • Basculer entre les modes INS (insertion) et OVR (remplacement).
  • Voir le nombre de lignes et de colonnes au bas de l’écran. Ces numéros indiquent la ligne et la colonne où la souris est positionnée.
  • Sélectionner la coloration du code pour différents types de fichiers de code.

Pour plus d’informations, voir Présentation de la barre d’état.

Modifications apportées au panneau Fragments de code

Le panneau Fragments de code a changé d’apparence et a été repensé pour faciliter l’insertion des fragments.

L’image ci-dessous illustre les principales modifications apportées au panneau Fragments de code :

Modifications apportées à l’interface utilisateur du panneau Fragments de code
Modifications apportées à l’interface utilisateur du panneau Fragments de code

Dans les versions précédentes de Dreamweaver, l’insertion de fragments se faisait au moyen de raccourcis clavier.

Or ce processus n’était pas efficace pour plusieurs raisons :

  • Il fallait mémoriser des raccourcis peu intuitifs.
  • Les raccourcis pouvaient présenter un conflit avec des raccourcis de mots-clés de produit.

Dans cette version de Dreamweaver, vous pouvez utiliser des touches de déclenchement pour insérer des fragments de code.

Les touches de déclenchement sont des chaînes de texte conviviales assignées aux fragments de code. Par exemple, pour un fragment de code visant à créer un lien mailto, vous pouvez saisir « mailto » et définir cette chaîne comme touche de déclenchement.

Après avoir assigné une touche de déclenchement, placez le curseur dans votre document, tapez « mailto », puis appuyez sur la touche Tabulation. Dreamweaver insère alors le fragment de code associé dans le document.

Pour en savoir plus sur le panneau Fragments de code, voir Réutilisation du code à l’aide de fragments.

Modifications apportées au panneau Fichiers

Le panneau Fichiers a été repensé, pour le rendre plus simple et plus intuitif.

Dans sa forme la plus simple, le panneau Fichiers affiche uniquement la liste des fichiers locaux présents sur votre ordinateur. Davantage d’options apparaissent à mesure que vous utilisez le panneau Fichiers (en configurant un site ou des connexions vers des serveurs distants, ou en activant l’archivage et l’extraction).

Pour en savoir plus sur les modifications apportées au panneau Fichiers, voir Panneau Fichiers repensé.

Modifications apportées à l’écran d’accueil et à l’expérience intégrée

Lorsque vous lancez Dreamweaver ou fermez tous les documents Dreamweaver, un nouvel espace de travail Démarrage s’affiche. Depuis cet espace, vous pouvez accéder à vos fichiers récemment utilisés, à vos bibliothèques et à des modèles de démarrage.

Si vous préférez les anciennes boîtes de dialogue, vous pouvez toujours appuyer sur Ctrl/Cmd + O pour lancer la fenêtre Ouvrir, ou sur Ctrl/Cmd + N pour lancer la fenêtre Nouveau document.  

Pour vous aider à vous familiariser rapidement avec ce nouvel espace de travail Dreamweaver CC 2017, une expérience intégrée vous est proposée. Testez les fonctions de personnalisation pour bénéficier d’un espace de travail et d’options thématiques qui vous ressemblent. 

Pour plus d’informations, voir Espace de travail de Dreamweaver.

Surlignage en direct avec la fonction Rechercher et remplacer

La nouvelle barre d’outils « Rechercher et remplacer », plus discrète, est située en haut de la fenêtre pour que l’ensemble de votre écran reste visible.

La fonction Rechercher et remplacer est globalement plus rapide et plus efficace, par rapport aux versions précédentes de Dreamweaver. Dreamweaver recherche désormais les chaînes à mesure de leur saisie dans le panneau Rechercher et met en surbrillance toutes les instances d’une chaîne dans le document actif. 

Pour plus d’informations, consultez la section Recherche et remplacement de texte.

Optimisation du service Actifs Creative Cloud

Archivez, restaurez, commentez et consultez l’historique des versions des ressources stockées dans Creative Cloud, y compris les fichiers des Bibliothèques Creative Cloud, les contenus créés à l’aide des applications CC pour postes de travail et les projets mobiles.

Récupération automatique de fichiers après un plantage

Si Dreamweaver s’arrête subitement en raison d’une erreur système, d’une panne de courant ou autre, vous pourrez récupérer les modifications apportées aux fichiers sur lesquels vous travailliez.

Pour en savoir plus, voir Récupération automatique de fichiers.

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