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

Utiliser des images d'arrière-plan

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour certaines images, mieux vaut utiliser des arrière-plans CSS que les intégrer physiquement dans le code HTML. Découvrez de quelle manière Dreamweaver et le CSS Designer autorisent un paramétrage simple et précis.
06:07

Transcription

Certaines images peuvent être utilisées directement comme image d'arrière-plan dans les CSS. Donc, par exemple ici, les images qui permettent de gérer soit ces icônes de réseaux sociaux, soit cette flèche, ici, qui va être une illustration de cet élément d'encarte toutes ces petites icônes pour les horaires, ici, cette ampoule qui va faire partie d'une phrase, tous ces éléments là peuvent être des images d'arrière-plan. Il n'est pas nécessaire de les importer physiquement au travers d'une balise je send à une autre page. Alors pour illustrer simplement la partie, ici, des réseaux sociaux, on va regarder dans dreamweaver, ici, on a un document html, qui se structure dans un avec une liste d'éléments. chaque élément possède un texte pour que les personnes munies d'un lecteur d'écran ou que les moteurs de référencement puissent récupérer une information, donc la partie visible de l'iceberg, on va dire, et ici, toutes sont placées avec des classes de type Twitter, Facebook, Linkedin. Bien sûr, on a toutes les petites images qui ont été exportées, on aurait pu utiliser des Sprites, on aurait pu utiliser d'autres techniques pour pouvoir illustrer cette image d'arrière-plan, ici, ce sont 3 images physiques, 3 petites images qui vont permettre de jouer le jeu. Alors ici, on a une feuille de style qui a été attachée, et cette feuille de style possède pour l'instant, simplement, une gestion de ces éléments de liste en disant que chacun de ces éléments possède une largeur, une hauteur, un mode d'affichage < pour les mettre les uns à la suite sur les autres et une marge gauche de telle dimension. Alors, pourquoi tant de précisions? Parce qu'en fait, on a besoin de pouvoir représenter au pixel près, des fois les affichages. C'est-à-dire que lorsqu'on va regarder un élément fireworks, ici, on s'aperçoit qu'on a une marge, et cette marge doit être identique pour chaque élément et de manière responsive. Donc, automatiquement, cela nous donne une précision avec beaucoup de chiffres après la virgule. Alors, ici on va commencer dans le CSS Designer, par venir affecter une image d'arrière-plan à chacun de ces éléments. Donc si je prends l'élément Twitter, ici, .social .twitter, je vais pouvoir venir dans la catégorie des arrières-plans, et puis venir ici, définir un chemin d'accès qui partira chercher cette image Twitter. On va pouvoir reproduire la même chose pour Facebook. Et enfin pour linkedin. Voilà, donc, les images d'arrière-plan sont placées, on voit que les dimensions sont à peu près respectées dans ce que l'on souhaiterait avoir, par contre, c'est hors de proportion, et puis ça se répète. Alors on va, pour chacun de ces éléments, devoir répéter les mêmes opérations. Donc plutôt que de les porter sur chacun de ces éléments, on va directement venir les porter ici, au sein de l'élément de liste. Donc on va se positionner sur l'élément de liste, et on va dire déjà, première chose, on va dire : << Attention, pas besoin que tu me répètes l'arrière-plan Et vous voyez que dès l'instant où je vais demander à ne pas répéter l'arrière-plan ici, sur l'élément de liste, forcément tous les éléments de liste sont concernés, et donc, une seule information pour traiter les 3 éléments. Ensuite, ce qu'on voit c'est qu'on pourrait avoir besoin déjà, de retirer cet élément, Facebook, Twitter, Linkedin. Donc ici, on va partir dans la propriété texte, et dans la propriété texte, ici au niveau de text-indent on va pouvoir placer un -9999 pixels. Alors pourquoi 9999 pixels? Parce qu'ensuite pour chercher à le remplacer ou pour une simple lisibilité d'information dans le code, on comprend que c'est nous qui avons voulu sortir le texte de la partie visible de l'iceberg, et donc à ce moment-là c'est beaucoup plus clair que si on avait utilisé une valeur décimale au trait rond Maintenant libre à vous de venir utiliser une autre valeur si vous le souhaitez, l'essentiel c'est que ce soit une valeur suffisament grande pour ne pas qu'elle se reproduise sur la partie visible, s'il y a des déplacements, des scrollings, des trucs de ce style là. Voilà. Donc, maintenant on va revenir sur la propriété des backgrounds ici, sur la propriété des arrières-plans, parce que on pourrait déjà demander d'avoir une position qui soit placée sur le centre. Mais là, on ne le voit pas parce qu'on a pas de manifestation de l'élément de li Si l'élément de li on ne le voit pas, on ne sait pas. Alors on pourrait utiliser un border red par exemple d'un pixel solide, pour permettre de le materialiser. Ou on peut mettre une couleur d'arrière-plan. Et cet arrière-plani ici, on peut le mettre, par exemple en 225, 225, 225, une grille, par exemple ici, on va pouvoir travailler en RGB Alors, soit on rentre dans une valeur manuelle, ici, moi j'aime bien le gris 225. On va replacer un 225 ici, et un dernier 225. Alors en étant RGBa, on pourrait très bien rester en RGB tout court. Maintenant on est sur du RGBa, c'est pas gênant d'utiliser cette propriété-là, de type Alpha. Ici, donc on a nos éléments et on s'aperçoit bien que on est pas du tout positionné correctement. Alors on a plusieurs propriétés au niveau du background, et je vous invite à venir les travailler toutes une par une, de regarder ces valeurs. Moi, ce que j'aime bien placer ici, au niveau du background, alors déjà on faire ça, ce sera plus facile. On va dire que 40% ce sera très bien au niveau de la proportionalité recherchée. Voilà. Et ici, repasser également à 40% Voilà. de façon à demander à cet élément de s'adapter à la taille globale du bloc parent. Par contre le bloc parent ici, on va le remettre à 7,74% et vous voyez que là, ça y est, on commence à rester dans des éléments qui deviennent rédigés à taille humaine. Et enfin, le dernier élément que l'on va placer ici, c'est, au niveau toujours de l'arrière-plan, ici, on va pouvoir lui demander de se positionner en centre centre. Et donc on va venir sur la partie position, ici, alors soit on rentre les valeurs directement, soit on utiliser des valeurs prédéfinies, comme ici, moi j'aime bien center center, et là, vous voyez, vous venez de positionner l'ensemble de ces éléments. Voilà, donc utiliser des images d'arrière-plan grâce au CSS, c'est quelque chose qui est très pratique, parce que cela va nous permettre de jongler avec des propriétés que nous offriraient pas les images ou qui serait plus complexe à obtenir avec des images et vous voyez ici, sur l'aspect responsive, on va avoir quelque chose qui s'adapte vraiment, et donc c'est un peu l'effet qui était recherché en utilisant ces images d'arrière-plan.

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 !