DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Page
  • Présentation
  • Image de fond des pages
  • Image de fond du navigateur
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Look des pages : Image de fond
Présentation
Pour optimiser le look de vos pages, WEBDEV permet d'utiliser :
  • une image de fond dans vos pages. Vos champs sont superposés sur cette image de fond.
  • une image en arrière-plan du navigateur.
Image de fond des pages
Pour définir l'image à utiliser en fond de la page :
  1. Affichez la fenêtre de description de la page : sous le volet "Page", dans le groupe "Description", cliquez sur "Description" (ou sélectionnez l'option "Description" du menu contextuel de la page).
  2. Dans l'onglet "Style", dans la zone "Style", sélectionnez l'élément "Cadre / fond de la page".
  3. Pour définir une couleur de fond pour la page, indiquez :
    • la couleur du cadre
    • la couleur de fond
    • le style du cadre et fond.
  4. Pour définir l'image de fond de la page :
    • Sélectionnez l'image à utiliser en fond de la page (via le bouton Bouton déroulant du champ "Image de fond") :
      • L'option "Parcourir" permet de sélectionner un fichier image accessible depuis votre poste.
      • L'option "Catalogue" permet de choisir une image parmi le catalogue d'images livré avec WEBDEV.
    • Indiquez les caractéristiques de répétition de l'image :
      • Aucune,
      • Image répétée (en hauteur et largeur),
      • Image répétée X (en largeur),
      • Image répétée Y (en hauteur).
    • Indiquez la position horizontale et verticale de l'image de fond. Ces options permettent de gérer le cadrage de l'image de fond : Gauche, Centre, Droite, Haut et Bas.
    • Indiquez le mode de gestion de la taille de l'image :
      • aucun
      • homothétique étendu (cover) : L'image est proportionnellement agrandie pour que le plus petit coté de l'image soit affiché entièrement dans la page.
      • homothétique (contain) : L'image est agrandie proportionnellement pour être affichée entièrement dans la page.
  5. Validez.
Remarques :
  • Le mode de gestion de la taille de l'image est une fonctionnalité disponible en CSS3. Pour utiliser cette fonctionnalité, la page doit être générée en mode HTML 5. Le mode de génération des pages HTML peut être défini :
    • au niveau du projet (onglet "Avancé" de la description du projet, option "Norme de génération du code HTML").
    • au niveau de la page (onglet "Général" de la description de la page, option "Norme de génération du code HTML").
  • Pour définir la même image de fond de page pour toutes les pages de votre projet, définissez cette image pour le modèle de pages utilisé par votre projet. Pour plus de détails, consultez Modèle de pages.
  • L'affichage de l'image de fond est réalisé par le navigateur. Si le fichier image utilisé est trop important, l'affichage de la page peut être ralenti.
Image de fond du navigateur
Pour définir l'image à utiliser en fond du navigateur :
  1. Affichez la fenêtre de description de la page : sous le volet "Page", dans le groupe "Description", cliquez sur "Description" (ou sélectionnez l'option "Description" du menu contextuel de la page).
  2. Dans l'onglet "Style", dans la zone "Style", sélectionnez l'élément "Fond du navigateur".
  3. Indiquez si nécessaire la couleur de fond du navigateur.
  4. Indiquez les caractéristiques de l'image de fond :
    • Sélectionnez l'image à utiliser en fond du navigateur (via le bouton Bouton déroulant du champ "Image de fond") :
      • L'option "Parcourir" permet de sélectionner un fichier image accessible depuis votre poste.
      • L'option "Catalogue" permet de choisir une image parmi le catalogue d'images livré avec WEBDEV.
    • Pour créer un dégradé, cliquez sur le bouton "Créer un dégradé". Ce bouton permet de générer une image contenant un dégradé et de l'utiliser comme fond du navigateur. Un assistant se lance pour vous aider à créer le dégradé.
    • Si l' option "Image de fond fixe" est cochée, lorsque l'internaute fera défiler la page (ascenseur vertical), l'image de fond du navigateur restera fixe.
    • Indiquez les caractéristiques de répétition de l'image :
      • Aucune,
      • Image répétée (en hauteur et largeur),
      • Image répétée X (en largeur),
      • Image répétée Y (en hauteur).
    • Indiquez la position horizontale et verticale de l'image de fond. Ces options permettent de gérer le cadrage de l'image de fond : Gauche, Centre, Droite, Haut et Bas.
    • Sélectionnez le mode de gestion de la taille de l'image :
      • aucun
      • homothétique étendu (cover) : L'image est proportionnellement agrandie pour que le plus petit côté de l'image soit affiché entièrement dans le navigateur.
      • homothétique (contain) : L'image est agrandie proportionnellement pour être affichée entièrement dans le navigateur.
  5. Validez.
Remarques :
  • Le mode de gestion de la taille de l'image est une fonctionnalité disponible en CSS3. Pour utiliser cette fonctionnalité, la page doit être générée en mode HTML 5. Le mode de génération des pages HTML peut être défini :
    • au niveau du projet (onglet "Avancé" de la description du projet, option "Norme de génération du code HTML").
    • au niveau de la page (onglet "Général" de la description de la page, option "Norme de génération du code HTML").
  • Pour définir la même image de fond de navigateur pour toutes les pages de votre projet, définissez cette image pour le modèle de pages utilisé par votre projet. Pour plus de détails, consultez Modèle de pages.
  • L'affichage de l'image de fond est réalisé par le navigateur. Si le fichier image utilisé est trop important, l'affichage de la page peut être ralenti.
Voir Aussi
Version minimum requise
  • Version 14
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 10/06/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale