vous etes ici : Accueil -> Forum - Site - Divers -> Tutoriel pour les rédacteurs -> Tutoriel pour les rédacteurs - SPIP - Mettre une image dans un (...)

Tutoriel pour les rédacteurs - SPIP - Mettre une image dans un article

D 28 juillet 2007     H 22:30     A Pierre     C 0 messages A 5486 LECTURES


agrandir

Tutoriel illustré à l’usage des rédacteurs du site : pas à pas, la méthode pour insérer une image dans un article

Les étapes (en zone "privée") :

Etape 1 : mettre l’article en mode modification. Clic sur le bouton "Modifier cet article"
Etape 2 : sélectionner l’image à insérer. En cliquant sur "parcourir" vous ouvrez une fenêtre avec les répertoires de votre ordinateur. Choisissez l’image à insérer.

Important : la taille des images : Dans la plupart des cas une image de 550-600 pixels de large sera tout à fait suffisante pour remplir le corps de l’article en pleine page, sans texte ni à droite, ni à gauche de l’image.

Au-delà de cette taille, il y a risque de faire "éclater" la page avec des ascenseurs horizontaux du plus mauvais effet.

Pour une image "habillée" par du texte, une largeur de 350-400 pixels est suffisante.

La mise des images à la dimension voulue doit être faite avec un programme adapté à cet usage, avant le téléchargement.

Pour les utilisateurs habitués aux logiciels de traitement d’images,

- les images au format jpeg conservent leur qualité jusqu’à un certain niveau de compression. Il n’est donc généralement pas nécessaire d’utiliser des images de haute définition. Une définition moyenne permet d’accélérer l’affichage de la page et charge moins le serveur.

- les images au format gif et png permettent les transparences.

Dimensions de cette image (Titre)
210 pixels de large x 142 pixels de haut (description).

Cette image est en mode "left"Etape 3 : clic sur le bouton "télécharger" pour transférer une copie de l’image vers le serveur distant.

L’image téléchargée s’affiche en miniature.

Il est possible de saisir pour cette image un titre et une description ou un commentaire

Confirmer la saisie en cliquant sur le bouton "Enregistrer", dans ce cadre.

Cette image est en mode "left"

Etape 4 : choisir le mode d’habillage image/texte

- avec le mode "left", l’image se place à gauche du texte, et le texte "habille" la droite de l’image

- avec le mode "center", il n’y a aucun texte de part et d’autre de l’image

- avec le mode "right", l’image se place à droite du texte, et le texte "habille" la gauche de l’image

Cette image est en mode "right"
Elle fait 481 pixels de large.

Etape 5 : placer le code image dans le texte. Pour cela : ou bien saisir à la main, ou faire un copier-coller du code qui est à côté de l’image miniature. Autre méthode : placer le curseur clignotant à l’endroit du texte où l’image doit être insérée, puis faire un double-clic sur le code-image retenu.

L’image s’affichera dans la page à l’endroit où vous placez le code (ne pas oublier les crochets "<" et ">" au début et à la fin du code image, et le séparateur obtenu par [AltGr] et la touche [6] en haut du clavier.

Attention : si vous avez saisi un titre (et commentaire) pour l’image à l’étape 3, remplacer les lettres "img" par "doc", sinon le titre et le commentaire ne s’affichent pas.

Etape 6 : sauvegarder l’article
Cette image est en mode "center"

sinon, vous auriez fait tout cela pour rien.

Etape 7 : vérifier en ligne si tout va bien

Répondre à cet article

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
  • [Se connecter]
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Les mots-clés de l'article

pour en savoir plus sur : Site Histoire Passion - SPIP -

les plus lus

1.  Calendrier révolutionnaire ou républicain - Conversion en date grégorienne

2.  Carte satellite des voies romaines, des chemins anciens de Saintonge, Aunis et Angoumois

3.  Conversion des monnaies d’avant la Révolution en valeur actuelle

4.  FAQ & R - Le Forum Aux Questions ... & aux Réponses

5.  Carte satellite Googlemap avec moteur de géolocalisation : rechercher une ville, une commune, un village


5 au hasard

1.  Histoire de la terre de Saint-Maigrin (17), de son château et de ses étangs

2.  Les Mémoires d’Hippolyte Joly d’Aussy - 2ème partie : La Famille de Campet

3.  1483 - Angoulême (16) : le roi Charles VIII confirme l’exemption de la taille en faveur de la ville

4.  Livre de marais et muid de bosse : les mesures des sauniers

5.  1925 - Société Archéologique et Historique de la Charente - Bulletins et mémoires - Série 8 Tome XVI


les plus populaires

1.  Conversion des monnaies d’avant la Révolution en valeur actuelle

2.  Carte satellite des voies romaines, des chemins anciens de Saintonge, Aunis et Angoumois

3.  Carte satellite Googlemap avec moteur de géolocalisation : rechercher une ville, une commune, un village

4.  La Saintonge par les cartes anciennes

5.  Calendrier révolutionnaire ou républicain - Conversion en date grégorienne