⇐ ACCUEIL ⇐ Partie "Contenu"

En mauve sur l'image

La partie "Contenu" est importante, celle où vous travaillerez le plus, après avoir réalisé le design général de votre blog et en particulier celui de cette partie, à voir avant cet article, rajouter des attributs à la règle #contenu.

Si vous avez parcouru DizTest selon vos besoins pour modifier les différentes parties qui constituent une page WEB, vous avez certainement connaissance maintenant des divers attributs à utiliser pour améliorer la présentation, c'est à dire le style.

L'un des gros avantages du langage CSS, est qu'il est toujours possible à chaque niveau de modifier partiellement le style prévu dans le fichier global. Le style le plus proche du texte sera celui pris en compte par le navigateur, ce qu'il faut connaître, c'est où et comment placer les attributs. 

Un exemple bien simple dans le composeur de Blog4ever, déjà, peut-être sans le savoir, vous mettez du style à certains mots, ou phrases, ou paragraphes, en les sélectionnant et en cliquant sur l'un des boutons de la barre d'outils.

C'est exactement ce que je viens de réaliser dans le paragraphe précédent, placer des attributs directement sur le texte et en mode HTML voilà le résultat.
Oui... je sais... j'ai un peu triché, la police de caractères "Comic sans MS" n'est pas dans la liste. Pour l'exemple je l'ai modifiée après en mode HTML, en remplaçant celle que j'avais sélectionnée dans la liste déroulante.

Code de ce paragraphe avec du texte formaté directement:

Il est évident que si vous étiez obligés d'écrire tout ce code, vous auriez eu des difficultés pour le réaliser, j'ai fait volontairement beaucoup de modifications, en réalité souvent les modifications directes sont moins nombreuses. Ceci prouve qu'il y a beaucoup de possibilités, simples et rapides, en utilisant le composeur, mais dans les articles très longs ça devient un peu pénible dans les cas de répétition du même formatage.

L'utilisation du composeur est comme un traitement de texte, vous avez un style "basique" qui est créé dans le DizPerso, partie "Contenu" ou en CSS "#contenu", pour l'ensemble de vos articles comme dans WORD le modèle normal.dot qui contient un style de base, puis après vous pouvez appliquer différents formats à votre texte.

La manière la plus simple de saisir votre article est de taper votre texte sans penser au format, "une saisie au kilomètre", les seules actions à faire en cours de frappe, sont :

1. les retours à la ligne dans le même paragraphe, avec la pression simultanée des touches maj+enter
2. création d'un nouveau paragraphe, en pressant la touche enter
3. éventuellement pour aérer le texte ou faire une coupure plus importante sur un changement de sujet, une seconde pression sur la touche enter, cette action peut se faire plus tard.

Je sais qu'il y a une différence entre ce que vous visualisez dans le composeur et l'affichage de l'article dans votre navigateur, il faut donc en tenir compte, à chacun de voir la nécessité d'une pression supplémentaire de la touche enter pour une meilleure présentation du texte.

Quand votre article est complètement saisi sans format direct, vous relisez votre texte en le formatant à l'aide de la barre d'outils, je pense que cette solution vous apportera un certain confort pour rectifier la présentation de vos articles à votre convenance.

Cependant une recommandation, si un format ne vous convient pas, immédiatement après, servez-vous de la petite flèche Undo (annuler), puis recommencez le formatage, c'est préférable pour le composeur.

Un autre conseil, après la saisie de votre article avant le formatage, clic droit sélectionner tout, copier [CTRL]+c et coller [CTRL]+v dans le bloc-notes, si le résultat après formatage ne vous convient pas vous pourrez toujours repartir au texte brut.

Ce sont des habitudes à prendre dans tous vos travaux informatiques pour éviter des désagréments et des pertes de temps inutiles, toujours sauvegarder son travail, si possible sur un support extérieur à votre disque dur, une clé USB convient parfaitement.

Je m'éloigne du DizPerso, en effet nous sommes à l'opposé, les 2 extrêmes, et cela suffit pour élaborer une belle page facile à lire avec des nuances de couleurs, des formats de caractères différents, des mises en évidence de certaines portions de texte.

Pour aller plus loin, il faut avoir la volonté d'apprendre quelques rudiments du langage HTML, car il n'est pas possible d'ajouter de règles au CSS du DizPerso, comme dans les modèles graphiques, il faut donc créer des mini-feuilles de style ou insérer du code CSS dans le HTML de vos pages. Il ne faut pas craindre de faire ce pas, le CSS est simple vous avez pu le constater et le HTML à connaître représente que quelques balises.

Selon la version de votre blog les possibilités seront différentes, l'accès aux bordures dans les versions Silver et Gold, permet de placer du style pour l'ensemble du blog, en version gratuite il faudra placer ce style dans chaque page, donc possible, mais fastidieux.

Bien que nous venons de voir avec le composeur, la simplicité du formatage, voici un aperçu de l'insertion, du style dans les balises HTML. Je reviendrai par la suite sur cette façon et je vous en donnerai les avantages.

Code du même paragraphe en exemple plus haut, avec le style inséré dans des balises HTML :

Un <span style="font-weight: bold; font-size:14pt;">exemple</span>
bien simple dans le composeur de Blog4ever, déjà, 
<span style="font-style: italic; color: #993300;">peut-être sans le savoir</span>, vous mettez du style à
certains <span style="font-weight: bold;">mots</span>,
ou <span style="font-weight: bold;">phrases</span>,
ou <span style="font-weight: bold;"> paragraphes</span>,
<span style="background-color: #ffcc33; font-family: Comic sans MS;">
en les sélectionnant et en cliquant sur l'un des boutons de la barre d'outils</span>.

Voilà les premiers pas effectués dans la gestion du style de vos articles, il y a bien sûr d'autres façons de rédiger vos articles, avec des logiciels extérieurs à Blog4ever, puis de coller les textes ou le code HTML, mais actuellement ce n'est pas mon but dans DizTest.

Suite... 
Insertion du style dans les balises HTML - Formatage du texte [lien]