Résumé des nouvelles fonctionnalités – Mai 2015

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. L’analyse Linting consiste à exécuter un programme pour identifier les éventuelles erreurs dans le 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, voir 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, voir Insertion de code à l’aide d’Emmet.

Préprocesseurs CSS

Aperçu des images et des couleurs en mode Code

Aperçu des images

Dreamweaver vous permet désormais d'afficher un aperçu des images en mode Code en survolant l'URL de l'image avec la souris.

Des aperçus sont maintenant possibles pour les chemins d’accès distants aux images, comme <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

Si Dreamweaver ne parvient pas à afficher l’aperçu de fichiers distants, le message « Impossible de charger l’image » apparaît.

Vous pouvez obtenir un aperçu des types de fichiers d’image suivants :

JPEG
JPG
PNG
GIF
BMP
SVG

L’aperçu de l’image s’affiche lorsque vous survolez l’URL avec la souris dans les cas suivants :

• url( );
• uri-données( )
• Valeur d’attribut Src de la balise img

Aperçu des couleurs

La fonction d’aperçu des actifs en mode Code a encore été améliorée. Dreamweaver vous permet désormais d’afficher un aperçu des couleurs en mode Code en survolant leurs valeurs avec la souris. Les formats suivants sont pris en charge :

valeurs de couleur hexadécimales à 3 et 6 chiffres : #ff0000 ;
RGB : rgb(0, 0, 0) ;
RGBA : rgba(0, 255, 228,0.5) ;
HSL : hsl(120, 100%, 50%) ;
HSLA : hsla(120, 60%, 70%, 0.3) ;
noms de couleur prédéfinis : Vert olive, Bleu sarcelle, rouge, etc.

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 des fragments de code, voir Manipulation de fragments de code.

Intégration Bootstrap

Vous pouvez désormais ouvrir des sites web créés à l’aide du framework Bootstrap (version 3 et ultérieures) dans Dreamweaver et modifier les pages à l’aide du code ou des fonctionnalités de conception visuelle. Dreamweaver reconnaît les fichiers CSS associés si les noms de fichiers contiennent « bootstrap ». 

Vous pouvez également ajouter des composants Bootstrap dans Dreamweaver (panneau Insertion) et modifier la conception des différentes fenêtres en éditant facilement et rapidement les grilles.

Pour plus d'informations, voir Utilisation de fichiers Bootstrap.

Modèles de démarrage Bootstrap

Dreamweaver inclut désormais des modèles Bootstrap très pratiques pour vous aider à démarrer vos conceptions réactives rapidement. Vous pouvez accéder aux modèles Bootstrap suivants à partir de la boîte de dialogue Nouveau document :

• Bootstrap-E-commerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-Agence
• Bootstrap-Grille

Pliage de code

Le pliage de code est désormais possible dans les fichiers HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML et SVG sur la base de blocs de balises. Lorsque vous survolez la colonne de numéro de ligne avec votre souris, un petit triangle s’affiche en regard des numéros de ligne en mode Code. Vous pouvez cliquer dessus pour réduire/développer les blocs de code. Cette nouvelle fonctionnalité de pliage de code remplace l’existante, qui est basée sur la sélection.

Les icônes de pliage de code (triangles inversés) sont affichées pour tous les blocs de balises possédant plus de deux lignes de code en mode Code.

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.

Pliage de code dans les fichiers HTML

À la différence de l’ancienne fonctionnalité de réduction du code, le contenu réduit inclut désormais la balise de fermeture et son rendu n’est pas le même qu’avant.

Le nombre de caractères affichés dans un bloc de code réduit est désormais supérieur. Cela vous permet de prévisualiser le ou les attributs initiaux, le cas échéant, dans le bloc de balise réduit. Par exemple, si la balise Div réduite comporte des attributs d’ID et de classe, le bloc réduit se présente comme suit :

Sous Windows, vous pouvez afficher un aperçu du code situé dans un bloc réduit en survolant ce dernier avec la souris. Le bloc réduit est automatiquement développé lorsque le code situé dans un bloc réduit est mis en évidence par le biais du sélecteur de balises ou des options Rechercher et remplacer, Atteindre la ligne, Affichage rapide des éléments, En direct ou Annuler/Rétablir. Une fois que le bloc de code n'est plus mis en évidence, il est automatiquement réduit.

Pliage de code dans les fichiers CSS, LESS, SASS, SCSS et JS

Les blocs de code entre accolades peuvent désormais être réduits dans les fichiers CSS, Less, Sass, SCSS et JS.

Survolez la région de réduction de code sur une ligne contenant les accolades ouvrantes « { ».

Le fait de cliquer sur l’option de réduction permet de réduire le contenu situé entre la paire d’accolades correspondante et l’aperçu s’affiche sous la forme « {...} ».

Pliage de code dans les fichiers PHP

Dans les fichiers PHP, les éléments HTML, ainsi que les blocs de code CSS et JS peuvent être réduits en plus des blocs de code PHP.

Chaque bloc PHP commençant par « <?php » et se terminant par « ?> » peut être réduit.

Survolez la région de réduction de code sur une ligne contenant