Une page avec un fond jaune clair, écrite avec BlueGriffon
En regardant le code source de cette page, on peut remarquer qu'il
est mieux formaté que celui généré par SeaMonkey.
En regardant le panneau de droite, on trouve beaucoup d'option pour
modifier le style CSS de la page, ou de balises.
Le style n'est pas mis directement dans la balise, mais une "id" est
ajouté à la balise, puis un style lui est associé en début de
fichier.
La mise en forme du code HTML est détruite lors de l'édition WYSIWYG
avec BlueGriffon, on ne peut donc pas passer du code HTML à la
visualisation WYSIWYG, sans accepter que le code n'ai pas l'allure
que l'on désire.
Voici juste un mot
qui est différent
du reste de la phrase.
Pour changer la couleur d'un mot ou son fond ou une autre
caractéristique :
1) Sélectionner le mot.
2) Format > span
3) Dans le panneau de droite, indiquer "Appliquer les styles à :"
"cet élément, via ses styles CSS embarqués.
4) Définir le style CSS dans le panneau de droite.
J'essaie d'avoir un
paragraphe ayant un fond de couleur différente.
Voici un autre
essai, avec un fond différent et une couleur de texte différente.
Je désire maintenant sélectionner
uniquement un mot et changer sa taille et sa couleur.
Une fois un mot ayant un style particulier, on peut changer d'autres
caractéristiques avec le panneau de styles à droite.
Si on désire mettre tout une phrase dans un <div>, voici
comment faire :
1) Insertion > Élément HTML5 > div
2) Taper le texte désirer
3) Le formater avec le panneau de droite de Style CSS.
BlueGriffon est bien, mais c'est TRÈS
TRÈS dommage qu'il détruit la mise en forme du code HTML.
Pour moi, c'est inacceptable, donc
BlueGriffon n'est que anecdotique et sert à l'apprentissage du
codage en HTML.
Dans Outils > Préférences > Sources, on peut indiquer de
limiter la largeur du texte source à 70 caractères et insérer
automatiquement un retour de ligne si on dépasse cette limite.
Malheureusement, cela ne fonctionne pas.
BlueGriffon n'indique pas la position du curseur, dans quel colonne
il se trouve. C'est une autre limitation.
J'ai inséré une image à gauche. "Alignement vert..: " = "middle",
pour que le texte soit au milieu de l'image.
Après un retour de ligne, on se trouve sous l'image.
Un texte dans un span
avec un retour de ligne. "Affichage :" = "Bloc dans un flot de
texte".
Après un autre retour de ligne.
Un texte, avec "Alignement vert
..:." = "top"
"Affichage :" = "Bloc dans un flot de texte"
Voici encore du texte sous
les images.
Pour obtenir cette balise <div>, j'ai sélectionné le texte,
puis cliqué sur "Corps de texte" en haut à gauche, qui ouvre un
menu.
En sélectionnant "Conteneur générique (div)", on obtient cette
balise très utile.
On peut ensuite lui donner des styles, tels que couleurs, taille,
centrage de texte etc.
Encore du texte, modifié avec les boutons ! et !! de la
colonne de gauche.
Suite, essai d'utiliser MathML :
Pour avoir l'image
à gauche de
l'onglet correspondant à cette page, j'ai inséré le code suivant
dans l'en-tête du code source :
<link rel="shortcut icon" href="images/faviconOC.png"
type="image/icon"> <!-- pour l'icone dans l'adresse-->
Plan du Site :
home
bluegriffon
![arrow](../images/arrow_right.gif)
bluegriffon030_page_fond_jaune_clair.html
Page mise à jour le 24 février 2020 par Bernard Gisin.