Guide d'utilisation Annuler

Création et ouverture de fichiers

Rechercher

Dernière mise à jour le 2 févr. 2022

Créez, ouvrez, modifiez, enregistrez et annulez les modifications des fichiers dans Dreamweaver. Créez des modèles et ouvrez des fichiers associés.

Dreamweaver fournit un environnement souple pour l’utilisation de divers documents web. Outre les documents HTML, vous pouvez créer et ouvrir divers documents en mode texte, de type JavaScript, PHP et CSS par exemple.

Dreamweaver propose diverses options pour la création d’un nouveau document. Vous pouvez créer les types de document suivants :

un nouveau document ou un modèle vierge ;
un document basé sur l’une des mises en forme prédéfinies fournies avec Dreamweaver, dont plus de 30 mises en forme basées sur CSS ;
un document basé sur un de vos modèles existants.
Vous pouvez également définir les préférences des documents. Par exemple, si vous avez l’habitude de travailler avec un type particulier de document, vous pouvez le définir comme type par défaut pour les nouvelles pages.
Vous pouvez aisément définir des propriétés de document, telles que les balises meta, le titre du document et la couleur de l’arrière-plan, ainsi que d’autres propriétés de page, en mode Création ou en mode Affichage du code.

Types de fichier Dreamweaver

Vous pouvez travailler avec un grand choix de types de fichiers sous Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup Language) contiennent le langage à base de balises qui se charge d’afficher une page web dans un navigateur. Vous pouvez enregistrer les fichiers HTML avec l’extension .html ou .htm. Dreamweaver enregistre par défaut les fichiers avec l’extension .html.

Dreamweaver permet de créer et de modifier des pages web HTML5. Des mises en forme de départ sont également disponibles pour la création de nouvelles pages HTML5.

Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travaillez avec Dreamweaver :

CSS

Les fichiers CSS (Cascading Style Sheets, feuilles de style en cascade) possèdent l’extension .css. Ils sont utilisés pour mettre en forme le contenu HTML et fixer le positionnement de divers éléments de page.

GIF

Les fichiers GIF (Graphics Interchange Format) possèdent l’extension .gif. Ce format graphique est très utilisé dans les dessins humoristiques, les logos, les graphismes pourvus de zones transparentes et les animations. Les GIF sont constitués d’un maximum de 256 couleurs.

JPEG

Les fichiers JPEG (Joint Photographic Experts Group, du nom de l’organisation qui a créé le format) possèdent l’extension .jpg et correspondent généralement à des photographies ou à des images très colorées. Ce format est le plus approprié pour les photographies numériques ou scannées, les images utilisant des textures, les images pourvues de transitions à gradient de couleurs ainsi que toutes les images exigeant plus de 256 couleurs.

XML

Les fichiers XML (Extensible Markup Language) possèdent l’extension .xml. Ils contiennent des données brutes qui peuvent être formatées en utilisant XSL (Extensible Stylesheet Language).

Boîte de dialogue Nouveau document

La boîte de dialogue Nouveau document affiche tous les types de document pris en charge, dont PHP, XML et SVG.

Vous pouvez également accéder aux mises en forme, aux modèles et aux frameworks prédéfinis à partir de cette boîte de dialogue.

Remarque :

L’ensemble des mises en forme de départ présentées sont conçues pour prendre en charge les sites web réactifs et sont conformes à HTML5.

Création d’une mise en forme HTML à l’aide une page vierge

Vous pouvez créer une page contenant une mise en forme CSS prédéfinie, ou créer une page totalement vierge, puis créer la mise en forme de votre choix.

Sélectionnez Fichier > Nouveau.
Dans la catégorie Nouveau document, sélectionnez le type de page à créer dans la colonne Type de document. Par exemple, sélectionnez HTML pour créer une page HTML ordinaire.
Sélectionnez un type de document dans le menu déroulant DocType. Dans la plupart des cas, vous pouvez utiliser la sélection par défaut, HTML5.
Sélectionnez d’autres options en fonction du type de page à créer.
- Aucun : sélectionnez cette option si vous voulez créer une page web simple sans utiliser de framework.
- Bootstrap : les modèles Bootstrap sont des mises en forme prédéfinies utilisant le framework Bootstrap. Sélectionnez cette option si vous souhaitez créer des pages web réactives utilisant le framework Bootstrap. Par défaut, un document Bootstrap 4.0.0 est créé.
Remarque :

Sélectionnez cette option si vous souhaitez créer des pages web réactives utilisant le framework Bootstrap.
Si vous n’utilisez pas de framework :
- Titre du document : saisissez le titre du document dans ce champ, et Dreamweaver l’ajoute automatiquement à la section <head> du document.
- Type de document : sélectionnez un type de document dans le menu déroulant DocType. Dans la plupart des cas, vous pouvez utiliser la sélection par défaut, HTML5.
Sélectionnez l’une des définitions de type de document XHTML du menu DocType pour rendre la page compatible XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n’est autre qu’une nouvelle mouture de HTML sous la forme d’une application XML. En règle générale, l’utilisation de XHTML vous permet d’exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos documents web.
Remarque :

Pour plus d’informations sur XHTML, consultez le site web du World Wide Web Consortium (W3C), qui contient la spécification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (/TR/xhtml/www.w3c.org/TR/xhtml1/) ainsi que les sites de validateur XHTML où vous trouverez des fichiers web (http://validator.w3.org/) et locaux (http://validator.w3.org/file-upload.html).
- Lier le fichier CSS : cette option permet d’ajouter une mise en forme CSS existante sur la page. Pour ce faire, cliquez sur l’icône Ajouter une feuille de style en regard du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS.
Création d’une page HTML sans utiliser de framework

Si vous souhaitez créer une page en fonction de votre composition Photoshop, sélectionnez Utiliser Extract.

Sélectionner cette option ouvre le panneau Extract où vous pouvez charger un fichier PSD et commencer à créer votre page HTML.
Si vous souhaitez créer une page web réactive utilisant le framework Bootstrap :
- Bootstrap CSS : créez un bootstrap CSS ou utilisez un fichier CSS existant. Si vous utilisez un fichier CSS existant, indiquez le chemin d’accès au fichier. Assurez-vous que le fichier CSS se trouve dans le dossier racine du site.
- Lier le fichier CSS : cette option permet d’ajouter une mise en forme CSS existante sur la page. Pour ce faire, cliquez sur l’icône Ajouter une feuille de style en regard du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS.
- Intégrer une mise en forme prédéfinie : sélectionnez cette option si vous disposez déjà d’une mise en forme. Cliquez sur Personnaliser pour modifier les valeurs de grille et de points d’arrêt.
Création d’une page HTML utilisant le framework Bootstrap

Si vous souhaitez créer une page en fonction de votre composition Photoshop, sélectionnez Utiliser Extract.

Sélectionner cette option ouvre le panneau Extract où vous pouvez charger un fichier PSD et commencer à créer votre page HTML.
Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de document, le codage et une extension de ficher).
Cliquez sur le bouton Créer.
Enregistrez la page (Fichier > Enregistrer).
Dans la boîte de dialogue qui s’affiche, recherchez le dossier où vous voulez enregistrer le fichier.

Remarque :

Il est conseillé d’enregistrer votre fichier dans un site Dreamweaver.
Dans la zone de texte Nom de fichier, entrez le nom du fichier.

Évitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n’utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l’intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers.

Création d’un modèle vierge

La boîte de dialogue Nouveau document permet de créer des modèles Dreamweaver. Par défaut, les modèles sont enregistrés dans le dossier Templates de votre site.

Remarque :

Vous ne pouvez pas créer un modèle sans créer préalablement un site. Pour plus d’informations sur les sites et la manière de les créer, reportez-vous à À propos des sites Dreamweaver.

Sélectionnez Fichier > Nouveau.
Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèles de site.
Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l’option par défaut, XHTML 1.0 transitionnel.

Sélectionnez l’une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n’est autre qu’une nouvelle mouture de HTML sous la forme d’une application XML. En règle générale, l’utilisation de XHTML vous permet d’exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos documents web.

Remarque :

Pour plus d’informations sur XHTML, consultez le site web du World Wide Web Consortium (W3C), qui contient la spécification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (/TR/xhtml/www.w3c.org/TR/xhtml1/) ainsi que les sites de validateur XHTML où vous trouverez des fichiers web (http://validator.w3.org/) et locaux (http://validator.w3.org/file-upload.html).
Sélectionnez Mettre la page à jour quand le modèle est modifié si vous souhaitez que la page soit mise à jour automatiquement lorsque vous modifiez le modèle.
Cliquez sur le bouton Créer.
Enregistrez la page (Fichier > Enregistrer). Si vous n’avez pas encore ajouté de régions modifiables au modèle, une boîte de dialogue vous en avertit. Cliquez sur OK pour refermer la boîte de dialogue.
Dans la boîte de dialogue Enregistrer sous, sélectionnez le site dans lequel le modèle doit être enregistré.
Dans la zone de texte Nom de fichier, entrez le nom du nouveau modèle. Il n’est pas nécessaire d’ajouter l’extension de fichier au nom du modèle. Lorsque vous cliquez sur Enregistrer, l’extension .dwt est ajoutée au nouveau modèle, qui est enregistré dans le dossier Templates de votre site.

Évitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n’utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l’intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers.

Création d’une page basée sur un modèle

Vous pouvez sélectionner, prévisualiser et créer des documents à l’aide de l’un de vos modèles existants ou des modèles de démarrage de Dreamweaver. La boîte de dialogue Nouveau document vous permet de sélectionner un modèle parmi les sites définis dans Dreamweaver ou d’utiliser le panneau Actifs pour créer un nouveau document sur la base d’un modèle existant.

Création d’un document basé sur un modèle

Sélectionnez Fichier > Nouveau.
Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Page du modèle.
Dans la colonne Site, sélectionnez le site Dreamweaver contenant le modèle à utiliser, puis sélectionnez un modèle dans la liste de droite.
Désactivez l’option Mettre la page à jour quand le modèle est modifié si vous ne souhaitez pas que la page soit mise à jour lors de chaque modification apportée au modèle sur lequel elle est basée.
Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de document, le codage et une extension de ficher).
Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d’autres contenus de conception de pages.
Cliquez sur Créer puis enregistrez le document (Fichier > Enregistrer).

Création d’un document à partir d’un modèle à l’aide du panneau Actifs

Ouvrez le panneau Actifs (Fenêtre > Actifs) s’il n’est pas déjà ouvert.
Dans le panneau Actifs, cliquez sur l’icône Modèles située à gauche pour afficher la liste des modèles utilisés dans votre site actuel.

Remarque :

Si le modèle que vous souhaitez utiliser vient d’être créé, il peut être nécessaire de cliquer sur le bouton Actualiser pour l’afficher.
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le modèle à appliquer, puis sélectionnez Nouveau à partir d’un modèle.

Le document s’ouvre dans la fenêtre de document.
Enregistrez le document.

Création d’un document basé sur un modèle de démarrage de Dreamweaver

Dreamweaver est fourni avec plusieurs fichiers de démarrage pour applications mobiles réalisés par des professionnels. Vous pouvez utiliser ces fichiers d’exemple comme point de départ pour la création de pages sur vos sites web.

Lorsque vous créez un document basé sur un modèle de démarrage, Dreamweaver crée une copie du fichier, de sorte que vous ne remplacez pas les fichiers de démarrage.

La boîte de dialogue Nouveau document permet de prévisualiser un fichier d’exemple et de consulter une brève description des éléments de conception d’un document.

Sélectionnez Fichier > Nouveau.
Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèles de démarrage.

Modèles de démarrage sous Dreamweaver

Vous pouvez afficher les détails de l’exemple de page ainsi que la visualisation sur le côté droit du panneau lorsque vous sélectionnez les différentes options.
Cliquez sur le bouton Créer.

Le nouveau document et l’ensemble des fichiers associés s’ouvrent dans la fenêtre Document.
Enregistrez le document (Fichier > Enregistrer).

Création de fichiers de code dans différents langages de programmation

Dans Dreamweaver, vous pouvez créer des fichiers de code pour un certain nombre de langages de programmation.

Pour plus d’informations sur les langages de programmation pris en charge dans Dreamweaver, reportez-vous à À propos du codage dans Dreamweaver.

Pour créer un fichier de code dans Dreamweaver, procédez comme suit :

Sélectionnez Fichier > Nouveau document.
Dans Type de document, sélectionnez le fichier de code que vous souhaitez créer.
Sélectionnez le type de document à créer dans la colonne Type de document (par exemple, un fichier PHP).

Création d’une page PHP
En fonction du type de fichier sélectionné, des options supplémentaires sont disponibles lors de la création d’un document.

Par exemple, si vous créez un fichier PHP, vous pouvez choisir des options DocType et certaines options CSS.
Cliquez sur le bouton Créer. Enregistrez ensuite le document (Fichier > Enregistrer).

Enregistrement et rétablissement de documents

Vous pouvez enregistrer un document en utilisant son nom et son emplacement actuels ou enregistrer une copie du document sous un nouveau nom, dans un autre emplacement.

Remarque :

Evitez tout espace ou caractère spécial dans les noms de fichier ou de dossier. En particulier, n’utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l’intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers. En outre, ne commencez pas le nom de fichier par un numéro.

Enregistrement d’un document

Effectuez l’une des opérations suivantes :
- Pour écraser la version présente sur le disque et enregistrer toute modification effectuée, sélectionnez Fichier > Enregistrer.
- Pour enregistrer le fichier dans un dossier différent ou sous un autre nom, sélectionnez Fichier > Enregistrer sous.
Dans la boîte de dialogue Enregistrer sous qui s’affiche, recherchez le dossier dans lequel vous voulez enregistrer le fichier.
Dans la zone de texte Nom de fichier, entrez le nom du fichier.
Cliquez sur Enregistrer pour enregistrer le fichier .

Enregistrement de tous les documents ouverts

Choisissez Fichier > Enregistrer tout.
Si des documents non enregistrés sont ouverts, la boîte de dialogue Enregistrer sous s’affiche pour chacun d’entre eux.

Dans la boîte de dialogue qui s’affiche, recherchez le dossier où vous voulez enregistrer le fichier.
Dans la zone de texte Nom de fichier, entrez le nom du fichier, puis cliquez sur Enregistrer.

Rétablissement de la dernière version enregistrée d’un document

Sélectionnez Fichier > Rétablir.

Une boîte de dialogue vous invite à confirmer l’annulation de vos modifications et le retour à la version précédemment enregistrée.
Cliquez sur Oui pour revenir à la version précédente ou sur Non pour appliquer les modifications.

Remarque :

Si vous enregistrez un document, puis que vous quittez, il ne sera pas possible de revenir à la version précédente lors de la prochaine utilisation de Dreamweaver.

Définition du type de document par défaut et de ses préférences de codage

Si la plupart des pages de votre site sont de type spécifique (tel que HTML, PHP ou JavaScript), vous pouvez définir des préférences de document pour créer automatiquement des documents de ce type.

Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).

Remarque :

Vous pouvez également cliquer sur le bouton Préférences dans la boîte de dialogue Nouveau document pour définir les nouvelles préférences liées au document en cours de création.
Cliquez sur la catégorie Nouveau document dans la liste de gauche.
Définissez ou modifiez les préférences selon vos besoins, puis cliquez sur OK pour les enregistrer.

Document par défaut

Sélectionnez le type de document qui sera employé pour les pages que vous créez.

Extension par défaut

Indiquez l’extension de fichier que vous préférez (.htm ou .html) pour les nouvelles pages HTML que vous créerez.

Remarque : cette option est désactivée pour les autres types de fichiers.

Type de document par défaut (DDT)

Sélectionnez l’une des définitions de type de document (DTD) XHTML qui permettent de rendre les pages compatibles XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 strict dans le menu déroulant.

Codage par défaut

Spécifie le codage à utiliser lorsque vous créez une page ou que vous ouvrez un document ne spécifiant aucun codage.

Si vous sélectionnez Unicode (UTF 8) en tant que codage de document, le codage d’entité est superflu dans la mesure où UTF 8 permet de représenter de façon fiable tous les caractères. Si vous sélectionnez un autre codage de document, le codage d’entité peut être nécessaire pour représenter certains caractères. Pour plus e détails sur les entités de caractères, voir www.w3.org/TR/REC-html40/sgml/entities.html.

Si vous sélectionnez Unicode (UTF 8) en tant que code par défaut, vous pouvez inclure une marque BOM (Byte Order Mark) dans le document en sélectionnant l’option Inclure une signature Unicode (BOM).

Il s’agit d’une marque constituée de 2 à 4 octets placés au début d’un fichier texte identifiant un fichier comme étant au format Unicode et, dans ce cas, l’ordre des octets suivants. Le code UTF 8 ne présentant pas d’ordre octet, l’ajout d’une marque BOM UTF 8 est facultatif. Dans le cas d’UTF 16 et UTF 32, cette marque est obligatoire.

Formulaire de normalisation Unicode

Activez l’une de ces options si vous sélectionnez Unicode (UTF 8) en tant que code par défaut.

Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C, car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois autres Formulaires de normalisation Unicode.

Afficher la boîte de dialogue Nouveau document si Ctrl+N

Désactivez cette option (baptisée « Cmd+N » sur Macintosh) pour appliquer automatiquement le type par défaut au nouveau document créé lorsque vous utilisez la touche de commande.

Certains caractères Unicode semblent visuellement similaires mais peuvent être stockés de différentes manières dans le document. Par exemple, ë (e tréma) peut être représenté sous la forme d’un seul caractère, « e tréma » ou de deux caractères, « e Latin ordinaire » + « tréma ». Un caractère Unicode de combinaison est un caractère associé au caractère précédent, ce qui fait apparaître le tréma au-dessus du « e » Latin. Les deux formes donnent la même typographie visuelle, alors que chacune est enregistrée différemment dans le fichier.

La normalisation est le processus consistant à s’assurer que tous les caractères pouvant être enregistrés sous différentes formes le sont tous sous la même forme. C’est-à-dire que tous les caractères « ë » d’un document sont enregistrés sous forme de « e tréma » unique ou de « e + tréma de combinaison », mais pas sous les deux formes dans un même document.

Pour plus de détails sur la Normalisation Unicode et les formulaires spécifiques pouvant être utilisés, consultez le site web Unicode www.unicode.org/reports/tr15.

Ouverture et modification de documents existants

Vous pouvez ouvrir une page web existante ou un document texte, même si celui-ci n’a pas été créé avec Dreamweaver, et le modifier en mode Affichage du code ou en mode Création.

Si le document que vous ouvrez est un fichier Microsoft Word enregistré au format HTML, vous pouvez utiliser Outils > Nettoyage du HTML Word pour supprimer les balises superflues ajoutées par Word au fichier HTML.

Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, utilisez Outils > Nettoyer le code HTML. Pour plus d’informations, reportez-vous à Nettoyage de fichiers HTML créés avec Microsoft Word.

Vous pouvez également ouvrir des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style en cascade (CSS) ou des fichiers texte enregistrés dans des traitements de texte ou des éditeurs de texte.

Choisissez Fichier > Ouvrir.

Remarque :

Vous pouvez également utiliser le panneau Fichiers pour ouvrir les fichiers.
Recherchez et sélectionnez le fichier à ouvrir.

Remarque :

Si cette opération n’a pas encore été effectuée, il est conseillé d’organiser les fichiers que vous comptez ouvrir et modifier au sein d’un site Dreamweaver, au lieu de les ouvrir depuis un autre emplacement. Pour plus d’informations sur les sites Dreamweaver, reportez-vous à À propos des sites Dreamweaver.
Cliquez sur le bouton Ouvrir.

Le document s’ouvre dans la fenêtre de document. Par défaut, JavaScript, le texte et les feuilles de style en cascade (CSS) s’ouvrent en mode Code. Vous pouvez mettre à jour le document pendant que vous travaillez sous Dreamweaver, puis enregistrer les modifications dans le fichier.

Ouverture des fichiers associés

Dreamweaver permet de visualiser les fichiers associés à votre document principal, tout en restant focalisé sur ce dernier. Par exemple, si des fichiers CSS et JavaScript sont joints à un document principal, Dreamweaver permet d’afficher et de modifier ces fichiers associés dans la fenêtre de document tout en laissant le document principal visible.

Pour plus d’informations sur les fichiers à association dynamique, reportez-vous à Ouverture de fichiers à association dynamique.

Remarque :

Lorsque vous travaillez avec des fichiers HTML, si vous souhaitez apporter des modifications rapides à un fichier CSS, JavaScript ou PHP associé sans avoir à accéder à ce fichier, vous pouvez utiliser la fonction Édition rapide. Pour plus d’informations, consultez la section Édition rapide.

Par défaut, Dreamweaver affiche le nom de tous les fichiers apparentés au document principal dans une barre d’outils Fichiers apparentés, sous le titre du document principal. L’ordre des boutons de cette barre d’outils suit l’ordre des liens vers les fichiers associés dans le document principal.

Remarque :

Si un fichier associé est manquant, Dreamweaver affiche quand même le bouton correspondant dans la barre d’outils Fichiers associés. Toutefois, si vous cliquez sur ce bouton, Dreamweaver n’affiche rien.

Dreamweaver prend en charge les types de fichiers associés suivants:

Fichiers de script côté client
Inclusions côté serveur
Feuilles de style CSS externes (dont les feuilles de style imbriquées)

Ouverture d’un fichier associé à partir de la barre d’outils Fichiers associés

Effectuez l’une des opérations suivantes :

Dans la barre d’outils Fichiers associés en haut du document, cliquez sur le nom du fichier associé à ouvrir.
Dans la barre d’outils Fichiers associés en haut du document, cliquez à l’aide du bouton droit de la souris sur le nom du fichier associé à ouvrir, puis choisissez Ouvrir en tant que fichier séparé dans le menu. Lorsque vous utilisez cette méthode pour ouvrir un fichier associé, le document principal ne reste pas visible simultanément.

Ouverture d’un fichier associé à partir de la fenêtre Navigation dans le code

Placez le point d’insertion sur une ligne ou dans une zone dont vous savez qu’elle est influencée par un fichier associé.
Attendez que l’indicateur Navigation dans le code s’affiche, puis cliquez dessus pour ouvrir la fenêtre Navigation dans le code.
Vous pouvez survoler les éléments de la fenêtre Navigation dans le code afin d’afficher davantage d’informations à leur sujet. Par exemple, si vous voulez modifier une propriété de couleur CSS précise mais que vous ignorez dans quelle règle elle se trouve, vous pouvez trouver cette règle en survolant les règles disponible dans la fenêtre Navigation dans le code.
Cliquez sur l’élément qui vous intéresse afin d’ouvrir le fichier associé correspondant.

Retour au code source du document principal

Cliquez sur le bouton Code source de la barre d’outils Fichiers apparentés.

Modification de l’affichage de fichiers associés

Lorsque vous ouvrez un fichier associé depuis le mode Création, Code ou Fractionné, ce fichier s’affiche en mode Fractionné.

Vous pouvez sélectionner Affichage > Fractionner et choisir l’une des différentes options de vue fractionnée si vous voulez personnaliser l’affichage.

Si vous souhaitez afficher les fichiers associés uniquement en mode Affichage du code, sélectionnez Code dans la partie supérieure de la barre d’outils.

Remarque :

Le mode Code standard ne permet pas d’afficher les documents associés en même temps que le code source du document principal.

Remarque :

Dans l’option d’affichage, le mode Code fait référence au code source du document principal. Par exemple, si vous sélectionnez Affichage > Mode Code en haut, Dreamweaver affiche le code source du document principal dans la moitié supérieure de la fenêtre de document. Si vous sélectionnez Affichage > Mode Code à gauche, Dreamweaver affiche le code source du document principal sur le côté gauche de la fenêtre de document.

Désactivation des fichiers associés

Par défaut, lorsque vous ouvrez un fichier HTML, Dreamweaver affiche les fichiers associés dans des onglets distincts. Si vous souhaitez désactiver cette fonctionnalité, vous pouvez le faire dans le panneau Préférences.

Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
Dans la catégorie Général, désactivez Activer les fichiers apparentés.

Ouverture de fichiers à association dynamique

La fonction Fichiers à association dynamique accroît les possibilités de la fonction Fichiers associés, en vous permettant de voir les fichiers associés aux pages dynamiques dans la barre d’outils Fichiers associés. Plus précisément, la fonction Fichiers à association dynamique permet de voir les nombreuses inclusions dynamiques requises pour générer le code d’exécution des cadres CMS (système de gestion du contenu) PHP ouverts les plus populaires, tels que WordPress, Drupal et Joomla!

Pour pouvoir utiliser la fonction Fichiers à association dynamique, vous devez avoir accès à un serveur d’applications PHP local ou distant qui exécute WordPress, Drupal ou Joomla! Une approche courante du test de pages consiste à configurer un serveur d’applications PHP sur localhost puis à tester les pages localement.

Avant de tester les pages, vous devez effectuer les opérations suivantes :

Créez un site Dreamweaver et assurez-vous que vous avez bien complété la zone de texte URL Web de la boîte de dialogue Configuration du site.
Configurez un serveur d’applications PHP.

Remarque : le serveur doit être en cours d’exécution avant que vous ne tentiez d’utiliser des fichiers à association dynamique sous Dreamweaver.
Installez WordPress, Drupal ou Joomla! sur le serveur d’applications. Pour plus de détails, voir :
Dans Dreamweaver, définissez un fichier local où vous allez télécharger et modifier vos fichiers de CMS.
Définissez l’emplacement des fichiers WordPress, Drupal ou Joomla installés comme dossier distant et de test.
Téléchargez (obtenez) vos fichiers de CMS depuis le dossier distant.

Définition des préférences relatives aux fichiers à association dynamique

Lorsque vous ouvrez une page liée à des fichiers à association dynamique, Dreamweaver peut rechercher les fichiers automatiquement ou vous permettre de les rechercher manuellement (en cliquant sur un lien dans la barre Informations figurant en haut de la page). Par défaut, la recherche se fait manuellement.

Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac OS).
Dans la catégorie Général, assurez-vous que l’option Activer les fichiers associés est bien activée.
Sélectionnez Manuellement ou Automatiquement dans le menu Fichiers à association dynamique. Vous pouvez également désactiver complètement la recherche en choisissant l’option Désactivé.

Découvrir les fichiers à association dynamique

Ouvrez une page à laquelle des fichiers à association dynamique sont liés, par exemple la page index.php à la racine d’un site WordPress, Drupal ou Joomla! .
Si la recherche de fichiers à association dynamique se fait manuellement (option par défaut), cliquez sur le lien Découvrir dans la barre Informations figurant en haut de la fenêtre Document.

Si la recherche de fichiers à association dynamique se fait automatiquement, la liste des fichiers à association dynamique s’affiche dans la barre d’outils Fichiers associés.

L’ordre des fichiers associés et à association dynamiques dans la barre d’outils Fichiers associés est le suivant :

Fichiers associés statiques (fichiers n’exigeant aucun traitement dynamique)
Fichiers associés externes (fichiers .css et .js) qui sont liés à des fichiers d’inclusion de serveur à chemin dynamique
Fichiers d’inclusion de serveur à chemin dynamique (fichiers .php, .inc et .module)

Filtrage des fichiers associés

Comme les fichiers associés et les fichiers à association dynamique peuvent être nombreux, Dreamweaver permet de filtrer les fichiers associés, de façon à trouver précisément les fichiers avec lesquels vous voulez travailler.

Ouvrez une page à laquelle des fichiers associés sont liés.
Si nécessaire, recherchez les fichiers à association dynamique.
Cliquez sur l’icône Filtrer les fichiers associés sur la droite de la barre d’outils Fichiers associés.
Sélectionnez les types de fichiers à afficher dans la barre d’outils Fichiers associés. Par défaut, Dreamweaver sélectionne tous les fichiers associés.
Pour créer un filtre personnalisé, cliquez sur l’icône Filtrer les fichiers associés, puis choisissez Filtre personnalisé.

La boîte de dialogue Filtre personnalisé ne permet de filtrer que les noms de fichiers précis (style.css), les extensions de fichiers (.php) et les expressions à caractère générique utilisant des astérisques (*menu*). Vous pouvez filtrer selon des expressions à caractères génériques multiples en séparant les différentes expressions à l’aide de points-virgules (par exemple style.css;*.js;*tpl.php).

Remarque :

Les paramètres de filtre ne sont pas conservés lorsque vous fermez le fichier.

Nettoyage de fichiers HTML créés avec Microsoft Word

Vous pouvez ouvrir des documents enregistrés par Microsoft Word (Microsoft Word 97 et versions ultérieures) en tant que fichiers HTML, puis utiliser Outils > Nettoyer HTML Word pour supprimer le code HTML superflu généré par Word.

Le code que Dreamweaver supprime est principalement utilisé par Word pour mettre en forme les documents et les afficher dans Word ; il n’est pas requis dans un véritable fichier HTML.

Conservez une copie de votre fichier Word original (.doc) par sécurité, car il se peut que vous ne puissiez plus ouvrir ce document HTML dans Word après avoir nettoyé le fichier HTML.

Remarque :

Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, utilisez la commande Outils > Nettoyer le code HTML.

Enregistrez votre document Microsoft Word au format HTML.

Remarque :

Sous Windows, fermez le fichier dans Word pour éviter une violation de partage.
Ouvrez le fichier HTML dans Dreamweaver.

Pour afficher le code HTML généré par Word, activez le mode Code (Affichage > Code).
Sélectionnez Outils > Nettoyer HTML Word.

Remarque :

Si Dreamweaver ne parvient pas à déterminer la version de Word qui a été utilisée pour enregistrer ce fichier, choisissez la version correcte dans le menu déroulant.
Activez (ou désactivez) les options de nettoyage. Les préférences que vous entrez sont sauvegardées comme paramètres de nettoyage par défaut.

Dreamweaver applique les paramètres de nettoyage au document HTML et un journal contenant une liste des modifications apportées s’affiche (sauf si cette option a été désélectionnée dans la boîte de dialogue).

Options de nettoyage des fichiers HTML créés avec Microsoft Word

Supprimer les marqueurs spécifiques à Word

Supprime tout le code HTML spécifique à Microsoft Word, y compris le code XML des balises HTML, les métadonnées personnalisées Word et les balises de liens figurant dans l’en-tête du document, les balises XML Word, les balises conditionnelles et leur contenu, ainsi que les paragraphes vides et les marges des styles. Vous pouvez sélectionner chacune de ces options individuellement à partir de l’onglet Détaillé.

Nettoyer CSS

Supprime de l’en-tête toutes les feuilles de style spécifiques à Word, y compris les styles CSS incorporés si possible (lorsque le style parent possède les mêmes propriétés), les attributs de style commençant par « mso », les déclarations de styles non CSS, les attributs de style CSS des tableaux et toutes les définitions de style non utilisées. Vous pouvez personnaliser cette option encore davantage à partir de l’onglet Détaillé.

Nettoyer les balises <font>

Supprime les balises HTML, en convertissant le corps du texte par défaut en HTML de taille 2.

Corriger les imbrications de balises non valides

Supprime les balises de définition des polices de caractères insérées par Word en dehors des balises de paragraphe et d’en-tête (au niveau du bloc).

Appliquer le format source

Permet d’appliquer au document les options de formatage que vous avez indiquées dans les préférences de format HTML et dans le fichier SourceFormat.txt.

Afficher le journal à la fin

Affiche un message d’avertissement détaillant les modifications apportées au document dès que le nettoyage est terminé.
Cliquez sur OK ou sur l’onglet Détaillé pour personnaliser davantage les options Supprimer les marqueurs spécifiques à Word et Nettoyer CSS, puis cliquez sur OK.

Articles connexes

Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Création et ouverture de fichiers

Types de fichier Dreamweaver

Boîte de dialogue Nouveau document

Création d’une mise en forme HTML à l’aide une page vierge

Création d’un modèle vierge

Création d’une page basée sur un modèle

Création d’un document basé sur un modèle

Création d’un document à partir d’un modèle à l’aide du panneau Actifs

Création d’un document basé sur un modèle de démarrage de Dreamweaver

Création de fichiers de code dans différents langages de programmation

Enregistrement et rétablissement de documents

Enregistrement d’un document

Enregistrement de tous les documents ouverts

Rétablissement de la dernière version enregistrée d’un document

Définition du type de document par défaut et de ses préférences de codage

Ouverture et modification de documents existants

Ouverture des fichiers associés

Ouverture d’un fichier associé à partir de la barre d’outils Fichiers associés

Ouverture d’un fichier associé à partir de la fenêtre Navigation dans le code

Retour au code source du document principal

Modification de l’affichage de fichiers associés

Désactivation des fichiers associés

Ouverture de fichiers à association dynamique

Définition des préférences relatives aux fichiers à association dynamique

Découvrir les fichiers à association dynamique

Filtrage des fichiers associés

Nettoyage de fichiers HTML créés avec Microsoft Word

Articles connexes

Recevez de l’aide plus rapidement et plus facilement

Interroger la communauté

En savoir plus