Kit graphique
du jour


plus de kits graphiques
  Forum Webmaster
  Annuaire
  PAGES
  Langages
  Création des pages
  Logiciels
  Services
  DESIGN
  Généralités
  Kits graphiques
  Création de bannières
  INDISPENSABLE
  Nom de domaine
  Hébergement
  Hébergeurs allopass
  + DE TRAFIC
  Référencement
  Echanges de bannières
  Campagnes de pub
  GAGNER DE L'ARGENT
  En affichant de la pub
   
  Partenaires
 


Accueil Cestfacile.org FORUM Partenaires

créer un site web avec composer

5/ Insérer une image

Rien de plus simple, il suffit de placer le curseur à l'endroit où on veut insérer l'image et de cliquer sur le bouton d'insertion d'images (encadré en rouge) :


Si vous pointez avec la souris sur le bouton Image, l'info-bulle suivante apparaît : insérer une nouvelle image ou modifier les propriétés de l'image sélectionnée.

Attention à cette étape votre page doit déjà être enregistrée avec un nom et un titre peut importe lequel mais sinon les réglages des boîtes de dialogues ne seront pas tous accessibles.

Après avoir cliqué sur le bouton Image, la première chose à indiquer est le texte de remplacement, il est destiné à ceux qui ont un navigateur qui n'affiche pas les images (soit parce qu'il ne peut pas, soit par choix de l'internaute). Dans un souci d'une compatibilité la plus large possible il est de bon ton de mettre un petit texte qui s'affichera à la place de l'image et éventuellement donnera envie aux internautes d'afficher votre image. Si vous ne voulez pas mettre de texte de remplacement il suffit de cocher le bouton radio en dessous intitulé « pas de texte de remplacement ».

Ensuite, cliquez sur le bouton choisir un fichier... et sélectionnez le fichier à ajouter en cliquant sur son nom, puis cliquez sur le bouton Ouvrir.

Onglet Image
Le premier paramétre à régler est l'url que vous allez définir pour votre image : elle est relative si la case "L'url est relative à l'adresse de la page" est cochée, absolue si la case est décochée. Par défaut, la case est automatiquement cochée donc l'url est relative.
Dans ce cas précis je vous conseille d'utiliser des adresses relatives pour la bonne raison que si vous travaillez hors connection et que vous choississez des adresses absolues, quand vous visualiserez vos pages vous ne verrez pas les images. Je vous conseille de n'utiliser des adresses absolues que pour les liens vers des éléments ou sites extérieurs au vôtre.

Dans la fenêtre de prévisualisation de l'image nous avons la taille actuelle de l'image, on peut la modifier en cliquant sur l'onglet Dimensions (cependant si vous avez à modifier vos images je vous conseille plutôt d'utiliser un logiciel de retouche d'image comme Gimp par exemple qui est libre et gratuit).

Onglet Dimensions
Vous avez la taille actuelle de l'image exprimée en pixels, vous avez la possibilité de la modifier en cliquant sur Taille personnalisée.
Je vous conseille de laisser la case Contraindre cochée. En effet cette case sert à conserver le rapport Largeur / Hauteur de l'image, ainsi avec cette case cochée vous pouvez modifier la hauteur ou la largeur à votre gré et la largeur ou hauteur se calculera toute seule. Cela évite d'avoir une image déformée.
Exemple :

La largeur réelle était de 210, j'ai indiqué 100 et la hauteur est automatiquement devenue 72.
Cliquez sur OK pour insérer l'image avec sa nouvelle taille.

Il y a un autre choix si vous voulez définir la taille de l'image en pourcentage de la fenêtre : Par contre dans ce cas le rapport entre Hauteur et Largeur n'est pas conservé c'est à vous de le calculer. Vous pouvez aussi très facilement de retoucher votre image avec Gimp pour avoir un rapport largeur / Hauteur conservé.

Onglet Apparence
Ici nous pouvons régler la position de l'image par rapport aux autres éléments de la page. Il suffit de cliquer dans les case appropriées et de rentrer les valeurs en pixels. La zone Bordure pleine permet d'ajouter un cadre autour de l'image.

La partie Aligner le texte vers le bas correspond à la fonction "habillage" d'un traitement de texte : ce réglage concerne le texte (ou une autre image) qui est sur la même ligne que l'image.

les différents choix possibles sont : Vers le haut, Au centre, Vers le bas (par défaut), Plaquer à gauche, Plaquer à droite.

Onglet Lien
Cet onglet sert si vous voulez créer un lien sur votre image : si vous voulez que lorsqu'on clique sur votre image une page html s'ouvre.
Cliquez sur Choisir un fichier, choisissez la page qui doit s'ouvrir lorsque l'image sera cliquée et cliquez sur Ouvrir.

La encore le lien est relatif cependant s'il pointe vers une page qui ne dépend pas de votre site vous devrez utilisez un lien absolu.
Vous pouvez également cochez la case Mettre un cadre autour de l'image afin d'indiquer que l'image est un lien, personnellement je n'aime pas trop le faire. Cliquez sur le bouton OK.

Ce n'est pas bien compliqué de faire un lien vous pouvez bien sur lier autre chose qu'une autre page web mais je vous laisse imaginer un peu, je ne vais quand même pas faire tout le travail ;)

Cliquez sur Enregistrer puis sur le bouton Prévisualiser.

Page suivante : insérer un tableau