Proposition d`un modèle de site Web pour les écoles

Proposition d’un modèle de
site Web pour les écoles
de la Commission scolaire de Saint-Hyacinthe
Document d’accompagnement
Comment télécharger, modifier, adapter, compléter le canevas
Suzanne Harvey
Conseillère pédagogique
Service local du RÉCIT
Commission scolaire de Saint-Hyacinthe
[email protected]
mai 2004
http://recit.cssh.qc.ca
Proposition d’un modèle de site Web pour les écoles
Les dossiers “ecole_azur”, “ecole_ensoleillee”, “ecole_ondoyante” et “ecole_verdoyante”
contiennent un site Web modèle d’une école. Les éléments qu’ils contiennent (pages
Web, image et boutons Flash) vous permettront de démarrer un site Web à l’aide d’une
application de création de page Web de votre choix sans que vous ne soyiez un expert!
Personnalisez ces pages aux couleurs de votre école et ajoutez-y les projets de vos
élèves. Impliquez-les dans la création et voyez comme ils développent ainsi leur
compétence à exploiter les TIC à travers l’apprentissage des éléments disciplinaires.
Vous trouverez les dossiers modèles sur le site du RÉCIT de la Commission scolaire de
Saint-Hyacinthe, dans la rubrique “Suivez le guide” dans la section “Création de page Web” à
cette adresse : http://recit.cssh.qc.ca .
Sommaire
Comment personnaliser le site Web de mon école
1
2
3
4
5
6
Visionnez ................................................
Téléchargez .............................................
Dossier racine du site................................
Page d'accueil ..........................................
Menu de navigation ..................................
Page de cadres ........................................
page
page
page
page
page
page
2
2
2
3
4
5
Références
Documentation ........................................... page 7
Images gratuites ........................................ page 8
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 1
Comment personnaliser le site Web de mon école
1 • Visionnez
Les quatre modèles offrent le même contenu mais présentent une interface différente
(fond de page et boutons de navigation). Visionnez les quatre sites Web modèles et
effectuez le choix de celui qui vous convient le mieux.
2 • Téléchargez
Téléversez sur votre ordinateur le dossier compressé en cliquant sur le lien qui convient à
la plateforme que vous utilisez.
3 • Dossier racine du site
Une fois le dossier téléversé et décompressé, substituez le nom de ce dossier par le nom
de l’école, sans espace ni accent AVANT de débuter le site Web. Si le site Web de l’école
existe déjà, conservez le même nom que le dossier racine du site existant (à moins que
vous ne désiriez changer l’adresse URL).
L’adresse du site Web de votre école sera :
http://www.cssh.qc.ca/mon_ecole
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 2
4 • Page d’accueil
La page accueil.html s’affichera dans le cadre de droite. Elle contient le logo de notre
commission scolaire, du RÉCIT et un lien vers le site Web de ce dernier.
Elle affiche aussi les éléments suivants :
•
•
•
•
•
Message de bienvenue
Espace réservé pour la photo de l’école
Nouveautés (vous pourrez pointer vers les éléments nouvellement ajoutés)
Webmestre (indiquez le ou les noms)
Mise à jour (avec insertion de date automatique)
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 3
5 • Menu de navigation
La page menu.html contient les éléments suivants :
• Espace réservé pour un petit logo de votre école dont le lien pointe vers accueil.html
• Informations : mène vers la page informations.html (informations générales sur
l’école, adresse, téléphone, horaire, liste du personnel...)
• Classes : mène vers la page classes.html (liste des classes et des enseignants avec
liens vers celles qui ont des sites ou projets)
• Réalisations: mène vers la page realisations.html (liste des projets par sujets, qui
redirigent possiblement vers les sites de classes. Les classes n’ayant pas
nécessairement de site Web peuvent y déposer leurs projets
• Événements : mène vers la page evenements.html (projets thématiques collectifs et
événements vécus par l’école)
• Projet éducatif : mène vers la page educatif.html
• Parents: mène vers la page parents.html (documents pour les parents, conseils aux
devoirs, dates des rencontres, remise des bulletins, liste des parents bénévoles...)
• Service de garde : mène vers la page garde.html
Ces éléments du menu sont créés en boutons Flash. Si votre éditeur Web gère un module
Flash (tel Dreamweaver), pour éditer un bouton, double-cliquez dessus. Les boutons Flash
sont enregistrés dans un fichier .swf, sont déposés dans le dossier racine du site et doivent
rester au même niveau que la page dans laquelle ils sont insérés.
Bien entendu, vous pouvez enlever ceux qui ne sont pas utiles, les modifier ou en ajouter
d’autres.
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 4
6 • Page de cadres
La page index.html est une page de cadres qui contient les pages accueil.html et
menu.html. Cette page est faite comme un “pochoir” à deux espaces vides. Le cadre de
gauche (contenant le menu de navigation) se nomme menu et le cadre de droite se
nomme cible. C’est dans le cadre cible, donc à droite, que s’afficheront les pages liées.
De cette manière, le menu de navigation sera toujours disponible.
La page index.html est la page qui est affichée par défaut lorsque les visiteurs contactent
votre site Web. Pour cela, il est important de ne pas changer le nom de cette page.
Cadre de gauche (nommé menu contient la page menu.html)
Cadre de droite (nommé cible contient la page accueil.html)
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 5
Voici en gros ce que vous aurez à faire...
Écrire un message d’accueil
Changer pour le logo de votre école
ajouter la photo de votre école
Ajouter, modifier
ou supprimer
des boutons
Inscrire les nouveaux arrivages
Indiquer le nom du ou des webmestres
Et... faire ajouter, par vos élèves (pourquoi pas?), du contenu aux autres pages!
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 6
Documentation disponible sur le site du RÉCIT de la
Commission scolaire de Saint-Hyacinthe
http://recit.cssh.qc.ca/documentation.html#web
Dreamweaver MX 6 pour Mac OS9
Éditeur de page web
Dreamweaver MX 6 pour Mac OSX
Éditeur de page web
Dreamweaver MX 6 pour Windows
Éditeur de page web
Dreamweaver 2.0 pour Mac
Éditeur de page web
Dreamweaver 2.0 pour Windows
Éditeur de page web
Un petit plugin à installer dans Dreamweaver MX 6 afin que vous puissiez aisément
insérer des séquences Quicktime à vos pages web
Comment insérer une séquence QuickTime avec Dreamweaver
Freeway 3.0
Créateur graphique de page web pour M a c
Claris HomePage - niveau intermédiaire
Logiciel de création de page web pour Mac et Windows
Claris HomePage - niveau avancé
Logiciel de création de page web pour Mac et Windows
Le transfert FTP avec Fetch
L'utilisation de QuickTime Pro pour le web
Modèle de lettre d'autorisation par les parents pour faire paraître la photo des élèves sur
le site web de l'école
Documentation diverse
Comment enregistrer une image
Commission scolaire de la Seigneurie des Mille-Iles, Louise Bégin
http://www.cssmi.qc.ca/carrefour_educatif/ressources/banques/trucs.htm
Les vidéos-formations du Sitsat de Montréal
Création d’un site Web avec Dreamweaver
http://www.csdm.qc.ca/sitsat-mtl/formation/dreamweaver
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 7
Images gratuites
Quelques précisions...
Image gratuite : une image gratuite n’est pas nécessairement libre de droits et est
habituellement disponible pour une utilisation personnelle (non commerciale).
Image libre : dépendemment de la licence, ce type d’image pourrait être ou non modifié.
«On ne peut pas généraliser lorsqu’on parles des images libres. L’auteur de l’image a le
choix de plusieurs licences qui donnent des droits précis aux utilisateurs. Il faut donc bien
lire les licences» et conditions d’utilisation.1
Attention : une image libre n’est pas nécessairement gratuite. Certaines entreprises se
spécialisent dans la production d’images destinées aux graphistes qui les modifieront pour des fins
commerciales. Dans ce cas, les images sont libres de droits pour l’entreprise qui les ont
achetées.
Références (source: Pierre Lachance)
Carrefour Éducation
http://carrefoureducation.telequebec.qc.ca/fichiers_HTML/dossiers/gratuites/gratuites1.html
Licences Creative Commons
http://www.framasoft.net/article2185.html
Licence Art libre, plus adaptée à l'art (et aux images)
http://www.atol.fr/lldemars2/lestextes/laltexte.htm
Liste très complète des licences libres
http://www.gnu.org/philosophy/license-list.fr.html
1
Pierre Lachance, RÉCIT national de mathématique, science et technologie.
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 8
Quelques sites où on en retrouve
Pixel magick
Images sous licence GPL (General Public Licence) réalisées avec le logiciel Gimp sous Linux
(les images des sites modèles d’écoles sont tirées de ce site).
http://jimmac.musichall.cz/
Picto
Vous trouverez sur ce site une banque d'illustrations destinée à être utilisée dans des
travaux scolaires, sites Web ou tout autre contexte relié au monde de l'éducation.
http://www.picto.qc.ca/
ClicArt
Le projet Clic Art est un lieu de création artistique où les élèves du préscolaire, primaire et
du premier cycle du secondaire partagent leurs images créées à partir de logiciels de
dessin et peinture.
http://ntapo.csvdc.qc.ca:591/CLICART/DEFAULT.HTM
Carrefour Éducation
Le moteur de recherche d'images et de sons de Carrefour éducation vous indique quelques
sites Web qui offrent des images dont certains droits ont été libérés pour un usage autre
que commercial.
http://carrefour-education.telequebec.qc.ca/ressourcesdidactiques/doc_libere_droit.asp
Le grand monde du préscolaire
http://prescolaire.educal.com/clipart/
Grenadine
http://www.grenadine.net/index.php?page=inc_images.php
BILDD
Plus de 500 photos hautes résolutions au téléchargement. Les ressources offertes sur ce
site sont gratuites et libres de droits pour une utilisation non commerciale.
http://photos.12h60.com/
Proposition de site Web modèle pour les écoles de la CSSH • Suzanne Harvey • RÉCIT CSSH
page 9