Adobe Dreamweaver CC

Création, modification et prévisualisation de pages web en mode En direct

Utilisez les nouvelles fonctionnalités du mode En direct dans Dreamweaver : créez, modifiez et prévisualisez des pages directement en mode En direct (durée : 60 min)

Création, modification et prévisualisation de pages web en mode En direct

60 min

Le mode En direct a été mis à jour pour vous permettre de créer visuellement du contenu web. Déposez les éléments et ressources HTML directement sur une surface dynamique, puis faites-les glisser pour déplacer instantanément vos balises et ressources. Gérez et réagencez la structure de la page en déplaçant les éléments en mode Affichage rapide des éléments.

De quoi ai-je besoin ?

Télécharger les fichiers Fichiers d'exemple pour s'entraîner (ZIP, 2 Mo)

Télécharger le PDF Feuille de référence Dreamweaver

Le mode En direct est un aperçu interactif qui restitue précisément les projets HTML5 et les actualise en temps réel pour afficher immédiatement les modifications effectuées.

Les nouveaux Guides en direct vous aident à insérer les éléments avec précision. Modifiez efficacement le contenu web avec le nouveau menu contextuel du mode En direct. Ajoutez, supprimez et créez des sélecteurs avec les fonctions optimisées de l'affichage des éléments. Vos sélections sont synchronisées dans toute l'interface, ce qui facilite la recherche et la mise à jour des styles CSS.

Dans cet article, vous allez découvrir les nouvelles fonctionnalités du mode En direct au fil de la modification d'un projet d'exemple.

Le projet d'exemple inclut une page affichant une grille de conteneurs div destinés aux images et au texte. Cette page a été conçue pour promouvoir un centre de musique local fictif appelé Play (voir Figure 1).

Figure 1. Étude du projet d'exemple dans le navigateur Chrome

Déplacement d'éléments en mode En direct

Pour commencer, décompressez le fichier ZIP et enregistrez son contenu sur votre bureau. Le dossier du projet d'exemple contient la page HTML et les fichiers correspondants du site.

  1. Lancez Dreamweaver CC 2014.

  2. Cliquez sur l'icône Configuration du site dans l'écran d'accueil pour afficher la boîte de dialogue correspondante. Saisissez le nom du site : Live Design. Cliquez sur l'icône de dossier, puis sélectionnez le dossier live_design sur votre bureau (voir Figure 2).

Figure 2. Définissez le chemin d'accès au dossier racine local sur le dossier contenant les fichiers d'exemple
  1. Cliquez sur Enregistrer.

  2. Dans le panneau Fichiers, double-cliquez sur le fichier dw_example.html pour l'ouvrir.

  3. Conseil : utilisez un projet d'exemple déjà créé pour suivre les étapes de ce tutoriel. Vous pouvez toutefois choisir Fichier > Nouveau, puis sélectionner l'un des nouveaux modèles de démarrage pour créer une page HTML5 de toutes pièces.

    Comme vous pouvez le voir dans la barre d'outils Document, le mode En direct est actif et l'espace de travail d'Extract est affiché.

  4. Sélectionnez Fermer le groupe d'onglets dans le menu Options du panneau Extract (voir Figure 3).
Figure 3. Fermez le panneau Extract

Ce panneau facilite l'importation d'images web issues d'un fichier PSD créé dans Photoshop. Les ressources de ce projet étant fournies dans les fichiers d'exemple, la fermeture du panneau Extract permet de gagner de la place à l'écran. Vous pouvez aussi faire abaisser le coin supérieur du mode Code pour mieux voir la page que vous allez créer. Pour consulter un tutoriel détaillé au sujet de cette fonctionnalité, reportez-vous à la page Utilisation d'Extract dans Dreamweaver.

Vous constaterez immédiatement que le mode En direct a changé. Dans les versions précédentes de Dreamweaver, il ne permettait pas de prévisualiser son travail avec précision en cours de modification. Dans Dreamweaver CC 2014, le mode En direct reflète immédiatement les changements apportés aux pages HTML5, comme si vous les modifiiez dans un navigateur.

Glisser-déposer d'éléments HTML depuis le panneau Insertion

  1. Dans la section Structure du panneau Insertion, sélectionnez l'élément div et déposez-le sur la page.

  2. Tandis que vous le faites glisser sur la page, un repère dynamique de couleur verte vous indique où l'élément sera inséré. Vous pouvez déposer l'élément HTML n'importe où sur la page.

    Remarque : les repères dynamiques supérieur et inférieur s'affichent lors de l'insertion d'éléments de bloc. Les repères dynamiques de gauche et de droite s'affichent pour les éléments incorporés.

  3. Relâchez le bouton de la souris lorsque le repère dynamique de couleur verte se trouve en dessous du texte principal au centre (voir Figure 4).
Figure 4. Insérez un nouvel élément div dans la balise div #tile3 en dessous du texte principal

Vous pouvez prendre n'importe quel élément HTML du panneau Insertion pour l'ajouter à la page.

Ajout de nouveaux sélecteurs, application de sélecteurs existants et modification des styles

Accélérez la mise à jour des pages en créant des sélecteurs via l'affichage des éléments en mode En direct, puis appliquez des styles aux éléments de la page avec CSS Designer. Saisissez le nom de la nouvelle classe ou du nouvel ID pour l'ajouter à la page HTML, puis choisissez l'emplacement de la source CSS pour enregistrer la nouvelle règle. Dans CSS Designer, les styles sélectionnés sont surlignés, ce qui vous évite de devoir chercher le nom des sélecteurs pour ajouter des propriétés et mettre à jour les valeurs.

  1. Avec le nouvel élément div sélectionné, cliquez sur le signe plus (+) dans l'affichage des éléments, puis tapez la lettre A. Appuyez deux fois sur la touche Flèche vers le bas, puis sur Entrée pour appliquer la classe existante .action-title au texte (voir Figure 5).
Figure 5. Le menu affiche les classes existantes en fonction des caractères saisis
  1. Avec la classe .action-title sélectionnée, appuyez de nouveau sur le signe plus (+) ou sur la touche Tabulation pour nommer le nouvel élément div. Saisissez le nom de l'ID div, #contact, puis appuyez sur Entrée.

  2. L'ID #contact n'étant pas encore défini dans le code CSS, une fenêtre s'affiche pour vous permettre de choisir l'emplacement source où ajouter le nouveau sélecteur.

  3. Choisissez le fichier lié dw_example.css (voir Figure 6).
Figure 6. Choisissez dw_example.css dans le menu Sélectionner une source

Remarque : dans cette fenêtre, vous pouvez aussi définir le style de la page HTML active, sélectionner une requête multimédia et créer un fichier CSS ou une requête multimédia.

  1. Le nouveau sélecteur #contact est surligné dans CSS Designer. À la section Mise en forme, réglez la marge gauche sur 40 pixels. L'élément div se positionne alors correctement (voir Figure 7).

Figure 7. Définissez la propriété marge gauche sur 40 pixels

Lorsque vous sélectionnez un élément possédant plusieurs sélecteurs dans l'affichage des éléments, vous pouvez appuyer sur la touche Tabulation pour passer d'un sélecteur à l'autre. Vous pouvez aussi appuyez sur Ctrl/Cmd+C pour copier l'élément de page sélectionné.

Conseil : cliquez avec le bouton droit sur le sélecteur dans l'affichage des éléments, puis choisissez Atteindre le code pour afficher le style CSS en mode Code (voir Figure 8).

Figure 8. Les modifications que vous venez d'effectuer via CSS Designer s'affichent

La modification des pages en mode En direct facilite l'identification des sélecteurs et la mise à jour des propriétés d'un élément sélectionné, même lorsque vous travaillez sur des projets créés par quelqu'un d'autre.

Ajout de texte en mode En direct

La modification du texte, la mise en forme des blocs de texte et l'application de styles n'ont jamais été aussi simples. Le mode En direct met à jour instantanément le rendu de la page au fil de vos modifications. Plus besoin de générer régulièrement un aperçu des pages dans un navigateur pour vérifier l'aspect et l'affichage du texte.

  1. Double-cliquez sur le contenu dans l'élément div #contact pour afficher une bordure orange.

  2. Cette bordure indique que le texte peut être modifié.

    Conseil : double-cliquez pour sélectionner un mot ou triple-cliquez pour sélectionner tout le paragraphe. Appuyez sur Entrée pour créer un paragraphe, puis sur Maj+Entrée pour insérer une balise <br>.

  3. Triple-cliquez sur le contenu de l'espace réservé pour sélectionner tous les mots. Saisissez le texte suivant : To learn more, contact play@adobe.com.

  4. Sélectionnez l'adresse e-mail, puis cliquez sur le bouton Lien dans l'affichage des éléments. Saisissez le texte suivant dans le champ du lien : mailto:play@adobe.com (voir Figure 9).
Figure 9. Saisissez le lien ou cliquez sur l'icône de dossier pour sélectionner un fichier du site
  1. Cliquez à l'extérieur de la bordure orange ou utilisez le raccourci clavier Ctrl/Cmd+Entrée pour valider les modifications et désélectionner le texte.

  2. Conseil : si vous changez d'avis avant de valider les modifications, vous pouvez appuyer sur la touche Echap pour les annuler.

  3. Cliquez sur l'adresse e-mail, puis appuyez sur la touche Tabulation. Dans l'affichage des éléments, saisissez le nom de la nouvelle classe, .email, puis choisissez dw_example.css comme source du nouveau sélecteur. À la section Texte de CSS Designer, cliquez sur la propriété Couleur, puis utilisez l'outil Pipette pour sélectionner la couleur violette via l'icône de clavier (voir Figure 10).
Figure 10. Créez un style pour définir la couleur violette pour le texte lié
  1. Cliquez sur le texte principal au centre. Le style .hero est surligné dans CSS Designer.

  2. Définissez la propriété Marge haut sur 50 pixels (voir Figure 11).
Figure 11. Modifiez la marge supérieure de la classe hero

La modification du texte, la mise en forme des blocs de texte et l'application de styles n'ont jamais été aussi simples. Le mode En direct met à jour instantanément le rendu de la page au fil de vos modifications. Plus besoin de générer régulièrement un aperçu des pages dans un navigateur pour vérifier l'aspect et l'affichage du texte rendu avec les styles CSS et les polices Edge Web Fonts.

Clic sur les éléments HTML dans le panneau Insertion

Outre le glisser-déposer, vous pouvez cliquer sur n'importe quel élément HTML dans le panneau Insertion pour l'ajouter sur la page. Une boîte de dialogue vous permet de définir la méthode d'insertion de l'élément. La nouvelle interface du mode En direct vous donne la possibilité de mettre à jour les pages comme vous le souhaitez.

  1. Cliquez sur le texte principal au centre. Dans la section Structure du panneau Insertion, cliquez sur l'élément d'en-tête.

  2. Une boîte de dialogue affiche quatre emplacements d'insertion possibles en fonction de la sélection active. Choisissez l'une des options disponibles : Avant, Après, Envelopper ou Imbriquer.

  3. Cliquez sur l'option Avant (voir Figure 12).
Figure 12. Cliquez sur Avant pour insérer le nouvel élément d'en-tête avant le texte principal sélectionné
  1. Avec le nouvel élément d'en-tête sélectionné, cliquez sur le signe plus (+), puis appuyez sur la touche H. Appuyez sur la touche Flèche vers le bas pour choisir la classe .hero. Appuyez sur Entrée pour l'appliquer.

  2. Le texte d'espace réservé est mis à jour pour afficher la mise en forme de style .hero.

  3. Appuyez sur la touche Tabulation, puis créez un autre style, #header. Pour la source, choisissez dw_example.css.

  4. À la section Texte de CSS Designer, cliquez sur la propriété Couleur, puis utilisez l'outil Pipette pour sélectionner la couleur turquoise via l'icône d'écouteurs.

  5. Double-cliquez sur le texte d'espace réservé pour le rendre modifiable, puis triple-cliquez dessus pour sélectionner toute la ligne. Saisissez le texte suivant : Welcome to PLAY! (voir Figure 13).
Figure 13. Mettez à jour le texte pour ajouter le message de l'en-tête

Cliquez à un autre endroit de la page pour valider les modifications apportées au texte.

Duplication d'éléments via le nouveau menu contextuel du mode En direct

Cliquez avec le bouton droit sur le mode En direct pour apporter des modifications au contenu à l'aide des options du nouveau menu contextuel, puis déplacez le contenu de la page en le faisant glisser sur la surface dynamique.

  1. Faites défiler vers le bas pour sélectionner la balise P en dessous du sous-titre Call to Action!

  2. Cliquez avec le bouton droit sur le paragraphe pour afficher le menu contextuel, puis choisissez Dupliquer (voir Figure 14).
Figure 14. Dupliquez l'élément sélectionné en mode En direct
  1. Faites glisser le paragraphe dupliqué jusqu'à ce que le repère dynamique de couleur verte s'affiche au-dessus du sous-titre Call to Action!

  2. Cliquez avec le bouton droit sur le paragraphe dupliqué, puis choisissez Supprimer pour l'effacer (voir Figure 15).
Figure 15. Supprimez rapidement des éléments via le menu contextuel

Par ce biais, vous pouvez aussi sélectionner facilement une balise parent ou enfant, inspecter la page et lancer le navigateur de code. Modifiez vos projets de manière intuitive en mode En direct en faisant glisser les éléments sur la page pour les repositionner.

Contrôle de la structure de page avec le mode Affichage rapide des éléments

Le mode Affichage rapide des éléments vous permet de naviguer dans vos mises en page via une liste interactive qui affiche la structure HTML du document. Cliquez sur les éléments HTML, déplacez-les et cliquez dessus avec le bouton droit pour les sélectionner, les réagencer, les supprimer, les copier, les coller et les dupliquer. Modifiez la structure de page et utilisez le menu contextuel pour manipuler les éléments de la page en cours de travail.

La liste interactive facilite la sélection des éléments tout en fournissant une vue d'ensemble de la page. Pour utiliser le mode Affichage rapide des éléments afin de structurer les éléments de la page :

  1. Sélectionnez l'élément H2 .action-title - Call to Action!

  2. Cliquez sur l'icône </> en bas à gauche de la fenêtre Document pour activer l'Affichage rapide des éléments (voir Figure 16).

  3. Conseil : vous pouvez aussi utiliser le raccourci clavier Ctrl/Cmd+/ pour passer en mode Affichage rapide des éléments.

Figure 16. Sélectionnez un sous-élément dans la structure HTML du document

Si vous observez l'espace de travail, vous constaterez que le même élément s'affiche dans l'affichage des éléments en mode En direct, en mode Code, dans le sélecteur de balises et en mode Affichage rapide des éléments. Si vous ouvrez CSS Designer, la même classe est sélectionnée.

Quelle que soit votre méthode de travail et de sélection d'un élément, toutes les autres parties de l'interface de Dreamweaver affichent votre sélection.

  1. En mode En direct, faites glisser l'élément H2 vers l'emplacement souhaité, puis maintenez le bouton enfoncé jusqu'à ce que l'info-bulle </> s'affiche. Survolez-la.

  2. L'Affichage rapide des éléments affiche la liste des éléments du site. Faites glisser l'élément H2 vers le bas jusqu'à ce que le repère dynamique de couleur verte s'affiche sous la balise P. Relâchez le bouton de la souris (voir Figure 17).

Figure 17. Le repère dynamique de couleur verte indique la position de l'élément dans la hiérarchie du site
  1. Cliquez avec le bouton droit sur le nom de l'élément en mode Affichage rapide des éléments, puis choisissez Dupliquer dans le menu contextuel (voir Figure 18).
Figure 18. Dupliquez l'élément sélectionné pour en créer une copie
  1. Faites glisser l'élément H2 dupliqué au-dessus de la balise P, puis relâchez le bouton de la souris.

  2. Double-cliquez sur le texte H2 inférieur, puis modifiez-le comme suit : Sign Up Now! (voir Figure 19).

     

Figure 19. Dupliquez un élément de texte, modifiez son contenu, puis ajoutez ou modifiez des styles CSS
  1. En mode Affichage rapide des éléments, cliquez de nouveau sur l'élément div #tile7 pour réduire la section de la structure de page.

  2. Dans Dreamweaver CC 2014, le mode En direct a été optimisé. Lorsque vous déplacez des éléments sur la surface dynamique, vous constatez que le mode En direct a gagné en réactivité. Vous pouvez aussi déplacer des éléments au sein de la structure de page en mode Affichage rapide des éléments.

  3. Sélectionnez l'image du logo en haut à gauche de la grille. Survolez l'info-bulle </> pour passer en mode Affichage rapide des éléments, survolez l'élément div #tile8, puis relâchez le bouton de la souris. Le logo PLAY passe de l'angle supérieur gauche à l'angle inférieur droit de la page, masquant son image de fond (voir Figure 20).
Figure 20. Déplacez des sous-éléments vers une autre section de la page

Dans les versions précédentes de Dreamweaver, le réagencement et le déplacement de blocs de code étaient fastidieux. Cela a bien changé. Avec les repères dynamiques, le glisser-déposer des éléments HTML et le mode Affichage rapide des éléments, vous ne risquez plus d'oublier une balise de fermeture ou d'imbriquer du contenu de façon incorrecte. Le mode Affichage rapide des éléments vous épargne les tâtonnements qui étaient nécessaires au repositionnement des éléments. Désormais, vous voyez précisément l'emplacement d'insertion des éléments dans la hiérarchie du site.

Glisser-déposer de nouvelles ressources sur la page à partir du panneau des actifs

Ajoutez des éléments graphiques à vos mises en forme en les déposant directement à partir du panneau des actifs.

  1. Choisissez Fenêtre > Actifs pour ouvrir le panneau des actifs.

  2. Sélectionnez le fichier logo-new.jpg.

  3. En mode En direct, déposez l'aperçu de l'image ou le nom de fichier logo-new.jpg sur l'élément div #tile1 (voir Figure 21). Le mode Affichage rapide des éléments indique que l'image est imbriquée.
Figure 21. Déposez l'image du nouveau logo sur la page

Vous pouvez employer la même méthode pour déposer des éléments multimédias à partir de la section Multimédia du panneau des actifs.

Remarque : vous pouvez aussi cliquer sur le bouton Insérer en bas du panneau des actifs pour insérer une ressource sélectionnée. Avec cette méthode, une fenêtre vous permet de choisir l'emplacement d'insertion (Avant, Après, Envelopper ou Imbriquer), comme nous l'avons vu précédemment (voir Figure 22).

Figure 22. Cliquez sur le bouton Insérer dans le panneau des actifs (ou le panneau Insertion), puis choisissez l'option d'insertion souhaitée

Mise à jour des attributs d'image

Vous pouvez modifier les attributs des images insérées dans l'inspecteur de propriétés dynamique sans utiliser l'inspecteur de propriétés ni modifier le code en mode Code. Effectuez des changements rapides pour modifier la source de l'image, ajouter des titres et du texte alternatif, ajouter des liens et optimiser le référencement naturel.

  1. Cliquez sur la mosaïque du logo en haut à gauche. L'affichage des éléments en direct indique qu'un fichier d'image est sélectionné.

  2. Cliquez sur l'icône de sandwich pour afficher l'inspecteur de propriétés dynamique (voir Figure 23).
Figure 23. Accédez aux attributs d'une image d'un simple clic

Conseil : pour mettre à jour l'image source, vous pouvez cliquer sur l'icône de dossier en regard de l'attribut SRC, puis sélectionner un fichier. Vous pouvez aussi saisir le chemin d'accès directement.

  1. Saisissez PLAY Logo pour les attributs Title et Alt (voir Figure 24).

Figure 24. Mettez à jour les attributs de l'élément d'image sélectionné

Conseil : pour ajouter un lien, vous pouvez saisir une URL ou cliquer sur l'icône de dossier, puis sélectionner une autre page du site. Utilisez l'option Cible pour indiquer l'emplacement d'ouverture du document lié.

  1. Cliquez sur la nouvelle image de logo pour fermer l'inspecteur de propriétés dynamique.

  2. Vous pouvez aussi réinitialiser les valeurs en largeur et en hauteur de l'image dans l'inspecteur de propriétés dynamique. En utilisant cette fonctionnalité avec CSS Designer et le mode Inspection, vous pouvez manipuler plus facilement les dimensions de l'image pendant que vous peaufinez votre travail.

Copier-coller de couleurs à partir du panneau des actifs

  1. Cliquez sur le bouton Couleurs dans le panneau des actifs pour afficher la liste des couleurs du site.

  2. Sélectionnez le blanc. Cliquez avec le bouton droit, puis choisissez Copier la valeur chromatique (voir Figure 25).
Figure 25. Copiez une valeur de couleur à partir du panneau des actifs
  1. Sélectionnez la classe .grid dans le sélecteur de balises.

  2. À la section Arrière-plan de CSS Designer, cliquez avec le bouton droit sur le champ de valeur de couleur background-color, sélectionnez Coller, puis appuyez sur Entrée pour appliquer la modification (voir Figure 26).
Figure 26. Collez la couleur blanche pour réinitialiser la propriété background-color

Le mode En direct met à jour la classe .grid pour afficher un arrière-plan de couleur blanche (voir Figure 27).

Figure 27. Collez les valeurs de couleur copiées pour modifier la couleur d'arrière-plan des éléments
  1. Fermez le panneau des actifs, puis choisissez Fichier > Enregistrer tout.

Modification du contenu de la page via l'affichage des éléments

Lorsque vous cliquez sur des éléments de page en mode En direct, une boîte de dialogue de l'affichage des éléments indique les classes et identifiants appliqués à la sélection. Vous pouvez aussi mettre à jour les pages visuellement en reconfigurant les mises en forme à l'aide des fonctionnalités de l'affichage des éléments.

  1. Cliquez sur l'icône d'écouteurs en haut à droite. L'affichage des éléments en direct indique que la classe .tile et l'ID #tile4 sont appliqués à la balise div.

  2. Appuyez une fois sur la touche Flèche vers le bas pour sélectionner la mosaïque contenant un clavier (en dessous des écouteurs). La classe .tile est appliquée à toutes les mosaïques.

  3. Survolez l'ID #tile5, puis cliquez sur le bouton Supprimer une classe/un ID pour le supprimer (voir Figure 28).
Figure 28. Survolez un sélecteur, puis cliquez sur le bouton Supprimer une classe/un ID avec l'icône X

L'ID est supprimé et l'image de clavier disparaît.

Conseil : vous pouvez aussi cliquer avec le bouton droit sur l'élément pour ouvrir le menu contextuel du mode En direct, puis choisir Couper (voir Figure 29).

Figure 29. Choisissez Couper pour supprimer l'élément div de la page
  1. Cliquez avec le bouton droit à un autre endroit sur la page, puis choisissez Inspecter dans le menu contextuel. Survolez les écouteurs pour afficher une info-bulle indiquant les dimensions de la balise div #tile4 : 270 x 270 pixels. Quittez le mode Inspection en cliquant sur les écouteurs.

  2. À la section Mise en forme de CSS Designer, réglez la hauteur sur 560 pixels pour doubler la hauteur de la balise div #tile4, avec 20 pixels supplémentaires pour la marge intérieure (voir Figure 30).
Figure 30. La hauteur de #tile4 est modifiée et l'image d'arrière-plan est juxtaposée
  1. À la section Arrière-plan du panneau Propriétés, cliquez une fois sur l'URL pour la sélectionner, puis cliquez sur l'icône de dossier à droite. Sélectionnez le fichier tile4-new.jpg dans le dossier d'images des fichiers d'exemple, ou saisissez simplement tile4-new.jpg dans le champ (voir Figure 31).
Figure 31. Mettez à jour l'URL de l'image d'arrière-plan pour qu'elle pointe sur le nouveau fichier d'image

Mise à jour du code en mode En direct à l'aide de Quick Tag Editor

Quick Tag Editor vous permet d'accéder au code source en mode En direct. Modifiez des balises HTML dans trois modes différents.

  1. Cliquez sur l'image de logo dans le conteneur #tile8 en bas à droite de la page.

  2. Utilisez le raccourci clavier Ctrl/Cmd+/ pour ouvrir Quick Tag Editor en mode Modifier la balise. Dans la balise img src, sélectionnez le nom de l'image logo.jpg et mettez-le à jour. Saisissez tile8.jpg, puis appuyez sur Entrée pour afficher la nouvelle image (voir Figure 32).
Figure 32. Mettez à jour les attributs des balises HTML en mode En direct

Habillage d'un élément HTML existant avec une nouvelle balise

  1. Sélectionnez l'image de logo dans l'élément #tile1 en haut à gauche.

  2. Utilisez le raccourci clavier Ctrl/Cmd+T pour ouvrir Quick Tag Editor. Utilisez de nouveau ce raccourci pour passer en mode Envelopper avec balise.

  3. Conseil : utilisez le raccourci clavier Ctrl/Cmd+T pour basculer entre les trois modes d'édition.

  4. Tapez a hr, puis appuyez sur Entrée pour sélectionner a href dans la liste. La balise <a href=""> est finalisée automatiquement (voir Figure 33).
Figure 33. Ajoutez et modifiez du code HTML via Quick Tag Editor
  1. Saisissez http://www.adobe.com entre les guillemets pour ajouter un lien, puis appuyez sur Entrée.

  2. Cliquez à un autre endroit sur la page, puis choisissez Fichier > Enregistrer tout.

  3. Quick Tag Editor permet de modifier facilement le code HTML sans passer en mode Code. Les trois modes d'édition (Modifier la balise, Envelopper avec balise et Insérer du code HTML) facilitent la mise à jour, l'habillage et l'ajout de nouveaux contenus HTML sur une page.

  4. Vérifiez la page finale en mode En direct (voir Figure 34).
Figure 34. Vérifiez le rendu du projet d'exemple réalisé dans Dreamweaver

Comparez le mode En direct et le rendu de la page dans Chrome pour voir à quel point les mises en forme sont proches (voir Figure 35).

Figure 35. Prévisualisez la page dans un navigateur pour afficher la mise en forme finale

De retour dans Dreamweaver, passez en mode Code. Vous constaterez que Dreamweaver génère du code HTML et des styles CSS impeccables, conformes aux tout derniers standards web.

Pour aller plus loin

Examinez le nouveau flux En direct pour constater à quel point les nouveaux outils accélèrent le processus de production. Essayez de déposer des éléments et ressources sur la page, de modifier la structure d'éléments de page en mode Affichage rapide des éléments, d'ajouter de nouveaux sélecteurs à l'aide de l'affichage des éléments en direct et de définir de nouveaux styles dans CSS Designer.

Pour en savoir plus sur la manière dont le projet d'exemple a été mis au point, consultez la page Accélération de la programmation HTML5 et CSS.

Et pour découvrir de nouvelles façons d'utiliser CSS Designer et le mode En direct, consultez la page Mise en forme d'une page web avec Dreamweaver CSS Designer.

Pour finir, n'oubliez pas de consulter la page de formation à Dreamweaver. Vous y trouverez des tutoriels vidéo, des articles détaillés et des exemples de projet qui vous aideront à vous familiariser avec les nouvelles fonctionnalités de Dreamweaver CC.

Donnez-nous votre avis

Et voilà, vous avez terminé !


tommi-west_83x83

Tommi West

Tommi est développeuse web indépendante et directrice de la création du site tommiland.com. Avant de créer sa propre entreprise en 2004, elle a travaillé pendant six ans chez Macromedia en tant que rédactrice technique, éditrice et productrice web. Tommi West fait partie des professionnels de la communauté Adobe.