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.

Interface utilisateur moderne

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.

Nouvelle interface utilisateur - version Dreamweaver (2017 bêta)

Interface utilisateur - versions Dreamweaver 2015

Mode Code amélioré

Edition rapide

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

Documents rapides pour fichiers CSS

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.

Documentation rapide
Documentation rapide

Conseils de code

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 :

Conseil de code pour HTML
Conseil de code pour HTML

Conseil de code pour CSS
Conseil de code pour CSS

Conseil de code pour PHP
Conseil de code pour PHP

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.

Commentaires de code

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.

Coloration du code

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.  

Coloration du code
Coloration du code

Formatage de code

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.

Redimensionnement de police en mode Code

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.

Barre d’état mise à jour

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.
Barre d’état
Barre d’état

  • Obtenir la coloration du code et les conseils de code pour différents types de fichiers. 
  • Basculer entre les modes INS et OVR en cliquant sur INS et OVR dans la barre d’état au coin inférieur droit de l’interface d’affichage en mode Code.
    • INS - mode Insertion. Permet d’insérer du texte.
    • OVR - mode Remplacement. Utiliser pour remplacer le texte existant par un nouveau texte.
  • Réduction de code en fonction de la sélection

    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.

    Cliquez la flèche vers le bas pour réduire le code sélectionné
    Cliquez la flèche vers le bas pour réduire le code sélectionné

    Après réduction du code

    Analyse du code (Linting)

    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.

    Préprocesseurs CSS

    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.  

    Définition de préférences de préprocesseur CSS 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. 

    Les préférences spécifiques de préprocesseur CSS de site sont désormais affichées dans la boîte de dialogue Configuration du site
    Les préférences spécifiques de préprocesseur CSS de site sont désormais affichées dans la boîte de dialogue Configuration du 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.

    Prise en charge de Compass

    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 :

    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.

    Spécifiez un fichier de configuration existant basé sur Ruby

    1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Compass.

    2. Cochez la case Utiliser Compass.

      Utilisation du préprocesseur Compass CSS
      Utilisation du préprocesseur Compass CSS

    3. Si vous avez déjà un fichier de configuration (* .rb) prêt à utiliser, cliquez sur Spécifiez un fichier de configuration existant basé sur Ruby, puis accédez à l’emplacement du fichier.

      Remarque :

      Ce fichier doit être situé dans le dossier racine de votre site.

    4. Cliquez sur Enregistrer.

    Spécifiez les options de configuration manuellement

    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.

    1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Compass.

    2. Cochez la case Utiliser Compass.

    3. 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.
    4. Cliquez sur Enregistrer. 

      Les fichiers de configuration sont enregistrés et la liste des fichiers est mise à jour dans le panneau Fichiers.

      Les répertoires que vous spécifiez ne seront pas créés en tant que nouveaux dossiers sous le site. Compass utilise les paramètres de configuration au cours de la compilation.

    Prise en charge de Bourbon

    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.

    Utilisation de Bourbon
    Utilisation de Bourbon

    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.

    Définition de l’emplacement des fichiers de sortie CSS

    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.

    Définition de l’emplacement des fichiers de sortie CSS
    Définition de l’emplacement des fichiers de sortie CSS

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

    Modifications apportées au panneau Fichiers

    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 :

    Les boutons de serveur distant et de test ont été modifiés

    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. 

    Modifications apportées à l’interface du panneau Fichiers
    Modifications apportées à l’interface du panneau Fichiers

    Possibilité de personnaliser les colonnes dans le panneau Fichiers

    Ajouter ou supprimer des colonnes dans le panneau Fichiers

    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.

    Ajouter ou supprimer des colonnes en mode local, distant et de test

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

    Autres modifications apportées au panneau 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.
    Nouveau bouton Définir des serveurs et bouton Actualiser déplacé
    Nouveau bouton Définir des serveurs et bouton Actualiser déplacé

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

    Modifications apportées au panneau Fragments de code

    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.

    Création 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.

    Création de fragments de code
    Création de fragments de code

    Flux de touche de déclenchement pour insertion de fragments de code

    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.

    Modifications apportées au panneau Fragments de code
    Modifications apportées au panneau Fragments de code

    Ajout de touches de déclenchement et insertion de fragments de code à l’aide de touches de déclenchement

    1. Cliquez avec le bouton droit sur un fragment de code, puis sélectionnez Modifier touche de déclenchement.

      Ajout d’une touche de déclenchement à un fragment de code
      Ajout d’une touche de déclenchement à un fragment de code

    2. Entrez le texte nécessaire dans le champ de touche de déclenchement.

      Ajout du texte de déclencheur dans le champ de touche 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.

    3. Pour ajouter des fragments de code à votre code à l’aide de touches de déclenchement, entrez le texte du déclencheur, puis appuyez sur la touche de tabulation pour insérer le fragment de code dans votre code.

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

    Récupération automatique sous Dreamweaver
    Récupération automatique sous 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.

    Prise en charge de plusieurs curseurs

    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.

    Prise en charge de plusieurs curseurs
    Prise en charge de plusieurs curseurs

    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 :

    Conseils de code
    Conseils de code pour couleur

    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.

    Utilisation de la fonction Edition rapide pour modification de couleurs

    Modifications apportées à l’espace de travail

    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.

    Nouvel espace de travail de base

    L’espace de travail de base
    L’espace de travail de base

    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.

    Préférences améliorées dans Dreamweaver

    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.

    Modifications de barre d’outils

    Modifications apportées à la barre d’outils de document

    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.

    Barre d’outils de document - versions Dreamweaver CC 2015

    Barre d’outils de document - version Dreamweaver CC (2017 bêta)


    Remarque :

    Actuellement, seul le texte est disponible pour ces modes d’affichage, l’aspect est en cours d’amélioration.

    Modifications apportées à la barre d’outils Commun

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

     

    Barre d’outils Codage – versions Dreamweaver 2015

    Barre d’outils Commun - 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 :

    1. Cliquez sur dans la barre d’outils pour ouvrir la boîte de dialogue Personnaliser.

      Personnalisation de la barre d’outils
      Personnalisation de la barre d’outils

    2. Activez ou désactivez les options de menu souhaitées sur la barre d’outils, puis cliquez sur Terminé pour enregistrer votre barre d’outils.

    Pour rétablir les options par défaut du menu, cliquez sur Restaurer la barre d’outils par défaut.

    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.

    Après modification, l’icône de gestion de fichiers se présente comme suit :

    Icône Gestion de fichiers
    Icône Gestion de fichiers

    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

    Modifications apportées au menu contextuel

    Rafraîchir l’affichage en mode En direct du menu contextuel

    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.

    Utilisez le menu contextuel pour naviguer vers l’avant et vers l’arrière sous l’affichage en mode En direct
    Utilisez le menu contextuel pour naviguer vers l’avant et vers l’arrière sous l’affichage en mode En direct

    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.

    Disponibilité du menu contextuel sur clic droit dans l’affichage en mode Code
    Disponibilité du menu contextuel sur clic droit dans l’affichage en mode Code

    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.

    Modifications apportées aux raccourcis clavier

    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

    Contenu non modifiable

    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.

    Réorganisation du menu de l’application

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

    Donnez votre avis

    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. 

    Proposition de commentaires sur Dreamweaver
    Proposition de commentaires sur Dreamweaver

    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