Pour faciliter la navigation dans votre site, vous pouvez insérer un menu permettant d’ouvrir d’autres pages grâce à des liens. En général, pour simplifier cette création, on utilise un tableau à deux colonnes avec à gauche le menu et à droite le contenu de la page. Mais cette méthode n’est pas très souple. Voici comment créer ce menu en utilisant les blocs de NVU
Patricia Frein (Carm2i)Remarque : nous partons du principe que vous avez déjà créé les pages de votre site et que vous voulez ajouter le menu de navigation.
Etape 1 : préparez la page
Pour commencer, préparez la page en isolant son contenu dans un bloc afin de pouvoir disposer aisément du menu.1 Ouvrez la page d’accueil de votre site et sélectionnez son contenu en appuyant simultanément sur les touches Ctrl et A.2 Pour isoler la sélection dans un bloc, cliquez dans la barre d’outils située en haut de l’écran sur le bouton nommé Dissocier du texte :Un cadre apparaît autour de la partie que vous avez sélectionnée :Cette bordure, qui permet simplement de repérer le bloc, n’apparaîtra pas dans la page.3 Redimensionnez le bloc afin de laisser de la place à gauche pour le menu. Pour cela, placez le pointeur sur l’une des poignées disponibles à gauche du cadreet effectuez un cliquer-glisser vers la droite et vers le bas pour adapter la taille du cadre au contenu.4 Si le cadre n’est pas positionné correctement, déplacez-le en plaçant le pointeur sur le bouton en haut à gauche du cadrePuis, effectuez un cliquer-glisser vers l’endroit souhaité de façon à laisser de la place pour le menu de navigation.
Etape 2 : créez la structure du menu
1 Vous pouvez maintenant créer la structure du menu.Pour cela, placez le pointeur en haut à gauche de la page, puis cliquez pour faire apparaître le curseur :2 Tapez le menu de navigation que vous souhaitez obtenir, ici :3 Pour pouvoir déplacer le menu où vous le souhaitez dans la page, transformez-le en bloc.Pour cela, sélectionnez le texte du menu et refaites les manipulations expliquées dans les points 2 et 3 de l’étape 1.
Etape 3 : créez les liens
1 Maintenant, créez les liaisons entre les titres du menu et les pages. Pour cela, sélectionnez le texte qui doit contenir le lien, par exemple Mes photos, en effectuant un cliquer-glisser du premier au dernier caractère :2 Pour indiquer le lien, cliquez en haut de l’écran dans la barre d’outils sur le boutonPuis, cliquez sur Parcourir.3 Recherchez la page à activer et cliquez sur son nom. Par exemple :4 Cliquez sur les boutons Ouvrir et OK. Le titre du menu est maintenant de couleur bleue et souligné :5 Refaites les points 1 à 4 de cette étape pour créer les liens des autres titres dans le menu de navigation. Vous obtenez :Remarque : ne créez pas de lien sur le titre Accueil car vous êtes déjà sur la page d’accueil. Ce lien pourra être créé dans les autres pages où vous placerez le menu de navigation.
Etape 4 : définissez la mise en forme
Une fois les liens créés, vous pouvez améliorer la présentation du menu de navigation et le bloc texte principal de la page en modifiant la police de caractères et la couleur de fond.Changez de police1 Sélectionnez le texte à modifier, ici tous les titres du menu, et choisissez dans le menu Format l’option Police. Puis, dans le menu qui se déroule, cliquez sur le type de caractères souhaité. Par exemple sur2 Pour modifier la taille des caractères, choisissez dans le menu Format l’option Taille et, dans le menu qui se déroule, cliquez sur la taille Petite.3 Vous pouvez aussi mettre en valeur un titre en ajoutant du gras sur Accueil pour indiquer que vous êtes déjà dans la page d’accueil. Pour cela, sélectionnez le mot Accueil dans le menu et cliquez surModifiez la couleur de fond1 Pour faire ressortir le menu, appliquez une couleur de fond en cliquant sur le deuxième carré nommé Choisir la couleur de fond du bouton suivant :Remarque : le carré en haut du bouton permet de modifier la couleur des caractères d’un texte sélectionné.2 Dans la palette de couleurs proposée à droite de la fenêtre, cliquez sur la couleur souhaitée, ici :Remarque : si la couleur souhaitée ne figure pas dans la palette, cliquez-glissez le pointeur dans la zone des nuances à gauche de la fenêtre :La couleur apparaît en dessous du bouton Dernière couleur choisie :A partir de cette couleur, vous pouvez aussi modifier le ton en déplaçant le curseur vers la gauche ou vers la droite dans la zoneNous avons gardé la couleur choisie dans la palette. Cliquez sur le bouton OK :En utilisant les manipulations expliquées dans cette étape, vous pouvez présenter les autres blocs de texte de votre page (voir l’illustration 1).
Etape 5 : vérifiez les liens
1 Avant de dupliquer le menu dans les autres pages, vérifiez que les liens fonctionnent. Pour cela, enregistrez les modifications en cliquant en haut de l’écran sur le bouton2 Affichez la page d’accueil dans votre navigateur Internet en cliquant en haut de l’écran surPuis cliquez sur Lancer l’application.3 Le navigateur s’ouvre et propose la page d’accueil avec le menu de navigation. Cliquez sur l’un des titres. Le navigateur affiche la page liée à ce titre.
Etape 6 : copiez le menu dans les autres pages
1 Quand vous êtes sûr que tous les liens fonctionnent, fermez la fenêtre du navigateur et retournez sur la page d’accueil dans NVU.2 Cliquez avec le bouton droit de la souris dans une partie vierge du menu. Tout le texte est alors sélectionné. Puis, dans le menu contextuel, cliquez sur Copier.3 Ouvrez la page qui va accueillir le menu, puis isolez les blocs de texte comme expliqué dans l’Etape 1.4 Pour ajouter le menu, cliquez en haut à gauche de la page et choisissez, dans le menu Edition, l’option Coller.5 Créez le lien vers la page d’accueil sur le titre Accueil (voir l’Etape 3).6 Supprimez le lien dans le menu qui active la page actuellement ouverte. Pour cela, cliquez avec le bouton droit de la souris sur le lien à désactiver, puis sur Annuler le lien.Référez-vous à l’illustration 2 pour voir le résultat. Répétez cette étape pour ajouter le menu aux autres pages
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
