Emile Zola
Lycée Polyvalent
Aix-en-Provence
 

Site Internet : Les raccourcis SPIP (1) (Mise en forme et charte graphique)

(source : collège Arc de Meyran, Aix-en-Provence)

dimanche 19 décembre 2010, par la rédaction

Pour uniformiser la mise en page des articles et maintenir la cohérence de la présentation au sein du site du lycée, le choix a été fait de ne pas intégrer d’éditeur WYSIWYG ("What you see is what you get" : vous voyez le résultat au moment où vous écrivez, comme dans un traitement de texte) dans les outils de rédaction.

La mise en forme est ainsi entièrement paramétrée dans la feuille de style CSS attachée à la partie publique du site, ce qui permettra, si une modification de la charte graphique devait avoir lieu, de transformer d’un coup l’ensemble de l’affichage, sans devoir reprendre un par un les articles : un article rédigé avec un éditeur WYSIWYG est entièrement transformé en HTML qui impose ses propres styles et interdit de conserver une cohérence de mise en forme.

Ce choix, que certains peuvent regretter, oblige les rédacteurs à utiliser les « raccourcis » proposés par SPIP. Malgré tout, une barre typographique enrichie a été installée pour faciliter l’utilisation de ces raccourcis. Il suffit, dans la majeure partie des cas, de sélectionner un passage, et de cliquer sur le bouton correspondant dans cette barre d’outils.

La barre est enrichie de plusieurs barres thématiques pour :

  • La gestion des liens hypertextes avec gestion des bulles
  • La gestion des tableaux
  • Une fonction chercher/remplacer dans le texte de l’article
  • L’insertion des caractères spéciaux
  • Changer la casse
  • Calculer les statistiques du texte (mots, signes, caractères)
GIF - 3.7 ko
barre typographique

(Certains boutons activent des boutons supplémentaires. C’est le cas pour le choix du niveau des sous-titres, du paragraphe encadré et de la mise en forme "poésie".)

Cette barre propose aussi un bouton de prévisualisation directe (le bouton "œil"). Attention, cet affichage - qui apparaît sous le code SPIP - correspond à une mise en forme "standard" et ne tient pas compte de la mise en forme CSS du squelette public du SPIP.

Cette barre permet également de lancer un navigateur de documents (le bouton "arbre" qui ouvre la "Galerie"), grâce auquel il est possible de visualiser les documents ou les images déjà intégrés dans le SPIP pour les intégrer dans un nouvel article.

Vous trouverez ci-dessous les codes des raccourcis utilisables et leur rendu dans le site.

- Mise en forme des titres, des paragraphes et des caractères
- Puces et numéros
- Tableaux
- Mises en page particulières

1. Mise en forme des titres, des paragraphes et des caractères :

- Titres et intertitres

Intertitre de niveau 1

{{{Intertitre de niveau 1}}}

Intertitre de niveau 2

{{{** Intertitre de niveau 2}}}

Intertitre de niveau 3

{{{***Intertitre de niveau 3}}}


- Paragraphes (Un paragraphe se signale simplement par l’ajout d’une ligne) :

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse

molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


- Mise en page : aligné à gauche, centré et aligné à droite

aligné à gauche (mise en page standard)

centré [|centré|]


aligné à droite [/aligné à droite/]

- Gras, italique, mise en évidence, mise en exposant :

Passage en italique {texte en italique}

Passage en gras {{en gras}}

Passage mis en évidence [*mis en évidence*]

Passage mis en exposant <sup>mis en exposant</sup>.

- Caractères spéciaux :

- ~ (espace insécable ou espace dur, qui correspond au &nbsp; du HTML) placé entre deux mots remplace l’espace en ayant l’avantage d’être insécable, c’est-à-dire, qu’il empêchera les deux mots d’être séparés par un retour à la ligne malvenu. S’utilise en particulier entre le prénom et le nom propre.
- --> : —> (flèche vers la droite)
- <-- : <— (flèche vers la gauche)
- <--> : <—> (flèche vers la gauche et vers droite)
- -- : — (tiret cadratin) à utiliser pour les incises dans un texte
- ... : ... (3 petits points) points de suspension
- _ : "tiret bas" en début de ligne (et suivi d’une espace), permet un retour forcé à la ligne…

2. Puces et numéros :

- Listes à points

- item 1
- item 2
- item 3

  • item A
    • item A.1
    • item A.2
      • item A.2.1

code :

- item 1
- item 2
- item 3

-* item A
-** item A.1
-** item A.2
-*** item A.2.1

- Listes numérotées

  1. item 1
  2. item 2
    1. item 2.1
    2. item 2.2
  3. item 3

code :

-# item 1
-# item 2
-## item 2.1
-## item 2.2
-# item 3

3. Tableaux :

- Tableaux simples

titre
entete entete entete
valeur valeur valeur
valeur valeur valeur

code :

|| titre | resumé ||
| {{entete}} | {{entete}} | {{entete}} |
| valeur | valeur | valeur |
| valeur | valeur | valeur |

- Tableaux à cellules fusionnées

titre
entete entete entete
valeur cellule fusionnée avec la suivante
valeur cellule fusionnée avec celle du dessous valeur
valeur valeur

code :

|| titre | resumé ||
| {{entete}} | {{entete}} | {{entete}} |
| valeur | cellule fusionnée avec la suivante |<|
| valeur | cellule fusionnée avec celle du dessous | valeur |
| valeur |^| valeur |

4. Mises en page particulières :

- Paragraphe encadré (utilisé ici pour mettre un passage en relief avec un signal "Attention !") :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

code :

[(Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
_ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.)]

- Paragraphe dans une zone de texte déroulante :

code :

<cadre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. [...]  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</cadre>

- Mise en forme "citation" (avec une barre verticale à gauche) :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, [...]
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent

code :

<quote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, [...]
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent </quote>

- Mise en forme "poésie" (le retour à la ligne est pris en compte) :

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, ...
 
...
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent

code :

<poesie>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, ...

...
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent
</poesie>

- Code HTML, PHP, langages de scripts…

Élément de code dans une phrase

Paragraphe entier en code :

<html>
   <head>
        <title>Titre</title>
   </head>
   <body>
...
</html>

code :

GIF - 1.2 ko
 
Lycée Polyvalent Emile Zola – Av Arc de Meyran BP 60010 - 13181 Aix-en-Provence – Responsable de publication : Mme Portigliatti, chef d'établissement
Dernière mise à jour : lundi 19 octobre 2020 – Tous droits réservés © 2008-2020, Académie d'Aix-Marseille