Chapitre 5. Ajouter du contenu

5.1. Modifier les pages HTML

Si vous utilisez DreamWeaver, la meilleure solution une fois que vous avez votre arborescence HTML est de créer un site à partir du répertoire contenant votre module. Vous vous apercevrez alors que cet éditeur vous montre la zone éditable dans chaque page.

Sinon, en utilisant un éditeur de texte standard, la chose la plus importante à retenir est que tout votre contenu doit être inséré entre les deux commentaires HTML suivant 1 :

    <!-- #BeginEditable "content" -->

    <p> </p>

    <!-- #EndEditable -->

Attention, si jamais vous insérez du contenu avant
<!-- #BeginEditable "content" --> ou après
<!-- #EndEditable -->, ce dernier sera irrémédiablement perdu au premier « remodulage » de votre module. Vérifiez donc toujours bien vos pages, surtout si vous utilisez un éditeur WYSIWYG.


1. Lors de la création de la page par la ModulEst, un paragraphe contenant une espace insécable (<p>&nbsp;</p>) est ajouté dans la zone éditable pour que justement Dreamweaver la reconnaisse.

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 »

Viennent ensuite et pour finir 7 styles qui s'utilisent de la même façon. Leur nom est suffisament évocateur et ils fonctionnent par paire :

    remarque                titreremarque
    definition              titredefinition
    citation                titrecitation
    exemple                 titreexemple
    application             titreapplication
    exercice                titreexercice
    listing                 titrelisting

Ces styles sont de type bloc. En voici un exemple d'utilisation :

    <div class="exemple">
    <p class="titreexemple">Le titre de l'exemple</p>
    <p>L'exemple...</p>
    </div>

Le titre de l'exemple

L'exemple...

    <div class="definition">
    <p class="titredefinition">Le terme à définir</p>
    <p>La défintion du terme...</p>
    </div>

Le terme à définir

La définition du terme...

Voilà, je pense que ces explications devraient vous suffir pour développer vos premiers modules dans l'esprit de la ModulEst.

5.3. Fichiers à part : les QCM

Les QCM de chaque chapitre sont mentionnés dans le fichier XML par l'ajout d'un attribut qcmfile dans la balise <chapter>. Mais contrairement aux attributs abstractfile ou contentfile, ce fichier n'est pas créer par la ModulEst. C'est donc à vous de créer ce fichier qui sera ouvert dans une nouvelle fenêtre et qui ne dépendera pas à priori de la charte graphique.

Pour développer des QCM, vous pouvez par exemple utiliser CouseBuilder Interaction dans DreamWeaver...