Stylage d'un générateur HTML (web, SCORM, diaporama)

Remarque

Chacun(e) peut s'organiser comme bon lui semble pour réaliser l'habillage. Le principe étant, au bout du compte, de modifier les fichiers qui se trouvent dans le dossier .skin.doss.

Néanmoins dans ce document sera décrite une méthode proposée.

Remarque

Le principe de la méthode de stylage pour un générateur html (web, scorm, diaporama) est de :

  1. générer un contenu de test

  2. travailler le nouveau stylage dans ce contenu de test jusqu'à satisfaction du résultat obtenu

  3. copier les modifications réalisées dans SCENARIstyler dans les sources de l'habillage

  1. Ouvrir le fichier .skinset dans SCENARIstyler

  2. Se placer sur l'onglet Tests

  3. Si aucun contenu de test est configuré, faire clic droit sur l’icône de l'item de test

  4. Sélectionner la publication qui doit servir pour tester l'habillage

  5. Générer la publication puis la révéler .

    Une fenêtre de navigation système ouvre le dossier source.

    Dans ce dossier source il y a un dossier skin. Son contenu est identique au contenu du dossier .skin.doss de l'habillage dans SCENARIstyler.

    C'est dans ce dossier skin que se trouve le matériel graphique qui définit l'aspect visuel de la publication : feuilles de style CSS, polices, images, ...

    C'est dans ce dossier qu'il faudra réaliser les modifications.

  6. Revenir à SCENARIstyler et consulter la publication générée.

    Le navigateur web ouvre la publication.

  7. Dans le navigateur web, naviguer dans le contenu jusqu'à l'élément que l'on souhaite modifier avec le nouveau stylage.

  8. Faire clic droit sur l'élément que l'on souhaite styler puis choisir Examiner l'élément (ou instruction similaire sur les navigateurs autres que Firefox)

    Apparaissent alors différents blocs dans la fenêtre dont :

    • le contenu html avec l'élément html cliqué surligné
    • les règles CSS appliquées à cet élément

    ExempleExemple de règle CSS⚓

    .home #navigation a span {

    display: inline-block;

    padding-top: 10px;

    border: 1px solid red;

    }

    Signifie :

    "tous les éléments span qui sont dans un élément a, lui-même dans un élément qui a comme id "navigation", lui-même dans un élément de classe css "home" auront les propriétés suivantes : affichage de type bloc en ligne, espace de 10 pixels au-dessus, et bordure rouge pleine de 1 pixel"

  9. À côté de chaque règle css est indiqué l'emplacement de la règle dans les feuilles de style.

    Par exemple : main.css:557

    Ceci signifie : "cette règle se trouve dans la feuille de style main.css à la ligne 557"

  10. Il est possible de modifier à la volée, dans le navigateur, les attributs CSS. Ça peut être pratique pour affiner le style que l'on souhaite appliquer.

  11. Ouvrir la feuille de style voulue dans le système de fichier (fenêtre ouverte précédemment en cliquant sur ) dans le dossier skin.

  12. Faire les modifications CSS pertinentes sous forme de surcharge CSS.

    C'est-à-dire qu'une fois que la règle CSS à modifier a été identifiée, il faut la copier en fin de fichier CSS et modifier son contenu pour obtenir ce que l'on souhaite.

    AttentionModifier la CSS dans Opale⚓

    Dans le cas de Opale WEB (et SCORM) et PDF, les règles CSS sont à ajouter en fin de fichier skin.css.

    Dans le cas de Opale DIAPO, les règles CSS sont à ajouter en fin de chaque fichier où a été localisée la règle CSS à modifier.

    AttentionModifier la CSS dans Dokiel⚓

    Dans le cas de Dokiel WEB et PDF, les règles CSS sont à ajouter en fin de fichier skin.css.

  13. Une fois les modifications réalisées et enregistrées, actualiser le contenu HTML dans le navigateur pour constater le résultat

  14. Répéter l'opération autant que nécessaire et, une fois que le résultat est satisfaisant, copier le contenu du dossier skin de la publication générée, dans le dossier .skin.doss correspondant dans SCENARIstyler.

    Attention

    Surtout de pas oublier cette étape !

    Dans les précédentes lignes, nous décrivons une méthode où les modifications sont réalisées dans le contenu HTML généré. Il ne faut donc pas oublier de copier les modifications dans les sources du skin.

  15. Revenir à SCENARIstyler, générer à nouveau le contenu de test, et consulter le HTML généré pour vérifier que les modifications sont satisfaisantes.