Guide d'utilisation Annuler

Prévisualisation de pages

 

 

Prévisualisez vos pages Web dans Dreamweaver, dans les navigateurs.

L’aperçu en temps réel vous permet de prévisualiser les pages dans le navigateur et d’afficher les modifications effectuées dans le navigateur en temps réel à mesure que vous saisissez le code.

L’affichage en direct vous donne une idée de ce à quoi va ressembler votre page sur Internet et vous permet de modifier ses éléments avec l’affichage du 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

  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.

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

    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. 

  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 basculer entre l’aperçu en temps réel et l’aperçu dans le navigateur. Définissez les préférences que les navigateurs emploieront lors de l’affichage de l’aperçu d’un site, ainsi que 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.

    Aperçu en temps réel
    Aperçu dans le navigateur statique par défaut

    Si vous désélectionnez l’option Par défaut à l’aperçu du navigateur statique, l’aperçu en temps réel est désactivé. Vous pouvez utiliser les raccourcis clavier des navigateurs principal et secondaire pour ouvrir l’aperçu dans le navigateur. Vous pouvez également utiliser le menu Fichier ou cliquer sur l’icône d’aperçu du périphérique dans la barre d’état. 

  2. Pour ajouter un navigateur à 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.)

Aperçu dans le navigateur statique par défaut  Cela permettra aux utilisateurs de choisir le mode de prévisualisation de leurs fichiers dans le navigateur. En cochant la case, les utilisateurs peuvent prévisualiser les fichiers en utilisant « Ouvrir dans le navigateur » à partir des menus et en utilisant des raccourcis. Lorsque la case n’est pas cochée, la prévisualisation en temps réel sera utilisée pour la prévisualisation des fichiers dans les navigateurs. Par défaut, la case n’est pas cochée et l’aperçu en temps réel sera utilisé pour prévisualiser les fichiers dans le navigateur.

Prévisualisation de pages dans l’affichage en direct

L’affichage 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 Affichage 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 Affichage en direct, le mode Code reste modifiable, ce qui vous permet de modifier le code puis d’actualiser l’affichage 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 Affichage en direct, le mode Code en direct est un affichage non modifiable.

Un autre avantage du mode Affichage 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 dans l’affichage 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 Affichage en direct.

  3. (Facultatif) Apportez les modifications dans l’affichage du 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 dans le mode Affichage en direct, les options de modification à d’autres endroits (par exemple dans le panneau Styles CSS ou dans le mode Code) changent au fur et à mesure que vous cliquez dans l’affichage en direct.

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

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

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

Prévisualisation du code en direct

Le code affiché en mode Affichage du 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 dans l’affichage en direct.

  1. Veillez à vous trouver en mode Affichage 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 à l’affichage du code modifiable, cliquez à nouveau sur le bouton Code en direct.

Pour modifier les préférences du mode Code en direct, choisissez Modifier > Préférences (Windows) ou Dreamweaver > Préférences (MacOS), 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 Affichage 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 de l’affichage 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 actifs en permanence dans l’affichage en direct, 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 en savoir plus, 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 Modifier > 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 en savoir plus, 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.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?