L'essentiel de Muse CC 2015

Déterminer le comportement fluide des éléments

Testez gratuitement nos 1309 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez comment gérer le comportement fluide des différents éléments placés sur vos pages et gabarits.

Transcription

Notre premier travail quand on crée un site réactif, c'est de placer nos points d'arrêt. Je vais donc commencer par ouvrir le gabarit-A qui est le premier gabarit et le gabarit principal de mon site, le voici et pour placer mes points d'arrêt et bien je vais me servir de cette règle qui est ici en haut de la page, cette règle violette vous voyez qui contient déjà certaines informations. Alors les informations que j'ai sur cette règle, c'est notamment ici la largeur maximale de page de 960 pixels, et la largeur minimale de ma page qui est fixée pour le moment à 320 pixels. Alors d'où viennent ces valeurs? Et bien rappelez-vous, dans le menu Fichier et Propriétés du site, tout au début de notre travail dans Muse quand on avait crée le site, au début de ce cours et bien nous avions défini une largeur maximale de page à 960 pixels et une largeur minimale ici à 320 pixels et bien se sont ces éléments que l'on retrouve bien sûr, sur cette barre. Autre petite chose, remarquez que j'ai déjà ici un premier point d'arrêt quelque par à 960 pixels et quand je fais un clic droit sur ce point d'arrêt, et bien je me rends compte que c'est un point d'arrêt à largeur fluide. Autrement dit quand je vais réduire la largeur de mon navigateur, mon site devrait suivre de manière fluide et non pas par à-coups comme vous l'avez vu dans la vidéo précédente sur mon site. Remarquez également que vous pouvez masquer ces points d'arrêt, comme ceci vous voyez donc que cette règle disparaît de l'écran, et pour la faire réapparaître, et bien dans le menu affichage, vous demandez tout simplement l'affichage ici des points d'arrêt. Alors allons-y, je vais prendre la poignée qui est ici sur le côté de mon site, je vais la faire bouger, je vais la faire se déplacer vers la gauche, et donc ici je peux tester un petit peu ce qui se passerait quand je redimensionne mon navigateur. Et là on voit tout de suite un premier problème, c'est qu'à 960 pixels de large j'ai deux beaux cercles ici, un en haut et un suivant ici dans le pied de page, et puis quand je redimensionne ma page vous voyez que ces cercles redeviennent des ellipses alors ça j'ai envie de l'éviter donc je vais cliquer dans le vide, vous voyez le pointeur de la souris cliquer pour passer au point d'arrêt sous-entendu le plus proche, donc je vais cliquer dans le vide pour remettre ici ma poignée sur le point d'arrêt le plus proche à 960 pixels, et je vais maintenant aller sélectionner ce cercle ici, alors pour le sélectionner bien sûr je vais devoir déverrouiller mes calques d'abord, voila qui est fait. Et donc quand je sélectionne cette ellipse et bien dans la partie transformation ici de ma barre du dessus et bien je vais trouver une petite option qui me permet de gérer le comportement de cet élément quand il sera redimensionné. Regardez, ça se trouve ici dans le fond, la petite liste déroulante et là vous avez plusieurs options donc là vous voyez que par défaut une ellipse, donc se comportera de manière largeur Responsive. Ça veut dire que le largeur de cet objet va dépendre de la largeur de l'écran et donc au moins l'écran sera large, au moins l'objet sera large, mais ça ne concerne vous voyez, que la largeur de l'objet, et pas sa hauteur, ce qui explique pourquoi quand je redimensionne mon écran donc ceci redevient une ellipse. Alors j'ai deux solutions, soit je choisis tout simplement de ne pas redimensionner cet élément, donc je mettrai Non ici, soit je choisis de redimensionner à la fois sa largeur et sa hauteur, dans mon cas et bien je vais dire non, je ne veux pas redimensionner cet élément. Et je vais faire le tour du propriétaire un petit peu de tous les éléments de ce gabarit, pour bien vérifier leur comportement réactif donc. Alors je vais sélectionner mon bloc de texte, Je vais également lui dire de ne pas se redimensionner quand la largeur du navigateur changera, remarquez qu'ici pour le bloc de textes que j'ai certaines solutions qui sont grisées, donc en fonction de l'objet que vous allez sélectionner et bien toutes les options ne seront pas nécessairement toujours disponibles. Donc ici je vais mettre Non également. Pour ce qui est du grand rectangle ici qui représente le fond de mon en-tête, et bien lui, regardez, on l'étire sur toute la largeur du navigateur, et ça par contre ça convient très bien à ce que je veux donc je vais garder cette option par défaut ici, au niveau de l'image du logo du chemin vert, et bien elle, je vais également demander à ce qu'elle ne se redimensionne pas, et je vais terminer par le pied de page, mon ellipse donc qui est ici, j'ai envie que ça reste un cercle donc elle ne se redimensionnera pas. Même chose pour le bloc de texte qui est ici, Pas de redimensionnement, le grand rectangle qui représente donc ici la couleur de fond du pied de page lui je veux l'étirer sur la largeur du navigateur, c'est déjà le cas donc c'est bon, mes 3 images qui sont ici les logos des réseaux sociaux, je vais les sélectionner toutes les 3, je vais d'ailleurs en profiter pour correctement les aligner, et donc ici dans l'outil de transformation, elle par contre, oui, je vais garder ce réglage là, je veux une hauteur et une largeur responsive, et puis le dernier élément c'est la notice de copyright, qui elle ne se redimensionnera pas non plus. Alors on va tester ce que ça donne, donc je reviens ici au-dessus, je prends ma poignée et je vais donc modifier la largeur de mon navigateur. Vous voyez qu'au niveau de leur taille je n'ai plus de problème, les cercles restent cercles, par contre j'ai maintenant un petit souci au niveau de leur position à ces éléments. Donc je vais de nouveau cliquer dans le vide pour revenir sur le point d'arrêt le plus proche, puis resélectionner cette ellipse, retourner dans mon outil de transformation ici pour vous montrer une autre option, qui s'appelle ici Épingler à la page, alors j'ai 3 options, 3 valeurs pour ceci Donc épingler à gauche, au centre ou à droite, mais je vais cliquer ici sur ce tout petit carré pour l'épingler vous le voyez à droite et ça signifie tout simplement que la position de cet élément par rapport au bord droit de la page ne changera pas, donc je vais vous montrer ce que ça donne tout de suite je vais faire la même chose pour le bloc de textes, et puis également pour l'ellipse qui est ici dans le fond, je vais l'épingler comme ceci, et pour le bloc de texte qui est dedans, et donc maintenant quand je redimensionne ma page et bien vous constatez que ces éléments restent toujours au même endroit par rapport au bord droit de la page maintenant, et donc j'ai réussi ici à régler le comportement réactif de ces éléments, remarquez également que les 3 icônes des réseaux sociaux ici dans le fond de la page, elles, elles sont réactives donc elles se redimensionnent en fonction de la largeur de mon navigateur. Voila donc les premiers éléments d'un site réactif qui sont en place dans la vidéo suivante et bien je vous propose de passer maintenant au positionnement de nos points d'arrêt en tant que tel.

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 !