Guide d'utilisation Annuler

Espace de travail de Dreamweaver

  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
  19. Résolution des problèmes
    1. Problèmes résolus
    2. Problèmes connus

 

 

Découvrez l’espace de travail de Dreamweaver, les différents affichages et espaces de travail qui vous sont proposés ainsi que tous les panneaux et barres d’outils du logiciel.

Premier lancement de Dreamweaver

Lors de la première exécution de Dreamweaver après son installation, un menu de démarrage rapide apparaît à l’écran. Les trois questions qui vous sont posées vous permettent de personnaliser l’espace de travail de Dreamweaver en fonction de vos besoins.

Selon vos réponses à ces questions, Dreamweaver s’ouvre dans un espace de travail de développeur (disposition minimaliste se concentrant sur le code) ou un espace de travail standard (disposition fractionnée avec des outils visuels et un aperçu intégré dans l’application à mesure que vous codez). 

Après avoir sélectionné un espace de travail, vous sélectionnez le thème de couleur qui vous convient. Vous pouvez alors commencer à utiliser l’application.

Remarque :

Vous pouvez modifier ces préférences d’espace de travail ultérieurement à l’aide de la boîte de dialogue Edition > Préférences.

Améliorations de l’écran Accueil

L’écran d’accueil de Dreamweaver vous permet d’accéder rapidement aux fichiers, aux types de fichiers et aux modèles de démarrage récemment utilisés.

Selon le statut de votre abonnement, l’espace de travail de démarrage peut également afficher un contenu adapté à vos besoins.

Dreamweaver affiche l’écran Accueil au lancement ou lorsqu’aucun document n’est ouvert.

Espace de travail de démarrage de Dreamweaver
Espace de travail de démarrage de Dreamweaver

Options de l’expérience Démarrage de Dreamweaver

Comprendre

Cliquez sur Comprendre pour accéder instantanément aux tutoriels Dreamweaver à partir de cet écran.

Prise en main

Commencez à créer des documents dans Dreamweaver en cliquant sur le type de fichier dont vous avez besoin parmi la liste affichée.

Modèles de démarrage

Ouvrez l’un des modèles de démarrage fournis avec Dreamweaver. 

Accueil

Cliquez sur Accueil pour revenir à l’écran de démarrage. 

Cet onglet permet d’afficher les fichiers sur lesquels vous avez récemment travaillé dans l’écran de démarrage. Si vous n’avez pas de fichiers récents, cet onglet est vide.

Vous pouvez également utiliser la fonctionnalité de recherche à l’aide de l’icône correspondante dans l’angle supérieur droit de cet écran. Lorsque vous entrez une requête de recherche, l’application affiche vos fichiers récents, des actifs Creative Cloud, des liens d’aide et des images qui correspondent à la requête.

Remarque :

Cet écran de démarrage est activé et s’ouvre par défaut. 

Si vous n’en avez pas besoin, désélectionnez l’option Afficher l’écran de démarrage dans la boîte de dialogue Préférences > Général.

Vous pouvez cliquer sur Créer pour commencer à créer des fichiers Dreamweaver. Si vous disposez déjà de fichiers dans votre système, cliquez sur Ouvrir. Pour plus d’informations sur la création et l’ouverture de documents dans Dreamweaver, consultez la section Création et ouverture de fichiers.

Présentation de l’espace de travail

L’espace de travail de Dreamweaver permet d’afficher des documents et les propriétés des objets. Il comporte des barres d’outils donnant accès aux opérations les plus courantes, vous permettant ainsi de modifier rapidement vos documents.

Espace de travail de Dreamweaver (CC)
Espace de travail de Dreamweaver

A. Barre d’application B. Barre d’outils Document C. Fenêtre Document D. Commutation d’espace de travail E. Panneaux F. Mode Code G. Barre d’état H. Sélecteur de balises I. Mode En direct J. Barre d’outils 

Présentation des éléments de l’espace de travail

L’espace de travail contient les éléments suivants :

Barre d’application

Située sur toute la largeur de la partie supérieure de la fenêtre d’application, cette barre contient un sélecteur d’espace de travail, des menus (Windows uniquement) et d’autres commandes applicatives.

Barre d’outils Document

Contient des boutons permettant d’accéder aux différents modes d’affichage de la fenêtre Document (tels que les modes Création, En direct et Code).

Barre d’outils standard

Pour afficher la barre d’outils standard, sélectionnez Fenêtre > Barres d’outils > Standard. La barre d’outils contient des boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Répéter.

Barre d’outils

Sur le côté gauche de la fenêtre de l’application, cette barre contient des boutons spécifiques à la vue.

Fenêtre Document

Affiche le document que vous créez et modifiez.

Inspecteur Propriétés

Permet de visualiser et de modifier diverses propriétés de l’objet ou du texte sélectionné. Chaque objet possède des propriétés différentes.

Sélecteur de balises

Situé dans la barre d’état, au bas de la fenêtre Document. Affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu.

Panneaux

Permettent de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le panneau CSS Designer et le panneau Fichiers. Pour développer un panneau, double-cliquez sur son onglet.

Panneau Extract

Permet de télécharger et afficher les fichiers PSD sur Creative Cloud. Avec ce panneau, vous pouvez extraire le CSS, le texte, les images, les polices, les couleurs, les dégradés et les mesures depuis vos compositions PSD dans votre document.

Panneau Insertion

Contient des boutons permettant d’insérer divers types d’objets, tels que des images, tableaux et éléments multimédias dans un document. Chaque objet est une portion de code HTML vous permettant de définir différents attributs lors de son insertion. Vous pouvez, par exemple, insérer un tableau en cliquant sur le bouton Tableau du panneau Insertion. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion au lieu d’utiliser le panneau Insertion.

Panneau Fichiers

Permet de gérer vos fichiers et dossiers, qu’ils fassent partie d’un site Dreamweaver ou qu’ils se trouvent sur un serveur distant. Le panneau Fichiers permet également d’accéder à tous les fichiers sur votre disque dur local. Pour plus d’informations, consultez la section Gestion des dossiers et des fichiers.

Panneau Fragments de code

Vous permet d’enregistrer et de réutiliser vos fragments de code sur plusieurs pages web, sur différents sites ainsi que sur différentes installations de Dreamweaver (en utilisant les paramètres de synchronisation). Pour plus d’informations, consultez la section Réutilisation de fragments de code.

Panneau CSS Designer

Inspecteur de propriétés CSS qui permet de créer « visuellement » des fichiers et des styles CSS, mais aussi de définir des propriétés et des requêtes multimédias.

Remarque :

Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres. Pour ouvrir les panneaux, inspecteurs et fenêtres, utilisez le menu Fenêtre.

Présentation de la fenêtre Document

La fenêtre Document affiche le document actif. Pour passer d’une vue du document à une autre, utilisez les options d’affichage de la barre d’outils Document. 

Vous pouvez également permuter entre les vues à l’aide des options d’affichage du menu Affichage.

Mode En direct

Fournit une représentation plus réaliste de l’apparence de votre document dans un navigateur. Il permet également d’interagir avec le document comme vous le feriez dans un navigateur. Vous pouvez modifier des éléments HTML directement en mode En direct et afficher instantanément, dans la même vue, un aperçu de vos modifications. Pour plus d’informations sur la modification en mode En direct, consultez la section Modification d’éléments HTML en mode En direct.

Mode Création

Environnement de création pour la mise en forme visuelle des pages, l’édition visuelle et le développement rapide d’applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entièrement modifiable du document, similaire à la représentation de la page sur un navigateur.

Mode Code

Environnement de codage manuel pour l’écriture et la modification du code HTML, JavaScript ou de tout autre type de code.

Code - Code

Version fractionnée du mode Code, qui permet de travailler dans différentes sections du document en même temps. 

Code - En direct

Permet d’afficher les modes Code et En direct du document dans une même fenêtre.

Code - Création

Permet d’afficher les modes Code et Création du document dans une même fenêtre.

Code en direct

Affiche le code qu’un navigateur utilise pour exécuter la page. Il peut changer de manière dynamique lorsque vous interagissez avec la page en mode En direct.

Lorsqu’une fenêtre Document est agrandie (mode d’affichage par défaut), des onglets s’affichent en haut de la fenêtre Document indiquant les noms de fichier de tous les documents ouverts. Dreamweaver affiche un astérisque après le nom du fichier si vous avez apporté des modifications que vous n’avez pas encore enregistrées.

Dreamweaver affiche également la barre d’outils Fichiers associés au-dessous de l’onglet du document (ou sous la barre de titre du document si vous avez affiché les documents dans des fenêtres séparées). Les documents associés sont des fichiers, par exemple CSS ou JavaScript, qui sont associés au fichier actuel. Pour ouvrir l’un de ces fichiers associés dans la fenêtre Document, cliquez sur son nom dans la barre d’outils Fichiers associés.

Permutation des vues

Utilisez la barre d’outils de document pour basculer rapidement entre les différentes vues. Pour plus d’informations, consultez la section Présentation de la barre d’outils Document.

Vous pouvez également permuter entre les vues à l’aide des options suivantes du menu Affichage :

  • Mode code uniquement : sélectionnez Code
  • Mode fractionné : sélectionnez Fractionner et choisissez ensuite l’option de fractionnement de votre choix
  • Mode d’affichage : basculez entre les modes En direct et Création
  • Changer de vue : pour passer d’une vue à l’autre.
Changement de vue à l’aide des options du menu Affichage
Changement de vue à l’aide des options du menu Affichage

Affichage en cascade ou en mosaïque, et réorganisation des fenêtres de document

Si plusieurs documents sont ouverts à la fois, vous pouvez les afficher en cascade ou en mosaïque.

Pour afficher en cascade les fenêtres de document : sélectionnez Fenêtre > Réorganiser > Cascade.

Pour afficher en mosaïque les fenêtres de document : 

  • (Windows) Sélectionnez Fenêtre > Arranger > Mosaïque horizontale ou Mosaïque verticale.
  • (Macintosh) Sélectionnez Fenêtre > Arranger > Mosaïque.

Les fenêtres de document comportent des onglets lorsque plusieurs fichiers sont ouverts. Pour modifier l’ordre des onglets de la fenêtre Document, faites glisser un onglet de la fenêtre à l’emplacement voulu dans le groupe.

Redimensionnement de la fenêtre Document

La barre d’état affiche les dimensions de la fenêtre Document sélectionnée (en pixels). Pour qu’une page s’affiche de façon optimale à une taille spécifique, vous pouvez régler la fenêtre Document sur l’une des tailles prédéterminées, modifier ces tailles prédéterminées ou en créer de nouvelles.

Lorsque vous modifiez la taille d’affichage d’une page en mode Création ou En direct, seules les dimensions de la vue changent. La taille du document n’est pas modifiée.

Outre les formats prédéterminés et personnalisés, Dreamweaver répertorie également les tailles spécifiées dans une requête multimédia. Lorsque vous sélectionnez une taille correspondant à une requête multimédia, Dreamweaver utilise cette requête multimédia pour afficher la page. Vous pouvez également modifier l’orientation de la page pour prévisualiser la page pour les appareils mobiles sur lesquels la disposition change selon la façon dont l’appareil est tenu.

Pour redimensionner la fenêtre Document, sélectionnez l’une des tailles affichées dans le menu contextuel Taille de la fenêtre au bas de la fenêtre Document.

Options de redimensionnement de document
Options de redimensionnement de document

La taille de la fenêtre correspond aux dimensions internes de la fenêtre de navigateur, bordures exclues ; la taille du moniteur ou l’appareil mobile est indiquée sur la droite.

Remarque :

Pour un redimensionnement moins précis des fenêtres, utilisez les méthodes standard de votre système d’exploitation, par exemple, en faisant glisser le coin inférieur droit d’une fenêtre.

Remarque :

(Windows uniquement) Les documents dans la fenêtre Document sont agrandis par défaut ; il est impossible de les redimensionner lorsqu’ils sont agrandis. Pour annuler l’affichage du document en mode agrandi, cliquez sur l’icône correspondante dans le coin supérieur droit du document.

Modification des valeurs figurant dans le menu contextuel Taille de la fenêtre

  1. Cliquez sur Modifier les tailles dans le menu contextuel Taille de la fenêtre.

  2. Cliquez sur une valeur de largeur ou de hauteur dans la liste Tailles de fenêtre, puis saisissez une nouvelle valeur. Pour que la fenêtre Document adopte uniquement une largeur spécifique sans que sa hauteur ne change, sélectionnez la valeur de hauteur et supprimez-la.

  3. Cliquez sur la zone Description pour saisir un texte décrivant la taille spécifique.

Ajout d’un nouveau format d’affichage au menu contextuel Taille de la fenêtre

  1. Cliquez sur Modifier les tailles dans le menu contextuel Taille de la fenêtre.

    Ajout de nouveaux formats d’affichage au menu contextuel Taille de la fenêtre
    Ajout de nouveaux formats d’affichage au menu contextuel Taille de la fenêtre

  2. Cliquez dans l’espace vierge qui apparaît sous la dernière valeur de la colonne Largeur.

  3. Indiquez les valeurs souhaitées pour Largeur et Hauteur.

    Pour définir soit la largeur, soit la hauteur, laissez l’un des champs vide.

  4. Cliquez dans le champ Description pour saisir un texte décrivant la taille ajoutée.

    Par exemple, vous pouvez saisir SVGA ou PC standard à côté de l’entrée correspondant à un moniteur d’une résolution de 800 x 600 pixels, et Mac 17 pouces à côté de l’entrée correspondant à un moniteur d’une résolution de 832 x 624 pixels. Diverses résolutions peuvent être réglées sur la plupart des moniteurs.

  5. Cliquez sur Appliquer, puis fermez la boîte de dialogue.

    La nouvelle taille de fenêtre est maintenant disponible dans le menu contextuel Taille de la fenêtre.

Présentation de la barre d’outils Document

La barre d’outils Document contient des boutons qui permettent de basculer rapidement entre différents mode d’affichage de votre document. La barre d’outils contient également plusieurs commandes et options courantes permettant d’afficher le document et de le transférer d’un site local vers un site distant.

Barre d’outils Document (CC)
Barre d’outils Document

Les options suivantes s’affichent dans la barre d’outils Document :

Mode Code

Affiche uniquement le mode Code dans la fenêtre Document.

Mode fractionné

Fractionne la fenêtre Document afin d’afficher le mode Code et les modes En direct/Création. Le mode Création n’est pas disponible pour les documents à grille fluide.

Mode En direct

Aperçu interactif qui restitue précisément les projets HTML5 et les actualise en temps réel pour afficher immédiatement les modifications effectuées. Vous pouvez également modifier les éléments HTML en mode En direct. La liste déroulante située en regard des options du mode En direct permet de basculer entre les modes En direct et Création. Cette liste déroulante n’est pas disponible dans les documents à grille fluide.

Mode Création

Affiche une représentation du document correspondant à la façon dont il s’affichera dans un navigateur web. 

Présentation de la barre d’outils standard

Barre d’outils standard

Pour afficher la barre d’outils standard, sélectionnez Fenêtre > Barres d’outils > Standard. La barre d’outils contient des boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Répéter.

Présentation de la barre d’outils Navigation de l’explorateur

La barre d’outils Navigation de l’explorateur devient active dans le mode En direct (uniquement si vous l’avez activée en choisissant Fenêtre -> Barres d’outils -> Standard), et vous indique l’adresse de la page que vous regardez dans la fenêtre Document. Le mode En direct se comporte comme un navigateur ordinaire. Ainsi, même si vous accédez à un site en dehors de votre site local (par exemple http://www.adobe.com), Dreamweaver charge la page dans la fenêtre Document.

Barre d’outils de navigation de l’explorateur (CC)
Barre d’outils de navigation de l’explorateur

A. Contrôles de navigateur B. Zone d’adresse 

Par défaut, les liens ne sont pas actifs en mode En direct. Si les liens ne sont pas actifs, vous pouvez sélectionner le texte d’un lien dans la fenêtre Document, ou cliquer sur celui-ci, sans accéder à une page différente. Pour tester les liens en mode En direct, vous pouvez permettre un clic unique ou des clics continus en sélectionnant Affichage > Options du mode en direct > Suivre les liens (Ctrl + clic sur lien) ou Suivre les liens de manière continue.

Présentation de la barre d’outils

La barre d’outils s’affiche à la verticale sur la gauche de la fenêtre Document. Elle est visible dans tous les modes d’affichage : Code, En direct et Création. Les boutons de la barre d’outils sont spécifiques au mode et apparaissent uniquement s’ils s’appliquent au mode que vous utilisez. Par exemple, si vous travaillez en mode En direct, les options spécifiques au mode Code, telles que Formater le code source, ne sont pas visibles. 

Personnalisation de la barre d’outils

Vous pouvez choisir de personnaliser cette barre d’outils selon vos besoins en ajoutant des options de menu ou en supprimant celles qui sont superflues.

Pour personnaliser la barre d’outils, procédez comme suit :

  1. Cliquez sur dans la barre d’outils pour ouvrir la boîte de dialogue Personnaliser.

    Personnalisation de la barre d’outils
    Personnalisation de la barre d’outils

  2. Activez ou désactivez les options de menu souhaitées sur la barre d’outils, puis cliquez sur Terminé pour enregistrer votre barre d’outils.

Pour rétablir les boutons par défaut de la barre d’outils, cliquez sur Restaurer les paramètres par défaut dans la boîte de dialogue Personnaliser la barre d’outils.

Présentation de la barre d’état

La barre d’état, située au bas de la fenêtre Document, fournit des informations supplémentaires sur le document en cours de création.

Barre d’état (CC)
Barre d’état

A. Sélecteur de balises B. Panneau Sortie C. Coloration du code D. Sélecteur d’insertion et de remplacement E. Numéro de ligne et de colonne 

Sélecteur de balises

Affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu. Cliquez sur <body> pour sélectionner tout le corps du document. Pour définir les attributs class ou id d’une balise dans le sélecteur de balises, cliquez sur la balise avec le bouton droit (Windows) ou maintenez la touche Option enfoncée et cliquez sur la balise (Macintosh) et choisissez une classe ou un ID dans le menu contextuel.

Panneau Sortie

Cliquez sur cette icône pour afficher le panneau Sortie qui répertorie les erreurs de codage contenues dans votre document.

Coloration du code

(disponible uniquement en mode Code)

Sélectionnez le langage de programmation de votre choix dans ce menu déroulant pour modifier la couleur du code en fonction du langage de programmation.

Sélecteur d’insertion et de remplacement

(disponible uniquement en mode Code)

Permet d’alterner entre les modes d’insertion et de remplacement lorsque vous travaillez en mode Code.

Numéro de ligne et de colonne

(disponible uniquement en mode Code)

Affiche le numéro de ligne et le numéro de colonne de l’emplacement où se trouve le curseur.

Présentation de l’inspecteur Propriétés

L’inspecteur Propriétés (Fenêtre > Propriétés) permet d’examiner et de modifier les propriétés les plus fréquentes de l’élément de la page sélectionnée, tel que le texte ou un objet inséré.

Le contenu de l’inspecteur Propriétés varie en fonction de l’élément sélectionné. Par exemple, si vous sélectionnez une image de la page, l’inspecteur Propriétés se modifie pour montrer les propriétés de l’image (telles que le chemin d’accès au fichier, la largeur et la hauteur de l’image, la bordure autour de l’image, s’il y a lieu, et ainsi de suite).

Inspecteur Propriétés (CC)
Inspecteur Propriétés

L’inspecteur Propriétés se trouve par défaut sur le bord inférieur de l’espace de travail. Vous pouvez toutefois le détacher et en faire un panneau flottant dans l’espace de travail.

Remarque :

L’inspecteur de balises permet d’afficher et de modifier les attributs associés aux propriétés d’une balise.

Pour accéder à l’aide relative à un inspecteur Propriétés spécifique, cliquez sur le bouton d’aide dans son coin supérieur droit, ou choisissez Aide dans son menu Options.

Affichage et modification des propriétés d’un élément de page

  1. Sélectionnez l’élément de la page dans la fenêtre Document.

    Si nécessaire, développez l’inspecteur Propriétés afin d’afficher toutes les propriétés de l’élément sélectionné.

  2. Modifiez les propriétés de votre choix dans l’inspecteur Propriétés.

    Remarque :

    Pour obtenir des informations sur des propriétés particulières, sélectionnez un élément dans la fenêtre Document, puis cliquez sur l’icône Aide (?) dans le coin supérieur droit de l’inspecteur Propriétés.

  3. Si les changements ne s’appliquent pas immédiatement dans la fenêtre Document, appliquez-les d’une des façons suivantes :

    • Cliquez hors des champs de texte de modification des propriétés.
    • Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
    • Appuyez sur la touche de tabulation pour passer à une autre propriété.

Les menus contextuels vous permettent d’accéder rapidement aux commandes et propriétés les plus utiles relatives à l’objet ou à la fenêtre avec lesquels vous travaillez. Les menus contextuels répertorient uniquement les commandes pouvant être appliquées à la sélection en cours.

Pour ouvrir un menu contextuel, cliquez avec le bouton droit (Windows) ou cliquez en appuyant sur la touche Ctrl (Mac) sur une section de code en mode Code, ou sur un objet en modes En direct ou Création.

Réorganisation des panneaux de Dreamweaver

Vous pouvez personnaliser le positionnement et l’aspect de tous les panneaux de Dreamweaver en fonction de vos besoins.

Ancrage et annulation d’ancrage de panneaux

  • Pour ancrer un panneau, cliquez sur l’onglet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre d’autres panneaux.
  • Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie située au-dessus des onglets) et faites-le glisser dans le dock.
  • Pour supprimer un panneau ou un groupe de panneaux, faites-le glisser en dehors du dock en cliquant sur l’onglet ou la barre de titre. Vous pouvez faire glisser l’élément vers un autre dock ou le rendre flottant.

Déplacement de panneaux

Lorsque vous déplacez des panneaux, des zones de dépôt en surbrillance bleue apparaissent : il s’agit des zones vers lesquelles vous pouvez déplacer le panneau. Vous pouvez, par exemple, déplacer un panneau vers le haut ou vers le bas en le faisant glisser sur la fine zone de largage bleue située au-dessus ou sous un autre panneau. Si vous faites glisser le panneau vers un emplacement autre qu’une zone de largage, ce dernier flotte dans l’espace de travail.

  • Pour déplacer un panneau, faites-le glisser en cliquant sur son onglet.
  • Pour déplacer un groupe de panneaux, faites glisser la barre de titre.
Remarque :

Pour empêcher l’ancrage d’un panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son déplacement. Pour annuler l’opération, appuyez sur la touche Echap lors du déplacement du panneau.

Ajout et suppression de panneaux

Lorsque vous supprimez tous les panneaux d’un dock, ce dernier disparaît. Vous pouvez créer un dock en déplaçant les panneaux vers le bord droit de l’espace de travail jusqu’à ce qu’une zone de largage soit visible.

  • Pour supprimer un panneau, cliquez sur son onglet avec le bouton droit (Windows) ou en appuyant sur la touche Contrôle (Mac), puis sélectionnez l’option Fermer ; vous pouvez également le désélectionner dans le menu Fenêtre.
  • Pour ajouter un panneau, sélectionnez-le dans le menu Fenêtre et ancrez-le à l’emplacement de votre choix.

Manipulation de groupes de panneaux

  • Pour déplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance située dans le groupe.
  • Pour réorganiser les panneaux d’un groupe, faites glisser l’onglet du panneau de votre choix vers son nouvel emplacement.
  • Pour rendre un panneau flottant, faites-le glisser en dehors du groupe au moyen de son onglet.
  • Pour déplacer un groupe, faites glisser la barre de titre (zone située au-dessus des onglets).

Empilage de panneaux flottants

Lorsque vous faites sortir un panneau de son dock et que vous le placez en dehors de toute zone de largage, ce panneau flotte dans l’espace de travail. Un panneau flottant peut être placé à n’importe quel endroit dans l’espace de travail. Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte qu’ils se comportent comme une seule entité lorsque vous faites glisser la barre de titre supérieure.

  • Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone de largage située au bas d’un autre panneau.
  • Pour modifier l’ordre d’empilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut ou vers le bas.
  • Pour rendre un panneau ou groupe de panneaux de la pile flottant, déplacez-le hors de la pile au moyen de son onglet ou de sa barre de titre.

Redimensionnement des panneaux

  • Pour réduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un onglet. Vous pouvez également double-cliquer sur la zone d’onglets (l’espace vide situé à côté des onglets).
  • Pour redimensionner un panneau, faites glisser l’un de ses côtés. 

Réduction et développement des icônes de panneaux

Vous pouvez réduire des panneaux à la taille d’icônes afin de limiter l’encombrement de l’espace de travail. Dans certains cas, les panneaux sont réduits de la sorte dans l’espace de travail par défaut.

  • Pour réduire ou développer toutes les icônes de panneau d’une colonne, cliquez sur la double flèche située dans la partie supérieure du dock.
  • Pour développer une seule icône de panneau, cliquez sur cette dernière.
  • Pour redimensionner les icônes de panneau afin de voir les icônes uniquement (et non les libellés), réglez la largeur du dock jusqu’à ce que le texte ne soit plus visible. Pour afficher à nouveau le texte, augmentez la largeur du dock.
  • Pour réduire à la taille d’une icône un panneau qui a été développé, cliquez sur son onglet, sur son icône ou sur la double flèche affichée dans sa barre de titre.

Création d’espaces de travail personnalisés

Vous pouvez personnaliser votre espace de travail en ajoutant ou en supprimant des panneaux en fonction de vos besoins. Vous pouvez ensuite enregistrer les modifications apportées à votre espace de travail en l’enregistrant pour une utilisation ultérieure dans le sélecteur d’espace de travail de la barre d’outils Document.

En enregistrant la taille et la position actuelles des panneaux comme espace de travail nommé, vous gardez la possibilité de restaurer cet espace par la suite, et ce, même si vous avez déplacé ou fermé un panneau.

Pour enregistrer un espace de travail personnalisé :

  1. Sélectionnez Fenêtre > Présentation de l’espace de travail > Nouvel espace de travail.
  2. Attribuez un nom à l’espace de travail.

L’espace de travail est enregistré et apparaît dans le sélecteur d’espace de travail de la barre d’outils Document.

Pour supprimer un espace de travail personnalisé :

Pour ouvrir la boîte de dialogue Gérer les espaces de travail, sélectionnez l’option Gérer les espaces de travail dans le sélecteur d’espace de travail de la barre d’application. Sélectionnez l’espace de travail, puis cliquez sur Supprimer.

Affichage de l’espace de travail ou basculement d’un espace de travail à l’autre

Sélectionnez un espace de travail dans le sélecteur d’espace de travail de la barre d’outils Document.

Personnalisation de Dreamweaver dans les systèmes multiutilisateurs

Dreamweaver peut être personnalisé selon les besoins, même dans les systèmes multiutilisateurs tels que Windows XP ou Mac OS X.

Dreamweaver empêche que la configuration personnalisée d’un utilisateur n’affecte celle d’un autre. Pour ce faire, la première fois que vous exécutez Dreamweaver sur l’un des systèmes multiutilisateurs reconnus, l’application crée des copies de différents fichiers de configuration. Ces fichiers sont enregistrés dans un dossier vous appartenant.

Si vous réinstallez ou mettez Dreamweaver à jour, Dreamweaver crée automatiquement des copies de sauvegarde des fichiers de configuration existants. Ainsi, si vous avez personnalisé manuellement ces fichiers, vos modifications restent disponibles.

Affichage de documents à onglets (Mac uniquement)

Vous pouvez afficher plusieurs documents dans une seule fenêtre Document avec des onglets qui identifient chacun des documents. Vous pouvez aussi les afficher sous la forme d’une partie de l’espace de travail flottant dans laquelle chaque document s’affiche dans sa propre fenêtre.

Ouverture d’un document à onglets dans une fenêtre séparée

Cliquez en maintenant la touche Ctrl enfoncée sur l’onglet, puis sélectionnez Déplacer dans une nouvelle fenêtre dans le menu contextuel.

Modification du paramètre de document à onglets par défaut

  1. Sélectionnez Dreamweaver > Préférences, puis la catégorie Général.
  2. Sélectionnez ou désélectionnez Ouvrir les documents dans des onglets, puis cliquez sur OK.

Dreamweaver ne modifie pas l’affichage des documents ouverts lorsque vous modifiez les préférences. En revanche, une fois que vous avez sélectionné une nouvelle préférence, les documents ouverts s’affichent en fonction de cette dernière.

L’écran de bienvenue s’affiche lorsque vous démarrez Dreamweaver ou lorsqu’aucun document n’est ouvert. Vous pouvez masquer l’écran de bienvenue, puis l’afficher de nouveau ultérieurement selon vos besoins. Lorsque l’écran de bienvenue est masqué et qu’aucun document n’est ouvert, la fenêtre Document est vide.

Panneaux courants de Dreamweaver

Vous travaillez avec plusieurs panneaux dans Dreamweaver. Certains de ces panneaux fréquemment utilisés sont décrits ici.

Présentation du panneau Insertion

Les boutons qui composent le panneau Insertion (Fenêtre > Insertion) permettent de créer et d’insérer des objets, tels que des tableaux, des images et des liens. Ces boutons sont organisés en plusieurs catégories que vous pouvez afficher en alternance en choisissant la catégorie désirée dans la liste déroulante en haut.

Panneau Insertion
Panneau Insertion

Certaines catégories disposent de boutons ouvrant des menus contextuels. Lorsque vous sélectionnez une option dans l’un d’eux, l’action associée est attribuée par défaut au bouton. Par exemple, si vous sélectionnez Saut de ligne dans le menu contextuel du bouton Caractère, la prochaine fois que vous cliquerez sur le bouton Caractère, un saut de ligne sera inséré. Lorsque vous sélectionnez une nouvelle option dans l’un de ces menus, l’action attribuée par défaut au bouton change.

Le panneau Insertion est organisé en différentes catégories, comme suit :

HTML

Permet de créer et d’insérer les éléments HTML les plus couramment utilisés tels que les balises div, des objets tels que des images, ainsi que des tableaux.

Formulaire

Contient des boutons permettant de créer des formulaires et d’insérer des éléments de formulaire, comme la recherche, le mois ou encore le mot de passe.

Modèles

Permet d’enregistrer le document en tant que modèle et de marquer des régions données comme étant modifiables, facultatives ou répétées.

Composants Bootstrap

Contient des composants Bootstrap qui fournissent notamment des fonctions de navigation, des conteneurs et des listes déroulantes que vous pouvez utiliser dans les projets réactifs.

jQuery Mobile

Contient des boutons destinés à la création de sites qui utilisent jQuery Mobile.

Interface utilisateur jQuery

Permet d’insérer des éléments d’interface utilisateur jQuery (par exemple, menus en accordéon, curseurs et boutons).

Favoris

Permet de regrouper et d’organiser, dans un espace commun, les boutons du panneau Insertion que vous utilisez le plus fréquemment.

Remarque :

 Si vous utilisez certains types de fichiers, tels que XML, JavaScript, Java et CSS, le panneau Insertion et l’option de mode Création sont grisés, car vous ne pouvez pas insérer d’éléments dans ces fichiers de code.

Insertion d’un objet

Pour insérer un objet à l’aide du panneau Insertion :

  1. Choisissez la catégorie appropriée dans le menu Catégorie du panneau Insertion.

  2. Effectuez l’une des opérations suivantes :

    • Cliquez sur un bouton d’objet ou faites glisser l’icône du bouton dans la fenêtre Document (en mode Création, En direct ou Code).

    • Cliquez sur la flèche d’un bouton, puis sélectionnez une option dans le menu.

      Selon le type d’objet que vous sélectionnez, une boîte de dialogue d’insertion d’objet s’affiche, le cas échéant, et vous invite à rechercher un fichier ou à spécifier les paramètres d’un objet spécifique. En outre, Dreamweaver peut insérer du code dans le document ou ouvrir un panneau ou un éditeur de balises vous permettant de spécifier des informations avant l’insertion du code.

      Dans le cas de certains objets, aucune boîte de dialogue ne s’affiche si vous insérez les objets en mode Création, mais un éditeur de balises s’affiche si vous insérez les objets en mode Code. Pour certains objets, l’insertion de l’objet en mode Création peut entraîner le basculement de Dreamweaver en mode Code avant l’insertion.

Modification des préférences du panneau Insertion

  1. Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).

  2. Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l’option Afficher la boîte de dialogue lors de l’insertion d’objets pour supprimer les boîtes de dialogue lors de l’insertion d’objets, tels que des images, des tableaux, des scripts ou des éléments d’en-tête. Vous pouvez également maintenir la touche Ctrl (Windows) ou Option (Macintosh) enfoncée tandis que vous créez l’objet.

Remarque :

Si cette option est désactivée lorsque vous insérez un objet, celui-ci aura des valeurs par défaut. Utilisez l’inspecteur Propriétés pour modifier les propriétés de l’objet après l’avoir inséré.

Ajout, suppression ou gestion des boutons de la catégorie Favoris du panneau Insertion

  1. Sélectionnez l’une des catégories du panneau Insertion.

  2. Cliquez à l’aide du bouton droit (Windows) ou tout en maintenant la touche Contrôle enfoncée (Macintosh) à l’endroit où les boutons s’affichent, puis choisissez Personnaliser les favoris.

  3. Dans la boîte de dialogue Personnaliser les objets favoris, apportez les modifications désirées, puis cliquez sur OK.

    Pour ajouter un objet, sélectionnez-le dans le volet Objets disponibles situé à gauche, puis cliquez sur la flèche située entre les deux volets ou cliquez deux fois sur l’objet dans le volet Objets disponibles.

    Personnalisation des favoris du panneau Insertion
    Personnalisation des favoris du panneau Insertion

    Remarque :

    Les objets doivent être ajoutés un par un. Il est impossible de sélectionner un nom de catégorie tel que Commun afin d’ajouter une catégorie entière à votre liste de favoris.

    • Pour supprimer un objet ou un séparateur, sélectionnez-le dans le volet Objets favoris situé à droite, puis cliquez sur le bouton Supprimer l’objet sélectionné dans la liste Objets favoris, au-dessus du volet.
    • Pour déplacer un objet, sélectionnez-le dans le volet Objets favoris situé à droite, puis cliquez sur le bouton fléché pointant vers le haut ou vers le bas situé au-dessus du volet.
    • Pour ajouter un séparateur sous un objet, sélectionnez un objet dans le volet Objets favoris situé à droite, puis cliquez sur le bouton Ajouter un séparateur situé au-dessous du volet.
  4. Si la catégorie Favoris n’est pas la catégorie active, sélectionnez-la afin de voir les modifications apportées.

Présentation du panneau Fichiers

Vous pouvez utiliser le panneau Fichiers pour afficher et exploiter les fichiers dans votre site Dreamweaver.

Le panneau Fichiers permet d’afficher des fichiers et des dossiers, de vérifier s’ils sont ou non associés à un site Dreamweaver, et d’effectuer des opérations courantes de maintenance, comme l’ouverture et le déplacement de fichiers.

Le panneau Fichiers permet également de gérer et de transférer des fichiers vers un serveur distant et à partir de celui-ci. 

Panneau Fichiers
Panneau Fichiers

Pour plus d’informations sur toutes les fonctions du panneau Fichiers, consultez la section Gestion des fichiers et des dossiers.

CSS Designer

Le panneau CSS Designer (Windows > CSS Designer) est un inspecteur Propriétés CSS qui permet de créer « visuellement » des styles et des fichiers CSS, mais aussi de définir des propriétés et des requêtes multimédias.

Vous pouvez utiliser les touches Ctrl/Cmd + Z pour annuler ou Ctrl/Cmd + Y pour rétablir toutes les opérations que vous réalisez dans CSS Designer. Les modifications sont automatiquement appliquées dans la vue En direct et le fichier CSS approprié est également actualisé. Pour que vous sachiez que le fichier associé a été modifié, l’onglet du fichier concerné est mis en évidence pendant quelques instants (environ 8 secondes).

Panneau CSS Designer (CC)
Panneau CSS Designer

Le panneau CSS Designer se compose des options et volets suivants :

Tout Affiche l’ensemble des styles CSS, requêtes multimédias et sélecteurs associés au document actif. Vous pouvez appliquer un filtre pour afficher les règles CSS souhaitées et modifier les propriétés associées. Vous pouvez également utiliser ce mode pour commencer à créer vos sélecteurs ou vos requêtes multimédias.

Ce mode ne prend pas en compte les éléments sélectionnés. Autrement dit, lorsque vous sélectionnez un élément sur la page, le sélecteur, la requête multimédia et le style CSS associés ne sont pas mis en évidence dans CSS Designer.

Actuel Affiche tous les styles calculés pour chaque élément du document actif sélectionné en mode En direct ou Création. Lorsque vous utilisez ce mode pour un fichier CSS en mode Code, toutes les propriétés du sélecteur choisi sont affichées.

Ce mode fonctionne de façon contextuelle. Utilisez cette option pour modifier les propriétés des sélecteurs associés aux éléments sélectionnés dans le document.

Sources Répertorie toutes les feuilles de style CSS associées au document. Ce volet permet de créer et joindre un style CSS au document, ou de définir des styles dans le document.

@Requêtes multimédias Répertorie toutes les requêtes multimédias dans la source sélectionnée dans le volet Sources. Si vous ne sélectionnez pas un style CSS spécifique, ce volet affiche toutes les requêtes multimédias associées au document.

Sélecteurs Répertorie tous les sélecteurs dans la source sélectionnée dans le volet Sources. Si vous sélectionnez également une requête multimédia, ce volet affine la liste des sélecteurs pour cette requête multimédia. Si vous n’avez sélectionné aucun style CSS ou requête multimédia, ce volet affiche tous les sélecteurs dans le document.

Lorsque vous sélectionnez Global dans le volet @Requêtes multimédias, tous les sélecteurs qui ne sont pas inclus dans une requête multimédia de la source sélectionnée sont affichés.

Propriétés Affiche les propriétés que vous pouvez définir pour le sélecteur spécifié. Pour plus d’informations, consultez la section Définition des propriétés.

Si vous réduisez ou agrandissez les volets dans CSS Designer, les dimensions définies sont mémorisées tout au long de la session active. Les volets Sources et Requêtes multimédias conservent leur format personnalisé tant que vous ne décidez pas de les redimensionner à nouveau.

Remarque : Lorsque vous sélectionnez un élément de page, le sélecteur le plus adapté est sélectionné dans le volet Sélecteurs. Pour consulter les propriétés d’un sélecteur donné, cliquez sur son nom dans le volet.

Pour afficher tous les sélecteurs, vous pouvez choisir Toutes les sources dans le volet Sources. Pour afficher des sélecteurs qui n’appartiennent pas à une requête multimédia dans la source sélectionnée, cliquez sur Global dans le panneau @Requêtes multimédias.

Présentation des guides visuels

Dreamweaver met à votre disposition plusieurs types de guides visuels pour vous aider à créer vos documents et à prévoir approximativement l’aspect qu’ils auront dans un navigateur. Vous pouvez effectuer les opérations suivantes :

  • Adapter instantanément la taille de la fenêtre Document au format d’affichage souhaité, afin de contrôler la disposition des éléments sur la page.

  • Utiliser un tracé d’image en arrière-plan de la page, de manière à pouvoir reproduire plus aisément une mise en forme créée dans une application graphique telle qu’Adobe® Photoshop® ou Adobe® Fireworks®.

  • Utiliser des règles et des guides comme repère visuel pour le positionnement et le redimensionnement précis des éléments de la page.

  • Utiliser la grille afin d’effectuer un positionnement et un redimensionnement précis des éléments à positionnement absolu (PA).

    Si la fonction d’alignement automatique est activée, les éléments PA s’alignent automatiquement sur le croisillon de grille le plus proche lorsqu’ils sont déplacés ou redimensionnés (d’autres objets, par exemple les images et les paragraphes, ne sont pas aimantés par la grille). L’alignement fonctionne même si la grille n’est pas visible.

Zoom avant ou arrière sur une page

Dreamweaver permet d’agrandir (zoom avant) l’affichage de la fenêtre Document de manière à pouvoir vérifier la précision des graphiques, sélectionner plus aisément de petits éléments, créer des pages avec un texte en petite taille, créer de très grande pages, etc.

Pour effectuer un zoom avant ou arrière sur une page, sélectionnez Affichage > Options du mode Création > Agrandissement, puis choisissez l’une des options d’agrandissement disponibles.

Vous pouvez utiliser une grande variété d’options d’agrandissement. Vous pouvez également :

  • Ajuster à la section – Sélectionnez un objet ou du texte et choisissez cette option pour remplir la fenêtre Document avec la sélection.
  • Ajuster à la page – Adaptez la fenêtre Document à une page entière
  • Ajuster à la largeur – Adaptez la fenêtre Document à la largeur d’une page
Remarque :

Vous pouvez également effectuer un grossissement avec l’outil Zoom en appuyant sur Ctrl+= (Windows) ou Cmd+= (Macintosh). Vous pouvez également effectuer une réduction avec l’outil Zoom en appuyant sur Ctrl+- (Windows) ou Cmd+- (Macintosh).

Définition des préférences générales de Dreamweaver

  1. Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).

  2. Parmi les options suivantes, définissez celles de votre choix :

    Ouvrir les documents dans des onglets Ouvre tous les documents dans une seule fenêtre contenant des onglets, ce qui permet de passer facilement d’un document à l’autre (Mac uniquement).

    Afficher l’écran de démarrage Affiche l’écran de bienvenue de Dreamweaver lorsque vous démarrez Dreamweaver ou qu’aucun document n’est ouvert.

    Rouvrir les documents au démarrage Ouvre tous les documents qui étaient ouverts lorsque vous avez fermé Dreamweaver. Si cette option n’est pas sélectionnée, Dreamweaver affiche l’écran de bienvenue ou un écran vide au démarrage (selon les paramètres définis pour l’option Afficher l’écran de bienvenue).

    Avertir à l’ouverture de fichiers en lecture seule Vous avertit lorsque vous ouvrez un fichier en lecture seule (verrouillé). Vous pouvez déverrouiller/extraire le fichier, l’afficher en lecture seule ou annuler l’action.

    Activer les fichiers associés Permet de savoir quels fichiers sont associés au document actuel (par exemple, des fichiers CSS ou JavaScript). Dreamweaver affiche un bouton pour chaque fichier associé en haut du document. Si vous cliquez sur l’un de ces boutons, le fichier correspondant est ouvert.

    Découvrir les fichiers à association dynamique Permet d’indiquer si les fichiers à association dynamique doivent apparaître automatiquement dans la barre d’outils Fichiers associés, ou uniquement après une interaction manuelle. Vous pouvez également désactiver la recherche de fichiers à association dynamique.

    Mettre à jour les liens lors du déplacement de fichiers Détermine ce qui se passe lorsque vous déplacez, renommez ou supprimez un document dans un site. Vous pouvez définir cette préférence de trois façons différentes : les liens sont toujours automatiquement mis à jour, les liens ne sont jamais mis à jour ou un message vous demande s’il convient d’exécuter une mise à jour (voir Mise à jour automatique des liens).

    Afficher la boîte de dialogue lors de l’insertion d’un objet Détermine si Dreamweaver vous invite à saisir des informations supplémentaires lorsque vous insérez des images, des tableaux, des animations Shockwave et certains autres objets à l’aide du panneau ou du menu Insertion. Si cette option est désactivée, aucune boîte de dialogue ne s’affiche ; dans ce cas, précisez le fichier source pour les images, le nombre de lignes dans un tableau, etc. dans l’inspecteur Propriétés. Lorsque vous insérez des images avec effet de survol ou du code HTML Fireworks, une boîte de dialogue s’affiche toujours, quel que soit le réglage de cette option. (Pour remplacer temporairement ce paramètre, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris lorsque vous créez et insérez des objets.)

    Activer l’entrée en ligne à deux octets Permet de saisir des caractères codés sur deux octets directement dans la fenêtre Document, si vous utilisez un environnement de développement ou un kit linguistique facilitant la saisie de caractères codés sur deux octets (les caractères japonais, par exemple). Si cette option est désélectionnée, une fenêtre de saisie de texte s’affiche, dans laquelle vous entrez et convertissez le texte à deux octets ; le texte apparaît dans la fenêtre Document après avoir été accepté.

    Passer en paragraphe normal après le titre Indique qu’en appuyant sur la touche Entrée (Windows) ou Retour (Macintosh) à la fin d’un paragraphe de titre en mode Création ou En direct, vous créez un paragraphe indiqué par une balise p (un paragraphe de titre est indiqué par une balise de titre, telle que h1 ou h2). Lorsque cette option est désactivée, en appuyant sur la touche Entrée ou Retour à la fin d’un paragraphe de titre, vous créez un nouveau paragraphe indiqué par la même balise de titre (ce qui vous permet de saisir plusieurs titres à la suite les uns des autres, puis d’ajouter les détails ultérieurement).

    Autoriser plusieurs espaces consécutifs Indique qu’en saisissant deux espaces ou plus en mode Création ou En direct, vous créez des espaces insécables qui s’affichent sous forme de plusieurs espaces dans un navigateur (par exemple, vous pouvez taper deux espaces entre les phrases, tout comme vous le faites sur une machine à écrire). Cette option est conçue principalement pour les personnes qui utilisent les traitements de texte. Lorsque cette option est désactivée, les espaces multiples sont traités comme des espaces simples (car les navigateurs traitent les espaces multiples comme des espaces simples).

    Utiliser <strong> et <em> au lieu de <b> et <i> Détermine que Dreamweaver applique la balise strong lorsque vous effectuez une action qui appliquerait normalement la balise b, et la balise em lorsque vous effectuez une action qui appliquerait normalement la balise i. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique de l’inspecteur Propriétés de texte en mode HTML et de choisir Format > Style > Gras ou Format > Style > Italique. Pour utiliser les balises b et i dans vos documents, désélectionnez cette option.

    Remarque : Le World Wide web Consortium recommande d’éviter les balises b et i ; les balises strong et em fournissent des informations plus riches sémantiquement.

    Avertir lors du placement de régions modifiables dans des balises <p> ou <h1>-<h6> Indique si un message d’avertissement s’affiche lorsque vous enregistrez un modèle Dreamweaver présentant une région modifiable dans une balise de paragraphe ou de titre. Le message vous informe que les utilisateurs ne pourront pas créer de paragraphes supplémentaires dans la région. Cette option est activée par défaut.

    Limiter les actions d’annulation au document actif Limite le nombre d’opérations d’annulation au fichier en cours de modification. Par exemple, si vous modifiez un fichier CSS, vous pouvez annuler les modifications uniquement apportées au fichier CSS.

    Toutefois, si cette case à cocher est désactivée, la source HTML et tous les fichiers CSS associés utilisent un seul historique d’annulation et vous pouvez annuler vos actions, que vous travailliez avec du code HTML ou dans un fichier CSS associé.

    Nombre maximum d’étapes d’historique Détermine le nombre d’étapes mémorisées par Dreamweaver. (La valeur par défaut devrait être suffisante pour la plupart des utilisateurs.) Si vous dépassez le nombre donné d’étapes, les étapes les plus anciennes sont ignorées.

    Dictionnaire orthographique Affiche la liste des dictionnaires orthographiques disponibles. Si un dictionnaire contient plusieurs dialectes ou conventions orthographiques (par exemple, l’anglais britannique et l’anglais américain), lesdits dialectes sont répertoriés individuellement dans le menu contextuel Dictionnaire.

Définition des préférences de police pour les documents sous Dreamweaver

Le codage d’un document détermine la façon dont le document s’affiche dans un navigateur. Les préférences de polices de Dreamweaver vous permettent d’utiliser un texte affiché dans la police et la taille de votre choix. Toutefois, les polices sélectionnées dans la boîte de dialogue Préférences des polices n’influent que sur la façon dont les documents s’affichent sous Dreamweaver. Elles n’ont aucun impact sur la façon dont ils s’affichent dans le navigateur d’un visiteur. Pour modifier la façon dont les polices s’affichent dans un navigateur, vous devez modifier le texte à l’aide de l’inspecteur Propriétés ou en appliquant une règle CSS.

Pour plus d’informations sur la définition du codage par défaut des nouveaux documents, consultez la section Création et ouverture de documents.

  1. Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).

  2. Sélectionnez la catégorie Polices dans la liste de gauche.

  3. Sélectionnez le type de codage désiré (par exemple, Occidental ou Japonais) dans la liste Paramètres de la police.

    Remarque :

    Pour afficher un document en langue asiatique, il est indispensable que votre système d’exploitation prenne en charge les polices à deux octets.

  4. Sélectionnez une police et un format à utiliser pour chaque catégorie du codage sélectionné.

    Remarque :

    Pour qu’une police apparaisse dans les menus contextuels correspondants, il est indispensable de l’installer sur votre ordinateur. Par exemple, si vous souhaitez visualiser un texte rédigé en japonais, il vous faut installer un jeu de caractères japonais au préalable.

    Proportionnelle

    La police proportionnelle est utilisée par Dreamweaver pour afficher du texte normal (par exemple, un texte contenu dans des paragraphes, des en-têtes et des tableaux). La valeur par défaut varie en fonction des polices installées sur votre système. Pour la plupart des systèmes français, la police proportionnelle par défaut est Times New Roman 12 pt (moyen) sous Windows et Times 12 pt sous Mac OS.

    Police fixe

    Il s’agit de la police utilisée par Dreamweaver pour afficher le texte figurant dans les balises pre, code et tt. La valeur par défaut varie en fonction des polices installées sur votre système. Pour la plupart des systèmes français, la police fixe par défaut est Courier New 10 pt (petit) sous Windows et Monaco 12 pt sous Mac OS.

    Mode Code

    Police utilisée dans tout le texte qui apparaît dans le mode d’affichage Code et dans l’inspecteur de code. La valeur par défaut varie en fonction des polices installées sur votre système.

Personnalisation des couleurs de surbrillance de Dreamweaver

Les préférences de surbrillance servent à personnaliser les couleurs utilisées sous Dreamweaver pour identifier les zones d’un modèle, les éléments d’une bibliothèque, les balises tierces, les éléments de mise en forme et le code.

  1. Cliquez sur Edition > Préférences, puis choisissez la catégorie Surbrillance.

  2. En regard de l’objet dont vous souhaitez modifier la couleur de surbrillance, cliquez sur le sélecteur de couleur, puis utilisez la palette de couleur pour sélectionner une nouvelle couleur. Vous pouvez également saisir une valeur hexadécimale.

  3. Pour activer ou désactiver la mise en surbrillance d’une option particulière, sélectionnez ou désélectionnez l’option Afficher.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?