Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon.

Utilisé à ce jour dans 1291 sites
Ceci est le sur-titre de l’article
Charte typo
Ceci est le sous-titre de l’article

Cette page présente un échantillon des enrichissements typographiques possibles sur ce site. Leur habillage est réalisé par le webmestre, en CSS, via des feuilles de style externes. Ce paragraphe constitue donc le descriptif rapide.


par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

Ceci est le chapeau de l’article : texte généralement court, précédant le corps d’un article, et dont le but est d’en encourager la lecture, par exemple, en résumant le propos qui va être développé.

 Paragraphes

Premier paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices.
Ici, retour à la ligne, généré par le raccourci SPIP « _  ». Espace insécable.

Second paragraphe. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.


Troisième paragraphe, précédé d’une ligne horizontale de séparation, générée par le raccourci SPIP « ---- ». Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.

  Un intertitre de niveau un

  Un intertitre de niveau deux

Un intertitre de niveau trois

Voici du texte en italique et du texte en gras.
Voici du texte avec une Couleur 1
Voici du texte avec une Couleur 2

Voici du texte centré avec [|texte|]


Voici un texte supprimé et le texte inséré en correction.
Un sigle, par exemple W3C, est lu lettre par lettre, tandis que SPIP est un acronyme puisqu’il forme un mot qui est lu normalement.

Mise en exposant 2 et mise en indice : H2O.

Et voici une note de bas de page [1].

- Ici, exemple de raccourci SPIP « -  ». Attention, leur succession ne constitue pas une liste ! Pour les listes, voir ci-dessous.

— Un tiret long, généré par le raccourci SPIP « -- », utile pour les dialogues.

  Hyperliens

SPIP distingue les liens internes des liens externes dont URLs directes : http://www.spip.net, et lien généré par le raccourci [->site2] : site 2.
Mieux vaut spécifier la langue de destination, par exemple : Bonne pratique Opquast N°129.
Lien vers une définition du glossaire prédéfini : Wikipédia
Lien vers un document, avec le raccourci [->doc3] : png/arton5.png
Lien vers un auteur, avec le raccourci [->auteur1] : Jean Christophe Villeneuve
Courriel : adresse courriel.net
Une ancre vers les citations : #citations

 Listes

Liste non ordonnée (ul), générée avec le raccourci SPIP « -*  » :

  • Élément de liste non numérotée
  • Élément de liste non numérotée
  • Élément de liste non numérotée
    • Plantes
      • Ficus
      • Olivier
    • Animaux de compagnie
      • Chat
      • Chien

Et une liste numérotée (ol), générée avec le raccourci SPIP « -#  » :

  1. Voici ma main : elle a cinq doigts. En voici deux, en voici trois.
    Le premier, ce gros bonhomme, C’est le pouce qu’il se nomme.
  2. L’index qui montre le chemin, Est le second doigt de la main.
  3. Entre l’index et l’annulaire, Le majeur paraît un grand frère.
  4. L’annulaire porte l’anneau, Avec sa bague, il fait le beau.
  5. Le tout petit auriculaire Marche à côté de l’annulaire.

Regardez mes doigts travailler. Chacun fait son petit métier.

N’oublions pas les listes de définition, générées avec les balises HTML <dl>, <dd>, <dt> :

polatouche (n.m.)
Mammifère rongeur omnivore méconnu d’Eurasie ou d’Amérique du Nord, dit « écureuil volant » car il est capable de planer en ligne droite d’un arbre à l’autre grâce à son patagium (membrane qui réunit ses pattes à son corps). Pelage gris et blanc.
écureuil (n.m.)
Petit rongeur arboricole d’Europe à longue queue très touffue, excellent grimpeur, capable de sauts très étendus

 Ajouts propres à Escal

Une aide


Une remarque importante


Une remarque moyennement importante


Une information

et un texte centré

Notes :

[1Une note de bas de page est, habituellement, signalée par un numéro placé à l’intérieur du texte, numéro repris en bas de page et proposant un complément d’information. Cette fonctionnalité est automatisée dans SPIP.

Téléchargements Fichier à télécharger :
  • the-time.mp3
  • 1.6 Mo / MP3
Forum
Répondre à cet article
Charte typo
Elisabeth - le 30 mai 2016

Bonjour,

Sur mon site, je n’ai pas la jolie mise en page que vous proposez, par ex les titres ne sont pas précédés du petit triangle, pourtant j’ai une installation standard. Du coup, la présentation est assez fade (cf photo). Est-ce à moi de mettre une css en place ? Dans ce cas, pouvez-vous m’envoyer la votre en modèle ?
A noter que sous l’éditeur j’ai bien les fonctions escal qui sont proposées, mais l’ampoule ne s’affiche pas, le bouton est tout blanc. J’ai testé aide, ça fonctionne.
Enfin, dernière question, je voudrais enlever l’indentation de début de paragraphe, que faut-il changer dans la css ?
Merci d’avance pour votre patience et pour votre aide

Charte typo
dane - le 30 mai 2016

Hello

Pour les titres avec le petit triangle, c’est l’utilisation de la lame "Sommaire automatique" du couteau suisse qui les génères devant le intertitres.

Pour l’icône de l’ampoule c’est bizarre. Essaye de vider le dossier /cache-vignettes qui est dans le dossier /local puis de vider le cache de spip via l’interface privé.

Pour enlever l’indentation du début de paragraphe, tout est expliqué dans cet article.

Raccourcis pour encadrements en couleurs
Jaseur Boreal - le 18 décembre 2014

Bonjour Jean Christophe,

Je suis curieux d’en apprendre tous les jours ...

Avec quelle formule et caractères sont obtenus les raccourcis permettant l’encadrement de textes sur fonds de couleurs comme ci-dessus et dessous en image jointe ?

Merci

Raccourcis pour encadrements en couleurs
Jean Christophe Villeneuve - le 20 décembre 2014

Hello

c’est mon petit cadeau de Noël !
Dans la barre d’outils d’édition d’un article, Escal propose 4 icônes générant un raccourci. Ces raccourcis sont ensuite transformé en class avec un habillage css défini dans general.css que l’on peut surcharger dans perso.css comme d’habitude. Les class en question sont .aide, .important, .avertissement et .info

Si tu veux en savoir plus, demande.

Raccourcis pour encadrements en couleurs
Charles De Clercq - le 1er janvier 2015

Hello Jean-Christophe,
Tout d’abord heureuse année 2015.

Ensuite, je ne trouve pas ces icônes.
A moins que je cherche mal, serait-ce dû au fait que j’utilise le plugin crayons ?
Charles

Raccourcis pour encadrements en couleurs
Jean Christophe Villeneuve - le 1er janvier 2015

Hello

Bonne année 2015 à toi aussi.

Tu ne vois pas le petite ampoule au bout de la barre d’outils ? (Je viens de rajouter une copie d’écran dans cet article) Tu as bien mis à jour Escal ? Tu as bien vidé les caches ?

Raccourcis pour encadrements en couleurs
Charles De Clercq - le 5 janvier 2015

Je viens de trouver (au double sens) : c’était caché par les onglets éditer et voir !

Raccourcis pour encadrements en couleurs
Jean Christophe Villeneuve - le 6 janvier 2015

Ah oui, quand on a plein de lames du couteau suisse activées, tout ne rentre pas. Mais tu peux agrandir un peu la fenêtre d’édition en cliquant sur ton nom ; en haut à gauche de l’espace privé, puis en cliquant sur "Mes préférences" et en cochant "grand écran".

Raccourcis pour encadrements en couleurs
spipfactory - le 19 janvier 2015

J’aime les cadeaux de noël, mais j’aime surtout partager alors il est vrai que des fois un merci, un article, un tuto ; ça fait toujours plaisir.

Alors oui je dit bravo...

Dans la même rubrique



Plan du site Contact Mentions légales Espace rédacteurs squelette

RSS Valid XHTML 1.0 Strict

2009-2017 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.86.37