tecfa
presentation people dispositif projects ressources




Cours autotutoral : Gérer un site WEB facilement.

Suite du cours Créer des PAGES WEB facilement

Note : ce cours est une adaptation du cours sur HomePage développé pour la formation continue des maîtres du secondaire avec C.Oïhénart, et concrétise de nombreuses idées de B.Gisin, B.Class et plusieurs autres.


  1. Mise en place des pages sur le serveur et Gestion des liens.
  2. Images et
  3. Optimisation de la taille du site.
  4. Une page modèle pour la cohérence de votre site.
  5. Présentations de techniques diverses
  6. Quelques éléments de réflexion sur la conception d'un site
  7. Ressources générales sur la production de sites WEB



Exercice guidé il n'est fourni que par le WEB, par souci de cohérence entre les moyens employés et la matière enseignée.

Il peut bien sûr être imprimé, de même que tous les documents fournis par les nombreux liens inclus. Aucune documentation papier n'est fournie autrement, que chacun se sente libre d'imprimer ce qu'il juge nécessaire. Nous pensons que cela mène en fait à moins de gaspillage de papier.

fleche haut Haut de la page


1° Composer vos pages directement sur le serveur

Prenez ce site web sonné. Il est plein d'erreurs à rectifier (mac.sit pc.zip)

Préparer les fichiers

Quelques conseils pour préparer les noms de vos fichiers.

Etablir les liens en local

Si vous avez changé les noms, il faudra souvent rectifier les liens y faisant référence.
Une fois votre site composé et renommé, parcourez-le dans tous les sens pour vérifier que les liens sont effectivement corrects.

Créer une page d'entrée sur votre site :

Si vous ne l'avez pas encore fait, allez sur le serveur à l'adresse de votre site, trouvez la page modèle qui est prévue pour vous.
C'est le point d'entrée sur votre site. Prenez-la depuis le serveur (dans votre espace personnel, dossier PUBLIC.WWW) ou créez-en une; elle doit s'appeler index.htm. Ouvrez-la dans Nvu, et modifiez-la à votre goût, créez des liens vers vos pages.

Travailler directement sur le serveur

Lorsque vous travaillez sur un ordinateur de l'Université, vous ouvrez directement le fichier depuis votre espace personnel. Avec un ordinateur hors Université, il faut connecter le lecteur réseau avec un client DAV.

Vérifier le site on-line

Pour regarder vos pages, allez à cette adresse pour votre site web étudiants unige.

N.B. Il faut actualiseractualiser (possible aussi avec la touche F5 de votre clavier) dans votre browser pour voir la nouvelle version de votre page, sinon vous voyez la page en mémoire (dans le cache) sur votre ordinateur.

Liens utiles :

Faire vérifier votre site on-line Docteur HTML. (sympa mais souvent surchargé!)

Faire vérifier votre site on-line W3org : LA référence ultime.

Faire vérifier votre site on-line pour l'accessibilité par tous et la compatibilité avec divers browsers.

Mettez de l'ordre dans votre site. Modifiez la page de titre de votre site.

fleche hautHaut de la page


2° Gestion des liens

Vérifier le site

Avec Nvu, la vérification des liens de votre site s'effectue en parcourant vos pages on-line et en vérifiant qu'elles fonctionnent effectivement.

mainEn cas d'erreur de lien pour des pages internes de votre site, éditer le lien et redéfinir le lien (clic sur le bouton Parcourir... et sélectionner le fichier à mettre en lien) et vérifier que la case L'URL est relative à l'emplacement de la page est cochée.

propriété du lien

mainDans le cas où se sont des liens sur des pages externes à votre site qui ne fonctionnent pas, il faut trouver l'adresse en question (pas toujours facile) et la copier dans l'espace prévu (voir ci-dessus).

fleche hautHaut de la page


3° Ajouter et optimiser des images pour votre site

mainVous avez probablement un site à peu près comme celui-ci : Site madagascar complet à downloader d'un coup pour mac,pour PC

Les images : comment les intégrer dans ses pages

Les animations GIF comment les créer et les intégrer dans ses pages présenté au club-internet.

IKON Québec Point de départ pour trouver tant des matériaux graphiques que théoriques sur la communication visuelle. (GIGANTESQUE!)

Ressources d'images a downloader :

Pour restreindre la taille des images :

En Résumé :

(Gimp (logiciel libre pour PC - Mac ou Linux) ou Photoshop Element ($ware pour PC ou Mac, dans les écoles souvent...) font un très bon job ici) ou iPhoto (Mac)

mainPenser à changer les liens qui s'y réfèrent si on renomme un fichier

Autres liens pour optimiser les graphiques

A la fin de cette phase vous avez à peu près ceci : plage1.html

fleche hautHaut de la page


4° Une page modèle pour la cohérence de votre site.

On peut crééer un modèle pour la page de son site :

Exemple de page modèle.

Remarque : plusieurs images composent ce menu. Il est possible d'éditer des images à liens multiples. Pour faire ces liens multiples sur une image, vous avez deux possibilités: la première consiste à le faire directement dans le code HTML (onglet <HTML>Source dans l'éditeur Nvu) ; la deuxième est d'utiliser un autre éditeur avec la fonction qui permet cette opération, HomePage, par exemple. Une version de HomePage est disponible ici (30 jours). Les explications pour éditer des liens multiples sont .

mainCréer à partir d'une page à vous ou d'internet (depuis le site madagascar p. ex.) une page sur la plongée :

mainCréez une page sur la plongée

Par exemple comme ceci

fleche hautHaut de la page


5° Présentations de techniques diverses :

mainOrganisez votre page d'accueil pour y intégrer différents aspects (Exercices Madagascar, ressources et liens personnels par ex.)

Vous pouvez apprendre à créer des boutons dynamiques.

Une autre possibilité consiste à utiliser des boutons sans label pour les rendre réactifs

Cela peut donner à peu près ceci

fleche hautHaut de la page


6° Ressources générales sur la production de sites WEB :
Penser l'organisation du site globalement

mainEnvisager la circulation dans votre site globalement :

Probablement la ressource la meilleure : Université de Laval

internet à la figure

Pour des conseils de conception

Pour des questions spécifiques à Nvu

Pour ajouter un dictionnaire à Nvu dans une autre langue que l'anglais : le site OpenOffice.org

mainIl vous faudra sans doute réorganiser le site à la suite de ces réflexions.
mainVérifiez ensuite à nouveau tous les liens de votre site.

fleche hautHaut de la page

D'autres éditeurs de pages Web :

Nota : Il est déconseillé d'utiliser Frontpage (code pas propre)

- F.Lo - adapté par L.G.