Exercice 1.4 : Conception de l'apparence du site Web
Vous devez avoir effectué l'exercice 1.3 :
Chargement de pages Web dans le site Web avant de pouvoir commencer la
conception du site Web.
En tant qu'unité, les pages Web qui constituent un site Web doivent
avoir une présentation et une conception visuelles identiques. Les pages
individuelles doivent avoir la même apparence afin que le site Web soit cohérent. Il est fortement
recommandé de commencer un projet en pensant d'abord à la conception du site
Web puis en créant les pages Web individuelles. Dans le cas contraire, vous pouvez avoir un
site Web composé de plusieurs pages Web incohérentes qui n'ont aucune organisation ou
aucune relation visuelle apparente.
La meilleure manière de créer une apparence commune pour votre site Web
consiste à utiliser un modèle de page. Un modèle de page est un fichier unique
que vous pouvez utiliser pour contrôler les éléments communs de toutes les pages
du site. Une fois que vous avez appliqué le modèle aux pages, vous pouvez réduire
les efforts induits par les modifications de conception futures en effectuant la
modification une seule fois dans le modèle. La modification est ensuite appliquée
à toutes les pages qui utilisent le modèle.
Le modèle de page est conçu pour avoir des zones communes et des zone
de contenu. Une zone commune est une zone partagée commune à toutes
les pages qui utilisent le modèle de page. Cette zone est utile pour les éléments
apparaissant sur chaque page, tels les bannières et les zones de navigation. La
zone de contenu est différente pour chaque page. Une fois le modèle appliqué
aux pages individuelles, vous pouvez modifier les zones de contenu dans ces pages
afin d'ajouter des informations propres à cette page. Les éléments de page, tels le texte
ou les images propres à une page particulière constituent les types d'élément placés
dans les zones de contenu du modèle de page. Vous pouvez créer autant de zones de contenu et
de zones communes que vous le souhaitez dans un modèle.
L'utilisation d'un modèle de page contrôle l'apparence d'un agencement de site de manière très différente
que lors de l'utilisation d'une feuille de style. Informations supplémentaires sur la différence entre le modèle de page
et les feuilles de style.
Pour ce tutoriel, nous allons créer un modèle de page et définir
des zones de contenu et des zones communes afin de concevoir une apparence
cohérente pour l'intégralité du site Petites annonces. Ce modèle de page garantit
que chaque page se conforme à la conception suivante :
Création d'un modèle de page
- Dans la vue Navigateur de pages, cliquez avec le bouton droit de la souris sur le
nom du projet, ClassifiedsTutorial.
- Dans le menu contextuel, sélectionnez Nouveau > Fichier de modèle
de page. L'assistant Nouveau fichier de modèle de page s'affiche.
- Acceptez le dossier par défaut (/ClassifiedsTutorial/WebContent).
Il s'agit de l'emplacement dans lequel sera placé le fichier de modèle après création.
- Entrez un nom pour le fichier de modèle dans la zone Nom de fichier. Pour ce tutoriel, nommez ce fichier
modèle. Le nom complet du fichier généré sera modèle.jtpl.
- Vérifiez que HTML est sélectionné en tant que langage de marquage.
- Dans la zone Modèle, sélectionnez Modèle contenant des composants Faces.
- Ne sélectionnez pas la case à cocher Configurer les options avancées.
- Cliquez sur Terminer. Le nouveau modèle s'affiche dans Page
Designer. Lorsqu'un modèle vide est ouvert, il vous est rappelé dans une boîte de dialogue
que vous devez ajouter au moins une zone de contenu au modèle. Cliquez sur OK
pour fermer la boîte de dialogue.
Ajout d'éléments au modèle vide
Maintenant que vous avez créé un modèle, vous devez ajouter des éléments au modèle
vide.
- Commencez par supprimer la zone de contenu par défaut. Vous pouvez
voir la zone de contenu par défaut en cliquant sur le texte par défaut
Placez le contenu ici. Des bordures visibles apparaissent autour
de la zone de contenu.
- L'utilisation d'un tableau invisible constitue l'une des manières les plus
simples d'agencer la structure d'une page. Ainsi, vous pouvez spécifier les sections
de la page à utiliser de différentes manières et vous pouvez contrôler le placement des
objets sur la page.
- Dans la vue Palette, développez le tiroir Balises HTML en cliquant dessus.
- Déplacez à partir de la palette le composant Tableau dans le modèle vide. L'assistant
d'insertion de tableau s'affiche.
- Pour ce modèle, vous avez besoin de trois lignes et d'une colonne. Entrez 3
dans la zone Lignes et 1 dans la zone Colonnes.
- Puis, cliquez sur OK. Le tableau s'affiche dans la page du modèle.
- Au premier abord, la taille du tableau peut sembler petite. Vous devez modifier
les attributs du tableau pour régler sa taille et sa structure.
- Dans la vue Attributs, cliquez sur l'onglet Tableau.
- Dans la zone Alignement, sélectionnez Au centre. Cette sélection
permet de centrer le tableau sur la page.
- Vous devez augmenter la taille générale du tableau afin que la structure du modèle
évolue en fonction de la taille de l'écran sur lequel la page est affichée. Sinon, vos pages
Web auront une taille fixe et pourront sembler très grandes sur de petits écrans ou très petites
sur de grands écrans. Dans les zones Largeur du tableau et Hauteur du tableau, entrez
90 et sélectionnez le signe pourcentage (%).
- Etant donné que vous ne souhaitez pas que les contours du tableau apparaissent sur les
pages, vous devez également indiquer 0 pixels dans la zone Bordure.
Page Designer affiche des bordures de tableau invisibles sous la forme de lignes composées de points.
- Comme vous souhaitez avoir une bannière comportant le nom du site
Web ainsi que des éléments visuels en haut de chaque page pour une meilleure cohérence du site,
vous devez formater la zone correspondante dans le
tableau d'agencement. Même s'il est fort probable qu'un concepteur graphique
crée une image de logo ou de bannière pour votre site, vous pouvez simplement
ajouter du texte en tant que marque de réservation dans ce modèle.
- Dans le tableau, sélectionnez la cellule supérieure.
- Une fois cette cellule sélectionnée, spécifiez une hauteur de 70
pixels dans l'onglet Cellule de la vue Attributs. Si vous savez que vous créez
un modèle dans lequel il est nécessaire de placer un graphique de bannière créé
par le concepteur graphique, vous pouvez indiquer la taille exacte du graphique de
bannière pour cette cellule.
- Dans la vue Attributs de l'onglet Cellule, sélectionnez
Gris dans le menu déroulant Couleur. Si vous
voulez utiliser un outil différent, vous pouvez utiliser l'outil pipette
pour sélectionner une couleur à n'importe quel emplacement de l'écran ou
vous pouvez entrer la valeur RVB (#808080 pour gris, par exemple) dans la
zone.
- Cliquez sur la ligne supérieure et entrez Bienvenue dans les Petites annonces !
- Etant donné que le texte par défaut est de petite taille et difficile à voir, vous devez augmenter
la taille de la police. Sélectionnez la phrase entière et cliquez sur Formater
> Police.
- Pour que le site ait l'aspect d'un journal, sélectionnez Courier dans la
zone Police. Sélectionnez 6 dans la zone Taille et Blanc dans la
zone Couleur pour établir un contraste par rapport à l'arrière-plan Gris de cette cellule.
- Puis, cliquez sur OK.
- Pour centrer le texte de la bannière, sélectionnez à nouveau le texte et cliquez sur
Formater > Alignement > Horizontal centre.
- Pour permettre aux utilisateurs d'accéder aux différentes pages, vous devez
insérer une ligne de liens sous la bannière. Vous allez ajouter des onglets pour la
navigation ultérieurement mais pour l'instant, formatez la deuxième ligne afin de laisser
de la place pour les boutons.
- Sélectionnez la deuxième cellule du tableau.
- Attribuez à cette cellule la même taille que celle de la bannière
en entrant la valeur 70 pixels dans la zone Hauteur de la vue
Attributs de l'onglet Cellule.
- La troisième ligne correspond à l'emplacement du contenu. Vous devez
vous assurer que le contenu est aligné par rapport au haut de la ligne.
- Sélectionnez la troisième ligne du tableau.
- Dans la vue Attributs de l'onglet Cellule, sélectionnez Haut
pour l'alignement vertical.
Ajout d'une zone de contenu
Vous devez conserver une zone du modèle dans laquelle afficher les
particularités de chaque page, telles les résultats de recherche de
la page des enregistrements filtrés ou le formulaire à remplir dans
un nouvel enregistrement sur la page de création des enregistrements. Maintenant
que la structure commune et le schéma de couleurs sont définis pour le site,
vous êtes prêt à ajouter une zone de contenu.
- Dans la vue Palette, cliquez sur le tiroir Modèle de page.
- Déplacez un composant Zone de contenu à la troisième ligne. Il s'agit
de l'emplacement où les pages individuelles indiquent un contenu spécifique.
L'assistant Insertion de la zone de contenu du modèle de page s'affiche.
- Vous pouvez accepter la valeur par défaut de la zone Nom de la zone de contenu, bodyarea, en
cliquant sur OK. Le nom de la zone de contenu permet de spécifier différents noms pour
différentes zones de contenu, et ce à des fins d'organisation.
Par exemple, si vous concevez un site qui a toujours deux zones de contenu sur chaque
page, vous pouvez nommer la zone qui sera chargée avec le contenu principal bodyarea
et la zone qui sera chargée avec les contenus de la recherche searcharea. Cela est
utile si vous devez appliquer le modèle de page à des pages déjà existantes, car vous pouvez
alors leur attribuer des zones de pages existantes à l'aide de balises de marquage afin de charger
des zones de contenu spécifiques du modèle. La zone de contenu est insérée dans la cellule du tableau.
- Sauvegardez les modifications dans le modèle de page.
Votre structure de modèle de base doit maintenant ressembler à l'exemple suivant :
Vous avez créé un modèle de page avec des zones de contenu et des zones
communes pour votre site Web. Vous êtes prêt à aborder l'exercice 1.5 : Application d'un modèle de page au site Web.