Adobe Dreamweaver CC

Accélération de la programmation HTML5 et CSS

(Visionnage : 30 min)

Accélération de la programmation HTML5 et CSS

30 min

Créez la structure d'une page web en mosaïque à l'aide de la mise en évidence des balises et des numéros de ligne, des indications de code pour les sélecteurs CSS et des fonctions de remplissage du code.

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

Dreamweaver CC inclut des fonctions d'édition de code qui vous aident à localiser, sélectionner, créer et mettre à jour le code. La nouvelle fonction de mise en correspondance des balises facilite l'identification des conteneurs et de la structure de la page au fil de la saisie. Le surlignage et la réduction des lignes vous permettent de gérer facilement le code source et les feuilles de style.

Les indications de code prennent désormais en charge les derniers standards web. La nouvelle fonction de remplissage automatique CSS accélère la production de page, tout en limitant les risques d'erreur. Le mode Code est désormais beaucoup plus réactif lors de la saisie. Lors de l'actualisation de pages longues et complexes, l'environnement de développement suit le rythme à chaque frappe.

Et si vous préférez travailler à la fois sur le code et la création, vous pouvez manipuler les structures de page via le mode Affichage rapide des éléments. Choisissez les éléments dans les modes En direct, Création et Affichage rapide des éléments, puis utilisez le sélecteur de balises pour accéder directement au code correspondant en mode Code. Toutes les modifications que vous apportez s'affichent immédiatement dans ce mode. Les repères visuels améliorés en mode Code et les indicateurs de code de couleur personnalisable vous aident à mener à bien vos projets de conception web.

Dans cet article, vous allez découvrir les fonctionnalités du mode Code qui simplifient le processus de développement lors de la création de toute la structure d'une page d'exemple. N'oubliez pas de télécharger les fichiers du projet d'exemple (ZIP, 700 Ko) et de visionner la vidéo de Dan Carr dans laquelle il explique comment définir la structure élémentaire d'une page web à l'aide des dernières fonctionnalités du mode Code (vidéo 1). Vous pourrez ensuite suivre les étapes indiquées dans cet article pour tester ces nouveautés par vous-même.

Vidéo 1. Dan Carr explique comment définir la structure d'une page web à l'aide des dernières fonctionnalités du mode Code.

 

Pour commencer, téléchargez les fichiers du projet (ZIP, 2 Mo). Ouvrez le fichier ZIP, puis enregistrez son contenu sur votre bureau. Téléchargez et installez la dernière version d'Adobe Dreamweaver CC disponible dans Adobe Creative Cloud.

Le dossier du projet contient la version finale du fichier, index_final.html. Vous pouvez l'ouvrir dans Dreamweaver et l'utiliser pour référence (voir Figure 1).

Figure 1. Aperçu dans Chrome de la version finale du projet d'exemple
Figure 1. Aperçu dans Chrome de la version finale du projet d'exemple

Un grand merci à Dan Carr pour la création du projet d'exemple utilisé dans cet article. Après avoir suivi les instructions de cet article, consultez l'article intitulé Création, modification et prévisualisation de pages web en mode de création en direct pour poursuivre le travail sur le projet d'exemple et découvrir les nouveautés du mode En direct.

Configuration d'un nouveau projet

Pour créer le projet d'exemple, procédez comme suit :

  1. Lancez Dreamweaver CC.

  2. Sélectionnez Site > Gérer les sites, puis cliquez sur Nouveau site.

  3. La boîte de dialogue de configuration du site s'affiche. Saisissez un nom pour le site : DW CC Code. Cliquez sur l'icône de dossier en regard de Dossier local du site, puis sélectionnez le dossier dw_cc_code sur votre bureau. Cliquez sur Enregistrer (voir Figure 2).

     

    Figure 2. Utilisation de la boîte de dialogue de configuration du site pour créer un projet
    Figure 2. Utilisation de la boîte de dialogue de configuration du site pour créer un projet
  4. Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.

  5. Sélectionnez Fenêtre > Fichiers pour ouvrir le panneau Fichiers et vous familiariser avec les fichiers du site.

    Le projet d'exemple contient une page HTML (index_final.html), un fichier CSS (dw_example.css), un dossier source avec des ressources de préproduction et un dossier contenant les fichiers d'image du site.

  6. Cliquez avec le bouton droit de la souris sur le dossier racine du site, puis choisissez Nouveau fichier dans le menu contextuel qui s'affiche. Nommez le nouveau fichier index.html (voir Figure 3).

     

    Figure 3. Création d'un fichier nommé index.html à la racine du projet de site
    Figure 3. Création d'un fichier nommé index.html à la racine du projet de site
  7. Sélectionnez le fichier index.html, puis cliquez sur le fichier index_final.html tout en maintenant la touche Maj enfoncée. Double-cliquez sur les deux fichiers pour les ouvrir.

  8. Cliquez sur le bouton Code pour afficher les pages en mode Code. Cliquez sur l'onglet de la page index.html.

  9. Examinez la structure par défaut de la nouvelle page. Le type de document HTML5 est répertorié en premier sur la ligne 1. Le contenu de la page est délimité par une balise html. La balise HTML contient des métadonnées et la balise de titre. C'est aussi là que vous ajouterez ultérieurement le lien vers la feuille de style CSS. En dessous se trouvent les balises body qui contiendront tous les éléments de page affichés dans un navigateur.

  10. Cliquez dans la balise de titre pour remplacer le titre par défaut Document sans nom. Saisissez Dreamweaver CC entre les balises d'ouverture et de fermeture de titre. Votre balise de titre doit se présenter comme suit :

    <title>Dreamweaver CC</title>

    Le projet de site et la page HTML de départ sont maintenant configurés. Dans la prochaine partie, vous allez créer la structure de page pour la mise en forme.

Ajout des conteneurs de grille et de mosaïque

Le projet d'exemple inclut un conteneur div à position variable appelé grille. Il comporte huit conteneurs div à position variable qui s'affichent à des endroits précis sur la page pour créer l'effet de mosaïque.

Avant d'ajouter la structure de grille, vous allez vérifier le schéma de la mise en page.

  1. Dans le panneau Fichiers, cliquez sur le dossier _src pour le développer. Double-cliquez sur le fichier tile_layout.jpg pour l'ouvrir dans Photoshop, ou l'application configurée par défaut pour l'ouverture des fichiers JPEG sur votre machine (voir Figure 4).

     

    Figure 4. Vérification du schéma de la mise en page
    Figure 4. Vérification du schéma de la mise en page

    Remarque : le programme avec lequel vous ouvrez le fichier JPEG n'a pas d'importance puisque vous avez seulement besoin de le consulter.

     

    Le schéma indique la position des mosaïques dans une grille. Les dimensions de la grille et de chaque conteneur div tile sont indiquées : largeur, hauteur et coordonnées de position. En élaborant ce type de plan ou structure filaire et en calculant les attributs de chaque conteneur avant de programmer les styles CSS, vous vous munissez d'un point de référence utile pour la conception du site. Vous pourriez vous contenter de répertorier les valeurs sur une feuille de papier, mais mieux vaut créer un schéma de la mise en forme.

  2. Notez que le conteneur de grille est une enveloppe qui englobe toutes les mosaïques. Vous allez utiliser CSS pour définir la grille à position variable, afin qu'elle s'affiche au centre de l'écran du visiteur.

  3. Notez également que la structure filaire inclut la largeur finale de la page : 1 140 pixels. Il s'agit de la taille standard pour créer du contenu destiné aux écrans de poste de travail.

  4. Revenez dans Dreamweaver. Vous pouvez laisser le fichier JPEG ouvert pour le consulter à tout moment.

  5. Cliquez en dessous de la balise body d'ouverture, puis saisissez ce qui suit :

    <div class="grid">
    </div>
    

    Lorsque vous tapez les deux premiers caractères de la balise div de fermeture, les indicateurs de code vous aident à compléter la saisie.

  6. Cliquez entre les balises div d'ouverture et de fermeture, puis appuyez sur la touche Entrée neuf ou dix fois de suite pour créer un espace suffisant pour les div de classe tile que vous allez créer dans la partie suivante.

  7. Si vous cliquez dans la balise div d'ouverture de la grille, vous constaterez que la balise div de fermeture est également surlignée (voir Figure 5). Ce repère visuel de couleur gris clair facilite l'identification des conteneurs et de la structure de page au sein du code.

     

    Figure 5. Réduction des erreurs de saisie grâce au surlignage des balises associées
    Figure 5. Réduction des erreurs de saisie grâce au surlignage des balises associées

    Lorsque vous sélectionnez une balise d'ouverture ou de fermeture, les deux balises de la paire sont automatiquement surlignées. Le surlignage s'opère quelle que soit la méthode de sélection employée (touches de navigation sur le clavier ou clic de souris). Il fonctionne aussi avec le mode Code en direct et l'inspecteur de code.

  8. Cliquez en dessous de la balise div d'ouverture de la grille, puis saisissez ce qui suit :

    <div class="tile">   
    </div>

    La même classe .tile étant appliquée aux huit conteneurs div tile, vous pouvez copier le code que vous venez de taper puis le coller ultérieurement pour gagner du temps.

  9. Sélectionnez la classe div d'ouverture et de fermeture de la mosaïque. Plusieurs lignes de code étant sélectionnées, les numéros de ligne correspondants sont surlignés (voir Figure 6).

     

    Figure 6. Lorsqu'un bloc de code est sélectionné, les numéros de ligne des éléments sélectionnés sont surlignés en bleu.
    Figure 6. Lorsqu'un bloc de code est sélectionné, les numéros de ligne des éléments sélectionnés sont surlignés en bleu.

    Le surlignage des numéros de ligne est une nouveauté de l'édition 2014 de Dreamweaver. Les numéros de ligne sont surlignés lorsque des éléments sont sélectionnés en mode Code, Code en direct et Création, ainsi que dans l'inspecteur de code.

  10. Cliquez avec le bouton droit de la souris sur le conteneur div tile, puis choisissez Copier dans le menu contextuel, ou utilisez la combinaison de touches Ctrl/Commande+C.

  11. Collez sept fois les balises copiées afin de créer un total de huit conteneurs div tile imbriqués à l'intérieur de la balise div grid. Lorsque vous travaillez sur des pages plus longues, vous pouvez sélectionner des blocs de code et les réduire en cliquant sur le bouton Réduire la sélection (voir Figure 7).

     

    Figure 7. La réduction de portions de code facilite la gestion des pages longues.
    Figure 7. La réduction de portions de code facilite la gestion des pages longues.

    Pour réafficher la totalité du code source, cliquez sur le bouton Développer tout en dessous du bouton Réduire la sélection.

Création du fichier CSS et ajout de styles

Vous allez maintenant créer la feuille CSS externe qui contiendra tous les styles pour définir la disposition et l'apparence de la page.

  1. Choisissez la commande Fichier > Nouveau. Dans la boîte de dialogue Nouveau document, choisissez CSS comme type de page, puis cliquez sur Créer.

    Le nouveau fichier CSS s'ouvre dans la fenêtre Document.

  2. Choisissez Fichier > Enregistrer pour enregistrer le fichier dans le dossier du site, qui contient déjà le fichier index.html. Nommez le fichier grid_styles.css, puis cliquez sur Enregistrer.

    Le fichier CSS s'affiche immédiatement dans le panneau Fichiers avec les autres fichiers du site (voir Figure 8).

     

    Figure 8. La définition du site garantit que tous les fichiers associés sont enregistrés dans le dossier racine local.
    Figure 8. La définition du site garantit que tous les fichiers associés sont enregistrés dans le dossier racine local.

    Le panneau Fichiers inclut de nombreuses fonctionnalités de gestion des ressources, ce qui vous évite de quitter l'espace de travail de Dreamweaver. Il est recommandé d'utiliser le panneau Fichiers pour renommer des fichiers ou mettre à jour l'emplacement d'un fichier dans le dossier du site, car Dreamweaver est capable d'actualiser les liens dans les pages, ce qui réduit les problèmes potentiels de gestion de fichiers.

     

    Vous allez maintenant ajouter un style pour contrôler les attributs de la balise body.

    1. Dans la feuille de style CSS, tapez ce qui suit :


      body { 
         font-family: "Helvetica Neue", Helvetica, Arial, sans- serif;   
         color: #ffffff; 
         background-color: #1a1a1a; 
      }
      

      Cette règle définit la couleur d'arrière-plan du corps de la page et les styles de police par défaut pour le contenu de type texte.

    2. Dès que vous tapez les deux points après la propriété font-family, des indicateurs de code s'affichent pour vous aider à choisir un jeu de polices dans la liste (voir Figure 9).

       

      Figure 9. Les indicateurs de code CSS accélèrent la saisie et offrent une plus grande précision.
      Figure 9. Les indicateurs de code CSS accélèrent la saisie et offrent une plus grande précision.
    3. Choisissez le jeu font-family commençant par Gotham. Ce site utilise Helvetica Neue comme police principale pour la balise body. Supprimez le mot en bleu Gotham ainsi que la virgule qui le suit après avoir choisi le jeu de polices dans la liste.

    4. Si vous poursuivez la saisie et tapez les deux points après la propriété color, vous pourrez alors cliquer sur l'icône de palette de couleurs pour afficher un sélecteur de couleurs. Saisissez la valeur hexadécimale #FFFFFF ou cliquez sur la zone blanche en haut à gauche du spectre (voir Figure 10).

       

      Figure 10. Choisissez une couleur, appliquez un échantillon sur la page ou saisissez la valeur d'une couleur en utilisant l'un des trois espaces colorimétriques de votre choix.
      Figure 10. Choisissez une couleur, appliquez un échantillon sur la page ou saisissez la valeur d'une couleur en utilisant l'un des trois espaces colorimétriques de votre choix.
    5. Cliquez sur le mode Code pour fermer le sélecteur de couleurs, enregistrer votre sélection et ajouter simultanément la couleur choisie à la règle.

      Le sélecteur de couleurs illustre une nouvelle fois la capacité du mode Code à vous fournir une aide seulement quand vous en avez besoin, ce qui préserve la clarté et la lisibilité de l'environnement de développement lorsque vous rédigez du code.

    6. À la fin de la saisie de la troisième ligne de la règle, vous constaterez que le sélecteur de couleurs s'affiche de nouveau pour vous aider à définir la valeur de la propriété background-color.

      Maintenant que la première règle est ajoutée à la feuille de style, il est temps de la lier à la page HTML.

      1. Sélectionnez l'onglet index.html pour modifier le code source en mode Code.

      2. Cliquez directement sous la balise de titre dans la section d'en-tête de la page, puis appuyez une fois sur Entrée pour ajouter une ligne supplémentaire avant la balise de fermeture d'en-tête.

      3. Sélectionnez le fichier grid_styles.css dans le panneau Fichiers, puis faites-le glisser vers la page. Un lien vers le fichier CSS est automatiquement créé (voir Figure 11).

         

        Figure 11. Ajout du lien à la feuille de style CSS par glisser-déposer depuis le panneau Fichiers
        Figure 11. Ajout du lien à la feuille de style CSS par glisser-déposer depuis le panneau Fichiers
      4. Choisissez Fichier > Enregistrer tout pour enregistrer le fichier HTML et le fichier CSS.

Création des styles CSS pour contrôler l'apparence de la mosaïque

Vous allez maintenant ajouter les styles CSS et actualiser les sélecteurs div tile dans la page HTML.

  1. Cliquez sur l'onglet grid_styles.css pour revenir à la feuille de style et ajouter des styles.

  2. Ajoutez le style suivant pour contrôler l'enveloppe div grid qui englobe les conteneurs div tile :

    .grid { 
       width: 1140px; 
       height: 890px; 
       margin-left: auto; 
       margin-right: auto; 
       padding-left: 40px; 
       position: relative; 
       border-radius: 10px; 
       background-color: #3a3a3a; 
    }

    Cette règle définit les dimensions, les marges intérieure et extérieure et la position de la grille. Elle définit aussi une autre couleur d'arrière-plan que le style body et ajoute des angles arrondis.

  3. Ajoutez le style qui contrôle l'apparence des conteneurs div tile sous la classe grid :

    .tile { 
       background-color: #2a2a2a; 
       position: absolute;   
       width: 270px; 
    }

    La classe tile contient les attributs communs à l'ensemble des div tile.

  4. Vous allez maintenant ajouter les huit règles qui contrôlent les attributs spécifiques affectant chaque conteneur div tile. Ces règles définissent les coordonnées, les dimensions et le contenu source des mosaïques.

    Copiez-collez le code ci-dessous dans la feuille de style, ou copiez les huit règles du fichier index_final.html finalisé :

    #tile1 { 
       top: 20px; 
       left: 20px; 
       width: 270px; 
       height: 270px; 
    } 
    
    #tile2 { 
       top: 310px; 
       left: 20px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile2.jpg); 
    } 
    
    #tile3 { 
       top: 20px; 
       left: 310px; 
       width: 560px; 
       height: 560px; 
    } 
    
    #tile4 { 
       top: 20px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile4.jpg); 
    } 
    
    #tile5 { 
       top: 310px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile5.jpg); 
    } 
    
    #tile6 { 
       top: 600px; 
       left: 20px; 
       width: 560px; 
       height: 270px; 
       background-image: url(images/tile6.jpg); 
    } 
    
    #tile7 { 
       top: 600px; 
       left: 600px; 
       width: 270px; 
       height: 270px; 
    } 
    
    #tile8 { 
       top: 600px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile8.jpg); 
    } 
  5. Cliquez sur l'onglet index.html pour revenir à la page HTML.

  6. Mettez à jour la première balise div tile et ajoutez un nouveau sélecteur d'ID en insérant id="title1" comme illustré ci-dessous :

    <div class="tile" id="tile1" >
  7. Utilisez la fonction d'indication de code en mode Code pour saisir les sélecteurs d'ID pour les sept autres div tile. Les sélecteurs d'ID doivent avoir un nom unique. À noter également qu'il ne peut y avoir qu'un sélecteur d'ID par page. Vous devez donc augmenter d'un numéro l'ID de chaque sélecteur afin d'obtenir les huit noms d'ID que vous avez ajoutés à la feuille de style (voir Figure 12).

     

    Figure 12. Utilisez les indicateurs de code pour affiner la liste des sélecteurs disponibles pour la mise en forme des balises div. Une fois les styles de mise en forme ajoutés, la création de la page est presque terminée.
    Figure 12. Utilisez les indicateurs de code pour affiner la liste des sélecteurs disponibles pour la mise en forme des balises div. Une fois les styles de mise en forme ajoutés, la création de la page est presque terminée.
    1. Choisissez Fichier > Enregistrer tout pour enregistrer tous les fichiers du site.

    2. Cliquez sur les boutons Fractionner et En direct pour activer le mode En direct et vérifier la page.

      Le mode En direct utilise un nouveau moteur de rendu basé sur Chromium, de sorte que votre contenu s’affiche exactement de la même manière dans Dreamweaver et dans vos navigateurs préférés (voir Figure 13).

       

      Figure 13. Prévisualisez votre travail pendant que vous programmez en activant l'affichage fractionné et le mode En direct.
      Figure 13. Prévisualisez votre travail pendant que vous programmez en activant l'affichage fractionné et le mode En direct.
    3. Cliquez de nouveau sur Code pour revenir au mode Code. Il est inutile de désactiver le mode En direct pour poursuivre le travail, les pages étant désormais modifiables en mode Code.

Personnalisation de l'environnement de développement

L'édition 2014 de Dreamweaver inclut une autre nouveauté qui facilite la création de projets. Vous pouvez choisir vos propres couleurs pour surligner le code pendant que vous travaillez.

  1. Dans les préférences de Dreamweaver, choisissez la catégorie Coloration du code. Dans la liste Type de document, choisissez HTML ou CSS (voir Figure 14).

     

    Figure 14. Choisissez des couleurs ou saisissez des valeurs de couleur dans les champs.
    Figure 14. Choisissez des couleurs ou saisissez des valeurs de couleur dans les champs.

    À noter que vous pouvez aussi définir les couleurs de surlignage pour l'arrière-plan et les modifications du code en direct. Lorsque vous créez des styles CSS, les couleurs personnalisées vous aident à identifier les modifications apportées au code.

  2. Sélectionnez le type de document HTML. Dans la section Surlignage de balise actuel, lorsque l'option Activer le surlignage de balises est sélectionnée, vous pouvez cliquer sur le carré de couleur en regard de Couleur de mise en surbrillance pour remplacer la couleur par défaut (gris clair) par celle de votre choix. Dans cet exemple, la couleur sélectionnée est un vert clair (voir Figure 15).

     

    Figure 15. Choisissez une couleur personnalisée pour surligner les balises HTML ou CSS en mode Code.
    Figure 15. Choisissez une couleur personnalisée pour surligner les balises HTML ou CSS en mode Code.
  3. Cliquez sur Appliquer pour enregistrer vos modifications.

  4. Dans le code source, cliquez sur la balise div tile1 d'ouverture. Les balises d'ouverture et de fermeture sont surlignées en vert clair, la couleur personnalisée (voir Figure 16).

     

    Figure 16. Le surlignage des balises facilite l'identification du conteneur entier.
    Figure 16. Le surlignage des balises facilite l'identification du conteneur entier.
  5. Cliquez entre les balises div tile1 d'ouverture et de fermeture, puis appuyez une fois sur Entrée pour créer un espace et ajouter du contenu supplémentaire. Cette fois-ci, vous allez insérer une image. Tapez <img.

     

    Lorsque vous ajoutez un espace, des indicateurs de code s'affichent. Saisissez la lettre « s », appuyez deux fois sur la touche Flèche vers le bas, puis appuyez sur Entrée pour choisir l'attribut src dans la liste.

     

    Une fois l'attribut sélectionné, un nouvel indicateur de code s'affiche. Cliquez sur Parcourir, puis sélectionnez le fichier logo.jpg dans le dossier d'images. Cliquez sur Ouvrir (voir Figure 17).

     

    Figure 17. Sélectionnez le fichier logo.jpg dans le dossier d'images.
    Figure 17. Sélectionnez le fichier logo.jpg dans le dossier d'images.

    La boîte de dialogue Sélectionner un fichier se referme, et le code affiche le chemin d'accès à l'image.

  6. Appuyez de nouveau sur la barre d'espace, tapez la lettre « w », puis appuyez sur Entrée pour choisir l'attribut de largeur. Saisissez la valeur de largeur de l'image entre guillemets : 270.

  7. Appuyez de nouveau sur la barre d'espace, tapez la lettre « h », puis appuyez sur Entrée pour choisir l'attribut de hauteur. Cette fois-ci, vous pouvez choisir 270 directement via l'indicateur de code qui s'affiche, puis appuyer sur Entrée pour ajouter la valeur entre guillemets. Tapez /> (une barre oblique « / » suivi du signe Supérieur à « > ») pour finaliser la saisie de la balise d'image.

     

    La balise d'image complète se présente comme suit :

    <img src="images/logo.jpg" width="270" height="270"/>
  8. Cliquez sur le bouton Fractionner pour afficher le projet à jour en mode En direct. La balise div tile1 affiche l'image insérée du logo PLAY.

  9. Cliquez sur le bouton Code pour revenir en mode Code.

Dans ce projet, la plupart des images sont définies comme des images d'arrière-plan dans les styles CSS qui définissent chaque div tile dans le fichier grid_styles.css. Vous pouvez ajouter des images d'une façon ou d'une autre, selon la mise en forme et l'orientation graphique de la page que vous êtes en train de créer. Lorsque les balises div contiennent des images d'arrière-plan définies en tant que styles, vous pouvez ajouter d'autres contenus dans la même div, par exemple des images ou du texte semi-transparents qui se superposent à l'image d'arrière-plan.

Ajout et personnalisation de texte

Si la plupart des div tile contiennent des images d'arrière-plan ou du contenu d'image inséré, les balises div tile3 et div tile7 sont, pour leur part, toujours vides. Vous allez maintenant ajouter du texte d'espace réservé à ces fichiers et utiliser des styles CSS pour appliquer une police Edge Web Fonts.

  1. Dans la page HTML, cliquez entre les balises d'ouverture et de fermeture de div tile3. Tapez la balise. Quand vous tapez </, la fonction de remplissage du code se charge de finaliser la saisie de la balise h1 de fermeture.

  2. Cliquez entre les deux balises h1 que vous venez d'ajouter. Saisissez la phrase suivante : Add your hero text here along with whatever else you want to call attention to.

  3. Cliquez avant les mots « hero text », puis tapez une

    <span>

    balise. Ajoutez une balise de fermeture  

    </span>

    après le mot « text ».

  4. Répétez l'étape 3 pour ajouter une balise span autour des mots « attention to », en plaçant la balise span de fermeture avant le point. La balise div tile3 finale doit se présenter comme suit :

    <div class="tile" id="tile3">1
    <h1>Add your <span>hero text</span> here along with whatever else you want to call <span> attention to</span>.</h1>1
    </div>
  5. Choisissez Modifier > Gérer les polices. Tapez le chiffre 1 dans le champ de recherche de la boîte de dialogue qui s'affiche. La liste affiche désormais uniquement les polices dont le nom inclut le chiffre 1.

  6. Sélectionnez la police M+ 1c. Une coche bleue s'affiche alors en regard du nom de la police pour signaler qu'elle va être ajoutée. Cliquez sur Terminer (voir Figure 18).

     

    Figure 18. Choisissez le nom de la police Web Fonts à ajouter.
    Figure 18. Choisissez le nom de la police Edge Web Fonts à ajouter.

    La nouvelle police web est ajoutée à la liste de polices du site, ce qui signifie que vous pouvez maintenant la sélectionner dans Dreamweaver.

    Vous allez maintenant ajouter un style pour contrôler l'apparence du texte.

  7. Cliquez sur l'onglet grid_styles.css pour afficher la feuille de style CSS en mode Code.

    Dans Dreamweaver, vous pouvez effectuer des allers-retours entre le code source et les feuilles de style liées, ce qui est particulièrement pratique lorsque vous travaillez sur des projets comportant de nombreux fichiers connexes.

  8. Sous les styles existants, tapez une nouvelle classe nommée .hero, puis ajoutez les accolades comme suit :

    .hero {
    
    }
    
  9. À la ligne suivante, entre les accolades, tapez la propriété suivante :

     

    font-family:

  10. Lorsque vous tapez les deux points après font-family, un indicateur de code s'affiche. Tapez la première lettre du nom de la police à ajouter (« m » en l'occurrence) pour accéder au nom correspondant dans la liste (voir Figure 19).

     

    Figure 19. Définissez la valeur de la propriété font-family sur le nom m-1c, qui correspond à la police web que vous venez d'ajouter.
    Figure 19. Définissez la valeur de la propriété font-family sur le nom m-1c, qui correspond à la police web que vous venez d'ajouter.
  11. Appuyez sur Entrée pour sélectionner la police dans la liste. Ensuite, tapez le point-virgule de fermeture.

  12. Appuyez sur Entrée pour ajouter une ligne, puis tapez les autres propriétés et valeurs pour finaliser le style hero :

     

    font-size: 3.25em; 
    font-weight: 300; 
    font-style: normal; 
    margin-top: 110px; 
    margin-left: 40px; 
    margin-right: 40px; 
    color: gray;
  13. Vérifiez que la classe hero finale se présente comme suit :

    hero { 
       font-family: "m-1c"; 
       font-size: 3.25em; 
       font-weight: 300; 
       font-style: normal; 
       margin-top: 110px; 
       margin-left: 40px; 
       margin-right: 40px; 
       color: gray; 
    } 
  14. Cliquez sur l'onglet index.html pour afficher le code HTML source en mode Code.

    Après avoir ajouté la police web à un style, le script contenant le lien pour télécharger la police Edge Web Fonts est automatiquement ajouté au code, juste avant la balise de fermeture d'en-tête. Le nouveau code se présente comme suit :

    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> 
    <script>var
       adobewebfontsappname ="dreamweaver"</script> <script src="http://use.edgefonts.net/m-1c:n3:default.js" type="text/javascript"></script> 
    </head>

    Remarque : si la balise de script n'est pas insérée dans le code de la section d'en-tête, choisissez Commandes > Nettoyer la balise Web Fonts Script (page actuelle) pour l'ajouter.

  15. Descendez jusqu'à la balise div tile3. Mettez à jour la balise h1 pour ajouter une classe dans la balise d'ouverture.

    Après avoir tapé le guillemet après le signe égal, un indicateur de code s'affiche pour indiquer le nom des classes disponibles. Appuyez sur le bouton Flèche vers le bas pour sélectionner la classe hero, puis appuyez sur Entrée (voir Figure 20).

     

       Figure 20. Sélectionnez la classe hero dans la liste d'indicateurs de code qui s'affiche.
    Figure 20. Sélectionnez la classe hero dans la liste d'indicateurs de code qui s'affiche.
  16. Cliquez sur l'onglet grid_styles.css pour afficher le fichier CSS en mode Code. Copiez les styles ci-dessous ou à partir du fichier dw_example.css :

    .hero-bright { 
       color: white; 
    }  
    
    .action-title {	/*Use default... Helvetica, Arial, sans-serif*/ 
       font-size:1.5em; 
       margin-top:28px; 
       margin-left:20px; 
       margin-right:20px; 
    }  
    
    .action { 
       font-family: "m-1c"; 
       font-size: 1.25em; 
       font-weight: 400; 
       color: lightgray; 
       margin-left: 20px; 
       margin-right: 20px; 
    } 
  17. Cliquez sur l'onglet index.html pour revenir au code HTML source et poursuivre les modifications.

  18. Dans div tile3, mettez à jour les deux balises span pour ajouter les attributs de classe.

    Quand vous tapez le guillemet après « class= », un indicateur de code s'affiche. Cette fois-ci, la liste inclut la classe hero-bright. Choisissez la classe hero-bright pour modifier le style des mots « hero text » et « attention to » à l'intérieur de la balise h1. Sélectionnez le mode Création avec l'affichage en direct activé pour vérifier l'apparence de votre travail (voir Figure 21).

     

       Figure 21. Vérifiez l'apparence de votre projet en mode Création avec l'affichage en direct activé.
    Figure 21. Vérifiez l'apparence de votre projet en mode Création avec l'affichage en direct activé.

Utilisation de l'affichage rapide des éléments avec le mode Code

Vous pouvez facilement identifier les éléments de page DOM et les sélectionner dans une hiérarchie de type arborescence grâce au nouveau mode Affichage rapide des éléments disponible dans l'édition 2014 de Dreamweaver. Lorsque vous sélectionnez les différents éléments de page en mode Affichage rapide des éléments, l'élément actif est mis à jour dans le mode Code et dans toutes les autres parties de l'espace de travail, ce qui permet d'accéder rapidement à une section précise du code.

  1. Cliquez sur Fractionner pour afficher simultanément les modes Code et En direct (si ce dernier est désactivé, activez-le).

  2. Cliquez sur le bouton </> au bas de la fenêtre Document, à gauche du sélecteur de balises. Le panneau Affichage rapide des éléments s'affiche.

  3. Explorez les différents éléments de page en cliquant sur leur nom dans la liste pour les développer. Remarque : lorsque vous cliquez sur des éléments dans le panneau Affichage rapide des éléments, la sélection est synchronisée avec les modes Code et En direct, le sélecteur de balises et tous les autres éléments de l'interface.

  4. Développez la balise div grid pour afficher la liste des huit balises div tile numérotées. Cliquez sur div tile7 pour la sélectionner. La sélection de div tile7 est surlignée en mode Code (voir Figure 20). Cette synchronisation de la sélection fonctionne dans les deux sens : vous pouvez aussi cliquer sur un élément en mode En direct pour qu'il soit sélectionné dans tout l'espace de travail (voir Figure 22).

     

    Figure 22. Utilisez le mode Affichage rapide des éléments pour parcourir la structure de page et sélectionner rapidement des éléments.
    Figure 22. Utilisez le mode Affichage rapide des éléments pour parcourir la structure de page et sélectionner rapidement des éléments.
  5. En mode Code, cliquez entre les balises d'ouverture et de fermeture de div tile7 surlignées. Tapez le code suivant pour ajouter du texte :

    <h2 class="action-title">Call to Action!</h2> 
    <p class="action">Add action statement, and click through to deeper levels of content.</p>

    Lors de la saisie des classes, les indicateurs de code facilitent la sélection du nom des styles, puis disparaissent rapidement pour vous permettre de poursuive la saisie. La fonction de remplissage du code accélère en outre le processus de production web. Ainsi, dès que vous saisissez les premiers caractères, Dreamweaver identifie la balise souhaitée et affiche son nom complet. Appuyez sur Entrée pour accepter la balise suggérée.

  6. Choisissez Fichier > Aperçu dans le navigateur pour afficher la page finalisée.

Pour aller plus loin

Découvrez les nouveautés du mode Code qui accélèrent la programmation et l'actualisation de vos projets web. La visualisation des modifications apportées au code source et aux styles CSS en mode En direct vous permet de contrôler fréquemment votre travail, sans quitter l'espace de travail. Le nouveau mode Affichage rapide des éléments vous permet en outre de sélectionner rapidement des éléments de page, tout en bénéficiant d'une vue d'ensemble de la structure de la page.

Dans Dreamweaver CC, le mode Code est beaucoup plus réactif. Même les pages HTML les plus longues réagissent rapidement à la saisie et aux modifications. Les indicateurs de code prennent en charge l'ensemble des langages web modernes tels que PHP 5.4. Vous pouvez ainsi créer des projets en toute sérénité : la moindre erreur de syntaxe est signalée lors de la saisie.

Consultez les articles suivants sur Dreamweaver CC pour en savoir plus sur la création graphique de contenu web à l'aide des modes de création en direct et d'affichage rapide des éléments.

N'oubliez pas de consulter le récapitulatif des nouveautés de Dreamweaver. Vous y trouverez du contenu qui vous aidera à les exploiter immédiatement.

 

Donnez-nous votre avis.

Et voilà, vous avez terminé ! Donnez-nous votre avis sur ce didacticiel en répondant à notre enquête.

Tommi West 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.

 


dan-carr_83x83

Dan Carr est une véritable référence en matière de création interactive, de développement logiciel, de rédaction technique et de formation. Au cours de ses 15 années de collaboration avec Adobe et d'autres chefs de file du secteur, il a publié des articles et supports de formation disponibles en Flash, Flex, etc. Dan Carr consacre son temps libre à ses deux grandes passions : les chiens et la guitare.