Exercice 1.6 : Réalisation de la navigation dynamique du site Web

Présentation visuelle

Vous devez avoir effectué l'exercice 1.5 : Application d'un modèle de page au site Web avant de pouvoir commencer la réalisation de la navigation dynamique du site Web.

Lorsque vous avez conçu la structure du site Web dans l'exercice 1.2, vous avez pris des décisions sur les relations entre les pages. Rappelez-vous de la façon dont vous avez agencé les icônes de page avec les lignes les connectant :

Structure du site

Il existe plusieurs moyens d'associer une page à une autre. Ces relations sont identiques aux relations d'une famille. Dans cet exemple, Affichage de toutes les petites annonces est la page parente et les trois autres pages sont ses pages enfant. De plus, ces trois pages sont des éléments de même niveau.

Ces relations de page permettent de générer des liens de navigation, tels des barres de navigation et des onglets. Chaque page crée automatiquement ses liens de navigation en fonction des pages auxquelles elle est liée. Ce processus est appelé navigation dynamique.

Vérification de la structure du site

Vous devez vérifier que la structure du site a été configurée pour spécifier les pages à inclure dans la navigation. Vous pouvez spécifier dans Web Site Designer les pages à inclure en tant que liens dans la navigation dynamique, les pages à inclure dans les plans du site ainsi que d'autres options de navigation dépendant de la structure du site et des relations de page. La spécification de ces éléments est utile lorsque vous avez des pages qui doivent être incluses dans le site mais n'a aucun intérêt pour les fonctions de navigation. Par exemple, une page d'erreur peut s'afficher lorsque le site rencontre un problème. Toutefois, vous pouvez ne pas afficher la page d'erreur lors de la navigation.
  1. Cliquez deux fois sur Navigation sur le site Web dans la vue Navigateur de projets pour afficher la structure du site.
  2. Vous pouvez voir que l'option Afficher dans la navigation est sélectionnée par défaut pour toutes les pages car l'icône Afficher dans la navigation () est visible. L'icône Afficher dans la navigation est la première icône de la ligne des icônes de page. Cette option doit être sélectionnée pour chaque page que vous souhaitez inclure dans une barre de navigation. Pour activer la navigation dynamique, ajoutez un lien à cette page. Vous pouvez également désactiver cette page afin qu'elle ne s'affiche pas dans la navigation. Vous devez désactiver la page des résultats de la recherche, Listes filtrées, dans la navigation car l'utilisateur est placé dans cette page une fois l'option de recherche sélectionnée à la page Affichage de toutes les petites annonces.
    1. Cliquez deux fois sur l'icône de page Listes filtrées.
    2. Sélectionnez Navigation > Afficher dans la navigation pour annuler la sélection de cette icône. L'icône Afficher dans la navigation doit être grisée sur l'icône de page Listes filtrées.
  3. Vous devez également désactiver la page Mise à jour des listes car l'utilisateur est placé dans cette page une fois l'option de mise à jour sélectionnée à la page Affichage de toutes les petites annonces. Cliquez à l'aide du bouton droit de la souris sur l'icône de page Mise à jour de listes. Sélectionnez ensuite Navigation > Afficher dans la navigation pour annuler la sélection de cette icône. L'icône Afficher dans la navigation doit être grisée sur l'icône de page Mise à jour de listes.
  4. Vous devez définir une racine de navigation pour le site. La page principale, généralement la première page créée dans le site, est souvent définie comme racine de navigation. Cliquez à l'aide du bouton droit de la souris sur l'icône de page Affichage de toutes les petites annonces et cliquez sur Navigation > Définir la racine de navigation. La troisième icône () de la ligne est l'icône racine. La racine de navigation est importante car elle détermine les niveaux de lien utilisés lors de la génération de la navigation de site Web, comme les barres de navigation.
    Remarque : Les options par défaut définies par la navigation de site pour la page Affichage de toutes les petites annonces et Envoi d'une liste doivent être sélectionnées.
  5. Appuyez sur les touches Ctrl+S.

Ajout d'un composant de navigation au modèle de page

  1. Retournez au modèle de page en cliquant deux fois sur le fichier modèle.jtpl dans la vue Navigateur de projets.
  2. Dans la vue Palette, cliquez sur Navigation sur le site Web pour ouvrir le tiroir qui contient les composants de navigation. Il existe plusieurs types de composant dynamique de navigation que vous pouvez ajouter à votre site Web, incluant un plan de site. Le composant de base est la barre horizontale qui est composée d'une ligne de liens dépendant de la structure du site.
  3. Bien que vous ayez besoin d'une ligne de liens dans la partie supérieure de chaque page permettant à tous les utilisateurs d'accéder aux autres pages du site, vous souhaitez également ajouter un intérêt visuel à la navigation. Déplacez le composant Onglets horizontaux à la deuxième ligne du modèle de page. Ce composant crée les liens dynamiques d'une ligne comportant des onglets. L'assistant Insertion d'onglets horizontaux s'affiche.
  4. Acceptez la valeur par défaut afin d'utiliser un composant de navigation Exemple.
  5. Acceptez la valeur par défaut des images miniatures (horizontal-tab01.html) et remarquez que la zone Nom du fichier est remplie automatiquement.
  6. Sélectionnez le type de lien que vous souhaitez voir dans la barre de navigation en fonction des relations de page. Pour faire en sorte que la page principale du site ainsi que toutes les pages de même niveau et les enfants de la page s'affichent dans la navigation, vérifiez que les éléments suivants sont sélectionnés : Si vous avez sélectionné des liens suivants ou précédents, vous pouvez indiquer un libellé qui apparaîtra pour ces liens, tels que Précédent et Suivant.
  7. Cliquez sur OK. L'icône Composant de navigation () s'affiche sur le modèle de page.
  8. Sauvegardez les modifications dans le modèle de page. Lorsque vous sauvegardez le modèle de page, les modifications de navigation dynamique sont appliquées à toutes les pages du site.

Le composant de navigation ajoute plusieurs fichiers au projet Web. Une fois le modèle sauvegardé, notez que la vue Navigateur de projets contient un nouveau fichier .html et plusieurs fichiers .gif. Ces fichiers affichent les onglets dans les pages :

Navigateur de projets avec navigation

Aperçu de la navigation

Si vous souhaitez voir une instance de l'aspect de la navigation sur les pages et non dans le modèle, cliquez deux fois sur tous_les_enregistrements.jsp dans la vue Navigateur de projets puis cliquez sur l'onglet Aperçu dans Page Designer. Vous pouvez voir que les noms qui apparaissent dans les onglets sont les libellés de navigation pour les pages et non pour les noms de fichier. Notez également que la page en cours est affichée sous la forme d'onglet mis en évidence. Lorsque vous naviguez dans le site, la page en cours sera toujours l'onglet mis en évidence.

Conseil : Si vous modifiez la structure du site dans la vue Navigation, les liens de navigation dynamique sont automatiquement mis à jour en fonction de la nouvelle structure.

Onglets de navigation

Notez que des icônes de lien Icône de lien et des symboles abc apparaissent à côté des deux onglets. Ces symboles sont là pour vous rappeler qu'il s'agit de liens et que le texte est généré de manière dynamique. Lorsque vous testez la page ou que vous affichez la page sur un serveur, les icônes ne s'affichent pas.

Maintenant que vous avez configuré la navigation dynamique, vous êtes prêt à commencer l'exercice 1.7 : Aperçu du site Web.

Conditions d'utilisation | Commentaires

(C) Copyright IBM Corporation 1999, 2004. All Rights Reserved.