Exercice 1.2 : Conception de la structure du site Web

Présentation visuelle

Vous devez avoir effectué l'exercice 1.1 : Création d'un projet Web avant de pouvoir concevoir la structure du site Web.

Un site Web est composé d'un ensemble de pages Web. Alors qu'une page Web inclut le contenu effectif, tel des éléments HTML, des images et des liens, un site Web est la conception et l'organisation hiérarchique des différentes pages Web. Un site Web doit avoir une finalité de niveau élevé (par exemple, fournir une zone de collection organisée pour des listes classées) et chaque page Web peut servir un but précis pour atteindre la finalité générale (par exemple, une page qui permet d'effectuer des recherches dans les listes).

La meilleure façon de concevoir votre site Web consiste à évaluer quelles seront les fonctions prises en charge par le site afin d'atteindre la finalité générale. Pour un site Web de petites annonces, vous savez qu'il existe plusieurs fonctions que le site doit réaliser. Par exemple, vous voulez que les visiteurs du site puissent effectuer des recherches dans les listes, les afficher et vous souhaitez également qu'ils puissent créer et modifier de nouvelles listes.

Pour créer un site Web effectuant ces fonctions, nous allons planifier quatre pages dans cet exercice et les créer dans l'exercice suivant.


  1. Dans la vue Explorateur de projets, développez ClassifiedsTutorial.
  2. Cliquez deux fois sur Navigation sur le site Web dans la vue Explorateur de projets. Web Site Designer s'ouvre et affiche la vue Navigation. A l'aide de cet outil, vous pouvez ajouter, supprimer et réorganiser les pages Web qui composent le site Web.
  3. Au début, aucune icône de page n'est affichée dans la vue Navigation. Généralement, la première page prise en compte lors de la conception du site Web est la page principale ou la page d'accueil du site. Il s'agit de la page à partir de laquelle les visiteurs accèdent au site Web. Déplacez le composant Nouvelle page de la vue Palette et déposez-le dans la vue Navigation. Une icône de page s'affiche et le titre de navigation de la page est activé.
  4. Cette page est la page d'accueil qui inclut l'ensemble des petites annonces de la base de données. Entrez Affichage de toutes les petites annonces pour le titre de navigation de la page. Vous apprendrez ultérieurement comment le titre de navigation est utilisé en tant que libellé de page à des fins de navigation sur le site.
  5. Afin que les visiteurs du site puisse envoyer leurs propres listes, ils doivent disposer d'une page pour la création de listes. Ajoutez une deuxième page en déplaçant le composant Nouvelle page dans la vue Navigation directement sous l'icône de page Affichage de toutes les petites annonces
  6. Nommez la page Envoi d'une liste. Notez que la nouvelle icône de page s'affiche sous l'icône de page Affichage de toutes les petites annonces et qu'elles sont reliées par une ligne. Cela signifie que ces deux icônes ont une relation parent-enfant.
  7. Vous devez également avoir une page dans laquelle les visiteurs peuvent modifier ou supprimer des listes existantes. Par exemple, si un visiteur a ajouté une liste pour un vélo et qu'aucune réponse n'est faite pendant une longue période, le vendeur peut vouloir baisser le prix demandé. Ajoutez une autre icône de page sous la page Envoi d'une liste et nommez-la Mise à jour de liste. Notez que cette icône de page est du même niveau que la page Envoi d'une liste et est un autre enfant de la page Affichage de toutes les petites annonces.
  8. Votre site Web doit également disposer d'une fonction de recherche afin que les visiteurs puissent effectuer des recherches dans les listes existantes afin de localiser les listes qui les intéressent. Pour ajouter une page pour l'affichage des résultats de la recherche, placez une autre icône de page à côté de la page Mise à jour de liste et nommez-la Listes filtrées.
    Remarque : Si vous avez par mégarde placé une page au mauvais emplacement ou si vous voulez réorganiser la structure de la page, vous pouvez déplacer les icônes de page à tout moment pour réorganiser le site.
  9. Appuyez sur les touches Ctrl+S afin de sauvegarder la conception du site. La vue Navigation doit avoir l'aspect suivant :
Navigation sur le site Web pour le projet ClassifiedsTutorial

Remarquez la présence d'une ligne de petites icônes dans la partie inférieure de chaque icône de page. La première icône qui n'est pas encore visible, représente les fichiers associés à l'icône et s'affiche à la création de ces fichiers. Si vous créez un fichier JSP, l'icône est un losange bleu (). Si vous créez un fichier HTML, l'icône est un ensemble de crochets (). La deuxième () et troisième icône () sont visibles, indiquant que par défaut toutes les pages sont définies pour apparaître dans la navigation et dans les plans du site respectivement. La quatrième icône (), qui n'est pas encore visible, s'affiche lorsque vous avez associé une icône de page à un fichier qui ne comprend pas de navigation sur le site Web. L'icône (), qui n'apparaît pas encore dans la partie supérieure de l'icône de page représente la racine de la navigation. En progressant dans ce module, vous en apprendrez plus sur ces icônes et sur les autres valeurs de l'affichage de l'icône de page.

Maintenant que vous avez créé la structure générale de site Web, vous êtes prêt à commencer l'exercice 1.3 : Chargement de pages Web dans le site Web.

Conditions d'utilisation | Commentaires

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