fin de page

L'avantage le mieux perçu d'un site CMS: la modification du contenu en toute simplicité

 

 

 

L'usage d'un éditeur de texte "WYSIWYG" (What YouSee Is What You Get) permet à tout utilisateur de bureautique "standard" (genre Word de Microsoft") de modifier le contenu (textes, images, flash, PDF...).

 

 

 

 

texte 071020

Editeur WYSIWYG

Voilà quoi cet éditeur ressemble. On y retrouve toute une série de boutons et sélecteurs qui permettent de modifier la présentation de l'article en cours  d'édition.

Aperçu de l'editeur-wysiwyg

 

Formats de texte

Voici donc les différents format proposés en standard par cet éditeur "WYSIWYG".
Le titre de chacun de ces format est donné en "en-tête 3"

 

En-tête 1

Ceci est un texte en "En-tête 1" Ceci est un texte en "En-tête 1" Ceci est un texte en "En-tête 1" gras:Ceci est un texte en "En-tête 1"

rajout de texte

 

En-tête 2

Ceci est un texte en "En-tête 2" Ceci est un texte en "En-tête 2" Ceci est un texte en "En-tête 2" Ceci est un texte en "En-tête 2" gras:Ceci est un texte en "En-tête 2"

En-tête 3

Ceci est un texte en "En-tête 3" Ceci est un texte en "En-tête 3" Ceci est un texte en "En-tête 3" Ceci est un texte en "En-tête 3" gras:Ceci est un texte en "En-tête 3"

En-tête 4

Ceci est un texte en "En-tête 4"  Ceci est un texte en "En-tête 4" Ceci est un texte en "En-tête 4"  Ceci est un texte en "En-tête 4" Ceci est un texte en "En-tête 4"  Ceci est un texte en "En-tête 4" Ceci est un texte en "En-tête 4"  Ceci est un texte en "En-tête 4" gras:Ceci est un texte en "En-tête 4"

En-tête 5

Ceci est un texte en "En-tête 5"  Ceci est un texte en "En-tête 5" Ceci est un texte en "En-tête 5"  Ceci est un texte en "En-tête 5" Ceci est un texte en "En-tête 5"  Ceci est un texte en "En-tête 5" Ceci est un texte en "En-tête 5"  Ceci est un texte en "En-tête 5" gras:Ceci est un texte en "En-tête 5"

En-tête 6

Ceci est un texte en "En-tête 6" Ceci est un texte en "En-tête 6" Ceci est un texte en "En-tête 6" Ceci est un texte en "En-tête 6" Ceci est un texte en "En-tête 6" Ceci est un texte en "En-tête 6" Ceci est un texte en "En-tête 6" Ceci est un texte en "En-tête 6" gras:Ceci est un texte en "En-tête 6"

Normal

Ceci est un texte en "Normal" Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. gras:Integer porta magna eget lectus.

Normal (DIV)

Ceci est un texte en "Normal (DIV)" Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus.

Formaté

Ceci est un texte en "Formaté" Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus.

Adresse

Ceci est un texte en "Adresse" Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus. Un lien dans le format "adresse"

 Utilisation des boutons de modification (sur du texte "normal")

Bouton "B" (bold) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bouton "I" (Italic") Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bouton "U" (Underline) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bouton "rayé" Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bouton X2 (indice) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bouton X2 (Exposant) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Listes ordonnées et non-ordonnées

Ces trois lignes vont être sélectionnées puis on clique sur le bouton "liste numérotée" puis sur le bouton "liste à puces"

ligne 1

ligne 2

Ligne 3

Liste ordonnée ("numérotée")

  1. ligne 1
  2. ligne 2
  3. Ligne 3

Liste non-ordonnée ("à puces")

  • ligne 1
  • ligne 2
  • Ligne 3

Imbrication de listes

Liste ordonnée

  1. ligne 1
    1. ligne 1-1
    2. ligne 1-2
  2. ligne 2: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique.
  3. Ligne 3

Liste non-ordonnée

  • ligne 1
    • ligne 1-1
      • Ligne 1-1-1
      • Ligne 1-1-2
    • ligne 1-2
  • ligne 2: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique.
  • Ligne 3

Alignement des textes

Alignement à gauche

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus.

Alignement centré

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus.

Alignement à droite

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus.

Alignement justifié

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus.

 

 

Couleur de texte

Modifiable avec le bouton "couleur de caractère"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo. Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus.

Couleur de fond

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquam ante sit amet nisl. Aliquam erat volutpat. Nulla facilisi. Sed dui mi, sodales sed, mattis nec, malesuada quis, augue. Nulla facilisi. Praesent ligula. Donec vel ligula. Praesent malesuada. Morbi vel eros a neque euismod tristique. Mauris vel tellus in enim rhoncus luctus. Vivamus leo.

Sed nec nisl eu nibh rutrum imperdiet. Sed vel nisl. Fusce nec libero. Nam arcu. Integer ac dui eu odio vulputate auctor. In sodales velit nec odio. Mauris enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer porta magna eget lectus.

 Les "ancres"

... permet tent de fixer des repères dans la page pour pouvoir y accéder par un lien comme un retour haut de page ou aller à En-tete 1

 


Créé par SiteWebPro & propulsé par Izi-media