mis à jour le 21.10.2002

remarques, réflexions : Christian Oïhénart

Images

Il est possible d'insérer dans une page Web des dessins, des photos, des séquences animées (QuickTime ou autre), des sons, rendant ainsi vos pages Web réellement multimédia. Ces images peuvent aussi servir de lien vers une autre page Web par exemple.

Une règle d'or à respecter absolument :

  • garder tous les fichiers HTML dans un dossier de site
  • garder toutes les images et autres fichiers multimédias dans des dossiers nommés explicitement dans le dossier de site. On prendra comme habitude d'utiiser un dossier nommé images.

Vous pouvez créer des images si vous avez la patte graphique. Autrement, vous pouvez toujours utiliser les bibliothèques fournies avec Home Page, les cédéroms d'images spécialement créées pour le Web ou en récupérer sur le Net (attention dans ce cas à respecter les droits d'auteur).

Il faut savoir que les 2 formats acceptables par une page Web aujourd'hui sont le GIF et le JPEG (un troisième format, le PNG, existe, mais il est peu répandu).

Le GIF a été développé par Compuserve pour le Web et c'est le format de choix pour des images non photographiques. Il a une limite de 256 couleurs, permet la transparence et l'entrelacement (voir plus loin).

Le JPEG (Joint Photographic Experts Group) est utilisé pour gérer des palettes de couleurs plus complexes, il est le plus souvent utilisé pour des photographies. Le JPEG ne gère pas la transparence et il ne peut également pas animer une série d'images comme le GIF.

Si vous récupérez des images au format GIF ou JPEG, aucun problème, mais si vous créez vos propres images, il faut soit les sauver dans ces deux formats directement depuis votre logiciel (Photoshop 7 ou Photoshop Elements s'en occupent à merveille) soit les enregistrer au moins dans le format PICT (Mac) ou BMP (PC). Home Page se charge alors de les convertir au format GIF en vous proposant de les sauvegarder dans un dossier choisi au niveau des préférences, ou en les sauvegardant directement dans le dossier déterminé dans ses préférences (ce qui est entre autres le cas lors d'un drag & drop).

Certains utilitaires obtiennent des fichiers GIF ou JPEG de taille plus réduite (Paint Shop Pro sur PC et Graphic Converter sur Mac).

Nous allons dans la suite de ce document imaginer que vos images sont déjà au format GIF ou JPEG.

Insertion d'une image

Pour placer une image dans votre page, il suffit de placer le point d'insertion à l'endroit voulu et de choisir Image du menu Insertion ou de cliquer sur le bouton . Vous pouvez aussi utiliser le drag & drop depuis par exemple l'icône d'une image.

En ouvrant ensuite l'éditeur d'objet ou en faisant un double-clic sur l'image, on obtient alors la fenêtre ci-dessous :

 

Cette fenêtre comprend 3 onglets dont Apparence qui nous intéresse plus particulièrement ici.

  • Emplacement indique la localisation de l'image. Comme nous l'avons déjà dit, les images ne sont pas contenues dans le document, mais appelées par lui.
  • Texte de remplacement est utilisé pour indiquer dans le navigateur le nom de l'image en cours de chargement. Si en plus, l'internaute a choisi de ne pas faire afficher les images pour gagner en rapidité, cela sera sa seule source d'informations sur l'image.
  • Largeur, Hauteur, permettent de fixer la taille des images. Noter le bouton Restaurer les dimensions.
  • Bordure permet d'encadrer l'image, par exemple quand elle représente un lien. A fixer à 0 pour éviter ce cadre.
  • Alignement détermine l'emplacement de l'image verticalement et horizontalement par rapport au texte. L'alignement de l'image par rapport à la page se fait par les boutons d'alignement en haut de la page.
  • Entrelacement : cela veut dire qu'au moment du chargement des images par le navigateur, une version à faible résolution est tout de suite chargée si l'option a été choisie.

    Attention, Home Page ne gère pas très bien les images JPEG entrelacées (il ne les affiche pas).

  • Transparence : le curseur, après avoir cliqué sur Définir, se transforme en pipette. Il suffit de choisir la couleur qui doit être transparente et de cliquer dessus.

Différents raccourcis peuvent être obtenus en utilisant les menus contextuels (bouton droit de la souris sur PC et contrôle-clic sur Mac).

L'onglet Etendu permet par exemple de rajouter le code hspace=nombre de pixels et vspace=nombre de pixels, pour donner un peu d'espace autour de l'image, tant horizontalement que verticalement.

Si vous souhaitez estimer le temps de transfert d'une image insérée ou de tout le document, choisissez Statistiques dans le menu Edition sur Mac (Outils sur PC).

 

Insertion d'une image en arrière-plan

Sans parler d'abord d'image, la couleur du fond des pages peut être changée. La couleur par défaut est le gris. Pour la changer, choisir Options de Document du menu Edition (Mac) ou Outils (PC). Préférer une des palettes proposées par Home Page, car ainsi vous avez plus de chance d'avoir le même résultat sur les différentes machines. La palette Web devrait donner les meilleurs résultats (Préférences dans le menu Outils sur PC et Edition sur Mac).

On peut utiliser une grande image pour l'arrière-plan ou une petite image qui sera utilisée comme motif.

 

Insertion d'un gif animé

Cela se fait de la même manière que l'insertion d'une image, le gif animé étant simplement une collection de gifs. De nombreux sharewares permettent de réaliser facilement des gifs animés. Par contre, l'animation ne sera visible que lors de la prévisualisation dans un browser.

Les ressources du Web, les bonnes adresses, ont été centralisées sur la page des ressources.

Page précédente Page suivante