Espace de travail de Dreamweaver

Premier lancement de Dreamweaver

Après avoir installé Dreamweaver, lorsque vous démarrez l'application pour la première fois, un menu QuickStart apparaît à l'écran et vous pose trois questions qui vous aident à personnaliser votre espace de travail Dreamweaver selon vos besoins.

En fonction de vos réponses à ces questions, Dreamweaver s'ouvre dans un Workspace Développeur (une mise en page minimale axée sur le code) ou dans un Workspace Standard (une mise en page fractionnée avec des outils visuels et un aperçu intégré pendant 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 ensuite commencer.

Améliorations de l’écran Accueil

L'écran Accueil de Dreamweaver vous donne un accès rapide à vos fichiers récemment utilisés, aux types de fichiers et aux modèles de démarrage.

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

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

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

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

Commencez à créer des documents dans Dreamweaver en cliquant sur l'un des types de fichiers affichés.

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

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 aucun fichier récent, 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 saisissez une requête de recherche, l'application affiche vos fichiers récents, les ressources Creative Cloud, les liens d'aide et les images de banque d'images qui correspondent à la requête de recherche.

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, voir Créer et ouvrir des 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.

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

L'espace de travail comprend les éléments suivants :

Se trouve en haut de la fenêtre d'application et contient un sélecteur d'espace de travail, des menus (Windows uniquement) et d'autres contrôles d'application.

Contient des boutons qui fournissent des options pour différentes vues de la fenêtre document (comme la vue Conception, la vue Live et la vue Code).

Pour afficher la barre d’outils standard, sélectionnez Fenêtre > Barres d’outils > Standard. La barre d'outils contient des boutons pour les opérations courantes des menus Fichier et Édition : Nouveau, Ouvrir, Enregistrer, Tout enregistrer, Imprimer le code, Couper, Copier, Coller, Annuler et Rétablir.

Se trouve sur le côté gauche de la fenêtre d'application et contient des boutons spécifiques à la vue.

Affiche le document que vous créez et modifiez.

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.

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.

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.

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

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.

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 Gérer les fichiers et dossiers.

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.

est un inspecteur de Propriétés CSS qui vous permet de créer « visuellement » des styles CSS, des fichiers et de définir des propriétés, ainsi que des requêtes multimédias.

Présentation de la fenêtre Document

La fenêtre Document affiche le document actif. Pour changer de vue du document, utilisez les options d'affichage de la barre d'outils Document. 

Vous pouvez également changer de vue à l'aide des options d'affichage du menu Affichage.

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 vue Live, voir Modifier les éléments HTML en vue Live.

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.

est un environnement de codage manuel pour écrire et modifier du HTML, du JavaScript et tout autre type de code.

est une version fractionnée de la vue Code qui vous permet de faire défiler pour travailler sur différentes sections du document en même temps. 

vous permet de voir à la fois la vue Code et la vue En direct pour le même document dans une seule fenêtre.

vous permet de voir à la fois la vue Code et la vue Création pour le même document dans une seule fenêtre.

affiche le code réel qu'un navigateur utilise pour exécuter la page, et peut changer dynamiquement lorsque vous interagissez avec la page dans la vue 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 de 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, voir Présentation de la barre d'outils Document.

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

• Vue Code uniquement : sélectionnez Code
• Vue fractionnée : sélectionnez Fractionner et sélectionnez l'une des options de fractionnement
• Mode d'affichage : basculez entre les vues En direct et Création
• Changer de vue : pour passer d'une vue à une autre.

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 > Organiser > Cascade.

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

• (Windows) Sélectionnez Fenêtre > Organiser > Mosaïque horizontale ou Mosaïque verticale.
• (Macintosh) Sélectionnez Fenêtre > Organiser > 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 de 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 de 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 Affichage 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 de document, sélectionnez l'une des tailles du menu contextuel Taille de fenêtre en bas de la fenêtre 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.

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

Ajout d’un nouveau format d’affichage au 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.

Les options suivantes s'affichent dans la barre d'outils de document :

Affiche uniquement le mode Code dans la fenêtre de document.

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

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 de grille fluide.

Affiche une représentation du document montrant comment l'utilisateur le voit dans un navigateur web. 

Présentation de la 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 pour les opérations courantes des menus Fichier et Édition : Nouveau, Ouvrir, Enregistrer, Tout enregistrer, Imprimer le code, Couper, Copier, Coller, Annuler et Rétablir.

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.

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 dans la vue Live, vous pouvez activer un clic unique ou un clic continu en sélectionnant Affichage > Options de la vue Live > Suivre les liens (Ctrl+clic sur le lien) ou Suivre les liens en continu.

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 dans la vue Live, les options spécifiques à la vue 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 les options de menu non désirées de la barre d'outils.

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

Pour restaurer les boutons par défaut de la barre d'outils, cliquez sur Restaurer 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.

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 montre les erreurs de codage dans votre document.

Coloration du code

(Disponible uniquement dans la vue Code)

Sélectionnez l'un des langages de codage de ce menu contextuel pour modifier la coloration du code afin qu'il s'affiche selon le langage de programmation.

Sélecteur d’insertion et de remplacement

(Disponible uniquement dans la vue Code)

Permet de basculer entre les modes Insertion et Remplacement lors du travail dans la vue Code.

Numéro de ligne et de colonne

(Disponible uniquement dans la vue Code.)

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

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

L'Inspecteur de propriétés (Fenêtre > Propriétés) permet d'examiner et de modifier les propriétés les plus courantes de l'élément de page actuellement sélectionné, tel que du 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).

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.

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

Menus contextuels

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 applicables à la sélection actuelle.

Pour ouvrir un menu contextuel, effectuez un clic droit (Windows) ou Ctrl+clic (Mac) sur une section de code dans la vue Code, ou sur un objet dans les vues Live ou Design.

Réorganisation des panneaux de Dreamweaver

Vous pouvez personnaliser l'emplacement et l'apparence de tous les panneaux de Dreamweaver selon vos exigences.

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.

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 de la souris (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 sauvegarder ces modifications dans votre espace de travail en l'enregistrant pour y accéder ultérieurement depuis le sélecteur d'espace de travail dans 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 sauvegarder un espace de travail personnalisé :

1. Choisissez Fenêtre > Agencement 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 du 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 du document.

Personnalisation de Dreamweaver dans les systèmes multiutilisateurs

Vous pouvez personnaliser Dreamweaver selon vos besoins même dans un système d'exploitation multi-utilisateur tel 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 à niveau Dreamweaver, Dreamweaver effectue automatiquement des copies de sauvegarde des fichiers de configuration utilisateur existants, donc si vous avez personnalisé ces fichiers manuellement, vous avez toujours accès aux modifications que vous avez apportées.

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 des panneaux couramment 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. Les boutons sont organisés en plusieurs catégories, que vous pouvez changer en sélectionnant la catégorie souhaitée dans la liste déroulante en haut.

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 pop-up du bouton Caractère, la prochaine fois que vous cliquerez sur le bouton Caractère, Dreamweaver insérera un saut de ligne.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 :

Vous permet de créer et d'insérer les éléments HTML les plus couramment utilisés tels que les balises div et les objets, tels que les images et les tableaux.

Contient des boutons pour créer des formulaires et insérer des éléments de formulaire, tels que recherche, mois et mot de passe.

Vous permet d'enregistrer le document sous forme de modèle et de marquer des zones spécifiques comme zones modifiables, facultatives, répétitives ou facultatives modifiables.

Contient des composants Bootstrap pour fournir la navigation, les conteneurs, les menus déroulants et plus encore que vous pouvez utiliser dans les projets en responsive design.

Contient des boutons pour créer des sites qui utilisent jQuery Mobile.

Vous permet d'insérer des éléments d'interface utilisateur jQuery tels que des accordéons, des curseurs et des boutons.

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

Insertion d’un objet

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

Modification des préférences du panneau Insertion

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

Présentation du panneau Fichiers

Utilisez le panneau Fichiers pour afficher et gérer les fichiers de votre site Dreamweaver.

Le panneau Fichiers vous 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. 

Pour plus d'informations sur tout ce que vous pouvez faire avec le panneau Fichiers, consultez Gérer les fichiers et dossiers.

CSS Designer

Le panneau Concepteur CSS (Fenêtres > Concepteur CSS) est un inspecteur de propriétés CSS qui vous permet de créer « visuellement » des styles CSS, des fichiers et de définir des propriétés, ainsi que des requêtes de mé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 surbrillance pendant un moment (environ 8 secondes).

Le panneau CSS Designer se compose des volets et options 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 des sélecteurs ou des requêtes de médias.

Ce mode ne prend pas en compte les éléments sélectionnés. Cela signifie que lorsque vous sélectionnez un élément sur la page, le sélecteur associé, la requête de médias ou le CSS ne sont pas mis en surbrillance dans Concepteur CSS.

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 actif 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 @Media, tous les sélecteurs qui ne sont pas inclus dans une requête de médias 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 Définir les 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 afficher les propriétés d'un sélecteur spécifique, cliquez sur le nom de ce sélecteur dans le volet.

Pour afficher tous les sélecteurs, vous pouvez choisir Toutes les sources dans le volet Sources. Pour afficher les sélecteurs qui n'appartiennent à aucune requête media dans la source sélectionnée, cliquez sur Global dans le volet @Media.

Présentation des guides visuels

Dreamweaver fournit plusieurs types de guides visuels pour vous aider à concevoir des documents et prévoir approximativement comment ils apparaîtront dans les navigateurs.Vous pouvez effectuer l'une des opérations suivantes :

• Adapter instantanément la taille de la fenêtre de document à un format d'affichage donné, 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 que 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 page

• Utilisez 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 de document de manière à pouvoir vérifier la précision des graphiques, sélectionner plus aisément de petits éléments, concevoir des pages avec un texte en petite taille, concevoir 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 > Grossissement, puis choisissez l'une des options de grossissement disponibles.

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

• Ajuster la sélection - Sélectionnez un objet ou du texte, puis choisissez cette option pour remplir la fenêtre de document avec la sélection.
• Ajuster tout - Remplit la fenêtre de document avec une page entière
• Ajuster la largeur - Remplit la fenêtre de document avec toute la largeur d'une page

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

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 d'un encodage par défaut pour les nouveaux documents, voir Création et ouverture de documents.

Personnalisation des couleurs de surbrillance de Dreamweaver

Utilisez les préférences de mise en surbrillance pour personnaliser les couleurs qui identifient les zones de modèle, les éléments de bibliothèque, les balises tierces, les éléments de mise en page et le code dans Dreamweaver.

Articles connexes

• Ouverture des fichiers associés
• Informations générales sur le codage dans Dreamweaver
• Définition des préférences de codage
• Affichage et modification de contenu d’en-tête
• Utilisation d’assistances visuelles pour la mise en forme
• Prévisualisation de pages
• Utilisation de fichiers depuis le panneau Fichiers