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 suzanne.harvey@prologue.qc.ca 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 Visionnez... page 2 2 Téléchargez... page 2 3 Dossier racine du site... page 2 4 Page d'accueil... page 3 5 Menu de navigation... page 4 6 Page de cadres... page 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... Changer pour le logo de votre école Écrire un message d accueil Ajouter, modifier ou supprimer des boutons ajouter la photo de votre école 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 Mac 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