Comment créer un diaporama (slideshow) dans Dreamweaver

Dreamweaver (CC/CS6+) inclut un comportement « Diaporama » basé sur JavaScript (Spry / jQuery selon version). Voici la méthode via le panneau « Comportements » (moderne, sans coder).

Prérequis

• Images optimisées pour le web (JPG/PNG/WebP, même dimensions recommandées, ex. 800×600 ou 1200×800).
• Dossier du site défini dans Dreamweaver (Site > Nouveau site).

Étape 1 : Insérer un conteneur

Dans la vue Design (ou Code), placez le curseur où le diaporama doit apparaître. Insertion > « Div » (ou balise <div id="slideshow"></div> en Code). Donnez-lui un ID (ex. slideshow).

Étape 2 : Ajouter le comportement Diaporama

Fenêtre > « Comportements » (Behaviors). Cliquez sur « + » > « Effets » > « Diaporama » (Slideshow).

Étape 3 : Configurer le diaporama

Dans la boîte de dialogue :

• Conteneur : sélectionnez l'ID de votre div (#slideshow).
• Images : cliquez « + » pour ajouter chaque image (parcourir dans le dossier du site). Ordonnez-les (flèches haut/bas).
• Durée : temps d'affichage par image (ms, ex. 3000 = 3s).
• Transition : Fondu (Fade), Glissement (Slide), Aucun.
• Contrôles : cochez « Précédent/Suivant », « Lecture/Pause », « Puces » selon besoin.
• Lecture auto : cochée par défaut.

Validez. Dreamweaver insère le JS/CSS nécessaire (bibliothèque Spry ou jQuery UI).

Étape 4 : Prévisualiser et ajuster

F12 (Aperçu dans navigateur). Vérifiez le fonctionnement, le responsive (largeur 100% ?). Ajustez CSS si besoin (largeur max, centrage).

Étape 5 : Publier

Mettez en ligne le dossier du site (FTP/SFTP). Le diaporama fonctionne côté client (JS), pas de PHP/BDD requis.

Note moderne

Les widgets Spry sont obsolètes (Adobe a arrêté). Pour nouveaux projets, préférez insérer manuellement un slider léger comme Swiper, tiny-slider, ou Flickity via CDN + initialisation JS simple. Dreamweaver reste un bon éditeur de code pour cela.