Exemple de style du concepteur de site Web

Cet exemple vous montre comment des fichiers d'un même site Web peuvent se voir appliquer des modèles différents, ainsi qu'un exemple de modèle pour la barre de navigation d'un site Web. Le fichier du modèle de navigation contient des liens vers vos pages WebFacing de conception similaire. Cet exemple vous montre également comment lier d'autres projets Web à votre projet WebFacing.

Procédez comme suit :

  1. Créez un projet WebFacing en veillant à choisir l'option Activation du concepteur de site Web dans la page Sélection d'un style Web de l'assistant de création de projet.
  2. Sélectionnez l'onglet Navigateur pour visualiser l'arborescence de votre projet. Dans la vue Navigateur, cliquez avec le bouton droit de la souris sur <nom_projet>/WebContent/index.jsp et sélectionnez Exécuter en tant que > Exécuter sur le serveur.
  3. Un exemple de deux liens de navigation, INV1 et INV2, apparaît et ouvre les deux premières commandes CL définies dans votre projet. Celles-ci sont fournies en guise d'exemples. Elles ne fonctionnent que si vous les avez nommées INV1 et INV2. Cliquez sur les liens pour exécuter l'application. Le programme propose également les liens d'origine du fichier index.jsp.
  4. Sélectionnez l'onglet Projets WebFacing, développez votre projet, puis sélectionnez Style > Site Web. Cliquez avec le bouton droit de la souris sur le fichier .website-config et sélectionnez Ouvrir avec > Web Site Designer. Pour modifier le modèle, cliquez avec le bouton droit de la souris sur l'icône Index et sélectionnez Modèle de page > Ouvrir un modèle de page avec > Page Designer for Template. Pour modifier le style CSS, cliquez avec le bouton droit de la souris sur l'icône PageBuilder et sélectionnez Style > Editer CSS, puis sélectionnez ../../theme/blue.css. Remarquez que le modèle appliqué à l'icône Index est différent de celui appliqué à PageBuilder, mais le fichier de style est le même.
  5. Pour ajouter un nouveau lien de navigation, sélectionnez l'onglet Navigateur et copiez le fichier <nom_projet>/WebContent/inv2.jsp, puis placez-le dans le même répertoire avec le nom inv3.jsp. Modifiez le fichier inv3.jsp et modifiez les textes se rapportant à INV2 en INV3. Faites ensuite glisser le fichier inv3.jsp vers la vue Navigateur du concepteur de site Web et placez-le sous l'icône Index. Vous avez désormais accès à une troisième commande CL nommée INV3.
Référence associée
Paramètres Web
Information associée
Personnalisation de vos applications WebFacing