L'essentiel de Muse CC 2015

Placer ses points d'arrêt

Testez gratuitement nos 1249 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez utiliser différentes techniques vous permettant de placer et de paramétrer des points d'arrêt dans vos pages et gabarits.

Transcription

Dans cette vidéo, et bien je vous propose de procéder à la création de nos premiers points d'arrêt, pour ça je vais me rendre sur mon gabarit page, le voici, et je vais déplacer cette fameuse petite poignée, vers la gauche histoire de simuler un navigateur qui se rétrécit. Alors avant de bien regarder ce qui se passe sur votre page, pendant que vous bouger cette poignée, en effet, c'est à vous de contrôler et de vous arrêter au moment où vous estimez que votre mise en page ne fonctionne plus pour une certaine largeur. Alors regardez ici envirron à 840 pixels de large, je commence à avoir des problèmes au niveau de ma barre de navigation principale, puisque mes boutons, regardez, commencent à se télescoper à se rentrer les uns dans les autres, donc je vais m'arrêter au moment où ce phénomène commence, environ ici à 840 pixels plus ou moins, et une fois que votre poignée est bien placée et bien vous cliquez sur le petit + qui se trouve ici pour créer un nouveau point d'arrêt, le voici, qui est placé chez moi donc à 840 pixels. Alors vous pouvez faire un clic droit sur ce nouveau point d'arrêt pour accéder à ses propriétés, vous voyez que vous pouvez également le supprimer si vous le désirez, et parmi les propriétés, vous pouvez ajuster la position de ce point d'arrêt des fois que vous n'ayez pas su exactement choisir la bonne position avec la poignée vous pouvez choisir si ce point d'arrêt est de largeur fixe ou fluide, moi je vais garder une largeur fluide ici, éventuellement vous pouvez changer la couleur du point d'arrêt dans la barre au-dessus, pour ceux qui n'aiment pas le bleu, voila, moi je vais valider ces options par défaut donc me voici avec un 2nd point d'arrêt à 840 pixels sur ce gabarit. alors au niveau de ce point d'arrêt ce que je vais faire, c'est que je vais décider de réduire un petit peu la taille de la police de caractères au niveau des boutons de ma barre de lien pour éviter qu'ils se rentrent dedans. Donc je vais sélectionner ma barre de lien, mon élément de menu, et puis aller cliquer sur l'étiquette, voila c'est là-dedans que le texte se trouve, et donc attention, il y a une petite subtilité, avant d'aller modifier la taille de ce texte, et bien nous allons décider si la modification à apporter et bien elle couvre l'ensemble des points d'arrêt ou bien elle ne concerne que ce point d'arrêt ci. Et pour faire ce choix, vous avez la dernière icône ici de la palette des outils, vous avez donc ici ces deux drôles petites icônes, qui sont là alors la première c'est un carré avec quatre "t" dedans, vous voyez que cette icône est à l'avant plan pour le moment, et ça, ça signifie, formater le texte, vous le voyez dans la petite bulle jaune, Formater le texte entre les points d'arrêt, ça veut dire que les changements que vous faites quand cette icône est active concernent l'ensemble des points d'arrêt, par contre si vous cliquez sur la petite icône d'en bas qui passe maintenant à l'avant-plan, vous le voyez, c'est un carré avec un seul "t" dedans, et bien ça, ça signifie que vous formatez le texte mais uniquement dans le point d'arrêt actuel, et c'est ça qui m'intéresse ici. Donc je vais activer cette option ci, et puis aller dans mon panneau texte ici, pour un petit peu réduire la taille de mes caractères, je vais choisir 17 points, ça me parait pas mal ici, et donc maintenant que j'ai résolu ce problème maintenant à 840 pixels, et bien je vais tout simplement continuer à faire glisser ma poignée et je vais m'arrêter là où je détecte le prochain problème, et le prochain problème, regardez, il concerne mon ellipse, mon cercle ici : Fête de l'été qui commence à se rapprocher dangereusement de ma barre de lien. Alors je vais décider que ce point d'arrêt sera a environ 660 pixels plus ou moins, sauf que je n'ai pas accès à cette ellipse ici sur mon gabarit puisque cette ellipse et bien je l'ai dessinée sur l'autre gabarit de mon site. Donc je vais revenir sur le gabarit-A placer mon point d'arrêt sur le gabarit-A ici à 660 pixels, alors si je n'y arrive pas tout à fait, ce n'est pas très grave, vous savez je vais placer le point d'arrêt clic droit, Propriétés je vais pouvoir ici l'ajuster et le placer exactement où je veux, et donc dans le point d'arrêt ici à 660 pixels et bien je vais m'occuper de cette ellipse qui commence à m'embêter quand le menu est présent, donc je vais sélectionner cette ellipse et j'ai envie de la supprimer dans ce point d'arrêt donc je pousse sur le bouton de suppression de mon clavier et vous voyez que mon ellipse disparaît. Mais attention quand vous faites ça, vous avez supprimé votre ellipse dans le point d'arrêt à 660 pixels mais également dans le point d'arrêt ici à 960 pixels. Et ça c'est pas du tout ce que vous vouliez faire. Contrôle Z si vous êtes sur Windows commande Z si vous êtes sur Mac, vous allez donc annuler votre dernière action par ce raccourci, et le cercle donc réapparaît. Moi ce que je veux faire, c'est supprimer cette ellipse, mais uniquement dans ce point d'arrêt à 660 pixels. Donc pour ça je vais faire un clic droit sur cet élément, et vous allez ici trouver deux options, Masquer dans le point d'arrêt ou Masquer dans les autres points d'arrêt, moi c'est évidemment la première des deux options ici dont j'ai besoin, donc je vais cliquer la dessus, vous voyez que mon ellipse disparaît dans le point d'arrêt à 660 pixels, mais elle est toujours belle et bien présente dans le point d'arrêt à 960 pixels. Et donc maintenant et bien je peux m'occuper de cette zone de texte, Annuler la rotation de cet objet, et venir le placer autrement, donc je modifie ici ma mise en page, mais uniquement dans ce point d'arrêt donc. Alors on va tester tout cela si vous le voulez bien, je vais revenir sur mon gabarit page, remarquez que sur mon A-gabarit ici j'ai placé un point d'arrêt à 660 pixels, au niveau de mon gabarit page je vais voir également le point d'arrêt de l'autre gabarit, puisque rappelez-vous que ces deux gabarits sont liés l'un à l'autre et vous voyez que ce point d'arrêt ici, il est symbolisé par un petit triangle, donc c'est un point d'arrêt qui est défini sur l'autre gabarit, mais pas directement sur celui-ci. alors pour tester tout cela, et bien dans le milieu fichier, vous allez prendre Prévisualiser la page dans le navigateur, et donc Muse va exporter ce gabarit et vous l'afficher dans le navigateur par défaut de votre système, voila, chez moi c'est Chrome. Je vais prendre le bord de mon navigateur, commencer à le réduire vous allez voir qu'à partir de 960 pixels la largeur du site deviendra fluide, voila nous y sommes, vous allez voir également qu'à partir d'une certaine largeur donc 840 pixels et bien c'est la taille des caractères de la barre de lien qui va se réduire, nous voici à ce point d'arrêt vous le voyez ici, et puis si je continue à une largeur de 640 ou 660 pixels, je ne sais plus très bien, et bien c'est l'ellipse ici qui va disparaître. Fête de l'été et le texte qui va être repositionné vous le voyez dans l'en-tête. Voici donc comment placer des points d'arrêt dans vos gabarits et pages Muse, Voici donc également comment vous pouvez modifier la mise en forme et la mise en page de votre site dans les différents points d'arrêt. Alors c'est un gros boulot maintenant qui vous attend, puisque vous devez faire cette démarche non seulement sur chacun de vos gabarits, mais également sur chacune de vos pages, placer des points d'arrêt contrôler le comportement réactif de chacun des éléments que vous avez placés sur ces pages et décider de garder ou de ne pas garder certains de ces éléments dans certains points d'arrêt, de les déplacer, de modifier leur mise en forme soit dans l'ensemble des points d'arrêt soit dans un point d'arrêt particulier. Bref, c'est un gros travail, mais c'est un travail que les personnes qui viendront visiter votre site avec des terminaux mobiles apprécieront grandement.

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 !