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. Les pages sont les suivantes :
- Une page d'accueil qui affiche l'ensemble des petites annonces de la base de données.
- Une page qui ajoute une petite annonce classée à la base de données.
- Une page qui change ou supprime une petite annonce de la base de données.
- Une page qui affiche les résultats de la recherche en filtrant les annonces par catégorie.
- Dans la vue Navigateur de projets, cliquez sur le symbole +
se trouvant en regard du projet ClassifiedsTutorial afin de le développer.
- Cliquez deux fois sur Navigation sur le site Web dans la vue
Navigateur 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.
- 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é.
- 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.
- Comment les visiteurs vont-ils placer leurs propres listes sur le site Web ?
Ils ont besoin d'une page pour créer des 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.
- 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.
- 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.
- 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.
- Appuyez sur les touches Ctrl+S ou cliquez sur le bouton Sauvegarder
pour effectuer la sauvegarde. La vue
Navigation doit avoir l'aspect suivant :

Remarquez la présence d'une ligne de petites icônes dans la partie supérieure
de chaque icône de page. La première (

)
et deuxiè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
troisième icône (

) représente la racine de navigation. La
quatrième 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
(

).
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.