FAQ Expression Web, SharePoint Designer et FrontPage

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

Images

Sauter la navigation

 


 1 - Protéger les images
 2 - Images absentes
 3 - Cadre de couleur d'un lien sur une image
 4 - Images miniatures
 5 - Arrière-plan d'une image agrandie
 6 - Texte alternatif et info-bulle
 7 - Écrire un texte sur une image
 8 - Formats d'image JPG ou GIF
 9 - Comment aligner trois images?
10- Images avec WordArt
11- Identifier des gens dans une photo
12- Réduire la taille d'une image
13- La qualité des images JPEG

1 - Protéger les images

Question 1 Comment faire pour interdire d'enregistrer une image (sur mon site perso), lorsque l'on fait un clic droit de souris sur cette image? J'ai vu cela sur d'autres sites où ce clic droit engendre un message d'erreur du type "enregistrement interdit" ou "contactez moi pour..."

Réponse 1 On ne peut pas vraiment protéger une image sur le net. Il suffit de la sélectionner, faire ALT+ImpÉcran, ouvrir un logiciel de dessin, puis y coller l'image avec les touches Ctrl+V pour en avoir une copie.

L'image peut aussi être récupérée avec un glisser/déposer (en réduisant la taille du navigateur, en enfonçant le pointeur de la souris sur une image et en la glissant sur le bureau) ou avec les commandes Fichier, Enregistrer sous, de même que toutes les autres manières de pomper un site en entier... D'ailleurs, puisque les pages visitées demeurent dans le cache de l'internaute, et cela sans être connecté, une simple copie d'écran suffit pour les récupérer.

Ceci étant, un texte de copyright bien placé montre ta propriété. Et tu peux aussi les tatouer en inscrivant sur l'image ton copyright. Voir la question 7 plus bas.

Retour au début

2 - Images absentes

Question 2 Sur mon ordinateur, lorsque je visualise mon site, tout est parfait. Une fois transférées sur le serveur (donc publiées), certaines images n'apparaissent pas, remplacées par des croix rouges.

Réponse 2 Voici quelques points à vérifier:
- ne pas utiliser de majuscules dans les noms de fichiers; par exemple, [monfichier.jpg] et non pas [MOnfichier.JPG], car plusieurs serveurs font la distinction entre les minuscules et les majuscules;
- ne pas utiliser d'espace dans les noms de fichiers; par exemple, écrire [mon_fichier_qui_est_beau.jpg] et non pas [mon fichier qui est beau.jpg];
- ne pas utiliser de caractères accentués; écrire [bonne_annee.jpg] et non [bonne_année.jpg].

Attention, si vous modifiez les noms de fichiers, il est préférable de le faire dans FrontPage (ou Expression Web) pour que les liens soient corrigés automatiquement. Pour enlever les majuscules, il faut d'abord lui donner un autre nom puis reprendre l'opération avec le nom voulu. Ensuite, après la publication, vérifiez attentivement les liens hypertexte.

Retour au début

3 - Cadre de couleur d'un lien sur une image

Question 3 J'ai mis un lien sur une image et, hop, un contour de couleur est apparu... Comment enlever ce contour?

Réponse 3 Cliquez avec le bouton droit de la souris sur l'image et choisissez Propriétés de l'image. Dans l'onglet Apparence, l'option Épaisseur de bordure doit être fixée à 0.

Ce format pourrait être intégré dans une feuille de styles, afin de l'appliquer à toutes les images:
  img {border-width: 0px;}

Retour au début

4 - Images miniatures

Question 4 J'ai fait un site et je cherche comment faire des miniatures pour les voir agrandies lorsqu'on clique dessus. Où met-on les deux images?

Réponse 4 Il y a plusieurs façons de créer des miniatures.
A) Avec le logiciel FrontPage, Expression Web ou SharePoint Designer:
- fixer d'abord la taille des miniatures au menu Outils, Options de l'éditeur de page (ou Options de page), dans l'onglet Créer une miniature;
- afficher la barre d'outils Images;
- insérer la grande image à l'endroit voulu pour la petite;
- sélectionner l'image puis cliquer sur le bouton Miniature automatique dans la barre d'outils Images.
Il se crée alors une copie miniature de l'image, avec un lien vers la grande image. La nouvelle nouvelle miniature est enregistrée en même temps que la page.

B) À partir d'un logiciel de dessin:
Vous pouvez préparer vous-même les deux images avec un logiciel de dessin, en réduisant la taille de la grande image et en la renommant. Il faut ensuite insérer la petite image dans une page Web et créer un lien hypertexte, à partir de la miniature, pour appeler la grande image.

Retour au début

5 - Arrière-plan d'une image agrandie

Question 5 Sur mon site, je propose quelques photos au format vignette (miniature). En cliquant sur ces vignettes, on découvre la photo dans sa taille d'origine. Lors de ce clic, on voit la photo agrandie, sans problème, mais sur fond blanc. Comment faire pour changer ce fond blanc par une autre couleur, celle des pages de mon site?

Réponse 5 Un lien hypertexte vers une image, cela affiche l'image avec la couleur de fond définie dans Windows, peut-être blanc chez vous mais pas chez tout le monde.

Pour préciser une couleur du fond, il faut faire une page où vous placez simplement la grande photo (une page pour chaque image) et faire le lien vers cette page et non pas vers la photo. Dans la nouvelle page, vous pourrez ajouter un commentaire sous l'image, ainsi que des éléments de navigation comme un menu et un lien de retour à la page précédente.

Retour au début

6 - Texte alternatif et info-bulle

Question 6 Je dois faire un site avec beaucoup de photos. Je voudrais afficher une bulle au passage de la souris et inscrire un texte de remplacement pour ceux qui ne voient pas les images. Comment créer ces textes?

Réponse 6 L'info-bulle et le texte alternatif sont ajoutés de façon différente.

A) Texte alternatif
Pour différentes raisons (dont la rapidité d'affichage), plusieurs visiteurs n'affichent pas les images. Dans pratiquement tous les navigateurs, une image absente est remplacée par le texte inscrit dans l'attribut "alt" de l'image:
  <img src="truc.gif" alt="description de l'image">

Expression et SharePoint Designer offrent de simplifier l'insertion du texte alternatif, avec le menu Outils, Options de l'éditeur de pages, onglet Général, en cochant l'option "Invite des propriétés d'accessibilité lors de l'insertion des images". Ensuite, dès l'insertion d'une image, une fenêtre demandera le texte de remplacement.

Pour une image déjà en place ou pour modifier son texte alternatif, cliquer avec le bouton droit sur l'image, choisir Propriétés de l'image, onglet Général, et remplir le champ "Texte de remplacement" (ou "Texte" dans FrontPage). Ceci ajoute la balise ALT qui donne le texte au cas où l'image ne serait pas affichée.

Remarque: le fait d'ajouter un texte de remplacement augmente nettement l'accessibilité de votre site, non seulement pour les visiteurs mais aussi pour les moteurs de recherche.


B) Info-bulle 
Au passage de la souris, c'est plutôt l'attribut TITLE qui permet de faire apparaître une bulle informative sur l'image. Dans la source de la page, en mode Code, ajoutez-la ainsi:
<img src="truc.gif" alt="description de l'image" title="Contenu de l'info bulle">

Pour plus d'informations, voir:
http://openweb.eu.org/articles/accessibilite_images
http://msdn.microsoft.com/fr-fr/library/cc295522%28v=Expression.30%29.aspx

Retour au début

7 - Écrire un texte sur une image

Question 7 Comment ajouter du texte sur une photo? Ou plus simplement: comment écrire sur une photo?

Réponse 7 Il y a différentes façons de faire, souvent à partir d'un logiciel de dessin. Supposons, par exemple, que vous utilisez Paint (fourni avec Windows).

Pour superposer un texte à l'image:
1. ouvrez le logiciel Paint (menu Démarrer - Tous les programmes - Accessoires - Paint);
2. affichez votre image avec le menu Fichier - Ouvrir;
3. faites-en tout de suite une copie (pour conserver l'originale intacte et pouvoir recommencer au besoin), avec le menu Fichier - Enregistrer sous, précisez alors un autre nom;
4. pour un texte sur un arrière-plan transparent, au menu Image, désactivez l'option Dessiner opaque;
5. choisissez la couleur du texte avec le menu Couleurs;
6. au besoin, affichez les outils avec le menu Affichage - Boite à outils;
7. dans la Boite à outils, cliquez sur le bouton "A", puis cliquez à l'endroit voulu dans l'image;
8. tapez alors le texte voulu;
9. pendant ce temps, une barre d'outils Police s'affiche (sinon, au menu Affichage, cochez Barre d'outils Texte), vous permettant de changer la police et sa taille...

Note: dans Paint, ne cliquez pas à l'extérieur de la zone de texte avant que tous les changements de texte et de police ne soient complétés.

Retour au début

8 - Formats d'image JPG ou GIF

Question 8 Je dois mettre une photo sur Internet, quels seront ses propriétés et formats?

Réponse 8 Dans le choix du format, le critère de base, c'est de ne pas avoir une image trop longue à charger. Les principaux formats utilisés sont: 
- JPG (ou JPEG) pour une photo ou une grande image;
- GIF pour une petite image, avec des blocs de couleurs unies.

Lorsqu'on insère une image d'un autre type, comme BMP, FrontPage la transforme en GIF si elle a moins de 256 couleurs, sinon en JPG. Cela se fait pour une image qui n'est pas déjà placée dans le dossier du site Web, en utilisant la commande Insertion, Image (et non pas Fichier, Importer). Toutefois cette méthode ne fonctionne pas toujours car, sur certains ordinateurs, le logiciel peut geler dans la fenêtre pour sélectionner l'image.

Une façon plus stable serait d'importer d'abord toutes les images avec le menu Fichier, Importer, puis de transformer au besoin le type d'une image en JPG ou GIF.

Pour transformer le type d'une image:
- glisser l'image dans une page;
- double-cliquer sur elle pour ouvrir ses propriétés;
- dans l'onglet Général, cliquer sur le bouton Type de fichier image;
- dans la fenêtre suivante, sélectionner le type GIF ou JPEG (ici, les formats PNG sont à éviter, n'étant pas lisibles par tous les navigateurs);
- en haut à droite, observer la taille du fichier obtenu afin de choisir le format créant le fichier le plus petit.

Retour au début

9 - Comment aligner trois images?

Question 9 J'ai fait une certaine mise en page avec trois miniatures de photos alignées et un commentaire sous chaque miniature. Or, dès que je supprime le volet de navigation ou lorsque je passe en mode Affichage, les miniatures ne sont plus alignées comme je l'avais défini. Comment faire?

Réponse 9 Il suffit de les mettre dans un tableau d'une ligne et trois colonnes, avec une miniature et son commentaire dans chaque cellule. Tous les navigateurs peuvent lire un tableau, mais à deux conditions:
- le tableau n'est pas placé à l'intérieur d'un autre tableau;
- il ne comprend pas de cellule fusionnée (il doit être lisible une ligne après l'autre).

Retour au début

10 - Images avec WordArt

Question 10 Les dernières versions de FrontPage permettent l'insertion d'objets WordArt directement sur la page de création. Lors de la création, ces objets (titrages ou dessins) sont très jolis. Par contre, à la visualisation, le lissage a disparu et le nombre de couleurs est descendu à 4 ou 8 au maximum. Fini les jolis ombrages, lissages et dégradés. Existe-t-il une solution à ce problème?

Réponse 10 J'ai fait la même constatation et j'ai résolu ce problème via système D:
- je crée le texte WordArt voulu;
- au moment de la visualisation sous FrontPage, je fais une capture d'écran, avec la touche du clavier ImpÉc;
- ensuite, dans une page de FrontPage, je "colle" l'image, avec les touches Ctrl+V;
- j'utilise le bouton Rogner de la barre d'outils Images pour couper cette image et ne conserver que la section du texte WordArt;
- j'enregistre la page, puis l'image au format .jpg;
- dans ma page Web originale, je remplace l'image WordArt par l'image sauvegardée au format .jpg.

Retour au début

11 - Identifier des gens dans une photo

Question 11 Sur une photo de famille, je voudrais afficher le nom de chacun au passage de la souris. Comment faire?

Réponse 11 Cela peut se faire en utilisant la méthode pour tracer un lien dans une zone réactive sur une image, puis en ajoutant le nom directement dans le code HTML.
Voici les étapes:
1. sélectionner la photo de famille;
2. dans la barre d'outils Image, cliquer sur un des boutons "Zone réactive";
3. avec la souris en forme de crayon, encadrer un personnage;
4. dans la boite de dialogue "Créer un lien hypertexte" qui apparaît alors, sélectionner n'importe quel fichier ans la zone Adresse (à enlever plus loin);
5. ensuite, en mode Code, repérer la commande de la zone réactive, semblable à ceci:
    <area href="Image1.gif" shape="circle" coords="15, 20, 15" />
6. remplacer la section href, puis ajouter une bulle avec l'attribut TITLE:
    <area nohref="nohref" shape="circle" coords="15, 20, 15" title="Sophie" />
7. dans l'onglet Création, il est possible de déplacer ou agrandir la zone réactive.

L'affichage des info-bulles se fera dans la plupart des navigateurs, mais pas tous...

Les zones réactives ajoutent un attribut usemap à l'image:
    <img alt="" src="Image1.jpg" usemap="#FPMap0" />
Malheureusement, cette instruction cause des problèmes d'accessibilité. Les liens situés sur une partie de l'image ne sont pas utilisables pour plusieurs visiteurs. Autrement dit, il faut répéter les liens textuellement à l'extérieur de l'image. Dans l'exemple précédent, la légende de l'image devrait donc présenter les noms des membres de la famille.

Pour plus d'infos:
http://msdn.microsoft.com/fr-fr/library/cc295120%28v=Expression.10%29.aspx

Retour au début

12 - Réduire la taille d'une image

Question 12 Mes images sont longues à afficher. Comment faire pour réduire la taille des fichiers?

Réponse 12 La taille d'une image se compte de deux façons: l'espace qu'elle utilise à l'écran (en pixels) et le poids de son fichier (en Ko). C'est cette dernière mesure qui permet de réduire le temps d'affichage.

Attention: pour conserver les images originales, il est préférable de travailler à partir de copies, parce qu'une fois les changements enregistrés, on ne peut plus revenir en arrière.

Pour réduire la taille d'un fichier image, dans FrontPage:
1. insérer l'image dans une page et la sélectionner;
2. avec la souris placée dans un coin, réduire la taille de l'image (le changement apparaît à l'écran seulement);
3. pour ajuster la taille du fichier en conséquence, cliquer sur le bouton Échantillon dans la barre d'outils Images;
4. enregistrer la page et renommer l'image;
5. vérifier sa taille en mode d'affichage Dossiers.

Pour enlever les parties inutiles en bordure:
1. sélectionner l'image;
2. dans la barre d'outils Images, cliquer sur le bouton Rogner;
3. avec la souris, dessiner un cadre autour de la partie de l'image à conserver;
4. cliquer à nouveau sur le bouton Rogner pour couper l'image;
5. enregistrer et renommer l'image.

De plus, il est possible de jouer un peu avec la qualité des images .jpg, pour réduire la taille des fichiers (voir la question suivante). Et, finalement, les images miniatures sont régulièrement utilisées pour améliorer le temps d'affichage (voir la question 4 plus haut).

Retour au début

13 - La qualité des images JPEG

Question 13 Dans mon site, j'ai placé plusieurs images .jpg. Comment faire pour réduire la taille des fichiers sans changer leur taille à l'écran?

Réponse 13 Un écran ne permettant pas un affichage très précis, une image .jpg pourrait être un peu floue sans que cela ne paraisse trop. Il faudra faire plusieurs essais pour obtenir un fichier raisonnablement petit, tout en conservant une qualité acceptable à l'écran. (Dans ce cas, l'image modifiée devrait toujours être enregistrée sous un autre nom.)

Pour réduire la qualité d'une image jpg:
--> avec FrontPage 2000:
1. clic droit sur l'image, choisir Propriétés de l'image;
2. dans l'onglet Général, pointer JPEG;
3. dans la zone Qualité, inscrire un nombre légèrement plus petit...

--> avec FrontPage 2002:
1. demander l'enregistrement de la page (si la fenêtre Enregistrer les fichiers incorporés n'apparaît pas alors, inverser deux fois l'image dans la page, avec un bouton Retourner de la barre d'outils Images, avant de redemander l'enregistrement de la page);
2. dans la fenêtre Enregistrer les fichiers incorporés, cliquer sur le bouton Options de l'image;
3. sélectionner JPEG;
4. réduire le nombre inscrit dans la zone Qualité...

--> avec FrontPage 2003, Expression Web et SharePoint Designer:
1. clic droit sur l'image, choisir Propriétés de l'image;
2. dans l'onglet Général, cliquer sur le bouton Type de fichier image;
3. pointer JPEG (s'il y a lieu, enlever la coche devant l'option Utiliser l'image telle qu'elle);
4. réduire sa qualité...
5. en haut à droite de la fenêtre, comparer la Taille d'origine avec la Taille après modification.

 Retour au début