Bonjour.
Dans cette vidéo, nous allons nous intéresser à certaines des techniques de codage avancées de Dreamweaver.
J'utiliserai Emmet pour vous montrer des raccourcis de codage, et le curseur multiple pour effectuer des modifications sophistiquées.
Je vous présenterai aussi l'analyse lint, un moyen extrêmement rapide de corriger les erreurs.
Pour suivre ce tutoriel, vous devrez définir votre site, comme je l'ai fait ici, en ouvrant le menu Site et en cliquant sur Nouveau site.
C'est bien utile pour gérer vos fichiers dans Dreamweaver.
Cette vidéo ne couvre pas la définition de site.
Il en existe cependant une autre qui traite de ce sujet en détail et que je vous invite à visionner.
Nous allons d'abord nous pencher sur Emmet, un ensemble de raccourcis intégrés à Dreamweaver que nous utiliserons pour créer cette page.
Voici à quoi elle ressemblera une fois finalisée et voici le fichier de départ.
C'est dans la partie supérieure que réside la principale différence.
Sur cette page, il n'y a rien en haut de l'en-tête, mais sur celle-ci, il y a une image et un système de navigation.
Cette vidéo est néanmoins essentiellement consacrée aux raccourcis de programmation.
Bien, revenons maintenant dans Dreamweaver.
Pour les besoins de ce tutoriel, je travaillerai en mode Développeur, et non en mode Standard.
Pour obtenir exactement les mêmes résultats que moi, passez en mode Développeur.
À gauche, dans le panneau Fichiers, ouvrez index-start.html.
C'est le fichier sur lequel je travaille actuellement.
Double-cliquez dessus.
Notre première utilisation des raccourcis servira à ajouter un en-tête.
Sous cette section d'en-tête, j'insère une tabulation, puis l'en-tête.
Mais l'idée est d'utiliser un raccourci.
Donc, au lieu de saisir toutes les parenthèses angulaires — les débuts et fins de balise — je peux me contenter de saisir « header ».
Et au lieu d'appuyer sur Entrée, j'appuie sur la touche de tabulation.
Regardez !
Génial.
Les parenthèses angulaires ont été automatiquement ajoutées.
Idem pour la balise fermante.
Super.
J'insère un retour chariot.
C'est très pratique pour n'ajouter qu'une seule balise, mais supposons que je veuille aussi ajouter un système de navigation à plusieurs éléments.
Je saisis « nav », j'appuie sur Entrée, puis je saisis « ul ».
Je pourrais continuer à saisir mes balises une à une, mais il existe une solution plus pratique.
Voyons de quoi il s'agit.
En haut, on a la balise « nav », à l'intérieur de laquelle se trouve la balise « ul », c'est-à-dire cette liste. « ul » doit contenir tous les éléments de la liste, qui doivent être des hyperliens pour que l'on puisse cliquer dessus.
On va donc créer tout ça rapidement dans Dreamweaver.
Je saisis « nav » mais avant d'appuyer sur la touche de tabulation, j'ajoute une parenthèse angulaire.
Ce signe « supérieur à » indique que ma prochaine saisie sera un enfant de la balise « nav ».
Il sera contenu dedans.
Dans cette balise « nav », je veux placer une balise « ul » et dans la balise « ul », un élément de liste.
Je saisis « li ».
Dans la balise « li », j'aimerais ajouter une balise « a », autrement dit la balise d'ancrage.
Et lorsque j'appuie sur la touche de tabulation… Tada !
Regardez la balise « a ».
Emmet a deviné que je voulais une référence d'hyperlien et a automatiquement modifié toute la syntaxe.
La tabulation est impeccable.
C'est ce qui me plaît dans Emmet.
Génial, non ?
Mais attendez de voir la suite.
Comme je n'ai qu'un seul lien ici, je choisis Édition > Annuler et je supprime tout jusqu'aux éléments de liste.
Avant d'ajouter la balise d'ancrage, je saisis le symbole de multiplication, c'est-à-dire l'astérisque, puis le chiffre « 5 » et enfin la balise « a ».
Et maintenant, regardez bien.
J'appuie sur la touche de tabulation.
Et voilà !
Ce qu'il y a de bien avec Emmet, c'est que la syntaxe est très facile à mémoriser.
Avec un peu de pratique, vous pourrez gagner pas mal de temps.
Dans la suite de ce passionnant tutoriel sur les raccourcis, nous allons nous intéresser aux curseurs multiples.
Supposons que vous vouliez ajouter le lien.
Pour l'instant, il s'agit d'un hyperlien.
À quoi renverra-t-il ?
Au lieu de les saisir individuellement, je clique sur le premier, je maintiens la touche Option enfoncée — ou Alt sur un PC — je clique et je fais glisser le curseur au centre de ces signes.
Regardez ça !
C'est comme si j'avais un curseur géant.
Et maintenant, je saisis mon URL.
C'est pratique.
Je saisis les cinq lignes à la fois.
Comme je ne veux pas ajouter les mêmes liens partout, je les supprime.
Le curseur multiple peut faire encore mieux.
Un peu plus bas, on a une balise « span » sur ces deux lignes.
Je veux maintenant ajouter une classe à ces deux balises.
Il faut que ce soit la même.
Je peux cliquer ici mais il faut que le curseur clignote ailleurs sur la page… n'importe où.
J'appuie sur la touche Commande sur Mac ou Ctrl sur PC et — regardez bien — je clique ici.
J'ai maintenant deux curseurs clignotants.
Génial.
Lorsque j'entre ma classe, elle apparaît à l'emplacement des deux curseurs : celui du bas et celui du haut.
J'ai ajouté la classe mais je vais la supprimer pour le moment et vous présenter d'autres avantages d'Emmet.
Pour l'instant, j'ai ajouté des balises là-haut… des balises d'en-tête et de fin.
Et en bas, j'ai utilisé le curseur multiple pour ajouter la classe.
Supposons que je veuille faire les deux en même temps.
Avec Emmet, c'est possible.
Regardez.
Sous « header », je vais ajouter le logo.
Et comme je veux qu'il soit cliquable, j'ajoute une balise « a », puis je saisis la classe directement après la balise, sans parenthèses angulaires.
J'insère donc un point, le nom de la classe — site-logo — puis j'appuie sur la touche de tabulation.
Regardez.
La référence de l'hyperlien est automatiquement ajoutée.
À quoi renvoie-t-elle ?
Je saisis un signe dièse pour le moment, afin de créer un espace réservé.
La classe a été automatiquement ajoutée en une seule action.
Je recommence avec une image.
Je saisis « img », j'ajoute une classe — dans ce cas, ce sera site-logo-white — puis j'appuie sur la touche de tabulation.
Génial.
L'image, sa source, le texte « alt » et la classe sont pré-remplis par Emmet.
Emmet est intégré à Dreamweaver, qui inclut ses propres conseils de code exploitables dans cette source.
Dreamweaver va me demander la destination.
Je saisis un « i », ce qui est suffisant pour obtenir une suggestion.
« Vous voulez dire le dossier d'images ?
» Je réponds « Oui ».
Et Dreamweaver de demander « Vous voulez dire ces images ?
» Je réponds « Oui ».
Ces images me sont proposées car je les ai définies dans mon site lorsque j'ai configuré ce projet.
Dreamweaver examine mon dossier d'images et me propose tout ce qu'il contient.
Si mon image ne s'y trouve pas, je peux cliquer sur Parcourir.
Mais elle est bien là.
Je peux parcourir la liste pour la trouver ou tout simplement saisir « L », car je sais qu'elle commence par un « L ».
Dreamweaver a sélectionné deux fichiers commençant par « L » : logo-dark et logo-white.
Regardez.
C'est très facile à utiliser.
Donc, logo-dark — il porte bien son nom.
Je veux bien sûr le logo blanc.
En cas de doute, vous pouvez cliquer sur l'un et l'autre, puis utiliser les touches fléchées du clavier pour passer de l'un à l'autre.
Vous voyez, c'est celui-ci que je veux.
Jetons un coup d'œil dans le navigateur… parfait.
Voici mon image… la blanche.
C'est un peu la pagaille au niveau du système de navigation.
Je vais rectifier le tir.
L'idée serait d'ajouter une classe et je vais pour cela utiliser les conseils de code de Dreamweaver.
Je commence à saisir « class », j'appuie sur Entrée et Dreamweaver complète la syntaxe.
Dans cet exemple, ce sera site-nav.
Voyons le résultat dans le navigateur.
On a la même liste à puces mais mise en forme en haut à droite, cette fois.
La prochaine étape sera d'ajouter un corps de texte sur ma page.
Souvent, lorsque je créais un site, j'effectuais généralement le travail de design alors que le texte était en cours de rédaction.
Je devais donc insérer du texte de substitution.
Bien souvent, je tâtonnais pour trouver le texte de remplissage lorem ipsum.
Plus maintenant.
Je vais placer la balise « p » dans cette section « intro ».
Elle correspond en fait au corps du texte.
Je saisis un « p » et j'appuie sur la touche de tabulation.
Voici ma balise.
Je vais maintenant saisir du texte de substitution.
C'est généralement là qu'on utilise le texte lorem ipsum, en gros, une série de mots en latin.
Mais au lieu de quitter Dreamweaver, il me suffit de saisir « lorem » et d'appuyer sur la touche de tabulation.
Pas possible, selon vous ?
Et bien, si.
La preuve.
Regardez.
J'annule.
Avant d'appuyer sur la touche de tabulation, je saisis « 10 »… et j'obtiens dix mots.
Lors de la conception de mon site, si je sais que les rédacteurs doivent écrire un texte de 200 mots, par exemple, il me suffit de saisir « 200 ».
Je m'assure ainsi qu'il y aura suffisamment d'espace et que la mise en forme sera adaptée.
Je vais supprimer ce texte et combiner les différentes opérations que nous venons d'exécuter.
Bien, je voudrais donc une balise « div » et une classe « intro-text ».
À l'intérieur de celle-ci, je voudrais une balise « p ».
Combien ?
Quatre, s'il vous plaît.
Et dans ces balises « p », je voudrais du texte lorem ipsum.
Attention les yeux !
Regardez l'énorme bloc de contenu que j'ai créé à partir d'une petite chaîne de caractères.
Notez aussi que tous les paragraphes de texte lorem ipsum sont différents.
Ils offrent un meilleur aperçu du texte qui viendra se substituer à eux ultérieurement.
Comme moi, au début, vous n'utiliserez que les raccourcis de base.
Mais comme le langage est vraiment simplissime, vous irez de plus en plus vite et ferez bientôt appel à tous ces éléments en ajoutant les classes dont vous avez besoin.
Il y aura parfois des tâtonnements et des erreurs, mais faites-moi confiance, votre workflow, tout comme le mien, gagnera énormément en fluidité.
Dans cet exemple, je ne veux qu'une seule balise « p ».
Je supprime cette ligne.
La suite de ce tutoriel est consacrée à l'analyse lint.
En deux mots, l'analyse lint vous aide à résoudre les erreurs éventuelles.
Personnellement, cela me facilite grandement la tâche.
Je vais vous montrer.
Lorsque je travaille, j'ai toujours l'œil rivé sur la numérotation des lignes.
Si je descends, vous pouvez voir des numéros en rouge.
Lorsque je les survole, je découvre ce qui ne va pas.
Ici, il manque un caractère spécial.
Et je vois immédiatement que, là, j'ai oublié une parenthèse angulaire.
Une fois cette erreur corrigée, l'autre disparaît, car les deux étaient liées.
Ça, c'est faisable durant la conception mais supposez que le projet soit presque terminé et que vous vouliez juste faire une vérification globale.
Voyons, je vais annuler ma correction et rétablir l'erreur.
Elle est bien là mais vous ne la repérez pas lors de la phase de conception et tout semble correct dans l'aperçu.
Vous voulez tout de même faire une vérification, au cas où.
Il suffit alors d'ouvrir la fenêtre Sortie pour lancer une recherche et s'assurer qu'il n'y a pas d'erreurs.
Cliquez sur Fenêtre, Résultats et Sortie.
Vous pouvez travailler avec la fenêtre Sortie ouverte.
Pendant les opérations de saisie, la fenêtre s'actualise automatiquement.
On retrouve la même erreur.
Je peux double-cliquer dessus pour y accéder.
La voilà.
Je la corrige.
Il est utile de garder un œil sur l'analyse lint sur le côté et de laisser la fenêtre Sortie ouverte, surtout lorsque vous approchez de la fin d'un projet et que tout est censé fonctionner correctement.
Si quelque chose s'affiche ici : attention, danger.
Heureusement, une erreur est signalée et l'avertissement suggère une solution.
Vous devez ensuite enregistrer votre document.
La fenêtre Sortie s'actualise et tout est maintenant correct.
Je ferme la fenêtre en double-cliquant sur Sortie.
Bien, revenons à Emmet.
Jusqu'à présent, nous avons utilisé Emmet dans ce fichier HTML, mais il fonctionne aussi dans les documents CSS.
Jetons un œil au fichier styles.css.
Je le fais défiler vers le haut et je m'arrête sur la ligne 17.
Je veux ajouter une largeur à cette image.
Je peux utiliser Emmet.
Je saisis « w », puis « 100 » et j'appuie sur la touche de tabulation.
Emmet ajoute automatiquement une largeur de 100 pixels.
Génial.
Par défaut, la largeur est en pixels si vous n'ajoutez pas l'unité de mesure.
J'annule ça.
Au lieu de 100 pixels, je veux un pourcentage.
J'appuie sur la touche de tabulation et j'obtiens une largeur de 100 %.
Passons maintenant à la ligne 6.
Je veux ajouter une marge.
Je saisis un « m », puis un « 0 » et j'appuie sur la touche de tabulation.
Marge 0.
Et je vais ajouter une marge intérieure de 0.
Je saisis simplement « p0 » et j'appuie sur la touche de tabulation.
Génial.
Il vous faudra un peu de temps pour vous familiariser avec les différents raccourcis.
Mais Emmet est si simple d'utilisation qu'il y a de fortes chances que le raccourci auquel vous songez soit le bon.
Pour obtenir une liste des raccourcis, il suffit d'aller sur Internet.
Commencez par consulter la feuille de référence du site Emmet.io.
Saisissez « emmet.io » dans votre navigateur.
La feuille de référence se trouve dans la rubrique Documentation.
Passons à la section « body ».
Je veux ajouter une couleur d'arrière-plan.
Je saisis « bg » pour l'arrière-plan et « c » pour la couleur, j'appuie sur la touche de tabulation, et « background-color » est ajouté.
Emmet devine même que je veux un arrière-plan blanc.
Normal, c'est la couleur la plus fréquemment utilisée.
J'actualise.
Si vous ne voulez pas de blanc, supprimez-le ici.
J'insère le signe dièse et le sélecteur de couleurs apparaît.
Je peux définir la teinte à l'aide de ce curseur et choisir n'importe quelle couleur.
J'appuie sur Entrée.
En survolant ce code de couleur, je peux le prévisualiser en mode Code et dans Dreamweaver.
C'est très pratique.
Je vais rétablir la couleur blanche : « #fff ».
Un survol et hop… du blanc.
Bien, descendons maintenant jusqu'à la ligne 340.
Je veux ajouter une image d'arrière-plan.
Je parie que même sans connaître Emmet, vous devinez le raccourci : « bgi », pour « background-image ».
J'appuie sur la touche de tabulation.
Emmet a ajouté la balise d'image d'arrière-plan et l'URL.
Je dois spécifier mon image entre ces guillemets.
Je saisis un « i », et comme précédemment dans Dreamweaver, Emmet ouvre mon dossier d'images.
J'ai le choix entre plusieurs images.
Je saisis « ri », qui est associé par défaut à mes flèches vers la droite.
Je vais utiliser la flèche droite blanche.
Le petit aperçu juste en dessous indique aussi la taille ; c'est très pratique.
Emmet se comporte comme dans le fichier HTML.
Je peux ajouter mes propriétés CSS en utilisant cette technique.
Et comme dans le fichier HTML, une analyse lint et une détection des erreurs sont exécutées.
Regardez.
Supposons que le chemin soit erroné ou que l'image soit introuvable.
J'ajoute un « r » pour fausser le nom de fichier.
Emmet signale que l'image est introuvable.
Toujours comme dans le fichier HTML, une erreur apparaît dans la numérotation des lignes.
Elle se trouve ici.
Il s'agit d'une accolade en trop.
J'annule sa suppression et comme dans le fichier HTML, je peux ouvrir une fenêtre Sortie.
Elle m'indique qu'à la ligne 359, une erreur a été détectée.
À vous donc de choisir la méthode qui vous convient le mieux.
Pour terminer, je voudrais vous montrer comment vérifier les liens sur votre site, juste pour être sûr qu'ils renvoient bien à l'emplacement spécifié et ne sont pas rompus.
Mieux vaut évidemment les vérifier durant la phase de conception du site, surtout si vous êtes sur le point de tester ce dernier ou de l'envoyer à un client.
Vous serez ainsi certain que les liens — les options de menu ou les hyperliens externes — fonctionnent bien et ne sont pas rompus.
Pour ce faire, on va afficher le code source.
Vérifions d'abord les liens dans le fichier HTML.
Je choisis Site, Options du site et Vérifier tous les liens du site.
L'option Liens brisés est sélectionnée par défaut.
Elle signale ceux qui ne fonctionnent pas.
On va les corriger mais, avant, on va passer en revue les autres options.
Il y a l'option Liens externes.
Tout fonctionne bien de ce côté-là.
Cette option affiche simplement les liens qui renvoient vers un autre site web, ce qui peut s'avérer intéressant.
Enfin, on a l'option Fichiers orphelins.
Ce sont les fichiers qui se trouvent sur votre site local et qui n'ont pas été utilisés sur votre site web.
Ils sont donc dans le dossier local que vous avez spécifié dans la définition du site.
Ils n'ont pas été utilisés sur la page.
Ils ne servent à rien.
À ce moment-là, vous vous dites peut-être : « J'ai oublié d'ajouter cette image sur la page.
» Comme elle n'est utilisée nulle part ailleurs, vous pouvez l'ajouter.
Vous allez peut-être aussi réaliser que certains fichiers se trouvent ici parce que vous les avez placés dans le mauvais dossier.
« Ils n'ont rien à faire ici !
» Vous pouvez les déplacer.
Mais, bon, revenons à l'option Liens brisés.
Lorsque vous effectuez une vérification — vous voyez ce bouton de lecture en haut ? — vous pouvez la faire pour le document actuel, c'est-à-dire celui ouvert devant vous.
Vous pouvez vérifier tout le site local.
Dans notre cas, c'est un petit site, donc aucun problème.
Vous pouvez aussi avoir un très grand site et ne vouloir vérifier que quelques liens sélectionnés ici, dans le panneau Fichiers.
Dans ce cas, choisissez-les ici, puis exécutez cette option.
Je vais vérifier les liens des documents actuels.
Je clique dessus.
L'option s'exécute et identifie deux liens rompus.
Je vais rechercher ce lien pour vous montrer.
Il renvoie vers le fichier index.html, ce qui est généralement correct.
Toutefois, dans ce tutoriel, nous l'avons nommé index-start.html.
Il ne renvoie donc pas vers le bon emplacement.
Je peux double-cliquer dessus et le modifier ici.
Je clique sur le bouton Parcourir et je choisis le fichier cible.
Les liens rompus peuvent être dus à des erreurs de saisie ou, comme ici, à des renvois vers des fichiers inexistants.
Je ferme la fenêtre Propriétés et, en bas, la référence d'hyperlien « index.html » a disparu et a été modifiée dans le code.
Mais, vous voyez, le problème est toujours signalé.
Vous devez donc relancer la vérification dans Dreamweaver.
Le premier lien rompu a disparu, mais il reste le second.
C'est un lien externe rompu.
Il renvoie vers www.adobe.com.
Lorsque je double-clique dessus, on constate que « http » a été mal orthographié.
J'ajoute un « t ».
Regardez.
Le code a été modifié.
Je clique sur l'icône de lecture et je relance la vérification.
Hourra !
Plus de liens rompus !
Cette vérification des liens fonctionne aussi dans votre document CSS.
Vous pouvez ouvrir le document CSS et l'exécuter en cliquant sur Vérifier les liens dans le document actuel.
Ou alors, comme nous sommes dans le document HTML, il est possible de vérifier tout le site actuel.
Cette option va tester la page actuellement ouverte, puis tous les autres documents du site, y compris le document CSS.
Bien, on peut maintenant fermer le vérificateur de liens.
Bravo !
Nous avons passé en revue les conseils et astuces pour accélérer la programmation et réduire considérablement le nombre d'erreurs.
Nous avons vu Emmet, l'analyse lint, les conseils de code de Dreamweaver et la vérification des liens.
Je vous invite à suivre les autres tutoriels Dreamweaver disponibles.
Mais pour l'heure, mes chers designers web, programmez plus rapidement en faisant moins d'erreurs dans le monde merveilleux de Dreamweaver.
