Modification du style d'un site Web

Le style Site Web peut être sélectionné pendant la création du projet au moyen de 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. Une fois le style Site Web sélectionné, un modèle échantillon est appliqué aux pages WebFacing selon les modèles déjà disponibles pour la sélection au moyen des outils du concepteur de site Web. Pour plus d'informations, consultez la documentation Concepteur de site Web.

Vous devez utiliser le style Site Web si vous possédez d'autres applications Web utilisant le concepteur de site Web pour appliquer des modèles et organiser la navigation dans votre site Web. Le modèle échantillon fourni avec le style Site Web n'inclut ni barres de navigation, ni cartes du site. Vous ne devez ajouter ces éléments que lorsque l'exécution de plusieurs projets WebFacing dans un même navigateur est prise en charge. Le projet WebFacing peut cependant être ajouté à la barre de navigation de vos projets Web et être modifié pour avoir la même apparence que le site Web.
Remarque : Si votre application requiert une URL relative, le style du concepteur de site Web peut ne pas convenir.

Pour afficher l'arborescence du répertoire dans lequel est stocké le style de votre projet, cliquez sur l'onglet Navigateur. Dans la vue Navigateur, les chemins d'accès aux répertoires de styles d'un projet sont : <nom_projet>\WebContent\webfacing\styles et <nom_projet>\WebContent\theme.

Si vous souhaitez modifier le style utilisé pour la zone d'application et les touches de commande, vous pouvez modifier le fichier apparea.css dans le répertoire \apparea au moyen des pages des propriétés Style, ou utiliser directement les outils fournis dans l'environnement de développement intégré. Les pages des propriétés Style permettent de visualiser plus facilement les modifications apportées et indiquent comment ces modifications s'appliquent aux éléments DDS comme les enregistrements de fenêtres et de sous-fichiers. Les modifications apportées via les pages de propriétés Style s'appliquent ensuite aux noms de classe de style correspondants dans le fichier apparea.css. Pour utiliser l'éditeur CSS de l'environnement de développement intégré, cliquez avec le bouton droit de la souris sur le fichier à éditer et sélectionnez Ouvrir avec > Concepteur CSS.

Si vous souhaitez modifier le cadre entourant la zone d'application et les touches de commande, vous devez modifier les fichiers définis par l'utilisateur au moyen du concepteur de site Web ou sélectionner directement les fichiers dans le système de fichiers des répertoires \theme et \webfacing\styles\chrome.

Pour modifier les fichiers du répertoire \theme avec l'éditeur CSS de l'environnement de développement intégré, cliquez avec le bouton droit de la souris sur le fichier à éditer et sélectionnez Ouvrir avec > Concepteur CSS. Pour modifier la présentation et le cadre, cliquez avec le bouton droit de la souris sur le fichier WFB_blue.jtpl et sélectionnez Ouvrir avec > Page Designer for Template. Pour modifier le fichier PageBuilder.jsp auquel les fichiers de style et de modèle sont appliqués, cliquez avec le bouton droit de la souris sur le fichier PageBuilder.jsp dans le répertoire \webfacing\styles\chrome et sélectionnez Ouvrir avec Page Designer. Pour modifier le fichier de modèle associé à PageBuilder.jsp depuis Page Designer, cliquez avec le bouton droit sur Ouvrir un modèle de page avec > Page Designer for Template dans la vue Conception. Cette opération donne le même résultat que l'ouverture du fichier WFB_blue.jtpl directement au moyen de Page Designer for Template. Pour modifier le fichier style CSS associé au modèle depuis Page Designer for Template, choisissez la vue Styles et cliquez avec le bouton droit sur blue.css > Editer dans le groupe d'onglets Styles. Cette opération donne le même résultat que l'ouverture du fichier CSS directement depuis le concepteur CSS.

Pour modifier les fichiers de présentation et de cadre au moyen du concepteur de site Web, activez la vue Projets WebFacing et développez votre projet, puis développez les dossiers Style > Site Web. Cliquez avec le bouton droit sur le fichier .website-config et sélectionnez Ouvrir avec > Web Site Designer. Pour modifier le modèle, passez à la vue Navigateur, puis cliquez avec le bouton droit sur les fichiers *.jtpl sous le répertoire \theme et sélectionnez Ouvrir avec > Page Designer for Template. Pour modifier le style CSS, cliquez avec le bouton droit sur les fichiers *.css sous le répertoire .\theme et sélectionnez Ouvrir avec > CSS Designer.

Les propriétés des styles sont stockées dans deux répertoires distincts du dossier styles dans le projet WebFacing :
Fichiers pouvant être édités pour modification des styles Répertoire contenant les fichiers Partie de page Web à laquelle ils s'appliquent Editable à l'aide des pages de propriétés ?
apparea.css \styles\apparea
  • zone d'application
  • touches de commande
Oui
  • PageBuilder.jsp
  • Fichiers .css définis par l'utilisateur

\chrome

\chrome\html

\theme

  • présentation
Non
Remarque : Il n'est pas nécessaire de reconvertir vos fichiers source pour que les changements de style soient pris en compte.
Référence associée
Paramètres Web
Information associée
Personnalisation de vos applications WebFacing