Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Muse CC 2015

Mettre en place la navigation

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Partez à la découverte du widget Menu ! Expérimentez également les liens qu'il existe entre ce widget et le mode Plan de votre site.

Transcription

Dans ce chapitre, nous allons aborder la grande question de l'interactivité, dans notre site et donc nous allons être amené notamment avec des liens et avec des widgets. Et dans cette vidéo et bien je vous propose de commencer tout de suite par la mise en place de la barre de navigation principale du site, alors vous constatez que depuis le chapitre précédent, j'ai développé la page Réservation, j'ai développé la page Contact, se sont deux pages que nous n'avions pas faites ensemble, et puis surtout j'ai ajouté dans le plan de mon site une page supplémentaire, c'est la page Merci, qui est ici, vous voyez, c'est une sous-page de la page Réservation, et vous verrez plus tard dans ce chapitre à quoi cette page va nous servir. Alors en ce qui concerne ma barre de lien, et bien cette barre de lien apparaîtra de la même façon et aux mêmes endroits sur toutes les pages, c'est donc bien sur le gabarit que je dois me rendre ici pour définir cette barre de lien. Alors sur mon gabarit, je vais me rendre dans le panneau Calques, pour verrouiller mon calque Contenu pages, déverrouiller mon calque En-tête et puis surtout le sélectionner puisque c'est sur ce calque là maintenant que je désire travailler. Voila qui est fait, alors pour ma barre de lien et bien Muse me propose une solution toute faite qu'on appelle un widget, je vais donc me rendre ici dans le panneau bibliothèque de widgets qui se trouve ici sur le côté, et vous voyez que Muse vous propose une série de widgets répartis dans différentes catégories, nous avons des diaporamas, des formulaires, des menus, c'est ce qu'on va utiliser maintenant. Alors c'est quoi un widgets ? Et bien c'est une petite mini application, si vous voulez qui est toute faite et que vous pouvez utiliser telles quelles dans vos pages, et que vous bien sûr également personnaliser, c'est souvent d'ailleurs grâce à ces widgets que l'on peut introduire de l'interactivité et de l'animation sur nos sites Muse. Alors je vais ouvrir la catégorie Menu, vous voyez qu'on me propose soit un menu horizontal soit un menu vertical, et vous avez d'ailleurs un aperçu dans la partie supérieure de la bibliothèque de widgets, je vais me servir du menu horizontal, je vais donc le glisser sur mon gabarit à hauteur de mon rectangle rouge, et quand je relâche ma souris et bien voila un menu qui est mis en place. Alors je vais fermer tous ces menus, et vous constatez que le widget, et bien il a déjà fait une grosse partie du boulot à notre place, puisque regardez il y a 4 boutons sur notre barre de liens et le texte de ces 4 boutons et bien reprend les 4 pages principales du plan de mon site. D'ailleurs si je reviens sur le plan de mon site et que j'ajoute une page supplémentaire ici, donc là je ne vais pas donner d'autre nom à cette page, Sans-titre - 9 et bien quand je reviens sur mon gabarit, regardez, le widget a automatiquement été mis à jour puisque j'ai un bouton supplémentaire pour cette page ici après le bouton Contact. Si je reviens dans le plan de mon site et que je déplace cette nouvelle page, je vais la mettre ici par exemple entre la page Programme et la page Réservation, et bien dans mon gabarit, le menu a été mis à jour également, la page Sans-titre - 9 se trouve ici au milieu, et puis bien évidemment, si je reviens sur le plan de mon site et que je décide de supprimer cette page, sans surprise maintenant, le menu a été correctement mis à jour. Alors je vais sélectionner ce menu et vous montrer que quand vous utilisez des widgets dans Muse et bien vous allez toujours retrouver cette petite flèche bleu ici juste à côté du widget, et quand vous cliquez sur ce petit bouton, et bien vous avez accès aux options du widget. Alors en ce qui concerne le widget Menu, et bien la première option me permet de choisir le type de menu que je veux, vous voyez que par défaut le menu ne m'affiche que les page de niveau supérieur, mais je pourrais bien sûr choisir d'afficher toutes les pages, et à ce moment là, vous constatez que la page Merci apparaît également ici sous la forme d'un sous-menu. Alors si je veux ne pas voir cette page Merci dans le menu, et bien j'ai deux options, la première vous la connaissez il s'agit tout simplement de choisir de ne voir que les pages de niveau supérieur mais il y en a une autre, donc je vais revenir sur toutes les pages pour vous montrer cette autre solution. Et l'autre solution consiste à se rendre dans le plan du site, et ici je vais faire un clic droit sur ma page Merci, et là j'ai des options de menu, et je peux donc ici exclure cette page du widget Menu de manière explicite en cliquant ici sur cette option, voila qui est fait et donc quand je reviens sur mon gabarit, et bien malgré que dans mon widget je demande à afficher toutes les pages, et bien la page Menu qui devrait se trouver en-dessous du bouton réservation n'apparaît quand même pas puisque j'ai explicitement demandé à ce qu'elle soit exclue du menu. Je peux choisir le sens du menu, horizontal ou vertical, dans ce cas ci c'est le menu horizontal dont j'ai besoin. Alors au niveau de la taille des éléments, vous voyez que j'ai deux solutions, taille uniforme ou espacement uniforme, je suis pour le moment en taille uniforme, ça veut dire quoi ? Et bien ça veut dire que chaque bouton a la même largeur. Et ce indépendamment du texte écrit dans le bouton. Par exemple le mot Contact est beaucoup plus petit que le mot Réservation, et pourtant le bouton qui est autour du mot Contact a la même largeur que le bouton qui est autour du mot Réservation. Ça, c'est la taille uniforme. Si vous choisissez l'espacement uniforme alors là chaque bouton pourra avoir une largeur différente, largeur qui dépend du texte qui est écrit sur le bouton. Alors comment ici choisir la largeur des boutons, et bien vous voyez que pour le moment c'est le widget dans son ensemble qui est sélectionné, d'ailleurs dans le coin supérieur gauche de votre fenêtre, c'est écrit ici Menu, par contre si je clique une 2ème fois sur l'un des boutons, et bien là je vais sélectionner un élément de menu dans le menu. Et c'est pour ça que j'ai le mot Élément de menu qui est ici, il y a écrit dans le coin supérieur gauche et ça, ça me permet vous voyez de modifier la dimension de ces éléments de menu, constatez également que quand j'en modifie un, je les modifie tous, et donc vous voyez que chaque bouton maintenant a une largeur différente qui dépend du texte écrit sous le bouton mais que j'ai pu établir un petit écart entre ces boutons, et donc ça, c'est quand je sélectionne mon menu et que je reviens dans les options, la possibilité d'espacements uniformes. Alors moi je vais revenir sur la taille uniforme qui était l'option par défaut. Voila je vous invite à jouer avec les autres options par vous-même, et à les découvrir par vous-même normalement elles sont assez explicites, normalement ici affiché le libellé, vous voyez ici que c'est très simple à comprendre, ça vous permet d'afficher ou pas le texte sur le bouton des fois que vous voudriez utiliser une icône à la place du texte. Alors voila, mon menu est maintenant ici en place, je vais l'accrocher ici au guide lui donner une hauteur, il me reste maintenant à le mettre en forme et çà je vous propose d'y consacrer la prochaine vidéo.

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 !