Versions 2017 de Dreamweaver CC

Les versions 2017 de Dreamweaver CC ont été repensées pour les designers web habitués à la programmation.

Dreamweaver 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, ainsi que plusieurs améliorations telles que la prise en charge de nouveaux flux de travaux comme les 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écapitulatif des fonctionnalités introduites dans les versions antérieures de Dreamweaver, consultez la section Récapitulatif des nouvelles fonctionnalités | Versions 2015 de Dreamweaver CC.


Version 2017.1 d’Adobe Dreamweaver CC

Dreamweaver CC 2017.1 assure la prise en charge de codage supplémentaire en incluant les fonctions suivantes :

Lisez ce qui suit pour obtenir une présentation rapide de ces améliorations.

Prise en charge de PHP 7.1

Dreamweaver vous permet maintenant d’accéder à des conseils de code et des contrôles d’analyse Linting pour PHP 7.1. Vous pouvez choisir de compiler des fichiers PHP de votre site avec la version 5.6 ou 7.1 dans la boîte de dialogue Configuration du site, ou via la commande Édition > Préférences.

Remarque :

Pour les nouveaux projets dans Dreamweaver, la version par défaut du compilateur PHP est 7.1. 

Pour plus d’informations sur la prise en charge de PHP 7.1, consultez les articles suivants :

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

Amélioration des fonctions de recherche et remplacement

Cette version comprend d’importantes améliorations des fonctions de recherche et remplacement. 

Vous pouvez désormais rechercher des attributs et balises à l’aide du niveau avancé de la boîte de dialogue Rechercher et remplacer (Rechercher > Rechercher et remplacer dans les fichiers).

En outre, le panneau Rechercher et remplacer (Rechercher > Rechercher et remplacer) est désormais déplacé au bas de l’espace de travail Dreamweaver.

Utilisez ce panneau pour des opérations de recherche et remplacement de texte, de balises et d’attributs dans le document actif. Pour plus d’informations, consultez la section Recherche et remplacement de texte, de balises et d’attributs.

Nouveaux raccourcis clavier de recherche et remplacement :

  • Rechercher dans le document actif : Ctrl + F (Windows) ou Commande + F (Mac) 
  • Rechercher et remplacer dans les fichiers : Ctrl + Maj + F (Windows) ou Commande + Maj + F (Mac) 
  • Remplacer dans le document actif : Ctrl + H

Mise à jour de la version 2017 de Dreamweaver CC (17.0.2)

Création de campagnes d’e-mail dans Dreamweaver avec Campaign

Vous pouvez maintenant utiliser l’extension Campaign pour Dreamweaver afin de créer des campagnes de messagerie personnalisées. 

La personnalisation du contenu est essentielle pour capter l’attention du lecteur, avec pour optique d’augmenter le taux de réussite enregistré grâce au marketing électronique. 

Si vous utilisez Dreamweaver pour créer des campagnes de messagerie, vous pouvez aller encore plus loin et ajouter un contenu personnalisé (tel que nom du lecteur, appel personnalisé à une action, etc.) à l’aide de données provenant d’Adobe Campaign.

Pour commencer, téléchargez l’extension Campaign en cliquant sur Fenêtre > Extensions > Parcourir les extensions, modifiez l’un des bulletins électroniques proposés par défaut ou créez-en un de votre choix. Quand vous avez fini de le mettre au point, personnalisez son contenu à l’aide des champs de personnalisation et blocs de contenu de Campaign, et le tour est joué. 

Dreamweaver se synchronise automatiquement avec Campaign de sorte que tous les changements effectués dans Dreamweaver se répercutent sur les documents dans Campaign. Il vous suffit ensuite d’indiquer l’adresse e-mail de votre destinataire et de lui envoyer la campagne personnalisée.

Pour plus d’informations, consultez la section Création de campagnes de messagerie personnalisées.

Mise à jour de la version 2017 de Dreamweaver CC (17.0.1)

Prise en charge intégrée de coloration du code

Vous pouvez maintenant créer et adapter des thèmes de code, basés sur les thèmes sombres et clairs par défaut. Vous pouvez ensuite personnaliser les couleurs de code en modifiant les sélecteurs appropriés dans le fichier de thème.

Sélectionnez le thème de code clair ou sombre par défaut via la commande Modifier > Préférences > Interface, et si vous souhaitez modifier les couleurs du code, enregistrez le thème sous un nouveau nom, et démarrez la modification du fichier de thème. 

Pour plus d’informations sur la personnalisation de vos couleurs de code, consultez la section Personnalisation de la coloration du code.

Remarque :

Cette version comporte également des correctifs pour un certain nombre de défauts. Pour plus d’informations sur les problèmes corrigés, consultez la section Problèmes connus et défauts corrigés dans les versions 2017 de Dreamweaver CC.

Version 2017 de Dreamweaver CC (17.0)

La version 2017 de Dreamweaver CC propose un tout nouvel éditeur de code, une interface utilisateur plus intuitive et des thèmes sombre et clair sélectionnables, ainsi que plusieurs améliorations telles que la prise en charge des préprocesseurs CSS.

Poursuivez votre lecture pour obtenir une liste complète des nouveautés et modifications dans Dreamweaver CC 2017 :

Éditeur de code remanié

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 plus d’informations, consultez la section 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. 

Formatage du 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.

Pour plus d’informations sur ces modifications, consultez la section Environnement de codage dans Dreamweaver.

Prise en charge de préprocesseurs CSS

Dreamweaver prend maintenant en charge des préprocesseurs CSS courants tels que Sass, Less et SCSS, avec coloration complète du code et compilation, ce qui vous fait gagner du temps et donne du code net et précis.

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.

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. 

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, consultez la section Aperçu en temps réel dans le navigateur.

Modification rapide des fichiers de code associés (Édition rapide)

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, consultez la section É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 (Documentation rapide)

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

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 déplacez 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


Dans cette version, les menus, barres d’outils et espaces de travail de Dreamweaver ont également été repensés. Poursuivez la lecture 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 plus d’informations sur la personnalisation des espaces de travail, consultez la section Création d’espaces de travail personnalisés.

Voici un récapitulatif 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, consultez la section 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, consultez la section 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, consultez la section 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, consultez la section 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 plus d’informations sur le panneau Fragments de code, consultez la section 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 plus d’informations sur les modifications apportées au panneau Fichiers, consultez la section 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 ouvrir la fenêtre Ouvrir, ou sur Ctrl/Cmd + N pour afficher 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, consultez la section 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.

Améliorations apportées aux Bibliothèques 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 plus d’informations, consultez la section 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