L'essentiel de Muse CC 2015

Ajuster la position des guides

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les guides font partie de la vue Conception de Muse. Comprenez-en leur signification et apprenez à les placer correctement sur votre gabarit.

Transcription

Dans ce chapitre, je vous propose de commencer la conception de nos gabarits. Je vais donc ouvrir le premier gabarit qui est ici, le A-Gabarit par un double-clic le voici qui est ouvert en mode conception et le premier élément sur lequel j'aimerais attirer votre attention, et bien se sont les 5 petites flèches que que vous trouvez le long du côté gauche de votre espace de travail. Alors la première de ces petite flèches qui est ici, s'appelle Haut de page et vous voyez que je peux déplacer cette petite flêche vers le bas, je vais la positionner par exemple ici à 30 pixels, et donc ça, ça me permet de définir un guide horizontal comme vous le voyez ici, qui est placé à 30 pixels, et donc je peux définir un espace de 30 pixels entre d'une part le haut de la fenêtre de mon navigateur qui est représenté ici par le début de mon espace de travail, le début de cette page blanche et puis le guide que j'ai placé à 30 pixels qui représente en fait le haut de ma page c'est à dire le haut de mon document web que je vais créer ici dans Muse. Alors cette zone de 30 pixels, eh bien je vais pouvoir l'utiliser pour mettre une couleur de fond par exemple ou une image de fond ou n'importe quel autre élément qui me passerait par la tête. La 2ème petite flèche, elle se trouve ici, elle s'appelle En-tête, je peux également positionner ce guide de manière très simple comme ceci, je vais le mettre par exemple ici à 90 pixels, et donc ce 2ème guide est censé représenter la fin de la zone d'en-tête du site et donc forcément aussi le début de la zone de contenu. J'ai donc défini ici une zone d'en-tête de 90 pixels de haut. Alors le 3ème de ces guides se trouve ici dans le fond, ça s'appelle tout simplement Pied de page et donc je vais pouvoir définir ici l'emplacement du début de mon pied de page, je vais par exemple le placer à 450 pixels, voila. Et donc l'emplacement de ce guide va aussi définir la hauteur minimale de ma zone de contenu, donc qui commence ici au guide qui est placé à 90 pixels, et qui se termine maintenant à ce guide qui est placé à 450 pixels et qui marque donc le début de la zone de pied de page, qui est traditionnellement dans le fond de nos interfaces, dans le fond de nos pages web. Alors les deux dernières petites flèches, vous voyez occupent le même emplacement ici elles sont toutes deux placées à 500 pixels. Il y a une flèche qui s'appelle bas de page, et puis celle d'à côté s'appelle bas du navigateur, alors quand je prends la flèche bas de page et que je la décale vers le bas comme ceci, je vais la placer par exemple à 650 pixels ou 630. Voila, et bien quand je déplace la flèche bas de page, je déplace également la flèche bas du navigateur. La flèche bas du navigateur par contre, je peux la prendre ici et la décaler encore un petit peu plus, je vais la mettre également à 30 pixels, et ça c'est un petit peu comme au dessus, ça me permet de définir un espace entre la fin de mon document web, la fin de ma page et le dessous de la fenêtre du navigateur. Donc de nouveau cet espace pourra être rempli par une couleur, une image de fond ou par n’importe quel autre élément qui vous passerait par la tête, et qui sonnerait bien dans votre conception. Donc ça se sont les différents guides qu'on a à notre disposition, alors j'insiste sur une chose, se ne sont jamais que des guides. Ça veut dire que si je crée un élément, mettons ici un rectangle, je vais lui donner une couleur pour que vous puissiez bien le voir, voila. Je vais prendre mon outil de sélection ce qui me permet de déplacer mon rectangle, eh bien vous voyez que grâce à ce guide je vais pouvoir positionner mon rectangle exactement où je le veux, c'est à dire qu'à l'intersection de ces guides ou quand je touche l'un de ces guides, j'ai un effet d'aimantage qui me permet de placer ce rectangle de manière tout à fait aisée. Par exemple si je place mon rectangle ici sur le premier de ces guides, et puis que je l'agrandit pour qu'il touche le second, et bien je sais que mon rectangle a une hauteur exactement de 90 pixels. Cela dit, je vous disais que ce ne sont que des guides. Ça veut dire que vous êtes libres de ne pas respecter ces guides. Par exemple je peux très bien ici placer mon rectangle à cheval dans la zone d'en-tête et dans la zone qui est censée être la marge au dessus du site. Donc tout ça ne sont jamais que des indications qui sont censées vous aider à réaliser votre conception, votre mise en page, mais ce ne sont pas des choses qui sont strictement à respecter dans votre mise en page. Vous voyez que je peux déplacer mes éléments un peu n'importe où, malgré la présence des guides, je peux faire la même chose ici dans le fond, sauf pour la fin de la page, là c'est l'exception qui confirme la règle, vous voyez que vous ne pouvez pas placer un élément ici en dessous du guide de fin de page et donc dans cette zone qui est censée représenter la marge du bas entre la fin de la page et le navigateur, c'est la seule exception qui confirme la règle dans ce cas-ci, mais pour tout le reste, vous pouvez placer les éléments n'importe où, où vous le désirez donc. Alors je vais maintenant supprimer ce rectangle, et placer mes guides comme j'ai besoin de les placer pour ce site en particulier, donc je vais replacer le haut de page à 0 donc je ne veut pas avoir d'espace entre le début de mon site et le haut de mon navigateur, et je vais également replacer ici le bas du navigateur, le replacer au même endroit que le bas de ma page, en effet je ne veux pas non plus avoir d'écart, d'espace, de marge du bas entre la fin de ma page et la fin de la fenêtre du navigateur. Voila, mes guides sont maintenant correctement placés pour le site que j'ai envie de créer, rappelez-vous que se ne sont jamais que des guides, ils sont là pour vous aider, mais ils ne vont certainement pas vous empêcher d'outre-passer un petit peu leur position dans votre conception.

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 !