Aller au contenu
Site Communauté

[TUTO] Rédaction et mise en forme des messages

Le PoissonClown

Messages recommandés

Le PoissonClown Capitaine de vaisseau

Le PoissonClown

Posté(e)
Posté(e) (modifié)

Bonjour, :)

Vous avez des difficultés pour rédiger vos messages ? Vous aimeriez en apprendre plus sur le formulaire de rédaction ?
Ce guide est fait pour vous :

Au sommaire :
  1. Orienter et aérer son texte
    1. Retour à la ligne sans passer de ligne
    2. Aligner son texte
  2. Appliquer des effets sur certaines parties
  3. Insérer un lien
  4. Insérer un encadré ou des listes
    1. Insérer une liste
    2. Insérer une citation
    3. Insérer du code
  5. Insérer des images
    1. Insérer un smiley
    2. Insérer une image depuis le Net
    3. Ajouter une pièce-jointe et l'insérer
  6. Faites en plus avec le BBCode !
  7. Copiez-collez des mises-en-forme toutes faites
  8. Faites-en encore plus avec l'éditeur complet !
    1. Insérer un tableau
    2. Faire plusieurs colonnes
    3. Modifier son tableau
    4. Portions de texte spéciales
    5. Faire une sous-liste ou un alinéa
    6. Faire des encarts de texte
    7. Insérer un titre
    8. Insérer une ligne de séparation

1. Orienter et aérer son texte

a. Retour à la ligne sans passer de ligne

Comme sur beaucoup de logiciels, un passage à la ligne crée du même coup un nouveau paragraphe. Or nombre d'entre nous aimeraient parfois aller seulement à la ligne, sans s'éloigner du premier paragraphe.

Pour cela, il suffit de maintenir la touche Maj enfoncée lorsque vous frappez la touche Entrée. De cette manière, vous ne quittez pas votre paragraphe (cette astuce est valable un peu partout, même sur Word).

b. Aligner son texte

Avec l'éditeur du site, vous pouvez aligner vos paragraphes à droite, au centre ou les laisser à gauche.
Les boutons correspondants sont ceux-ci :
(capture boutons alignement)

Notez bien : seul le paragraphe peut être aligné. Une ligne ne peut pas s'aligner différemment par rapport à son paragraphe.

2. Appliquer des effets sur certaines parties

Je pense que vous connaissez tous la mise en gras, en italique ou souligné. Vous aurez vite reconnu les trois premiers boutons.
(capture boutons gras, italique, souligné)

Mais notre éditeur vous en propose d'autres :
Notamment pour barrer une partie de texte, la mettre en exposant (en haut comme le "er" de 1er) ou en indice (en bas de la ligne). Les boutons sont les suivants dans l'ordre :
(capture boutons barré, exposant, indice)

Et ce n'est pas tout ! Vous pouvez aussi colorer les lettres de votre texte :
(capture couleur de texte)
Ou varier leur taille (la taille normale étant 14) :
(capture taille de texte)

3. Insérer un lien

Rien de plus simple :
Copiez l'adresse (URL) de la page et collez-la dans votre texte, elle sera reconnue (vous la verrez se tinter en bleu).

Si vous voulez appliquer un lien sur un morceau de texte, sélectionnez votre morceau de texte, et cliquez sur le bouton en forme de maillon de chaîne.
(capture bouton lien)
Et collez l'URL dans le premier champ avant de valider.
(capture insertion lien)

Attention : vos URL ne doivent pas être sous la forme www.nomdusite.truc mais bien commencer par http:// ou https:// avant les trois W (ou le nom du site).

Si vous souhaitez retirer votre lien, il suffit de double-cliquer dessus et de cliquer ensuite sur le bouton « Supprimer le lien ».

Note : Les liens vers des images ou des vidéos YouTube sont automatiquement reconnues et converties pour afficher l'élément.
Si vous souhaitez au contraire que seul le lien s'affiche, cliquez sur le lien dans l'info-bulle en bas de l'éditeur :

MT85wEt.png

4. Insérer un encadré ou des listes

Dans cette partie, il nous faut aborder le copié-collé :

En copiant-collant du texte, il arrive parfois que vous vous retrouviez avec un texte énorme ou parsemé de liens indésirables. C'est très embêtant ! :(
Dans ce cas, portez attention à l'info-bulle qui s'affiche en bas de l'éditeur suite à votre copié-collé :

CDWKaRH.png

Il vous suffit alors de cliquer sur le lien « Supprimer la mise en forme » et le texte revient à son style par défaut.

Si vous avez manqué l'info-bulle, supprimez votre texte, puis il vous suffira de presser la touche Ctrl de votre clavier pendant que vous ferez votre clic-droit. Vous obtiendrez un menu avec la commande Coller sans mise en forme.
(capture coller sans mise en forme)
De même, si vous souhaitez effacer votre mise en forme : sélectionnez votre texte et faites Ctrl + clic-droit. Vous pourrez aussi supprimer la mise en forme.

a. Insérer une liste

L'éditeur vous propose deux types de listes : une liste à puces et une liste numérotée.
(capture boutons listes)

Pour créer une liste, le plus simple est encore de :

  1. taper les lignes sous forme de paragraphes,
  2. les sélectionner,
  3. cliquer sur le bouton approprié.

Attention, si vous faites des retours à la ligne simples (c.f. partie 1.a.), toutes les lignes de votre paragraphe tiendront sur la même puce ou le même numéro.

b. Insérer une citation

Pour citer un précédent message, positionnez votre curseur de saisie au bon endroit dans votre texte. Puis allez plus haut sur le message à citer, et cliquez sur le lien « Citer ».
(capture liens citation)

Vous pouvez aussi citer plusieurs messages en cliquant sur le bouton [+] à gauche du lien « Citer ». Une fois votre sélection faite, vous pourrez cliquer sur le lien « Citer X message(s) » apparu dans une info-bulle à droite.
(capture info-bulle citation)

Autre manière de citer : sélectionnez du texte dans un précédent message. Une info-bulle devrait s'afficher avec un lien « Citer ceci ».
(capture lien citer sélection)

Pour transformer un paragraphe en citation, il suffit de le sélectionner avant de cliquer sur le bouton en forme de guillemets à l'anglaise.
(capture bouton citation)

Notez qu'en faisant un clic droit en maintenant la touche Ctrl, vous pourrez faire l'inverse : transformer une citation en texte simple.
(capture transformer la citation en texte)

Pour déplacer une citation sous une ligne ou dans une autre citation (pour les imbriquer) :
Survolez l'encadré, et cliquez-glissez sur la croix fléchée qui apparaît en haut à gauche.

pYPbkgu.png

c. Insérer du code

Comme avec le bouton de citation, vous pouvez transformer du texte en encadré de code. Comme ceci : 

Ceci est un encadré de texte sensé contenir du code.

Le bouton est le suivant :
(capture bouton insertion de code)

Cet encadré est utile pour mettre en valeur tout ce qui est ligne de commande ou message d'erreur.
Mais rien ne vous interdit de l'utiliser pour écrire un poème, par exemple. ;)

5. Insérer des images

a. Insérer un smiley

Vous aurez reconnu le bouton :
(capture bouton smiley)

Sachez que les smileys peuvent aussi apparaître durant la rédaction. Par exemple, si vous faites suivre un espace + un point-virgule + une parenthèse fermante + un autre espace, cela vous affichera ce smiley : ;)

b. Insérer une image depuis le Net

Pour insérer une image, vous pouvez l'ajouter en pièce-jointe avant de l'afficher comme nous l'expliqueront peu après.

Mais pour garder le contrôle sur vos publications, je vous recommande d'utiliser un site d'hébergement d'image tel que Framapic, Casimage, ImgUr, NoelShack ou encore Google Photos / Picasa si vous aimez Google.
En y créant un compte, vous pourrez supprimer une image si celle-ci venait à vous poser problème (surtout pour les photos).

Une fois que votre image est en ligne, récupérez son URL (un clic droit sur l'image permet généralement de copier son adresse) aussi appelé « lien direct » sur les sites d'hébergement.
Puis copiez-collez son adresse (URL) : elle sera automatiquement reconnue par l'éditeur et s'affichera.

Si ce n'est pas le cas, cliquez sur le bouton « Insérer un autre média » suivi de « Insérer une image depuis Internet ».
(capture insérer image)
Il suffira de coller l'URL et de valider pour que votre image s'affiche.

Si vous souhaitez réduire votre image, il vous suffit de cliquer dessus, puis de faire glisser les poignées.
Si vous souhaitez bénéficier d'options supplémentaires, faites un Ctrl + clic-droit pour cliquer sur « Modifier l'image ».
(capture menu modifier l'image)

c. Ajouter une pièce-jointe et l'insérer

Vous souhaitez joindre une image ? Un petit fichier ? Une archive de plusieurs documents ?

Glissez votre fichier sur le trombone, ou cliquez sur « Choisir les fichiers ».
(capture ajout PJ)

Une fois votre pièce-jointe ajoutée, vous pouvez l'insérer dans le message en cliquant sur le bouton (+), ou la supprimer.
(capture options PJ)

Remarque : N'envoyez pas deux fois le même fichier !
Vous pouvez retrouver les PJ de votre compte via le bouton « Insérer un autre média » puis le lien « Insérer une pièce jointe existante ».

(capture insertion PJ)

Important :
Veillez à ne pas mettre en pièce-jointe des fichiers trop lourds ! Car l'espace de votre compte est soumis à un quota et vous risquer de l'atteindre rapidement. Dans un tel cas, préférez les hébergeurs tels que Framadrop, Cjoint (15Mo), Google Drive, Dropbox, etc.

Note : pour un long rapport au format texte, vous pouvez aussi utiliser des sites comme FramaBin, PJjoint ou encore TextUp, sur lesquels vous pourrez copier-coller votre rapport et obtenir son lien direct.

6. Faites en plus avec le BBCode !

Découvrez une autre façon de mettre en forme vos messages, qui vous offre de nouvelles possibilités.

► Lire le tutoriel ◄

 

7. Copiez-collez des mise-en-forme toutes faites

Vous souhaitez copier-coller des caractères spéciaux ? Mettre en forme des touches de clavier, des boutons ? Faire un titre en forme de ruban ou un encart texte coloré ?

Rendez-vous sur la page de @Le PoissonClown prévue à cet effet. Vous pourrez même personnaliser certains éléments :

► Aller sur la page ◄

 

8. Faites-en encore plus avec l'éditeur complet !

Comment faire plusieurs colonnes ? Un tableau ? C'est possible :

Allez sur le site de qui propose l'outil de rédaction du site, à savoir CKeditor.
Sur les démos proposées, vous disposez d'un éditeur similaire à celui du site LeCrabeInfo, mais plus étoffé. Pour disposer d'un maximum de fonctions, choisissez le Full Preset.

(Cliquez dans la zone d'édition, faites Ctrl+A et Suppr pour vider le contenu de démonstration.)

a. Insérer un tableau

Très simple : cliquez sur le bouton approprié :

CiVKBSO.png

Puis renseignez le nombre de lignes et de colonnes, l'alignement des en-têtes en ligne ou en colonne ou sans en-tête, la position du tableau et spécifiez éventuellement un titre et/ou une légende :

fso85KV.png

Voici le rendu une fois le tableau rempli :

HLKqmcd.png

Si vous préférez une bordure toute simple, je vous suggère de mettre zéro d'espacement, 1 pixel d'espacement et une marge interne de 3 à 10.

Une fois votre tableau réalisé, sélectionnez tout (Ctrl+A) et copiez (Ctrl+C) pour collez le tout (Ctrl+V) dans votre message sur LeCrabeInfo !

b. Faire plusieurs colonnes

L'outil d'insertion de tableaux nous permet de mettre en forme un contenu sur plusieurs colonnes. Pour cela, c'est très simple : il suffit de choisir une seule ligne, une largeur de 100%, aucune en-tête (à moins que vous souhaitiez une en-tête de colonne), mettre l'épaisseur du trait à zéro et une marge interne suffisante (de 5 à 15) pour laisser apparaître le contenu sans que le tableau soit visible.

7DPRtyJ.png g7VrUxQ.png

Idem : une fois satisfait, sélectionnez, copiez et venez coller votre tableau sur le site.

c. Modifier son tableau

Si vous souhaitez modifier la mise en forme de votre tableau, effectuez un clic droit dessus et cliquez sur Propriétés du tableau. Vous aurez accès à nouveau à ses options.

GtNdOk5.png

Il vous est même possible de modifier individuellement les cellules :

Faites un clic droit dessus, et allez dans Cellule pour cliquer sur Propriétés de la cellule.

RDHGXFZ.png

Depuis ces propriétés, vous pourrez régler l'alignement vertical, la fusion avec d'autres cellules, et même choisir une couleur d'arrière-plan et/ou de bordure (vous pouvez utiliser cet outil en ligne pour obtenir le bon code couleur).

dIdDxV6.png

Une fois votre tableau au point, copiez-collez-le dans votre message.

d. Portions de texte spéciales

Pour mettre son texte en petit en haut de la ligne, comme ceci, ou en bas, comme cela, il faudra utiliser les boutons suivants :

n7VyW33.png

Pour surligner des mots par une couleur de fond, utilisez ce bouton :

r57TSa7.png

Pour changer la police d'écriture d'une partie de votre texte, c'est ce volet :

jI6nFew.png

e. Faire une sous-liste ou un alinéa

Peut-être souhaitez-vous ajouter un alinéa ou déployer une sous-liste au sein d'une liste déjà existante ? Eh bien c'est très simple : ajoutez vos éléments dans la liste, au même niveau que la première, sélectionnez-les et cliquez sur le bouton de tabulation vers la droite.

6H0kdH5.png

Ceci créera votre sous-liste.
Et si par mégarde, vous avez ainsi poussé une ligne alors qu'elle ne devrait pas, il suffit de la sélectionner et de la faire reculer avec le bouton juste à côté (tabulation vers la gauche).

Pour un paragraphe, c'est la même chose.

f. Faire des encarts de texte

Vous souhaitez ajouter un fond de couleur ou une bordure à un texte pour le mettre en valeur ? Voici comment :

Sélectionnez votre texte et cliquez sur le bouton Div</>.

tW6IJ1P.png

Dans le volet déroulant, choisissez Special Container et allez dans l'onglet Avancé.

vVpERY0.png

Le champ Style contient trois propriétés CSS que vous pouvez supprimer ou modifier les valeurs comme suit :

  • Pour ajouter une couleur de fond, laissez background:#eeeeee; et padding:5px 10px;
    Remplacez le code couleur par celui qui vous convient avant de valider.
  • Pour ajouter une bordure, laissez border:1px solid #cccccc; et padding:5px 10px;
    Remplacez le code couleur par celui qui vous plaît et spécifiez le nombre de pixels de large (1 par défaut) avant de valider.
  • Pour ajouter seulement une bulle d'information au survol, effacez toutes les propriétés CSS et inscrivez le contenu de l'info-bulle dans le champ Infobulle.

FEBF9gS.png

g. Insérer des titres

Pour créer un titre, saisissez votre texte, sélectionnez-le puis déployez le volet déroulant affichant Normal et choisissez le titre de niveau désiré :

ylvw0VI.png

Pour un sous-titre (Subtitle) ou un titre de niveau 2 en italique (Italic title), vous trouverez cela dans le volet intitulé Styles.

RqULZgT.png

h. Insérer une ligne de séparation

Vous aimeriez insérer une césure horizontale sur toute la largeur de votre message ? C'est ce bouton :

9AZGnXD.png

Note sur ce qui ne fonctionne pas :
Vous pouvez vous amuser sur l'éditeur mais sachez qu'une fois copié-collé sur l'éditeur de LeCrabeInfo.com, les ancres ne sont pas restituées, le style surligné non-plus, bien-sûr, les formulaires ne donneront rien, le contenu incorporé non-plus, idem pour le flash.

En vous souhaitant bonne rédaction ! :)

Modifié par Le PoissonClown
MAJ du lien vers les décorations à copier-coller
  • J'adore 2
  • Plusser (+1) 3
Lien vers le commentaire
Mreve Aspirant

Mreve

Posté(e)
Posté(e) (modifié)

@Le PoissonClown

Wow !
Très bien réalisé et très bien construit - comme d'habitude ! :)

Le petit placement produit blogueur est passé inaperçu ^_^

Trois petites remarques :
1) De la même façon qu'il existe Framapic, hébergeur libre d'images, il existe aussi Framadrop qui permet d'héberger de façon sécurisé, anonyme et temporaire une pièce jointe. C'est un bon moyen pour échanger entre crabonautes

2) A vrai dire, le forum est maintenant soumis au BBCode. On peut l'utiliser par exemple pour centrer une image hébergée - chose qui n'est pas proposée comme fonctionnalité ;)
Il propose au final de très nombreuses possibilités de présentation :)

 

160503070655776564.png

  

[center][URL=http://www.casimages.com/i/160503070655776564.png.html][img=http://nsa37.casimages.com/img/2016/05/03/160503070655776564.png][/URL][/center]

3) Comment as-tu réussi à colorer le fond des messages écrit l'insertion de code ? C'est très joli ! :x

 

Modifié par Mreve
  • J'aime 1
Lien vers le commentaire
Le PoissonClown Capitaine de vaisseau

Le PoissonClown

Posté(e)
  • Auteur
Posté(e) (modifié)

Merci, je rajoute !

Pour les encarts colorés ? Ce n'est pas une insertion de code, c'est du vilain bidouillage. :$
Je t'expliquerai en MP si tu veux.

Mais vu qu'il y a du BBcode maintenant, je vais pouvoir m'en passer. :c_wink:
À ce propos, il faudra que j'intègre un chapitre sur cette fonctionnalité dans le tuto.

Il y a 17 heures, Mreve a dit :

Le petit placement produit blogueur est passé inaperçu ^_^

Ah oui ! Bah c'est un des blogs les plus célèbres en informatique. Le texte fait effectivement très "vendeur", désolé. 9_9

Modifié par Le PoissonClown
Ajout à propos du "placement de blogueur"
Lien vers le commentaire
  • Mreve a épinglé ce sujet
  • 2 semaines plus tard...
Le PoissonClown Capitaine de vaisseau

Le PoissonClown

Posté(e)
  • Auteur
Posté(e) (modifié)

Ajout de la partie 7, pour encore plus de possibilités !

Edit :
Mince ! Impossible de restituer les ancres ! :c_crying:
Du coup, mon sommaire ne sera pas cliquable, tant-pis.

Re-edit :
Re-mince ! Le mode HTML est hyper-limité ! :c_crying:
Du coup, même pas moyen de mettre un fond de couleur aux paragraphes de façon quelque peu orthodoxe.

Finalement, cet éditeur ne sers que pour les tableaux.

Re-re-edit : Ou pas. Je m'en vais à nouveau compléter ce tuto.

Re-re-re-edit : c'est fait ! :c_happy:

Modifié par Le PoissonClown
Flûte ! Les ancres ne sont pas restituées
Lien vers le commentaire
  • Mreve a mis en évidence ce sujet
  • Le PoissonClown n'a plus mis en évidence ce sujet
  • 3 semaines plus tard...
Franck.MRA Matelot breveté

Franck.MRA

Posté(e)
Posté(e) (modifié)
Le 10/05/2016 à 19:35, Mreve a dit :

Bizarre bizarre ! Tu peux envoyer une capture d'écran ? :c_wink:

 

Bonjour @Mreve bonjour tout l'monde,

Je profite du post de Paco83 (un an après, bah mieux vaut tard que jamais hein lol) pour signaler que j'ai également le même soucis concernant l'édition d'un message que je post, pas de fonction "Editer" lol

Merci d'avance pour vos réponses :)

Screenshot_1_zpstiv8ij5s.jpg

[Edit] Je viens de constater en envoyant ce message qu'il y avait le "Editer" mais pas sur mes deux autres messages, bizarre, bizarre O.o lol

Modifié par Franck.MRA
Lien vers le commentaire
Le PoissonClown Capitaine de vaisseau

Le PoissonClown

Posté(e)
  • Auteur
Posté(e)
Le 31/05/2017 à 04:42, Franck.MRA a dit :

Je profite du post de Paco83 (un an après, bah mieux vaut tard que jamais hein lol) pour signaler que j'ai également le même soucis concernant l'édition d'un message que je post, pas de fonction "Editer" lol

[…]

[Edit] Je viens de constater en envoyant ce message qu'il y avait le "Editer" mais pas sur mes deux autres messages, bizarre, bizarre O.o lol

Salut !

La fonction d'édition expire passées 15 minutes, il me semble. Tes autres messages étaient-ils encore dans ce laps de temps ?

Bon surf !

Lien vers le commentaire
  • Le Crabe a désépinglé ce sujet
  • 1 année plus tard...
Le PoissonClown Capitaine de vaisseau

Le PoissonClown

Posté(e)
  • Auteur
Posté(e)
il y a 17 minutes, D34 Angel a dit :

Je ne vois pas cet éditeur complet (pourtant, il me semble l'avoir vu l'an dernier - aurait-ce changé ?)
Faut-il faire une manip particulière pour l'obtenir ?

Coucou ! :c_happy:

L'éditeur complet se trouve sur le site KCeditor : https://ckeditor.com/docs/ckeditor4/latest/examples/fullpreset.html

Une fois que l'on a réalisé ce que l'on souhaitait dessus (un tableau, des surlignages, etc.), on peut copier-coller ce résultat dans sa réponse sur le forum.

Lien vers le commentaire
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...