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.

L'essentiel de Dreamweaver CC 2017

Appliquer un style à des images

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Après avoir placé des images dans le document HTML, initiez-vous à l'utilisation des CSS sur ces images. Vous tiendrez également compte des particularités de l'utilisation responsive des contenus.
03:07

Transcription

Du côté des feuilles de style, en ce qui concerne les images, rien de vraiment trop particulier sauf ce qui concernerait éventuellement l'aspect responsive Web design ici. Si je regarde sur ces images, ma fenêtre est réduite, mais toutes les images dépassent et ne s'adaptent pas à la largeur de l'écran. En fait ce qu'il faut, c'est simplement retourner dans les CSS sur la partie image et de placer un width:100%. Le petit soucis du width:100% c'est que déjà comme vous voyez, elles se sont réduites, mais pas en hauteur. Ce n'est pas de manière homothétique. On va se dire : je vais faire un display:block parce que ça va beaucoup aider et effectivement, ça n'aide pas du tout. Par contre, il faudrait mettre correctement. L'intérêt de faire un display:block ici va simplement venir du fait que ça permettra... block ou inline-block C'est de pouvoir obtenir certains paramétrages parce que n'oublions pas que l'image quand même va être de type inline et donc tout ce qui va concerner le block ne sera pas pris en compte. Ce que je vais faire quand même c'est que je vais les préserver ici pour les avoir sous le coude mais qu'on ne s'en serve pas. Ce que je vous disais, vous voyez, l'homothétie n'a pas été respectée. Et l'homothétie n'est pas respectée tout simplement parce que les attributs dans les images vont être placés en dur, vous voyez. De ce fait là, si les attributs largeur et hauteur sont placés automatiquement le navigateur va donner préférence à cet élément. Si je les supprime vous voyez que maintenant, l'homothétie est respectée. Il me faudra tout simplement récupérer tous ces éléments et les supprimer. La meilleure façon, puisque toutes les images sont identiques, c'est de faire un Ctrl+H ici de supprimer la partie secondaire, de bien s'assurer qu'on soit dans le document actif et de faire un Remplacer tout pour pouvoir les supprimer directement, et retrouver des images homothétiques. De ce fait maintenant, on va sortir du Rechercher, si vous voulez regarder, toutes sont bonnes. Suivant comment vous allez intégrer les images au sein de Dreamweaver, cette attribut va ou ne pas être placé dans le code html, donc assurez vous quand même d'avoir un petit script au final qui va faire un Rechercher dans tous le site si vous avez l'attribut width dans les images afin de pouvoir le retirer. Sinon vous voyez que tout fonctionne extrêmement bien une fois qu'on a retiré cet attribut. Ce que vous pouvez faire également sur les images c'est de placer une opacité qui serait par exemple en 0.8. C'est du flottant avec une valeur de 0 à 1. Là on s'aperçoit un peu parce que c'est blanc mais on peut ne pas trop s'apercevoir sur certains types d'image qu'il y a cette sorte de transparence, mais si vous venez par exemple, dans le main article mettre un background-color et que cette couleur vous l'appliquez avec une couleur qui sera dans le timbre de votre site, vous vous retrouvez par exemple, avec des images qui vont pouvoir se teinter de ce timbre et ça peut donner un effet assez sympathique. Alors là j'ai laissé les marges pour qu'on puisse s'apercevoir de la couleur d'arrière-plan mais vous pouvez les supprimer. Vous voyez que vous donnez une sorte d'atmosphère supplémentaire aux images en noir et blanc, un peu comme si vous travaillez en bichrome avec les images.

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 !