Cette page est destinée à donner quelques "recettes de cuisine" aux rédacteurs. Elle va s’enrichir au fil de nos expériences communes. Elle est entièrement rédigée sous l’éditeur de SPIP.

Dans cette page :

– La couleur dans les textes
– Les lignes de séparation
– Les images au format .jpg, .gif, .png
– Le diaporama - La galerie de Photos
– Les documents au format .doc, .xls, .pdf
– L’intégration du HTML (Pour des besoins spéciaux ou pour les experts qui voudraient l’employer)

La couleur dans les textes

Cette possibilité est maintenant intégrée à l’éditeur de texte avec un choix de 32 couleurs de texte et 32 couleurs de fond. Pour des raisons d’homogénéité du site il est recommandé de se limiter au couleurs précédemment utilisées soit :
– bleu
– orange foncé
– rouge
– vert

---

Les lignes de séparation

Au-dessus du présent paragraphe, la ligne de séparation obtenue avec le raccourci typographique de SPIP : ---- soit quatre tirets accolés et positionnés en début de ligne dans l’éditeur de SPIP.

Sont à disposition des lignes de séparation centrées de couleur argent, gris, bleu et rouge en 2 épaisseurs (2 et 5 pixels) et 2 largeurs, 30% et 75% de la largeur du conteneur, en utilisant la balise ci-dessous :

<hr class="couleur_épaisseur_largeur" /> dans laquelle "_épaisseur" prend la valeur "moyen" pour une épaisseur de 5 pixels et est inexistant pour obtenir une épaisseur de 2 pixels.

Pour exemple :
- une séparation argent de 5 pixels d’épaisseur sur 30% de la largeur du conteneur :

<hr class="argent_moyen_30" />

---

- une séparation rouge de 2 pixels d’épaisseur sur 75% de la largeur du conteneur suivie d’un raccourci typographique de ligne de séparation de SPIP

<hr class="rouge_75" />

----

---

---

Les images

Rappel (Voir documentation en ligne) :

Les images (fichiers .jpg, .gif ou .png) sont insérées sous la forme :

<imgX|left>, <imgX|center> ou <imgX|right> si elles ne comportent pas de titre ou si vous ne voulez pas faire apparaitre ces derniers si ils existent.

ou sous la forme :

<docX|left>, <docX|center> ou <docX|right> si elles comportent un titre.

Cadrage et entourage des images par du texte

Le logiciel utilise de façon automatique la place disponible à gauche ou à droite de l’image si cette dernière ne prend pas toute la largeur disponible. Cet espace est rempli avec le titre de l’image et éventuellement le texte qui suit l’image dans l’article.

Si vous souhaitez que le titre et le texte viennent sous l’image utilisez la séquence de code appropriée au cadrage souhaité définie ci-dessous.

L’image ci-dessous (422x317) et sa légende sont cadrés au centre à l’aide du raccourci typographique :

<doc640|center>

L’image ci-dessous (320x240) et sa légende sont cadrés à gauche à l’aide d’un séquence de code HTML englobant un raccourci typographique :

<table width="100%"><tr><td> (code HTML)

<doc639|left> (raccourci typographique)

</td></tr></table> (code HTML)

L’image ci-dessous (320x240) et sa légende sont cadrés à droite à l’aide d’une séquence de code HTML englobant un raccourci typographique :

<table width="100%"><tr><td> (code HTML)

<doc641|right> (raccourci typographique)

</td></tr></table> (code HTML)

Mise en page avec des vignettes

La vignette de votre image est crée lorsque celle-ci est mise dans le "portfolio" après téléchargement ("déposer dans le portfolio" par survol du cadre de l’image dans la colonne de gauche) . Les vignettes sont cliquables pour montrer l’image dans sa taille d’origine. Les vignettes ont une largeur unique de 150 pixels pour tout le site.

Le portfolio n’est pas visible sur ce site. Il est remplacé par un diaporama (voir plus bas dans la page).

Pour la présentation qui suit la date est mise en titre des images et vignettes situées sur la gauche. La première image sur la gauche est invisible car c’est une image transparente en format .png (format.gif possible) de 150x80 pixels non versée dans le portfolio. Toujours sur la gauche, la seconde image fait 200x127 pixels et la troisième fait 520x403 pixels, elles sont toutes les deux versées dans le portfolio et apparaissent donc sous forme de vignette. l’image de droite, insérée deux fois, fait 140x104 pixels, n’est pas versée dans le portfolio et à pour titre "La Dordogne la Roche Gageac ". Les balises <br />&nbsp; permettent de séparer correctement les paragraphes. Le nombre des balise est à ajuster en fonction de la hauteur de l’image à échapper. La ligne séparative entre les deux sujets peut être enlevée et être remplacée par <br />&nbsp;.

Séquence dans l’éditeur de texte :

{{{Les activités du groupe}}}

<doc685|left>Visite de chantier d’une portion du 2ème tronçon du tramway de Clermont-Ferrand avec une attention particulière pour la technique de fixation du rail central unique. Des galets en contact avec ce rail commandent l’orientation des roues directionnelles.

<br />&nbsp;

<hr class="argent_30" />

<doc679|left>« Fleury enseigne signaletique » est une entreprise de Clermont-Ferrand spécialisée dans les enseignes lumineuses sur-mesure. Elle utilise de nombreuses techniques allant des plastiques transparents aux tubes de néon, qui sont façonnés suivant les instructions de leur bureau d’étude.

<doc699|right>

<br />&nbsp;

<br />&nbsp;

<br />&nbsp;

<br />&nbsp;

<br />&nbsp;

<hr class="argent_30" />

<doc680|left> La sortie amicale du groupe à Chalinargues (Cantal) avait plusieurs objectifs. Le premier étant de découvrir un pittoresque et très dynamique village cantalien, le second de visiter « La Pinatelle », un écomusée exceptionnel pour cette petite commune et le dernier était plus technique, il concernait une chaudière de chauffage central collectif alimentée automatiquement avec des chutes de bois.

<doc699|right>

<br />&nbsp;

<br />&nbsp;

<br />&nbsp;

<br />&nbsp;

<br />&nbsp;

<br />&nbsp;

Rendu dans la page du site

Les activités du groupe

Visite de chantier d’une portion du 2ème tronçon du tramway de Clermont-Ferrand avec une attention particulière pour la technique de fixation du rail central unique. Des galets en contact avec ce rail commandent l’orientation des roues directionnelles.

 
 

---

« Fleury enseigne signaletique » est une entreprise de Clermont-Ferrand spécialisée dans les enseignes lumineuses sur-mesure. Elle utilise de nombreuses techniques allant des plastiques transparents aux tubes de néon, qui sont façonnés suivant les instructions de leur bureau d’étude.

 

 

 

 

 

---

La sortie amicale du groupe à Chalinargues (Cantal) avait plusieurs objectifs. Le premier étant de découvrir un pittoresque et très dynamique village cantalien, le second de visiter « La Pinatelle », un écomusée exceptionnel pour cette petite commune et le dernier était plus technique, il concernait une chaudière de chauffage central collectif alimentée automatiquement avec des chutes de bois.

 

 

 

 

 

 

En conséquence de l’utilisation du "portfolio" pour créer les vignettes des deuxième et troisième images vont se retrouver dans dans le diaporama ci-dessous alors que les vignettes transparente et paysage de 150 pixels ainsi que les autres images de cet article ne s’y retrouveront pas.

Le diaporama - La galerie de photos

Une fois vos images téléchargées il suffit de mettre dans votre page
un raccourci typographique <diapoXX> permettant d’insérer les images de l’article XX sous forme de galerie/diaporama.

Vous pouvez spécifier le mode par defaut :
– <diapoXX|diapo> (équivalent à <diapoXX>) pour le diaporama
– <diapoXX|pause> pour le diaporama en pause
– <diapoXX|left> pour une galerie avec vignettes à gauche
– <diapoXX|right> pour une galerie avec vignettes à droite
– <diapoXX|center> pour une galerie avec vignettes en haut et grande image

Pour exemple dans cet article qui porte le N° 72 :

<diapo72|center>
<diapo72|center>

Les documents au format .doc, .xls, .pdf

Lors du téléchargement des documents ces derniers sont insérés sous forme dune vignette cliquable qui permet de les télécharger sur l’ordinateur de l’internaute. Pour un document destiné à être uniquement consulté je recommande d’utiliser le format .pdf même si l’original est en Word ou en Excel afin que le document soit ouvrable par l’internaute sans que les logiciels correspondants ne soient installés et quelque soit le logiciel d’exploitation de son PC (Windows, MacOS, Linux...). Pour transformer tout document en fichier . pdf j’utilise avec succès le logiciel gratuit "PDFCreator" (respecter la syntaxe) que vous trouverez à télécharger sans difficulté sur le web. Il installe sur votre PC une imprimante fictive et il vous suffit d’imprimer n’importe quel document en choisissant cette imprimante pour en obtenir une version.pdf. De plus, si vous devez mettre un document Word ou Excel n’oubliez pas de le mettre au préalable dans un ancien format (97 ou 2000 via "enregistrer sous" et le choix d’un des format préconisé) pour élargir les possibilités d’ouverture aux internautes qui ne possèdent pas une version récente de ces logiciels.

Pour exemple, ci-dessous un fichier Word et sa version générée avec PDFCeator et pour faire en sorte que la suite de cet article ne vienne remplir la partie laissée libre à droite des vignettes l’utilisation d’une astuce constituée par l’ajout d’un raccourci typographique d’intertitre rempli d’un espace insécable en code HTML.

<doc651|left>

<doc652|left>

{{{ }}}

 

Pour ceux qui connaissent le langage HTML

Le logiciel SPIP supporte les insertions de code HTML. Il est cependant recommandé de ne pas en abuser pour maintenir l’homogénéité graphique du site. Cela peut être nécessaire pour améliorer la présentation comme cela à été utilisé plus haut pour cadrer les images ou juste au dessus de ce chapitre.