Proposition d'un modèle de site Web pour les écoles (à partir d'un modèle de Dreamweaver MX 2004)

Si vous êtes débutant, voici une autre proposition...

Cette rubrique contient des canevas qui permettront de démarrer un site Web d'école ainsi que de la documentation vous permettant de modifier, adapter ou compléter les pages du site.

Les éléments que contiennent les documents (pages Web et images) vous permettront de démarrer un site Web à l’aide de l'application de création de page Web Dreamweaver MX 2004. Il n'est pas nécessaire d'être un expert mais vous devez tout de même maîtriser les fonctions de base de la création de page Web.

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.

Comment faire? Vous pouvez suivre les instructions dans ces pages Web ou utiliser le document Dreamweaver 2004, fonctions avancées en format PDF (Acrobat) où on explique comment utiliser les modèles (pages 8 à 13).

 

 

 

Comment personnaliser le site Web de mon école
1 • Visionnez  |  2 • Téléchargez  |  3 • Dossier racine du site  | 4 • Page d'accueil |  5 • Menu de navigation | 6 • Page modèle
Références
Documentation  |  Images gratuites

 


Comment personnaliser le site Web de mon école

1Visionnez

Commencez par observer... (cliquez sur l'image)


2 • Téléchargez

Ça vous va? Téléversez le canevas sur votre ordinateur.


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).

Lancez Dreamweaver, puis suivez les instructions données dans cette page ou tutilisez le document Dreamweaver 2004, fonctions avancées


4 • Page d'accueil

La page index.html s’affichera au lancement du site. Elle contient le logo de la Commission scolaire de Saint-Hyacinthe et un lien vers le site Web de cette dernière. Vous pouvez l'enlever si vous n'avez pas la chance d'être pas des nôtres! :-)

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)

Le menu contient les éléments suivants :

  • Espace réservé pour un petit logo de votre école dont le lien pointe vers index.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

Bien entendu, vous pouvez enlever les éléments du menu qui ne sont pas utiles, les modifier ou en ajouter d’autres. Pour le menu cependant, vous devrez le faire à partir de la page modèle (ouvrir cette page dans le répertoire Templates) et ensuite mettre à jour les autres pages (voyez aux pages 13 et 14 du document).


6 • Page modèle

La page modele.dwt, située dans le dossier Templates, est une page qui a servi de base à la construction du site. Vous pouvez l'utiliser pour créer d'autres pages dans le site. Voici comment faire.

  1. Sélectionnez l'onglet Actifs dans le panneau Fichiers (Fenêtre > Actifs)
  2. Choisissez la catégorie Modèles sur le côté gauche du panneau.
  3. Sur le modèle, enfoncez le clic de droite de la souris ou, pour une souris à un seul bouton, faites CTRL-clic sur le modèle.
  4. Dans le menu contextuel, choisissez Nouveau à partir d'un modèle.
  5. Une page liée au modèle sera créée et vous pourrez ajouter du contenu dans les régions modifiables.

Notez que lorsque vous apporterez des modifications au modèle, ces dernières s'appliqueront à toutes les pages liées. Génial, n'est-ce pas?


Voici en gros ce que vous aurez à faire...

Et... faire ajouter, par vos élèves (pourquoi pas?), du contenu aux autres pages!


Documentation disponible sur le site du RÉCIT de la Commission scolaire de Saint-Hyacinthe

http://recit.cssh.qc.ca/documentation.html#web

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


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épendamment de la licence, ce type d’image pourrait être ou non modifié. «On ne peut pas généraliser lorsqu’on parle 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. (source : Pierre Lachance)

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://carrefour-education.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/lice

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/