![Page 1: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/1.jpg)
Comment créer un site Web
Martine Mottet
Automne 2007
![Page 2: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/2.jpg)
Comment procéder
1. Faire l’analyse des besoins
2. Concevoir la structure du site
3. Organiser les dossiers et fichiers
4. Concevoir l’allure graphique des pages
5. Concevoir les textes du site
6. Réaliser le site
7. Transférer les fichiers sur le serveur Web
8. Tester le site
![Page 3: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/3.jpg)
1. Faire l’analyse des besoins
• Définir la situation de communication– Intention : information, éducation
(apprentissage, évaluation)– Clientèle cible
• Fonction : enseignant, élève, parent• Âge : enfant du primaire, enfant du secondaire,
adulte• Type d’utilisateur : familier ou non avec le Web
– Interaction : monologue, dialogue, débat– Utilisation : en classe, hors classe– Etc.
![Page 4: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/4.jpg)
2. Concevoir la structure du site
• Trop long à afficher
Fichier
![Page 5: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/5.jpg)
2. Concevoir la structure du site
• Trop d’étalement
Fichier
Fichier Fichier Fichier Fichier Fichier FichierFichier
![Page 6: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/6.jpg)
2. Concevoir la structure du site
• Trop de profondeur
• 5 clics de souris
Fichier
Fichier
Fichier
Fichier
Fichier
Fichier
![Page 7: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/7.jpg)
2. Concevoir la structure du site
Clic
Clic
Clic
index.htm
scenario1.htm
auteurs.htm membre1.htm
exercice1.htm histoire1.htm
Page d’accueildu site
3 clics de souris
membre2.htm
theme1.htm
plan.htm
![Page 8: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/8.jpg)
2. Concevoir la structure du site
• Évitez les longues pages
• Incluez plutôt une table des matières ou créez un fichier PDF
bla blabla blabla blabla blabla blabla blabla blabla blabla blabla bla
1. Bla bla2. Clo clo3. Dit dit
1. bla bla bla bla bla bla2. Clo clo Clo clo3. Dit dit
![Page 9: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/9.jpg)
3. Organiser les dossiers et fichiers
• Créez un dossier appelé NomPrenom• Placez tous les sous-dossiers et fichiers dans ce
dossier• Pour tous les dossiers et fichiers, utilisez des noms :
• Courts (pour éviter les erreurs de frappe)• Sans accent• Sans espace• Sans majuscule
• Pour les fichiers d’image et de son, conservez l’extension des noms :
• .GIF .JPG .PNG (etc.)• .WAV .MP3 .AU (etc.)
![Page 10: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/10.jpg)
• Adresse réelle de la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/index.html
• Adresse absolue de l’hyperlien vers la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/image.gif
• Adresse relative de l’hyperlien vers la page de référenceimage.gif
Adresses absolues et relativesdes hyperliens
![Page 11: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/11.jpg)
• Adresse réelle de la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/index.html
• Adresse absolue de l’hyperlien vers la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/image.gif
• Adresse relative de l’hyperlien vers la page de référenceimage.gif
Adresses absolues et relativesdes hyperliens
![Page 12: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/12.jpg)
• Adresse réelle de la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/index.html
• Adresse absolue de l’hyperlien vers la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/HotPotatoes/image.gif
• Adresse relative de l’hyperlien vers la page de référence../image.gif
Adresses absolues et relativesdes hyperliens
![Page 13: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/13.jpg)
• Adresse réelle de la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/index.html
• Adresse absolue de l’hyperlien vers la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/HotPotatoes/image.gif
• Adresse relative de l’hyperlien vers la page de référence../image.gif
Adresses absolues et relativesdes hyperliens
![Page 14: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/14.jpg)
4. Concevoir l’allure graphique des pages
index.htm
scenario1.htm
auteurs.htm membre1.htm
exercice1.htm histoire1.htmtheme1.htm
plan.htm
• Harmonisez un maximum de trois couleurs• Choisissez des couleurs sûres pour le Web• Optez pour un bon contraste fond-texte• Attribuez un sens aux couleurs
membre2.htm
![Page 15: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/15.jpg)
• Uniformisez la présentation de l’information
4. Concevoir l’allure graphique des pages
![Page 16: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/16.jpg)
4. Concevoir l’allure graphique des pages
• Préférez les polices sans serif plutôt que les polices avec serif (maximum deux polices)
• Réservez le soulignement pour les hyperliens• Choisissez la taille des caractères en fonction
du public cible
• Utilisez seulement des éléments audiovisuels libres de droits
• Utilisez seulement des éléments audiovisuels ayant une valeur ajoutée
• Évitez les éléments animés
![Page 17: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/17.jpg)
5. Rédiger les textes du site
• Faites des phrases courtes (lisibilité)
• Regroupez les phrases en petits blocs d’information (assimilation)
• Traitez d’un seul sujet dans un bloc d’information (pertinence)
• Attribuez des titres significatifs (repérage)
• Datez chaque page
• Citez vos sources
Source : Horn, Robert (1987) Information Mapping
![Page 18: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/18.jpg)
6. Produire le site
index.htm
auteurs.htm contenu.htm
exercice3.htm
exercices.htm
plan.htm
histoire.htmmediagraphie.htm
exercice2.htmexercice1.htm
![Page 19: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/19.jpg)
6. Produire le site (équipe de 3 personnes)
index.htm
auteurs.htm contenu.htm
exercice3.htm
exercices.htm
plan.htm
histoires.htmmediagraphie.htm
exercice2.htmexercice1.htm
3 exercicespar personne
1 histoirepar personne
![Page 20: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/20.jpg)
7. Transférer les fichiers sur le serveur Web
• Un seul ordinateur serveur mais plusieurs services– Service Wiki– Service FTP– Service Web
• Transférez tous les fichiers sur le serveur dans votre dossier public
• Gardez tous les fichiers dans le même dossier
![Page 21: Comment créer un site Web Martine Mottet Automne 2007](https://reader035.vdocuments.pub/reader035/viewer/2022062417/551d9da7497959293b8d8e5e/html5/thumbnails/21.jpg)
8. Tester le site
• À l’adresse :www.tuxcafe.org/~ten-20727-h07/NomPrenom