|
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
|