Sommaire

  1. Éditeur en mode visuel
    • Mise en forme du texte
    • Liens vers des fichiers locaux (médiathèque)
    • Liens vers des fichiers externes
  2. Éditeur en mode source
    • Mise en forme du texte
    • Formater un tableau complexe
    • Incorporation de médias

Principe de la publication

Lorsque vous créez un nouveau billet (ou une nouvelle page), il est dans l'état "En attente". Lorsque vous l'enregistrez, il n'est pas publié.

Vous avez la possibilité de le prévisualiser avant publication. (Il faut enregistrer avant de prévisualiser.)

Pour utiliser le correcteur d'orthographe de votre navigateur web, il faut passer l'éditeur en mode source et cliquer dans le texte. Les mots non reconnus (non présents dans le dictionnaire de votre navigateur web) apparaissent souligné d'une ondulation rouge. Attention : ne corrigez pas le code html ou les liens hypertextes !

Lorsque votre billet est prêt, changez l'état en "publié" et enregistrez.

Première partie : ce qu'il est possible de faire avec l'éditeur en mode visuel

Certaines des possibilités de l'éditeur ne sont actives par défaut. Pour bénéficier de toutes les possibilités de mise en forme, ouvrez l'extension (plug-in) dcCKEditor et cochez toutes les options.

Mise en forme du texte

Style "Titre1"

Paragraphe (style "Normal"), cadré à gauche par défaut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Paragraphe centré. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Paragraphe cadré à droite. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Paragraphe justifié. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Style "Titre2"

Paragraphe en style Normal avec
passage à la ligne (obtenu par <Màj><Entrée>).

Style "Titre3"

Du texte en style Préformaté.

Style "Titre4"

Du texte en style Adresse.
Style "Titre5"

Un bloc de citation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Style "Titre6"

Ceci est un paragraphe avec des mots en gras, italique, souligné, barré, indice2, exposant2. Texte en couleur, texte sur fond coloré. Ceci est un lien externe qui s'ouvrira dans la présente fenêtre, suivi d'un lien interne vers un billet, ou vers une page, suivi d'un lien transformant le mot en mot-clé : Publication.

Voici une liste à puces :

  • item1
  • item2
  • item3

Voici une liste numérotée :

  1. item1
  2. item2
  3. item3
Tableau centré
cellule d'en-tête cellule d'en-tête
cellule d'en-tête cellule normale
cellule d'en-tête cellule normale, texte sur fond coloré

Liens vers des fichiers téléversés dans la médiathèque

Images, insérées dans le texte

Image locale (recadrée en carré), contenant un lien vers l'image complète,

Une image (miniature) positionnée à gauche du texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Une image (de taille moyenne) centrée. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Une image (petite) positionnée à droite du texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Document

Lien vers un fichier PDF local Schéma de l'écosystème informatique

Audio

Lien vers un fichier audio local Ogg_Vorbis_Audio.ogg

Vidéo

Lien vers un fichier vidéo local WebM_VP8_Video.webm

Lien vers des fichiers externes

Vidéo

Lien vers un fichier partagé sur OwnCloud Ogg_Theora_Video.ogv

Seconde partie : ce que l'on peut faire de plus avec l'éditeur en mode source

Prenez soin de régler le paramètre du format du texte par défaut à "xhtml". (Peut être fait globalement dans "Mes préférences" > "Mes options".)

En mode source vous pouvez directement utiliser du code HTML.

ASTUCE : Affichez la source de la page - dans Firefox, raccourcis <Ctrl><U> - pour voir comment ce qui suit est mise en forme.

Mise en forme du texte

Vous disposez donc de plus de possibilité pour formater le texte : inséré, dans différentes tailles, en Petites Capitales, en code, en citation en ligne, etc. Vous pouvez insérer un lien externe qui s'ouvrira dans une autre fenêtre (ou un autre onglet).

Vous pouvez construire des listes de définition :

item
définition
item2
définition2

Vous pouvez construire des listes imbriquées (voir le sommaire en haut du billet).

Vous pouvez ajouter des ancres, pour permettre de faire des liens à l'intérieur d'une page. Par exemple depuis un sommaire.

Vous pouvez ajouter un texte replié :

Cliquez ici pour en savoir plusTexte non essentiel, caché à la vue pour ne pas géner la lecture.

Vous pouvez ajouter une ligne horizontale :

Tutoriel pour formater un tableau de façon plus élaborée

Si vous avez à réaliser un tableau complexe (avec des cellules fusionnées, des couleurs de fond, etc.), écrire directement le code HTML sera assez complexe... Si vous n'êtes pas très familier du code HTML, il vaut mieux créer le tableau dans un logiciel puis le copier dans l'éditeur de DotClear.

Attention : ne laissez pas de cellule vide (mettez-y au moins un espace ou un tiret).

Solution 1 : vous utilisez un éditeur HTML en mode visuel WYSIWYG (comme par exemple BlueFish)

Il vous suffit de copier le code HTML généré par le logiciel et de le coller dans l'éditeur de DotClear (en mode source).
Si le résultat n'est pas satisfaisant voir au § suivant les corrections à effectuer.

Solution 2 : vous utilisez un logiciel de traitement de texte (comme LibreOffice Writer).

Si le tableau est simple et sans couleurs, copiez-le et collez-le dans l'éditeur de DotClear (en mode visuel). Ensuite basculez en mode source pour effectuer les corrections de mise en forme souhaitées.
Par exemple, définir les espacement et bordures de cellules, la largeur du tableau : <table cellspacing="0" cellpadding="2" border="1" width="100%">

Si le tableau est complexe ou contient de la couleur, enregistrez le document Writer au format "Document HTML" (via le menu "enregistrer sous" - pas via le menu exporter).
Ensuite vous allez devoir effectuer des corrections du code HTML. Pour cela ouvrez le document résultant dans un simple éditeur de texte (comme gedit ou Notepad++).
Dans cet éditeur rechercher et remplacer le code correspondant à la mise en couleur du texte <font color="#ff0000">texte</font> (l'éditeur de DotClear élimine les balises <font>), par :

  • pour du texte : <p style="color:#ff0000">votre texte en rouge</p> ;
  • pour la couleur de fond d'une cellule : <td bgcolor="#00ff00"><p>votre texte sur fond vert</p></td>.
  • Vous pouvez aussi supprimer des éléments inutiles (formatage des cellules : style="...") ou inappropriés (largeur de colonne fixe : <col width="85*"> et autres indications de largeur : width="25%"; alignement du texte : valign="top")

Enfin copiez le code HTML corrigé et collez-le dans l'éditeur de DotClear en mode source.

Exemple : code issu de Writer, avant correction :

rouge

vert

bleu

fond rouge

fond bleu

surlignage vert

Après corrections du code et ajustements de mise en forme :

rouge

vert

bleu

fond rouge

fond bleu

surlignage vert

 

Incorporation de médias

Voici un fichier audio (local) embarqué (balise <audio>) :

Voici un fichier vidéo (local) embarqué (balise <video>) :

Voici un album photo public hébergé chez zaclys.com :

cliquer ici
album de test

Voici une carte OpenStreetMap (balise <iframe> 425 x 350) :


Afficher une carte plus grande

Important : lors de l'insertion d'un bloc <iframe> prenez garde à insérer au moins un caractère - par exemple un espace - juste avant la balise fermante </iframe>, sinon Dotclear supprime le code.

Voici des fichiers vidéos embarqués à l'aide de la balise <iframe> :

depuis une instance PeerTube (Framatube) (h=315) :

depuis Youtube (360 x 360) :

Note : si on inclue directement un lien vers un fichier hébergé ailleurs dans une balise <iframe>, il est automatiquement proposé au téléchargement ou à l'ouverture lors du chargement de la page : peu intéressant.

Tutoriel suivant

L'apparence visuelle des styles est déterminée globalement pour l'ensemble du blog par les feuilles de style en cascades (CSS).

Pour les modifier, voyez cet autre tutoriel (niveau avancé) : personnalisation de la mise en forme CSS.