Récapitulatif des nouvelles fonctionnalités

Dreamweaver CC 2017.5 prend en charge les améliorations et nouvelles fonctionnalités suivantes :

• Prise en charge de Git pour gestion de fichiers dans Dreamweaver
• Nouveaux thèmes de code
• Expérience d’intégration améliorée pour les nouveaux utilisateurs

Lisez la suite pour en savoir plus sur ces améliorations et fonctionnalités.

Prise en charge de Git dans Dreamweaver

La version Dreamweaver CC 2017.5 prend en charge Git, qui est un système de contrôle de version de source ouverte. Avec la nouvelle prise en charge de Git, vous pouvez maintenant gérer facilement vos fichiers, y compris le code source, directement dans Dreamweaver.

Vous pouvez désormais effectuer des opérations Git courantes depuis Dreamweaver, sans recourir à des outils tiers. Le nouveau panneau Git (Windows > Git) vous permet d’effectuer diverses opérations Git, y compris Commit, Push, Pull et Fetch.

Vous pouvez également utiliser Git comme outil de collaboration en créant et en fusionnant des branches et des dépôts distants. En outre, vous pouvez afficher les différences entre deux versions d’un fichier, ainsi que visualiser des historiques de fichiers et de référentiels. 

De plus, le panneau Fichiers dans Dreamweaver prend désormais en charge une nouvelle vue Git. Cette dernière vous permet de gérer les fichiers non suivis, modifiés, préparés et validés associés à votre site. 

Pour en savoir plus sur l’utilisation de Git pour le contrôle de version et la collaboration, consultez la section Utilisation de Git dans Dreamweaver.

Nouveaux thèmes de code

Dreamweaver CC 2017.5 prend maintenant en charge deux nouveaux thèmes de code : Monaki et Classic. Vous pouvez sélectionner et utiliser ces thèmes de code qui fournissent des couleurs de code similaires à Dreamweaver CC 2015. 

Sélectionnez Dreamweaver > Préférences (macOS) ou Edition > Préférences > Interface (Windows) pour contrôler l’attrait visuel et la lisibilité améliorés de ces nouveaux thèmes de code.

Expérience d’intégration améliorée

Lorsque vous lancez Dreamweaver CC 2017.5 pour la première fois, l’écran de bienvenue affiche une expérience d’intégration améliorée. La nouvelle fonctionnalité d’intégration présente l’un des deux tutoriels vidéo suivants, en fonction de l’espace de travail que vous choisissez :

• Un tutoriel rapide consacré à l’espace de travail du développeur
• Un tutoriel rapide dédié à l’espace de travail standard

Vous pouvez également accéder aux deux tutoriels vidéo depuis le menu Aide. Cliquez sur Aide > Tutoriel rapide pour afficher les tutoriels.

Autres améliorations

Dreamweaver CC 2017.5 est maintenant intégré à une nouvelle version de CEF. Avec la nouvelle version de CEF, le mode En direct de Dreamweaver affiche des éléments HTML personnalisés, des propriétés personnalisées pour CSS et plus encore.

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 :

• Prise en charge de PHP 7.1
• Amélioration des fonctions de recherche et remplacement

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

Prise en charge de PHP 7.1

Dans les versions antérieures de Dreamweaver, vous pouviez accéder aux conseils de code et aux vérifications d’analyseur de PHP 5.6. Dreamweaver 17.1 est configuré pour 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 au travers de la boîte de dialogue Configuration du site, ou via la commande Modifier > Préférences.

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 PHP

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 de la boîte de dialogue Rechercher et remplacer (Rechercher > Rechercher et remplacer dans les fichiers). Vous pouvez utiliser cette boîte de dialogue même si aucun fichier n’est ouvert dans Dreamweaver (recherche dans un dossier, par exemple).

En outre, la barre de recherche rapide du panneau Rechercher et remplacer (Rechercher > Rechercher et remplacer) est désormais déplacée au bas de l’espace de travail Dreamweaver. Utilisez ce panneau pour effectuer rapidement des opérations de recherche et remplacement de texte et d’attributs dans le document actif.

Pour plus d’informations sur les opérations de recherche et remplacement, consultez la section Recherche et remplacement de texte, de balises et d’attributs. Pour les problèmes connus liés aux opérations de recherche et remplacement dans Dreamweaver 17.1, consultez la section Problèmes connus et défauts corrigés dans les versions de Dreamweaver CC 2017.

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 (Windows) ou Commande + Alt + F (Mac)
  

Pour obtenir la liste complète des raccourcis clavier de recherche et remplacement, consultez la section Raccourcis clavier de la fonction de recherche et remplacement.

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

Création de campagnes de messagerie 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, puis 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.

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 avec des thèmes sombre et clair sélectionnables, ainsi que plusieurs améliorations comme la prise en charge de nouveaux flux de travaux tels que les 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. 

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

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 des préprocesseurs CSS dans Dreamweaver, voir 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. 

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 (Windows) ou Cmd + E (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.

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 (Windows) ou Commande + K (Mac).

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

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 booster pour la 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. 

Pour plus d’informations, consultez la section Utilisation de plusieurs curseurs pour ajouter ou modifier du texte à plusieurs endroits.

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.

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

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

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 :

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.