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.
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 facile et précise 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.
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.
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.
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.
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é.
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.
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.
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.
Dix nouveaux thèmes de couleurs sont ajoutés au mode Code :
Pour en savoir plus sur les thèmes du mode Code, reportez-vous à la section Définition du thème de couleur pour le mode Code.
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 :
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 :
Lancez Dreamweaver en exécutant la commande suivante :
Remarque : mettez deux traits d’union avant l’élément args.
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.
Ouvrez les documents que vous souhaitez déboguer dans la vue En direct.
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.
Pour arrêter le débogage et rouvrir Dreamweaver en mode normal, fermez Dreamweaver, puis redémarrez-le.
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.
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.
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 :
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.
Pour en savoir plus sur les workflows Extract dans Dreamweaver, reportez-vous à la section Intégration de Dreamweaver avec Extract.
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 |
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 :
Téléchargez la version 64 bits de Dreamweaver depuis Creative Cloud et installez-la.
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 :
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 ou à droite de l’élément survolé.
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.
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.
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.
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.
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).
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é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.
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é.
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.
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 :
Pour en savoir plus, reportez-vous à la section Navigation au clavier 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.
La barre d’outils du document a été modifiée et est plus simple d’utilisation.
Les espaces de travail prêts à l’emploi disponibles avec Dreamweaver ont été modifiés et sont les suivants :
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.
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.
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écochez 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 document suivant que vous ouvrez, par exemple un HTML2, s’affiche en mode En direct plein écran.
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 mises en page à 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.
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.
Pour en savoir plus sur les documents à grille fluide, reportez-vous à la section Conception réactive à l’aide de mises en page à grille fluide.
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 en savoir plus sur l’insertion d’éléments de grille fluide, reportez-vous à la section Insertion d’éléments de grille fluide.
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.
Vous pouvez désormais sélectionner l’un des thèmes de couleurs prêts à l’emploi suivants pour le mode Code :
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.
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 en savoir plus, reportez-vous à la section Synchronisation des paramètres de Dreamweaver avec Creative Cloud.
Pour en savoir plus, reportez-vous à la section Définition du thème de couleur pour le mode Code.
La synchronisation des modes 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 modes Code et En direct en action dans les workflows suivants (lorsque le mode Code est actif) :
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.
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 :
Remarque : vous pouvez faire glisser des actifs depuis le panneau d’aperçu rapide uniquement sur Mac.
Pour obtenir des instructions détaillées sur l’utilisation du panneau Actifs, consultez la section Utilisation des actifs.
Dreamweaver inclut désormais de nouveaux modèles de démarrage très pratiques pour vous aider à démarrer vos sites web en responsive design 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) :
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.
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 :
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 :
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 :
Accédez au dossier d’installation, recherchez Dreamweaver.exe, puis cliquez sur le fichier.
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.
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.
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 :
Cette version de Dreamweaver comprend de nombreuses améliorations à l’expérience client de CSS Designer. Le panneau CSS Designer comprend également une expérience intégrée vous permettant de vous familiariser avec les workflows.
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).
Dreamweaver inclut désormais les bibliothèques jQuery mises à jour comme suit :
Les pages de démarrage de jQuery ont été supprimées.
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.
Accéder à votre compte