Exercice 1.4 : Conception de l'apparence du site Web

Présentation visuelle

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.

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 les modèles 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 :

Conception de site de base

Création d'un modèle de page

  1. Dans la vue Explorateur de pages, cliquez avec le bouton droit de la souris sur le nom du projet, ClassifiedsTutorial.
  2. Dans le menu contextuel, sélectionnez Nouveau > Fichier de modèle de page. L'assistant Nouveau fichier de modèle de page s'affiche.
  3. 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.
  4. 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.
  5. Vérifiez que HTML est sélectionné en tant que langage de marquage.
  6. Dans la zone Modèle, sélectionnez Modèle contenant des données JSP.
  7. Ne sélectionnez pas la case à cocher Configurer les options avancées.
  8. 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.
  1. Commencez par supprimer le texte Placez le contenu ici.
  2. 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.
    1. Dans la vue Palette, développez le tiroir Balises HTML en cliquant dessus.
    2. Déplacez à partir de la palette le composant Tableau dans le modèle vide. La boîte de dialogue d'insertion de tableau s'affiche.
    3. 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.
    4. Puis, cliquez sur OK. Le tableau s'affiche dans la page du modèle.
  3. 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.
    1. Cliquez à l'aide du bouton droit sur le tableau et sélectionnez Propriétés pour ouvrir la vue Propriétés.
    2. Dans la vue Propriétés, cliquez sur l'onglet Tableau.
    3. Dans la zone Alignement, sélectionnez Au centre. Cette sélection permet de centrer le tableau sur la page.
    4. 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 (%).
    5. 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.
  4. 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 ajouter du texte en tant que marque de réservation dans ce modèle.
    1. Dans le tableau, sélectionnez la cellule supérieure.
    2. Une fois cette cellule sélectionnée, spécifiez une hauteur de 70 pixels dans l'onglet TD de la vue Propriétés. 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.
    3. Dans la vue Propriétés de l'onglet TD, sélectionnez Gris dans le menu déroulant de la zone 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.
    4. Cliquez sur la ligne supérieure et entrez Bienvenue dans les Petites annonces !
    5. 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.
    6. 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.
    7. Puis, cliquez sur OK.
    8. Pour centrer le texte de la bannière, sélectionnez à nouveau le texte et cliquez sur Formater > Alignement > Horizontal centre.
  5. 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.
    1. Sélectionnez la deuxième cellule du tableau.
    2. 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 Propriétés de l'onglet TD.
  6. 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.
    1. Sélectionnez la troisième ligne du tableau.
    2. Dans la vue Propriétés de l'onglet TD, 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 des nouveaux 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.
  1. Dans la vue Palette, cliquez sur le tiroir Modèle de page.
  2. 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.
  3. 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.
  4. Sauvegardez les modifications dans le modèle de page.

Votre structure de modèle de base doit maintenant ressembler à l'exemple suivant :

Modèle de page de base.

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.

Conditions d'utilisation | Commentaires

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