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> </p>) est ajouté dans la zone éditable pour que justement Dreamweaver la reconnaisse.
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.
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...
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 :
Tout un paragraphe coloré...
...Du texte coloré sur un fond coloré aussi... |
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 utilisé pour les légendes de figures, d'animations, de vidéos ou encore de tables.
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.
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.
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...