La version 2015 de Dreamweaver CC intègre de nouvelles fonctionnalités destinées aux conceptions réactives, des fonctions améliorées d’édition de code, la possibilité de prévisualiser des pages web sur des périphériques, ainsi que des options permettant de procéder à l’extraction groupée d’images optimisées pour le web dans diverses résolutions à partir de compositions Photoshop. L’intégration du framework Bootstrap permet de créer des sites web réactifs conçus avant tout pour les appareils mobiles. Les requêtes multimédias visuelles viennent également enrichir l’expérience de conception web réactive, en vous permettant de visualiser et de modifier votre conception à différents points d’arrêt. 

Cette version inclut également plusieurs améliorations relatives aux fonctionnalités d’édition disponibles en mode En direct et dans le panneau CSS Designer. L’article suivant vous présente ces nouvelles fonctionnalités et améliorations, et comporte des liens vers des ressources de support et de formation.

Dreamweaver permet désormais de tester des pages web sur plusieurs appareils simultanément. Vous pouvez ainsi observer la mise en forme de chaque page web en fonction des différents formats, mais aussi tester les fonctionnalités interactives présentes sur vos pages. Et tout ça, sans avoir à installer une application mobile spécifique ni à établir une connexion physique entre les appareils et votre ordinateur ! Il vous suffit de scanner le code QR généré automatiquement avec chaque appareil sur lequel vous souhaitez afficher vos pages web.

Une fois activée sur l’ordinateur, l’inspection en direct est lancée sur tous les appareils connectés, ce qui vous permet de vérifier les différents éléments et d’ajuster votre design en conséquence.

Pour plus d’informations, consultez la section Aperçu et inspection de pages web sur plusieurs périphériques.

Requêtes multimédias visuelles

Les barres de requêtes multimédias visuelles constituent une représentation visuelle des requêtes multimédias présentes sur une page. Ces barres vous permettent de visualiser votre page web à différents points d’arrêt et de voir comment chaque composant de la page est repositionné dans les différentes fenêtres d’affichage. Lorsque vous affichez votre page dans différentes fenêtres, vous pouvez apporter des modifications spécifiques à l’une de ces fenêtres d’affichage sans que cela ne change l’aspect de la page dans les autres fenêtres.

L’outil Requêtes multimédias virtuelles se compose de trois barres horizontales, représentant chacune une catégorie de requêtes multimédias :

•  Vert : requêtes multimédias associées à des conditions max-width
•  Bleu : requêtes multimédias associées à des conditions min-width et max-width
•  Violet : requêtes multimédias associées à des conditions min-width

Pour plus d’informations, consultez la section Requêtes multimédias visuelles.

Prise en charge du code d’analyse Linting

Avec cette nouvelle version de Dreamweaver, vous pouvez désormais corriger les erreurs courantes dans votre code à l’aide de l’analyse Linting. La fonctionnalité Linting consiste à analyser le code pour signaler toute erreur potentielle ou utilisation suspecte du code. Dreamweaver peut analyser des fichiers HTML, CSS et JavaScript lors de leur chargement, de leur enregistrement ou de leur modification. Les erreurs et avertissements sont ensuite répertoriés dans le nouveau panneau Sortie.

Pour plus d’informations, consultez la section Analyse du code (Linting).

Prise en charge d’Emmet

Vous êtes un développeur acharné qui saisit plusieurs lignes de code dans Dreamweaver ? Gagnez du temps en utilisant des abréviations Emmet. Ces abréviations, faciles à mémoriser et à taper, se transforment en véritable code en mode Code dès que vous appuyez sur la touche de tabulation.

Pour plus d’informations, consultez la section Insertion de code à l’aide d’Emmet.

Aperçu en mode Code

Si vous travaillez en mode fractionné, vous pouvez visualiser instantanément les modifications apportées aux images et aux couleurs via les modes En direct ou Création. En revanche, si vous travaillez uniquement en mode Code, les images sont simplement signalées par un nom de fichier, ce qui n’est généralement pas très intuitif. De même pour les couleurs (à l’exception des couleurs prédéfinies) : elles ne sont désignées que par une suite de chiffres peu intelligible. Dans cette version de Dreamweaver, vous pouvez rapidement prévisualiser les images et couleurs, directement en mode Code. Cette fonctionnalité vous aide à établir un lien visuel entre les noms de fichiers et codes de couleurs, et les images et couleurs réelles auxquelles ils renvoient. Vous pouvez ainsi prendre des décisions plus rapides en matière de conception et réduire considérablement le temps de développement.

Pour plus d’informations, consultez la section Aperçu d’images et de couleurs en mode Code.

Le mode Code intègre également un aperçu des erreurs. Le numéro de la ligne où se trouve le code erroné est surligné en rouge. Lorsque vous passez la souris sur ce numéro, une brève description de l’erreur s’affiche.

Remarque : Seule la première erreur de la ligne est visible. Si la ligne contient uniquement un avertissement, la description de ce dernier s’affiche. Si la ligne contient un avertissement et une erreur, seule la description de l’erreur s’affiche.

Nouveaux fragments de code

Les fragments de code sont des parties de code que vous pouvez réutiliser plusieurs fois dans vos projets. Cette version de Dreamweaver fournit des fragments de code nouveaux et mis à jour :

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• Fragments de code JavaScript (mis à jour)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

Pour plus d’informations sur l’utilisation de fragments de code, consultez la section Utilisation de fragments de code.

En outre, vous pouvez désormais faire en sorte que les fragments de code restent à jour sur toutes vos installations Dreamweaver, à l’aide de la fonctionnalité de synchronisation dans le cloud. Pour plus d’informations sur la synchronisation de fragments de code avec Creative Cloud et vos autres installations Dreamweaver, consultez la page Synchronisation des paramètres de Dreamweaver avec Creative Cloud.

Intégration de Bootstrap

Bootstrap est le framework HTML, CSS et JavaScript gratuit le plus connu, qui permet de développer des sites web réactifs et Mobile First. Ce framework comprend des modèles CSS et HTML réactifs pour les boutons, les tableaux, la navigation, les carrousels d’image et d’autres éléments que vous pouvez utiliser sur votre page web. Quelques modules externes JavaScript facultatifs sont également disponibles, qui permettent même à des développeurs disposant de connaissances de codage basiques de développer des sites web réactifs attrayants.

Dreamweaver permet de créer des documents Bootstrap, mais aussi de modifier des pages web existantes créées avec Bootstrap. Pour commencer à créer votre site web Bootstrap, vous pouvez utiliser l’un des modèles de départ Bootstrap qui vous sont proposés dans la boîte de dialogue Nouveau document (Modèles de démarrage > Modèles Bootstrap). 

• Bootstrap-Agence
  
• Bootstrap-E-commerce
• Bootstrap-Portfolio
• Bootstrap-Produit
• Bootstrap-Immobilier
• Bootstrap-CV
  

Vous pouvez également créer un document Bootstrap personnalisé à partir de la boîte de dialogue Nouveau document (Nouveau document > Bootstrap). Développez ensuite votre site web pas à pas, en y intégrant des composants Bootstrap tels que des menus accordéon et des carrousels, à l’aide du panneau Insertion de Dreamweaver. Si vous disposez de compositions Photoshop, vous pouvez aussi utiliser Extract pour importer des images, polices, styles, textes et autres éléments dans votre document Bootstrap.

Que votre fichier Bootstrap soit déjà finalisé ou encore en cours de conception, vous pouvez le modifier sous Dreamweaver. Il vous est ainsi possible de modifier le code directement, mais aussi de le peaufiner à l’aide de fonctionnalités d’édition visuelles telles que le mode En direct, le panneau CSS Designer visuel, les requêtes multimédias visuelles et la fonction Extract. 

Pour plus d’informations, consultez la section Utilisation de fichiers Bootstrap.

Possibilité de modifier des tableaux en mode En direct

Il est désormais très simple et très rapide de modifier des tableaux en mode En direct, grâce aux options suivantes :

Pour plus d’informations, consultez les sections Redimensionnement de tableaux et Mise en forme de tableaux et de cellules.

Nouveaux menus en mode En direct

Les options d’édition du mode En direct ont été étendues grâce à la mise à disposition des menus suivants dans ce mode :

• Modifier
• Format
• Commandes
• Site
• Option « Collage spécial » sous Édition et dans le menu contextuel

Prise en charge des éléments d’interface utilisateur jQuery en mode En direct

Le panneau Insertion permet désormais d’insérer directement des widgets jQuery en mode En direct. Faites glisser l’élément souhaité depuis le panneau Insertion vers la vue En direct, et maintenez le bouton de la souris enfoncé afin d’utiliser l’une des options d’insertion suivantes :

• Guides en direct : ces repères apparaissent lorsque vous passez la souris sur un élément en mode En direct, après avoir fait glisser l’élément souhaité depuis le panneau Insertion. Les Guides en direct permettent d’insérer des éléments en haut, en bas, à gauche ou à droite de l’élément actif.

• Icône DOM : l’icône DOM apparaît si vous marquez une courte pause lorsque les Guides en direct s’affichent. Cliquez sur l’icône pour afficher la structure DOM dans une fenêtre contextuelle et, ainsi, placer l’élément à un endroit précis de la structure du document.

• Assistant de position : l’assistant de position permet de positionner l’élément avant ou après l’élément actif, voire de l’imbriquer dans cet élément (en mode En direct).

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

Panneau DOM

L’Affichage rapide des éléments est désormais remplacé par le panneau DOM (Fenêtres > DOM). Le panneau DOM reprend toutes les fonctionnalités qui étaient présentes dans l’Affichage rapide des éléments, et en ajoute de nouvelles. Ce panneau, disponible dans tous les espaces de travail, est persistant, ce qui signifie que vous pouvez ouvrir deux documents et accéder à leurs panneaux DOM simultanément.

Grâce au panneau DOM, vous pouvez :

• Faire glisser des éléments depuis le panneau Insertion afin de les insérer de manière précise dans la structure du document.
• Copier, coller, dupliquer, déplacer ou supprimer des éléments structurels du document.
• Voir n’importe quel élément de la page en contexte au sein de la structure du document : l’élément actif est mis en évidence dans le panneau DOM.

Pour plus d’informations sur l’utilisation du panneau DOM et la manière dont il permet de modifier la structure HTML, consultez la section Panneau DOM.

Conseils de code SVG dans les documents HTML

Les conseils de code sont désormais pris en charge pour tous les éléments et attributs SVG dans les documents HTML. Ces conseils de code permettent d’ajouter des éléments SVG à des documents HTML en mode Code, tout comme vous le feriez dans des documents SVG.

Aperçus technologiques

À compter de cette version, l’équipe Dreamweaver propose des versions préliminaires de certaines fonctionnalités afin de recueillir l’avis des clients. Les commentaires obtenus permettent d’améliorer ces fonctionnalités avant de les inclure sous Dreamweaver en tant qu’options à part entière. Ces fonctionnalités sont accessibles à partir de la boîte de dialogue Préférences, sous Aperçus technologiques.

Dans cette version, la fonctionnalité que vous pouvez tester est la mise en évidence du code. Le but de cette fonction est de mettre en évidence toutes les occurrences du texte sélectionné en mode Code.

Pour l’utiliser, procédez comme suit :

Vous pouvez alors parcourir le texte mis en évidence à l’aide des raccourcis clavier suivants :

• Sélectionner l’occurrence suivante : F3 (Win) ; CMD+G (Mac)
• Sélectionner l’occurrence précédente : Maj+F3 (Win) ; Cmd+Maj+G (Mac)

Aperçu personnalisé en mode Code avec l’API ShowPreview

Avec cette version de Dreamweaver, vous pouvez générer un aperçu personnalisé qui apparaît lorsque vous passez la souris sur le code en mode Code. Pour implémenter ces aperçus personnalisés, vous pouvez utiliser la nouvelle API, showPreview, en plus de l’API existante, mm:browsercontrol. Par exemple, faites appel à ces API pour afficher un aperçu de tous les paramètres d’une fonction JavaScript lorsque vous passez la souris sur le nom de cette fonction.

Pour plus d’informations, consultez la section Référence des API de Dreamweaver : fonctions relatives au mode Code.

Pliage de code

Dans les précédentes versions de Dreamweaver, vous deviez sélectionner les blocs de code en mode Code, puis les réduire. Dans cette version et les suivantes, vous pouvez réduire les blocs de code en passant simplement la souris sur les numéros de ligne correspondants, puis en cliquant sur le triangle qui apparaît.

Le pliage de code (réduction) est désormais disponible dans les fichiers HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML et SVG et s’appuie sur les blocs de balises.

Les opérations Copier, Couper, Coller et Glisser-déposer conservent l’état de pliage du code. Par exemple, lorsque vous copiez un bloc de code qui est réduit, l’opération Coller insère le texte copié sous forme de bloc réduit.

Dans les fichiers HTML, le contenu réduit intègre désormais la balise de fermeture et est restitué différemment. Par ailleurs, le nombre de caractères affichés dans un bloc de code réduit est désormais supérieur. Cela permet de prévisualiser les attributs initiaux, le cas échéant.

Pour plus d’informations, consultez la section Pliage du code.

Améliorations apportées à la fonctionnalité Extract

• Extract pour les périphériques
• Prise en charge des unités en pourcentages

Extract pour les périphériques

Les périphériques peuvent présenter des tailles, mais aussi des résolutions différentes. Lorsque vous préparez votre conception web réactive, vous devez tenir compte des différentes résolutions d’image afin d’obtenir un rendu optimal sur chaque appareil. Toutefois, il peut être décourageant de créer autant de versions aux résolutions différentes pour chaque image de votre projet.

L’option Extract de Dreamweaver simplifie grandement cette tâche. Dans la version 2015 de Dreamweaver, lorsque vous extrayez une image à partir d’une composition Photoshop, vous avez la possibilité d’en extraire plusieurs versions, correspondant à différentes résolutions. L’image provenant de Photoshop est automatiquement mise à l’échelle au cours de l’extraction, selon les résolutions prédéfinies.

Vous pouvez ensuite créer des appels renvoyant vers ces images en JavaScript ou dans des requêtes multimédias, afin qu’elles s’affichent différemment selon le périphérique utilisé. Par exemple, pour un écran Retina à haute densité, vous pouvez utiliser la version 2X de l’image. 

Pour plus d’informations, consultez la section Extraction d’images depuis des fichiers PSD.

Prise en charge des unités en pourcentages

Dans le panneau Extract, vous pouvez désormais afficher des valeurs en pourcentages pour la largeur et la hauteur des images, en plus des valeurs en pixels. Il est également possible de consulter les mesures en pourcentages.

Lorsque vous cliquez sur un actif dans le panneau Extract, le menu contextuel qui s’affiche comporte une option permettant de basculer entre les pixels et les pourcentages. L’unité sélectionnée dans ce menu est conservée lorsque vous consultez les mesures d’autres actifs.

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

Insertion imbriquée en mode En direct

Désormais, vous pouvez insérer des éléments au sein d’autres éléments en mode En direct. Lorsque vous faites glisser des éléments à partir du panneau Insertion ou Actifs, ou au sein de la vue En direct, et passez la souris sur différents éléments de la page, des indications visuelles vous permettent d’imbriquer les éléments. Vous disposez également de repères pour placer l’élément avant ou après un autre élément du document.

• Repères avant/après : s’affichent lorsque vous passez la souris sur les 30 % inférieurs ou supérieurs de l’élément.
• Indications visuelles d’imbrication : s’affichent lorsque vous passez la souris sur le milieu de l’élément (40 % de sa surface).

Modification de sélecteurs directement dans la vue Affichage d’élément

Désormais, il est possible de cliquer simplement sur le nom d’un sélecteur dans la vue Affichage d’élément pour le modifier. Ensuite, pour valider les modifications, cliquez n’importe où sur la page.

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

Les options suivantes, liées à la réduction de code, ont été supprimées de la barre d’outils de codage :

• Réduire balise entière
• Réduire la sélection

Remarque : Ces options ont également été supprimées du menu contextuel accessible par clic droit et du menu Édition.   Vous pouvez désormais réduire du code en passant la souris sur le numéro de ligne correspondant, puis en cliquant sur le triangle qui apparaît.   En outre, les options suivantes sont désormais indisponibles pour les fichiers HTML, CSS et JS :

• Surligner le code non valide
• Alertes d’erreurs de syntaxe dans la barre d’information

Vous pouvez désormais utiliser la fonctionnalité Linting pour détecter des erreurs dans le code ; les résultats de l’analyse sont affichés dans le panneau Sortie.

Optimisation de CSS Designer

• Modes Tout et Actuel
• Conseils relatifs aux valeurs des propriétés
• Codes de couleur pour requêtes multimédias
• Autres modifications

Modes Tout et Actuel

CSS Designer propose désormais deux modes différents pour l’affichage et l’édition des propriétés CSS :

• Tout : dans ce mode, l’ensemble des styles CSS, requêtes multimédias et sélecteurs du document actif sont visibles. Ce mode ne prend pas en compte les éléments sélectionnés dans la vue En direct ou Création.

Il est particulièrement adapté à la création de styles CSS, de requêtes multimédias et de sélecteurs.

• Actuel : ce mode affiche les styles calculés pour chaque élément sélectionné dans la vue En direct ou Création. Dans un fichier CSS, si vous avez sélectionné un sélecteur, ce mode affiche les propriétés de ce sélecteur.

Conseils relatifs aux valeurs des propriétés

Dreamweaver affiche désormais des conseils de code dans CSS Designer, similaires à ceux qui apparaissent en mode Code, afin de vous aider à définir de nouvelles propriétés.

Codes de couleur pour requêtes multimédias

Dans le panneau CSS Designer, les requêtes multimédias disposent maintenant de codes de couleur harmonisés sur ceux des requêtes multimédias visuelles.

•  Vert : requêtes multimédias associées à des conditions max-width
•  Bleu : requêtes multimédias associées à des conditions min-width et max-width
•  Violet : requêtes multimédias associées à des conditions min-width

Autres modifications

• Option Afficher définies : la case à cocher « Afficher définies » de la section Propriétés est maintenant activée par défaut lors du premier lancement de Dreamweaver. Toutes les modifications apportées à cette option (activation/désactivation) sont conservées pour l’ensemble des sessions suivantes de Dreamweaver.

• Défilement du panneau pour afficher au centre l’option Ajouter une propriété : lorsque vous cliquez sur « + » dans la section Propriétés, celle-ci défile afin que la ligne « Ajouter une propriété » soit affichée au centre du panneau. Si la section Propriétés est trop petite, la ligne « Ajouter une propriété » est affichée au bas du panneau.

• Mise en évidence de l’arrière-plan pendant l’ajout d’une propriété : lorsque la zone de texte « Ajouter une nouvelle propriété » est active, la ligne est surlignée avec un arrière-plan gris.

• Changement de position des boutons « + » et « - » : les boutons « + » et « - » qui apparaissent dans chaque volet du panneau CSS Designer ont été déplacés de la droite vers la gauche afin de les rendre plus visibles.

• Catégorie « Personnalisé » renommée : la catégorie « Personnalisé » s’intitule désormais « Plus ».

Modifications du workflow du serveur d’évaluation

Les améliorations apportées dans cette version au workflow du serveur d’évaluation visent à faciliter et à fluidifier la modification des documents comprenant du code côté serveur en mode En direct.

Modifications relatives à la configuration du serveur

À la différence des versions précédentes de Dreamweaver, cette nouvelle version permet de désigner un serveur spécifique en tant que serveur d’évaluation ou serveur distant (et non les deux). Les cases à cocher figurant dans l’interface de configuration du serveur ont été remplacées par des boutons radio afin de mettre en application cette règle de spécification des serveurs.

Si vous ouvrez un site ou importez les paramètres d’un site créé avec une version antérieure de Dreamweaver, et qu’un serveur unique est défini à la fois comme serveur d’évaluation et serveur distant, ce serveur fait l’objet de deux entrées. L’une de ces entrées est désignée comme serveur distant (avec le suffixe _remote) et l’autre, comme serveur d’évaluation (avec le suffixe _testing).

Envoi automatique des fichiers dynamiques

Dreamweaver synchronise désormais automatiquement les documents dynamiques vers votre serveur d’évaluation dès leur ouverture, leur création ou leur enregistrement. Dreamweaver n’affiche plus les boîtes de dialogue « Mettre à jour le serveur d’évaluation » et « Envoyer les fichiers dépendants » dans le cadre des workflows du serveur d’évaluation.

Pour plus d’informations, consultez la section Envoi automatique des fichiers dynamiques.

Modification du workflow Business Catalyst

L’extension Business Catalyst a été retirée du marché et ne pourra plus être utilisée avec Dreamweaver CC 2015 ? et versions ultérieures. Dreamweaver CC 2014.1.1 est la dernière édition compatible avec l’extension Business Catalyst.

Si vous souhaitez faire appel à Business Catalyst avec Dreamweaver CC 2015 ? et versions ultérieures, utilisez l’option de connexion SFTP sous Dreamweaver. Pour plus d’informations, consultez la documentation de Business Catalyst.

L’annonce officielle de ce changement est consultable sur le site web de Business Catalyst. 

Autres modifications

• Le panneau Insertion a été réorganisé de manière à regrouper toutes les options des catégories Commun, Mise en forme et Médias sous une seule et même catégorie plus logique : HTML.

• Les mini-vidéos de présentation ont été supprimées, de même que le lien qui permettait de les lancer à partir du menu Aide. Par ailleurs, cette option n’est pas disponible pour les langues autres que l’anglais.

• La liste déroulante disponible dans la barre de document, au bas de la page, a été épurée : désormais, seules les options Orientation, Taille réelle et Modifier les tailles y figurent.