Création d’hyperliens sur les sites web Adobe Muse

Dans cet article, vous allez apprendre à utiliser des hyperliens dans Adobe Muse. Grâce aux hyperliens, vous pouvez créer des liens vers des sites web externes, des fichiers téléchargeables, des adresses électroniques, etc. Les fichiers téléchargeables peuvent être au format PDF, DOC, PPT, TXT, multimédia ou d’autres types de fichiers que vous souhaitez partager avec les visiteurs de votre site mais qui ne sont pas actuellement pris en charge pour l’insertion dans l’interface d’Adobe Muse. Vous pouvez créer un lien vers les fichiers qui sont actuellement chargés sur votre compte d’hôte Adobe Muse, ainsi que les fichiers qui sont hébergés sur des sites web tiers.

Dans cette section, vous allez apprendre à connecter des éléments de menu aux zones d’ancrage, afin d’ajouter des liens d’ancrage vers le menu manuel. Procédez comme suit :

1. Cliquez n’importe où sur la page pour sélectionner la page (de façon à ce que l’indicateur de sélection affiche le mot : Page). Cliquez ensuite deux fois sur l’élément de menu Widget (conteneur de widget). Le premier clic permet de sélectionner l’ensemble du widget de menu manuel, le second permet de sélectionner l’élément de menu. L’indicateur de sélection affiche les mots : Elément de menu.
2. Cliquez sur le menu Hyperliens pour afficher la liste complète des pages et des balises d’ancrage associées au site. Dans la section Bureau, localisez la page de droite et notez que les balises d’ancrage que vous avez créées sont listées juste en dessous de celle-ci. Sélectionnez la balise d’ancrage appropriée pour la lier à l’élément de menu.

3. Répétez l’étape 2 pour ajouter des liens d’ancrage.
4. Choisissez Fichier > Propriétés du site. Dans l’onglet Mise en page, vérifiez que la case Activer l’état actif pour les liens d’ancrage est sélectionnée. Cette option est activée par défaut pour tous les nouveaux sites, mais si vous modifiez un site plus ancien, vous devrez peut-être cocher la case.
5. Choisissez Fichier > Prévisualiser la page dans le navigateur.

Lorsque vous cliquez sur les liens pour afficher les différentes zones de la page, notez que l’état actif correspondant dans le menu de navigation s’affiche. Cette fonction du site aide les visiteurs à s’orienter en leur indiquant quelle section ils sont en train de consulter. Quittez le navigateur web et revenez à Adobe Muse.

Essayez également de faire défiler la page vers le haut et vers le bas et regardez comment le code de la page détecte l’emplacement de chaque balise d’ancrage et met à jour l’état actif du menu manuel pendant que la page se déplace dans chaque zone de la page. Cette technique fonctionne pour les pages qui défilent verticalement et horizontalement.

Remarque : une page doit être suffisamment grande ou large pour laisser de la place pour que les balises d’ancrage permettent d’accéder à chaque région. Si les zones de page sont trop rapprochées (c’est-à-dire si le contenu s’affiche dans une fenêtre de navigateur sans défilement), les balises d’ancrage ne semblent pas permettre de passer à la prochaine région.

6. Quittez le navigateur web et revenez à Adobe Muse.

Dans la section suivante, vous allez apprendre à ajouter des liens de téléchargement, qui permettent aux visiteurs de télécharger différents formats de fichier, tels que PDF, DOC, MP3, MOV, PSD ainsi que des fichiers JPEG haute résolution.

Conseil : si vous travaillez avec d’autres concepteurs sur un projet de site, vous pouvez même définir un lien vers les fichiers source .Muse, de façon à ce que les membres de l’équipe puissent les télécharger directement à partir de votre site web.

La création de zones d’ancrage sur une page web est un moyen simple d’isoler visuellement différentes sections d’une page. Chacune de ces sections peut être facilement accessible via des liens d’ancrage, qui sont conçus pour faciliter la navigation sur une page.

Dans la conception terminée, un page web doit idéalement contenir des liens d’ancrage qui permettent aux visiteurs d’accéder à la zone qui affiche le menu correspondant, grâce à un défilement vertical. Imaginez que lorsque vous ajoutez des balises d’ancrage, c’est comme si vous apposiez une marque quelque part sur une page. Lorsque les visiteurs cliquent sur un lien vers ce point d’ancrage, le lien va faire défiler les pages pour aller directement à la section spécifique qui contient le marqueur.

1. Cliquez sur le bouton Point d’ancrage dans la zone de navigation supérieure pour charger l’outil Point d’ancrage.

2. Cliquez une fois tout en haut de la page, au-dessus de la navigation de niveau supérieur du site dans la zone d’en-tête. Vous pouvez déplacer le rectangle d’en-tête pour le mettre à l’écart temporairement, si vous le souhaitez. Si vous déplacez le contenu de l’en-tête, pensez à le remettre en place après.
3. Dans la boîte de dialogue Renommer un point d’ancrage qui s’affiche, entrez le nom du point d’ancrage.

4. Répétez les étapes 1 à 3 pour définir des zones d’ancrage et ajouter des liens d’ancrage.

Une fois que vous aurez ajouté un widget de menu manuel à l’étape suivante, vous pourrez lier les boutons aux balises d’ancrage pour créer une expérience de navigation qui permettra aux visiteurs de passer au bas de la page pour lire chaque menu.

1. Lors de la modification d’une page en mode Conception, utilisez l’outil Texte pour créer un nouveau bloc de texte, près de l’angle supérieur droit du bloc de texte du menu Petit-déjeuner. Saisissez les mots : Téléchargement du menu.
2. Le bloc de texte étant toujours sélectionné, utilisez le panneau Texte pour appliquer les paramètres suivants :
   • Police web : Kaushan Script (ou n’importe quelle police de script de votre choix)
   • Taille de la police : 14
   • Couleur : #EEE5C4 (dans la partie 3, vous avez renommé cette nuance de couleur cream-menu)
   • Interligne : 57 %
   • Alignement : centré
3. Utilisez le menu Fond pour définir la couleur du fond sur aucun. Cliquez sur le dossier situé à côté de la section Image et parcourez l’arborescence pour sélectionner le fichier nommé download-bg.png, qui se trouve dans le dossier des fichiers d’exemples, afin de définir l’image d’arrière-plan. Assurez-vous que le menu Ajustement est défini sur Taille originale et que la position est définie sur centré.

4. Cliquez en dehors du menu Fond pour le fermer. Utilisez, si nécessaire, l’outil de sélection pour redimensionner le bloc de texte et le repositionner de sorte qu’il soit centré dans l’angle supérieur droit du bloc de texte du menu Petit-déjeuner.

5. Le bloc de texte étant toujours sélectionné, utilisez le menu Liens dans le panneau de configuration pour sélectionner l’option Lier au fichier. Dans la boîte de dialogue d’importation qui s’affiche, accédez au fichier et sélectionnez-le et cliquez sur Ouvrir pour l’ouvrir.

Remarque : lorsque vous parcourez l’arborescence pour sélectionner un fichier à l’aide de la fonction Lier au fichier, ce fichier devient l’une des ressources du site ; ressource qui sera transférée lors de la publication du site ou incluse dans ses fichiers lors de son exportation. Il est fortement recommandé de copier tous les fichiers que vous souhaitez lier au site dans le dossier local de celui-ci, avec tous les autres fichiers d’image utilisés.

A présent, le lien vers le fichier PDF a été ajouté. Si vous observez le panneau Ressources, vous verrez que le fichier est maintenant répertorié comme l’une des ressources du site web.

6. Sélectionnez le bloc de texte à l’aide de l’outil de sélection. Copiez le bloc de texte Téléchargement du menu et collez-le, en le positionnant au-dessus de l’angle supérieur droit du menu Déjeuner. Répétez deux nouvelles fois cette étape pour créer des copies qui seront positionnées au-dessus des angles supérieurs droits des menus Dîner et Desserts.

Dans un projet réel, vous pouvez lier jusqu’à quatre fichiers de menu distincts, pour offrir aux visiteurs quatre fichiers PDF téléchargeables distincts qu’ils peuvent utiliser pour afficher et imprimer les menus. Mais dans le cadre de ce tutoriel, le bouton Télécharger contient un lien vers le même fichier PDF dans chaque zone de la page.

7. Choisissez Fichier > Prévisualiser la page dans le navigateur. Cliquez sur l’un des éléments du menu horizontal, pour atteindre ce menu sur la page. Notez qu’au fur et à mesure que vous faites défiler la liste pour voir les menus Dîner et Desserts, l’en-tête s’affiche au-dessus de l’autre contenu de la page. Ce comportement se produit car la page des aliments utilise le gabarit de premier plan, et que le contenu de l’en-tête de cette page a été déplacé vers le premier plan.
8. Cliquez sur le lien Téléchargement du menu et examinez le téléchargement du fichier PDF sur votre machine.

Selon le navigateur que vous utilisez et les préférences de ce navigateur, vous pourrez observer différents comportements. Certains navigateurs affichent le fichier PDF dans la fenêtre du navigateur alors que d’autres téléchargent simplement le fichier PDF sur votre bureau, où vous pourrez l’ouvrir à l’aide d’Acrobat Pro ou d’Acrobat Reader.

Si vous utilisez Adobe Muse depuis un certain temps, vous avez sans doute remarqué que le menu Liens a été récemment réorganisé en sections afin qu’il soit plus facile de trouver les noms et les éléments de page pour lesquels un lien peut être créé. Dans cette section, vous examinerez plus en détails la structure du menu Liens, ainsi que la possibilité de filtrer les éléments de la liste de menus. Vous allez également apprendre à ajouter des liens de courrier électronique.

1. Cliquez sur la flèche vers le bas dans le menu Liens pour afficher la liste complète.

2. Le menu Liens est structuré en sections. La section Liens utilisés récemment affiche tous les liens vers des sites web externes qui ont été ajoutés au site. Vous pouvez entrer n’importe quelle adresse URL directement dans le champ Liens, pour créer un lien vers des pages web externes.
3. La section Bureau contient les pages du site actuel. Notez que les balises d’ancrage que vous avez ajoutées à la page des aliments sont répertoriées dans l’ordre alphabétique au-dessous de la page des aliments. Cela signifie que vous pouvez créer des points d’ancrage portant le même nom sur plusieurs pages d’un site, et être toujours en mesure de les identifier facilement lorsque vous définissez des liens. Dans cet exemple de site, il n’existe qu’une mise en page, à savoir Bureau, mais si le site contient d’autres mises en page, telles que Téléphone ou Tablette, ces sections sont affichés avec le jeu de pages correspondant.
4. La section Fichiers, située à la fin, comprend la fonction Lier au fichier ainsi que tous les fichiers téléchargeables qui ont été ajoutés au site actuel. Puisque vous venez d’ajouter un lien vers le fichier KatiesCafeMenu.pdf, le nom du fichier est répertorié dans cette section, ce qui permet de le relier plus facilement à une ressource commune dans plusieurs pages du site.
5. Si vous souhaitez ajouter un lien de courrier électronique (qui, lorsque le visiteur clique dessus, entraîne l’ouverture de son logiciel de messagerie électronique avec un nouveau message contenant l’adresse électronique du lien dans le champ « A » en attente de rédaction), saisissez alors l’adresse électronique avec le préfixe mailto: dans le champ du menu Liens, comme suit :
   
   mailto:adresse@électronique.com
   
   
6. La liste des éléments du menu Liens devient parfois très longue et difficile à parcourir sur des sites web plus volumineux. Si vous recherchez une page, un point d’ancrage, un fichier ou une adresse URL externe spécifique vers lequel vous souhaitez créer un lien, saisissez les premières lettres du lien dans le champ du menu Liens pour afficher les éléments correspondants. Vous pouvez ainsi rapidement filtrer la liste et identifier les éléments pour lesquels vous souhaitez créer un lien.

Maintenant que les boutons des icônes des réseaux sociaux sont en place, vous allez ajouter les liens externes vers chacun des sites de réseaux sociaux.

1. Sélectionnez l’icône Facebook, puis entrez (ou copiez/collez) le lien vers la page Facebook du Katie’s Café dans le champ du menu Liens, comme suit : http://www.facebook.com/KatiesCafeSF
2. Sélectionnez l’icône Google+, puis entrez (ou copiez/collez) le lien suivant vers la page du Katie’s Café sur Google+ : https://plus.google.com/u/1/117800212967830061444/posts
3. Sélectionnez l’icône Twitter, puis entrez (ou copiez/collez) le lien suivant vers la page Katie’s Café sur Twitter : http://twitter.com/katiescafesf
4. Cliquez à nouveau sur l’icône Facebook pour la sélectionner. Cliquez sur le mot souligné en bleu, Liens, situé à gauche du menu Liens. Dans la boîte de dialogue qui s’affiche, cochez la case Ouvrir le lien dans un(e) nouvel(le) onglet/page.
5. Répétez l’étape 4 pour définir les liens Google+ et Twitter afin qu’ils s’ouvrent également dans une nouvelle fenêtre de navigateur.

Il s’agit d’une convention commune relative à la conception web : les liens vers d’autres pages du même site s’ouvrent dans la même fenêtre de navigateur (comportement par défaut dans Adobe Muse) et les liens vers des pages d’autres sites web externes s’ouvrent dans une nouvelle fenêtre ou un nouvel onglet.

Pour préparer le lien avant de l’ajouter à une page de votre site Adobe Muse, vous allez utiliser un navigateur pour visiter le fichier chargé, en direct. Procédez comme suit :

1. Lancez le navigateur de votre choix.
2. Naviguez jusqu’à votre site ou un site tiers qui contient le fichier dépendant transféré. Vous pouvez utiliser un moteur de recherche, tel que Google, ou vous pouvez taper le nom de domaine du site directement dans la barre d’adresse du navigateur.

3. Après avoir accédé à la page d’accueil du site souhaité, cliquez dans la barre de navigation du site ou tapez l’adresse URL complète dans la barre d’adresse du navigateur pour accéder au fichier dépendant spécifique. Une fois cette étape terminée, le navigateur affiche, lit ou télécharge le fichier auquel vous accédez.
4. Une fois que vous êtes sûr que vous avez saisi l’adresse d’URL correcte pour accéder au fichier téléchargé, sélectionnez la totalité du contenu de la barre d’adresse du navigateur et choisissez Edition > Copier. Vous pouvez également utiliser le raccourci clavier Commande+C (Mac) ou Ctrl+C (Windows).

A ce stade, l’URL vers le fichier dépendant a été copiée dans le presse-papiers. Prenez soin de ne copier aucun autre élément, tant que vous n’avez pas collé l’URL du fichier dépendant dans le champ de l’hyperlien, comme décrit à la section suivante.

Une fois que vous avez réussi à télécharger un fichier dépendant, accessible via un navigateur, et que vous avez copié l’adresse URL de ce fichier, la dernière étape consiste à créer le lien dans une page de votre site Adobe Muse. Procédez comme suit :

1. Lancez Adobe Muse. Double-cliquez sur la vignette de la page à ouvrir dans la vue Conception.
2. Sélectionnez du texte, une image importée ou une forme de rectangle que vous souhaitez utiliser comme « bouton » sur lequel les visiteurs cliquent pour télécharger le fichier dépendant ou pour accéder à celui-ci.
3. Alors que l’élément de texte ou de page est sélectionné, cliquez dans le champ de l’hyperlien et collez l’URL (le chemin d’accès absolu) du fichier dépendant que vous avez copié précédemment.

Si vous souhaitez définir le lien pour qu’il s’ouvre dans une nouvelle fenêtre de navigateur, cliquez sur le libellé de l’hyperlien immédiatement à gauche de la fenêtre de l’hyperlien. Dans la boîte de dialogue qui s’affiche, activez la case à cocher en regard de l’option Ouvrir le lien dans un(e) nouvel(le) onglet/page, comme indiqué ci-dessous.

Enregistrez la page et publiez les modifications apportées au site.

Visitez la page dans un navigateur. Cliquez sur le texte ou bouton de lien pour vérifier que le lien fonctionne comme il se doit.

Pour plus de conseils sur l’utilisation d’Adobe Muse, visitez la page d’aide et de tutoriels d’Adobe Muse ou la page des événements d’Adobe Muse pour accéder à des webinaires en temps réel ou enregistrés.