Présenter son cours
IMPORTANT : veuillez cliquer sur les accordéons ci-dessous pour consulter les exemples et les codes sources à réutiliser.
Introduction
Les menus sont utilisées pour guider vos étudiant-es et permettent à simplifier la navigation dans votre espace de cours. Ils donnent un accès rapide aux sections ou aux principaux contenus de votre cours.
Merci de trouver ci-dessous le code source de cet exemple de MENU à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
<ul style="background-color: rgba(97, 107, 117 , 0.1); list-style-type: none; text-align: center; margin: 0; padding: 4px 8px;">
<li style="display: inline-block; font-size: 20px; padding: 5px 8px;"><!--bouton 1 -->
<div style="text-align: center;"><a class="btn btn-primary" role="button" href="#lien ici"> <strong><i
class="fa-solid fa-list"></i> Introduction</strong></a></div>
</li>
<li style="display: inline-block; font-size: 20px; padding: 5px 8px;"><!--bouton 2-->
<div style="text-align: center;"><a class="btn btn-primary"
role="button" href="#lien ici"><strong> <i class="fa-solid fa-book"></i> Modules</strong></a></div>
</li>
<li style="display: inline-block; font-size: 20px; padding: 5px 8px;"><!--bouton 3-->
<div style="text-align: center;"><a class="btn btn-primary"
role="button" href="#lien ici"><strong><i class="fa-solid fa-circle-check"></i> Travaux</strong></a></div>
</li>
</ul>
Introduction
Avant votre première séance, la page d'accueil du cours permet de créer un lien avec vos étudiant-e-s, en adressant un mot de bienvenue et une introduction au cours, le fonctionnement du cours y est aussi expliqué, ainsi qu’une présentation de l’équipe enseignante accompagnée de leurs photos ou des liens vers leurs pages biographiques.
Mot de Bienvenue
Contact
e-Learning
Équipe pédagogique
 |
 |
|---|---|
Prof. Julie DurandEnseignantePlus d'infos |
Dr Pascal HéritierEnseignantPlus d'infos |
Merci de trouver ci-dessous le code source de cet exemple à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
<div class="row align-items-start custom-line"><!--Colonne 1-->
<div class="col">
<div class="card">
<div class="card-body"><!--Titre mot de bienvenue-->
<h4 style="background-color: rgb(155, 0, 75); color: white; text-align: center; padding: 0.3em; ">
<strong style="user-select: auto;"><span class=""
style="font-size: x-large; user-select: auto;">Mot de Bienvenue</span></strong></h4>
<!--Contenu textuel ou vidéo intégrée après cette ligne code iframe vidéo par exemple--> <iframe></iframe>
<hr><!--Titre contact-->
<h4 style="background-color: rgb(155, 0, 75); color: white; text-align: center; padding: 0.3em; ">
<strong style="user-select: auto;"><span class="" style="font-size: x-large; user-select: auto;">Contact</span></strong>
</h4>
<div style="color: white; padding: 16px; border-radius: 10px; user-select: auto;">
<div><span style="color: rgb(0, 0, 0);"><span class=""
style="font-size: large;">Pour toute question concernant cette formation, merci de vous adresser à</span> :</span></div><br>
<!--Bouton contact-->
<div style="text-align: center;"><a class="btn btn-outline-primary" role="button"
href="mailto:prenom.nom@unige.ch"><strong>prenom.nom@unige.ch</strong></a>
</div>
</div>
</div>
</div>
</div>
<!--Colonne 2-->
<div class="col">
<div class="card">
<div class="card-body"><!--Titre formation-->
<h4
style="background-color: rgb(155, 0, 75);color: white; text-align: center; padding: 0.3em; user-select: auto;">
<strong style="user-select: auto;"><span class=""
style="font-size: x-large; user-select: auto;">e-Learning
</span></strong></h4>
<p><br><br></p>
<!--Bouton commencer-->
<div style="text-align: center;"><a
class="btn btn-outline-primary btn-lg " role="" href="#">Commencer
<i class="fa-solid fa-arrow-right"></i> </a></div>
<p> </p>
<hr><!--Titre équipe-->
<h4
style="background-color: rgb(155, 0, 75); color: white; text-align: center;padding: 0.3em; ">
<strong style="user-select: auto;"><span class=""
style="font-size: x-large; user-select: auto;">Équipe pédagogique</span></strong></h4>
<p><br><br></p>
<!--Photos et liens vers pages équipe pédagogique et administrative-->
<table
style="margin-left: auto; margin-right: auto; table-layout: auto; width: 100%; height: auto; user-select: auto;">
<thead style="user-select: auto;">
<tr style="user-select: auto;">
<th style="user-select: auto;" scope="col" width="50%"><img
class="img-fluid atto_image_button_text-bottom"
style="border-radius: 50%; text-align: center; display: block; margin-left: auto; margin-right: auto; user-select: auto;" role="presentation" src="lien photo de profil ici"
alt="" width="92" height="94"></th>
<th style="user-select: auto;" scope="col" width="33%"><img
class="img-fluid atto_image_button_text-bottom"
style="border-radius: 50%; text-align: center; display: block; margin-left: auto; margin-right: auto; user-select: auto;" role="presentation" src="lien photo de profil ici" alt="" width="103" height="69"></th> </tr>
</thead>
<tbody style="user-select: auto;">
<tr style="user-select: auto;">
<td style="background-color: rgba(97, 107, 117, 0.05); padding: 6px; user-select: auto;">
<h6 style="text-align: center; user-select: auto;"><span class="" style="font-size: small; user-select: auto;">Prof. Julie Durand</span></h6>
<h6 style="text-align: center; user-select: auto;"><span class="" style="font-size: small; user-select: auto;">Enseignante</span>
</h6>
<h6 style="text-align: center; user-select: auto;"><a style="user-select: auto;" href="lien vers le profil institutionnel ici" target="_blank"
rel="noopener"><span class="" style="font-size: small; user-select: auto;">Plus d'infos</span></a>
</h6>
</td>
<td style="background-color: rgba(97, 107, 117, 0.1); padding: 6px; user-select: auto;">
<h6 style="text-align: center; user-select: auto;"><span
class="" style="font-size: small; user-select: auto;">Dr Pascal Héritier</span></h6>
<h6 style="text-align: center; user-select: auto;"><span class="" style="font-size: small; user-select: auto;">Enseignant</span>
</h6>
<h6 style="text-align: center; user-select: auto;"><a style="user-select: auto;" href="#lien vers le profil institutionnel ici" target="_blank"
rel="noopener"><span class="" style="font-size: small; user-select: auto;">Plus d'infos</span></a>
</h6>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Introduction
Avant votre première séance, la page d'accueil du cours permet de créer un lien avec vos étudiant-e-s, en adressant un mot de bienvenue et une introduction au cours, le fonctionnement du cours y est aussi expliqué, ainsi qu’une présentation de l’équipe enseignante accompagnée de leurs photos ou des liens vers leurs pages biographiques.
Mot de Bienvenue
Chères et chers étudiant-e-s,
Message de bienvenue ou introduction au cours ICI.
Nous nous réjouissons de partager ces semaines avec vous et vous souhaitons un bon parcours d'apprentissage !
Équipe pédagogique
|
|
|---|---|
Prof. Julie DurandEnseignantePlus d'infos |
Dr Pascal HéritierEnseignantPlus d'infos |
Merci de trouver ci-dessous le code source de cet exemple à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
<div class="card mb-3">
<div class="card-body"><!--Titre mot de bienvenue-->
<h4
style="background-color: rgb(155, 0, 75); color: white; text-align: center; padding: 0.3em;">
<strong style="user-select: auto;">Mot de Bienvenue</strong></h4>
<p style="padding: 1em;"><span class="" style="font-size: large;">Chères et
chers étudiant-e-s,</span></p>
<p style="padding: 1em;"><span class="" style="font-size: large;"> Message
de bienvenue ou introduction au cours ICI. </span></p>
<p style="padding: 1em;"><span class="" style="font-size: large;">Nous nous réjouissons de partager ces semaines avec vous e vous souhaitons un bon parcours d'apprentissage ! </span></p>
<!--Bouton commencer-->
<div style="text-align: center;"><a class="btn btn-outline-primary btn-lg "
role="" href="#lien vers la 1ère partie du cours ici">Commencer <i class="fa-solid fa-arrow-right"></i> </a></div>
<p> </p>
<hr><!--Titre équipe-->
<h4 style="background-color: rgb(155, 0, 75); color: white; text-align: center; padding: 0.3em;">
<strong style="user-select: auto;">Équipe pédagogique</strong></h4>
<p><br><br></p>
<!--Photos et liens vers pages équipe pédagogique et administrative-->
<table
style="margin-left: auto; margin-right: auto; table-layout: auto; width: 100%; height: auto; user-select: auto;">
<thead style="user-select: auto;">
<tr style="user-select: auto;">
<th style="user-select: auto;" scope="col" width="50%"><img
class="img-fluid atto_image_button_text-bottom"
style="border-radius: 50%; text-align: center; display: block; margin-left: auto; margin-right: auto; user-select: auto;" role="presentation" src="lien photo enseignant-e" alt="" width="92" height="94"></th>
<th style="user-select: auto;" scope="col" width="50%"><img
class="img-fluid atto_image_button_text-bottom"
style="border-radius: 50%; text-align: center; display: block; margin-left: auto; margin-right: auto; user-select: auto;" role="presentation" src="lien photo enseignant-e"
alt="" width="103" height="69"></th>
</tr>
</thead>
<tbody style="user-select: auto;">
<tr style="user-select: auto;">
<td style="background-color: rgba(97, 107, 117, 0.05); padding: 6px; user-select: auto;">
<h6 style="text-align: center; user-select: auto;"><span class=""
style="font-size: small; user-select: auto;">Prof. Julie Durand</span></h6>
<h6 style="text-align: center; user-select: auto;"><span class=""
style="font-size: small; user-select: auto;">Enseignante</span>
</h6>
<h6 style="text-align: center; user-select: auto;"><a
style="user-select: auto;" href="#lien profil ici" target="_blank" rel="noopener"><span class=""
style="font-size: small; user-select: auto;">Plus d'infos</span></a></h6>
</td>
<td
style="background-color: rgba(97, 107, 117, 0.1); padding: 6px; user-select: auto;">
<h6 style="text-align: center; user-select: auto;"><span class=""
style="font-size: small; user-select: auto;">Dr Pascal
Héritier</span></h6>
<h6 style="text-align: center; user-select: auto;"><span class=""
style="font-size: small; user-select: auto;">Enseignant</span>
</h6>
<h6 style="text-align: center; user-select: auto;"><a
style="user-select: auto;" href="#lien profil ici" target="_blank" rel="noopener"><span class=""
style="font-size: small; user-select: auto;">Plus
d'infos</span></a></h6>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Introduction
Vous avez la possibilité d'ajouter des informations sur l'équipe pédagogique vos parcours et vos recherches ou des liens vers vos pages web institutionnels, c'est un élément important surtout dans le cadre d'un cours entièrement en ligne, cette présentation permet d'établir un lien avec vos participant-es et de pouvoir vous contacter pour toute question.
 |
|
|---|---|
NomEnseignant-ePlus d'infosE-mail contact |
NomAssistant-ePlus d'infosE-mail contact |
Merci de trouver ci-dessous le code source de cet exemple à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
<!--tableau-->
<table style="margin-left: auto; margin-right: auto; table-layout: auto; width: 100%;">
<thead>
<!--Les photos-->
<tr>
<!--Photo enseignant.e-->
<th scope="col" width="33%"><img style="border-radius: 50%; text-align: center; display: block; margin-left: auto; margin-right: auto;" src="ajouter ici le lien de la photo" alt="" width="230" height="228"></th>
<!--Photo assistant.e->
<th scope="col" width="33%"><img style="border-radius: 50%; text-align: center; display: block; margin-left: auto; margin-right: auto;" src="ajouter ici le lien de la photo" alt="" width="230" height="228"></th>
<!--Photo coordinateur.trice->
<th scope="col" width="33%"><img style="border-radius: 50%; text-align: center; display: block; margin-left: auto; margin-right: auto;" src="ajouter ici le lien de la photo" alt="" width="230" height="228"></th>
</tr>
</thead>
<tbody>
<!--Infos et contacts de l'équipe-->
<tr>
<td style="background-color: rgba(97, 107, 117 , 0.05); padding: 6px;">
<h6 style="text-align: center;"><span class="" style="font-size: medium;">Nom</span></h6>
<h6 style="text-align: center;"><span class="" style="font-size: medium;">Enseignant-e</span></h6>
<!--lien vers votre page unige, votre site web ou autre profil académique-->
<h6 style="text-align: center;"><a href="ajoutez ici le lien vers votre page unige/site web/" target="_blank" rel="noopener"><span class="" style="font-size: medium;">Plus d'infos</span></a></h6>
<!--votre courriel professionnel si on peut vous contacter par e-mail ou ignorer cette partie-->
<h6 style="text-align: center; padding: 6px; margin: 1em;"><a href="mailto:ajouter e-mail ici"><span>E-mail contact</span></a></h6>
</td>
<td style="background-color: rgba(97, 107, 117 , 0.05); padding: 6px;">
<h6 style="text-align: center;"><span class="" style="font-size: medium;">Nom</span></h6>
<h6 style="text-align: center;"><span class="" style="font-size: medium;">Assistant-e</span></h6>
<!--lien vers votre page unige, votre site web ou autre profil académique-->
<h6 style="text-align: center;"><a href="ajoutez ici le lien vers votre page unige/site web/" target="_blank" rel="noopener"><span class="" style="font-size: medium;">Plus d'infos</span></a></h6>
<!--votre courriel professionnel si on peut vous contacter par e-mail ou ignorer cette partie-->
<h6 style="text-align: center; padding: 6px; margin: 1em;"><a href="mailto:ajouter e-mail ici"><span>E-mail contact</span></a></h6>
</td>
<td style="background-color: rgba(97, 107, 117 , 0.05); padding: 6px;">
<h6 style="text-align: center;"><span class="" style="font-size: medium;">Nom</span></h6>
<h6 style="text-align: center;"><span class="" style="font-size: medium;">Coordinateur-trice</span></h6>
<!--lien vers votre page unige, votre site web ou autre profil académique-->
<h6 style="text-align: center;"><a href="ajoutez ici le lien vers votre page unige/site web/" target="_blank" rel="noopener"><span class="" style="font-size: medium;">Plus d'infos</span></a></h6>
<!--votre courriel professionnel si on peut vous contacter par e-mail ou ignorer cette partie-->
<h6 style="text-align: center; padding: 6px; margin: 1em;"><a href="mailto:ajouter e-mail ici"><span>E-mail contact</span></a></h6>
</td>
</tr>
</tbody>
</table>
Introduction
Découper votre contenu pédagogique en petites séquences ou petit parcours plus faciles à assimiler permet d'améliorer l’expérience d’apprentissage, et d'éviter la surcharge cognitive des apprenant-e-s ainsi que le risque décrochage
Merci de trouver ci-dessous le code source de cet exemple de MENU à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
<div class="row row-cols-1 row-cols-md-3 g-4">
<!--Colonne 1 ou thème 1--><div class="col">
<div class="card h-100"><a href="#lien vers la page de cette thématique ici pour accéder à partir d'un clic sur l'image"><img
class="card-img-top" src="#lien image 1 ici" alt="..." width="266" height="173"></a>
<div class="card-body"><!--Bouton 1--><a class="btn btn-outline-primary btn-lg"
href="#lien vers la page de cette thématique ici">Titre du bouton ici</a>
<hr>
<p class="card-text">Description ici si besoin.</p>
</div>
</div>
</div>
<!--Colonne 2 ou thème 2--><div class="col">
<div class="card h-100"><a href="#lien vers la page de cette thématique ici pour accéder à partir d'un clic sur l'image"><img
class="card-img-top" src="#lien image 2 ici" alt="..." width="303" height="171"></a>
<div class="card-body"> <!--Bouton 2--><a class="btn btn-outline-primary btn-lg"
href="#lien vers la page de cette thématique ici">Titre du bouton ici</a>
<hr>
<p class="card-text">Description ici si besoin.</p>
</div>
</div>
</div>
<!--Colonne 3 ou catégorie/thème 3--><div class="col">
<div class="card h-100"><a href="#lien vers la page de cette thématique ici pour accéder à partir d'un clic sur l'image"><img
class="card-img-top" src="#lien image 3 ici" alt="..." width="307" height="169"></a>
<div class="card-body"><!--Bouton 3--><a class="btn btn-outline-primary btn-lg"
href="#lien vers la page de cette thématique ici""> Titre du bouton ici</a>
<hr>
<p class="card-text">Description ici si besoin.</p>
</div>
</div>
</div>
</div>