L'essentiel de Muse CC 2015

Travailler avec des cadres d'image

Testez gratuitement nos 1250 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Après avoir inséré des images sur votre site, vous allez apprendre à leur donner une taille et une position. Vous allez notamment apprendre à gérer des cadres d'image.

Transcription

Pour terminer ce chapitre consacré à l'insertion de contenu dans votre site, j'aimerais revenir avec vous sur l'insertion d'image, dans votre document Muse. Alors, je suis toujours sur ma page d'accueil et j'aurais envie d'insérer trois images, une au dessus de chacune de ces trois colonnes, pour faire un petit peu de place pour ces trois images, Muse cc 2015.2 me propose une nouveauté tout a fait géniale, vous allez voir que, je vais sélectionner ici un élément, et puis à la hauteur de l'élément sélectionné, ici sur le côté, vous avez une poignée supplémentaire qui apparaît, qui s'appelle: « Déplacement vertical de la poignée », vous allez prendre cette poignée l'abaisser vers le bas, vous allez voir que tous les éléments qui se situent en-dessous de cette poignée vont être déplacés en une fois, donc j'ai déplacé l'ensemble de ces blocs de texte vers le bas grâce à cette poignée, et donc, ça me permet de générer de la place, pour placer maintenant mes images. Rappelez-vous comment on insère une image dans Muse, Fichier, Importer, Commande D ou contrôle D si vous êtes sur Mac ou Windows, et puis vous allez rechercher dans les fichiers source de cette formation dans le dossier images, l'image que vous avez envie d'insérer, je vais prendre ici l'image des châteaux gonflables. Remarquez que cette image est énorme, elle fait 6000 pixels sur 4000, donc, elle sera beaucoup trop grande, quand je clique, regardez, elle va couvrir tout l'écran, rappelez-vous que je peux également modifier la taille de ces images par une poignée de coin, et ce, dans Muse, sans utiliser la touche majuscule de mon clavier, puisque naturellement, Muse va respecter les proportions de vos images, même si vous n'utilisez pas cette touche majuscule du clavier. Donc voila, l'image que je viens d'insérer, quand l'image est sélectionnée, elle est entourée, vous le voyez ici, de poignées vertes, pourquoi vertes, parce que je suis bien sûr, sur le calque Contenu page qui est vert, mais surtout, vous allez voir, dans le coin supérieur gauche de la fenêtre, que l'objet sélectionné n'est pas l'image, mais c'est ici, le cadre de l'image. C'est-à-dire, le cadre dans lequel l'image est chargée. Si je veux sélectionner l'image en tant que telle, je vais devoir double-cliquer sur cette image, et à ce moment là, vous voyez que le cadre de sélection change de couleur et que les poignées de sélection sont également beaucoup plus petites, et maintenant, dans le coin supérieur gauche de la fenêtre, c'est bien l'image, en tant que telle, qui est sélectionnée. Je vais donc pouvoir modifier la taille de cette image au sein de son cadre, comme ceci, et également je vais pouvoir choisir la partie de l'image qui passe au travers de ce cadre, comme je viens de le faire pour le moment. Donc, Muse fait la différence entre le cadre d'une image et l'image qui est chargée au sein de ce cadre. Alors dans Muse, je vais pouvoir également supprimer cette image quand elle est sélectionnée, sans supprimer le cadre de l'image. Et ça, ça me permet, vous voyez, de définir l'emplacement d'une future image, je vais maintenant dupliquer ce cadre, pour ça, c'est très simple, je me place dessus en enfonçant le bouton Alt de mon clavier, vous voyez la double flèche qui apparaît ici au niveau de la souris, donc en déplaçant cet objet, je ne le déplace pas, mais j'en crée une copie, je vais refaire une 3ème copie dailleurs, et me servir ici des guides intelligents de Muse pour placer ces trois éléments. Maintenant que j'ai les 3 cadres d'image sans image dedans, je peux procéder à l'importation en tant que telle, donc Fichier, Importer, je vais aller rechercher mon château gonflable, mais également, l'image de la graduation et l'image du tiercé de canards, voila, donc j'utilise ici sur Mac, la touche commande pour ajouter des fichiers à ma sélection, la touche contrôle sur Windows, j'ouvre ces 3 images, qui se chargent ici, dans mon curseur et puis je vais cliquer dans les cadres d'image et c'est ça qui va charger les images ici dans ces 3 cadres, rien ne m'empêche maintenant de double-cliquer sur l'une de ces images pour choisir la partie de l'image qui apparaît dans le cadre en question. Alors tout ça est très bien mais regardez, il y a moyen d'aller encore plus vite. Donc je vais supprimer ces 3 images, en effet, Muse vous propose juste en-dessous de l'outil Rectangle Ellipse, un outil Cadre Rectangle, ou Cadre Ellipse, et ça, ça vous permet de dessiner directement des cadres d'image sans image dedans et ce sans devoir au préalable insérer une image, la sélectionner, la supprimer sans supprimer le cadre comme j'ai fait tout à l'heure. La nouveauté de Muse ici, c'est qu'on peut créer des cadres elliptiques, c'est une nouveauté de Muse 2015.2 donc si vous avez une ancienne version, vous n'aurez pas cette possibilité et donc je vais créer ici 3 cadres d'image circulaires, donc en maintenant ici, le bouton majuscule de mon clavier enfoncé et voila, j'ai fait le premier, avec Alt, je vais dupliquer cet objet... venir le placer ici, voila, grâce aux guides intelligents de Muse, en créer une copie supplémentaire avec le bouton Alt de mon clavier, voila qui est fait, et maintenant, procéder à l'importation des images dans ces cadres circulaires, donc, je vais reprendre Château gonflable, Graduation et Tiercé de canard, voila, venir cliquer sur mes 3 cadres d'image, un par un pour charger mes images dans ces cadres d'image, puis double-cliquer sur ces images, pour bien choisir la partie de l'image que je veux afficher dans chacun de ces trois cadres. Voila qui est fait, vous en savez autant que moi en ce qui concerne l'insertion d'images dans Muse.

L'essentiel de Muse CC 2015

Créez des sites web riches et dynamiques sans aucune compétence en programmation avec Muse. Gérez les plans et les calques, mettez en place une navigation entre vos pages, etc.

3h50 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :21 juil. 2016

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 !