Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer un site web avec Dreamweaver CC

Adapter les images aux écrans

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Réalisez un site Internet et préparez les images, de sorte qu'elles soient facilement accessibles et lisibles depuis n'importe quel type de périphérique.
05:54

Transcription

Bien entendu si votre maquette Photoshop le permet, c'est-à-dire que les images contenues dans la maquette sont de très haute qualité, on va pouvoir bénéficier une fonctionnalité du panneau Extract ici qui va nous permettre de pouvoir extraire des images en différente qualité en fonction des différentes possibilités d'utilisation d'écran. C'est-à-dire que l'on soit sur du Rétina, de l'écran HD ou de l'écran traditionnel, on va dire en 72, 96 dpi. Dans le panneau d'extraction si je regarde du côté du panneau des calques, je vais avoir la possibilité en allant sur l'image numéro 1 ou l'image numéro 2 de l'extraire sous plusieurs formats. Alors on a la possibilité de pouvoir venir ici dans les préférences directement donc soit je passe par le menu Edition Préférences sur Windows soit Dreamweaver Préférences sur Macintosh, mais quoi qu'il en soit j'arriverai toujours vers cette boîte de dialogue ici qui va me permettre de choisir le type d'exportation que je souhaite avoir. Donc tout est intégralement modifiable ici, je vais pouvoir venir modifier le nom du dossier à chaque fois et le suffixe qui sera utilisé pour définir les images. Voilà donc ici soit j'exporte directement à une qualité normale d'image, soit ici je vais optimiser la résolution de cette image pour pouvoir attaquer des écrans Rétina 2x, ou Rétina 3x, etcetera. Donc je vais pouvoir avoir comme ça tout un certain nombre d'option que je vais pouvoir cocher et venir définir directement ici. Et puis je vais pouvoir bien entendu modifier l'unité de mesure employée soit pour du proportionnel soit du proportionnel par rapport à la racine, soit du pixel. Une fois que ces informations sont renseignées ici, il ne me reste plus qu'à venir choisir Enregistrer pour plusieurs éléments et non pas Enregistrer une seule image. Dès lors ou je vais Enregistrer pour plusieurs éléments, je vais avoir une boîte de dialogue qui va me permettre de définir en partie généralement le nom de l'image que je vais utiliser le dossier de destination. Là, on a gardé les mêmes préférences que l'on avait tout à l'heure lors de l'exportation c'est-à-dire dans le dossier « images ». Et si j'ouvre maintenant le dossier « images », je m'aperçois que j'ai ce dossier « mdpi » qui est arrivé « xhdpi 2x » et « xxhdpi 3x » qui étaient définis dans les préférences. Et bien entendu dans chacune de ces dossiers, l'image a été exportée moyennant le suffixe souhaité donc @1x, @2x et 3x et leur racine Bitmap ici qui était défini. Donc si je clique ici sur cette partie-là vous voyez c'est le Bitmap qui a été défini ici. Le dossier de destination ici et le format ici qui avait été inspecté par rapport aux derniers éléments d'exportation que l'on avait fait de la palette Extract. Maintenant au niveau du code, comment utiliser cela ? On va simplement rentrer dans le code source. Dreamweaver ne propose pas encore de fonction automatique. Ce qu'on va faire c'est venir rajouter manuellement l'attribut « srcset » qui n'est même pas défini dans la partie auto complète ici, c'est quelque chose que le « w3c » propose en complément dans la balise picture. Alors soit vous passez par la balise picture et vous définissez des sources, soit on passe par le « srcset ». Ici puisque c'est du manuel on va faire du « srcset » et je vous invite à vous rapprocher de notre catalogue pour voir toutes les optimisations qu'on peut faire avec les balises HTML5 au niveau des fondamentaux et de toutes les possibilités concernant le responsive web design qui s'offre à vous entre ces deux éléments. Donc l'attribut « srcset » et la balise picture. Donc sur la srcset, on va venir définir autant d'images que de possibilité. Donc ici on va copier cette partie-là, ça ira plus vite. On va dire qu'on a dans le dossier « images » ici, on a le premier dossier qui est « mdpi », m-d-p-i et l'image qui s'appelle « Bitmap@1x.png ». Donc ici on a cette possibilité de dire le « srcset » on a cette image-là. Et on va séparer par un espace et donner un indicateur. Alors cet indicateur pourrait concerner une certaine largeur ou un certain mode de résolution. Et là on va dire que c'est du 1x. Donc dans le cas où le navigateur soit dans un rapport de résolution d'une fois il prendra cette image. On va placer une virgule, en retour chariot et ici on va pouvoir venir définir cette fois-ci la deuxième image en disant je prendrais l'image « ../images/xhdpi-2x/Bitmap@2x » c'est-à-dire cette image-là, espace dans quel cas ? Dans le cas où la résolution est fois deux. Et vous avez bien compris, qu'on va faire exactement pareil maintenant pour la 3x en donnant cette information ici. Une partie de l'extraction va être automatisée puisque c'est elle qui va nous permettre de récupérer bien entendu si le format du fichier Photoshop le permet, si vous avez une maquette Photoshop qui fait 300 pixels de large, il est certain qu'on ne pourra pas exporter pour de la très haute résolution, si ce n'est de respecter ce 300 pixels. On aurait une haute résolution par rapport à ces 300 pixels. Maintenant, ça veut dire qu'il va falloir travailler nos fichiers Photoshop maquette un peu à la manière dont on travaillait nos fichiers Photoshop pour le Print et donc pour avoir des résolutions plus grandes pour avoir de bonne qualité d'image. Dernier petit détail, c'est que ces images ne sont pas forcément optimisées parce que si je regarde le poids de cette image ici que je viens et que je fais Explorer, on se retrouve avec une image qui fait quand même 4 mégas ce qui est énorme pour la bande passante, donc il est certain qu'il va falloir placer un coup de tiny png derrière pour aller optimiser tout ça. Mais déjà vous voyez qu'une grosse partie de l'extraction va pouvoir se faire automatique et on peut envisager que dans les futures versions de Dreamweaver, l'intégration se fasse de manière automatique soit sous forme d'attribut « srcset » soit sous forme de balise picture avec des éléments source intégrés.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !