- Guide de l’utilisateur de Dreamweaver
- Introduction
- Dreamweaver et Creative Cloud
- Espaces de travail et affichages Dreamweaver
- Configuration de sites
- À propos des sites Dreamweaver
- Création d’une version locale de votre site
- Connexion à un serveur de publication
- Configuration d’un serveur d’évaluation
- Importation et exportation des paramètres d’un site Dreamweaver
- Importation de sites web d’un serveur distant vers la racine de votre site local
- Fonctions d’accessibilité dans Dreamweaver
- Paramètres avancés
- Définition des préférences de site pour le transfert de fichiers
- Indication des paramètres du serveur proxy dans Dreamweaver
- Synchronisation des paramètres de Dreamweaver avec Creative Cloud
- Utilisation de Git dans Dreamweaver
- Gestion des fichiers
- Création et ouverture de fichiers
- Gestion des fichiers et des dossiers
- Acquisition et placement de fichiers depuis ou vers votre serveur
- Archivage et extraction de fichiers
- Synchronisation de fichiers
- Comparaison de fichiers pour analyse de leurs différences
- Masquage de fichiers et de dossiers dans votre site Dreamweaver
- Activation des notes de conception pour les sites Dreamweaver
- Prévention de l’exploitation potentielle de Gatekeeper
- Mise en page et design
- Utilisation d’assistances visuelles pour la mise en forme
- À propos de l’utilisation de CSS pour mise en forme de votre page
- Création de sites web en responsive design avec Bootstrap
- Création et utilisation des requêtes de multimédia dans Dreamweaver
- Présentation de contenus dans des tableaux
- Couleurs
- Design réactif à l’aide de mises en forme à grille fluide
- Extract dans Dreamweaver
- CSS
- Description des feuilles de style en cascade
- Mise en forme de pages avec CSS Designer
- Utilisation de préprocesseurs CSS dans Dreamweaver
- Comment définir les préférences de Style CSS dans Dreamweaver
- Déplacement des règles CSS dans Dreamweaver
- Conversion de code CSS intégré en règle CSS dans Dreamweaver
- Utilisation de balises div
- Application de dégradés à l’arrière-plan
- Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
- Formatage du code
- Contenu de page et actifs
- Définition des propriétés de page
- Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
- Utilisation du texte
- Recherche et remplacement de texte, de balises et d’attributs
- Panneau DOM
- Modification en mode En direct
- Le codage de documents dans Dreamweaver
- Sélection et affichage d’éléments dans la fenêtre de document
- Définition des propriétés de texte dans l’inspecteur Propriétés
- Vérification de l’orthographe d’une page web
- Utilisation de règles horizontales dans Dreamweaver
- Ajout et modification de combinaisons de polices dans Dreamweaver
- Utilisation d’actifs
- Insertion et mise à jour des dates dans Dreamweaver
- Création et gestion des actifs favoris dans Dreamweaver
- Insertion et modification d’images dans Dreamweaver
- Ajout d’objets multimédias
- Ajout de vidéos dans Dreamweaver
- Insertion de vidéo HTML5
- Insertion de fichiers SWF
- Ajout d’effets audio
- Insertion de fichiers audio HTML5 dans Dreamweaver
- Utilisation d’éléments de bibliothèque
- Utilisation de texte arabe et hébreu dans Dreamweaver
- Liens et navigation
- Effets et widgets jQuery
- Codage de sites web
- À propos du codage dans Dreamweaver
- Environnement de codage dans Dreamweaver
- Définition des préférences de codage
- Personnalisation de la coloration du code
- Rédaction et modification de code
- Conseils et remplissage de code
- Réduction et développement de code
- Réutilisation de code à l’aide de fragments
- Analyse linting de code
- Optimisation du code
- Modification de code en mode Création.
- Utilisation de contenu d’en-tête pour les pages
- Insertion d’inclusions côté serveur dans Dreamweaver
- Utilisation des bibliothèques de balises dans Dreamweaver
- Importation de balises personnalisées dans Dreamweaver
- Utilisation de comportements JavaScript (instructions générales)
- Application de comportements JavaScript intégrés
- À propos de XML et de XSLT
- Exécution de transformations XSL côté serveur dans Dreamweaver
- Exécution de transformations XSL côté client dans Dreamweaver
- Ajout d’entités de caractère pour XSLT dans Dreamweaver
- Formatage du code
- Flux de travaux inter-produit
- Installation et utilisation des extensions pour Dreamweaver
- Mises à jour intégrées dans Dreamweaver
- Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
- Utilisation de Fireworks et Dreamweaver
- Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
- Intégration entre Dreamweaver et Business Catalyst
- Création de campagnes de messagerie personnalisées
- Modèles
- À propos des modèles Dreamweaver
- Reconnaissance des modèles et des documents basés sur un modèle
- Création d’un modèle Dreamweaver
- Création de régions modifiables dans des modèles
- Création de régions et de tables modifiables dans Dreamweaver
- Utilisation de régions facultatives dans les modèles
- Définition d’attributs de balises modifiables dans Dreamweaver
- Comment créer des modèles imbriqués dans Dreamweaver
- Modification, mise à jour et suppression de modèles
- Exportation et importation de contenus xml dans Dreamweaver
- Application ou suppression d’un modèle depuis un document existant
- Modification de contenu dans les modèles de Dreamweaver
- Règles de syntaxe pour les balises de modèle dans Dreamweaver
- Définition des préférences de surbrillance pour des régions de modèle
- Avantages de l’utilisation de modèles dans Dreamweaver
- Terminaux mobiles et écrans multiples
- Sites dynamiques, pages et formulaires web
- En savoir plus sur les applications web
- Configuration de l’ordinateur pour le développement d’applications
- Résolution des problèmes de connexion aux bases de données
- Suppression des scripts de connexion dans Dreamweaver
- Conception de pages dynamiques
- Présentation des sources de contenu dynamique
- Définition de sources de contenu dynamique
- Ajout de contenus dynamiques aux pages
- Changement des contenus dynamiques dans Dreamweaver
- Affichage d’enregistrements d’une base de données
- Fourniture et dépannage de données en temps réel dans Dreamweaver
- Ajout de comportements de serveur personnalisés dans Dreamweaver
- Création de formulaires à l’aide de Dreamweaver
- Utilisation de formulaires pour la collecte des informations sur les utilisateurs
- Création et activations des formulaires ColdFusion dans Dreamweaver
- Création de formulaires web
- Prise en charge améliorée de HTML5 pour les éléments de formulaire
- Développement d’un formulaire à l’aide de Dreamweaver
- Création visuelle d’applications
- Création de pages principales et détaillées dans Dreamweaver
- Création de pages de recherche et de résultats
- Création d’une page d’insertion d’enregistrements
- Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
- Création de pages de suppression d’enregistrement dans Dreamweaver
- Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
- Création d’une page d’enregistrement
- Création d’une page de connexion
- Création d’une page à accès restreint
- Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
- Utilisation de composants ColdFusion dans Dreamweaver
- Test, aperçu et publication de sites web
- Résolution des problèmes
Utilisez le panneau Actifs de Dreamweaver pour gérer les actifs du site en cours.
Vous pouvez utiliser Adobe Dreamweaver pour assurer le suivi des actifs inclus dans un site, notamment les images, animations, couleurs, scripts et liens et les prévisualiser. Vous pouvez également faire glisser un actif directement pour l’insérer dans une page de votre document actuel.
Vous pouvez obtenir des actifs à partir de différentes sources. Par exemple, vous pouvez créer des actifs dans une application telle qu’Adobe Photoshop ou Adobe Animate CC, les recevoir de la part d’un collègue, les copier à partir d’un CD d’images ou encore les copier à partir d’un site web d’images.
Dreamweaver permet également d’accéder à deux types d’actifs spéciaux : les bibliothèques et les modèles. Tous deux sont des actifs liés. Ainsi, lorsque vous modifiez un élément de bibliothèque ou un modèle, Dreamweaver met à jour tous les documents qui utilisent ces éléments. Les éléments de bibliothèque représentent généralement de petits actifs de création, tels que le logo ou les informations de copyright d’un site. Pour définir la conception de zones plus larges, utilisez plutôt un modèle.
Utilisez le panneau Actifs (Fenêtre > Actifs) pour gérer les actifs du site en cours. Le panneau Actifs affiche les actifs du site associés au document ouvert dans la fenêtre Document.
Vous devez définir un site local avant de pouvoir afficher des actifs dans le panneau Actifs.
Le panneau Actifs propose différentes vues des actifs :
Liste Site
Présente tous les actifs de votre site, y compris les couleurs et les adresses URL utilisées dans les documents de votre site.
Liste Favoris
Présente uniquement les actifs que vous avez sélectionnés de façon explicite.
Pour basculer entre ces deux modes, sélectionnez le bouton radio Site ou Favoris situé en haut de la zone d’aperçu. (Ces deux modes d’affichage ne sont pas disponibles pour les catégories Modèles et Bibliothèque.)
La plupart des opérations du panneau Actifs fonctionnent de la même façon dans les deux listes. Toutefois, il existe quelques tâches qui ne peuvent être réalisées que dans la liste Favoris.
Dans les deux listes, les actifs appartiennent à l’une des catégories suivantes :
Images
Fichiers d’image au format GIF, JPEG ou PNG.
Couleurs
Couleurs utilisées dans les documents et les feuilles de style, y compris les couleurs du texte, des arrière-plans et des liens.
URL
Liens externes figurant dans les documents du site en cours, notamment FTP, gopher, HTTP, HTTPS, JavaScript, e-mail (mailto) et fichiers locaux (file://).
Média
Fichiers multimédias, tels que des fichiers Adobe Flash (SWF seulement), Adobe Shockwave, QuickTime ou MPEG.
Scripts
Fichiers JavaScript ou VBScript. Les scripts dans les fichiers HTML (plutôt que dans des fichiers JavaScript ou VBScript indépendants) n’apparaissent pas dans le panneau Actifs. Cette catégorie est disponible uniquement en modes Code et Création.
Modèles
Mises en forme de pages principales utilisées sur plusieurs pages. La modification d’un modèle entraîne automatiquement la modification de toutes les pages qui y sont associées. Cette catégorie est disponible uniquement en modes Code et Création.
Eléments de bibliothèque
Éléments de design utilisés dans plusieurs pages. Lorsque vous modifiez un élément de bibliothèque, toutes les pages qui le contiennent sont mises à jour. Cette catégorie est disponible uniquement en modes Code et Création.
Pour figurer dans le panneau Actifs, un fichier doit appartenir à l’une de ces catégories. Il existe d’autres types de fichiers parfois appelés actifs, mais qui ne sont pas affichés dans le panneau.
Par défaut, les actifs d’une catégorie donnée sont répertoriés en fonction de leur nom par ordre alphabétique, mais vous pouvez les trier par type et en fonction de plusieurs autres critères. Vous pouvez également afficher un aperçu des actifs et redimensionner les colonnes ainsi que la zone d’aperçu.
L’icône Creative Cloud dans la colonne Type indique que les actifs correspondants sont importés depuis les Bibliothèques Creative Cloud. Vous pouvez cliquer deux fois sur l’icône Creative Cloud pour rééchantillonner les actifs correspondants. Pour plus d’informations sur la réutilisation des actifs dans les Bibliothèques CC, reportez-vous à la page Bibliothèques Creative Cloud dans Dreamweaver.
Affichage d’un actif dans la zone d’aperçu
-
Sélectionnez l’actif dans le panneau Actifs.
Affichage des actifs d’une catégorie donnée
-
Cliquez sur une icône de catégorie dans le côté gauche du panneau Actifs.
Tri des actifs
-
Cliquez sur un en-tête de colonne.
Par exemple, pour trier la liste des images par type (afin de regrouper toutes les images GIF, puis toutes les images JPEG, etc.), cliquez sur l’en-tête de la colonne Type.
Redimensionnement d’une colonne
-
Faites glisser la ligne qui sépare deux en-têtes de colonne.
Redimensionnement de la zone d’aperçu
-
Faites glisser la barre de séparation (entre la zone d’aperçu et la liste des actifs) vers le haut ou vers le bas.
Actualisation du panneau Actifs
La création de la liste Site peut prendre quelques secondes du fait que Dreamweaver doit d’abord lire la mémoire cache du site.
Certaines modifications n’apparaissent pas immédiatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas répercutées dans le panneau Actifs tant que vous n’actualisez pas la liste Site en cliquant sur le bouton Actualiser la liste du site. Si vous ajoutez ou supprimez un actif en dehors de Dreamweaver (via l’Explorateur Windows ou le Finder, par exemple), vous devez recréer le cache du site pour actualiser le panneau Actifs.
Lorsque vous supprimez l’unique instance d’une URL ou d’une couleur donnée du site, ou lorsque vous enregistrez un nouveau fichier contenant une couleur ou une URL n’ayant pas encore été utilisée sur le site, les modifications ne sont répercutées dans le panneau Actifs qu’une fois la liste Site actualisée.
- Pour actualiser la liste Site manuellement, cliquez sur le bouton Actualiser la liste du site . Dreamweaver crée la mémoire cache du site ou la met à jour si nécessaire.
- Pour actualiser la liste Site et recréer la mémoire cache du site manuellement, cliquez avec le bouton droit de la souris (Windows) ou maintenez la touche Ctrl enfoncée (Macintosh) dans la liste Actifs, puis cliquez sur Actualiser la liste du site.
Ajout d’un actif à un document
Vous pouvez insérer la plupart des actifs dans un document en les faisant glisser dans la fenêtre de document en mode En direct, Code ou Création, ou en utilisant le bouton Insérer du panneau. Vous pouvez faire glisser les actifs de la vue de la liste ou du panneau d’aperçu rapide du panneau Actifs.
Remarque : vous pouvez faire glisser des éléments depuis le panneau d’aperçu rapide uniquement sur Mac.
En mode Création ou En direct, vous pouvez insérer des couleurs et des URL. En mode Création, vous pouvez appliquer des couleurs et des URL aux éléments sélectionnés.
-
Dans le document, placez le point d’insertion à l’endroit où l’actif doit apparaître.
-
Dans le panneau Actifs, sélectionnez l’un des boutons de catégorie d’actif situés à gauche.Remarque :
Sélectionnez toute catégorie autre que Modèles. Un modèle est appliqué à un document entier. Il ne peut pas être inséré dans un document.
-
Sélectionnez Site ou Favoris en haut du panneau, puis sélectionnez l’actif.
Il n’existe pas de liste Site ou Favoris pour les éléments de bibliothèque. Omettez cette étape si vous insérez un tel élément.
-
Effectuez l’une des opérations suivantes :
Faites glisser l’actif depuis le panneau vers le document. Vous pouvez faire glisser depuis la vue de la liste ainsi que depuis le panneau d’aperçu rapide.
Remarque : Sous Windows, vous ne pouvez pas faire glisser des actifs depuis le panneau d’aperçu rapide.
Vous pouvez faire glisser des scripts dans la zone d’en-tête de la fenêtre de document. Si cette zone n’est pas visible, cliquez sur Affichage > Contenu de l’en-tête.
Sélectionnez l’actif dans le panneau et cliquez sur Insérer.
Si l’actif inséré est une couleur, elle s’applique au texte qui figure après le point d’insertion.
Application d’une couleur à un texte à l’aide du panneau Actifs
Le panneau Actifs indique les couleurs que vous avez déjà appliquées aux différents éléments du site, tels que du texte, des bordures de tableau, des arrière-plans, etc.
-
En mode Création, effectuez les opérations suivantes :
-
Sélectionnez du texte dans le document.
-
Dans le panneau Actifs, sélectionnez la catégorie Couleurs.
-
Sélectionnez la couleur souhaitée et cliquez sur Appliquer.
-
-
En mode En direct, effectuez les opérations suivantes :
-
Dans le panneau Actifs, sélectionnez la catégorie Couleurs.
-
Effectuez l’une des opérations suivantes :
- Cliquez avec le bouton droit de la souris sur la couleur dans le panneau Actifs, puis cliquez sur Copier la valeur chromatique. La valeur chromatique est copiée dans le presse-papiers. Vous pouvez à présent coller la valeur chromatique (Ctrl+v, Cmd+v) dans CSS Designer.
- Faites glisser la couleur de l’aperçu rapide et passez la souris sur les éléments en mode En direct. Lorsque vous déposez la couleur, la boîte de dialogue Nouvelle règle CSS s’affiche et, lorsque vous cliquez sur OK, la couleur est appliquée à l’élément sélectionné.
- Cliquez sur Appliquer dans le panneau Actifs. La boîte de dialogue Nouvelle règle CSS s’affiche et, lorsque vous cliquez sur OK, la couleur est appliquée à l’élément sélectionné.
-
Affectation d’URL à des images ou du texte
-
En mode Création, effectuez les opérations suivantes :
-
Sélectionnez le texte ou l’image.
-
Dans le panneau Actifs, sélectionnez la catégorie URL dans la vue Sites ou Favoris, selon l’endroit où l’URL est stockée.
Remarque :Les URL des fichiers de votre site sont stockées, par défaut, dans la vue Sites. La vue Favoris contient les URL que vous avez ajoutées manuellement.
-
Sélectionnez l’URL.
-
Effectuez l’une des opérations suivantes :
Faites glisser l’URL depuis le panneau vers la sélection en mode Création.
Sélectionnez l’URL et cliquez sur Insérer.
-
-
En mode En direct, effectuez les opérations suivantes :
-
Dans le panneau Actifs, sélectionnez la catégorie URL dans la vue Sites ou Favoris, selon l’endroit où l’URL est stockée.
-
Effectuez l’une des opérations suivantes :
- Faites glisser l’URL de l’aperçu rapide ou la vue de la liste. Passez la souris sur les éléments en mode En direct. Lorsque vous déposez l’URL, <a> entoure l’élément en surbrillance en mode En direct.
- Cliquez sur l’élément requis en mode En direct. Choisissez l’URL dans le panneau Actifs, puis cliquez sur Appliquer. L’élément sélectionné est entouré par la balise <a>.
-
Sélection et modification d’actifs
Le panneau Actifs permet de sélectionner simultanément plusieurs actifs ; il offre également un moyen rapide de commencer l’édition d’actifs.
Sélection de plusieurs actifs.
-
Dans le panneau Actifs, sélectionnez un actif.
-
Sélectionnez les autres actifs à l’aide de l’une des méthodes suivantes :
Cliquez en maintenant la touche Maj enfoncée pour sélectionner une série consécutive d’actifs.
Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée pour ajouter un actif individuel à la sélection (qu’il soit adjacent ou non à la sélection existante). Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée sur un actif sélectionné pour le désélectionner.
Modification d’un actif
Lorsque vous modifiez un actif dans le panneau Actifs, le comportement varie en fonction du type d’actif. Pour certains actifs, tels que les images, vous utilisez un éditeur externe qui s’ouvre automatiquement si vous avez défini un éditeur pour ce type d’actif. Vous ne pouvez modifier les couleurs et les URL que dans la liste Favoris. Lorsque vous modifiez des modèles et des éléments de bibliothèque, vous effectuez les modifications dans Dreamweaver.
-
Dans le panneau Actifs, procédez de l’une des manières suivantes :
Double-cliquez sur l’actif.
Sélectionnez l’actif, puis cliquez sur le bouton Modifier.
Remarque :Si l’actif doit être modifié dans un éditeur externe et qu’aucun éditeur ne s’ouvre automatiquement, sélectionnez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), sélectionnez la catégorie Types de fichiers/Editeurs, et assurez-vous qu’un éditeur externe est défini pour ce type d’actif.
-
Apportez les modifications voulues.
-
Lorsque vous avez terminé, procédez de l’une des façons suivantes :
Si l’actif est basé sur un fichier (tout objet autre qu’une couleur ou une URL), enregistrez-le (via l’éditeur que vous utilisez), puis fermez-le.
Si l’actif est une URL, cliquez sur OK dans la boîte de dialogue Modifier l’URL.
Remarque :Si l’actif est une couleur, le sélecteur de couleur se ferme automatiquement lorsque vous sélectionnez une couleur. Pour fermer le sélecteur sans sélectionner de couleur, appuyez sur la touche Echap.
Réutilisation d’actifs dans un autre site
Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel. Pour utiliser un actif du site actuel dans un autre site, il est nécessaire de le copier. Vous pouvez copier un actif individuel, un ensemble d’actifs individuels ou un dossier Favoris entier en une seule opération.
Vous devrez peut-être localiser le fichier dans le panneau Fichiers correspondant à un actif dans le panneau Actifs avant de transférer l’actif depuis ou vers votre site distant.
Le panneau Fichiers peut afficher un site différent de celui présenté par le panneau Actifs, car ce dernier est associé au document ouvert.
Localisation d’un fichier d’actif dans le panneau Fichiers
-
Dans le panneau Actifs, sélectionnez la catégorie de l’actif que vous recherchez.
-
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l’icône ou le nom de l’actif dans le panneau Actifs, puis choisissez l’option Repérer dans le site dans le menu contextuel.Remarque :
L’option Repérer dans le site n’est pas disponible pour les couleurs et les URL, qui ne correspondent pas à des fichiers dans le site.
Le panneau Fichiers s’ouvre, avec le fichier d’actif sélectionné. La commande Repérer dans le site repère le fichier correspondant à l’actif lui-même, et non les fichiers qui utilisent cet actif.
Copie d’actifs depuis le panneau Actifs vers un autre site
-
Dans le panneau Actifs, sélectionnez la catégorie de l’actif que vous souhaitez copier.
-
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur un ou plusieurs actifs dans la liste Site ou Favoris, sélectionnez Copier dans le site, puis sélectionnez le nom du site cible dans le sous-menu qui répertorie les sites que vous avez définis.Remarque :
Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels.
Les actifs sont copiés dans leurs emplacements correspondants dans le site cible. Dreamweaver crée de nouveaux dossiers dans la hiérarchie du site cible en fonction des besoins. Les actifs sont également ajoutés à la liste Favoris du site cible.
Remarque :Si l’actif que vous avez copié est une couleur ou une URL, il s’affiche uniquement dans la liste Favoris du site cible. Du fait que les couleurs et les URL ne correspondent pas à des fichiers, il n’existe aucun fichier à copier dans l’autre site.
Adobe
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?