L'essentiel de Muse CC 2015

Créer et mettre en forme des hyperliens

Testez gratuitement nos 1299 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez comment créer différents types d'hyperliens directement dans vos pages, sans l'aide du widget Menu.

Transcription

Dans un site, il n'y a pas que sur la barre de navigation principale qu'il peut y avoir des liens. Vous pouvez très bien créer des liens à partir de n'importe quel autre élément de votre site. Et pour vous illustrer tout cela, je vais me rendre sur ma page d'accueil directement aller contrôler mon panneau des calques pour bien vérifier que je travaille sur le calque contenu page maintenant, voila qui est fait. Me rendre également dans mon panneau bibliothèque pour cliquer sur cette petite icône dans le fond qui s'appelle Importer la bibliothèque Muse donc en cliquant sur cette icône vous allez vous retrouver dans les sources de cette formation, au niveau du dossier chapitre 6 et du sous dossier 6.03 consacré à cette vidéo, et là vous allez trouver un fichier qui s'appelle bouton.mulib alors rappelez-vous de cette extension .mulib pour Muse Library C'est donc un élément de bibliothèque que j'ai exporté à partir d'une autre copie de Muse que j'importe ici dans cette bibliothèque. Voila je clique sur Ouvrir et vous voyez que l'élément a été correctement importé, et donc dans ma bibliothèque, un nouveau dossier qui s'appelle Sans Titre et dans ce dossier un nouvel élément qui s'appelle Bouton alors je vais prendre ce bouton, je vais le mettre dans le dossier site chemin vert et je vais en profiter pour supprimer ce dossier sans titre dont je n'ai pas besoin voila qui est fait. Alors sur ma page d'accueil et bien je vais me rendre ici un petit peut plus bas au niveau de la section le restaurant du chemin vert et dans ma bibliothèque je vais prendre mon bouton venir le glisser sur mon site comme ceci, grâce aux guides intelligents je peux placer ce bouton, alors je vais changer également le texte de ce bouton je vais écrire Réserver Vous faire remarquer également quand je sélectionne ce bouton qu'au niveau des différents états de ce bouton, et bien ces différents états ont été définis ici, l'état normal, l'état de survol, l'état de clic et l'état actif. Tout ça a été importé en important cet élément de bibliothèque. Alors j'ai un bouton sur ma page mais pour le moment quand je clique sur ce bouton et bien il n'y a toujours rien qui se passe, donc pour vraiment ajouter un comportement à ce bouton et donc envoyer les internautes ailleurs quand ils cliquent dessus, et bien je vais porter mon attention sur la partie supérieure de mon écran, et ici j'ai une zone qui s'appelle Hyper lien alors je vais ouvrir la liste déroulante qui est ici, et là vous avez la liste de toutes les pages qui font partie du plan de votre site et moi j'ai envie quand les internautes cliquent sur le bouton réserver, qu'ils se retrouvent sur la page réservation, donc je vais tout simplement choisir Réservation ici dans cette liste et maintenant le bouton il vit, on va s'en apercevoir on va passer dans le mode Aperçu, on va laisser Muse le temps de générer cet aperçu, et donc quand je descend un petit peu, voila mon bouton dans l'état normal, l'état de survol avec le texte en blanc, puis l'état clic avec la bordure en jaune, et quand je relâche le bouton de la souris, et bien je vais me retrouver voila, sur la page Réservation donc ce bouton fonctionne parfaitement. Donc ça c'est une première façon de créer des liens, on peut créer des liens vers des pages. Alors je vais continuer avec mes boutons donc je retourne dans ma bibliothèque, je vais maintenant placer 3 boutons un ici en dessous de la première colonne, un second en dessous de la deuxième colonne, le voici avec mes guides, c'est facile, et le troisième que je vais placer en dessous de la dernière colonne, nous y sommes. En cliquant sur ces liens, j'ai maintenant envie d'envoyer mon internaute vers la page Programme, que je vais ouvrir ici, mais pas à n'importe quel endroit de cette page Programme. Donc je reviens sur ma page d'accueil, quand je clique sur le bouton Plus d'info qui correspond à Jeux d'extérieur j'ai envie de me retrouver à ce niveau là de la page programme ou au niveau de la cérémonie des diplômes ou au niveau du grand tiercé de canards. Alors sur ma page programme, je vais devoir définir pour ça ce qu'on appelle des ancres, donc sur ma page programme dans le panneau des outils qui est ici je vais prendre l'outil Ancre, et je vais venir placer ici au niveau de ce titre. Alors voila, je vais devoir donner un nom à cet ancre, Je vais l'appeler Activités, ou pour être plus précis activite sans l'accent sur le E puisque je n'utilise pas de caractères spéciaux ni d'espace dans ce type de nom. Alors j'ai 2 autres ancres à créer, donc pour cela je vais accélérer le mouvement, et cliquer 2 fois sur cet outil, 1, 2 et ça, ça va me permettre de charger vous le voyez 2 ancres dans mon curseur, donc je vais descendre un petit peu dans ma page, repérer l'endroit où l'on parle de la remise des diplômes, la voici, donc je vais placer une première ancre à cet endroit ci, je vais l'appeler Diplomes, sans caractères spéciaux donc, et puis je descends un petit peu plus bas et voici le Gand tiercé de canards où je vais placer donc ma dernière ancre et je vais appeler ça "Tierce" sans caractères spéciaux de nouveau. Voila, je valide, je reviens sur ma page d'accueil et maintenant je vais lier mes boutons, donc je sélectionne ce bouton et regardez maintenant dans la liste et bien au niveau de la page programme je retrouve mes 3 ancres, et donc je lie la page vers l'ancre Activité, je lie maintenant ce bouton vers l'ancre Diplome de cette même page, et puis ce dernier bouton ici vers l'ancre Tierce de cette même page, je retourne dans mon aperçu pour vérifier si ça fonctionne correctement, et donc je vais par exemple tester le bouton du milieu pour la cérémonie des diplômes. Je clique dessus et je me retrouve et bien sur ma page programme au niveau de l'élément Cérémonie, Remise des diplômes. Voilà, ça fonctionne, alors autre type de lien que vous pouvez encore créer, pour ça je vais descendre un petit peu plus bas ici, Contacter monsieur Hans Surless pour vous inscrire comme bénévole je vais sélectionner ici l'élément que je veux rendre cliquable, et puis ici dans la section Hyper liens, je vais dérouler cette liste, et plutôt que de choisir un lien pré-existant ici dans mon site, et bien je vais directement taper l'adresse du lien ici au-dessus donc se sera une adresse email dans ce cas ci, Hans.Surless@gmail.com je valide, et bien voila j'ai maintenant un lien vers une adresse email, et donc quand l'internaute cliquera sur ce lien, et bien il se retrouvera dans le client de messagerie et pourra envoyer directement un mail à ce monsieur. Alors vous voyez que ce lien, il est en bleu souligné, c'est la couleur par défaut des liens, mais si j'ai envie d'autre chose dans mon site, la solution de Muse est la suivante, dans le menu Fichier j'ai accès rappelez-vous aux propriétés du site, alors on avait déjà parlé du premier onglet Mise en page qui est ici, nous allons parler du second onglet Contenu, c'est là que vous pouvez définir les styles d'hyper liens vous voyez que par défaut, j'ai cette fameuse couleur bleu et ce soulignement, vous voyez que j'ai également défini d'autres styles de lien ici que j'ai appelé Lien chemin vert, je vais simplement changer les couleurs des différents états de ces liens. Et donc ici quand je valide ceci, et bien je vais me rendre dans mon lien. Rappelez-vous que pour avoir des options supplémentaires on a ces liens au niveau de la barre de contrôle. Je vais cliquer sur Hyper lien pour avoir des options supplémentaires sur mes liens et parmi les options supplémentaires la possibilité regardez de changer le style de lien comme ceci. Remarquez au passage une autre possibilité supplémentaire qui n'a pas lieu d'être ici pour un lien vers une adresse email, c'est la petite case à cocher ici qui me permettrait d'ouvrir le lien dans une nouvelle page ou un nouvel onglet du navigateur, et ça, cela sera particulièrement intéressant quand vous ferez des liens vers des sites externes qui s'ouvriront donc dans une autre page d'un navigateur. Voila donc un bref aperçu sur la manière dont vous pouvez créer des hyper liens dans Muse et de la manière dont vous pouvez aussi créer différents types d'hyper liens dans Muse. Alors vous voyez bien que n'importe quel élément de votre site peut servir de base à un hyper lien, ne vous contentez pas des liens qui se trouvent dans la barre de navigation principale et qui vous sont apportées automatiquement par le widget menu.

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 !