Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Muse CC 2015

Découvrir les outils d'alignement

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez le fonctionnement des outils d'alignement de Muse. Voyez comment ces outils peuvent vous faire gagner énormément de temps.

Transcription

Je voudrais maintenant vous présenter d'autres outils qui vont considérablement améliorer votre productivité. Il s'agit des outils de groupement et d'alignement qui vont me permettre ici de positionner les trois colonnes de la page d'accueil. Alors je vais commencer par sélectionner l'image de la première colonne ici en cliquant dessus, et puis je vais ajouter à cette sélection le bloc de texte qui va avec, alors pour ajouter à la sélection, je maintiens enfoncé le bouton majuscule du clavier tout en cliquant vous le voyez sur le deuxième objet, et j'ai donc maintenant deux objets sélectionnés. Alors dans le menu Objet de Muse, j'ai maintenant la possibilité d'associer ces deux objets sélectionnés dans un même groupe, vous voyez le raccourci clavier qui correspond, commande G sur Mac contrôle G sur Windows, voila maintenant ces deux objets sont maintenant associés. Je vais faire la même chose avec les deux autres colonnes, donc sélectionner ici l'image, sélectionner le texte qui va avec commande G pour associer ces 2 éléments même chose avec les éléments de la 3ème colonne, l'image, le texte, commande G ou contrôle G et j'associe donc ces éléments pour former la 3ème colonne. Alors maintenant que ces éléments sont associés, vous allez voir qu'on va pouvoir les déplacer ensemble, vous le voyez dans la même association, vous remarquez également que quand je clique sur l'une de ces associations, et bien c'est le mot Associer qui est écrit dans le coin supérieur gauche de mon écran et cette zone va révéler maintenant toute son importance. Elle va toujours vous indiquer ce qui est sélectionné, dans ce cas ci une association. Remarquez que si je clique une 2ème fois dans l'association et bien je vais sélectionner le cadre de l'image au sein de cette association, et c'est le mot cadre de l'image qui est marqué ici dans le coin supérieur gauche de mon interface. Pour la suite je vais partir du principe que c'est la 1ère colonne qui est bien mise, voila, je l'ai ajustée correctement, et je vais faire exprès de bien mélanger les autres colonnes pour vous montrer maintenant les outils d'alignement. Alors je vais sélectionner les 3 colonnes, donc la 1ère, je maintiens enfoncé le bouton majuscule, et j'ajoute les 2 autres colonnes à ma sélection. Mes outils d'alignement, ils sont ici en dessous du lien Alignement, donc les voici, alors je vais utiliser l'outil qui est ici qui s'appelle Aligner les bords supérieurs et quand je vais cliquer sur ce bouton et bien les bords supérieurs des 3 objets sélectionnés seront au même niveau. Sauf que c'est pas le bon même niveau. En effet vous voyez que la colonne qui était la plus au-dessus, à savoir la colonne Grand tiercé de canards, elle n'a pas bougé, elle ne s'est pas déplacée et se sont les deux autres colonnes qui ont été déplacées vers le haut afin que les bords supérieurs de chacun de ces éléments correspondent et soient au même niveau, oui mais voila c'est pas ce que je voulais faire. Donc je vais cliquer dans le vide pour désélectionner mes colonnes, replacer ici ma première colonne comme j'ai envie de la placer, je pars du principe que c'est elle qui est bien mise, et remélanger convenablement les deux autres éléments. Voila, je vais maintenant re-sélectionner mes trois colonnes, 1,2,3 les voila, et dans mes outils d'alignement vous montrer ici la liste déroulante qui se trouve dans le fond de ce panneau d'alignement, et c'est là qu'on va trouver toute la flexibilité de ces outils. Vous avez ici la possibilité de choisir sur quoi ces outils sont calibrés, et vous voyez que par défaut, ces outils sont calibrés sur la sélection active. C'est ce qui s'est passé tout à l'heure. Je peux également décider de calibrer ces outils sur base de la zone de contenu, alors ça donne quoi ceci, si je reclique sur cette même icône Aligner les bords supérieurs, et bien c'est toujours pas ce que je voulais faire puisque maintenant, je suis aligné sur la zone de contenu, et donc le bord supérieur de mes 3 éléments et bien il se situe au niveau de ce guide, qui sépare l'en-tête de mon site, de la zone de contenu, et dans les outils d'alignement ici, si je reste aligné sur la zone de contenu et que je prends maintenant l'outil Aligner sur les bords inférieurs, et bien vous allez voir que mes colonnes vont partir loin vers le bas, et seront alignées vous le voyez sur la fin de la zone de contenu. Donc ça c'est une deuxième option ici, alors je vais les remettre au-dessus, et puis aller les remélanger correctement donc je vais replacer ma première colonne, la voila, et pour la suite remélanger les deux autres, pour bien vous montrer ce que j'ai à vous montrer, Voila qui est fait. Il y a une 3ème option qui existe, et c'est celle-là qui est la plus flexible, alors regardez, je vais commencer par sélectionner ma 1ère colonne, ça c'est très important, donc le 1er objet sélectionné, c'est ma 1ère colonne. Je vais ajouter les deux autres à ma sélection, retourner dans les outils d'alignement, et maintenant ici dans la liste déroulante je vais demander d'aligner sur un objet clé, ça veut dire que je vais calibrer les outils d'alignement sur un objet clé. Alors l'objet clé, vous le voyez ici, il est mis en évidence dans la sélection c'est le 1er objet que j'avais sélectionné, à savoir ici la 1ére colonne. Remarquez que si je clique dans le vide et que je commence ma sélection par la 2nde colonne et puis que je vais ajouter la 1ère et la 3ème, et bien dans ce cas là, quand je demande d'aligner sur un objet clé, vous voyez que c'est la 2nde colonne qui est considérée comme objet clé, donc c'est sur bas de cette 2nde colonne que serait maintenant calibré les objets d'alignement, alors je vais bien sélectionner ma 1ère colonne, en premier lieu, ajouter à ma sélection les 2 autres, et donc maintenant c'est ma 1ère colonne qui est l'objet clé, et donc quand j'aligne les bords supérieurs, et bien vous voyez que j'aligne le bord supérieur par rapport à mon objet clé, et c'est ça bien sûr que je voulais faire. Alors je vais maintenant m'occuper de ma 3ème colonne, vous allez voir qu'avec les flèches du clavier je peux véritablement la positionner au pixel près sur mon guide ici, remarquez un petit raccourci supplémentaire, quand vous utilisez les flèches du clavier vous déplacez l'élément sélectionné d'un pixel à la fois mais vous pouvez combiner ceci avec la touche majuscule ce qui vous permet de déplacer l'élément de 10 pixels à la fois, donc ça va un petit peu plus vite. Donc voila je peux placer ici précisément mon élément, ma colonne pour qu'elle touche ici le guide, à droite. Dernière opération, je vais resélectionner mes 3 colonnes et je vais maintenant les répartir sur l'espace horizontal, pour ça au niveau de mes outils d'alignement bien vérifier que je les calibres maintenant sur la sélection active, et puis j'ai la possibilité ici de répartir l'espace de manière verticale ou de manière horizontale, c'est ce dernier outil dont j'ai besoin ici, et voila maintenant mes 3 colonnes sont correctement alignées, et correctement placées, de manière très simple et très flexible grâce à ces outils d'alignement alors dans cette vidéo vous avez donc appris à grouper des objets et à utiliser des outils d'alignement de Muse, la flexibilité de ces outils d'alignement repose sur votre capacité à choisir de calibrer ces outils d'alignement soit sur la sélection en cours, soit sur la zone de contenu, ou bien soit sur un objet clé.

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 !