Prévisualisation de pages

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.

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. 

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.

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 :

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.

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.