Insérer une image dans la page web (fonction éditeur)

Dans ce chapitre, vous trouverez le détail de la seconde méthode pour insérer une image directement dans le texte de votre page (dans l'éditeur de pages).

Lorsque vous vous trouvez dans l'éditeur de pages, en cliquant sur l'onglet "Insérer une image", une fenêtre qui s'appelle "Les images de votre site internet" s'ouvre. Vous visualisez alors sous forme de vignettes la liste des images (fichiers JPEG, PNG ou GIF) que vous avez déjà chargés sur le serveur. Des onglets internes à cette fenêtre vous permettent de naviguer entre la liste des images et la fonction qui permet de déposer une image (télécharger) de votre PC vers le serveur.

Etape 1 : déposer votre image sur le serveur

Cette étape n'est utile que si votre fichier image (au format JPEG, PNG ou GIF) n'est pas déjà téléchargée sur le serveur web qui héberge votre site internet. Pour télécharger votre fichier image sur le serveur, cliquez sur l'onglet déposer une image. A l'écran apparaît deux boutons :

• Parcourir : ce bouton vous permet de vous rendre sur votre PC, dans le dossier où se trouve votre fichier image, afin de le sélectionner.
• Valider : ce bouton lance la procédure de téléchargement sur le serveur. Si une erreurse produit lors du transfert, un message s'affichera. Si tout se passe bien, une fois le transfert effectué, le manager vous repositionne automatiquement sur la liste des images.

Remarque : A côté du bouton "Parcourir" est mentionné si aucun fichier n'est encore sélectionné, ou lorsque vous avez sélectionné le fichier simplement le nom de celui-ci (exemple : nomdufichier.jpg).

Etape 2 : copier l'image pour l'insérer dans votre page

Dans la liste des images, faites un clic droit de la souris sur la vignette de l'image à insérer : une fenêtre s'ouvre avec différentes options, cliquez sur "Copier l'image".

Fermez ensuite la fenêtre de la liste des images en cliquant sur la croix (en bas à droite) pour revenir directement dans l'éditeur de page. Avec la souris, positionnez-vous à l'endroit où vous souhaitez insérer cette image et :

• soit vous appuyez directement et simultanément sur les touches de votre clavier CTRL V pour coller l'image dans la page ;
• soit vous cliquez avec le bouton droit de la souris et dans la fenêtre qui s'affiche vous cliquez sur "Coller" : une fenêtre vous permet de coller l'image (touches CTRL V), puis clic sur le bouton "OK".

Dans les deux cas vous obtenez l'insertion de l'image sous la forme d'une vignette.

Etape 3 : définir les propriétés de l'image

Une fois votre image collée dans votre page, vous pouvez définir des propriétés de cette image :

• Les informations sur l'image : sont regroupées là des informations l'URL de l'image (son adresse), un texte de remplacement (s'affiche lorsque le navigateur n'affiche pas les images), la taille en pixels (largeur, hauteur, avec des options pour conserver les proportions lorsque vous changez la taille ou pour revenir à la taille d'origine de l'image), si il y une bordure ou pas (valeur 0 pas de bordure, sinon indiquer un nombre en pixels), les espacements et les alignements.
• Lien : permet de créer un lien vers par exemple une autre page en cliquant sur l'image.
• Avancé : d'autres options plus évoluées sont disponibles, comme par exemple la possibilité d'attribuer des classes CSS (définies par rapport au template choisi) ou de modifier le style de l'image.

Pour accèder à l'assistant vous permettant de définir les propriétés de l'image insérée dans votre page, faites un clic droit de la souris sur la vignette-image. Dans la fenêtre qui s'ouvre, cliquez sur "Propriétés de l'image".

La fenêtre concernant les propriétés de l'image s'ouvre.

Renseignez les différentes propriétés que vous souhaitez modifier, puis cliquez sur le bouton "OK".