Guide d'utilisation Annuler

Prévisualisation de pages

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

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.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?