Accueil Tutoriels webmasters Du bon usage de l'éditeur visuel
Du bon usage de l'éditeur visuel
Niveau :
tout public
- Catégorie : Gestion de contenu - Publié par benoitgense le 29/08/2008
Comment faire un mise en page correcte avec les outils fournis par l'éditeur visuel de vos rubriques ?
C'est ce que nous allons tenter de faire en respectant un minimum de règles simples ; cela vous épargnera quelques heures d'énervement devant votre écran.
1Quelques règles élémentaires simples
On ne le dira jamais assez, mais une seule police de caractère pour les contenus rédigés est nécessaire et suffisante.
Pour tenter de garder l'internaute sur vos pages, il faut vous tenir à cette première règle importante, la sobriété. Un site avec des polices différentes dans des couleurs différentes "pour faire joli", n'est justement pas joli et l'internaute se lasse très vite des fantaisies.
Le maître mot donc est la sobriété, une police de caractères unique dans une couleur unique. Il est important également de souligner l'importance du contraste des caractères sur la couleur de fond de la page en respectant le contraste négatif(police sombre sur fond clair). En effet, on comprend aisément qu'une police bleue sur fond mauve est très vite fatiguante à lire alors que le noir sur fond blanc est très lisible sans fatigue.
On peut toutefois utiliser une couleur différente pour les titres ou les liens de façon à les mettre en valeur, mais aussi aider le lecteur à structurer visuellement votre page.
En résumé pour cette étape :
- Une même police de caractères pour le contenu rédigé
- Une même couleur de police
- caractères sombres sur fond clair.
liens :
contraste négatif, éléments de réponse apportés par Sébastien Billard :
http://s.billard.free.fr/referencement/index.php?2005/07/03/103-contraste-et-lisibilite
N.B. : notez au passage les couleurs et la police de caractère employée, le choix est sobre, les couleurs sont harmonisées avec le design du site ; la lecture est plutôt agréable ne trouvez-vous pas ?
2Utilisation de base de l'éditeur visuel
Lorsque vous saisissez du texte dans l'éditeur visuel, celui-ci créé automatiquement un paragraphe. Le retour à la ligne est automatique ; tant que vous n'appuyez pas sur la touche Entrée du clavier, le paragraphe se poursuit.
Dès l'instant que vous appuyez sur la touche Entrée, l'éditeur visuel comprend que vous désirez fermer le paragraphe et en commencer un autre. Si vous désirez passer à la ligne dans un même paragraphe, utilisez la combinaison de touche Ctrl+Entrée afin de changer de ligne sans changer de paragraphe.
En résumé pour cette étape :
- Ctrl+Entrée pour changer de ligne
- Entrée pour changer de paragraphe
3Mettre en forme le contenu
Il est important dans la rédaction de votre contenu (que vous tapiez le texte ou que vous fassiez des copier-coller) de toujours vous débarrasser de toute mise en forme possible. Bien sûr si votre rubrique est déjà créée et mise en forme et que vous voulez apporter des modifications, ne refaites pas tout, travaillez uniquement sur la portion voulue sans toucher au reste.
Je vous renvoie à la FAQ d'e-monsite pour savoir comment se débarrasser d'une mise en forme :
Supprimer une mise en forme
- Aligner un texte ou une partie :
Sélectionnez la partie du contenu à aligner et cliquez sur un des outils d'alignement proposés (aligner à gauche, au centre, à droite, justifier)
Par expérience, choisissez l'alignement de votre contenu une fois pour toutes dans une rubrique, il est fatiguant de voir des paragraphes alignés différemment dans une même page.
Pour une même page, préférez utiliser l'alignement à gauche ou le justifié, vous gagnerez en lisibilité. N'utilisez l'alignement au centre qu'exceptionnelement pour mettre en valeur, mais de grâce pas pour tout un paragraphe ou pire pour toute une page, c'est illisible.
- Décaler un texte ou une partie :
Sélectionnez la partie du contenu à décaler et cliquez sur l'outil de décalage vers la droite (quatrième bouton sur la deuxième ligne), il vous permettra de faire un retrait du texte par rapport au bord gauche de la rubrique (indentation). Vous pouvez l'utiliser pour mettre en avant une partie du contenu ; faites-le de préférence sur un paragraphe court sinon le retrait perd tout son sens.
En résumé sur cette étape :
- Alignez à gauche ou justifiez tout le contenu de la rubrique mais ne centrez pas toute la page !
- Décalez un paragraphe avec l'outil d'indentation pour le mettre en valeur
4Editer une image
Je ne décrirais pas comment faire, la FAQ y répond très bien : Comment ajouter une image dans une rubrique, non, simplement je veux vous montrer que l'éditeur visuel propose un outil fort utile à la mise en forme d'une image au milieu d'un texte.
Après avoir inséré votre image avec la méthode décrite dans la FAQ, cliquez sur l'image nouvellement affichée afin de la sélectionner ; cliquez ensuite sur l'outil d'édition d'image.
Une fenêtre d'édition s'affiche alors (voir illustration), elle permet d'ajuster au mieux votre image dans un texte afin de mieux la mettre en valeur.
- Vous pourrez contraindre les dimensions de celle-ci (avec modération) , indiquez la hauteur maximale comme sur l'illustration à ne pas dépasser par exemple et l'image ne sera pas déformée grâce à l'option "Conserver les proportions".
- Vous pourrez également mettre de l'espace autour afin de la détacher du contenu et donc la mettre en valeur, indiquez une valeur relativement faible, sinon ça perd de son intêret...
- Indiquez une bordure si besoin, le chiffre à indiquer représente l'épaisseur de celle-ci, donc si vous souhaitez souligner l'image, évitez une bordure de 15 pixels... Vous ne pouvez pas choisir la couleur de la bordure dans cette fenêtre, c'est du noir par défaut, mais avec un peu d'astuce on parvient facilement à la changer.
Cliquez sur le bouton Mettre à jour pour prendre en compte les modifications.
En résumé pour cette étape :
- Forcer les dimensions d'une image (utiliser avec beaucoup de modération)
- Mettre une bordure
- Mettre une marge autour de l'image
5Ne vous arrachez pas les cheveux !
La grande insatisfaction des membres est de voir leur mise en page au propre dans l'éditeur visuel mais après validation la rubrique affichée dans le site est totalement déformée, tout est à refaire !
Pourquoi cela ?
Simplement parce que la largeur de l'éditeur visuel ne reflète pas à la largeur réelle du contenu du site.
Quelles solutions ?
il existe un moyen relativement simple de palier cela, il s'agit de placer tout le contenu de la rubrique dans un conteneur (jusque là tout est normal) ajusté à la largeur réelle de la rubrique, le contenu ainsi encapsulé il sera plus facile de le mettre en page puisqu'il est contraint à la largeur de la rubrique.
Deux techniques pour trouver la largeur de l'espace dédié aux rubriques dans le site :
- Le calcul savant, il faut déduire de la largeur totale du site la somme des largeurs des colonnes (menus), des marges et des bordures.
- Le pifomètre, essayez au hasard des dimensions jusqu'à trouver la bonne.
A vous de voir, je ne rentrerais pas dans un exemple de calcul savant, ce serait trop long, mais la méthode est relativement simple.
Quel conteneur utiliser ?
Utiliser un tableau serait trop complexe à gérer, mais il existe un autre conteneur très simple à mettre en place ; nous allons avoir recours au HTML en utilisant la balise DIV.
il s'agit d'un conteneur auquel nous allons définir une largeur fixe, le contenu y sera emprisonné.
Comment faire ?
Il faut passer l'éditeur visuel en mode HTML, cliquez sur l'outil idoine de la barre d'outils, une fenêtre s'affiche présentant tout votre contenu transformé en code html ; ne soyez pas effrayés, la manipulation à faire est simple.
Il faut encapsuler toute la page avec la balise DIV, placez le curseur au début de la première ligne et inscrivez ceci :
<div style="width:550px;">, placez ensuite le curseur tout en bas de la page à la fin de la dernière ligne et fermez le conteneur en inscrivant :
</div>
Remplacez la valeur 550 par la valeur exacte de la largeur du contenu ou faites des essais en procédant par tatonnements.
Y a t-il des inconvénients ?
Oui, il y en a un majeur, quand vous aurez trouvé la bonne valeur, il faudra l'indiquez pour toutes les rubriques du site. Tout ira bien jusqu'au jour où vous changerez l'aspect du site, si la largeur des menus ou du site change, il faudra reprendre une à une chaque rubrique et remplacer la largeur du conteneur....
C'est un inconvénient mais cette solution proposée est meilleure que rien du tout.
En résumé pour cette étape :
- Placer un conteneur div dans le contenu de chaque rubrique et en définir une largeur fixe.
Je vous invite a suivre ces quelques conseils qui j'en suis sûr vous aideront à mieux utiliser les outils de mise en page proposés sur e-monsite.
Si vous avez des remarques, des compléments d'information, n'hésitez pas à laisser des commentaires constructifs.
Commentaires
Posté par laelith - le 19/09/2008
C'est cool ce tuto, j'aurai aimé le voir au tout début !
Mais bon, ça rafraichit les idées quand même et le coup de div je connaissais pas.
Merci !
Posté par adlibitum - le 24/09/2008
Le coup du conteneur c'est bien, dommage que la solution soit incomplète? j'ai réglé ce problème il y a longtemps avec le CSS .
<div style="width:550px;">
C'est dommage quand on a le CSS à sa disposition de proposer une instruction comme ca et d'expliquer qu"en cas de modification ultérieur , il faudra se palucher toutes les pages.
Il suffit d'écrire: <div class="Mes-div"> et de definir dans le css:
/* mes blocs ou quelque chose comme çà */
.mes-div
{
width=550px;
}
et là en cas de changement ultérieur , il suffira de changer la cote 550px par la nouvelle et tous les div ainsi définis seront modifiées .
C'est vraiment pas un bon conseil que de proposer un tutoriel qui utilise "style" dans le code.
Posté par adlibitum - le 24/09/2008
Vous allez me répondre , Benoît que ma solution , ne marche pas avec l'éditeur visuel qui ne sait pas lire le code CSS. Alors je vous répondrai qu'en fait dès le début , j'ai abandonné cet éditeur pour l'éditeur HTML.
et que maintenant que j'ai compris l'intérêt du CSS, je ne peux même plus imaginer qu'on puisse faire autrement!, j'ai bani une foi pour toute le "Style" dans le code, par contre je trouve très intéressant de mettre son code CSS personnel entre <STYLE> et</STYLE> pour garder l'intégrité de l'onglet "Formulaire"'
Posté par ompassion18 - le 24/11/2008
BONSOIR JE n'arrive plut metre du text sur ma page d'accueil merci de votre réponce
Posté par jujusmg - le 24/11/2008
je comprend rien
Posté par secretairemedicalemm - le 07/01/2009
comme faire pour rentre dans son sit depuis google, je n'arrive pas ¨
comme faire si je souhaite le rechercher ?
Posté par bullesdigne - le 31/01/2009
Salut a toi
Merci popur ce tuto qui m'ouvre de nombreuses perspectives. Super boulot !
Posté par europaventure - le 01/02/2009
Bonsoir,
Je commence à m'arracher les cheveux !
j'ai tout mis en place sur mon site, et , là je voudrais éditer une nouvelle rubrique avec un formulaire de contact précis, afin de recevoir des annonces directement sur mon E-mail, à partir de la zone membres. Le problème, je n'ai pas trouvé comment créer une rubrique avec un nouveau formulaire de contact, et ensuite comment le placer en rubrique liée à une page de présentation. C'est un peu compliqué mais c'est exactement ce que je voudrais. Si vous avez déjà essayé et réussi, merci de m'éclairer. A bientôt.
Posté par mlg-ecrivain - le 04/02/2009
Des caractères sombres sur fond clair, c'est mieux la plupart du temps ; mais quand on voit des sites avec un fond certes clair, mais de couleur vive (bleu vif, jaune citron...), c'est aussi douloureux pour les yeux ; je pense qu'un fond de couleur assez sombre mais reposante peut passer.
Posté par 040956creange - le 11/02/2009
Bonsoir
je n'arrive plus a modifier ma page d'accueil chaque fois que je clique pour ajouter du texte tout se décale et je ne peux rien faire
je precise que ce n'est que sur ma page d'accueil pour le reste tout est normal
j'ai tout essaye et je ne comprends plus rien merci de m'aider
Posté par sacros - le 13/02/2009
Bonjour,
J'ai bien lu votre tuto. Malheureusement, j'ai fais l'inverse. Mais bon, il me plait comme cela. (Chgt couleurs, format police etc....désolé.)
Le gros inconvénient est que mon texte entier au milieux, ne tient pas bien.
Je suis toujours à remettre quelques paragraphes ou phrases à leur place.
Pourquoi ceci, et comment y remédier. Merci d'avance.
sacros
Ð
Posté par sacros - le 15/02/2009
Bonjour,
Où l'on voit que ce n'est pas facile avec les couleurs.
Mon site est totalement à l'opposé de ce tuto bien net.
Je suis allé voir le site de mlg-ecrivain..Ce que je vais dire n'est pas une critique envers qui que ce soit.
Ces couleurs ne sont pas du tout douloureuses pour les yeux, mais je peux vous dire que personnellement elles ou(elle, la dominante est mauve) me rendent triste, triste à en mourir. 
Comme quoi, chacun voit ses couleurs.
Ce tuto est bien fait, car conventionnel et général.
Merci encore pour cela. (désolé mlg-ecrivain).
Mon problème à l'air réglé avec mon texte central sur ma page d'accueil. Merci.
Sacros
Ð
Posté par lamainetlaplume - le 11/03/2009
Bonjour à vous,
Comment devient-on VIP s'il vous plait? Merci de m'indiquer l'endroit: je ne l'ai pas trouvé. L.M.P
Posté par elfaress - le 14/05/2009
Tout est bon, mais il reste comment configurer le logiciel de transfert de fichiers a partir d'un PC en FTP.
Posté par lespistonsvoyageurs - le 29/06/2009
bonjour, j'aimerais changer l'entête de la page d'accueil, j'ai une faute. Comment faire ? Merci
Posté par ecmcampmarron - le 24/08/2009
Bonjour,
J'aimerais faire un menu horizontal pour tous les liens avec mes différentes pages ou modules de mon site.
Je galère un peu voire bcp même depuis le débutde la construction de mon site ecmdimitil.com .
Pouvez vous me conseiller un tutoriel ou autre pour palier à cette lacune?
Merci d'avance mes amis(es), à l'aide svp
à très bientôt
Jean-Daniel Payet
mail : payetjdaniel@gmail.com
Posté par hfcn02 - le 14/09/2009
Je n'arrive Quelqu'un peut m'aider a corriger cette situation.
plus a ouvrir les categories de mon web a partir de la page d'accueil.
Quelqu'un peut m'aider a resoudre cette situation?
Paul-Jean
Posté par derbi-senda-r - le 25/09/2009
Bonjour a tous,
Je ne trouve pas comment corriger une page sur le forum, cela fait deux fois que j'efface et que je reprend tout c'est un peu long .
Si vous avez la solution je vous en serez gré, merci!
Posté par lafouine67 - le 28/10/2009
Comment supprimer des fichiers, j'ai beau appuyer sur supprimer rien de ne se passe.
Merci de votre aide
Ajouter un commentaire :
Veuillez vous connecter afin de poster un commentaire sur ce tutoriel.
