Manuel utilisateur de la ModulEst
Chapitre 1. Introduction
Chapitre 2. L'application
Chapitre 3. Le fichier XML
Chapitre 4. Génération du module au format HTML
Chapitre 5. Ajouter du contenu
5.1. Modifier les pages HTML
5.2. Utiliser les styles prédéfinis
5.2.1. Styles d'éléments de type « bloc »
5.3. Fichiers à part : les QCM
Annexe A DTD module (modxml.dtd)
Annexe B Liste des entités caractères utilisables
Page d'accueil Table des matières Niveau supérieur Page précédente Bas de la page Page suivante

5.2. Utiliser les styles prédéfinis

Cette section est peut-être la plus importante. Lorsque vous rajoutez du contenu dans vos pages, vous êtes totalement libres d'utiliser le code HTML que vous voulez.

Néanmoins, si vous voulez rendre vos modules indépendants de la charte graphique de l'organisme pour lequel vous développez le cours 1, ou si la charte graphique que vous désirez n'existe pas encore, ou mieux, si vous ne voulez pas être prisonnier de votre charte graphique 2, alors vous devez impérativement utiliser les styles prédéfinis.

Mais que veut dire au juste « utiliser les styles prédéfinis » ?

Toutes les pages HTML créées par la ModulEst inclues deux feuilles de styles CSS :

_style.css
pour les mises en formes standards et classiques ;
_syntaxcolors.css
pour la coloration syntaxique de code source.

Ce sont les styles définis dans ces deux feuilles que vous devez utiliser le plus possible...

Les couleurs

Il faut bien évidemment éviter d'utiliser les couleurs explicitement.

Pour remédier à ce problème, un certain nombre de styles pour colorer aussi bien du texte que des fonds de cases de tableaux sont définis.

Vous disposez de 16 styles permettant de colorer le texte :

    couleurA        couleurB        couleurC        couleurD
    couleurE        couleurF        couleurG        couleurH       
    couleurI        couleurJ        couleurK        couleurL
    couleurM        couleurN        couleurO        couleurP

Et des 16 mêmes couleurs à utiliser en couleur de fond dans les tableaux :

    BGcouleurA      BGcouleurB      BGcouleurC      BGcouleurD
    BGcouleurE      BGcouleurF      BGcouleurG      BGcouleurH       
    BGcouleurI      BGcouleurJ      BGcouleurK      BGcouleurL
    BGcouleurM      BGcouleurN      BGcouleurO      BGcouleurP

Voici quelques exemples d'usage des couleurs :

    ...
    Un mot <span class="couleurI">coloré</span> dans une phrase.
    ...
    <p class="couleurN">Tout un paragraphe coloré...</p>
    ...
    <table align="center">
        <tr>
            <td class="BGcouleurA"><span class="couleurB">Du texte coloré 
            sur un fond coloré aussi...</span></td>
        </tr>
    </table>
    ...

qui donne :

... Un mot coloré dans une phrase. ...

Tout un paragraphe coloré...

...
Du texte coloré sur un fond coloré aussi...
...

Style texte

C'est le style par défaut de tout votre contenu : vous n'avez donc pas à priori à l'utiliser explicitement, à moins de vouloir repasser dans le style par défaut au milieu d'un autre style.

Style legende

Style utilisé pour les légendes de figures, d'animations, de vidéos ou encore de tables.

Style important

Style utilisé pour mettre en valeur un ou plusieurs mots dans une phrase, ou tout un paragraphe.


1. Ce qui est un des buts recherchés dans le développement de la ModulEst.

2. En effet, grâce à la ModulEst, un organisme peut faire évoluer sa charte, voire la modifier radicalement, et remettre à jour tous ses modules.

    5.2.1. Styles d'éléments de type « bloc »
Page d'accueil Table des matières Niveau supérieur Page précédente Haut de la page Page suivante