PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Image de fond des pages
  • Astuce
  • Image de fond de page en dégradé
  • Image de fond du navigateur
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
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.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 (option "Page .. Description" ou option "Description" du menu contextuel de la page).
  2. Dans l'onglet "Style", indiquez :
    • l'image à utiliser en fond de la page (option "Image de fond").
      • Le bouton "Catalogue" permet de choisir une image parmi le catalogue d'images livré avec WEBDEV.
      • Le bouton "Créer un dégradé" permet de lancer un assistant permettant de créer une image de fond contenant une couleur dégradée (voir ci-dessous).
    • si l'image de fond doit être fixe. Si l' option "Image de fond fixe" est cochée, lorsque l'internaute fera défiler la page (ascenseur vertical), l'image de fond restera fixe.
    • 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).
    • Versions 17 et supérieures
      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.
      Nouveauté 17
      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.
      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.
  3. Validez.
Remarque : Il est également possible de définir une couleur de fond pour la page (option "Couleur de Fond"). Pour plus de détails, consultez le paragraphe suivant.
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 (option "Image de fond"). Le bouton "Catalogue" permet de choisir une image parmi le catalogue d'images livré avec WEBDEV.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.

Astuce

Pour obtenir par exemple des effets de bandeaux, il est possible d'utiliser une image de fond avec une largeur de quelques pixels, répétée en largeur.
Par exemple :
La répétition en largeur permet de créer un site extensible en largeur sans avoir recours aux zones extensibles, ce qui simplifie la mise en page.
Image de fond de page en dégradé
Versions 15 et supérieures
Il est possible de générer une image contenant un dégradé et de l'utiliser comme fond de page. Pour cela :
  1. Affichez la fenêtre de description de la page (option "Page .. Description" ou option "Description" du menu contextuel de la page).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. Sélectionnez l'onglet "Style".
  3. Cliquez sur le bouton "Créer un dégradé...".
Un assistant se lance pour vous aider à créer le dégradé. Choisissez ensuite le mode de répétition pour recouvrir la page.
Nouveauté 15
Il est possible de générer une image contenant un dégradé et de l'utiliser comme fond de page. Pour cela :
  1. Affichez la fenêtre de description de la page (option "Page .. Description" ou option "Description" du menu contextuel de la page).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. Sélectionnez l'onglet "Style".
  3. Cliquez sur le bouton "Créer un dégradé...".
Un assistant se lance pour vous aider à créer le dégradé. Choisissez ensuite le mode de répétition pour recouvrir la page.
Il est possible de générer une image contenant un dégradé et de l'utiliser comme fond de page. Pour cela :
  1. Affichez la fenêtre de description de la page (option "Page .. Description" ou option "Description" du menu contextuel de la page).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. Sélectionnez l'onglet "Style".
  3. Cliquez sur le bouton "Créer un dégradé...".
Un assistant se lance pour vous aider à créer le dégradé. Choisissez ensuite le mode de répétition pour recouvrir la page.
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 (option "Image de fond"). Le bouton "Catalogue" permet de choisir une image parmi le catalogue d'images livré avec WEBDEV.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