Les dernières mises à jour de l’édition Dreamweaver CC 2014 incluent l’intégration d’Extract, pour vous aider à créer des sites mobiles et de bureau à partir d’une composition PSD directement sous Dreamweaver. Les nouveaux Guides en direct permettent de placer et de réorganiser de manière précise et facile les éléments HTML, tandis que les fonctions améliorées du mode En direct permettent des modifications en temps réel.

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.

Adobe Dreamweaver CC 2014.1.1 (février 2015)

Nouvel écran d’accueil

Vous utilisez Dreamweaver pour la première fois ? Vous avez déjà utilisé Dreamweaver et cherchez à perfectionner vos connaissances ? Vous souhaitez savoir ce qui a changé par rapport à la version précédente ? Que vous soyez débutant ou utilisateur expérimenté, ou que vous souhaitiez évaluer la nouvelle version de Dreamweaver, vous pouvez maintenant obtenir toutes les ressources de formation essentielles directement sur l’écran d’accueil.

La dernière mise à jour de l’édition Dreamweaver CC 2014 fournit un accès rapide aux vidéos (y compris les nouvelles fonctionnalités), des tutoriels pratiques, des conseils et des techniques, et bien d’autres choses à partir de l’écran d’accueil.

écran de bienvenue
écran de bienvenue

Remarque :

ce nouvel écran d’accueil est disponible pour les utilisateurs affichant l’application en langue anglaise uniquement. Pour les utilisateurs affichant l’application dans d’autres langues, l’écran d’accueil et la description des nouvelles fonctionnalités de Dreamweaver CC 2014.1 s’affichent.

Améliorations apportées au panneau Extract

Les icônes Guides en direct et Affichage rapide des éléments apparaissent désormais dans le mode En direct lorsque vous faites glisser des images depuis le panneau Extract. Ces aides visuelles vous aident à placer l’image rapidement et précisément à l’endroit voulu.

Panneau Extract
Panneau Extract

Améliorations apportées aux fonctions d’édition du mode En direct

Éléments de type glisser-déposer

Vous pouvez à présent déplacer des éléments dans le mode En direct en faisant glisser le nom de balise associé. Lorsque vous survolez un nom de balise avec la souris, le curseur en forme de main s’affiche pour indiquer que vous pouvez faire glisser l’élément. Vous pouvez déposer l’élément à l’aide des Guides en direct, qui indiquent visuellement où l’élément sera positionné une fois que vous l’aurez déposé.

Cadre de sélection

Vous pouvez à présent sélectionner du texte, des images ou d’autres éléments dans une balise en cliquant et en faisant glisser n’importe où à l’intérieur d’une balise (cadre de sélection). Le cadre de sélection permet de facilement sélectionner plusieurs éléments dans une balise.

Remarque :

seules les opérations prises en charge par le navigateur sont prises en charge par le cadre de sélection dans le mode En direct.

Améliorations apportées à l’option Affichage d’élément

L’affichage d’élément affiche à présent le conseil « Classe/ID » pour indiquer clairement que vous pouvez spécifier une classe ou un ID.

Par ailleurs, les modifications apportées à l’affichage d’élément sont enregistrées lorsque vous cliquez sur « + ». Vous pouvez également appuyer sur Entrée ou Retour pour enregistrer les modifications, comme dans les versions précédentes de Dreamweaver. 

Nouveaux thèmes du mode Code

Dix nouveaux thèmes de couleurs sont ajoutés au mode Code :

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

Pour plus d’informations sur les thèmes du mode Code, consultez la section Définition du thème de couleur pour le mode Code.

Améliorations de CSS Designer

Cette mise à jour inclut quelques modifications de l’interface utilisateur CSS Designer et une modification du paramètre par défaut de la case à cocher Afficher définies.

Au lancement, la case à cocher Afficher définies est sélectionnée par défaut et les modifications apportées à cette option sont conservées sur les sessions suivantes de Dreamweaver. Par exemple, si vous désactivez cette option, la prochaine session de Dreamweaver conserve le paramètre et affiche l’option comme désactivée.

Vous trouverez ci-après les modifications apportées à l’interface utilisateur : 

  • Le panneau CSS Designer défile lors de l’ajout d’une propriété : lorsque vous cliquez sur « + » dans la section Propriétés, le panneau défile afin que la ligne Ajouter une propriété s’affiche presque au centre du panneau Propriétés. Si la section Propriétés est trop petite, le panneau défile pour afficher la ligne Ajouter une propriété au bas de la section.
  • Surlignage de l’arrière-plan : lorsque la zone de texte Ajouter une nouvelle propriété est active, la ligne est surlignée avec un arrière-plan gris. 
  • Position des boutons « + » et « - » : la position des boutons « + » et « - » qui apparaissent dans chaque section du panneau CSS Designer (Source, Sélecteurs, Requêtes multimédias et Propriétés) passent de la gauche à l’extrême droite afin de les rendre plus visibles.
  • La catégorie « Personnalisé » s’appelle dorénavant « Plus ».

Débogage à distance de la vue En direct

Désormais, vous pouvez déboguer à distance vos documents Dreamweaver ouverts dans la vue En direct, en utilisant les outils de développement de Google Chrome. Dans Google Chrome, vous pouvez utiliser le port 5471. Pour l’activer, procédez comme suit :

  1. Lancez Dreamweaver en exécutant la commande suivante :

    • Windows : <chemin_installation> -enableRemoteDebugging
    • Mac : open <chemin_installation> --args -enableRemoteDebugging

    Remarque : mettez deux traits d’union avant l’élément args.

  2. Dans la boîte de dialogue qui s’affiche pour indiquer que le port 5471 est activé pour le débogage, cliquez sur OK.

    Dreamweaver démarre.

    Cliquez sur OK dans la boîte de dialogue pour lancer Dreamweaver
    Cliquez sur OK dans la boîte de dialogue pour lancer Dreamweaver

  3. Ouvrez les documents que vous souhaitez déboguer dans la vue En direct.

  4. Pour commencer le débogage, ouvrez Google Chrome et accédez à l’élément localhost:5471. Une liste de liens vers tous les documents ouverts sous Dreamweaver s’affiche. 

    Remarque : étant donné que le nouvel écran d’accueil et le panneau Extract utilisent Chromium Embedded Framework (CEF), vous verrez également les entrées associées à ces fonctionnalités.

    À présent, vous pouvez utiliser les outils de développement de Chrome Google pour déboguer les documents souhaités.

  5. Pour arrêter le débogage et rouvrir Dreamweaver en mode normal, fermez Dreamweaver, puis redémarrez-le.

Autres améliorations

Modifications des préférences de réinitialisation du workflow

Désormais, lorsque vous réinitialisez les préférences à l’aide des raccourcis clavier, Dreamweaver crée une sauvegarde des préférences dans le dossier « Adobe Dreamweaver CC 2014.1 Backups ». Ce dossier est automatiquement créé dans le même dossier que le dossier de préférences de Dreamweaver d’origine sous Windows et Mac.

Le chemin d’accès complet du dossier de sauvegarde s’affiche dans la boîte de dialogue des préférences de réinitialisation.

Réinitialisation des préférences et paramètres
Réinitialisation des préférences et paramètres

Modification du mode d’affichage des documents dynamiques

Les documents dynamiques, tels que PHP, CFM et ASP ne s’ouvrent plus en mode Code par défaut. Ils s’ouvrent dans le même mode (Code/En direct/Fractionner) que le dernier document fermé ou le dernier document actif.

Adobe Dreamweaver CC 2014.1 (octobre 2014)

Extract sous Dreamweaver

L’intégration d’Extract avec Dreamweaver permet aux designers et développeurs web d’appliquer les informations sur la conception et d’extraire des actifs optimisés pour le web au sein de l’environnement de codage. Extract fournit une solution complète et indépendante pour l’extraction d’informations sur le style d’actifs de compositions PSD, réduisant ainsi les besoins d’aller-retour entre Photoshop et Dreamweaver.

Avec le panneau Extract de Dreamweaver, vous pouvez extraire des CSS, des images, des polices, des couleurs, des dégradés et des mesures directement dans votre page web. Outre ces fonctions principales d’Extract, Dreamweaver fournit également les fonctions uniques suivantes :

  • Accès direct aux fichiers PSD sur Creative Cloud et à tous les fichiers PSD partagés avec vous dans un dossier de collaboration
  • Conseils de code contextuels pour définir facilement des polices, des couleurs et des dégradés dans votre code CSS
  • Prise en charge de la fonction glisser-déposer pour créer des balises d’image à partir de calques PSD
  • Possibilité de coller directement des styles en mode En direct (par exemple, CSS Designer et Affichage d’élément)

L’espace de travail par défaut sous Dreamweaver (appelé Extract) affiche le panneau Extract sur la gauche afin de vous permettre de démarrer rapidement. Lors du premier lancement de Dreamweaver, le panneau Extract affiche un tutoriel simple pour vous familiariser avec les workflows Extract. Vous pouvez cliquer sur Prise en main pour commencer à utiliser Extract.

Panneau Extract Espace de travail par défaut
Panneau Extract

Pour plus d’informations sur les workflows Extract dans Dreamweaver, consultez la section Intégration de Dreamweaver avec Extract.

Architecture 64 bits

La version 64 bits de Dreamweaver est désormais disponible et prend en charge toutes les fonctionnalités, comme dans la version 32 bits. Avec cet ajout, vous pouvez maintenant télécharger les versions Dreamweaver suivantes depuis l’application Adobe Creative Cloud :

Système d’exploitation Emplacement d’installation par défaut Dossier de préférences d’application
Windows 32 bits C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows 64 bits C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac 64 bits /Applications/Adobe Dreamweaver CC 2014.1 ~/Bibliothèque/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

Forum aux questions (FAQ)

  • Une application 64 bits fonctionnera-t-elle sur une version 32 bits de Windows ? - Non
  • Puis-je installer les versions 32 bits et 64 bits sur un même ordinateur Windows ? - Non
  • Comment savoir si mon système exécute une version 32 bits ou 64 bits de Dreamweaver ?
    • Windows : Démarrez Dreamweaver. Ouvrez le Gestionnaire des tâches et recherchez le processus Dreamweaver. Si la version de Dreamweaver lancée est 64 bits, le nom du processus sera « Dreamweaver.exe ». Si la version de Dreamweaver lancée est 32 bits, le nom du processus sera « Dreamweaver.exe *32 ».
    • Mac : Ouvrez le Moniteur d’activité et sélectionnez Vue > Colonnes > Type. Recherchez Dreamweaver dans le Moniteur d’activité et notez la colonne Type. Si la version de Dreamweaver est 64 bits, la colonne Type indique « 64 bits ».

Installation de la version 64 bits de Dreamweaver

  1. Assurez-vous que l’ordinateur exécute un système d’exploitation 64 bits :

    Pour vérifier si votre ordinateur est en 64 bits, suivez la procédure décrite dans les articles ci-dessous :

  2. Téléchargez la version 64 bits de Dreamweaver depuis Creative Cloud et installez-la.

Améliorations du mode En direct

Guides en direct

Les Guides en direct sont des outils de suivi visuels du mode En direct indiquant les emplacements possibles où vous pouvez insérer un élément dans les scénarios suivants :

  • En faisant glisser l’élément depuis le panneau Insertion
  • En faisant glisser l’élément depuis le panneau Actifs
  • En faisant glisser (déplaçant) des éléments en mode En direct

Remarque :

les Guides en direct ne sont pas pris en charge dans les documents à grille fluide.

Les Guides en direct apparaissent lorsque vous passez le curseur sur les différents éléments de la page avant de faire glisser un élément. Ils peuvent apparaître en haut, en bas, à gauche, à droite de l’élément survolé.

  • Au-dessus et en dessous - S’affichent lorsque vous survolez tous les types d’éléments/balises, à l’exception des balises incorporées. Lorsque la souris survole les premiers 50 % (partie supérieure) de l’élément, les guides s’affichent au-dessus de l’élément survolé. Lorsque la souris survole les derniers 50 % (partie inférieure) de l’élément, les guides s’affichent en dessous de l’élément survolé.
Guides en direct au-dessus et en dessous des éléments survolés
Guides en direct au-dessus et en dessous des éléments survolés

  • Gauche et droite - S’affichent lorsque vous survolez des balises incorporées, par exemple les balises <a>, <span> ou les balises pour lesquelles la « propriété Flottante » est définie.
Guides en direct sur la droite et la gauche des éléments survolés
Guides en direct sur la droite et la gauche des éléments survolés

Insertion d’un élément structurel avec précision

Vous pouvez utiliser l’option Affichage rapide des éléments avec les Guides en direct pour insérer un élément HTML plus précisément dans la structure du document.  

Lorsque vous mettez en pause pendant un certain temps avant de déposer l’élément, l’icône Affichage rapide des éléments (</>) apparaît. Lorsque la souris survole cette icône, l’Affichage rapide des éléments s’ouvre et vous pouvez déposer l’élément en mode Affichage rapide des éléments.

Icône de l’Affichage rapide des éléments
Icône Affichage rapide des éléments permettant une insertion précise

Vous pouvez couper, copier, coller et supprimer des éléments en mode En direct à l’aide du menu contextuel accessible en cliquant avec le bouton droit. Vous pouvez également dupliquer les éléments ou sélectionner la balise parent ou enfant à l’aide du menu contextuel en mode En direct.

Remarque :

vous pouvez aussi utiliser les raccourcis clavier (par exemple, sous Windows, Ctrl+x, Ctrl+c, Ctrl+v, Ctrl+d et la touche Supprimer) en mode En direct.

Tout d’abord, sélectionnez un élément en mode En direct pour voir l’Affichage d’élément. Cliquez ensuite avec le bouton droit dans la zone de la balise pour afficher les options de menu contextuel ci-dessus. Les options sont opérationnelles au niveau de la balise. 

Modifications de l’Affichage d’élément

Désormais, vous pouvez non seulement appliquer des sélecteurs à un élément, mais également créer un sélecteur dans la source CSS souhaitée et attribuer une requête multimédia à l’aide de l’Affichage d’élément. Lorsque vous tapez un sélecteur qui n’existe pas dans une feuille de style et appuyez sur Entrée, l’affichage d’élément propose des options permettant de sélectionner une source CSS et une requête multimédia.

Options de source CSS et de requête multimédia dans l’Affichage d’élément
Options de source CSS et de requête multimédia dans l’Affichage d’élément

Si vous ne souhaitez pas sélectionner de source CSS ou de requête multimédia, appuyez sur Echap pour fermer les options.

Vous pouvez également désormais cliquer avec le bouton droit sur un sélecteur appliqué pour accéder au code correspondant (option Atteindre le code) ou pour coller des styles copiés (option Coller les styles).

Options Atteindre le code et Coller les styles dans l’affichage d’élément
Options Atteindre le code et Coller les styles dans l’affichage d’élément

Remarque :

si le même sélecteur est ajouté à plusieurs requêtes multimédias, les sous-options sont affichées par l’option Atteindre le code. Si les sélecteurs copiés sont des sélecteurs de pseudo ou des sélecteurs composés, les sous-options sont affichées par l’option Coller les styles.

Déplacement d’éléments en mode En direct

Désormais, Dreamweaver prend en charge le déplacement d’élément (niveau balise) en mode En direct. Vous pouvez sélectionner un élément en mode En direct et le glisser-déposer vers un autre emplacement.

  1. Cliquez sur l’élément à déplacer puis, lorsque l’Affichage d’élément (zone bleue autour de l’élément) apparaît, faites-le glisser. Lorsque la fonction « glisser » est initialisée, le curseur se transforme pour indiquer que l’élément est prêt à être déplacé.

  2. Les éléments de référence (les éléments par rapport auxquels vous souhaitez positionner l’élément déplacé) sont mis en évidence avec une bordure bleue. Les Guides en direct (en vert) apparaissent pour indiquer les emplacements de dépôt possibles par rapport à l’élément de référence.

Remarque :

seuls les éléments statiques peuvent être déplacés en mode En direct. Les balises de contenu dynamique, telles que PHP, ne peuvent pas être déplacées.

Lorsque vous mettez en pause pendant un certain temps avant de déposer l’élément, l’icône Affichage rapide des éléments (</>) apparaît. Lorsque la souris survole cette icône, l’Affichage rapide des éléments s’ouvre et vous pouvez déposer l’élément en mode Affichage rapide des éléments. 

Dreamweaver prend désormais en charge la navigation des éléments de page à l’aide du clavier afin de satisfaire les utilisateurs qui préfèrent utiliser le clavier et accélérer le processus de conception web. Vous pouvez utiliser :

  • Les flèches Haut et Bas pour naviguer entre les éléments de page. La navigation au clavier en mode En direct facilite l’accès aux éléments imbriqués et entourés.
  • La touche de tabulation pour parcourir les sélecteurs en mode Affichage d’élément

Pour plus d’informations, consultez la section Navigation au clavier en mode En direct.

Quick Tag Editor en mode En direct

Le fait d’appuyer sur Ctrl+T sous Windows ou Cmd+T sur Mac en mode En direct affiche dorénavant Quick Tag Editor pour l’élément sélectionné. Quick Tag Editor peut avoir trois états : Modifier la balise, Envelopper avec balise et Insérer du code HTML. Vous pouvez basculer entre ces états en utilisant les touches Ctrl/Cmd + T.

Quick Tag Editor en mode En direct
Quick Tag Editor en mode En direct

Modifications apportées à l’espace de travail de Dreamweaver

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

La barre d’outils du document a été modifiée et est plus simple d’utilisation.

  • Les options Création et En direct ont été fusionnées en une même commande (liste déroulante).
Options Création et Affichage en direct dans la dernière mise à jour - Dreamweaver&nbsp;CC (octobre&nbsp;2014)
Options Création et En direct dans la dernière mise à jour - Dreamweaver CC (octobre 2014)

Boutons Création et En direct dans la barre d’outils du document dans les versions précédentes
Boutons Création et En direct dans la barre d’outils du document dans les versions précédentes

  • Le champ Titre du document est maintenant placé dans l’inspecteur Propriétés.
Barre d’outils de document sous Dreamweaver&nbsp;CC (octobre 2014)
Barre d’outils du document dans la dernière mise à jour - Dreamweaver CC (octobre 2014)

Champ Titre du document déplacé vers l’inspecteur Propriétés sous Dreamweaver&nbsp;CC (octobre 2014)
Champ Titre du document déplacé dans l’inspecteur Propriétés dans la dernière mise à jour - Dreamweaver CC (octobre 2014)

Champ Titre dans la barre d’outils du document dans les versions précédentes
Champ Titre dans la barre d’outils du document dans les versions précédentes

  • Les boutons Inspecter et Code en direct sont remplacés par des icônes.
Icônes Code en direct et Inspecter dans la dernière mise à jour - Dreamweaver CC (octobre 2014)
Icônes Code en direct et Inspecter dans la dernière mise à jour - Dreamweaver CC (octobre 2014)

Boutons Code en direct et Inspecter dans les versions précédentes
Boutons Code en direct et Inspecter dans les versions précédentes

  • Les options Précédent, Transférer et Actualiser sont regroupées dans la barre d’adresse et placées au centre de la barre d’outils du document.
Barre d’adresse avec les options Précédent, Transférer et Actualiser sous Dreamweaver&nbsp;CC (octobre 2014)
Barre d’adresse avec les options Précédent, Transférer et Actualiser dans la dernière mise à jour - Dreamweaver CC (octobre 2014)

Barre d’adresse avec les options Précédent, Transférer et Actualiser dans les versions précédentes
Barre d’adresse avec les options Précédent, Transférer et Actualiser dans les versions précédentes

  • Les icônes Aperçu/Débogage dans le navigateur, Options d’affichage en direct et Gestion des fichiers sont regroupées et alignées à droite de la barre d’outils du document.
Icônes Aperçu/Débogage dans le navigateur, Options du mode Affichage en direct et Gestion des fichiers sous Dreamweaver&nbsp;CC (octobre 2014)
Icônes Aperçu/Débogage dans le navigateur, Options d’affichage en direct et Gestion des fichiers dans la dernière mise à jour - Dreamweaver CC (octobre 2014)

Icônes Aperçu/Débogage dans le navigateur, Options du mode Affichage en direct et Gestion des fichiers dans les versions précédentes
Icônes Aperçu/Débogage dans le navigateur, Options du mode Affichage en direct et Gestion des fichiers dans les versions précédentes

Modifications apportées à l’espace de travail par défaut

Les espaces de travail prêts à l’emploi disponibles avec Dreamweaver ont été modifiés et sont les suivants :

  • Code
  • Création
  • Extract
Espaces de travail
Espaces de travail

L’espace de travail par défaut est désormais Extract. Cet espace de travail affiche le panneau Extract sur la gauche et la page web sur la droite. Lors du premier lancement de Dreamweaver, le panneau Extract affiche un tutoriel simple pour vous familiariser avec les workflows Extract. Pour commencer à utiliser Extract, cliquez sur Prise en main.

Espace de travail Extract
Espace de travail Extract

L’affichage par défaut pour les documents HTML est désormais l’affichage fractionné (fractionnement horizontal avec les modes En direct et Code). Les fichiers dynamiques, tels que les fichiers répertoriés ci-dessous, s’ouvrent par défaut en mode Code plein écran. Lorsque vous fractionnez la vue, ces documents sont affichés en mode Création et en mode Code.

  • PHP
  • Modèle PHP (Example.dwt.php)
  • ASP
  • Modèle ASP (Example.dwt.asp)
  • JSP
  • Modèle JSP (Example.dwt.jsp)
  • CFM
  • Modèle CFM (Example.dwt.cfm)
Affichage par défaut pour les documents HTML en modes En direct et Code
Affichage par défaut pour les documents HTML en modes Affichage en direct et Affichage du code

Affichage par défaut pour les documents dynamiques en mode Affichage du code plein écran
Affichage par défaut pour les documents dynamiques en mode Code plein écran

Conseil : pour basculer vers l’affichage Création, cliquez sur la liste déroulante en regard de l’option « En direct » et cliquez sur Création. Pour modifier le fractionnement horizontal en fractionnement vertical, sélectionnez Affichage > Fractionner à la verticale. Le mode En direct/Création apparaît dorénavant sur la gauche. Pour obtenir le mode En direct/Création sur la droite, désélectionnez Affichage > En direct à gauche ou Création à gauche.

Dreamweaver mémorise désormais l’état du mode En direct que vous sélectionnez pour un document HTML, puis applique ensuite le même affichage à tous les documents HTML que vous ouvrez ultérieurement. Par exemple, supposons que HTML1 est le document que vous ouvrez initialement. L’affichage du document est fractionné avec les modes Code et En direct. Supposons que vous modifiez l’affichage de ce document en mode En direct plein écran. Le prochain document que vous ouvrez, par exemple HTML2, est affiché en mode En direct plein écran. 

Modifications apportées aux documents à grille fluide

Prise en charge de la modification en mode En direct

De nouvelles fonctions de modifications en mode En direct ont été introduites dans la précédente version de Dreamweaver CC. Dans cette version, ces fonctionnalités de modification en mode En direct sont maintenant également disponibles pour les documents à grille fluide. Les possibilités de modification en mode En direct rendent le développement d’une page web fluide beaucoup plus rapide, car vous pouvez modifier et afficher instantanément un aperçu des modifications dans la même vue.

Les fonctionnalités suivantes permettent de modifier les documents à grille fluide en mode En direct :

Vous pouvez également désormais visualiser la structure du DOM HTML d’un document à grille fluide à l’aide de l’Affichage rapide des éléments.

Remarque : le mode Affichage rapide des éléments dans les présentations à grille fluide ne permet pas de copier, coller, dupliquer ou réorganiser les éléments HTML.

L’interface utilisateur pour l’affichage et la modification des documents à grille fluide a été modifiée afin de prendre en charge les fonctionnalités de modification en mode En direct. Dorénavant, lorsque vous sélectionnez un élément dans un document à grille fluide, l’Affichage d’élément apparaît avec les autres commandes, telles que Masquer les éléments et Commencer une nouvelle ligne.

Options de grille fluide dans les versions précédentes
Options de grille fluide dans les versions précédentes

Options du mode grille fluide avec Affichage d’élément sous Dreamweaver&nbsp;CC (octobre 2014)
Options de grille fluide avec l’Affichage d’élément dans la dernière mise à jour - Dreamweaver CC (octobre 2014)


Par ailleurs, les documents à grille fluide s’ouvrent maintenant directement en mode En direct. Vous ne pouvez plus afficher ni modifier des documents à grille fluide en mode Création.

Barre d’outils de document sous Dreamweaver&nbsp;CC (octobre 2014)
Barre d’outils du document dans la dernière mise à jour - Dreamweaver CC (octobre 2014)

Barre d’outils du document dans un document à grille fluide dans les versions précédentes
Barre d’outils du document dans un document à grille fluide dans les versions précédentes

Pour plus d’informations sur les documents à grille fluide, consultez la section Conception réactive à l’aide de mises en forme à grille fluide.

Modifications apportées au workflow d’insertion

La boîte de dialogue Insérer des documents à grille fluide comporte désormais un « assistant de position ». L’assistant de position permet de positionner l’élément inséré avant ou après l’élément actif, ou même de l’imbriquer avec cet élément (en mode En direct). Pour plus d’informations sur l’insertion d’éléments de grille fluide, consultez la section Insertion d’éléments de grille fluide.

Modification apportée à l’option Gérer les éléments masqués

L’option Gérer les éléments masqués (bouton en forme d’œil dans la barre d’outils du document) a été déplacée dans le menu contextuel dans les documents à grille fluide.


Pour gérer les éléments masqués, cliquez avec le bouton droit sur la page à grille fluide, puis sélectionnez « Gérer les éléments masqués » pour afficher les éléments masqués. Pour masquer ces éléments, vous pouvez cliquer sur l’icône en forme d’œil dans l’affichage HUD. 

Option Gérer les éléments masqués dans le menu contextuel sous Dreamweaver&nbsp;CC (octobre 2014)
Option Gérer les éléments masqués dans le menu contextuel dans la dernière mise à jour - Dreamweaver CC (octobre 2014)

Icône en forme d’œil pour la gestion des éléments masqués dans les versions précédentes
Icône en forme d’œil pour la gestion des éléments masqués dans les versions précédentes

Thèmes de couleurs prêts à l’emploi du mode Code

Vous pouvez désormais sélectionner l’un des thèmes de couleurs prêts à l’emploi suivants pour le mode Code :

  • Classique (par défaut ; comme dans les versions précédentes de Dreamweaver)
  • Raven
  • Slate
  • Blanche
  • Geneva
Thèmes Classique, Raven, Slate, Blanche et Geneva
Thèmes Classique, Raven, Slate, Blanche et Geneva

Utilisez les préférences de coloration du code pour spécifier un thème pour le mode Code. Vous pouvez personnaliser le thème en sélectionnant des modèles de couleurs pour les arrière-plans, les premiers plans et les caractères masqués.

Pour chaque type de document répertorié, vous pouvez personnaliser les couleurs pour différentes catégories de balises et éléments de code, par exemple les balises associées aux formulaires ou les identificateurs JavaScript. Par exemple, avec le thème Raven appliqué à tous les types de document, vous pouvez sélectionner une couleur bleue pour les balises associées au formulaire dans les documents HTML uniquement.

Tous les paramètres personnalisés dans un thème sont enregistrés lorsque vous cliquez sur Appliquer et le thème personnalisé peut être utilisé dans les différentes sessions de Dreamweaver.

Remarque :

l’option Synchroniser les paramètres, dans les préférences, permet de conserver la synchronisation des thèmes de code personnalisés entre les différentes instances de Dreamweaver. Pour plus d’informations, consultez la page Synchronisation des paramètres de Dreamweaver avec Creative Cloud.

Pour plus d’informations, consultez la section Définition du thème de couleur pour le mode Code.

Synchronisation des vues Code et En direct

La synchronisation des vues Code et En direct permet de voir instantanément un aperçu des modifications apportées au code en mode En direct. Contrairement aux précédentes versions de Dreamweaver, il est inutile de cliquer sur Actualiser pour afficher un aperçu des modifications en mode En direct.

Vous pouvez voir la synchronisation des vues Code et En direct en action dans les workflows suivants (lorsque la vue Code est active) :

  • Opérations sur du texte, par exemple, Couper/Copier/Coller/Supprimer, Annuler/Rétablir.
  • Déplacement d’éléments dans l’Affichage rapide des éléments lorsque le mode Code est actif.
  • Saisie en mode Code.
  • Actions Supprimer/Dupliquer/Copier/Coller en mode Affichage rapide des éléments (options de clic droit).
  • Opérations dans l’inspecteur Propriétés, par exemple, modification des formats de texte - Gras/Italique, Modification de la classe, ID, Format, Propriétés de la page et Appliquer des polices.
  • Ajout/suppression de classes ou d’ID en utilisant des conseils de code en mode Code.
  • Insertion d’éléments, par exemple, balise Div, image, lien hypertexte, et d’éléments structurels depuis le panneau Insertion en mode Code.
  • Ajout/modification des styles CSS dans la balise <style>. 
  • Modification du code dans les fichiers CSS.

Remarque :

toutes les modifications apportées au code JavaScript requièrent une actualisation ou un rechargement complet afin d’être reflétées en mode En direct. 

Panneau Actifs en mode En direct

Le panneau Actifs (Fenêtres > Actifs) est désormais disponible en mode En direct. Le panneau Actifs permet de gérer les tâches suivantes :

  • Glisser ou insérer des actifs (images, adresses URL, couleurs ou multimédias) depuis le panneau d’aperçu rapide ou la vue de la liste du panneau Actifs.

Remarque : vous pouvez faire glisser des actifs depuis le panneau d’aperçu rapide uniquement sur Mac.

  • Copier une valeur chromatique et la coller dans un champ de texte de Dreamweaver, comme les propriétés de CSS Designer, le mode Code, le sélecteur de couleurs, ou même d’autres applications telles que le Bloc-notes.

Remarque :

 

  • Tout comme la catégorie Scripts, les catégories Modèle et Bibliothèque ne sont plus pertinentes en mode Code ; elles ont donc été masquées dans le panneau Actifs du mode En direct.
  • Dans cette version de Dreamweaver CC, les catégories Flash et Films sont regroupées dans une même catégorie appelée « Requêtes multimédias ».
     

Panneau Actifs en mode En direct
Panneau Actifs en mode En direct

Panneau Actifs en modes Création et Code
Panneau Actifs en modes Création et Code


Pour obtenir des instructions détaillées sur l’utilisation du panneau Actifs, consultez la section Utilisation des actifs.

Nouveaux modèles de démarrage

Dreamweaver inclut désormais de nouveaux modèles de démarrage très pratiques pour vous aider à démarrer vos sites web réactifs plus rapidement. Vous pouvez choisir l’un des modèles suivants dans la boîte de dialogue Nouveau document (Fichier > Nouveau > Modèles de démarrage) :

  • Page À propos
  • Billet de blog
  • E-commerce
  • E-mail
  • Portfolio
Nouveaux modèles de démarrage très réactifs
Nouveaux modèles de démarrage très réactifs

Lorsque vous sélectionnez un modèle et cliquez sur Créer dans la boîte de dialogue Nouveau document, Dreamweaver vous invite à enregistrer le nouveau document. Lors de l’enregistrement du document, vous créez une copie du modèle, que vous pouvez ensuite personnaliser selon vos besoins.

Réinitialiser les préférences au démarrage

Sous Dreamweaver, le dépannage des problèmes peut parfois nécessiter que vous supprimiez le dossier des préférences comportant tous les paramètres personnalisés. Avant cette version, vous deviez accéder manuellement au dossier des préférences sur votre ordinateur et le supprimer. Cette version permet de supprimer les préférences en un clic à l’aide une boîte de dialogue :

Réinitialiser les préférences
Réinitialiser les préférences

Vous pouvez ouvrir la boîte de dialogue Réinitialiser les préférences en maintenant enfoncées les touches de raccourci suivantes lors du démarrage de Dreamweaver :

  • (Windows) Touche Windows + Ctrl + Maj
  • (Mac) Cmd + Option + Maj

Remarque :

utilisez l’option Réinitialiser les préférences judicieusement. Lorsque vous réinitialisez les préférences et les paramètres, tous les paramètres personnalisés de l’espace de travail, les raccourcis clavier, les extensions et les préférences liées à l’application seront perdus.

Sous Mac, maintenez les touches Cmd+Option+Maj enfoncées lors du démarrage de Dreamweaver (en cliquant sur l’icône Dreamweaver dans le dock).

Sous Windows, procédez comme suit :

  1. Accédez au dossier d’installation, recherchez Dreamweaver.exe, puis cliquez sur le fichier.

  2. Maintenez les touches Windows + Ctrl + Maj enfoncées et double-cliquez sur Dreamweaver.exe.

Assurez-vous de maintenir enfoncées les touches de raccourcis indiquées ci-dessous, même si la boîte de dialogue Contrôle de compte d’utilisateur apparaît. 

Autres améliorations

Modifications relatives à la synchronisation des paramètres

Vous pouvez désormais importer les paramètres de la version précédente de Dreamweaver qui ont été enregistrés sur Creative Cloud en utilisant la boîte de dialogue Préférences. Tous les paramètres locaux sont remplacés par les paramètres importés du cloud et sont appliqués lors du prochain lancement de Dreamweaver.

Importation des paramètres des versions précédentes de Dreamweaver
Importation des paramètres des versions précédentes de Dreamweaver

De même, à compter de cette version, en plus des paramètres synchronisés dans les versions précédentes, les paramètres suivants sont également synchronisés avec Creative Cloud :

Modifications apportées à CSS Designer

Cette version de Dreamweaver comprend de nombreuses améliorations à l’expérience utilisateur de CSS Designer. Le panneau CSS Designer comprend également une expérience intégrée vous permettant de vous familiariser avec les workflows.

Modifications de l’écran Bienvenue

L’option Modèles de site de l’écran Bienvenue est désormais remplacée par Modèles de départ. Vous pouvez accéder à l’option Modèles de site dans la boîte de dialogue Nouveau document (Fichier > Nouveau).

Mises à jour de la version jQuery

Dreamweaver inclut désormais les bibliothèques jQuery mises à jour comme suit :

  • jQuery - 1.8.3 à jQuery - 1.11.1
  • Interface utilisateur jQuery - 1.9.2 à l’interface utilisateur jQuery - 1.10.4

Les pages de démarrage de jQuery ont été supprimées. 

Mise à jour de PhoneGap

L’intégration directe de Dreamweaver avec PhoneGap Build pour l’assemblage d’applications n’est pas prise en charge dans la dernière mise à jour de l’édition Dreamweaver CC 2014 (octobre 2014) et versions ultérieures.

Cependant, vous pouvez accéder directement au service PhoneGap Build en ligne et utiliser les dernières mises à jour des fonctionnalités pour assembler vos applications web en tant qu’applications mobiles natives. Pour plus d’informations, consultez la section Utilisation de PhoneGap Build avec la dernière mise à jour vers 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