Bonjour.
Dans cette vidéo, nous allons prévisualiser le site web que nous avons créé dans Dreamweaver, en générant un aperçu en temps réel dans le navigateur.
Concrètement, nous travaillons sur un site et voulons vérifier son rendu sur différents appareils.
Pourquoi, demanderez-vous ?
Tout simplement parce qu'il s'agit d'un site réactif et que sa mise en page va s'adapter à la taille de l'écran utilisé.
Je clique en bas à droite sur le bouton Aperçu en temps réel et je choisis le navigateur Google Chrome.
Le site apparaît dans Chrome.
J'aimerais à présent ouvrir la fenêtre du navigateur sur mon deuxième moniteur pour voir comment les modifications effectuées dans Dreamweaver affectent la vue ordinateur pendant que je travaille.
Il est important de vérifier le résultat sur un écran d'ordinateur, mais aussi sur d'autres appareils comme un téléphone ou une tablette.
Cela ne fonctionne que si tous les appareils sont connectés au même réseau WiFi.
Ici, j'ai connecté tous mes terminaux à mon réseau professionnel.
Pour prévisualiser ce site, vous pouvez cliquer de nouveau sur le bouton Aperçu en temps réel ou saisir directement l'URL.
Je vais le faire sur cette tablette.
Un instant...
Et regardez : le site apparaît maintenant sur ma tablette.
La prochaine technique est encore plus intéressante.
Il s'agit d'utiliser un code QR, accessible ici.
Pour cela, vous devez télécharger un lecteur dédié sur votre appareil.
Nombre d'entre eux sont disponibles gratuitement.
J'ouvre le mien, je le dirige vers le bas de mon écran, et je flashe !
Le site se charge, et le voici sur mon téléphone !
Ce site est donc bien réactif avec plusieurs mises en page : le texte et la présentation varient en fonction de la taille des différents écrans.
Sans parler des modifications qui s'affichent instantanément.
Je descends jusqu'au pied de page sur les deux écrans, et dans Dreamweaver, je vais rechercher le code de ce dégradé de couleurs.
Je tape un zéro ici, et comme par magie, la couleur change partout.
Donc, si vous effectuez une modification mineure et pensez qu'elle va uniquement se refléter sur l'écran de votre mobile, vous la verrez apparaître — à votre grande surprise — sur les autres écrans.
C'est très pratique de voir immédiatement le résultat et de modifier un site au fur et à mesure.
Ce tutoriel est terminé.
Vous savez maintenant comment prévisualiser des pages via l'option d'aperçu en temps réel dans le navigateur de Dreamweaver.
