Cette version de Dreamweaver CC (2017 bêta) propose une interface utilisateur plus intuitive et modernisée avec un thème sombre sélectionnable, un tout nouvel éditeur de code, ainsi que diverses améliorations, notamment la prise en charge de préprocesseurs CSS.
La section suivante fournit une présentation rapide de ces nouvelles fonctionnalités et des améliorations apportées à celles existantes.
Nous sommes heureux de présenter l’interface utilisateur modernisée sur les systèmes d’exploitation Mac et Windows.
Des améliorations sont en cours d’étude et en attendant, vous trouverez ci-dessous un aperçu de la version relookée de Dreamweaver.


L’intégralité du mode Code de Dreamweaver a été revue avec un tout nouveau look et un ajout de fonctionnalité dans les zones suivantes :
La fonction d’édition rapide en mode Code place des outils intégrés et un code spécifique au contexte dans le but d’éviter le basculement entre des onglets de fichier et de modifier le code associé dans le fichier actuel.
Pour ouvrir la fonction Edition rapide, placez le curseur sur des fragments de code spécifiques et appuyez sur les touches Ctrl/Cmd-E. Par exemple :
- Dans un fichier HTML où le curseur est placé au sein d’un attribut de classe ou d’ID (nom ou valeur) ou sur le nom de balise, la fonction Edition rapide affiche toutes les règles .css correspondantes dans les fichiers associés. Vous pouvez modifier ces règles directement incorporées, sans quitter le contexte du fichier HTML.
- Une fois la correspondance de plusieurs règles établie, utilisez la liste sur la droite (ou utilisez Alt-haut/bas) pour naviguer entre elles. Cliquez sur le bouton Nouvelle règle pour créer directement une règle .css dans l’éditeur intégré.
- Dans n’importe quel fichier sur lequel doit être appliquée une valeur hexadécimale de couleur ou une couleur rgb/rgba/hsl/hsla, la fonction Edition rapide ouvre le sélecteur de couleurs pour prévisualiser et ajuster une couleur.
- Dans un fichier JavaScript où le curseur est placé sur le nom d’une fonction, la fonction Edition rapide affiche le corps de la fonction (même si elle se trouve dans d’autres fichiers référencée par une instruction requise).
- Dans un fichier .css/LESS/SCSS, lorsque le curseur est placé au dessus d’un bezier cubique () ou une fonction de chronométrage d’étapes() de transition, la fonction Edition rapide affiche un éditeur de transition basé sur une courbe graphique. Les fonctions de chronométrage prédéfinies ease, ease-in, ease-out, ease-in-out, step-start et step-end sont des points de départ valides.

La fonction Documentation rapide permet d’afficher une documentation pertinente en ligne. Utilisez la commande Cmd/Ctrl-K pour ouvrir cette fonction.
Dans un fichier CSS/LESS/SCSS sur lequel le curseur est placé sur une propriété/valeur CSS, la fonction Documentation rapide affiche une documentation provenant du projet Web Platform Docs.
Vous pouvez ouvrir simultanément plusieurs éditeurs en ligne et les visionneuses de document. Pour fermer une visionneuse de document ou un éditeur intégré unique, cliquez sur la croix « X » dans l’angle supérieur gauche ou appuyez sur la touche Echap lorsque cet élément est ouvert. Pour fermer l’ensemble des documents et éditeurs en ligne, placez le curseur sur l’éditeur de code externe principal et appuyez sur la touche Echap.

Dans cette version, les conseils de code proposent désormais des informations utiles concernant le code Javascript, HTML, CSS ou PHP sélectionné.
Ces conseils peuvent varier selon le code, mais ils contiennent habituellement :
- Une description du code sélectionné
- Une signature de fonction
- Un lien vers la documentation externe
Par exemple, pour les fonctions définies en Javascript par l’utilisateur, des commentaires qui précèdent la définition de la fonction sont affichés sous forme de description en sus de la signature de la fonction.
Pour les indicateurs de fonction PHP, la signature de la fonction s’affiche dans la section Informations.
Quelques exemples :



Les conseils de code sont proposés par défaut dans les cas suivants :
- CSS, LESS, SCSS — tous les noms des propriétés et valeurs de propriété énumérés (pour les cas où la valeur est une liste distincte de mots-clés). Les conseils CSS proposent désormais de nouvelles astuces qui n’étaient pas présentes dans Dreamweaver CC 2015. Désormais, vous pouvez également choisir les noms de couleur dans les conseils pour les propriétés telles que la couleur et la couleur d’arrière-plan.
- JS — variables et fonctions utilisant le moteur d’analyse avancé de code Tern.
- Tern effectue des déductions intelligentes pour déterminer les propriétés et les méthodes que contiennent un objet donné en analysant votre code. Outre le fichier actuel, Dreamweaver bêta recherche d’autres fichiers référencés sur la base d’une instruction requise().
- Dans le cas où Dreamweaver bêta se montre dans l’impossibilité de déterminer les conseils qui devraient être disponibles, il se reportera à une liste de heuristique de suppositions. Ces suppositions sont indiquées en italiques.
- Les conseils de code JS recourent à la correspondance active : entrez des initiales en mode chameau en mettant en majuscule la première lettre des mots liés et utilisez une autre méthode de saisie pour filtrer la liste de conseils de code plus rapidement (par exemple, tapez « gsp » pour getScrollPos).
- Vous pouvez également obtenir des conseils d’argument : lors de la saisie d’arguments d’une fonction, un indicateur situé au-dessus du curseur répertorie les types d’arguments attendus.
- Les conseils de code suivants sont conservés tels qu’ils étaient dans Dreamweaver CC 2015. Vous continuerez à obtenir des conseils statiques et dynamiques concernant les constructions de langage et les conseils spécifiques au site (PHP).
- HTML - noms de balise, noms d’attribut, valeurs d’attribut et entités
- XML - attributs et nœuds XML
- PHP - conseils de code PHP spécifiques au site
- Des conseils de code pour des attributs de bibliothèque CC sélectionnés sont également disponibles.
Vous pouvez utiliser la commande Ctrl+/ (Windows) ou Cmd+/ (Mac) pour basculer l’affichage de commentaires associés à une sélection ou une ligne unique. Dreamweaver détecte automatiquement le type de contenu et insère un commentaire approprié.
Vous pouvez également continuer à insérer des commentaires à partir de la barre d’outils.
Dreamweaver prend désormais en charge la coloration de code 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 également choisir entre des thèmes sombres et clairs.

La fonction de retrait auto est désormais une caractéristique nettement améliorée.
Cela évite les problèmes de mise en retrait manuelle du code lorsque vous voyez les balises de début et de fin sur différentes colonnes.
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
Remarque :
La fenêtre contextuelle de détection intelligente applique également un zoom lorsque vous effectuez un zoom sur le code.
Utilisez la barre d’état d’affichage en mode Code pour :
- 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.

- INS - mode Insertion. Permet d’insérer du texte.
- OVR - mode Remplacement. Utiliser pour remplacer le texte existant par un nouveau texte.
La réduction du code sur la base de la sélection est désormais disponible. Il suffit de sélectionner un bloc de code et de cliquer sur l’icône de flèche vers le bas dans la colonne du numéro de ligne.
La fonction de réduction de code basée sur la sélection ou un élément de type balise/bloc fonctionnera comme précédemment dans les versions précédentes de Dreamweaver.
Pour modifier la taille de pliage de code minimum, cliquez sur Préférences > Général.


La fonction d’analyse des codes HTML, JS et CSS fonctionne toujours comme auparavant. Toutefois, l’analyse est désormais déclenchée sur ouverture et fermeture d’un fichier.
Pour personnaliser les erreurs/avertissements, définissez les ensembles de règles d’analyse du code HTML/CSS/JS via la commande Préférences -> Linting.
Dreamweaver est désormais livré avec des préprocesseurs LESS et Sass. La fonction de compilation est déclenchée automatiquement lors de l’enregistrement de fichiers pour les fichiers LESS et Sass. Vous pouvez également déclencher manuellement la compilation à partir du menu contextuel du panneau Fichiers en cliquant avec le bouton droit sur un fichier. Si le fichier actuel est importé à son tour par un fichier parent, le fichier parent est compilé.
Vous pouvez choisir de compiler un fichier particulier ou plusieurs fichiers en appelant le menu contextuel sur les fichiers sélectionnés dans le panneau Fichiers, puis en cliquant sur l’option Compiler. Cela déclenchera une compilation sur le ou les fichiers sélectionnés et Dreamweaver n’effectuera pas de suivi ou n’essaiera pas d’interpréter l’importation concernant les fichiers sélectionnés. Toutefois, si vous sélectionnez un dossier contenant des fichiers de préprocesseur CSS, Dreamweaver déterminera les fichiers qui doivent finalement être compilés.
Sinon, vous pouvez choisir de modifier un ou plusieurs fichiers dans Dreamweaver. Chaque fois que vous enregistrez un fichier qui appartient au site actif, Dreamweaver détermine l’importation du fichier qui a été enregistré, puis compile pour vous tous les fichiers dépendants. Cela s’applique uniquement aux fichiers (qui sont modifiés et enregistrés) qui appartiennent au site actif.
Si vous modifiez des fichiers qui appartiennent à un site inactif, Dreamweaver ne détermine pas l’importation. Si vous souhaitez que Dreamweaver le fasse, vous devez basculer sur le site contenant ces fichiers, de sorte que le site soit actif.
Une fois la génération CSS terminée, la barre d’état dans la fenêtre de document prend une couleur verte. Le panneau Sortie (Fenêtre > Résultats) affiche le chemin d’accès au fichier généré.
Double-cliquez sur le message pour ouvrir le fichier CSS généré dans un onglet distinct. Le fichier est actualisé automatiquement en fonction des nouvelles modifications à chaque compilation d’un fichier Sass/LESS.
Si la génération CSS échoue avec des erreurs, la barre d’état dans la fenêtre de document prend une couleur rouge et une liste des messages d’erreur est répertoriée dans le panneau Sortie. Double-cliquez sur le message d’erreur pour accéder directement à la ligne où l’erreur s’est produite.
Remarque :
Si le fichier de sortie est associé à un document HTML en mode En direct, ce mode est automatiquement actualisé avec les nouvelles modifications CSS à chaque compilation du fichier Sass/LESS.
La fenêtre de configuration du site comporte désormais une catégorie distincte pour les préprocesseurs CSS. Les modifications apportées sont spécifiques au site.
Toutes les préférences de préprocesseur CSS sont disponibles via la commande Configuration du site > Préprocesseurs CSS > Général.
Cette fenêtre permet de configurer des paramètres de préprocesseur CSS spécifiques à chaque site.

Configuration du site - Général
Vous pouvez activer ou désactiver la compilation automatique de fichiers Sass/LESS. Ce menu permet également de configurer les paramètres de fichier de sortie CSS. La compilation est activée par défaut.
Configuration du site - Source et Sortie
Vous pouvez spécifier où placer les fichiers CSS générés ainsi que le chemin d’accès que Dreamweaver doit surveiller et sur lequel déclencher la compilation automatique lorsqu’un fichier Sass/LESS dans le chemin d’accès est modifié à l’aide d’un éditeur externe.
Configuration du site - Compass
Vous pouvez installer le cadre Compass sur le site sélectionné, puis activer ou désactiver Compass. Par défaut, Compass est désactivé. Suite à l’activation de Compass, vous pouvez pointer Dreamweaver vers le fichier config.rb sur votre site actuel ou spécifier manuellement les configurations. Cliquez sur Installer les fichiers. Dreamweaver génère et copie les fichiers Compass dans le dossier racine de votre site et sélectionne automatiquement le fichier config.rb. Pour plus d’informations, consultez la page Prise en charge de Compass.
Configuration du site - Bourbon
Vous pouvez installer Bourbon ou sélectionner le chemin d’accès si Bourbon est déjà présent sur le site. Pour plus d’informations, consultez la page Prise en charge de Bourbon.
Configuration du site - Bourbon Neat
Vous pouvez installer Bourbon Neat ou sélectionner le chemin d’accès si Bourbon est déjà présent sur le site.
Configuration du site - Bourbon Bitters
Vous pouvez installer Bourbon Bitters ou sélectionner le chemin d’accès si Bourbon est déjà présent sur le site.
Compass est outil de développement CSS open-source qui vous permet de créer des feuilles de style CSS3 à l’aide de Sass.
Dreamweaver vous permet d’utiliser Compass pour créer vos feuilles de style.
Pour utiliser une feuille de style Compass dans votre projet, effectuez l’une des opérations suivantes :
- Spécifiez un fichier de configuration existant basé sur Ruby - si vous avez installé Compass et disposez d’un fichier de configuration *.rb
- Spécifiez les options de configuration manuellement - si vous ne disposez pas d’un fichier de configuration *.rb
Remarque :
Compass peut également être installé sur votre site local, en cliquant sur Installer les fichiers dans la boîte de dialogue accessible via la commande Configuration du site > Préprocesseurs CSS > Compass.
Un clic sur Installer les fichiers remplace le fichier config.rb existant de votre site (le cas échéant) par le fichier de configuration par défaut.
Si vous n’avez pas d’options de configuration existantes, vous pouvez choisir de les spécifier manuellement, puis de créer et d’installer des fichiers.
-
Cliquez sur Spécifiez les options de configuration manuellement. Les champs suivants sont renseignés automatiquement :
- Chemin d’accès HTTP : le chemin d’accès au projet lors de l’exécution sur le serveur web. Par défaut vers « / ».
- Répertoire Images : répertoire où sont conservés les images. Il est lié à project-path.
- Répertoire d’images générées: répertoire où sont conservées les images générées. Il est lié à project_path. Valeur par défaut images_dir.
- Répertoire Polices : répertoire où sont conservés les fichiers de polices.
- Ressources relatives : indique si les fonctions d’assistance de Compass doivent générer des URL relatives à partir du CSS généré en ressources, ou des URL absolues en utilisant le chemin d’accès HTTP pour ce type de ressource.
Dreamweaver propose désormais une prise en charge de la gamme de produits Bourbon :
- Bourbon - une bibliothèque de mélange simple et léger, destinée au langage Sass
- Bourbon Neat - un cadre de grille sémantique, simple et moderne, pour les langages Sass et Bourbon
- Bourbon Bitters - styles d’échafaudage, variables et structure pour des projets Bourbon
Vous pouvez importer le cadre Bourbon en ajoutant @import "bourbon" dans votre code, suite à quoi Dreamweaver utilise la version prédéfinie de Bourbon lors de la compilation des fichiers de préprocesseur.
Sinon, vous pouvez installer les fichiers du cadre Bourbon sur votre site, de sorte que les mises à jour éventuelles de Dreamweaver n’affecteront pas vos flux de travaux de compilation. Les fichiers du cadre Bourbon sont copiés vers votre site et il s’agit de ce cadre qui est utilisé lors du déclenchement de la compilation pour les fichiers qui importent le cadre.

Une actualisation partielle est déclenchée à l’issue d’une compilation réussie. Par exemple, si vous avez ouvert des fichiers HTML (en mode En direct) disposant de fichiers CSS liés ou importés, qui peuvent ou non être présents sur le site.
Si ces fichiers CSS liés sont générés (créés ou remplacés) suite à la compilation de fichiers de préprocesseur, chacun de ces fichiers HTML est partiellement actualisé, de sorte que les styles affectés provenant de la feuille de style liée sont appliqués.
Cela signifie que vous n’avez pas à actualiser les pages HTML pour déterminer si la feuille de style générée/compilée a été appliquée ou non. Ces mises à jour sont instantanées et appliquées par une actualisation partielle, de sorte que vous restez dans le contexte de modification d’un fragment du balisage.
Vous pouvez maintenant définir où stocker les fichiers de sortie CSS.
Vous pouvez également sélectionner le sous-dossier à la racine du site qui nécessite une surveillance. Cette approche permet le déclenchement automatique du préprocesseur CSS lorsqu’un fichier est modifié de manière externe ou à partir de Dreamweaver.

Remarque :
Cette fonctionnalité est actuellement en cours d’amélioration. Des versions bêta ultérieures seront rendues disponibles dans l’optique d’optimiser sa fonctionnalité.
Le panneau Fichiers (Fenêtre -> Fichiers) a été modifié. Dans l’ensemble, ce panneau a été simplifié et privé de boutons inutiles qui ne sont pas pertinents pour votre flux de travaux. En effet, ce panneau affiche des boutons et des options de façon intuitive en fonction de votre emplacement dans le flux de travaux.
Voici un résumé des modifications apportées au panneau Fichiers :
Dans les versions antérieures, les serveurs distant et de test sont affichés dans le panneau Fichiers en mode développé. En cliquant sur ces boutons, vous modifiez l’affichage sur le côté gauche du panneau.
Dans cette version, ceux-ci ont été remplacés par une liste déroulante. L’affichage sur le côté gauche du panneau change en conséquence lorsque vous sélectionnez Distant/Test dans la liste déroulante.

Pour ajouter/supprimer des colonnes dans le panneau Fichiers, cliquez avec le bouton droit sur l’en-tête Colonne dans le panneau Fichiers pour afficher le menu contextuel.
Le menu contextuel affiche deux colonnes par défaut : Noms de fichiers et Modifié.
Si vous n’avez sélectionné aucun site, trois colonnes par défaut (Noms de fichiers, Taille et Modifié) sont affichées.
Pour ajouter ou supprimer des colonnes, faites un clic droit sur un des en-têtes de colonne en mode Local, Distant ou Test. La liste de colonne est similaire à la liste de la boîte de dialogue Configuration du site (Catégorie avancée -> Colonnes de visualisation de fichiers).

- Ajout d’un nouveau bouton nommé « Définir des serveurs » pour effectuer la définition des serveurs dans le cas où cela n’aurait pas été fait. En cliquant sur ce bouton, vous affichez une boîte de dialogue Configuration du site comprenant une catégorie serveur sélectionné pour vous aider à définir les serveurs.
- Le bouton Actualiser du panneau Fichiers est déplacé de la barre d’outils à la barre d’état.

- Aucun des autres boutons associés à la gestion de flux de travaux de serveurs (Acquérir/Placer, Connecter et Synchroniser) n’est visible si aucun serveur n’est défini.
- Les données modifiées qui s’affichent lorsque vous cliquez sur/passez sur les fichiers/dossiers de la barre d’état sont supprimées.
- Le contrôle de version SVN est obsolète
.
Un certain nombre de modifications ont été apportées à la façon dont vous travaillez avec le panneau Fragments de code.
- Aperçu de suppression de code - aperçu du code lorsqu’un fragment de code sélectionné est désormais retiré du produit.
- Simplification de l’ajout de fragments de code - une boîte de dialogue simplifiée permet maintenant de créer plus rapidement des fragments de code. Pour plus d’informations, consultez la section Création de fragments de code.
- Raccourcis clavier remplacés par une touche de déclenchement - vous pouvez désormais ajouter une touche de déclenchement pour insérer rapidement des fragments de code dans votre code. Pour plus d’informations, consultez la section Flux de touche de déclenchement pour insertion de fragments de code.
La création de fragments de code est désormais un jeu d’enfant grâce à la nouvelle boîte de dialogue simplifiée qui permet de créer rapidement des fragments de code pour une utilisation ultérieure sans avoir à renseigner d’autres champs superflus.

Vous pouvez affecter des mots-clés à des fragments de code couramment utilisés dans le bit d’insérer rapidement des fragments de code dans votre code à l’aide du champ Touche de déclenchement.

Ajout de touches de déclenchement et insertion de fragments de code à l’aide de touches de déclenchement
-
Ajout du texte de déclencheur dans le champ de touche de déclenchement
Remarque :
Les touches de déclenchement ne peuvent pas contenir de caractères spéciaux (à l’exception de caractères de soulignement). En outre, la même touche de déclenchement ne peut pas être utilisée pour deux fragments de code différents.
Si Dreamweaver s’arrête subitement en raison d’une erreur système, d’une panne de courant ou autres, vous pourrez récupérer les modifications apportées aux fichiers sur lesquels vous travailliez.
La fonction de récupération sauvegarde automatiquement tous les fichiers non enregistrés dans Dreamweaver. Si un incident se produit, la boîte de dialogue suivante s’affiche lors des prochains lancements de Dreamweaver.

Vous pouvez désormais récupérer ou supprimer les dernières modifications vers un fichier lorsque vous ouvrez Dreamweaver après un incident :
- Récupérer : sélectionnez cette option pour ouvrir la version enregistrée automatiquement de votre fichier
- Abandonner : sélectionnez cette option pour ouvrir la dernière version enregistrée de votre fichier
Remarque :
Sous Dreamweaver, l’enregistrement automatique qui se produit environ toutes les cinq secondes (en fonction du système d’exploitation).
Problèmes répertoriés par la fonction de récupération sur incident :
- Vous devez avoir enregistré le fichier au moins une fois pour utiliser cette fonction telle que recommandée.
- La récupération de fichiers est possible lorsqu’une boîte de dialogue reste ouverte au plantage de Dreamweaver.
Vous pouvez utiliser des sélections multiples pour appliquer la même modification à différentes parties de votre document, par exemple, pour ajouter le même texte à plusieurs lignes de code proches, ou pour remplacer rapidement toutes les instances de variable sans l’aide de la barre de recherche.
Vous pouvez également annuler et rétablir des modifications que vous apportez au travers de plusieurs curseurs.
Deux méthodes de base permettent de créer des sélections multiples :
- Sélection d’une colonne ou d’un bloc rectangulaire : maintenez la touche Alt enfoncée, puis déplacez l’élément verticalement ou diagonalement. Le glissement vertical ajoute des curseurs sur chaque ligne sur laquelle vous vous déplacez alors que le glissement en diagonale sélectionne un bloc rectangulaire de texte (qui correspond en réalité à un ensemble de sélections, chaque élément sur une chaque ligne). Pour créer plusieurs curseurs verticalement, utilisez le raccourci Maj-Alt-Haut/Bas pour ajouter un curseur au-dessus ou en dessous d’une sélection donnée.
- Sélection non contiguë : sélectionnez la source, maintenez enfoncée la touche Ctrl (Windows) ou Cmd (Mac) et effectuez une autre sélection. La deuxième sélection est ajoutée sous la forme d’une autre zone de sélection.
Vous pouvez également combiner ces techniques - maintenez les touches Ctrl-Alt ou Cmd-Alt, ensuite faites glisser pour ajouter une sélection en colonne/bloc rectangulaire à une sélection multiple existante.
La plupart des commandes de navigation et les modifications s’appliquent à la sélection de chaque curseur ou zone une fois que vous avez obtenu une sélection multiple. Par exemple, si vous saisissez des caractères, ceux-ci apparaissent sur chaque curseur (ou remplacent chaque sélection). Les flèches de direction permettent de déplacer chaque sélection dans la direction de la flèche.

Utilisation de conseils de code et de la fonction d’édition rapide pour accéder au sélecteur de couleurs
Les conseils de code apparaissent automatiquement lors de la saisie, mais vous pouvez également les afficher manuellement à l’aide de la combinaison Ctrl-Espace (Windows et Mac). Grâce au nouvel affichage du code, les conseils concernant l’attribut de couleur sont comme suit :

Lorsque le curseur est sur un fragment de code spécifique, appuyez sur la combinaison Ctrl/Cmd-E pour ouvrir les éditeurs en ligne de la fonction Edition rapide. Dans n’importe quel fichier sur lequel doit être appliquée une valeur hexadécimale de couleur ou une couleur rgb/rgba/hsl/hsla, la fonction Edition rapide ouvre un sélecteur de couleur pour prévisualiser et ajuster la couleur.

Des modifications ont été apportées à l’espace de travail Dreamweaver.
Suppression d’espaces de travail superflus
Les espaces de travail par défaut, en mode Extraction et Débutant sont ainsi retirés de la barre d’outils.

Le nouvel espace de travail de base est désormais l’espace de travail par défaut.
L’espace de travail de base comprend une barre d’outils et des panneaux habituels :
- Fichiers,
- Bibliothèques CC,
- Insérer,
- CSS Designer,
- DOM,
- Actifs,
- Extraits de code
Par défaut, les panneaux Fichiers et DOM sont actifs.
Le menu Préférences de Dreamweaver a été amélioré afin de vous offrir un contrôle plus direct sur les paramètres de votre projet.
Préférence de Dreamweaver | Description de la modification |
Coloration du code | Vous pouvez désormais choisir entre les thèmes sombres et claires. La personnalisation de la coloration du code n’est actuellement pas disponible. |
Format de code | Vous pouvez configurer la mise en retrait, la taille de tabulation et la taille minimum de pliage du code. D’autres préférences de mise en forme du code ne sont actuellement pas disponibles. |
Conseils de code | Vous pouvez activer ou désactiver les conseils de code. Vous pouvez choisir à quel moment insérer automatiquement des balises de fermeture. |
Polices | Vous pouvez sélectionner la police et la taille de la police sous l’affichage en mode Code. Actuellement, les autres préférences de polices ne sont pas disponibles. |
Remarque :
Cette fonction est actuellement disponible sous les systèmes d’exploitation Windows.
Le centre de la barre d’outils du document ne présente désormais que les affichages en mode Code, Fractionné et En direct.
Si vous sélectionnez un affichage, il sera surligné en bleu. Lorsque vous annulez l’ancrage de la barre d’outils du document, elle occupe très peu de place à l’horizontale.
Les options de la barre d’outils du menu sont transférées sous Windows > Barres d’outils.
Afin de comparer la barre d’outils de document des versions précédentes et celle de la version Dreamweaver CC (2017 bêta), consultez les images suivantes.


Remarque :
Actuellement, seul le texte est disponible pour ces modes d’affichage, l’aspect est en cours d’amélioration.
La barre d’outils Commun (précédemment appelée barre d’outils Codage), sur la gauche de l’espace de travail Dreamweaver, s’adapte désormais à un mode d’affichage donné. Autrement dit, lorsqu’un mode d’affichage donné est activé, seules les options de menu qui s’y appliquent sont disponibles.
Pour visualiser les modifications apportées à la barre d’outils Commun, examinez la capture d’écran de la barre d’outils Codage des versions précédentes et la nouvelle barre d’outils Commun dans la version Dreamweaver CC (2017 bêta).


Vous pouvez également choisir de personnaliser cette barre d’outils selon vos besoins en ajoutant des options de menu ou en supprimant celles qui sont indésirables.
Pour personnaliser la barre d’outils, procédez comme suit :
L’ajout d’un nouveau bouton à la barre d’outils Commun sous l’affichage en mode En direct permet à présent de basculer la barre de requêtes multimédias visuelles. Les boutons de l’affichage en mode En direct et du mode Inspection sont également ajoutés à la barre Commun.


Les options suivantes de la barre d’outils ne sont pas mises en œuvre dans cette version de Dreamweaver CC (2017 bêta) :
- Réduire la balise complète
- Réduire la sélection
- Développer tout
- Supprimer un commentaire
- Équilibrer les accolades
- Renvoi à la ligne
Les options suivantes de la barre d’outils ne sont pas mises en œuvre dans cette version de Dreamweaver CC (2017 bêta) :
- Réduire la balise complète
- Réduire la sélection
- Développer tout
- Supprimer un commentaire
- Équilibrer les accolades
- Renvoi à la ligne
Les options suivantes de la barre d’outils ne sont pas mises en œuvre dans cette version de Dreamweaver CC (2017 bêta) :
- Réduire la balise complète
- Réduire la sélection
- Développer tout
- Supprimer un commentaire
- Équilibrer les accolades
- Renvoi à la ligne
Vous pouvez désormais actualiser l’affichage en mode En direct et naviguer vers l’avant ou vers l’arrière dans le même mode à l’aide du menu contextuel.

Si vous faites un clic droit dans l’affichage en mode Code, un menu contextuel devient disponible pour utilisation. Toutefois, toutes les options ne pourront pas être utilisées pour le moment.

Les éléments de menu contextuel suivants ne sont pas disponibles dans cette version de Dreamweaver :
- Rechercher précédent
- Les outils de la fonction Conseils de code
- Sélection -> Réduire la sélection, Réduire à extérieur de la sélection, Développer la sélection, Réduire les balises entières et Réduire à l’extérieur des balises entières.
Raccourci | Ancien comportement | Nouveau comportement |
Ctrl + L | Modifier un lien ou créer un lien | Sélectionner une ligne |
Ctrl+[ | Sélectionner une balise parent | Indentation négative du code |
Ctrl+] | Sélectionner une balise enfant | Indentation du code |
Ctrl+Alt+Haut | Sélectionner une balise parent | |
Ctrl + Alt + Bas | Sélectionner une balise enfant | |
Ctrl+D | Élément dupliqué (mode En direct) | Duplication de ligne |
Ctrl+Maj+D | Acquérir un fichier | Supprimer une ligne |
Ctrl+Alt+D | Acquérir un fichier | |
Ctrl+/ | Masquer/Afficher le panneau Dom | Basculer un commentaire |
Ctrl+Maj+Espace | Insertion d’un espace insécable | Afficher des conseils de paramètre |
Ctrl+- | Zoom arrière (mode En direct) | Diminuer la taille de la police (mode Code) Zoom arrière (mode En direct) |
Ctrl+0 | Zoom 100% (mode En direct) | Rétablir la taille de la police (mode Code) Zoom 100 % (mode En direct) |
Ctrl+K | Masquer/Afficher le panneau Extraction | Documentation rapide |
Ctrl/Cmd+E | S/O | Edition rapide |
Cmd+/ ou Cmd+/ | Masquer/Afficher le panneau Dom | Basculer un commentaire |
Vous ne pouvez pas modifier les zones verrouillées dans les instances de modèles.
Toutefois, l’affichage en mode Code ne vous empêche pas actuellement de saisir du code sur un fichier en mode lecture seule ou un fichier hébergé à distance.
Cette amélioration sera intégrée dans les versions bêta ultérieures.
Le menu d’application Dreamweaver est désormais réorganisé de manière à ce qu’une fonctionnalité puisse correspondre à des options. Cette réorganisation donne la possibilité aux nouveaux utilisateurs de découvrir les options du menu en toute facilité.
Pour émettre des suggestions ou des commentaires qui permettront d’améliorer Dreamweaver, ouvrez une session et laissez un commentaire en sélectionnant l’option de commentaire intégré de Dreamweaver.
