Bric à Brac informatique 

Insertion d'un diaporama dans une page web

Le logiciel proposé pour afficher un diaporama est le logiciel gratuit dewslider.swf.

Voir ce lien http://www.alsacreations.fr/dewslider.html  pour télécharger le logiciel. Le mode opératoire proposé ci-dessous est inspiré de celui décrit sur la page du site Alsacreations.

Mode opératoire :

1. Télécharger le fichier dewslider.zip sur le site d'Alsacreations et l'enregistrer dans un dossier de votre disque dur ou tout autre support.

2. Dézipper ce fichier dewslider.zip pour extraire les fichiers dewslider.swf et dewslider.xml dont nous aurons besoin. Nous n'utiliserons pas le dossier img. Le fichier dewslider.html peut servir de modèle.

3. Créer ou repérer la page .html (ou.php) de votre site dans laquelle le diaporama sera inséré.

4. Décider de la taille du diaporama (en pixels) qui sera inséré sur cette page  .html (ou .php) en fonction de la taille des images qui seront utilisées.

5. Regrouper les images qui constitueront le diaporama dans un dossier de votre site. Ne pas utiliser des images trop lourdes.

   Préférer des images de taille identique à l'espace défini par le diaporama sur la page web.

   Il est possible d'utiliser des images plus grandes que l'espace défini. Dans ce cas, à savoir :

   - le diaporama occupera plus de mémoire

   - attention aux proportions pour éviter que les images ne soient déformées.

   Conseil : Le choix du nombre d'images (au format jpg ou png) constituant le diaporama est en théorie illimité. Mieux vaut limiter ce nombre à une dizaine d'images.

6. Utiliser un logiciel de retouches photos pour uniformiser la taille de vos images, si besoin.

7. Conseil : renommer vos images en leur donnant même radical mais affectées d'un N°. Par exemple : image001, image002 etc. Ce sera plus simple pour créer le diaporama ensuite.

8. Copier le fichier dewslider.swf dans le dossier qui contient la page .html définie en 3.

9. Modifier ce fichier dewslider.xml.( téléchargé et dezippé en 2)

   Pour que le diaporama soit opérationnel, le navigateur a besoin des informations contenues dans ce fichier

   Les difficultés du mode opératoire sont à ce stade :

   Le contenu du fichier dewslider.xml  ne s'affiche pas dans Kompozer (ni dans BlueGriffon d'ailleurs). Il faut lancer un éditeur de texte comme Bloc-notes de Windows. Le contenu de ce fichier xml est très technique, il faut apprendre à le décrypter.

   Voir comment interpréter et modifier ce fichier (en fonction de vos souhaits) en cliquant sur ce lien.

   Une fois modifié, enregistrer le fichier dans le dossier contenant le fichier .html (créé ou repéré en 3.) dans lequel s'affichera le diaporama. 

10. Ouvrir dans le mode Source de Kompozer ou BlueGriffon) le fichier html qui va contenir le diaporama. A l'endroit ou devra apparaître le diaporama copier le code encadré ci-dessous : La seule variable à définir est la hauteur ("height") et la largeur ("width").

    <object type="application/x-shockwave-flash" data="dewslider.swf?xml=dewslider.xml" height="en pixels" width="en pixels"> param name="movie" value="dewslider.swf?xml=dewslider.xml"> </object>

11. Rappels :

    - dewslider.swf doit être copié dans le même dossier que le fichier dewslider.xml

    - le chemin des images indiquées dans le fichier dewslider.xml doit tenir compte du chemin de ce dossier.

Dernière mise  le 05/01/16