Comment intégrer les images dans ma page ?

C'est très simple, il vous suffit d'utiliser le bouton "insérer une image". Cela vous amène à une fenêtre qui vous demande de sélectionner l'image à insérer sur votre disque dur. Vous cliquez dans votre sous-dossier "images", vous cliquez sur votre image, et c'est fait.

Maintenant, nous pouvons déplacer l'image en utilisant les mêmes commandes d'alignement (àdroite, centrer..) que pour le texte, les marges. L'image se comporte comme un gros caractère dans la page, vous l'effacez avec la touche d'effacement aussi simplement qu'une lettre.

En appelant l'éditeur d'objet après avoir cliqué sur l'image (ou en double-cliquant sur l'image, c'est pareil) vous pourrez définir des options spécifiques à cette image. On va voir ça, pas de panique.

  <-- Options de l'image dans
       Claris Home page 2.0

     Options de l'image dans
     Claris Home Page 3.0

          |
          |
         \|/

Té, ben vé, belle! Et moi je fais avec toutes ces chichis là?

Etiquette ou Texte de remplacement : Quand le navigateur (Netscape) n'affiche pas l'image, ou quand elle n'est pas encore arrivée parceque le transfert est lent, ce texte sera affiché. En général il décrit l'image.

Contour ou Bordure : Quand l'image est un lien, elle est entourée d'un contour de 2 pixels automatiquement. Si cela ne vous plait pas, il faut le dire ici et mettre le chiffre 0 dans cette case. Vous pouvez faire de jolis effets en mettant des gros contours. Si l'image n'est pas un lien le contour aura la couleur du texte par défaut, c'est à dire celle qui est définie dans les options du document.
Si l'image n'est pas un lien et que vous lui donner une bordure (15 pixels) la bordure aura la couleur du texte par défaut (noir si vous ne l'avez pas changé).

Largeur et Hauteur : ne les modifiez pas n'importe comment. Vous pouvez changer les dimensions de l'image à la main en cliquant une fois sur l'image (elle est selectionnée) puis en tirant l'une de ses poignées (les petits carrés aux angles de l'image).

Alignement : c'est là qu'il faut tester, je vous laisse essayer les combinaisons. Par exemple, dans cette page les légendes "Options de l'image dans Claris etc...." ont été tapées après avoir précisé à la premiere image (la photo d'écran de Claris 2) que l'alignement se faisait à gauche. Ce qui fait que l'image se cale à gauche et on peut écrire ou mettre même une autre image à droite. Là j'ai préféré mettre du texte et assez de bidules et de retours à la lignes pour l'image suivante passe sous la première.

Testez quand même vos oeuvres dans un navigateur avec la Prévisualisation.

Astuce : quand vous alignez un texte à droite d'une image, il est collé à l'image. C'est nul! Comment faire? vous ajoutez ça : "hspace=10" ou 20, ou ce que vous voulez, dans la case "Autre HTML" (Claris 2) - dans la case "Paramètres HTML supplémentaires" en passant par l'onglet (le chapitre) "Etendu" de la fenetre options de l'image (Claris 3 voir ci-dessus la photo d'écran). ce code signifie "espace autour de l'image horizontalement (h) = 10 pixels"
Vous pouvez faire pareil en vertical (vspace=20) si quelque chose colle votre image sur les bords de dessus ou de dessous. Il sera repoussé!

Le coup du texte à côté de l'image peut être fait plus facilement avec un tableau.
Pourquoi le faire comme ça alors? Parceque c'est plus petit au niveau de la longueur du code HTML donc plus rapide à afficher. Vous vous êtes déjà demandé pourquoi certaines pages style M6.fr mettent deux ans à se charger? notamment parceque c'est pleins de tableaux. Enfin maintenant y'a les CSS en plus, passons.

Ah oui pour finir avec l'alignement c'est drôlement pratique pour gérer les petites images qu'on peut parfois mettre dans le texte. On trouve ça toujours dans la fenêtre OPtions de l'image dans le petit menu Aligner/Alignement. Exemple

Au début, Claris s'aligne sur le bas de l'image. Centré: . Haut: . Droite:

Je l'ai pas mise au bon endroit !!!

Vous pouvez déplacer vos images à l'intérieur de la page en attrapant l'image avec votre souris (cliquez et restez appuyé puis bougez la souris) et en amenant la pointe de votre curseur exactement à l'emplacement ou vous voulez insérer cette image.

Astuce : Ce qui est souvent énervant avec Claris Home Page c'est quand on veut mettre un retour à la ligne après une image pour envoyer le texte qui se colle après elle
à la ligne suivante (exemple ci-dessus avec "en gras aussi").
On n'arrive pas à placer son curseur entre l'image et le texte et on s'énerve et au passage on change l'ordre des lettres en les sélectionnant puis en les déplaçant (on peut faire ça, essayez) et puis il arrive aussi que dans la bataille on touche aux poignées de l'image (dans les coins) et qu'on change ses proportions. Bref, la panique.

Le truc : on clique une fois surl'image (elle est sélectionnée) puis on tape sur la fléche droite (ou gauche) de son clavier comme si on faisait défiler le curseur dans un texte pour passer d'une lettre à l'autre avant d'effacer une faute de frappe. Quand vous aurez tapé sur la touche fléche de votre clavier vous verrez que le curseur s'est placée dans la fameuse place entre l'image et le texte. J'en ai fait un roman parceque j'ai vu du monde s'arracher les cheveux là-dessus. Si vous êtiez déjà un pro de l'inser/suppr (sur Tandy ou Goupil), désolé.

• Les images de la page web
• La rédaction de la page web