avec Front Page Express
1 Créer un répertoire sur le disque dur local avec un dossier images, et y ranger vos documents
Aide: http://www.2learn.ca/toile2/premiers.html
2 Déterminer le type de communication que vous voulez mettre en uvre :
- Vers l'extérieur : vitrine administrative, pédagogique, d'un projet ou projet actif
- Vers l'intérieur : cours, aide active ou travail en commun
3 Cibler votre public, ses moyens et ses attentes:
- Le grand public
- Les autres enseignants
- Les parents
- Des élèves d'autres établissements
- Les élèves de l'établissement
- Vos élèves
4 Dessiner sur papier l'arborescence de votre site, c'est à dire les pages, et la circulation entre les pages.
5 Faire une liste des éléments que vous avez et de ceux qui vous manquent (fond, flèches, icônes)
6 Composer le style de vos pages : couleurs, boutons à partir d'une idée directrice. Faites votre choix!
- Fonds, flèches, lignes, icônes, animations : http://www.mediabuilder.com/
- Icônes, images, lignes et flèches : http://www.thefreesite.com/freegraphics.htm
- Un site de sites de ressources graphiques : http://www.dropbears.com/brough/links/images.htm
Malgré ce superbe choix, souvenez-vous que ce ne sont que des accessoires, et n'alourdissez pas inutilement vos pages!
7 Votre répertoire est maintenant complet : vous avez des images et peut-être des textes. Vous pouvez commencer à construire vos pages.
8 Ouvrez Front Page Express, sans fermer votre navigateur. Vous voyez en bas de l'écran les deux programmes ouverts simultanément. Vous pouvez passer de l'un à l'autre en cliquant : c'est ce que l'on appelle le multifenêtrage.
9 Voyez les explications des barres de menus, barre d'outils standards et barre de mise en forme, à l'aide des bulles qui apparaissent quand vous placez la souris sur l'icône.
10 La première page par défaut est ouverte. Commencez par cliquer sur 'fichier' 'enregistrer sous ' pour l'enregistrer dans votre répertoire de départ, sous un nom simple, sans majuscules ni espaces ("index" est le nom le plus courant...)
11 Avec un clic droit sur le curseur, faites apparaître un menu contextuel ou cliquez sur 'fichier' et choisissez: 'propriétés de la page' qui vous propose 4 onglets, dont on n'utilisera que les deux premiers : 'général' et 'arrière plan'.
12 Général : donnez un nom à votre page : c'est celui qui apparaîtra dans le signet de vos visiteurs, alors soyez clair! (pas de accueil ou page1, mais 'site de l'école X' ou 'projet rives-manche du collège X' ).
13 Vous pouvez ajoutez une musique de fond, mais cela va ralentir le chargement de la page et peut devenir horripilant . vous trouverez des musiques dans 'free sounds' de 'thefreesite'
14 Arrière-plan : ici on va choisir le fond, la couleur des textes et des liens
15 Pour disposer votre texte dans la page, vous ne pourrez pas utiliser les espaces ou les tabulations comme dans un traitement de texte. Il vous faudra gérer votre disposition à l'aide d'un tableau.
16 Vous pouvez maintenant entrer vos textes et vos images aux emplacements que vous avez prévus. Mais souvenez-vous qu'une page HTML (HyperText Markup Language) n'est qu'une page de texte et de liens vers les images que vous aurez enregistrées dans votre répertoire de départ.
17 Pour créer un lien, sélectionnez l'élément que vous voulez rendre actif (mot, texte ou image) , puis cliquez sur l'icône 'lien' ou sur 'édition' ' lien..' et choisissez l'adresse de votre cible.
18 Vous pouvez créer des liens vers un site de la toile (web), une autre de vos pages ou une adresse mèl. Pour éviter les erreurs, utilisez de préférence le copier/coller.
19 Pour créer un lien vers une autre partie de la même page, ou vers une partie précise d'une autre page, commencez par sélectionner l'élément cible, puis dans 'édition' , choisissez 'signet' et donnez lui un nom, puis sélectionnez l'élément de départ et faites un lien vers le signet que vous venez de créer.
20 N'oubliez pas les éléments de navigation en bas de page, vers les pages précédentes et suivantes et vers le sommaire, ni les retours au haut de la page si vous descendez avec des signets.
Quelques adresses Pour en savoir plus
Créer ses pages avec Netscape Composer : http://www.2learn.ca/toile2/editeur.html
Créer des pages avec AOL Press : http://perso.wanadoo.fr/infonews/compo/compoaol.htm
Gérer votre site sur le serveur académique, télécharger et configurer le
logiciel FTP :
http://www.ac-rouen.fr/pedagogie/internet/outils/hebergement/config-ftp.html
Cours d'Hypertexte en français : langage HTML : http://metalab.unc.edu/edweb/htmlintro.fr.html
Guide de l'utilisateur du langage HTML 3.0 et 3.2 : http://www.philgate.com/phil_Web/html3.2/frames.html
La même chose en français plus familier : http://myweb.worldnet.net/~kats/aspexp/htmlguid.shtml
Un site pour les plus avancés : http://www.webdeveloppeur.com/
Télécharger une version d'évaluation de Paint Shop Pro : http://www.jasc.com/download_4.asp?
des cours et ressources en ligne : http://fr.gograph.com/
Des liens vers des 'tutorials' pour réaliser des sites exceptionnels (en anglais): http://www.webreference.com/authoring/tutorials.html
http://www.webreference.com/authoring/design/tutorials.html
http://www.webreference.com/authoring/graphics/tutorials.html
Voir en particulier le site de David Siegel : http://www.dsiegel.com et ses conseils haut de gamme : http://www.dsiegel.com/tips/ (en anglais, mais je crois que vous pourrez trouver la version française de son livre en librairie)
'how to create a webpage' : http://www.make-a-web-site.com/
'a beginner's guide to HTML' : http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
réalisé par Christine Reymond,
Lycée Blaise Pascal, Rouen