Créer un site web avec Dreamweaver CC

Positionner des images

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
L'insertion d'images a été améliorée en précision grâce aux nombreux outils que propose Dreamweaver. Découvrez la palette DOM (Document Object Model, arborescence d'éléments HTML), l'outil d'insertion et l'éditeur de code.
06:26

Transcription

Il se peut que dans certains cas, les images, par exemple, comme dans le footer ici, soient associées avec le bloc, lors de l'exportation par Fireworks. Donc, il n'y a aucun souci là-dessus. Vous pouvez récupérer le format png de fireworks, récupérer ces images ou placer toute autre image comme bon vous semble dans le footer. Quoi qu'il en soit, dans la partie du dossier des images de Dreamweaver toutes ces images ont été extraites et préparées. Donc, vous n'êtes pas nécessairement obligé de passer par le panneau d'extraction ici. Quoi qu'il en soit, si vous souhaitez passer par l'extraction, vous pourrez récupérer toutes les images qui font partie du dossier intégrante et qui seront donc isolées au niveau des calques. Alors pour pouvoir intégrer ces images une fois récupérées dans le dossier de Dreamweaver ici, dans le dossier image, il y a plusieurs manières de procéder. La première va être de sélectionner n'importe quel élément du footer, de sélectionner la balise <a puisqu'on sait que l'image doit se placer à l'intérieur de ce balise, et vous allez venir dans le menu Insertion, Image tout simplement. A ce moment là, Dreamweaver vous dit est-ce que tu veux l'intégrer avant le a, après le a ? Est-ce que tu veux envelopper le a avec ou est-ce que tu veux l'imbriquer ? Envelopper avec une image comme c'est une singlet, on ne peut pas, c'est pour ça que c'est grisée. Mais, on aurait la possibilité si c'était une balise ouvrante fermante, de pouvoir envelopper la balise avec l'occurrence ici a, qui a été sélectionnée. Donc nous ce qu'on veut c'est l'imbriquer donc on va dire je veux l'imbriquer. Il me dit OK, c'est quoi ton image eh ben je vais pointer vers la footer 01. Et je dis OK. Et là l'image va s'intégrer directement dans la balise a, vous voyez je suis a img à l'intérieur. Alors l'image dépasse un petit peu dans Partie. Ce n'est pas grave on va retourner directement dans la partie ici conteneur. On va dire qu'il s'agit alors, on peut utiliser le css designer. On va sélectionner footer. On va venir dans le sélecteur ici se positionner juste après le ul li. Voilà ici, juste ici. Et on va venir rajouter un nouveau sélecteur. Alors je vais me faire un petit peu de place, parce que c'est vrai que c'est un peu contigu dans cette partie-là. Et je vais dire que je vais rajouter une balise qui sera donc ici : .conteneur. Alors c'est vrai que l'image n'a pas été sélectionnée si l'image était sélectionnée à niveau-là, quand vous sélectionnez à ce niveau et que vous faites un plus, forcément, vous avez le sélecteur par défaut qui est proposé. Vous jouez avec les flèches, ou vous réduisez flèche bas, vous augmentez, et là on va utiliser la même syntaxe, en disant dans le footer, la partie ul li img, alors vous pouvez ne pas être aussi précis que ça une fois l'image sélectionnée. Et au niveau des propriétés. On va demander d'avoir, ici on va décocher ensemble pour l'avoir et on va dire la width on veut 100%, et ce qu'on souhaite quand même ici au niveau du display c'est d'avoir un display de type block pour pouvoir... alors on veut aussi agrandir, ça nous permet d'avoir une meilleure visibilité, ici. Et ici au niveau du display, on va demander d'être block, afin de pouvoir bénéficier de tous les éléments de type block et là voyez que l'image c'est mis à 100% petit souci. On va fermer maintenant ce designer ici. Alors, c'est quoi ce petit souci ? C'est que tout simplement quand je réduis ici l'image, vous avez vu la hauteur ne vient pas, il n'y a que la partie largeur qui joue et pas la partie hauteur. Et en fait, si je viens dans la partie code source, cette fois-ci et que je regarde au niveau du html, dans le footer. Et vous voyez ici, vous avez la largeur et la hauteur qui sont indiquées. Il suffit de supprimer largeur, hauteur et vous avez vu, automatiquement l'image s'adapte. C'est parce que tout simplement les attributs prennent le devant sur cette affaire. Alors maintenant, intégrons la deuxième image. Comment faire ? On a une autre possibilité qui va être de dire je vais sélectionner une image ici et avec cette image, je vais pouvoir venir intégrer directement par glisser déposer la partie du footer qui m'intéresse. Alors, je les déplace, vous voyez soit ici je suis au dessus du p ici je suis sur le h2, donc. Et là je vais pouvoir me positionner, alors si je reste simplement immobile sur un petit instant j'ai ce petit icône qui apparaît je glisse dessus, je lui dit bien c'est juste à cette partie-là, à l'intérieur du a, mais juste avant h1 que je souhaite. Il me dit : quelle est l'image ? J'ai lâché au mauvais moment donc ce n'est pas grave on va le reprendre ici, c'est celui-ci, là voilà. Et ici, je vais l'appeler l'inspecteur dom. On va réduire cette partie qui est un peu trop grosse, je vais appeler le dom, et voyez l'image se trouve, en fait, au mauvais placement Eh bien je vais la glisser, déposer tout simplement, en utilisant ce raccourci. Et là encore même problématique, c'est que j'ai le width et le height qui font partie du manège et qui donc sont un peu embêtés. Alors, maintenant on a la possibilité également d'utiliser ce dom. Ici, regardez, si je me mets sur le dom à cet endroit là, j'ai un petit plus. Ici, je vais dire je pourrais insérer un enfant. Et quand je vais insérer un enfant, je vais insérer un img, puisque je suis un enfant de a. Et dès que je tabule pour valider ou que je valide par retour chariot, on m'ouvre la boite de dialogue, en me disant : c'est quoi ton image ? Eh bien, c'est la footer 03, je dis OK. Et là j'ai intégré mon image. Même combat, on va aller supprimer le width et le height sur cette image. Et enfin, dernière possibilité, ça serait d'aller directement dans le code ici pourquoi pas venir devant le h1. Et puis de faire un img, on valide avec tabulation src je fait un contrôle, espace ou je fais un commande espace sur mon document pour pouvoir ouvrir Parcourir On va chercher l'image, cette fois-ci, dans images, 08-footer-04, je dis OK. Et là, cerise sur le gâteau, c'est qu'en passant par le code je n'ai pas la partie width et height qui s'est ouverte, donc je peux directement entrer mon image. Donc voilà, placer des images avec l'interface de Dreamweaver, c'est quand même du régal, on voit que les façons ne manquent pas et il existe encore d'autres possibilités. Mais là, avec ces possibilités-là, déjà avec le dom, on a extrêmement de précision, avec le glisser, déposer d'insertion sur l'interface également. Et dans le code, on en parle pas.

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 !