Espace de travail 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.

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.

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

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

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

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

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.

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

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

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.

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

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.

Sur le côté gauche de la fenêtre de l’application, cette barre 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. 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.

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 la section Gestion des dossiers et des fichiers.

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.

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.

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.

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.

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.

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

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

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

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

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.

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.

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 Document :

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

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.

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.

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

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.

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 :

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.

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

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

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.

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 :

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.

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.

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.

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.

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

Permet d’insérer des éléments d’interface utilisateur jQuery (par exemple, menus en accordéon, curseurs et 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

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. 

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

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

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 du codage par défaut des nouveaux documents, consultez la section Création et ouverture de documents.

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.