Guide d'utilisation Annuler

À propos du codage dans Dreamweaver

  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

 

Découvrez comment Dreamweaver prend en charge les différents langages de programmation permettant la création de sites web.

Les langages de programmation les plus populaires pour créer et développer des sites web parfaitement opérationnels sont HTML, HTML5 et CSS en front-end, PHP, JavaScript, Java et jQuery en back-end.

Vous pouvez mettre au point l’aspect global d’un site (polices, couleurs, etc.) en CSS, puis passer en HTML pour insérer des images, du texte, des vidéos, des formulaires et autres éléments, afin de former une page web cohérente.

En combinant les langages CSS et HTML, vous pouvez créer un site statique. Cependant, la plupart des sites web exigent un minimum d’interaction (pour demander au client de remplir un formulaire ou d’effectuer un paiement, par exemple) et une base de données pour stocker toutes les données du site.

Pour créer ces canaux de communication en arrière-plan, vous devez faire appel à un langage de programmation côté serveur (tel que PHP), qui communique avec la base de données.

Langages de programmation pris en charge par Dreamweaver

Adobe Dreamweaver contient à la fois des options permettant de lancer des éditeurs de texte et des options conçues pour vous assister dans la rédaction du code, par exemple les conseils de code, et ce dans les langages suivants :

  • HTML
  • PHP
  • CSS
  • JavaScript

D’autres langages, par exemple le langage Perl, ne sont pas pris en charge par les fonctions de codage spécifiques au langage de Dreamweaver ; vous pouvez par exemple créer et modifier des fichiers Perl, mais vous ne pourrez pas accéder aux conseils de code.

Modification automatique du code

Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos propres critères. Toutefois, le code n’est corrige que si vous activez les options correspondantes ou si l’une de vos opérations entraîne une modification du code. Par exemple, Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement si vous sélectionnez la commande Appliquer la mise en forme source.

Quelques-unes des options de réécriture du code sont activées par défaut.

Les fonctions Roundtrip HTML permettent d’échanger des documents entre un éditeur HTML en mode texte et Dreamweaver, moyennant un impact nul ou infime sur le contenu et la structure du code source HTML original du document. Parmi ces fonctionnalités, on compte les suivantes :

  • Vous pouvez lancer un éditeur de texte tiers pour modifier le document actif.

  • Par défaut, Dreamweaver ne modifie pas le code créé ou modifié par un autre éditeur HTML, même s’il est incorrect, à moins que vous n’ayez activé les options de réécriture.

  • En l’absence de critères de référence, Dreamweaver conserve les balises qu’il ne reconnaît pas telles quelles, notamment les balises XML. Si une balise non reconnue encadre une autre balise (par exemple, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver la marque comme erronée, mais ne modifie pas le code.

  • Vous pouvez activer certaines options de Dreamweaver pour mettre les éléments de code HTML incorrects en surligné (jaune) dans le mode Code. Si vous sélectionnez une section en surbrillance, l’inspecteur Propriétés affiche des informations sur l’erreur et la manière de la corriger.

Code XHTML

Dreamweaver génère un nouveau code XHTML et nettoie le code XHTML existant, conformément à la plupart des spécifications XHTML. Vous disposez également des outils permettant de se conformer aux rares spécifications XHTML ignorées lors de ce type d’opération.

Remarque :

Certaines de ces spécifications sont également exigées dans diverses versions du langage HTML.

Le tableau ci-dessous répertorie les spécifications XHTML automatiquement observées par Dreamweaver :

Spécification XHTML

Actions effectuées par Dreamweaver

Une déclaration DOCTYPE doit précéder l’élément racine dans le document, laquelle doit faire référence à l’un des trois fichiers DTD (Document Type Definition) pour XHTML (strict, transitionnel ou jeu de cadres).

Ajoute une déclaration XHTML DOCTYPE à un document XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ou, si le document XHTML comporte un jeu de cadres :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

L’élément racine du document doit être html, et l’élément html doit désigner l’espace de noms XHTML.

Ajoute l’attribut namespace à l’élément html comme suit :

<html xmlns="http://www.w3.org/1999/xhtml">

Un document standard doit comporter les éléments structurels head, title et body. Un document de jeu de cadres doit comporter les éléments structurels head, title et frameset.

Dans un document standard, inclut les éléments structurels head, title et body. Dans un document de jeu de cadres, inclut les éléments head, title et frameset.

L’imbrication de tous les éléments du document doit être correcte :

<p>Voici un <i>exemple incorrect.</p></i> <p>Voici un <i>exemple incorrect.</i></p>

Génère correctement le code imbriqué et, pendant le nettoyage du code XHTML, corrige l’imbrication du code non généré par Dreamweaver.

Tous les noms d’éléments et d’attributs doivent être rédigés en minuscules.

Impose l’usage des minuscules dans les noms d’éléments et d’attributs HTML du code XHTML généré par ses soins et pendant le nettoyage du code XHTML, indépendamment des préférences de casse définies pour la balise et l’attribut.

Tous les éléments doivent se terminer par une balise de fin, à moins qu’ils ne soient déclarés dans le fichier DTD comme EMPTY.

Insère des balises de fin dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.

Les éléments vides doivent se terminer par une balise de fin ou la balise de début doit être fermée avec le code />. Par exemple, <br> est incorrect ; la forme correcte de la balise est soit <br></br>, soit <br/>. Les éléments vides sont les suivants : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta et param.

Pour garantir la rétrocompatibilité avec les navigateurs non XML, un espace doit précéder le code /> (par exemple, <br /> et non<br/>).

Insère les éléments vides avec un espace avant la barre oblique de fermeture des balises vides dans le code généré par ses soins ainsi que pendant le nettoyage du code XHTML.

Il est impossible d’abréger les attributs ; ainsi, <td nowrap> est incorrect ; la forme correcte est <td nowrap="nowrap">.

Cette règle s’applique aux attributs suivants : checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly et selected.

Insère des paires attribut/valeur complètes dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.

Remarque : Un navigateur HTML ne prenant pas en charge HTML 4 risque de ne pas pouvoir interpréter ces attributs booléens sous leur forme complète.

Tous les attributs doivent être placés entre guillemets.

Met les valeurs d’attribut entre guillemets dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.

Les éléments suivants doivent comporter un attribut id et un attribut name : a, applet, form, frame, iframe, img et map. Par exemple, <a name="intro">Introduction</a> est incorrect ; la forme correcte est

<a id="intro">Introduction</a> ou <a id="section1" name="intro"> Introduction</a>.

Affecte la même valeur aux attributs name et id, toutes les fois où l’attribut name est défini par un inspecteur Propriétés, dans le code généré par Dreamweaver, ainsi que pendant le nettoyage du code XHTML.

Dans le cas d’attributs dont les valeurs sont de type Enuméré, celles-ci doivent figurer en minuscules.

Une valeur de type Enuméré est une valeur appartenant à une liste donnée de valeurs autorisées ; par exemple, l’attribut align comprend les valeurs autorisées suivantes : center, justify, left et right.

Impose l’utilisation des minuscules pour les valeurs de type Enuméré dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.

Tous les éléments de script et de style doivent comporter un attribut type.

(La nécessité de l’attribut type d’un élément script a été introduite avec HTML 4, lors de la dépréciation de l’attribut language.)

Définit les attributs type et language dans les éléments script ainsi que l’attribut type dans les éléments style, mais aussi dans le code généré par ses soins et pendant le nettoyage du code XHTML.

Tous les éléments img et area doivent comprendre un attribut alt.

Définit ces attributs dans le code généré par ses soins et, pendant le nettoyage du code XHTML, signale les attributs alt manquants.

Expressions régulières

Les expressions régulières sont des modèles décrivant des combinaisons de caractères dans un texte. Utilisez-les dans vos recherches pour décrire des concepts tels que « lignes commençant par ‘var’ » ou « valeurs d’attribut contenant un nombre ».

Le tableau ci-dessous présente les caractères spéciaux des expressions régulières, leur signification et des exemples d’utilisation. Pour rechercher du texte contenant un des caractères spéciaux présentés dans le tableau, indiquez qu’il s’agit d’un caractère spécial à l’aide d’une barre oblique inversée. Par exemple, pour rechercher l’astérisque dans la phrase conditions spéciales*, vous pouvez utiliser un modèle de recherche tel que celui-ci : spéciales\*. Si vous n’indiquez pas l’astérisque comme caractère spécial, vous trouverez toutes les occurrences de « spéciales » (de même que « spéciale », « spécialess » et « spécialesss »), et pas seulement celles qui sont suivies d’un astérisque.

Caractère

trouve

Exemple

^

Début de saisie ou de ligne.

^T trouve « T » dans « Tonnerre de Brest », mais pas dans « La case de l’oncle Tom »

$

Fin de saisie ou de ligne.

n$ trouve « n » dans « malin » mais pas dans « noir »

*

Le caractère précédent, 0 ou plusieurs fois.

um* trouve « um » dans « rhum », « umm » dans « yummy » et « u » dans « bouge »

+

Le caractère précédent, 1 ou plusieurs fois.

um+ trouve « um » dans « rhum », « umm » dans « yummy » mais rien dans « bouge »

?

Le caractère précédent, une fois au maximum (en d’autres termes, le caractère précédent est facultatif).

st?on trouve « son » dans « Johnson » et « ston » dans « Johnston », mais rien dans « Appleton » ou « tension »

.

Tout caractère, sauf une nouvelle ligne (retour à la ligne).

.an trouve « ran », « tan » et « lan » dans le mot « rantanplan »

x|y

Soit x, soit y.

FF0000|0000FF trouve « FF0000 » dans bgcolor=”#FF0000” et « 0000FF » dans font color=”#0000FF”

{n}

Exactement n occurrences du caractère précédent.

l{2} trouve « ll » dans « elle » et les deux premiers l de « ellllle », mais ne trouve rien dans « léger »

{n,m}

Au moins n et au plus m occurrences du caractère précédent.

F{2,4} trouve « FF » dans « #FF0000 » et les quatre premiers F dans #FFFFFF

[abc]

L’un des caractères entourés de crochets. Spécifiez une plage de caractères à l’aide d’un trait d’union (par exemple, [a-f] équivaut à [abcdef]).

[e-g] trouve « e » dans « œil », « f » dans « fil » et « g » dans « garde »

[^abc]

Tout caractère non inclus entre les crochets. Spécifiez une plage de caractères à l’aide d’un trait d’union (par exemple, [^a-f] équivaut à [^abcdef]).

[^aeiou] trouve initialement « r » dans « orange », « b » dans « balle » et « k » dans « eek! »

\b

Limite de mot (par exemple un espace ou un retour chariot).

\bb trouve « b » dans « balle » mais pas dans « gober » ou « snob »

\B

Tous les éléments sauf les limites de mot

\Bb trouve « b » dans « gober » mais pas dans « balle »

\d

Tout chiffre. C’est l’équivalent de [0-9].

\d trouve « 3 » dans « C3PO » et « 2 » dans « appartement 2G ».

\D

Tout caractère alphabétique et non numérique. C’est l’équivalent de [^0-9].

\D trouve « S » dans « 900S » et « Q » dans « Q45 ».

\f

Saut de page.

\n

Saut de ligne.

\r

Retour chariot.

\s

Tout « espace blanc », ou caractère d’espacement : espace, tabulation, saut de page ou saut de ligne.

\sval trouve « val » dans « le val André » mais pas dans « aval »

\S

Tout caractère autre qu’un espace blanc.

\Sval trouve « val » dans « aval », mais pas dans « le val André »

\t

Tabulation.

\w

Tout caractère alphanumérique, y compris le caractère de soulignement. C’est l’équivalent de [A-Za-z0-9_].

c\w* trouve « chien » dans « le chien noir », ainsi que « cou » et « chien » dans « le cou du chien noir ».

\W

Tout caractère non alphanumérique. C’est l’équivalent de [^A-Za-z0-9_].

\W trouve « & » dans « Tintin&Milou » et « % » dans « 100% ».

Ctrl+Entrée ou Maj+Entrée (Windows), ou Ctrl+Retour ou Maj+Retour ou Cmd+Retour (Macintosh)

Retour chariot. Veillez à désactiver l’option Ignorer les différences entre les espaces blancs lorsque vous effectuez ce type de recherche si vous n’utilisez pas des expressions régulières. Notez que cette recherche porte sur un caractère particulier et non sur la notion de retour à la ligne ; par exemple, elle ne trouvera pas une balise <br> ou <p>. Les caractères de retour chariot apparaissent en tant qu’espaces en mode Création, et non en tant que sauts de ligne.

Utilisez des parenthèses pour définir au sein de l’expression régulière des groupes auxquels il sera fait référence plus tard ; utilisez $1, $2, $3, etc. dans le champ Remplacer pour faire référence au premier, deuxième, troisième, etc., groupe entre parenthèses.

Remarque :

Dans la zone de texte Rechercher, faites référence au groupe entre parenthèses mentionné plus tôt dans l’expression régulière en indiquant \1, \2, \3 etc. au lieu de $1, $2, $3.

Par exemple, la recherche de (\d+)\/(\d+)\/(\d+) et le remplacement par $2/$1/$3 échangent le jour et le mois dans une date séparée par des barres obliques permettant ainsi la conversion entre les dates de style américain et les dates de style européen.

Code de comportement de serveur

Lorsque vous sélectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le développement d’une page dynamique, Dreamweaver insère un ou plusieurs blocs de code dans la page pour faire fonctionner le comportement de serveur.

Si vous modifiez manuellement le code contenu dans un bloc de code, les panneaux, par exemple le panneau Liaisons et le panneau Comportements de serveur, ne sont plus accessibles pour la modification du comportement du serveur. Dreamweaver détecte les comportements de serveur en se référant à des modèles de code spécifiques dans la page, puis les affiche dans le panneau correspondant. Toute modification du code d’un bloc de code empêche dès lors Dreamweaver de détecter le comportement de serveur et de l’afficher dans le panneau Comportements de serveur. Le comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans l’environnement de codage de Dreamweaver.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?