Education populaire & Transformation sociale !
Offre Civile de Réflexion
Accueil du siteAide à la rédactionPetit mode d’emploi
Dernière mise à jour :
lundi 5 janvier 2009
Date :
2005
SPIP en 7 leçons…
Rédaction et mise en page
6ème leçon...
mardi 13 décembre 2005
par Gilles Patrat
Le zapping est féroce sur le net ! Il est donc opportun de soigner la mise en page pour ne pas tenter le lecteur de tourner la page...

Quelques conseils...

La mise en page d’un article sur le net devrait obéir à quelques règles...
- La lecture a l’écran est plus fatigante que sur le papier, aussi on aère plus... et on insère toujours une ligne vide entre deux paragraphes.
- La lecture d’un texte en majuscule est malaisée, de plus on considère que c’est un cri.
- Les articles se présentent d’abord sous une forme "résumée" (soit apparait le descriptif rapide, soit les 200 premeirs signes du texte en l’absence du descriptif) aussi utilisez sur-titre, titre, sous-titre et descriptif rapide pour présenter suffisament l’article et permettre au lecteur de savoir s’il veut lire l’article entier.
- Si vous rédigez sur un logiciel de traitement de texte avant de le copier-coller, pensez ensuite à fignoler votre mise en page... Les niveaux de titre (et autres attributs...) d’un traitement de texte ne sont pas pris en compte... il faut donc les attribuer dans le bloc de rédaction SPIP.

Pour soigner votre mise en page, SPIP vous offre de nombreux raccourcis facilement mémorisables, simples et efficaces. Mais si vous êtes à l’aise avec le langage HTML, vous pouvez utiliser directement ce langage, puisque les raccourcis de SPIP sont finalement convertis en HTML.

Les raccourcis SPIP

Paragraphe et retour à la ligne :

- pour créer un paragraphe, insérez une ligne vide
- pour faire un retour à la ligne simple, tapez un underscore (tiret bas) et un espace en début de ligne "_ "
- un simple retour chariot ne provoque même pas un retour à la ligne.
Listes et énumérations

liste simple : tapez un tiret et un espace en début de ligne,
liste avec retrait : tapez un tiret, suivi d’une ou plusieurs étoiles et d’un espace,
liste numérotée : tapez un tiret suivi d’un dièse.

Soit :

- et de un
- et de deux
- et de trois !

-* vivant
-** animal
-** humain
-*** à poil long
-*** à poil ras
-*** sans poils
-** végétal
-* minéral

-# mon premier
-# mon second
-# mon troisième

donne :

- et de un
- et de deux
- et de trois !

  • vivant
    • animal
    • humain
      • à poil long
      • à poil ras
      • sans poils
    • végétal
  • minéral
  1. mon premier
  2. mon second
  3. mon troisième
Gras, italique et inter-titre

On utilise les accollades...

{italique} donne :

italique {{gras}} donne

gras

et {{{inter-titre}}} donne :

inter-titre

Traits de séparation

une série de 4 tirets ---- donne
Les liens hypertextes

Entre crochets, l’expression qui servira de lien suivie d’une flèche, formée d’un tiret et d’un chevron, suivi de l’adresse.
On peut ainsi lier une adresse extérieure au site, interne au site ou donner une adresse de mail.
Détendez-vous en écoutant un peu de [musique acoustique->http://
mille-et-une-vagues.org/spectacles/pinocchio/musique/mus-la_naissance.htm]

donne :

Détendez-vous en écoutant un peu de musique acoustique

Ecrivez au [webmaster->webmaster@mille-et-une-vagues.org] donne :

Ecrivez au webmaster

Les liens hypertextes interne au site
Il est très facile de créer un lien vers un article, une brève, une rubrique ou un auteur, etc...
Toujours entre crochets, et avec la flèche formée du tiret et du chevron, il suffit d’utiliser les raccourcis suivants, suivi du numéro de l’article, de la brève, de la rubrique ou de l’auteur :
- "art" pour article
- "rub" pour rubrique
- "br" pour brève
- "aut" pour auteur
- "mot" pour mot-clé
- "img" pour pour une image
- "doc" pour pour un document joint, et enfin
- "site" pour un site syndiqué

Ainsi : Veuillez consulter la [1ère leçon->art21]donne : Veuillez consulter la 1ère leçon

Mais, dans le cas d’articles, vous pouvez omettre la partie qui précède la flèche, et SPIP indiquera automatiquement le titre de l’article. Donc : Veuillez consulter l'article : "[->art21]"donne : Veuillez consulter l’article : "Un article type !"

Notes automatiques numérotées de bas de pages

Il suffit d’écrire entre doubles crochets le texte de la note. SPIP placera à cet emplacement un N° de note, qui est aussi un lien vers la note. La note elle-même est un lien hypertexte qui renvoit vers le mot annoté.

Ainsi : Il suffit d'écrire entre doubles crochets le texte de la note[[ C'est trop fastoche !]]. donne : Il suffit d’écrire entre doubles crochets le texte de la note [1].
Et cliquez sur la note... Ça marche !

Les ancres nommées
Il a été posé une ancre nommée gras après le sous-titre : "Gras, italique et sous-titre". En cliquant sur son lien d’appel, on rejoint automatiquement l’ancre nommée, et donc le sous-titre.

L’ancre nommée[gras<-] L’appel[gras->art38#gras]

Avec le même principe, on peut aussi créer un lien hypertexte appelant un point précis d’une autre page, à condition bien sûr d’y avoir préalablement posée une ancre. Par exemple, revoyez la photo des instruments populaires de la leçon N°1, cliquez le lien et vous voilà renvoyés à l’article 21, précisément à l’endroit de la photo...

L’ancre nommée insérée près de la photo dans l’article 21 (Un article type ! 1ère leçon) [instruments<-] et l’appel dans cette présente page [photo des instruments populaires de la leçon N°1->art21#instruments]

SPIP offre encore un certain nombre de raccourci, tels qu’un appareillage de note non automatique, la faculté de créer des tableaux, ou encore de renvoyer vers le glossaire Wikipédia... Pour connaître ces fonctions, rejoignez l’aide., cliquer sur "Les articles" puis "Les raccourcis typographiques".

Le HTML

Le langage HTML sera naturellement utilisé par ceux qui le connaissent. Mais il offre quelques facilités très utiles et n’est pas particulièrement difficile à mémoriser...

Il est caractérisé par des balises ouvrantes de type <x> (avant le texte à traiter) et fermantes de type </x> (après le texte), ou "x" est remplacer par une valeur, mais la forme ne varie pas.

Titrage
Le HTML permet d’attribuer 6 niveaux différents de titre, nommés h1, h2, h3, h4, h5 et h6. Ces valeurs sont à mettre à la place du "x" dans les balises ouvrantes et fermantes.
A noter que la balise h3 correspond à l’inter-titrage de SPIP.

Il est inutile de rajouter une ligne vide après un titre. Les espaces sont ajoutés automatiquement.

_ Voici ce que donnent les 6 niveaux de titre, suivi d'un texte :
<h1>Titre 1</h1>
A bla bla bla bla
<h2>Titre 2</h2>
A bla bla bla bla
<h3>Titre 3</h3>
A bla bla bla bla
<h4>Titre 4</h4>
A bla bla bla bla
<h5>Titre 5</h5>
A bla bla bla bla
<h6>Titre 6</h6>
A bla bla bla bla

donne :

Voici ce que donnent les 6 niveaux de titre, suivi d’un texte :

Titre 1

A bla bla bla bla

Titre 2

A bla bla bla bla

Titre 3

A bla bla bla bla

Titre 4

A bla bla bla bla
Titre 5
A bla bla bla bla
Titre 6
A bla bla bla bla
Cadre
Il peut être utile de mettre des expressions dans un cadre, il suffit de taper "cadre" à la place du "x" (dans la balise ouvrante et dans la balise fermante. Poser du texte ou des expressions dans un cadre, les souligne, mais surtout empêche leur interprétation par le navigateur, et ce quel que soit le langage informatique utilisé.

Pour faire une insertion d’un extrait de forum, on utilise l’expression "quote". Ce qui donne :

A bla bla A bla bla

NOTA : L’expression "cadre" ne semble pas fonctionner parfaitement bien... ? ! ? Préférez l’expression "code"... normalement utilisée pour transmettre des extraits de code informatique.

Centrer dans la page
Pour centrer quoi que ce soit dans une page on utilise les balises "center".
<center>Pour centrer quoi que ce soit dans une page on utilise les balises "center".</center>

Il existe des dizaines de balises HTML qui peuvent être utiles...

L’insertion de photos, documents et vignettes

Outre le logo attaché à l’article, vous pouvez poser des photos, des documents ou des vignettes tout au long du texte, à droite, à gauche ou au centre. Voir Intégration de photos, vignettes ou documents.

En résumé

Ce qu’il convient de retenir dans un premier temps...

- Avec 1, 2 ou 3 accolades (ouvrantes et fermantes), vous écrivez en italique, en gras ou un inter-titre...
- Avec un tiret suivi d’un espace, en début de ligne et répéter autant de fois que nécéssaire, vous créez une liste à puce
- Avec un tiret suivi de x étoiles (le multiplicateur du bloc numérique de votre clavier) et d’un espace, vous créez un liste à puce avec des retraits (x étoiles = x retraits)
- Avec un tiret suivi d’un dièse et d’un espace, vous créez une liste numérotée.
- Avec une flèche (un tiret suivi d’un chevron), précédée de ce qui apparaîtra comme lien à l’écran et suivi de l’adresse, le tout compris entre deux crochets, vous créez un lien.

  • Ce lien peut ouvrir une page extérieure au site, on utilise alors une adresse de type "http://www..."
  • Il peut ouvrir une rubrique, un article, etc, à l’intérieur du site : adresse du type "art21"
  • ouvrir un article à un endroit, si on y a déjà posé une ancre nommée : adresse du type "art20#(ancre nommée)".
Post Scriptum :

Bon... C’est une grosse page... Mais c’est beaucoup plus long sur l’aide...

N’hésitez pas à faire un essai dans le bac à sable !

[1] C’est trop fastoche !

Images jointes à cet article :
  • Titre : Une vignette à cliquer...
  • Taille : 800 par 603
  • Poids : 50.6 ko
  • Format : JPG
Articles de cette rubrique