HTML5 offre de nombreux moyens sémantiquement corrects de créer des balises.
Les types d'éléments que vous créez sont importants pour l'accessibilité, car les lecteurs d'écran doivent savoir comment lire le contenu.
Quick Tag Editor est très pratique pour nettoyer les balises créées, pour tester différentes balises ou pour effectuer des modifications à la volée.
Cette vidéo explique comment utiliser les trois modes de Quick Tag Editor.
Je commence par sélectionner l'espace de travail Création.
Quick Tag Editor permet de modifier le code d'éléments en mode En direct de trois façons : on peut ajouter le contenu d'une balise, envelopper une balise avec une autre et insérer une balise.
Pour lancer Quick Tag Editor, je sélectionne un élément en mode En direct, puis j'appuie sur Ctrl + T ou Cmd + T.
Quick Tag Editor s'affiche en mode Modifier.
Appuyez de nouveau sur Ctrl + T ou Cmd + T pour passer en mode Envelopper, et encore une fois pour passer en mode Insérer.
Procédez ainsi pour accéder au code et le modifier pour tout élément en mode En direct.
Voyons comment Quick Tag Editor fonctionne concrètement.
Je vais remplacer une balise div par une balise de section HTML5, puis ajouter les attributs d'une image.
Je sélectionne l'image en mode En direct, puis j'appuie sur la flèche Haut pour sélectionner la balise div entourant l'image.
J'ouvre Quick Tag Editor en mode Modifier, puis je sélectionne et supprime les balises div.
Je tape « se ».
Les indicateurs de code affichent la balise section.
J'appuie sur Entrée pour modifier la balise, puis de nouveau sur Entrée pour valider la modification.
Le mode Code s'actualise immédiatement.
Dreamweaver actualise même la balise fermante.
Procédez ainsi pour parcourir rapidement vos balises de mise en forme.
Pour modifier la balise d'image, je la sélectionne, puis j'ouvre Quick Tag Editor en mode Modifier.
Je remplace le chemin de la source par images/feature2.png, puis j'appuie sur Entrée.
Le mode En direct s'actualise pour afficher la nouvelle image et les modifications du code sont reflétées en mode Code.
Je vais maintenant rendre l'image cliquable en l'enveloppant dans une balise d'ancrage via Quick Tag Editor.
Je sélectionne l'image, puis j'appuie deux fois sur Ctrl + T ou Cmd + T pour ouvrir Quick Tag Editor en mode Envelopper.
Quick Tag Editor affiche des indicateurs de code avec des options de balise.
Je choisis la première, la balise d'ancrage, puis j'appuie sur la barre d'espace.
Je tape « hr ».
L'indicateur de code surligne href.
J'appuie sur Entrée, puis je saisis l'URL du lien.
J'appuie de nouveau sur Entrée.
Le code actualisé s'affiche en mode Code : une balise d'ancrage enveloppe la balise section.
Notez que la balise fermante a été insérée automatiquement.
Le dernier mode de Quick Tag Editor permet d'insérer un nouvel élément HTML avant un autre déjà présent.
Pour insérer une balise div au-dessus de l'image, je peux utiliser le mode Insérer.
Je sélectionne l'image, puis j'ouvre Quick Tag Editor en mode Insérer.
Je tape « di », puis j'appuie sur Entrée pour choisir la balise div dans les indicateurs de code.
J'appuie de nouveau sur Entrée pour valider le code.
Le mode Code s'actualise.
Le mode En direct offre de nombreux outils et raccourcis de gestion et création de code.
Quick Tag Editor est une fonctionnalité simple et performante qui permet de modifier rapidement le code en mode En direct.
Testez les trois modes de Quick Tag Editor dans le cadre de vos projets Dreamweaver.
