Vade-mecum des «raccourcis typographique» dans SPIP

Transcription

1 Vade-mecum des «raccourcis typographique» dans SPIP Fonctionnalités Méthodes Commentaires Intertitre {{{le titre}}} Le texte entre triples accolades est affiché comme un titre. Changement de Cliquer deux fois sur «entrée» paragraphe Sauter plusieurs Cliquer deux fois sur «entrée» Faire cela plusieurs fois pour sauter plus de lignes. lignes Cliquer encore deux fois sur «entrée» Retour à la ligne _ texte Pour générer un retour à la ligne sans passer à un nouveau paragraphe, il faut commencer une ligne par touche «8» suivi d'un espace. Forcer un retrait à gauche du paragraphe Premier paragraphe _ <blockquote>deuxième paragraphe</blockquote> Le texte affiché sur le site public sera décalé vers la gauche : Premier paragraphe Deuxième paragraphe Justifier le texte Le paragraphe qui suit cette balise sera justifié. Recommencer l opération pour chaque paragraphe. Ne fonctionne pas pour les listes. Justifier le texte à Le paragraphe qui suit cette balise sera à la droite de la page Internet. droite Justifier le texte à gauche Le paragraphe qui suit cette balise sera à la gauche de la page Internet. Caractères gras {{texte en gras}} Le texte entre double accolades apparaitra en gras. Caractères en {texte en italiques} italique Le texte entre simples accolades est affiché en italique. Astuce: pour avoir du texte en gras et en italique, mettre trois accolades en insérant une espace (pour faire 1+2), et en respectant la symétrie. Ex : { {{ texte en gras et en italique }} } Souligner un mot texte Les caractères encadrés seront soulignés. ou groupe de mot Centrer un mot ou <center>texte</center> Les caractères encadrés seront centrés. groupe de mot Texte barré <del>texte barré</del> Les caractères encadrés seront rayés. Exemple : texte barré Liste - premier élément - deuxième élément - etc... Le petit trait sera automatiquement remplacé par un triangle pointe à droite : Liste à puce Liste à puce hiérarchisée -* premier élément -* deuxième élément -* etc -* premier élément -** deuxième élément -*** etc Le petit tiret sera automatiquement remplacé par une puce : La liste à puces peut être hiérarchisée (sur 9 niveaux maximum). Le nombre d'étoiles détermine le niveau. Il ne faut pas abuser de cette fonction car la taille de la police de caractère diminue proportionnellement à l augmentation des niveaux. 1

2 Liste numérotée -# premier élément -# deuxième élément -# etc La liste numérotée est obtenue selon le même principe de hiérarchie, mais les étoiles sont remplacées par un caractère dièse «#». Trait de ---- Entrer une ligne contenant quatre petits tirets (au moins). séparation Lien hypertexte [texte -> URL] Mettre le texte et l'url entre crochets, séparés par une flèche. Le texte devient une zone cliquable, et renverra le lecteur sur la page web indiquée par «URL». Ex : [le site du CNRS-> Lien hypertexte vers un article [texte->n d'article] Pour renvoyer vers un article du site, il suffit de donner le numéro de l'article. Par exemple, en supposant que l'article 12 donne la liste des contacts : [nous contacter->12] Lien vers une rubrique Lien vers une brève Ancre dans une page Retour vers le haut de la page Note de bas de page automatique Note de bas de page numérotée Faire un tableau simple [texte->rubxxx] [texte->brxxx] [texte->#nom de l ancre] [#nom de l ancre<-]texte Où xxx est le numéro de la rubrique. Ex :[voyez notre agenda->rub3] Où xxx est le numéro de la brève. Ex : [Annonce de l'ag->br25] On peut définir des ancres HTML pour construire un lien direct vers un point donné au milieu d une page d un site SPIP. Il suffit d introduire les raccourcis : [texte->#nom de l ancre] crée un lien vers l'ancre «nom de l ancre» ; [#nom de l ancre<-]texte crée l'ancre #nom de l ancre. <a href="#top">texte</a href="#top"> Cliquer sur les caractères encadrés ramènera automatiquement vers le haut de la page du site. On peut également remplacer le texte par une image. Exemple : <a href="#top"><img18907 right></a href="#top"> [[texte de la note]] [[<x>texte de la note]] aaa bbb ccc xxx yyy zzz Le texte entre doubles crochets droits apparaîtra en bas de la page, et sera remplacé par un numéro généré automatiquement. Le texte entre doubles crochets apparaîtra en bas de page, et sera remplacé par le numéro x indiqué entre «< >». Pour faire un tableau simple il suffit de séparer les colonnes par la barre verticale appelée «pipe». Cette méthode autorise uniquement des cellules d'une seule ligne. Pour que le tableau s affiche correctement dans votre article, il est impératif de le faire précéder et suivre d une ligne vide. Pour insérer une ligne vide dans le tableau il suffit simplement de mettre un certain nombre de «pipe» sans texte correspondant au nombre de colonne:. Pour insérer une colonne vide il faut insérer dans toutes les lignes du tableaux des «pipes» correspondant à l endroit où vous souhaitez placer votre colonne. Faire un tableau avec entête de colonnes Tableau avec légende {{entête a}} {{entête b}} {{entête c}} cellule a1 cellule b1 cellule c1 cellule a2 cellule b2 cellule c2 Légende cellule a1 cellule b1 cellule c1 cellule a2 cellule b2 cellule c2 Créer un tableau simple avec une première ligne d entêtes. Mettre en gras le texte des cellules de la 1ère ligne d entêtes. Remarque : Pour centrer les entêtes au milieu des cellules, écrire les balises <center> et </center> de part et d autre de chaque entête. Créer un tableau et le faire précéder d une ligne de légende entre double «pipe». 2

3 Tableau avec fusion de cellule Insérer une image avec légende Insérer une image sans légende Insérer une vignette cliquable Insérer une image dans un tableau Activer un lien hypertexte à partir d une image Mettre le texte en couleur Modifier la police de caractère Changer la taille de la police de caractère cellule a1 cellule b1 fusionnée avec c1 < cellule a2 cellule b2 fusionnée avec b3 c2 cellule a3 ^ cellule c3 <doc1 left> <img1 left> <center> <img1 center> </center> <img1 right> <doc1 left> Titre 1 Titre 2 Titre 3 colonne 1 colonne 2 <imgxxx> [<img1>->url] texte texte texte Insérer le caractère "<" pour fusionner avec la cellule de gauche. Insérer le caractère "^" pour fusionner avec la cellule du dessus. L'image doit avoir été précédemment téléchargée sur le site par la fonction «ajouter une image» dans la colonne de gauche affichée quand on rédige un article. Le système indique sous quel nom l image est disponible et c est ce nom qui sera la légende de l image. Il faut donc enregistrer les images dans vos dossiers avec le nom sous lequel vous souhaitez les voir apparaitre en ligne. Exemple : CNRS Photothèque - JANNIN François (si vous souhaitez que le crédit photo soit la légende de l image). Même principe que pour une image à légende mais il faut remplacer «doc» par «img». Trois commandes sont disponibles, selon qu'on veut voir l'image à gauche, au centre ou à droite. Une fois téléchargée dans SPIP, il n est plus possible de modifier la taille d une image. Pour modifier la taille de votre image sur le site Internet, il faut modifier la taille de l image originale et la télécharger à nouveau dans SPIP. SPIP donnant des indications de taille en pixels, il vaut mieux travailler sur l image originale en pixels également. Pour qu'une image soit réduite à la taille d'une vignette, et soit cliquable pour l'afficher en grande taille, il faut l'intégrer à l'article comme document Elle doit donc avoir été précédemment téléchargée sur le site par la fonction «ajouter un document» dans la colonne de gauche affichée quand on rédige un article. Puis choisir «inclusion de la vignette». Créer un tableau simple et insérer le code image fourni par SPIP après avoir téléchargé l image. Procéder comme pour un lien hypertexte classique, mais remplacer le texte par le nom de l image. C est le «#000AAA» qui définit la couleur du texte. Chaque couleur possède un code spécifique. Les codes couleurs se trouvent sur ce lien : Remarque : Il n est pas possible de modifier la couleur des liens hypertextes. Indiquer entre guillemets le nom de la police de caractère désirée. Attention, on ne peut pas modifier la police de caractère des termes en gras. Fonction déconseillée car le texte ne s affichera pas correctement selon les ordinateurs. Le chiffre entre guillemets indique la taille de la police de caractère. Plus le chiffre est élevé, plus la taille de la police sera grande. Remarque : il n est pas possible de modifier la taille de la police des intertitres. Pour plus d'informations, dans l'espace d'administration de SPIP, cliquer sur [AIDE], puis «łes articles», et enfin «les raccourcis typographiques». 3

4 Remarque concernant les tableaux : Dans SPIP, lorsque vous souhaitez créer un tableau sans bordure, avec des cellules de différentes couleurs, des polices de tailles différentes ou un tableau très complexe c est impossible. Mais vous pouvez alors faire appel à votre traitement de texte et au code HTML. Les différentes étapes : Dans Word, créer votre tableau (si vous voulez insérer des liens hypertextes dans votre tableau final, insérez les également dans Word). Enregistrer ce document en choisissant comme format «Document HTML» (ou «Page Web») Clic droit sur le document que vous venez d enregistrer puis, dans le menu contextuel qui s affiche, choisir «Ouvrir avec...» et choisissez votre navigateur habituel (Internet Explorer, Mozilla Firefox...) Une fois, la page ouverte dans ce navigateur, cliquer sur «Affichage» dans la barre de menus en haut du navigateur puis «Source» si vous utilisez Internet Explorer ou «Code source de la page» si vous utilisez Mozilla Firefox Une page s affiche avec tout le code html de la page web que vous venez de créer. Repérer dans cette page la ligne commençant par la balise <body> et sélectionner avec la souris tout le code, y compris cette balise jusque la ligne se terminant par la balise de fin </body>, y compris cette balise. Clic droit puis «Copier» Dans la zone de texte de l article, clic droit là où vous voulez insérer le tableau, et choisir «Coller» Enregistrer l article. Attention : Il est fortement déconseillé d utiliser cette méthode pour un tableau comprenant des images. En effet SPIP ne reconnait pas le code de l image généré en HTML et il vous faudra insérer manuellement le code image SPIP au bon endroit dans le code HTML Remarque concernant les documents : Lorsque vous insérez un document dans votre rubrique/article, il apparait automatiquement en téléchargement en bas de la page Internet accompagné du logo correspondant à son format (Word, Excel, PowerPoint ). 4

5 Si vous souhaitez que votre document n apparaisse pas ainsi mais comme un lien hypertexte renvoyant vers un site Internet, créez un nouvel article que vous ne publierez pas en ligne. Téléchargez vos documents dans cet article (Si le document ne nécessite pas de modifications de la part de la personne que le télécharge une fois en ligne, il vaut mieux privilégier le format PDF). Copiez le code généré par SPIP et insérez le à l endroit désiré comme vous le feriez pour un lien hypertexte. Exemple : [texte->docxxx] Remarque concernant les images : Dans SPIP le texte se colle automatiquement aux images sur votre page Internet. Pour créer un espace entre le texte et l image, une des solutions est d utiliser un logiciel de traitement d image pour créer une marge blanche à gauche ou à droite de l image selon sa position sur votre page Internet. Avec Gimp : (Gimp est un logiciel libre et gratuit de traitement d'images) Une fois que vous avez défini la taille de l image, ouvrez là avec Gimp. Allez dans «Fichier» et cliquer sur «Nouvelle image». Un tableau s ouvre pour choisir la taille de votre nouvelle image. Les chiffres déjà inscrits correspondent à l image que vous venez d ouvrir. Modifier les chiffres de la largeur en y ajoutant 10 pixels. Cliquez sur «OK». Vous créez un cadre blanc. Retournez sur votre image, faites un clic-droit et copiez là. Allez sur le cadre blanc, faites un clic-droit et allez sur «Coller comme» puis sur «Nouveau calque» L image se met automatiquement sur la gauche du cadre blanc et laisse une bande blanche sur la droite. o o Si vous souhaitez placer votre image à la gauche du texte sur votre page Internet, ne touchez plus à votre image. Si vous souhaitez la placer à la droite du texte, sélectionnez dans le menu boîte à outils à gauche l outil de déplacement et faites glisser votre image sur la droite pour laisser une bande blanche à gauche. Aller dans «Fichier» puis «Enregistrer sous» Nommez votre image. Allez dans «Sélectionner le type de ficher (selon l extension)» et choisissez Image JPEG. Cliquez sur «Enregistrer» puis «Exporter» et encore «Enregistrer» 5

6 Concernant le fonctionnement général de SPIP : Lorsque vous téléchargez vos images, vous devez les créer à l un des formats suivants : o GIF (le fichier GIF peut être un «GIF animé») o JPEG o PNG (déconseillé, car cela ne s affiche pas toujours correctement) SPIP rejette les fichiers-image d une taille supérieure à 256 ko. Lorsque vous créez une sous-rubrique à un article, elle n apparaît pas immédiatement en ligne. Pour la publier, il faut soit publier un article dans cette sous-rubrique, soit y télécharger une image ou un document. A ce moment-là elle sera visible de tous. Pour modifier l ordre d apparition des rubriques, il faut modifier leur titre. Exemple: 01. Titre 1; 02. Titre 2, etc Les chiffres (01., 02.) n apparaitront pas en ligne. Les images (logo) des brèves à la une du site Internet de la Délégation ne doivent pas faire plus de 140 pixels de long. 6