Placement des images dans le texte de vos pages

Placement des images dans le texte de vos
pages
Voyons ensembles, si vous le voulez bien, un exemple de page (factice) :
Dans cette page, il n'y a que du texte (des paragraphes, et éventuellement des titres).
Supposons que l'on veuille placer une image à droite dans le premier paragraphe ci-dessus.
La procédure pour insérer cette image est la vuivante :
•
Placez le curseur de votre souris tout à fait en haut et à gauche du paragraphe dans lequel
vous voulez insérer votre image :
•
Cliquez sur l'icône d'insertion d'images (représentée par un arbre vert) :
•
Cette action a pour effet d'ouvrir une fenêtre que vous pouvez élargir à votre guise (comme
pour toutes les fenêtres Windows (ou Linux, ou MacOS))
Dans cette fenêtre, cliquez sur l'icône de recherche d'image :
•
•
•
Naviguez dans la fenêtre « Fichiers CMS Made Simple » jusqu'à trouver l'image que vous
sésirez insérer
Cliquez sur cette image
•
•
Vous la voyez arriver dans le champ « URL de l'image » ci-dessus
Les dimensions de l'image sont automatiquement ramenées dans les champs Dimensions
(Largeur = 135 et Hauteur = 156)
Cliquez sur le bouton « Insérer »
Votre image vient se placer au dessus du paragraphe qui va la contenir :
•
Maintenant, cliquez sur l'image pour la sélectionner : elle va s'entourer d'un rectangle :
•
Dans la barre de menu de l'éditeur de texte, sélectionnez « photo-droite-50 » (ou « photodroite-100 » suivant la marge que vous désirez garder entre l'image et le texte) à la place
de « justif »
•
•
•
•
Assurez-vous que le style a bien été pris en compte
Si non, recommencez la sélection ci-dessus (photo-droite-50 ou photo-droite-100) jusqu'à
ce que vous voyez le style apparaître :
•
Cliquez sur le bouton « Appliquer » pour sauvegarder votre travail
•
Allez dans le frontend de votre site et vous constaterez que l'image est bien présente, et
qu'elle est placée à droite (c'était l'objectif que nous nous étions fixé au début) :
Cependant, vous pouvez constater, en regardant la copie d'écran ci-dessus, que la photo déborde
du bas du paragraphe.
En tant que rédacteur, vous devez être conscient de cet état de choses, et réagir en conséquence
pour que votre mise en page soit agréable à regarder par vos visiteurs.
Dans
•
•
•
le cas ci-dessus, on peut :
Soit ralonger le premier paragraphe
Soit ajouter des espaces entre le premier paragraphe et le suivant
Soit choisir une image plus petite
Essayons de ralonger le paragraphe, et voyons ce que cela donne :
Ce qui est beaucoup mieux : la photo ne déborde pas du paragraphe.
Un autre élément est également à prendre en compte si vous soulez que votre site soit
compatible avec tous les types d'écrans (y compris les petits écrans des smartphones low-cost qui
sont très répandus dans certaines régions du monde), c'est qu'il faut éviter de mettre des images
trop grandes (trop larges).
En effet, le rendu peut être impeccable sur un grand écran d'ordinateur de bureau, mais
lamentable sur un écran de 340 pixels de large.
A force de placer des images dans vos pages, vous apprendrez comment vous en sortir au mieux.
Vous pouvez placer votre image à droite ou à gauche du paragraphe, avec une marge de 50 ou de
100 pixels en utilisant l'un des quatres styles prédéfinis disponibles dans le champ « sélection » de
style :
•
•
•
•
photo-gauche-50
photo-gauche-100
photo-droite-50
photo-droite-100
Si vous avez une bonne connaissance du langage HTML, vous pouvez élargir les possibilités
décrites ci-dessus.
Par exemple, pour placer une image au centre du contenu, on pourra utiliser :
<div style="text-align: center; margin: 10px 0;"><img src="uploads/images/contenu/xxxx.png"
alt="xxxx" width="300" height="300" /></div>