Guide d'utilisation Annuler

Récapitulatif des nouvelles fonctionnalités

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

Versions 2017 de Dreamweaver CC

Remarque :

La version Dreamweaver CC d’octobre 2017 (18.0) est désormais disponible. Découvrez le récapitulatif des nouvelles fonctionnalités.

Les versions 2017 de Dreamweaver CC apportent plusieurs nouvelles fonctionnalités et améliorations notamment une prise en charge de Git, un éditeur de code tout neuf, une interface utilisateur plus intuitive avec un thème sombre sélectionnable, et plusieurs améliorations comprenant une expérience d’intégration améliorée. 

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

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.5 d’Adobe Dreamweaver CC

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

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.

Utilisation de Git dans Dreamweaver
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.

Nouveaux thèmes de code dans Dreamweaver 2017.5 - Monaki et Classic
Nouveaux thèmes de code dans Dreamweaver 2017.5 - Monaki et Classic

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
Expérience d’intégration améliorée dans Dreamweaver
Expérience d’intégration améliorée dans Dreamweaver 2017.5

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

Accès aux nouvelles vidéos d’intégration depuis le menu Aide dans Dreamweaver
Accès aux nouvelles vidéos d’intégration depuis le menu Aide

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 :

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 :

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.

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

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

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

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

Interface utilisateur moderne

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

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

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

Interface utilisateur - versions Dreamweaver 2015

Nouvelle interface utilisateur - version Dreamweaver CC 2017

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

Dans cette version, les menus, barres d’outils et espaces de travail de Dreamweaver ont également été repensés. 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.

Logo Adobe

Accéder à votre compte