FAQ Expression Web, SharePoint Designer et FrontPage

 Questions, aides et astuces, provenant au départ du forum microsoft.public.fr.frontpage.

Arrière-plan


1 - Une image de fond non répétée
2 - Une image fixe en arrière-plan
3 - Un dégradé de couleurs
4 - Image en filigrane
5 - Arrière-plan d'un thème
6 - Créer un arrière-plan dans Expression Web  
 

Remarque: pour inscrire un arrière-plan, les feuilles de style sont toujours préférables, car elles offrent plus de flexibilité et sont plus en accord avec les normes du Web.

 

 1 - Une image de fond non répétée

Question 1 Dans ma page Web, j'ai mis une image en arrière-plan, mais FrontPage la double! Comment éviter cette mosaïque?

Réponse 1 Pour ne pas répéter l'image d'arrière-plan:
- cliquer avec le bouton droit dans la page, choisir Propriétés de la page;
- ne pas choisir d'image dans l'onglet Arrière-plan;
- dans l'onglet Général, cliquer sur le bouton Style (avec FrontPage 2003, voir plutôt l'onglet Avancé, bouton Style du corps);
- sélectionner Format/Bordure;
- dans l'onglet Trame de fond, introduire l'image avec le bouton Parcourir;
- dans la zone Répétition, sélectionner Aucune. Il est aussi possible de choisir sa position verticale et celle horizontale, puis d'empêcher son défilement avec le contenu de la page (Pièce jointe: fixe).

Ces choix faits dans les propriétés de la page sont ajoutés directement à la balise BODY dans le code HTML (la commande est placée sur une seule ligne, avec le nom approprié pour l'image):
 <body style="background-image: url('nom_image.jpg'); background-repeat: no-repeat; background-position: center">

Mais les propriétés de l'arrière-plan peuvent aussi être définies dans une feuille de style externe (ce qui est souvent préférable, étant plus facile à appliquer à toutes les pages du site). Dans ce cas, la commande de style pourrait ressembler à ceci:
  body {
    background: url(nom_image.jpg) no-repeat center;
  }

Un autre point: la taille de l'écran des visiteurs étant variable, il serait bon de choisir la couleur apparaissant autour de l'image dans une grande fenêtre. Cela peut être fait avec le menu Fichier, Propriétés, onglet Mise en forme (ou onglet Arrière-plan), zone Couleurs, Arrière-plan. Ou dans une feuille de style externe:
  body {
    background: #E9F2FE url('nom_image.jpg') no-repeat center;
  }

Pour plus d'informations sur l'arrière-plan dans les feuilles de style, voir la question 6 plus bas.

Retour au début

 2 - Une image fixe en arrière-plan

Question 2 Quelle est l'astuce pour obtenir une page Web où seul le contenu de la page défile lorsqu'on utilise les "ascenseurs", tandis que l'arrière-plan reste fixe?  Je trouve l'effet saisissant.

Réponse 2 Pour immobiliser l'image d'arrière-plan pendant le défilement du texte, avec FrontPage 2000 et 2002, cliquez avec le bouton droit sur la page, choisissez Propriétés de la page; dans l'onglet Arrière-plan, cochez l'option Arrière-plan statique.

Ou, utilisez les mêmes commandes que dans la question précédente, en y ajoutant "fixed" et en remplaçant "nom_image.jpg" par le nom de votre image.

Soit en modifiant la balise BODY:
 <body style="background-image: url('nom_image.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center">

Soit en l'inscrivant dans une feuille de style externe, comme ceci:
  body {
   background: url('nom_image.jpg') no-repeat center fixed;
  }

Dans Expression Web et SharePoint Designer, ces commandes sont souvent définies à l'aide des styles, voir la question 6 dans cette page.

Retour au début

3 - Un dégradé de couleurs

Question 3 J'aimerais savoir s'il est possible de réaliser des dégradés de couleurs pour l'arrière-plan d'une page.

Réponse 3 Il s'agit de créer une image dégradée avec les couleurs souhaitées. Puis, de conserver seulement 1 pixel de large sur 1300 de haut (ou 1 de haut sur 1700 de large, selon le sens du dégradé souhaité). Et de mettre cette image en fond fixe de la page.
C'est facile, c'est à votre goût, en GIF ou JPG, ça ne pèse pas lourd, et en principe, tous les navigateurs le comprenne.

Retour au début

4 - Image en filigrane

Question 4 Pour placer une image très très pâle à l'arrière-plan, est ce que la fonction "filigrane" existe?

Réponse 4 Une procédure équivalente:
- insérer normalement l'image dans une page (menu Insertion, Image);
- pâlir l'image, avec FrontPage 2000, en cliquant sur le bouton Nettoyer de la barre d'outils Images ou, avec FrontPage 2002 (et les versions plus récentes), par les boutons Couleur puis Filigrane;
- lors de l'enregistrement de la page, renommer l'image;
- placer cette image en arrière-plan. Avec FrontPage 2000, utilisez le menu Format, Arrière-plan, cochez l'option Image d'arrière-plan, bouton Parcourir... Avec les versions plus récentes, choisissez le menu Format, Arrière-plan, onglet Mise en forme, Image, bouton Parcourir...

Retour au début

5 - Changer l'arrière-plan d'un thème

Question 5 J'ai installé un thème de FrontPage. Mais j'aimerais changer l'image d'arrière-plan utilisée.

Réponse 5 Cela se fait en modifiant le thème (voir la rubrique Thèmes).

Retour au début

 6 - Créer un arrière-plan dans Expression Web

Question 6 Pour rendre mon site conforme aux normes actuelles, je voudrais inscrire l'arrière-plan dans une feuille de style. Comment faire avec Expression Web?

Réponse 6 Dans Expression Web, tout comme dans SharePoint Designer, l'arrière-plan se modifie facilement avec les outils de feuille de style. La couleur et l'image s'appliquent à la balise body, celle qui englobe toutes les autres.

Pour modifier cette balise:
- ouvrir le modèle Web dynamique ou une seule page;
- afficher le volet Gérer les styles (menu Volets de tâches);
- cliquer avec le bouton droit sur le nom 'body' inscrit dans ce volet puis choisir Modifier le style (s'il n'est pas là, cliquer sur le lien Nouveau style puis, dans la zone Sélecteur, choisir 'body';
- dans la zone Arrière-plan, définir les valeurs de 'background-color' et 'background-image'.

En complément, voyez les règles pour préparer l'image (pâle et légère, avec une couleur de police lisible même lorsque l'image ne s'affiche pas):
https://www.openweb.eu.org/articles/background_css/

Retour au début