Vous êtes sur la page 1sur 29

Créer un site éducatif avec

Cahier du
participant

© 2019 Renaud Bellefleur


Pourquoi penser à Weebly
pour créer une page web
éducative?
• Parce que l’environnement de travail est configuré de
façon intuitive et ressemble à un environnement de
bureautique traditionnel
• Parce que l’on peut protéger n’importe quelle partie du
site par des mots de passe
• Parce que les fonctionnalités d’interactivité (blog, partage
sur les réseaux sociaux, commentaires) sont faciles à créer
et paramétrer
• Seul bémol, la section éducation de Weebly n’est pas
complètement traduite

Quelques exemples de page


de classe créés avec Weebly
https://dcapsulespourlecole.weebly.com/
Un site très bien fait, avec des intégrations de médias (vidéos,
documents PDF, codes QR)

https://classedecatherinebrissette.weebly.com/
Un site très épuré, facile à lire, simple à consulter

https://mmekbarry.weebly.com/blog
Un site avec des éléments interactifs intéressants (sondage) et
un souci de rendre le site intéressant avec des photos.
2
Créer sa page et son
environnement de classe

3
Inscription à Weebly éducation

1. Allez sur https://education.weebly.com/ed-features.php


2. Cliquez sur le bouton Sign Up Now

3.Entrez vos informations pour la création d’un site web (nom


d’utilisateur, mot de passe et courriel)

Note:______________________________________________________________________
___________________________________________________________________________ 4
Inscription à Weebly éducation
(suite)

4. Entrez vos informations d’enseignant pour créer


votre environnement de classe.

Note du
participant:___________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

5
Inscription à Weebly
éducation (suite)
Pour inscrire sa classe sur Weebly
1. Mettre le nom de la classe
2. Inscrire un mot de passe si on veut que les élèves aient un
site privé (protégé par votre mot de passe)

Note du
participant:___________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

6
Pour inscrire un étudiant
1. Inscrire le prénom et le nom de l’étudiant.
2. Un nom d’utilisateur est créé par le système. Vous devez créer
un mot de passe pour l’étudiant.

Note: Le nom d’utilisateur et le mot de passe sont toujours disponibles


dans le tableau de bord de l’enseignant. Vous devez cliquer sur le nom
d’utilisateur de l’étudiant pour consulter le mot de passe.

7
La création de votre page
de classe
avec

8
Pour
commencer!
Dans la page SITES, cliquez sur le bouton Ajouter un site.

Choisissez un thème qui vous inspire par son design. Vous pouvez
modifier toutes les images et le texte du thème. Vous pouvez
même changer de thème en cours de route.

Note du
participant:___________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

9
Pour créer votre site (suite)
Choisissez votre nom de domaine. Pour un domaine gratuit,
choisissez la première option.

Note du
participant:___________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

10
Pour créer votre site (suite)
Un guide de départ s’ouvre pour vous assister et sera toujours
disponible en bas à droite.

Note du
participant:___________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

11
Pour modifier le nom de votre
site
Allez en haut à gauche et cliquer sur le texte MON SITE. Le
curseur vous permettra de changer votre nom de site ou le
désactiver si vous ne le voulez pas sur la page d’accueil.

Note du
participant:___________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

12
Pour modifier les noms des pages

Cliquez sur l’onglet Pages. Un menu à gauche s’ouvrira.


Cliquez sur le titre de la page.

Placez votre curseur dans la case NOM DE LA PAGE et inscrivez le


nouveau nom de la page.

13
Pour changer l’arrière-plan
Cliquez sur la grande image. Un menu apparaitra en bas de
l’image. Choisissez Modifier l’arrière-plan.

14
Astuces

Pour trouver de belles images libres de


droit, il y a plusieurs sites, mais je préfère
Pixabay pour sa facilité d’utilisation:
https://pixabay.com/fr

Le site Unsplash est également très bien,


avec un peu moins d’images en stock, par
contre:
https://unsplash.com/

D’autres suggestions de sites:


https://www.stockvault.net/
https://www.pexels.com/

15
Les principaux outils
d’édition de Weebly

Titre: Pour faire des titres


Paragraphe: Pour insérer un
bloc de texte
Image: Pour insérer une image
Galerie: Pour insérer une galerie
d’images
Diaporama: Pour insérer un
diaporama. Intéressant lorsque
l’on a beaucoup d’images

Carte: Pour insérer une carte


pour géolocaliser. Utilisé surtout
pour la page Contact
Formulaire de contact: Pour
insérer un formulaire de contact

16
Les principaux outils
d’édition de Weebly (suite)

Bouton: Pour insérer un


bouton. Utile pour inciter
l’utilisateur à poser une
action
Intégration: Pour insérer du
code html sur la page
(niveau intermédiaire)
Section: Pour insérer une
section complète préfabriquée
(ex. un menu de restaurant)
Diviseur: Pour séparer des
éléments (par exemple, images
ou texte et des images)

Espace: Même fonction que


diviseur, mais on peut contrôler
la largeur de l’espacement.

17
Les principaux outils
d’édition de Weebly (suite)

Vidéo HD (payant): Pour


insérer vos vidéos HD sur votre
page. À déconseiller en
général.
Son (payant): Pour ajouter
du son sur la page. Inutile
en général.
Document scribd: Pour insérer
un document lisible
immédiatement
Youtube: Pour insérer une vidéo
Youtube. Ajoute à l’intérêt du
site.
Flash: Pour insérer un lecteur
Flash au site. À déconseiller.

Document: Pour insérer un


document PDF ou Word et le
rendre disponible au
téléchargement. 18
Astuce: Pour insérer une
vidéo Youtube

1. Placez votre section Youtube à l’endroit désiré sur votre


page.

2. Allez sur https://www.youtube.com/ et sélectionnez


votre vidéo.
3. Cliquez sur le bouton Partagez

4. Copiez l’adresse de la vidéo.

5. Insérez l’adresse de la vidéo dans le menu de la section


Youtube.

19
Exercice guidé
La création d’une page avec insertion
de blocs de texte et d’images. En
bonus, l’insertion d’une vidéo.

Petit rappel: N’oubliez pas de ne publier


que des images libres de droit.

1. Créez votre page


2. Nommez votre page.
3. Insérez une image dans l’en-tête.
4. Insérez un titre en bas de l’en-tête.
5. Insérez un bloc de texte.
6. Insérez un diviseur.
7. Insérez une image.
8. Insérez une section espace.
9. Insérez deux blocs de texte divisés en colonne.
10. Insérez une galerie de photos.
11. Insérez un diviseur
12. Insérez une section Youtube

Pour avoir une idée du résultat final:


https://laclassedetechnosimple.weebly.com/projet-1.html

20
Mes notes de l’exercice guidé
1.Créez votre page.
________________________________________________2
. Nommez votre page.
________________________________________________
3. Insérez une image dans l’en-tête.
________________________________________________
4. Insérez un titre en bas de l’en-tête.
________________________________________________
5. Insérez un bloc de texte.
________________________________________________
6. Insérez un diviseur.
________________________________________________
7. Insérez une image.
________________________________________________
8. Insérez une section espace.
________________________________________________
9. Insérez deux blocs de texte divisés en colonne.
________________________________________________
10. Insérez une galerie de photos.
________________________________________________
11, Insérez un diviseur.
________________________________________________
12. Insérez une section Youtube.
________________________________________________

21
Les principaux outils
d’édition de Weebly (suite
et fin)

Recherche (payant): Pour


faire des recherches
Citation: Pour insérer un
bloc de citation. Inutile.
Icônes sociales: Pour partager
sur les réseaux sociaux.
Confirmation de présence: Pour
confirmer la présence à un
événement
Sondage: Pour faire des
sondages sur la page.
Intéressant.

22
Exercice guidé
La création d’une page avec
insertion d’éléments interactifs.

Petit rappel: N’oubliez pas de ne publier


que des images libres de droit.

1. Créez votre page


2. Nommez votre page.
3. Insérez une image dans l’en-tête.
4. Insérez un titre en bas de l’en-tête.
5. Insérez une section Formulaire de confirmation
6. Insérez une liste à cocher dans le formulaire.
7. Insérez une section Sondage sur la page.
8. Modifier le contenu de la section.
9. Insérez l’adresse courriel de réception des réponses.
10. Insérez un diviseur.
11. Insérez une section Icônes sociales.
12. Modifiez les adresses d’icônes sociales.

Pour avoir une idée du résultat final:


https://laclassedetechnosimple.weebly.com/hiver-2020.html

23
Pour créer une page de blog
1. Allez dans Pages et choisir Page du blog.

2. Vérifiez les paramètres du blog.

3. Assurez-vous que les commentaires soient toujours modérés.

24
Pour créer une page de blog (suite)
4. Cliquez sur Nouvel article.

5. Inscrivez le titre de votre article et choisissez un élément à


ajouter dans la section d’en bas de la même manière que l’on fait
une page standard.

25
Exercice guidé et autonome
La création d’une page de blog

Petit rappel: N’oubliez pas de ne publier


que des images libres de droit.

1. Allez dans Pages et choisir Page du blog.


2. Vérifiez les paramètres du blog.
3. Cliquez sur Nouvel article.
4. Inscrivez le titre de votre article.
5. Insérez les éléments désirés dans la section du bas.

Note:____________________________________________
_________________________________________________
_________________________________________________
_________________________________________________

Pour avoir une idée du résultat final:


https://laclassedetechnosimple.weebly.com/blog/bienvenue-
sur-le-blog-de-la-classe-technosimpleca

26
Exercice guidé et autonome
La création d’une page Contact

Petit rappel: N’oubliez pas de ne publier


que des images libres de droit.

1. Allez dans Pages et choisir Page standard.


2. Nommez votre page Contact.
3. Insérez une section Formulaire de contact.
4. Modifiez les questions du formulaire en cliquant dessus.
5. Vous pouvez ajouter une carte avec la section Carte

Note:____________________________________________
_________________________________________________
_________________________________________________
_________________________________________________

Pour avoir une idée du résultat final:


https://laclassedetechnosimple.weebly.com/contact.html

27
Maintenant, à vous de jouer!
Pratique autonome pour créer
son site

Vous devez avoir déjà 3 pages. Il s’agit d’utiliser les outils de


la formation pour créer les pages manquantes pour votre site
web de classe.

Astuce: N’oubliez pas que la


rédaction web est
différente de celle faite sur
imprimé. Gardez les
phrases courtes, utilisez des
listes à puces, etc.

Vous pouvez vous inspirer de la structure du site créé pour


l’atelier:
https://laclassedetechnosimple.weebly.com

28
Merci pour votre
participation!

Questions, commentaires?

29