Guide d'utilisation Annuler

Optimisation de l’espace Dreamweaver pour la conception visuelle

  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

 

Affichage de panneaux de développement d’applications web

Sélectionnez la catégorie Données dans le menu Catégorie du panneau Insertion afin d’afficher un groupe de boutons permettant d’ajouter du contenu dynamique et des comportements de serveur à votre page.

Le nombre et le type de boutons qui s’affichent varient en fonction du type de document ouvert dans la fenêtre Document. Placez la souris au-dessus d’une icône pour faire apparaître une infobulle décrivant la fonction de ce bouton.

Le panneau Insertion comprend des boutons qui permettent d’ajouter les éléments suivants sur la page :

  • Jeu d’enregistrements

  • Texte ou tableaux dynamiques

  • Barres de navigation d’un enregistrement

    Si vous passez en mode Code (Affichage > Code), il est possible que des panneaux supplémentaires apparaissent dans la catégorie correspondante du panneau Insertion, ce qui vous permet d’insérer du code dans la page. Par exemple, si vous visionnez une page ColdFusion en mode Code, un panneau CFML devient disponible dans la catégorie CFML du panneau Insertion.

    Plusieurs panneaux vous permettent de créer des pages dynamiques :

     

    • Sélectionnez le panneau Liaisons (Fenêtre > Liaisons) pour définir des sources de contenu dynamique pour votre page et ajouter le contenu dans la page.

    • Sélectionnez Comportements du serveur (Fenêtre > Comportements du serveur) pour ajouter une logique côté serveur dans vos pages dynamiques.

    • Sélectionnez le panneau Bases de données (Fenêtre > Bases de données) pour explorer les bases de données ou créer des connexions aux bases de données.

    • Sélectionnez le panneau Composants (Fenêtre > Composants) afin d’inspecter, d’ajouter ou de modifier du code pour des composants ColdFusion.

Remarque :

Le panneau Composants n’est activé que si vous ouvrez une page ColdFusion.  

Un comportement de serveur est l’ensemble des instructions insérées dans une page dynamique au moment de la création et exécutées sur le serveur lors de l’exécution.

Pour voir le didacticiel sur la configuration de la mise au point Espace de travail, consultez la page www.adobe.com/go/vid0144_fr.

Affichage de votre base de données sous Dreamweaver

Vous pouvez afficher la structure et le contenu de votre base de données une fois la connexion établie sous Dreamweaver.

  1. Ouvrez le panneau Base de données (Fenêtre > Bases de données).

    Le panneau Base de données affiche toutes les bases de données pour lesquelles vous avez créé des connexions. Si vous développez un site ColdFusion, le panneau affiche toutes les bases de données pour lesquelles des sources de données ont été définies dans ColdFusion Administrator.

    Remarque :

    Dreamweaver recherche le site en cours sur le serveur ColdFusion que vous avez défini.

    Si aucune base de données n’apparaît dans le panneau, vous devez créer une connexion de base de données.

  2. Pour afficher les tables, les procédures stockées et les modes dans la base de données, cliquez sur le signe Plus (+) situé en regard d’une connexion dans la liste.
  3. Pour afficher les colonnes de la table, cliquez sur un nom de table.

    Les icônes des colonnes reflètent le type de données et indiquent la clé primaire de la table.

  4. Pour afficher les données d’une table, cliquez sur le nom de la table dans la liste avec le bouton droit de la souris (Windows) ou en appuyant sur Contrôle (Macintosh) et choisissez Afficher les données dans le menu déroulant.

Prévisualisation des pages dynamiques dans un navigateur

Les développeurs d’applications web déboguent souvent leurs pages en les vérifiant régulièrement dans un navigateur web. Vous pouvez afficher rapidement vos pages dynamiques dans un navigateur sans avoir à les télécharger manuellement sur un serveur au préalable (appuyez sur F12).

Pour lancer un aperçu des pages dynamiques, vous devez compléter la catégorie Serveur d’évaluation dans la boîte de dialogue Définition du site.

Vous pouvez configurer Dreamweaver pour utiliser des fichiers temporaires à la place des fichiers d’origine. Avec cette option, Dreamweaver exécute une copie temporaire de la page sur un serveur web avant de l’afficher dans votre navigateur. (Dreamweaver efface ensuite ce fichier temporaire du serveur.) Pour définir cette option, cliquez sur Édition > Préférences > Aperçu dans le navigateur.

L’option Aperçu dans le navigateur ne charge pas les pages associées (pages de résultats ou d’informations détaillées), les fichiers dépendants (fichiers image, par exemple) ou les inclusions côté serveur. Pour charger un fichier manquant, choisissez Fenêtre > Site pour ouvrir le panneau Site, sélectionnez le fichier dans Dossier local, puis cliquez sur la flèche bleue vers le haut dans la barre d’outils pour copier le fichier dans le dossier du serveur web.

Limitation des informations de base de données affichées sous Dreamweaver

Les utilisateurs chevronnés travaillant avec des systèmes de base de données de grande envergure tels qu’Oracle devront limiter le nombre d’éléments de base de données récupérés par Dreamweaver au moment de la conception. Une base de données Oracle peut contenir des éléments que Dreamweaver ne peut pas traiter au moment de la conception. Vous pouvez créer un schéma dans Oracle, puis l’utiliser dans Dreamweaver pour filtrer les éléments indésirables au moment de la conception.

Remarque :

Vous ne pouvez pas créer de schéma ou de catalogue dans Microsoft Access.

D’autres utilisateurs peuvent avoir intérêt à limiter la quantité d’informations récupérées par Dreamweaver au moment de la conception. Certaines bases de données contiennent des dizaines, voire des centaines de tableaux, et vous pouvez ne pas avoir envie de tous les répertorier pendant que vous travaillez. Un schéma ou catalogue peut limiter le nombre d’éléments de base de données récupérés au moment de la conception.

Pour commencer, créez un schéma ou un catalogue dans votre application de base de données pour pouvoir ensuite l’appliquer dans Dreamweaver. Consultez la documentation de votre système de base de données ou adressez-vous à votre administrateur système.

Remarque :

Vous ne pouvez pas appliquer un schéma ou un catalogue dans Dreamweaver si vous développez une application ColdFusion ou utilisez Microsoft Access.

  1. Ouvrez une page dynamique dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).
    • Si la connexion de base de données existe, cliquez dessus dans la liste avec le bouton droit de la souris (Windows) ou en appuyant sur le bouton Contrôle (Macintosh) et choisissez Modifier la connexion dans le menu déroulant.

    • Si la connexion n’existe pas, cliquez sur le bouton Plus (+) en haut du panneau afin de la créer.

  2. Cliquez sur Avancé dans la boîte de dialogue de la connexion.
  3. Indiquez votre schéma ou catalogue, puis cliquez sur OK.

Configuration de l’inspecteur Propriétés pour les procédures stockées ColdFusion et les commandes ASP

Modifiez la procédure stockée sélectionnée. Les options disponibles dépendent de la technologie de serveur utilisée.

  1. Modifiez les options à votre convenance. Dreamweaver procède à la mise à jour de la page lorsque vous sélectionnez une nouvelle option dans l’inspecteur.

Options de nom du champ

Cet inspecteur Propriétés s’affiche lorsque Dreamweaver rencontre un type d’entrée inconnu. En général, cela est dû à une erreur de frappe ou à un autre problème lié à la saisie de données.

Si vous modifiez le type de champ dans l’inspecteur Propriétés et placez une valeur reconnue par Dreamweaver (par exemple, si vous corrigez la faute d’orthographe), l’inspecteur Propriétés se met à jour pour afficher les propriétés correspondant au type reconnu. Définissez une ou plusieurs des options suivantes dans l’inspecteur Propriétés :

Nom du champ

Attribue un nom au champ. Cette zone est obligatoire et le nom doit être unique.

Type

Définit le type d’entrée du champ. Le contenu de cette zone reflète la valeur du type d’entrée apparaissant actuellement dans votre code source HTML.

Valeur

Définit la valeur du champ.

Paramètres

Ouvre la boîte de dialogue Paramètres pour que vous puissiez voir les attributs actuels du champ, mais aussi en ajouter ou en supprimer.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?