Prévisualisation de pages dans Dreamweaver

L'affichage en direct diffère du mode Création traditionnel de Dreamweaver en ce sens qu'il offre un rendu non modifiable et plus réaliste de l'apparence de votre page dans un navigateur. L'affichage en direct ne remplace par la commande Aperçu dans le navigateur, mais fournit plutôt une façon différente de voir à quoi ressemble votre page « en direct » sans devoir quitter l'espace de travail de Dreamweaver.

Vous pouvez passer à l'affichage en direct à tout moment lorsque vous vous trouvez en mode Création. Toutefois, le passage à l'affichage 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 Affichage en direct, vous pouvez également décider d'afficher le code en direct. Le mode Code en direct est similaire au mode Affichage 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 Affichage en direct et survoler les lignes d'un tableau basé sur Spry qui changent de couleur de par l'interaction avec l'utilisateur. Lorsque vous figez le code JavaScript, le mode Affichage 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 l'affichage 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.

Vous trouverez un didacticiel vidéo relatif à l'utilisation du mode Affichage en direct, aux fichiers apparentés et à la fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr.

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 le mode Code, dans le panneau Styles CSS, dans une feuille de style CSS externe ou dans tout autre fichier apparenté.

   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) changement au fur et à mesure que vous cliquez dans l'affichage en direct.

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

4. Si vous avez apporté des modifications en mode Code ou dans un fichier apparenté, 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.

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 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é.

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

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.

Outre l'option Figer JavaScript, le menu du bouton Affichage 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 rend à nouveau la page de la manière dont elle se présenterait dans un navigateur où JavaScript serait désactivé.

Désactiver les plug-ins

Désactive les plug-ins et rend à nouveau la page de la manière dont elle se présenterait dans un navigateur où les plug-ins seraient désactivés.

Utiliser le serveur d'évaluation pour la source de document

Option employée principalement par les pages dynamiques (comme les pages ColdFusion), activée par défaut pour de telles pages. 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

Réglage 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 apparenté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.