Cours autotutoral : Gérer un site WEB facilement.

Suite du cours Créer des PAGES WEB facilement

Note : ce cours a été 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.

L'excellent cours de C. Oïhénart, synthétique et complet est disponible ici, il nous servira de référence.
(Sans doute le meilleur cours Home Page sur le web pour imprimer et comme référence) !

fleche haut Haut de la page


1° Mise en place de vos pages 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é, activez la fonction prévisualiser et activez tous les liens. Parcourez votre site dans tous les sens.

Creer 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 ou crééez-en une; elle doit s'appeler index.html ouvrez-la dans Home Page, et modifiez-la à votre goût, créez des liens vers vos pages.

Poser sur le serveur

Posez vos pages sur le serveur qui vous a été désigné.

Quelques conseils pour poser vos fichiers sur le serveur. Attention pour l'unige cas spécial ici

LE FTP avec home page :

Vérifier le site on-line

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

N.B. Il faut actionner Reload 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 haut Haut de la page


2° Gestion des liens et du site en bloc.

Vérifier le site en bloc

Home Page offre un éditeur de site qui donne la vision d'ensemble et inclut une fonction de vérification des liens :

Ouvrir un dossier en tant que site :

ouvrir le site

On dispose alors par des boutons boutons_verifier des fonctions de vérification des liens, rassembler les éléments multimédia et transférer le site sur le serveur.

Vérifiez que votre site n'a pas de pages orphelines (des pages qui ne renvoient à rien, sans "retour à la page d'accueil de ...").

fleche haut Haut de la page


3° Ajouter et optimiser des images pour votre site

Vous 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 présenté au club-internet.

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 :

 Estimer la vitesse de déchargement de vos fichiers

Home Page a une fonction appelée statistique qui permet de connaître le temps de déchargement de votre site.

statistiques

Activez cette fonction par le menu Edition : Statistiques ou par le bouton depuis l'éditeur de site.

Essayez chaque fichier pour identifier les plus gros. (Généralement les images)

Pour restreindre la taille des images :

En Résumé :

(Graphic Converter (Mac) ou Paintshop Pro (PC) font un très bon job ici : Shareware tous les 2)

Penser à 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 haut Haut de la page


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

Une image peut être le point de départ de liens selon sur quelle partie on clique:

Les images à liens multiples

Avec un éditeur graphique ( PaintshoPro par exemple), créer un bandeau de titre avec les noms des différentes pages de votre site

Exemple de bandeau de titre ici

Insérer cette image dans une de vos pages, sélectionner l'image à utiliser, double-cliquer pour ouvrir l'Éditeur d'image, ->onglet Action, -> images à liens multiples et Modifier ...

Avec l'outil de sélection rectangle ou rond, délimiter la zone qui doit devenir sensible, et entrer l'URL dans l''Éditeur de lien. pour y associer les pages correspondantes.

Cela peut donner à peu près ceci

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

Exemple de page modèle

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

Pour référence : Comment exploiter ce qu'on a trouvé sur internet

Créez une page sur la plongée

Par exemple comme ceci

fleche haut Haut de la page


5° Présentations de techniques diverses :

Organisez votre page d'accueil pour y intégrer différents aspects (Exercices Madagascar, ressources et liens personnels par ex.)
Vous pourriez utiliser ces boutons-ci pour les rendre réactifs

Cela peut donner à peu près ceci

fleche haut Haut de la page


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

Envisager la circulation dans votre site globalement :

Probablement la ressource la meilleure : Université de Laval

internet à la figure

Pour des conseils de conception

La liste pourrait être infinie, mais voici La sélection très remarquable de C. Oihénart

image a changer Version gratuite 30 jours (Mac, Windoze) Autre serveur si pas dispo

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

fleche haut Haut de la page

D'autres Editeurs de pages web :


- F.Lo