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

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.

À 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

Autres ressources similaires

Recevez de l’aide plus rapidement et plus facilement

Interroger la communauté

En savoir plus