Jump to content

Rédaction et mise en forme de ses messages


Le PoissonClown

307 views

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 :

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 ◄

 

IMPORTANT :
Les parties 7 et 8 qui suivent ne fonctionnent plus : l'éditeur de LeCrabeInfo.com filtre la mise en forme au copié-collé. Vous ne pouvez coller dans vos message que du texte brut. Les images, le gras, l'italique, les fonds colorés, les tableaux… Tout cela n'est plus restitué, afin d'éviter de se retrouver lors d'un copié-collé avec des bugs de mise en forme impossible à résoudre pour celui qui rédige.

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

Révélation

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 !

Révélation

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 de retour sur votre message :
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 ! :)

  • J'aime 2

2 Comments


Recommended Comments

Énorme, ce tuto ! :notbad:

Citation

l'éditeur de LeCrabeInfo.com filtre la mise en forme au copié-collé. Vous ne pouvez coller dans vos message que du texte brut. Les images, le gras, l'italique, les fonds colorés, les tableaux… Tout cela n'est plus restitué

Pourtant sur Firefox, ça marche :

Révélation

IMPORTANT :
Les parties 7 et 8 qui suivent ne fonctionnent plus : l'éditeur de LeCrabeInfo.com filtre la mise en forme au copié-collé. Vous ne pouvez coller dans vos message que du texte brut. Les images, le gras, l'italique, les fonds colorés, les tableaux… Tout cela n'est plus restitué, afin d'éviter de se retrouver lors d'un copié-collé avec des bugs de mise en forme impossible à résoudre pour celui qui rédige.

  • J'aime 1
Link to comment

Merci !

Le 28/01/2020 à 18:14, Anon142 a dit :

Pourtant sur Firefox, ça marche :

  Révéler le contenu masqué

IMPORTANT :
Les parties 7 et 8 qui suivent ne fonctionnent plus : l'éditeur de LeCrabeInfo.com filtre la mise en forme au copié-collé. Vous ne pouvez coller dans vos message que du texte brut. Les images, le gras, l'italique, les fonds colorés, les tableaux… Tout cela n'est plus restitué, afin d'éviter de se retrouver lors d'un copié-collé avec des bugs de mise en forme impossible à résoudre pour celui qui rédige.

Oui, @Le Crabe l'a autorisé suite à l'apparition de la partie blogs, pour qu'on puisse déménager nos tutos.
Je ne sais pas si c'est temporaire ou non. Du coup j'attends d'en savoir plus.

  • J'aime 1
Link to comment
Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...