L'essentiel de Dreamweaver CC 2017

Disposer les images sur la page

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous pouvez insérer des images dans un document HTML de plusieurs façons. Faites le tour des différentes méthodes, qu'il s'agisse de code, de la fenêtre de rendu ou de certaines palettes.
05:38

Transcription

Il ne manque pas de manières pour insérer des images dans Dreamweaver. On va en voir quelques unes. Que vous travaillez dans le code ou que vous travaillez dans l'interface de rendu ou depuis l'inspecteur de propriétés. cela va être question à chaque fois de quel sera le moyen le plus rapide ou le plus souple pour importer l'image. Il n'y a pas une manière qui est plus adaptée qu'une autre. Je vous invite vraiment à les parcourir toutes parce que toutes sont vraiment utiles. Pour cela on va utiliser simplement une partie d'articles comme ça dans lesquels on va souhaiter intégrer des images. On a une série d'images ici dans un dossier et on souhaiterait insérer les images directement en première partie, juste avant le h ici. Première manière de faire, une des manières, ce n'est pas forcément la première, va être d'utiliser le panneau des Actifs. Dans le panneau des Actifs, on va pouvoir trouver l'image qui correspond à celle de James Bloog on va récupérer cette image, on va la glisser directement dans la fenêtre de rendu et on va pouvoir la positionner en s'aidant des éléments. Si des fois on l'a mal positionnée, comme c'est le cas ici puisqu'on l'a posée juste après h1 au lieu de juste avant ne vous inquiétez pas, venez dans le DOM, vous prenez l'image et vous la glissez correctement. Ça aurait pu être en glissant et en déposant le code. Peu importe, là encore les manières ne manquent pas pour pouvoir positionner cette image. Une autre possibilité va être d'utiliser la palette d'insertion ou encore le menu d'insertion. On va reproduire un second article, cette fois-ci sur Franck Holbes. On va positionner le curseur directement dans le code où on souhaite placer notre image. On pourrait le faire également dans l'interface de rendu mais je trouve qu'on est beaucoup plus précis en utilisant l'interface de code, surtout quand on a des positionnements ce qui a été voulu ici, absolus à cet endroit là. Donc ils rendent la tâche un peu plus difficile. On peut faire Insertion Image ici ou récupérer le Insertion Image à ce niveau là. C'est exactement la même fonctionnalité y compris le raccourcis clavier : Ctrl+Alt+I sur Windows, Cmd+Alt+I sur Macintosh. Ici vous allez pointer vers l'image de Franck et vous allez pouvoir la placer. Si vous auriez utiliser une insertion d'image ici en la plaçant à ce niveau-là, grâce au curseur, pareillement vous pouvez le faire, vous allez avoir l'élément qui va vous demander où vous souhaitez positionner l'image. Si vous sélectionner, au lieu d'un glisser-déposer un endroit dans l'image, et que vous faîtes Insertion Image à ce moment-là vous avez la petite palette qui vous demande si vous voulez envelopper, imbriquer, placer avant, après, etc. C'est vraiment très très souple d'utilisation quelle que soit la manière dont vous allez positionner cette image. Une autre possibilité va être d'utiliser l'inspecteur de propriétés. Pour utiliser l'inspecteur de propriétés il y a deux manières. Soit on va utiliser l'inspecteur de propriétés tel quel, soit on pourra utiliser le mini inspecteur d'objet d'interface. Pour cela, il faut déjà avoir quand même une balise img. Ici on va utiliser img tout court, et on va valider cette image pour pouvoir placer le petit src. Soit on utilise le src directement : Ctrl+Espace sur Windows, Cmd+Espace sur Macintosh, Parcourir..., on va chercher notre image. Ici il faut rentrer l'image de Eric On va prendre eric à ce niveau là. Si on replace une fois de plus un autre article, on copie-colle cette partie directement. Alors je vais la copier ici et je vais prendre un truc avec Rita plutôt Ça sera plus propre. On a notre image. Je vais copier cette fois-ci l'image de Eric On se dit que cette fois-ci, la dernière n'est pas forcément la bonne puisqu'on a deux fois la même image. Vous pouvez venir soit dans l'inspecteur ici, cliquer sur ce dossier, et dire je vais récupérer cette fois-ci Rita. Vous pointer sur la bonne image. Soit vous venez dans cette partie : vous ouvrez le petit élément et vous venez dans src ici et vous allez pointer sur rita. Soit encore, vous récupérer le petit picwic ici et ici vous venez chercher rita. Vous voyez que les manières ne fonctionnent pas pour pouvoir intégrer cette image. Vous pouvez en intégrer comme ça autant que vous voulez, qu'il s'agisse de travailler dans le code ou dans n'importe quel environnement visuel de l'interface. Vous pouvez même sélectionner un espace et dire je veux modifier cet espace et je vais l'entourer avec une balise img je pourrais avoir un attribut src= et dans ce = vous pourrez marquer ../ images donc de le faire directement à la main avec un 07-main-marc.png Donc vous pouvez vraiment... .png ...utiliser toutes les manières que vous souhaitez pour pouvoir intégrer cet élément. Petit détail : chaque fois que vous allez survoler maintenant un lien d'image, vous allez pouvoir vous assurer de la bonne prestation, de la bonne image et de voir s'il s'agit également du bon visuel. Une manière assez rapide, assez simple qu'on utilise soit le panneau des Actifs, la palette directement des fichiers, la palette des propriétés, le code, le rendu ou encore les palettes d'insertion. Vous voyez que les possibilités ne manquent pas pour gérer et insérer des images. On va voir qu'il en existe encore bien d'autres.

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 !