Apprenez à extraire d'un document Photoshop des lots d'images de résolutions différentes et optimisées pour le web, notamment des images pour les écrans HiDPI.
Extraction de ressources par lots

Utilisez la nouvelle fonction d'extraction par lots pour extraire des images de résolutions différentes en ouvrant un document Photoshop depuis le panneau Extract de Dreamweaver. Vous pourrez ainsi optimiser votre site web et afficher l'image la mieux adaptée à la résolution de l'équipement utilisé. 

Extraction par lots

Chargement d'un fichier PSD dans le panneau Extract de Dreamweaver

Téléchargez et décompressez les fichiers de projet batch-extract-assets.zip. Ouvrez la page index.html dans Dreamweaver CC, et choisissez l'espace de travail Extract.

Dans le panneau Extract, cliquez sur Charger un PSD et ouvrez le fichier de projet vermilion-design.psd.

Chargement d'un fichier PSD dans le panneau Extract de Dreamweaver

Dans le panneau Extract, sélectionnez l'image d'en-tête et cliquez sur l'icône d'extraction pour accéder aux options associées.

Avant d'extraire les images, vérifiez si l'emplacement et le nom des fichiers sont adaptés à la structure de votre site. Pour ce faire, cliquez sur l'icône Modifier les préférences.

Sélection de l'image d'en-tête

Définition des préférences du panneau Extract

Par défaut, Dreamweaver extrait votre image dans trois résolutions différentes : MDPI (résolution moyenne), XHDPI (résolution élevée) et XXHDPI (résolution optimale). Dans la boîte de dialogue des préférences :

  1. Spécifiez les résolutions à extraire.

  2. Personnalisez les suffixes que Dreamweaver ajoute au nom du fichier.

  3. Choisissez les dossiers d'enregistrement des images.

Dans la section Dossier, ajoutez la mention images/ au début du chemin d'accès au fichier pour chacune des trois résolutions. Cliquez sur Appliquer. Pour finir, cliquez sur Fermer.

Définition des préférences du panneau Extract

Extraction des images

Dans les options d'extraction des ressources, vous pouvez définir d'autres détails, comme le nom de l'élément et le type de fichier.

Cliquez sur Enregistrer plusieurs éléments.

Une fois l'extraction terminée, ouvrez le panneau Fichiers pour voir le résultat du processus d'extraction par lots. Selon les préférences définies dans le panneau Extract, Dreamweaver extrait l'image d'en-tête dans trois résolutions différentes et les ajoute dans les dossiers personnalisés au sein de la structure du site. Un simple clic, et le tour est joué.

Extraction des images

Ajout d'images dans des requêtes multimédias individuelles

Ouvrez la feuille de style DeviceAware.css qui contient trois requêtes multimédias pour trois résolutions d'écran différentes (petit écran non Retina, écran moyen Retina et écran grand format Retina). Chaque requête multimédia inclut une classe CSS. Dans chaque classe, définissez la propriété background-image et ajoutez l'image extraite qui convient le mieux à chaque requête. 

L'exemple ci-contre montre la requête multimédia pour un écran moyen Retina, ainsi que la classe CSS correspondante. Pour cette résolution, il convient de choisir la version XHDPI de notre image.

Ajout d'images dans des requêtes multimédias individuelles

Utilisation de pourcentages pour définir la taille des images

Pour les sites web réactifs, utilisez des pourcentages plutôt que des pixels pour définir la largeur, la hauteur et autres propriétés de positionnement.

Pour afficher des pourcentages dans le panneau Extract, sélectionnez l'image d'en-tête et choisissez le symbole %.

Les propriétés de largeur et de hauteur sont à présent affichées en pourcentage. Si vous sélectionnez deux éléments, leur distance sera elle aussi exprimée dans cette unité de mesure. Comme toujours, vous pouvez sélectionner et copier du contenu CSS directement dans le panneau Extract et le coller dans votre code.

Utilisation de pourcentages pour définir la taille des images
04/13/2018

Contributeur : Sergiy Maidukov

Cette page vous a-t-elle été utile ?