Informations générales sur le codage dans 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

En plus des fonctionnalités de modification de texte, Adobe Dreamweaver propose diverses fonctionnalités, telles que les conseils de code, pour vous aider à coder dans les langages suivants :

HTML
PHP
CSS
JavaScript

D'autres langages, comme Perl, ne sont pas pris en charge par les fonctionnalités de codage spécifiques au langage dans Dreamweaver ; par exemple, vous pouvez créer et modifier des fichiers Perl, mais les conseils de code ne s'appliquent pas à ce langage.

Modification automatique du code

Vous pouvez définir des options qui demandent à Dreamweaver de nettoyer automatiquement votre code écrit à la main selon les critères que vous spécifiez. Cependant, votre code n'est jamais réécrit sauf si les options de réécriture de code sont activées ou si vous effectuez une action qui modifie le code. Par exemple, Dreamweaver ne modifie pas vos espaces ou ne change pas la casse des attributs sauf si vous utilisez la commande Appliquer le formatage du source.

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

Les fonctionnalités HTML aller-retour dans Dreamweaver vous permettent de déplacer vos documents dans les deux sens entre un éditeur HTML basé sur du texte et Dreamweaver avec peu ou pas d'effet 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 n'apporte pas de modifications au code créé ou modifié dans d'autres éditeurs HTML, même si le code n'est pas valide, sauf si vous activez les options de réécriture de code.
Dreamweaver ne change pas les balises qu'il ne reconnaît pas—y compris les balises XML—car il n'a aucun critère par lequel les juger. Si une balise non reconnue chevauche une autre balise (par exemple, <MyNewTag><em>text</MyNewTag></em>)), Dreamweaver la marque comme erreur mais ne réécrit pas le code.
Vous pouvez optionnellement configurer Dreamweaver pour surligner le code non valide dans la vue Code (en jaune). Lorsque vous sélectionnez une section surlignée, l'inspecteur de propriétés affiche des informations sur la façon de corriger l'erreur.

Code XHTML

Dreamweaver génère un nouveau code XHTML et nettoie le code XHTML existant de manière à répondre à la plupart des exigences XHTML.Les outils dont vous avez besoin pour répondre aux quelques exigences XHTML restantes sont également fournis.

Annotation

Certaines de ces exigences sont également requises dans diverses versions de HTML.

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

Spécification XHTML	Actions effectuées par Dreamweaver
Il doit y avoir une déclaration DOCTYPE dans le document avant l'elément racine, et la déclaration doit référencer l'un des trois fichiers de définition de type de document (DTD) pour XHTML (strict, transitionnel ou frameset).	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 a un frameset : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
L'elé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 avoir les éléments structurels head, title, et body. Un document frameset doit avoir les éléments structurels head, title et frameset.	Dans un document standard, inclut les éléments head, title, et body. Dans un document frameset, inclut les éléments head, title et frameset.
L'imbrication de tous les éléments du document doit être correcte : <p>Ceci est un <i>mauvais exemple.</p></i> <p>Ceci est un <i>bon exemple.</i></p>	Génère du code correctement imbriqué et, lors du nettoyage XHTML, corrige l'imbrication dans le code qui n'a pas été généré par Dreamweaver.
Tous les noms d'éléments et d'attributs doivent être en minuscules.	Force les noms d'éléments et d'attributs HTML à être en minuscules dans le code XHTML qu'il génère et lors du nettoyage XHTML, quelles que soient vos préférences de casse pour les balises et attributs.
Chaque élément doit avoir une balise de fermeture, sauf s'il est déclaré comme EMPTY dans la DTD.	Insère des balises de fermeture dans le code qu'il génère, et lors du nettoyage XHTML.
Les éléments vides doivent avoir une balise de fermeture, ou la balise d'ouverture doit se terminer par />. Par exemple, <br> n'est pas valide ; la forme correcte est <br></br> ou <br/>. Voici les éléments vides : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, et param. Et pour la rétrocompatibilité avec les navigateurs qui ne prennent pas en charge XML, il doit y avoir un espace avant le /> (par exemple, <br />, pas <br/>).	Insère des éléments vides avec un espace avant la barre oblique de fermeture dans les balises vides du code qu'il génère, et lors du nettoyage XHTML.
Les attributs ne peuvent pas être minimisés ; par exemple, <td nowrap> n'est pas valide ; la forme correcte est <td nowrap="nowrap">. Cela concerne les 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 qu'il génère, et lors du nettoyage XHTML. Remarque : Si un navigateur HTML ne prend pas en charge HTML 4, il risque de ne pas interpréter ces attributs booléens lorsqu'ils apparaissent sous leur forme complète.
Toutes les valeurs d'attributs doivent être entourées de guillemets.	Place des guillemets autour des valeurs d'attributs dans le code qu'il génère, et lors du nettoyage XHTML.
Les éléments suivants doivent avoir un attribut id ainsi qu'un attribut name : a, applet, form, frame, iframe, img, et map. Par exemple, <a name="intro">Introduction</a> n'est pas valide ; la forme correcte est <a id="intro">Introduction</a> ou <a id="section1" name="intro"> Introduction</a>.	Définit les attributs name et id sur la même valeur, chaque fois que l'attribut name est défini par un inspecteur de propriétés, dans le code que Dreamweaver génère, et lors du nettoyage XHTML.
Pour les attributs dont les valeurs sont de type énuméré, les valeurs doivent être en minuscules. Une valeur de type énuméré est une valeur provenant d'une liste spécifiée de valeurs autorisées ; par exemple, l'attribut align a les valeurs autorisées suivantes : center, justify, left, et right.	Force les valeurs de type énuméré à être en minuscules dans le code qu'il génère, et lors du nettoyage XHTML.
Tous les éléments script et style doivent avoir un attribut type. (L'attribut type de l'élément script est obligatoire depuis HTML 4, lorsque l'attribut language a été déprécié.)	Définit les attributs type et language dans les éléments script, et l'attribut type dans les éléments style, dans le code qu'il génère et lors du nettoyage XHTML.
Tous les éléments img et area doivent avoir un attribut alt.	Définit ces attributs dans le code qu'il génère et, lors du nettoyage XHTML, signale les attributs alt manquants.

Expressions régulières

Les expressions régulières sont des modèles qui décrivent des combinaisons de caractères dans le texte.Utilisez-les dans vos recherches de code pour décrire des concepts tels que les lignes qui commencent par « var » et les valeurs d'attribut qui contiennent un nombre.

Le tableau suivant répertorie les caractères spéciaux dans les expressions régulières, leur signification et des exemples d'utilisation.Pour rechercher du texte contenant l'un des caractères spéciaux du tableau, utilisez une séquence d'échappement pour le caractère spécial en le faisant précéder d'une barre oblique inverse. Par exemple, pour rechercher l'astérisque réel dans l'expression some conditions apply*, votre Motif de recherche pourrait ressembler à ceci : apply\*. Si vous n'échappez pas l'astérisque, vous trouverez toutes les occurrences de « apply » (ainsi que « appl », « applyy » et « applyyy »), pas seulement celles suivies d'un astérisque.

Caractère	trouve	Example
^	Début de saisie ou de ligne.	^T correspond à « T » dans « This good earth » mais pas dans « Uncle Tom's Cabin »
$	Fin de saisie ou de ligne.	h$ correspond à « h » dans « teach » mais pas dans « teacher »
*	Le caractère précédent, 0 ou plusieurs fois.	um* correspond à « um » dans « rum », « umm » dans « yummy » et « u » dans « huge »
+	Le caractère précédent, 1 ou plusieurs fois.	um+ correspond à « um » dans « rum » et « umm » dans « yummy » mais à rien dans « huge »
?	Le caractère précédent au maximum une fois (c'est-à-dire indique que le caractère précédent est facultatif).	st?on correspond à « son » dans « Johnson » et « ston » dans « Johnston » mais à rien dans « Appleton » ou « tension »
.	Tout caractère, sauf une nouvelle ligne (retour à la ligne).	.an correspond à « ran » et « can » dans la phrase « bran muffins can be tasty »
x\|y	Soit x, soit y.	FF0000\|0000FF correspond à « FF0000 » dans bgcolor="#FF0000" et « 0000FF » dans font color="#0000FF"
{n}	Exactement n occurrences du caractère précédent.	o{2} correspond à « oo » dans « loom » et aux deux premiers « o » dans « mooooo » mais à rien dans « money »
{n,m}	Au moins n et au maximum m occurrence du caractère précédent.	F{2,4} correspond à « FF » dans « #FF0000 » et aux quatre premiers F dans #FFFFFF
[abc]	L'un des caractères entre les crochets. Spécifiez une plage de caractères avec un trait d'union (par exemple, [a-f] équivaut à [abcdef]).	[e-g] correspond à « e » dans « bed », « f » dans « folly » et « g » dans « guard »
[^abc]	Tout caractère non inclus entre les crochets. Spécifiez une plage de caractères avec un trait d'union (par exemple, [^a-f] équivaut à [^abcdef]).	[^aeiou] correspond initialement à « r » dans « orange », « b » dans « book » et « k » dans « eek! »
\b	Limite de mot (par exemple un espace ou un retour chariot).	\bb correspond à « b » dans « book » mais à rien dans « goober » ou « snob »
\B	Tous les éléments sauf les limites de mot	\Bb correspond à « b » dans « goober » mais à rien dans « book »
\d	Tout chiffre. C’est l’équivalent de [0-9].	\d correspond à « 3 » dans « C3PO » et à « 2 » dans « apartment 2G »
\D	Tout caractère alphabétique et non numérique. C’est l’équivalent de [^0-9].	\D correspond à « S » dans « 900S » et à « Q » dans « Q45 »
\f	Saut de page.
\n	Saut de ligne.
\r	Retour chariot.
\s	N'importe quel caractère d'espacement unique, y compris l'espace, la tabulation, le saut de page ou le saut de ligne.	\sbook correspond à « book » dans « blue book » mais à rien dans « notebook »
\S	Tout caractère autre qu'un espace blanc.	\Sbook correspond à « book » dans « notebook » mais à rien dans « blue book »
\t	Tabulation.
\w	Tout caractère alphanumérique, y compris le caractère de soulignement. C'est l'équivalent de [A-Za-z0-9_].	b\w* correspond à « barking » dans « the barking dog » et à « big » et « black » dans « the big black dog »
\W	Tout caractère non alphanumérique. Équivalent à [^A-Za-z0-9_].	\W correspond à « & » dans « Jake&Mattie » et à « % » dans « 100 % »
Ctrl+Entrée ou Maj+Entrée (Windows), ou Ctrl+Retour ou Maj+Retour ou Cmd+Retour (Macintosh)	Retour chariot. Assurez-vous de désélectionner l'option Ignorer les différences d'espacement lors de la recherche, si vous n'utilisez pas d'expressions régulières. Notez que cela correspond à un caractère particulier, pas à la notion générale de saut de ligne ; par exemple, cela ne correspond pas à une balise <br> ou à une balise <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élimiter les groupements dans l'expression régulière pour pouvoir y faire référence ultérieurement. Utilisez ensuite $1, $2, $3, etc. dans le champ Remplacer par pour faire référence aux premier, deuxième, troisième groupements entre parenthèses et suivants.

Annotation

Dans la zone Rechercher, pour faire référence à un groupement entre parenthèses plus tôt dans l'expression régulière, utilisez \1, \2, \3, etc. au lieu de $1, $2, $3.

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

Code de comportement de serveur

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

Si vous modifiez manuellement le code d'un bloc de code, vous ne pouvez plus utiliser les panneaux comme Liaisons et Comportements serveur pour modifier le comportement serveur. Dreamweaver recherche des motifs spécifiques dans le code de la page pour détecter les comportements serveur et les afficher dans le panneau Comportements serveur.Si vous modifiez le code d'un bloc de code de quelque manière que ce soit, Dreamweaver ne peut plus détecter le comportement serveur et l'afficher dans le panneau Comportements serveur. Cependant, le comportement serveur existe toujours sur la page, et vous pouvez le modifier dans l'environnement de codage de Dreamweaver.

À propos du codage dans Dreamweaver

Langages de programmation pris en charge par Dreamweaver

Modification automatique du code

Code XHTML

Expressions régulières

Code de comportement de serveur

Articles connexes

Comprendre

Communauté

Accueil Adobe