Outils de mise en page

par Héliotrope Mer 16 Oct - 18:05

OUTILS DE MISE EN PAGE

Dans ce sujet sont proposés quelques outils destinés à mettre vos textes en valeur, des plus simples aux plus complexes, en jouant sur les caractères ou les paragraphes, en modifiant les marges, ou en ajoutant des encadrés. Réaliser un sommaire peut améliorer le confort de lecture des romans ou des recueils de nouvelles.

Bien sûr, une belle présentation ne rend pas le texte meilleur ; mais elle aide quand même à ne pas décourager les lecteurs !

SOMMAIRE

1. Caractères & paragraphes
2. Marges, cadres, etc…
3. Construire un sommaire
4. Tableaux et listes
5. Présentation de romans
6. Retraits en début de paragraphe
7. Petits trucs et astuces
8. Codes couleur

par Héliotrope Mer 16 Oct - 18:07

LE B.A. BA : Caractères & paragraphes

1. L'ÉDITEUR

L’éditeur est cette page blanche qui apparaît quand on clique sur Réponse, Nouveau sujet, ou en réponse rapide (où elle est simplifiée).

La barre d’outils contient tous les outils nécessaires aux mises en forme courantes, y compris l’insertion d’images, vidéos, et liens externes. Mais surtout, on y trouve la touche magique, celle dont vont raffoler tous les as de la correction de textes : la dernière icône de la deuxième ligne de la barre grise !

Elle permet en effet de visualiser le texte sans balises, tout en autorisant les corrections : il n’est plus nécessaire de sélectionner les mots fautifs une fois pour les souligner, une autre fois pour les peindre en rouge, et une troisième fois pour les mettre en italiques. Une sélection suffit !

Sur cet exemple, aucune balise n'apparaît alors que le paragraphe est justifié. La phrase en caractères gras rouges a été mise en forme sur une unique sélection.

2. Mise en forme des caractères, alignements

Caractères gras et caractères soulignés : les réserver aux titres ; ils ne sont guère gracieux dans le corps du texte et rarement intéressants.

Caractères italiques : préconisés pour les soliloques, les apartés, les citations, ainsi que pour les mots étrangers intégrés au texte.

Paragraphes justifiés : (marges égales à gauche et à droite) tous les livres sont imprimés ainsi ; leur lecture est agréable à la condition que les paragraphes soient soigneusement distingués par un retour à la ligne.

Les autres alignements peuvent avoir leur intérêt pour mettre des portions du texte en évidence ; le centrage est couramment utilisé pour les titres, ainsi qu’en poésie.

3. Taille et couleur des caractères

Il ne faut abuser des couleurs ! C’est très fatiguant, et pas toujours lisible. Les réserver pour les topics d’annonces. Vérifiez toujours le rendu des couleurs à l'aide de la prévisualisation. La taille de caractères par défaut est 12.

Pour vous procurer les caractères absents de votre clavier (À, É,æ, œ, Œ, — ) : http://www.lexilogos.com/clavier/francais.htm

Retour vers le sommaire

par Héliotrope Mer 16 Oct - 18:08

MARGES, CADRES, ETC..
Les textes ci-dessous sont extraits de "Femmes, soyez soumises à vos maris" de Voltaire (1768) qui se trouve ICI

Par défaut, les textes saisis ou collés sur le forum se présentent ainsi (justifiés) :

Il fallait que sa femme fût une bien bonne créature : si j’avais été la femme d’un pareil homme, je lui aurais fait voir du pays. Soyez soumises à vos maris ! Encore s’il s’était contenté de dire : Soyez douces, complaisantes, attentives, économes, je dirais : Voilà un homme qui sait vivre ; et pourquoi soumises, s’il vous plaît ?

1. Solution archi simple : citation

Quand j’épousai M. de Grancey, nous nous promîmes d’être fidèles : je n’ai pas trop gardé ma parole, ni lui la sienne ; mais ni lui ni moi ne promîmes d’obéir. Sommes-nous donc des esclaves ? N’est-ce pas assez qu’un homme, après m’avoir épousée, ait le droit de me donner une maladie de neuf mois, qui quelquefois est mortelle ?

Il suffit pour cela d'utiliser le bouton 'Citer' de la barre d'outils (12ème à partir de la gauche), de sélectionner le texte, et de cliquer le bouton Justifié (8ème à partir de la gauche). Inconvénient : le fond est incurablement vert.

Attention : ce qui suit repose sur des balises HTML ; pour les utiliser sans mauvaises surprises, ouvrez votre Profil, cliquez l'onglet Préférences et vérifiez que l'option oui de Toujours autoriser le HTLM est bien cochée.

2. Texte encadré, justifié, avec marges haut/bas/droite/gauche :

N’est-ce pas assez que je mette au jour avec de très grandes douleurs un enfant qui pourra me plaider quand il sera majeur ? Ne suffit-il pas que je sois sujette tous les mois à des incommodités très désagréables pour une femme de qualité, et que, pour comble, la suppression d’une de ces douze maladies par an soit capable de me donner la mort sans qu’on vienne me dire encore : Obéissez ?
« Certainement la nature ne l’a pas dit ; elle nous a fait des organes différents de ceux des hommes ; mais en nous rendant nécessaires les uns aux autres, elle n’a pas prétendu que l’union formât un esclavage.

Pour obtenir ce résultat, copiez/coller le code suivant :

Code:: <center> <TABLE border=2 ; bordercolor=#CDADE9; width=700px ; bgcolor=#F2F0CF><TR><TD> <div style="margin: 3% 3% 3% 3%;"> [justify]texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte [/justify]</div></div></TD></TABLE> </center>

En clair : Cet encadré est un tableau (TABLE) dont la bordure (border) est large de 2 pixels ; la couleur de la bordure (bordercolor) est #CDADE9 (*) ; la largeur du tableau (width) est de 700 pixels ; la couleur du fond (bgcolor pour background color) est #F2F0CF (*) ; TR est l'ouverture de ligne, TD l'ouverture de colonne (mais ici le tableau ne comporte qu'une seule cellule) ; le style de cette cellule fixe les marges haute, droite, basse et gauche à 3% de l'ensemble.

(*) Pour modifier les codes couleur[/b][/color] : http://www.code-couleur.com/

3. Cadre avec bords arrondis :

Je me souviens bien que Molière a dit : "Du côté de la barbe est la toute-puissance". Mais voilà une plaisante raison pour que j’aie un maître ! Quoi ! Parce qu’un homme a le menton couvert d’un vilain poil rude, qu’il est obligé de tondre de fort près, et que mon menton est né rasé, il faudra que je lui obéisse très humblement ?

Pour obtenir ce résultat, copiez/coller le code suivant :

Code:: <table align="center"; style="background-color: #F2F0CF; width: 800px; border:3px solid #9c85c0; border-radius: 10px 10px 10px 10px"><tr><td valign=center><div style="margin: 3% 3% 3% 3%;"> [justify]texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte[/justify]</div></tr></td></table>

Retour vers le sommaire

par Héliotrope Mer 16 Oct - 19:44

CONSTRUIRE UN SOMMAIRE

Un sommaire est très appréciable pour les romans, les recueils de nouvelles ou de poésie, ou encore les sujets longs (comme celui-ci) ; il évite les longs scrollings pour atteindre le texte voulu. Dans ce cas, il est préférable de ne mettre qu'un chapitre (ou nouvelle, poème, article... ) par message. L'adresse du sommaire peut être rappelée au bas de chaque chapitre, avec, par exemple, l'adresse du sujet réservé aux commentaires. Ainsi, la navigation est nettement facilitée.

La démarche est la suivante :

On réserve le 1er message (nouveau sujet) pour l'accueil, la présentation et le sommaire ; on y place une ancre.
On crée ensuite un message (réponse) par chapitre, nouvelle, etc... ; on y place une ancre (une par message).
On note soigneusement le nom des ancres ainsi que le titre du chapitre correspondant
On note l'adresse du sujet qui contient le roman ou le recueil

Syntaxe des ancres :

Code:: <table id=sommaire></table> <table id=ancre1></table>

Sommaire, ou ancre1, peut être remplacé par n'importe quel nom ; on peut utiliser sommaire pour le premier message, puis prologue ou chapitre1, chapitre 2, etc... pour les messages suivant. Ces noms ne doivent pas inclure d'espace. Pour des raisons pratiques, il est préférable de les écrire toujours de la même façon, en minuscules par exemple.

Important : l'ancre se place toujours au tout début du message (rien ne doit la précéder, ni espace, ni caractère).

SOMMAIRE SIMPLE :

En vert, l’adresse du sujet https://des-mots-un-sourire.forumactif.org/t52-outils-de-mise-en-page#641; on efface tout ce qui suit le signe # (ici 641), on le remplace par le nom de l’ancre qui convient (ici parag1 en rouge), et on ferme le ]. Aussitôt après ce ], on entre le libellé (en bleu) qui correspond à l’ancre (ce pourrait être le n° d’un chapitre, suivi de son titre). On recommence l'opération pour chaque message/ancre.

Si votre page occupe plusieurs pages, n’oubliez pas d’ajouter le n° de page dès la page 2 ; dans l’exemple ci-dessus, ce serait https://des-mots-un-sourire.forumactif.org/t52p2-outils-de-mise-en-page etc...

par Héliotrope Jeu 17 Oct - 11:56

TABLEAUX ET LISTES

1. Tableaux

Les tableaux sont très indiqués pour les résultats de concours ainsi que pour les sommaires très développés. Construire un tableau à l'aide de l'éditeur étant assez long et pénible, quelques astuces permettent de contourner la difficulté.

1.1 Construire un tableau à l'aide de l'éditeur :

L'icône ad hoc (16ème en partant de la gauche) donne le résultat suivant :

Code:: [table][tr][td][/td][/tr][/table]

soit un tableau à case unique (1 ligne 1 colonne) ; ce n'est pas totalement dépourvu d'intérêt, car cette case unique peut permettre d'encadrer un texte (voir 2. Marges, cadres, etc...)

ou un objet (vidéo, photo...). Dans le code ci-dessus, en vert :

Table = tableau, peut recevoir les instructions valables pour l'ensemble du tableau
tr = ligne, peut recevoir les instructions valables pour l'ensemble de la ligne
td = colonne, idem tr
/td = fin de colonne (ou de case si plusieurs colonnes)
/tr = fin de ligne
/table = fin du tableau

Construisons, pour les résultats d'un concours, un tableau de 5 lignes et 8 colonnes ; voici le code :

Code:: [table][tr][td][/td][td][/td][td][/td][td][/td]td][/td][td][/td][td][/td][td][/td][/tr][tr][td][/td][td][/td][td][/td][td][/td]td][/td][td][/td][td][/td][td][/td][/tr][tr][td][/td][td][/td][td][/td][td][/td]td][/td][td][/td][td][/td][td][/td][/tr][tr][td][/td][td][/td][td][/td][td][/td]td][/td][td][/td][td][/td][td][/td][/tr][/table]

Voici la morphologie du tableau (ont été ajoutés les n° de lignes et de colonnes entre 2 balises td et /td)

ligne 1 col 1	ligne 1 col 2	ligne 1 col 3	ligne 1 col 4	ligne 1 col 5	ligne 1 col 6	ligne 1 col 7	ligne 1 col 8
ligne 2 col 1	ligne 2 col 2	ligne 2 col 3	ligne 2 col 4	ligne 2 col 5	ligne 2 col 6	ligne 2 col 7	ligne 2 col 8
ligne 3 col 1	ligne 3 col 2	ligne 3 col 3	ligne 3 col 4	ligne 3 col 5	ligne 3 col 6	ligne 3 col 7	ligne 3 col 8
ligne 4 col 1	ligne 4 col 2	ligne 4 col 3	ligne 4 col 4	ligne 4 col 5	ligne 4 col 6	ligne 4 col 7	ligne 4 col 8

Vraiment très moche et peu lisible ! Alors raffinons un peu les choses :

ligne 1 col 1	ligne 1 col 2	ligne 1 col 3	ligne 1 col 4	ligne 1 col 5	ligne 1 col 6	ligne 1 col 7	ligne 1 col 8
ligne 2 col 1	ligne 2 col 2	ligne 2 col 3	ligne 2 col 4	ligne 2 col 5	ligne 2 col 6	ligne 2 col 7	ligne 2 col 8
ligne 3 col 1	ligne 3 col 2	ligne 3 col 3	ligne 3 col 4	ligne 3 col 5	ligne 3 col 6	ligne 3 col 7	ligne 3 col 8
ligne 4 col 1	ligne 4 col 2	ligne 4 col 3	ligne 4 col 4	ligne 4 col 5	ligne 4 col 6	ligne 4 col 7	ligne 4 col 8

par Héliotrope Jeu 17 Oct - 11:56

PRÉSENTATION D'UN ROMAN

Voici un modèle de fiche de présentation d'un roman, qu'on peut faire suivre d'un sommaire.

FICHE DU ROMAN

Titre :
Objectif :
Genre :
Début de rédaction :
Public visé :
Nombre de mots écrits :
Nombre de mots prévus :

Les mémoires d'un rat de cave
Terminer cette 25ème version
Réalisme noir
Juillet 1900
Adulte
1 000 000
10 500

RÉSUMÉ

Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla

Code de la fiche :

Code:: <table align="center"; style="background-color: #F2F0CF; width: 800px; border:1px solid #9c85c0; border-radius: 20px 20px 20px 20px"><tr><td align=left valign=center> [center][size=18][font=Arial Black][color=#9c85c0]FICHE DU ROMAN[/color][/font][/size][/center] </td> <td align=left valign=center> [color=#9c85c0]Titre :[/color] [color=#9c85c0]Objectif :[/color] [color=#9c85c0]Genre :[/color] [color=#9c85c0]Début de rédaction :[/color] [color=#9c85c0]Public visé :[/color] [color=#9c85c0]Nombre de mots écrits :[/color] [color=#9c85c0]Nombre de mots prévus :[/color] </td><td>[color=#9c85c0][b]Les mémoires d'un rat de cave Terminer cette 25ème version Réalisme noir Juillet 1900 Adulte 1 000 000 10 500[/b][/color] </tr></td> </table>

Code du résumé :

Code:: <table align="center"; style="background-color: #F2F0CF; width: 800px; border:1px solid #9c85c0; border-radius: 20px 20px 20px 20px"><tr><td align=left valign=center; style=width:236px> [center][size=18][font=Arial Black][color=#9c85c0]RÉSUMÉ[/color][/font][/size][/center] </td> <td align=left valign=center> [color=#9c85c0]Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla [/color]</td></tr></table>

Retour vers le sommaire

par Héliotrope Jeu 17 Oct - 11:57

par Héliotrope Jeu 17 Oct - 11:58

par Héliotrope Jeu 17 Oct - 11:59

QUELQUES CODES COULEUR

Une petite sélection de codes couleur choisis en fonction du fond du forum ; cependant, le rendu des couleurs diffère selon les navigateurs, d'une part, et de leur association d'autre part. Les couleurs vives agressent la vue ; il ne faut donc pas en abuser, et les réserver aux titres ou aux bordures. Plusieurs sites permettent de se procurer des codes (le choix est infini), dont le site Code couleur

.

code	couleur	code	couleur	code	couleur	code	couleur
#FFFAF4		#FFF7EE		#FFF5EF		#FFFAFA
#FCFAE1		#F2F0CF		#FFE6C9		#FFEFB6
#FCDE8E		#CDDE47		#84D41D		#8FCF3C
#9999CC		#50468C		#D5B2F7		#9C85C0
#8D6DAE		#6F5497		#853894		#4D006C
#6E81BD		#C4D7ED		#E1E6FA		#FF73BF
#D400FF		#FF5900		#FF9300		#FDD131

Retour vers le sommaire

par Héliotrope Ven 18 Oct - 8:36

Réservé

FIN ! Allez-y : commentez, questionnez !

par Contenu sponsorisé

Outils de mise en page

Outils de mise en page

Caractères et paragraphes

Marges, cadres, etc...

Construire un sommaire

Tableaux et listes

Présentation d'un roman

Retrait en début de paragraphe

Petits trucs et astuces

Codes couleur

Re: Outils de mise en page

Re: Outils de mise en page