La nouvelle version 2014 de Dreamweaver CC inclut différentes améliorations du mode En direct et de CSS Designer, pour vous aider à créer et mettre à jour très facilement un contenu web et mobile. Le nouveau panneau Affichage rapide des éléments permet de consulter, parcourir et modifier rapidement le balisage HTML.

Vous trouverez ci-dessous ces nouvelles fonctionnalités et différentes autres améliorations, ainsi que des liens vers des ressources si vous avez besoin de plus d’aide ou d’une formation.

Affichage rapide des éléments

Vérifiez le balisage dans le document à l’aide du nouveau mode Affichage rapide des éléments, qui affiche une arborescence HTML interactive pour le contenu statique comme pour le contenu dynamique. Modifiez la structure du contenu statique directement dans l’arborescence HTML. 

Affichage rapide des éléments
Affichage rapide des éléments

Le mode Affichage rapide des éléments (Affichage > Affichage rapide des éléments) a été intégré afin d’accélérer le processus de développement. Dans les versions antérieures de Dreamweaver, vous deviez mettre en évidence les éléments HTML en mode En direct, basculer en mode Code, puis modifier les éléments. Après modification, vous deviez revenir en mode En direct pour prévisualiser les modifications apportées. Désormais, avec le mode Affichage rapide des éléments, vous pouvez afficher tous les éléments de la page dans une vue unique simple à lire et modifier le contenu statique.

Pour plus d’informations, consultez la section Affichage rapide des éléments.

Nouvelles fonctions de modification en mode En direct

Vérifiez et modifiez les propriétés des éléments HTML directement en mode En direct ; vous pouvez voir comment s’affichent les éléments sans rien actualiser.

Inspecteur Propriétés rapide

Le mode En direct affiche désormais l’inspecteur Propriétés rapide pour les éléments HTML dans vos pages. Selon l’élément HTML sélectionné, l’inspecteur Propriétés rapide permet de modifier les attributs ou du texte directement en mode En direct.

Inspecteur Propriétés rapide pour la modification des attributs d’image
Inspecteur Propriétés rapide pour la modification des attributs d’image

Inspecteur Propriétés du mode En direct pour le formatage du texte
Inspecteur Propriétés rapide pour le formatage du texte


Pour plus d’informations, consultez la section Inspecteur Propriétés en mode Affichage rapide.

Affichage d’élément

Avec la nouvelle vue Affichage d’élément, vous pouvez désormais associer des éléments HTML à des classes et des ID directement en mode En direct. La vue Affichage d’élément donne des conseils concernant les classes et les ID disponibles, afin de vous aider à afficher et à choisir rapidement l’option requise.

Affichage d’élément pour la modification des classes et des ID
Affichage d’élément pour la modification des classes et des ID

Pour plus d’informations, consultez la section Association d’éléments HTML à des classes et des ID.

Modification de texte en mode En direct

Vous pouvez à présent modifier le texte directement en mode En direct et prévisualiser les modifications apportées sans basculer entre les différentes vues.

Double-cliquez sur l’élément de texte en mode En direct pour passer en mode d’édition. Pour plus d’informations, consultez la section Modification du texte directement en mode En direct.

Modification du texte directement en mode En direct. Modification de texte en mode En direct.
Modification du texte directement en mode En direct

Inspecteur Propriétés du mode En direct

L’inspecteur Propriétés est désormais disponible en mode En direct afin que vous puissiez rapidement apporter des modifications à votre page sans passer en mode Création ou en mode Code.

Pour plus d’informations, consultez la section Inspecteur Propriétés du mode En direct.

Inspecteur Propriétés du mode En direct
Inspecteur Propriétés du mode En direct

Insertion en direct

Dans cette version, vous pouvez directement insérer des éléments HTML en mode En direct à l’aide du panneau Insertion. Les éléments sont insérés en temps réel, sans que vous ayez besoin de changer de mode. Vous pouvez également prévisualiser instantanément vos modifications. 

Pour plus d’informations, consultez la section Insertion d’éléments directement en mode En direct.

Glisser-déposer en mode En direct depuis le panneau Insertion
Glisser-déposer en mode En direct depuis le panneau Insertion

Améliorations de CSS Designer

Interface utilisateur améliorée pour le contrôle des bordures

Un contrôle à onglets permet de définir les propriétés des quatre bordures de manière simple et intuitive.

  • Contrôle à onglets pour éviter d’afficher toutes les valeurs en une seule fois, réduisant ainsi tout risque de confusion
  • Icônes intuitives et conviviales, que tout débutant peut utiliser
  • Deux ensembles d’icônes indiquant les états non définis/supprimés et désactivés
  • Onglet centralisé « Tous les côtés » permettant de définir en une fois toutes les propriétés de bordure
  • Ligne calculée vous dirigeant vers l’onglet le plus approprié lors du contrôle 
Propriétés de contrôle des bordures avant la version 2014 de Dreamweaver CC
Propriétés de contrôle des bordures avant la version 2014 de Dreamweaver CC

Propriétés de contrôle des bordures dans la version 2014 de Dreamweaver CC
Propriétés de contrôle des bordures dans la version 2014 de Dreamweaver CC


Pour plus d’informations, consultez la section Définition des propriétés de bordure.

Copier-coller de styles

Vous pouvez désormais copier des styles d’un sélecteur et les coller dans un autre. Vous pouvez copier tous les styles ou copier uniquement une catégorie spécifique de styles, comme la catégorie Mise en forme, Texte ou Bordure.

Cliquez avec le bouton droit sur un sélecteur et choisissez parmi les options disponibles :  

Copie de styles à l’aide de CSS Designer
Copie de styles à l’aide de CSS Designer

  • Si un sélecteur n’a aucun style, les options Copier et Copier tous les styles sont désactivées.
  • L’option Coller les styles est désactivée pour les sites distants qui ne peuvent pas être modifiés. En revanche, les options Copier et Copier tous les styles sont disponibles.
  • L’option Coller les styles, qui existe partiellement sur un sélecteur (chevauchement), fonctionne. L’union de tous les sélecteurs est collée.
  • L’option Copier-coller les styles fonctionne pour les différents liens des fichiers CSS :
    Importer, lier et intégrer des styles.

Zones de texte pour modification rapide

Dreamweaver comprend désormais des zones de texte pour modification rapide dans lesquelles vous pouvez indiquer le code court pour les propriétés, comme la marge, le remplissage, la bordure et le rayon de la bordure. Cette modification a été apportée pour les utilisateurs qui préfèrent écrire le code plutôt que d’utiliser la souris/le clavier pour spécifier les propriétés. 

Zones de texte pour modification rapide
Zones de texte pour modification rapide

Définition de propriétés
Définition de propriétés


Améliorations du flux de travaux de propriétés personnalisées

Auparavant, vous deviez cliquer sur + dans le volet Propriétés de CSS Designer pour ajouter des propriétés de catégorie « Autre » (ou Personnalisé). Désormais, des zones de texte - nom de propriété et valeur - sont disponibles à la fin de la liste Propriétés. Ces zones de texte permettent de saisir directement le nom de la propriété et sa valeur sans avoir à cliquer sur +.

Pour ajouter des lignes supplémentaires de propriétés personnalisées, appuyez sur la touche Tabulation.

Le nom du groupe de propriétés « Autre » est désormais « Personnalisé ».

Zones de texte réservées à l’ajout de nom de propriété et de valeur
Zones de texte réservées à l’ajout de nom de propriété et de valeur

Raccourcis clavier

Vous pouvez désormais ajouter ou supprimer des sélecteurs CSS et des propriétés à l’aide de raccourcis clavier. Vous pouvez également naviguer entre les groupes de propriétés dans le volet Propriétés.  

Raccourci Workflow
Ctrl + Alt + [Maj =] Ajoute un sélecteur (si le contrôle est dans la section de sélecteur)
Ctrl + Alt + S Ajoute un sélecteur (si le contrôle est n’importe où dans l’application)
Ctrl + Alt + [Maj =] Ajoute une propriété (si le contrôle est dans la section de propriété)
Ctrl + Alt + P Ajoute une propriété (si le contrôle est n’importe où dans l’application)
Sélectionner + Suppr Supprime un sélecteur, si un sélecteur est sélectionné
Ctrl + Alt + (Page préc/Page suiv) Change de section – quand le panneau secondaire des propriétés est actif 

Sélecteurs plus précis/moins précis

Dans cette version, lorsque vous ajoutez un sélecteur, Dreamweaver propose jusqu’à trois conseils de règle (ou moins). Vous pouvez le rendre plus ou moins précis à l’aide des touches fléchées Haut/Bas.

Sélecteurs plus précis/moins précis
Sélecteurs plus précis/moins précis

Défilement jusqu’à la catégorie

Précédemment, lorsque vous cliquiez sur la catégorie Arrière-plan ou Autre en haut du volet Propriétés dans CSS Designer, ces catégories devenaient « visibles » dans le panneau. Les catégories n’étaient pas réellement affichées en haut du volet.

Désormais, lorsque vous cliquez sur les catégories Arrière-plan et Autre (renommée en Personnalisé), ces catégories s’affichent en haut du volet.

Défilement jusqu’à la catégorie
Défilement jusqu’à la catégorie

Prise en charge des connexions SFTP avec le fichier d’identité

La version 2014 de Dreamweaver CC vous permet de vous connecter à vos serveurs de publication via SFTP en utilisant des paires de clés publiques/privées et des clés d’identité (avec ou sans phrase de sécurité). Grâce à cette amélioration sous Dreamweaver, vous avez accès à un plus grand nombre de prestataires de services d’hébergement web ; vous pouvez donc vous abonner auprès de tout prestataire de services requérant l’identification par paires de clés publiques/privées.

Remarque :

Dreamweaver prend en charge uniquement les fichiers de clés OpenSSH.

Pour plus d’informations, consultez la section Connexions SFTP.

Amélioration des fonctions Annuler/Rétablir

Jusqu’à présent, pour annuler/rétablir une opération effectuée dans le panneau CSS Designer, vous deviez cliquer sur le fichier CSS (dans les fichiers associés), puis annuler/rétablir l’opération. 

Avec les nouvelles améliorations apportées aux fonctions Annuler/Rétablir, vous pouvez annuler/rétablir une opération en mode En direct sur un document ou un formulaire dans le panneau CSS Designer. Ces modifications sont alors automatiquement répercutées dans le fichier CSS associé. Pour que vous sachiez que le fichier associé a été modifié, l’onglet du fichier concerné est mis en évidence pendant un moment (environ 8 secondes).

  • Lorsque vous annulez/rétablissez une action à partir du panneau CSS Designer, le mode En direct est automatiquement actualisé.
  • Lorsque vous modifiez un document utilisant le code source et annulez les modifications en mode En direct, l’affichage passe en mode fractionné et l’accent est mis sur le code source correspondant.

Toutes les actions Annuler/Rétablir sont enregistrées au niveau du fichier HTML. Autrement dit, les modifications manuelles apportées à un fichier CSS peuvent être annulées à partir de TOUT fichier associé. Par exemple, supposons que les fichiers style1.css et style2.css sont associés au fichier index.html. Si vous ajoutez des styles pour .h1 dans style1.css, puis annulez depuis style2.css, le style .h1 est supprimé de style1.css.  

Remarque :

pour annuler/rétablir des modifications dans un fichier JavaScript, vous devez passer sur le fichier JS concerné, puis annuler/rétablir l’opération. 

Modifications des flux de Business Catalyst et PhoneGap Build

Business Catalyst et PhoneGap Build sont désormais disponibles en tant que modules complémentaires de Dreamweaver. Il vous suffit d’installer Business Catalyst et PhoneGap Build en tant qu’extensions ; vous pourrez ensuite continuer à utiliser ces services comme vous le faisiez auparavant.

Pour installer les extensions Business Catalyst et PhoneGap Build, allez à Gérer > Parcourir les modules complémentaires, recherchez les extensions et installez-les.

Modifications de l’accès aux extensions pour Dreamweaver

Vous pouvez désormais afficher et installer les extensions Dreamweaver à l’aide d’Adobe Creative Cloud. Les extensions sont dorénavant référencées en tant que « modules complémentaires ».

Pour rechercher les modules complémentaires sur Adobe Creative Cloud, cliquez sur Fenêtre > Parcourir les modules complémentaires sous Dreamweaver. La page Modules complémentaires d’Adobe Creative Cloud s’affiche. 

Fenêtre > Extensions sous Dreamweaver CC 13.0
Fenêtre > Extensions sous Dreamweaver CC 13.0

Fenêtre > Parcourir les modules complémentaires sous Dreamweaver CC 2014
Fenêtre > Parcourir les modules complémentaires dans la version 2014 de Dreamweaver CC


Pour plus d’informations sur l’installation des modules complémentaires, consultez la section Modules complémentaires..

Modifications relatives à la synchronisation des paramètres

La fonction de synchronisation des paramètres sous Dreamweaver permet que vos paramètres soient synchronisés entre les différentes instances de Dreamweaver sur vos ordinateurs et Creative Cloud. La version 2014 de Dreamweaver CC détecte automatiquement si vous aviez activé la synchronisation des paramètres dans la version précédente de Dreamweaver et permet d’importer ces paramètres depuis Creative Cloud.

Lorsque vous lancez la version 2014 de Dreamweaver CC pour la première fois après l’installation, la boîte de dialogue suivante s’affiche : 

Importer les paramètres synchronisés
Importer les paramètres synchronisés

  • Pour importer les paramètres stockés sur Creative Cloud, cliquez sur Importer les paramètres synchronisés

Remarque : cette option n’est plus disponible par la suite.

  • Pour synchroniser les paramètres dans l’instance actuelle de Dreamweaver avec Creative Cloud, cliquez sur Sync. locale.
  • Pour synchroniser automatiquement les paramètres, sélectionnez Toujours synchroniser automatiquement les paramètres.
  • Pour afficher les options avancées de synchronisation des paramètres, cliquez sur Avancé.

Soumettre un bug ou une demande de fonctionnalité directement depuis Dreamweaver

Vous pouvez désormais accéder directement au formulaire de Wishlist et au formulaire de signalement de bug sous Dreamweaver - Aide > Soumettre un bug ou une demande de fonctionnalité.

Soumettre un bug ou une demande de fonctionnalité dans le menu Aide
Soumettre un bug ou une demande de fonctionnalité dans le menu Aide

Help Center

Découvrez comment utiliser les nouvelles fonctionnalités et comment effectuer les tâches courantes sous Dreamweaver grâce au nouveau Help Center

Contrairement aux versions antérieures, lorsque vous lancez Dreamweaver pour la première fois, vous pouvez désormais facilement découvrir les nouvelles fonctionnalités et des flux de travaux efficaces. Vous pouvez à tout moment ignorer la visite guidée des nouvelles fonctionnalités ou désactiver les messages d’aide intégrée. Si nécessaire, vous pouvez également les réactiver.

Présentation des nouvelles fonctionnalités

Dreamweaver propose désormais une mini visite guidée des nouvelles fonctionnalités de la dernière version.
Outre la présentation des nouvelles fonctionnalités, la visite guidée inclut également une galerie vidéo dans laquelle vous pouvez voir les nouvelles fonctionnalités « en action ».

La présentation des nouvelles fonctionnalités ou l’option de mini visite guidée s’affichent dès que vous lancez Dreamweaver.

Vous avez également la possibilité d’ignorer la visite guidée et d’accéder à l’écran de bienvenue pour poursuivre votre travail.

Remarque : la présentation des nouvelles fonctionnalités s’affiche après l’installation ou
la mise à jour de Dreamweaver ou lorsque vous supprimez des préférences et relancez Dreamweaver.

Visite guidée des nouvelles fonctionnalités
Visite guidée des nouvelles fonctionnalités

Vous trouverez ci-dessous un résumé de ce que propose la présentation des nouvelles fonctionnalités :

  • Message de bienvenue. Vous êtes également invité à indiquer si vous avez utilisé Dreamweaver CC afin que la visite puisse être personnalisée en conséquence.
  • Introduction fonctionnalité par fonctionnalité et brève description (avec une option permettant d’ignorer la visite guidée).
  • Galerie vidéo proposant des vidéos sur les nouvelles fonctionnalités.

Galerie vidéo

À la fin de la visite guidée des nouvelles fonctionnalités, la galerie vidéo s’affiche, avec
des vidéos sur les nouvelles fonctionnalités. Lorsque vous placez la souris sur les vignettes,
une brève description de la vidéo s’affiche.

Galerie vidéo
Galerie vidéo

Remarque :

lorsque vous utilisez Dreamweaver, vous pouvez accéder à tout moment à la
présentation des nouvelles fonctionnalités et à la galerie vidéo. Pour ce faire, accédez au menu Aide ou à l’écran de bienvenue, puis cliquez sur l’option correspondante.

Messages intégrés

Lorsque vous travaillez sur des projets, Dreamweaver vous propose maintenant des
conseils afin d’améliorer votre productivité. Ces conseils sont destinés à vous aider à accomplir la tâche en cours de manière plus efficace.

Les messages s’affichent en fonction de « déclencheurs » spécifiques. Par exemple, lorsque vous cliquez sur les sélecteurs de balises dans une vue ou cliquez avec le bouton droit de la souris sur un élément pour le vérifier, l’invite Affichage rapide des éléments apparaît.

Le mode Affichage rapide des éléments est une nouvelle fonctionnalité grâce à laquelle vous pouvez afficher et modifier le balisage HTML plus facilement qu’avec les autres méthodes que vous avez essayées (déclencheurs).

Lorsque vous avez suivi une fois les suggestions indiquées, l’invite intégrée n’apparaît
plus pour le même déclencheur. Toutefois, l’invite réapparaît pour les autres déclencheurs identifiés.

Vous pouvez désactiver l’affichage des messages intégrés via les Préférences. Pour plus
d’informations, consultez la section Désactivation ou rétablissement des messages intégrés et produit.

Exemples de messages intégrés : 

Affichage rapide des éléments

Déclencheurs :

  • Clic sur les sélecteurs de balises (toutes les vues)
  • En direct + Inspection ou clic droit + Inspection sur un élément

Message :

Message d’affichage rapide des éléments
Message d’affichage rapide des éléments

Inspecteur Propriétés du mode En direct pour les classes et les ID 

Déclencheurs :

  • Modification d’ID à l’aide de l’inspecteur Propriétés en mode Création

Message :

Message d’affichage du mode En direct
Message d’affichage du mode En direct

Messages produit

Dreamweaver s’intègre parfaitement avec de nombreuses autres applications dans
Creative Cloud ; ces flux de travaux d’intégration sont présentés par les messages produit.
L’utilisation de ces flux de travaux permet d’exploiter Adobe Creative Cloud et ses offres de la manière la plus adaptée.

Les messages produit sont affichés selon des « déclencheurs » identifiés. Par exemple,
lorsque vous tentez d’utiliser les transitions CSS, le flux de travaux « Edge Animate »
est suggéré via le message produit.

Un message produit contient une brève description de l’autre (ou du meilleur) flux de
travaux que vous pouvez utiliser dans un scénario donné. Il comprend également une vignette vidéo sur laquelle vous pouvez cliquer pour afficher une vidéo expliquant le flux de travaux.
Le bouton En savoir plus est un lien permettant d’accéder à un article/blog comportant davantage d’informations.


Les messages produit s’affichent uniquement lorsque le déclencheur identifié survient.

Remarque :

Pour voir les messages à nouveau, vous pouvez rétablir le paramètre d’aide intégrée dans les préférences.
Pour plus d’informations, consultez la section Désactivation ou rétablissement des messages intégrés et produit.

Exemples de messages produit : 

Edge Animate

Déclencheur :

  • Clic sur Transition CSS, puis sur +

Message :

Message Edge Animate
Message Edge Animate

Parfait

Déclencheur :

  • Insérer une image > Modifier les paramètres de l’image

Message :

Modifier les paramètres de l’image
Modifier les paramètres de l’image

Désactivation ou rétablissement des messages intégrés et produit

Accédez à la boîte de dialogue Préférences > Accessibilité et procédez comme suit :

  • Pour désactiver les messages, décochez la case Afficher l’aide intégrée à l’application.

Si vous réactivez les messages, les messages précédemment affichés ne le sont pas à nouveau.
Seuls les messages n’ayant pas été affichés précédemment le sont.

  • Pour voir les messages précédemment affichés, cliquez sur Rétablir.
désactiver les conseils. désactiver les messages intégrés.
Préférences pour la désactivation ou la réactivation de l’aide intégrée

Modifications apportées au menu Aide

Le menu Aide est désormais réorganisé afin de proposer un accès rapide à la présentation des nouvelles fonctionnalités, à la galerie vidéo, aux ressources d’aide et de formation et au formulaire de soumission de bug ou de demande de fonctionnalité.

Menu Aide dans les versions antérieures à Dreamweaver CC 2014
Menu Aide avant la version 2014 de Dreamweaver CC

Menu Aide sous Dreamweaver CC 2014
Menu Aide dans la version 2014 de Dreamweaver CC


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