L'essentiel de Dreamweaver CC 2017

Prendre connaissance des propriétés d'image

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Une fois les images en place dans le document, vous verrez quelques propriétés et attributs qu'il est important de prendre en compte. Vous devrez aussi les définir au sein de l'inspecteur de propriétés.
05:21

Transcription

En ce qui concerne les propriétés d'une image, elles vont se refléter généralement dans les attributs html de la balise img. Il est important de bien voir les trois principaux attributs nécessaires ou pas, dans cette balise. Un qui est complètement obligatoire c'est l'attribut alt= qui se retrouve en attribut secondaire dans lequel vous allez placer la description de l'image. D'une part pour permettre aux personnes qui sont équipées d'un lecteur d'écran de pouvoir visualiser entre guillemets le contenu de l'image, mais aussi pour pouvoir définir à toutes les personnes qui auront désactivé les images sur leur navigateur de pouvoir voir ce qu'il y avait sur cette image : si c'était une image d'illustration, une image importante. Enfin, de pouvoir optimiser au niveau du référencement par rapport à la description de cette image. Les deux autres attributs, largeur et hauteur, peuvent être discutables. Si vous voulez avoir une représentation de votre document html lorsqu'il se charge, qu'il soit au pixel près et qu'il ne bouge pas, il est préférable de placer la largeur et la hauteur de vos images parce que le navigateur, quand il va charger le html, n'aura pas l'image : il va retourner la chercher. Il ne connaîtra pas ses dimensions. C'est une manière de pouvoir dire au navigateur : attention elle va faire 595x300 px tu me réserves l'espace, je retourne sur le serveur, je la récupère et je te la ramène. Il est important de donner ces données. Par contre, des fois dans certains navigateurs si ces données sont écrites en dur, les CSS qui diront de bouger à 100% ne vont pas rechanger l'image en temps réel donc ça peut causer des soucis. C'est à vous de voir si vous placer ou non les dimensions de ces images. Ensuite, une fois que vous regardez l'image dans la partie de l'inspecteur des propriétés vous avez le reflet de ses dimensions. Plus vous avez accès à un certain nombre de paramétrages fireworks qui sont utilisables sous le capot, c'est-à-dire que vous allez pouvoir remodifier les paramètres d'exportation de l'image. Si vous cliquez là-dessus, vous allez dire : c'est une image en PNG 32 non pas du tout, ça va être du PNG 24 ou PNG 28.. Vous allez pouvoir modifier les paramètres d'exportation de cette image. Vous allez pouvoir remettre à jour par rapport à l'original si l'original avait été modifié. Vous allez pouvoir recadrer l'image. Si vous recadrer l'image, ça veut dire que vous allez la redimensionner dans un format plus petit ou différent. Vous allez pouvoir changer sa qualité sa netteté, sa luminosité et son contraste. Vous pouvez modifier ces éléments si l'image est une image fireworks. C'est surtout si vous êtes en relation avec Fireworks Si je regarde ici, je suis en relation avec Photoshop ce qui veut dire que je peux retourner dans les préférences de l'application et au niveau de la nature des fichiers, ici c'est un .png, dire que ce n'est pas Photoshop le principal, mais c'est Fireworks. Et je rends Fireworks principal, mais surtout je vais l'appliquer pour que ça soit pris en compte pour ce document. Et je ferme l'interface. Maintenant c'est bien Fireworks qui va me permettre de faire ça. Si je modifie l'image, je vais pouvoir modifier ses paramètres directement. Faîtes bien attention quand vous faîtes ceci. Je ne vous déconseille pas de le faire, mais c'était une fonctionnalité qui a eu en son temps une certaine presse. Aujourd'hui il est préférable comme on a vu avec l'aller-retour qu'on peut faire avec les applications, il est préférable de garder l'original de travailler avec l'original dans l'applicatif ADOC et puis de revenir exporter l'image ici. On aura toujours comme ça une qualité et la possibilité de revenir en arrière parce que si vous utilisez ces fonctionnalités là, c'est un simple aller, vous n'avez pas de billet de retour : vous écrasez l'image et c'est terminé. Il n'y aura pas de possibilité de revenir en arrière une fois que vous aurez quitté ce document. Le Ctrl+Z n'existera plus. Une autre fonctionnalité sur laquelle il faut faire attention c'est ici : si vous vous dîtes moi je ne veux pas 595 c'est un peu trop grand je pense que je vais partir sur du 340. Si vous avez le cadenas verrouillé, c'est très bien parce que vous allez respecter l'homothétie. Dreamweaver est capable de calculer l'image. Mais mon image fait toujours 322K. Regardez ici: je fais Ctrl+Z. Ici elle faisait 322K. Je passe en 340 : elle fait toujours 322K. Je n'ai pas possibilité de modifier cette chose c'est-à-dire que mon image est petite mais je charge comme si elle était grosse. Ici vous avez deux petites icônes : soit vous validez, soit vous revenez. C'est l'équivalent d'un Ctrl+Z. Au cas où le document serait enregistré tel quel vous êtes en 340, votre image fait toujours grande vous quittez, vous fermez et réouvrez le document vous avez toujours la possibilité de revenir en arrière. Si maintenant vous faîtes ceci, vous validez votre image vous dit : attention c'est terminé, vous ne pouvez plus revenir votre image fait bien 340, vous êtes passé à 48K et c'est terminé, on ne peut plus revenir en arrière. L'image a été modifiée. Pensez à travailler sur ces propriétés d'image si vous en aviez besoin. N'hésitez surtout pas à venir modifier dans les préférences les éditeurs de fichiers en fonction des formats que vous auriez, et pensez à le valider de façon à pouvoir orienter vers des applications qui seraient peut-être plus adaptées en fonction de vos besoins, en fonction de vos flux de travail. Une fois tous ces paramètres pris en compte, n'hésitez surtout pas à venir vérifier ou lancer des scripts automatiques pour vérifier les textes alternatifs, les textes secondaires de vos images pour être sûr d'en attribuer un pour chacune des images importantes de votre site.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 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 !