Prévisualisation de pages web dans Dreamweaver, dans les navigateurs et sur les appareils mobiles.

L’aperçu en temps réel vous permet de prévisualiser les pages dans le navigateur et sur appareil mobile, et d’y voir en temps réel les modifications effectuées sur le code.

Le mode En direct vous donne une idée de ce à quoi va ressembler votre page sur Internet et vous permet de modifier ses éléments en mode Code.

Le mode Création donne le même genre d’aperçu, mais il ne restitue pas la page exactement telle qu’elle apparaît dans un navigateur.

La fonction « Ouvrir dans le navigateur » vous permet de voir à quoi vont ressembler vos pages dans des navigateurs spécifiques. Elle convient parfaitement aux pages qui utilisent des données dynamiques issues de bases de données, puisqu’il ne s’agit pas d’éléments en temps réel.

Lisez la suite de cet article pour en savoir plus sur les différents types d’aperçu dans Dreamweaver.

Aperçu en temps réel dans le navigateur

Vous pouvez afficher un aperçu de vos pages web en temps réel à mesure que vous les codez ou les concevez dans Dreamweaver. Cette fonction permet de coder et d’afficher un aperçu de vos pages web simultanément sur plusieurs navigateurs. 

Aperçu des modifications en temps réel dans le navigateur
Aperçu des modifications en temps réel dans le navigateur

Remarque :

Vous pouvez également prévisualiser votre code en temps réel sur un appareil mobile, pendant que vous programmez. Pour plus d’informations, consultez la section Aperçu de pages web Dreamweaver sur plusieurs appareils.

  1. Cliquez sur Aperçu en temps réel dans la barre d’état de Dreamweaver.

    Aperçu en temps réel
    Aperçu en temps réel

    Vous pouvez afficher un aperçu de vos pages web en temps réel dans un navigateur ou sur un appareil.

    Si vous souhaitez afficher un aperçu de vos pages web sur un appareil, voir Aperçu et inspection de pages web sur plusieurs appareils.

  2. Pour afficher un aperçu de vos pages web dans le navigateur, cliquez sur l’une des options de navigateur proposées.

    Remarque :

    Vous pouvez modifier les navigateurs qui apparaissent dans cette liste. Pour ajouter ou supprimer un navigateur de cette liste, voir Définition des préférences d’aperçu dans un navigateur.

    Si vous disposez d’un serveur d’évaluation, veillez à activer l’option Envoyer automatiquement les fichiers sur le serveur d’évaluation, lors de la configuration du serveur d’évaluation. 

    L’aperçu en temps réel utilise les fichiers sur le serveur d’évaluation. L’activation de la fonction Envoyer automatiquement les fichiers sur le serveur d’évaluation vous assure donc de voir les modifications en temps réel. 

    Activation de l’envoi automatique sur le serveur d’évaluation
    Activation de l’envoi automatique sur le serveur d’évaluation

  3. Si vous y êtes invité, enregistrez la page web et les documents associés.

    Un navigateur s’ouvre pour afficher la page web.

  4. Continuez le codage de votre page et observez les modifications dans le navigateur à mesure que vous codez.

Définition des préférences d’aperçu dans un navigateur

Vous pouvez définir les préférences utilisées par les navigateurs lors de l’affichage de l’aperçu d’un site et définir les navigateurs principaux et secondaires.

Ces préférences de navigateur sont ensuite appliquées, que vous affichiez l’aperçu en temps réel de votre site ou que vous ouvriez simplement la page dans le navigateur.

  1. Cliquez sur Fichier > Aperçu en temps réel > Modifier la liste des navigateurs.

  2. Pour ajouter un navigateur dans la liste, cliquez sur le bouton Plus (+), renseignez la boîte de dialogue Navigateurs, puis cliquez sur OK.
  3. Pour supprimer un navigateur de la liste, sélectionnez-le, puis cliquez sur le bouton Moins (-).
  4. Pour modifier les paramètres d’un navigateur sélectionné, cliquez sur le bouton Modifier, effectuez les modifications dans la boîte de dialogue Modifier le navigateur, puis cliquez sur OK.
  5. Sélectionnez l’option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur sélectionné est le navigateur primaire ou secondaire.

    Appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour ouvrir le navigateur principal et sur Ctrl+F12 (Windows) ou Cmd+F12 (Macintosh) pour ouvrir le navigateur secondaire.

  6. Sélectionnez « Aperçu à l’aide d’un fichier temporaire » pour créer une copie temporaire qui sera utilisée pour l’aperçu et le débogage. Désélectionnez cette option si vous souhaitez mettre le document directement à jour.

Prévisualisation de pages en mode En direct

Le mode En direct diffère du mode Création traditionnel de Dreamweaver en ce sens qu’il offre un rendu plus réaliste de l’apparence de votre page dans un navigateur, rendu qui peut également être modifié. 

Vous pouvez passer en mode En direct à tout moment lorsque vous vous trouvez en mode Création. Toutefois, le passage en mode En direct n’a aucun point commun avec le basculement entre les autres modes d’affichage traditionnels de Dreamweaver (Code/Fractionné/Création). Lorsque vous passez du mode Création au mode En direct, vous vous contentez de faire basculer le mode Création d’un état modifiable à un état « en direct ».

Bien que le mode Création soit figé lorsque vous accédez au mode En direct, le mode Code reste modifiable, ce qui vous permet de modifier le code puis d’actualiser le mode En direct pour voir l’effet de vos modifications. Lorsque vous vous trouvez en mode En direct, vous pouvez également décider d’afficher le code en direct. Le mode Code en direct est similaire au mode En direct, en ce sens qu’il affiche une version du code que le navigateur exécute pour rendre la page. Tout comme le mode En direct, le mode Code en direct est un affichage non modifiable.

Un autre avantage du mode En direct est sa capacité à figer le code JavaScript. Par exemple, vous pouvez passer en mode En direct et survoler les lignes d’un tableau basé sur jQuery qui changent de couleur suite à une interaction avec l’utilisateur. Lorsque vous figez le code JavaScript, le mode En direct fige la page dans son état actuel. Vous pouvez ensuite modifier votre code CSS ou JavaScript puis actualiser la page pour voir l’effet des modifications. Il peut être utile de figer le code JavaScript dans le mode En direct pour voir et modifier les propriétés des différents états d’un menu ou d’autres éléments interactifs qu’il est impossible de voir dans le mode Création traditionnel.

Pour prévisualiser des pages en mode En direct :

  1. Veillez à bien être en mode Création (Affichage > Création) ou en modes Code et Création (Affichage > Code et Création).

  2. Cliquez sur le bouton En direct.

  3. (Facultatif) Apportez les modifications en mode Code, dans le panneau Styles CSS, dans une feuille de style CSS externe ou dans tout autre fichier associé.

    Même s’il est impossible d’apporter des modifications en mode En direct, les options de modification à d’autres endroits (par exemple dans le panneau Styles CSS ou en mode Code) changent au fur et à mesure que vous cliquez dans le mode En direct.

    Remarque :

    Vous pouvez travailler dans des fichiers associés (par exemple des feuilles de style CSS) tout en maintenant le focus sur le mode En direct. Pour ce faire, ouvrez le fichier associé à partir de la barre d’outils Fichiers apparentés, dans la partie supérieure du document.

  4. Si vous avez apporté des modifications en mode Code ou dans un fichier associé, actualisez le mode En direct en cliquant sur le bouton Actualiser de la barre d’outils Document ou en appuyant sur F5.

  5. Pour revenir en mode Création modifiable, cliquez à nouveau sur le bouton En direct.

Prévisualisation du code en direct

Le code affiché en mode Code en direct est similaire à ce que vous verriez si vous consultiez la source de la page à partir d’un navigateur. Alors que de telles sources de pages sont statiques et ne fournissent que la source de la page à partir du navigateur, le mode Code en direct est dynamique et est mis à jour à mesure que vous interagissez avec la page en mode En direct.

  1. Veillez à vous trouver en mode En direct.

  2. Cliquez sur le bouton Code en direct.

    Dreamweaver affiche le code en direct que le navigateur utiliserait pour exécuter la page. Le code est surligné en jaune et ne peut pas être modifié.

    Lorsque vous interagissez avec des éléments interactifs, le mode Code en direct met en surbrillance les modifications dynamiques apportées au code.

  3. Pour désactiver la mise en surbrillance des modifications dans le mode Code en direct, choisissez Affichage > Options d’affichage en direct > Surligner les modifications dans le code en direct.

  4. Pour revenir en mode Code modifiable, cliquez à nouveau sur le bouton Code en direct.

Pour modifier les préférences du mode Code en direct, choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac OS), puis choisissez la catégorie Coloration du code.

Figer JavaScript

Effectuez l’une des opérations suivantes :

  • Appuyez sur la touche F6

  • Choisissez Figer JavaScript dans le menu du bouton En direct

Une barre d’information, en haut du document, vous informe que le code JavaScript est figé. Pour fermer la barre d’information, cliquez sur son lien Fermer.

Options du mode En direct

Outre l’option Figer JavaScript, le menu du bouton En direct comporte d’autres options, qui sont également accessibles via le menu Affichage > Options d’affichage en direct.

Figer JavaScript Fige les éléments affectés par JavaScript dans leur état actuel.

Désactiver JavaScript Désactive JavaScript et réaffiche la page telle qu’elle se présenterait dans un navigateur où JavaScript serait désactivé.

Désactiver les plug-ins Désactive les plug-ins et réaffiche la page telle qu’elle se présenterait dans un navigateur où les plug-ins seraient désactivés.

Surligner les modifications dans le code en direct Active ou désactive la mise en surbrillance des modifications dans le mode Code en direct.

Modifier la page d’affichage en direct dans un nouvel onglet Permet d’ouvrir de nouveaux onglets pour les documents du site que vous parcourez, à l’aide de la barre d’outils Navigation de l’explorateur ou de la fonctionnalité Suivre le lien. Vous devez tout d’abord accéder au document, puis choisir « Modifier la page d’affichage en direct dans un nouvel onglet » afin de créer un nouvel onglet pour celui-ci.

Suivre le lien Rend actif le lien suivant sur lequel vous cliquez en mode En direct. Alternativement, vous pouvez rendre un lien actif en cliquant dessus, dans le mode En direct, tout en maintenant la touche Ctrl enfoncée.

Suivre les liens de manière continue Rend les liens du mode En direct actifs en permanence, jusqu’à ce que vous les désactiviez ou que vous fermiez la page.

Synchroniser automatiquement les fichiers distants Synchronise automatiquement le fichier local et le fichier distant lorsque vous cliquez sur l’icône Actualiser dans la barre d’outils Navigation de l’explorateur. Dreamweaver place votre fichier sur le serveur avant l’actualisation, ce qui garantit que les deux fichiers soient synchronisés.

Utiliser le serveur d’évaluation pour la source de document Option principalement utilisée par les pages dynamiques (telles que les pages ColdFusion) et sélectionnée par défaut pour les pages dynamiques. Lorsque cette option est activée, Dreamweaver emploie la version du fichier qui se trouve sur le serveur d’évaluation du site comme source d’affichage en direct.

Utiliser des fichiers locaux pour les liens de documents Paramètre par défaut pour les sites non dynamiques. Lorsque cette option est activée pour des sites dynamiques qui utilisent un serveur d’évaluation, Dreamweaver emploie les versions locales des fichiers liés au document (par exemple les fichiers CSS et JavaScript) au lieu des fichiers stockés sur le serveur d’évaluation. Vous pouvez ensuite apporter des modifications aux fichiers associés, de manière à voir leur apparence avant de les placer sur le serveur d’évaluation. Si cette option est désactivée, Dreamweaver emploie les versions des fichiers associés qui se trouvent sur le serveur d’évaluation.

Paramètres de demande HTTP Affiche une boîte de dialogue de réglages avancés où vous pouvez entrer des valeurs relatives à l’affiche de données en direct. Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.

Ouvrir dans le navigateur

Vous pouvez ouvrir une page dans un navigateur à tout moment. Il n’est pas nécessaire de l’envoyer au préalable sur un serveur web. Lorsque vous affichez l’aperçu d’une page, toutes les fonctions liées au navigateur doivent être opérationnelles, y compris les comportements JavaScript, les liens absolus et relatifs à un document, les contrôles ActiveX® et les plug-ins de navigateur, à condition que vous ayez installé les plug-ins ou les contrôles ActiveX requis dans vos navigateurs.

Avant d’ouvrir un document dans un navigateur, enregistrez-le, sinon le navigateur n’affichera pas les dernières modifications.

  1. Cliquez avec le bouton droit sur le nom de fichier dans la barre d’outils Document, puis sélectionnez Ouvrir dans le navigateur.

    Remarque :

    Si aucun navigateur ne figure dans la liste, cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac), puis sélectionnez la catégorie Aperçu dans le navigateur sur la gauche afin de sélectionner un navigateur. Pour plus d’informations, consultez la section Définition des préférences d’aperçu dans un navigateur.

  2. Cliquez sur les liens et testez le contenu de votre page.

    Remarque :

    Le contenu lié à un chemin relatif à la racine n’apparaît pas lorsque vous lancez l’aperçu de documents dans un navigateur local, sauf si vous spécifiez un serveur d’évaluation ou activez l’option Aperçu à l’aide d’un fichier temporaire dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites.

    Remarque :

    Pour lancer l’aperçu d’un contenu lié à des chemins relatifs à la racine, placez le fichier sur un serveur distant, puis choisissez Fichier > Aperçu dans le navigateur pour l’afficher.

  3. Lorsque vous avez terminé le test, fermez la page dans le navigateur.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne