Guide d'utilisation Annuler

Création et ouverture de fichiers

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

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.

  1. Sélectionnez Fichier > Nouveau.

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

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

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

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

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

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

  8. Cliquez sur le bouton Créer.

  9. Enregistrez la page (Fichier > Enregistrer).

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

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

  1. Sélectionnez Fichier > Nouveau.

  2. Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèles de site.

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

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

  5. Cliquez sur le bouton Créer.

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

  7. Dans la boîte de dialogue Enregistrer sous, sélectionnez le site dans lequel le modèle doit être enregistré.
  8. 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

  1. Sélectionnez Fichier > Nouveau.

  2. Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Page du modèle.

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

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

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

  6. Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d’autres contenus de conception de pages.

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

  1. Ouvrez le panneau Actifs (Fenêtre > Actifs) s’il n’est pas déjà ouvert.

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

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

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

  1. Sélectionnez Fichier > Nouveau.

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

  3. Cliquez sur le bouton Créer.

    Le nouveau document et l’ensemble des fichiers associés s’ouvrent dans la fenêtre Document.

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

  1. Sélectionnez Fichier > Nouveau document.

  2. Dans Type de document, sélectionnez le fichier de code que vous souhaitez créer.

  3. 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
    Création d’une page PHP

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

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

  1. 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.
  2. Dans la boîte de dialogue Enregistrer sous qui s’affiche, recherchez le dossier dans lequel vous voulez enregistrer le fichier.
  3. Dans la zone de texte Nom de fichier, entrez le nom du fichier.

  4. Cliquez sur Enregistrer pour enregistrer le fichier .

Enregistrement de tous les documents ouverts

  1. Choisissez Fichier > Enregistrer tout.

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

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

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

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

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

  2. Cliquez sur la catégorie Nouveau document dans la liste de gauche.

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

  1. Choisissez Fichier > Ouvrir.

    Remarque :

    Vous pouvez également utiliser le panneau Fichiers pour ouvrir les fichiers.

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

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

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.

  1. Placez le point d’insertion sur une ligne ou dans une zone dont vous savez qu’elle est influencée par un fichier associé.

  2. Attendez que l’indicateur Navigation dans le code s’affiche, puis cliquez dessus pour ouvrir la fenêtre Navigation dans le code.

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

  4. Cliquez sur l’élément qui vous intéresse afin d’ouvrir le fichier associé correspondant.

Retour au code source du document principal

  1. Cliquez sur le bouton Code source de la barre d’outils Fichiers apparenté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.

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.

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

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

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.

  1. Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac OS).

  2. Dans la catégorie Général, assurez-vous que l’option Activer les fichiers associés est bien activée.

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

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

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

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.

  1. Ouvrez une page à laquelle des fichiers associés sont liés.

  2. Si nécessaire, recherchez les fichiers à association dynamique.

  3. Cliquez sur l’icône Filtrer les fichiers associés sur la droite de la barre d’outils Fichiers associés.

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

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

  1. Enregistrez votre document Microsoft Word au format HTML.
    Remarque :

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

  2. Ouvrez le fichier HTML dans Dreamweaver.

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

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

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

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

Logo Adobe

Accéder à votre compte