Ajustement de l'espace autour des éléments et création d'images réactives
Dans la cinquième partie de ce tutoriel, vous apprendrez à utiliser CSS en mode Code et CSS Designer pour mettre en forme la page d’accueil, à définir l’espacement autour des éléments et à ajouter des images qui se redimensionnent automatiquement sur différents appareils.
Bienvenue dans la cinquième partie de ce tutoriel sur l'élaboration d'un site web simple en responsive design dans Dreamweaver 2015. Dans la partie précédente, vous avez commencé à mettre en forme la page d'accueil du site Bayside Beat en travaillant d'abord en mode Code, puis en utilisant CSS Designer. L'avantage de CSS Designer est que vous pouvez voir instantanément le résultat dans le mode En direct. Dans cette partie, vous allez ajuster l'espace autour des éléments et ajouter des images qui se redimensionnent automatiquement en fonction de la résolution de l'écran.
Contrôle de l'espace horizontal et vertical avec les marges intérieure et extérieure
CSS possède deux propriétés qui permettent de contrôler l'espace horizontal et vertical autour d'un élément : padding (marge intérieure) et margin (marge extérieure). Vous pouvez parfois utiliser indifféremment l'une ou l'autre. Bien que ces deux propriétés ajoutent de l'espace autour d'un élément, il existe des différences notables. La marge n'est pas incluse dans la largeur ou la hauteur totale d'un élément (voir Figure 1). C'est toujours le cas, que vous utilisiez le modèle de boîte par défaut ou le remplaciez par le fragment de code créé dans la quatrième partie.
Le tableau ci-après résume l'effet de la marge intérieure et de la marge extérieure sur différentes caractéristiques.
Caractéristique
Padding (marge intérieure)
Margin (marge extérieure)
Arrière-plan
L'arrière-plan de l'élément s'étire dans la marge intérieure.
L'arrière-plan de l'élément parent apparaît par transparence.
Bordure
La marge intérieure apparaît à l'intérieur de la bordure.
La marge extérieure apparaît à l'extérieur de la bordure.
Fusion
Les marges intérieures ne fusionnent jamais.
Les marges verticales adjacentes fusionnent.
Les propriété padding et margin augmentent l'espace autour d'un élément, mais le comportement de la seconde est légèrement différent.
La Figure 2 montre deux éléments empilés l'un sur l'autre. Le premier a une marge inférieure de 20 px et le second une marge supérieure de 30 px.
Il est naturel de supposer que la distance verticale entre les deux éléments correspond à la somme des deux marges, autrement dit 50 px. Ce n'est pas ce qui se produit. Les marges verticales adjacentes se réduisent ou fusionnent. Ainsi, la distance verticale entre les éléments correspond à la plus grande des deux marges, autrement dit 30 px (voir Figure 3).
Les marges intérieures, quant à elles, ne fusionnent jamais. Si, dans cet exemple, vous remplaciez les marges inférieure et supérieure par des marges intérieures de même taille, le contenu des deux éléments serait alors espacé de 50 px.
Dans les règles de style que vous avez créées au cours de la quatrième partie, le corps et l'élément
wrapper ont une marge supérieure de 0. Pourquoi y a-t-il donc un écart en haut de la page ? C'est tout simplement parce que les navigateurs appliquent une marge par défaut à certains éléments, notamment aux titres.
La marge supérieure par défaut du titre
se combine avec la marge supérieure 0 de l'élément
wrapper, ce qui éloigne ce dernier du haut de la page. L'arrière-plan d'un élément parent étant toujours visible à travers une marge, c'est pour cette raison que vous voyez l'arrière-plan bleu clair du corps. Les marges intérieures, quant à elles, ne fusionnent jamais. De plus, l'arrière-plan de l'élément s'étend dans la marge intérieure. Le problème est résolu. Si vous n'avez pas bien compris le principe, jugez par vous-même.
Suppression de l'écart en haut de la page et mise en forme des titres
Pour résoudre le problème de l'écart en haut de la page, vous devez remplacer la marge supérieure du titre principal par une marge intérieure équivalente. Parallèlement, vous devez mettre en forme les autres titres.
Sélectionnez le titre principal
en mode En direct et assurez-vous que la feuille de style responsive.css est sélectionnée dans le panneau Sources de CSS Designer. Le sélecteur suivant doit être placé après l'élément #wrapper . Vérifiez que ce dernier est bien sélectionné dans le panneau Sélecteurs. À présent, cliquez sur le signe plus (+) pour créer un sélecteur.
Le titre étant sélectionné, Dreamweaver suggère le sélecteur #wrapper header h1 . Il s'agit d'un sélecteur descendant très spécifique qui recherche des éléments
imbriqués dans des éléments , eux-mêmes imbriqués dans un élément avec l'ID wrapper. Pour rendre un sélecteur moins détaillé, appuyez une fois sur la flèche Haut pour remplacer la suggestion par « header h1 ». Si ce sélecteur est encore trop spécifique, appuyez une nouvelle fois sur la flèche Haut pour le remplacer par « h1 ». Les éléments
de la page sont maintenant ciblés. Pour appliquer les mêmes règles aux éléments
, cliquez dans le champ modifiable à droite de h1 et saisissez une virgule suivie de h2 . Le sélecteur doit se présenter ainsi :
h1, h2
L'utilisation de la flèche Haut pour rendre un sélecteur moins détaillé est uniquement possible lorsque Dreamweaver suggère d'abord un nom pour le sélecteur. Si nécessaire, double-cliquez sur le sélecteur pour ouvrir le champ modifiable, puis saisissez le sélecteur de groupe manuellement.
Cliquez sur l'icône dans la partie supérieure du panneau Propriétés et définissez les propriétés de texte suivantes pour le nouveau sélecteur :
Les titres sont maintenant colorés dans un gris plus foncé que le texte principal et ne sont plus en gras.
Le titre principal et le sélecteur h1, h2 étant toujours sélectionnés, cliquez sur le signe plus (+) dans le panneau Sélecteurs, puis appuyez deux fois sur la flèche Haut pour créer un sélecteur pour h1 . Cliquez sur l'icône Disposition pour accéder à la section correspondante, puis définissez les propriétés suivantes (voir Figure 4) :
L'espace vertical autour du titre est préservé, mais l'arrière-plan provient de l'élément
wrapper, et non du corps. La bande bleu clair indésirable disparaît.
Dans la section Texte, définissez les propriétés et les valeurs suivantes :
Les propriétés text-align et text-transform sont définies à l'aide d'icônes (voir Figure 5). En cas de doute sur leur signification, survolez-les à l'aide de la souris.
Le titre principal est maintenant plus grand, centré et en majuscules.
Sélectionnez l'un des titres
et créez un sélecteur h2 en appuyant deux fois sur la flèche Haut pour rendre le sélecteur suggéré moins détaillé. Définissez les propriétés et les valeurs suivantes :
margin-top : 0,5 em
font-size : 2,25 em
L'unité de mesure em change la taille du texte et celle de la marge supérieure proportionnellement au texte dans le corps principal de la page.
Ajout d'un espace horizontal dans l'enveloppe
Le texte contenu dans l'élément
wrapper se trouve contre les bords. L'ajout d'une marge intérieure horizontale permettrait d'augmenter un peu l'espace des deux côtés. Toutefois, cela empêcherait l'image du Golden Gate Bridge d'occuper toute la largeur de l'élément
hero lors de son insertion ultérieure. Créez plutôt un sélecteur de groupe pour main, aside avec les propriétés et les valeurs suivantes (voir Figure 6) :
Une fois que les changements effectués, n'oubliez pas d'enregistrer votre travail en choisissant Fichier > Enregistrer tous les fichiers associés.
Insertion d’une image provenant d’une bibliothèque Creative Cloud et ajout d'une légende
Agrémentons la page de quelques images. Dans cette section, vous allez télécharger une image de la bibliothèque Creative Cloud, l'insérer dans la page index.html et ajouter une légende à l'aide d'un élément . Parallèlement, vous sélectionnerez le format de l'image, puis vous la redimensionnerez.
Passez en mode Fractionner pour examiner le code HTML sous-jacent. Si nécessaire, cliquez sur Code source dans la barre d'outils des fichiers associés. Puis, dans la fenêtre du mode En direct, sélectionnez le deuxième paragraphe situé sous le titre « Riding the Cable Cars ». Il commence par « The cable cars rely… ».
Ouvrez le panneau Insertion et cliquez sur Figure dans la catégorie HTML (voir Figure 7).
Sélectionnez l'option Après dans l'assistant de position pour insérer l'élément après le paragraphe sélectionné. L'élément est imbriqué à l'intérieur de ce nouvel élément. Les deux éléments contiennent du texte de substitution (voir Figure 8).
Vérifiez que l’élément est toujours sélectionné, puis cliquez avec le bouton droit sur l’ est toujours sélectionné, puis cliquez avec le bouton droit sur l’image intitulée cable_car1 dans le panneau Bibliothèques CC. Sélectionnez l'option Insérer la ressource non liée dans le menu contextuel. L'assistant de position vous demande où vous souhaitez insérer l'image. Cliquez sur Imbriquer pour l'incorporer dans l'élément .
Une boîte de dialogue vous demande de spécifier l'emplacement du fichier dans votre site, ainsi que le format et la taille de l'image. Le champ src suggère automatiquement d'enregistrer l'image dans le dossier images, ce dernier ayant été défini comme dossier d'images par défaut dans la première partie de ce tutoriel. Le nom de l’image est suggéré en fonction de celui utilisé dans la bibliothèque Creative Cloud. Les deux sont corrects, mais l'enregistrement de l'image au format PNG 32 générera un fichier volumineux. Ouvrez le menu déroulant à droite de la boîte de dialogue et sélectionnez le format JPEG (voir Figure 9).
Le nom de fichier dans le champ src porte à présent l'extension .jpg.
À plus de 3 000 px de large, l'image est beaucoup trop grande. Remplacez la valeur du champ W par 400. Par défaut, l'icône de liaison entre les champs W (largeur) et H (hauteur) est sélectionnée. La valeur du champ H passe donc automatiquement à 266.
Assurez-vous que les valeurs définies dans la boîte de dialogue correspondent à celles de la Figure 10, puis cliquez sur OK.
L'image est insérée dans l'élément , et les propriétés width et height sont automatiquement définies dans le code HTML sous-jacent. Pour obtenir une mise en page réactive, vous devez supprimer ces valeurs.
L'image étant toujours sélectionnée, cliquez sur l'icône de sandwich dans l'affichage des éléments pour ouvrir l'inspecteur Propriétés rapide (voir Figure 11), supprimez les valeurs dans les champs width et height , puis cliquez en dehors de l'inspecteur pour le fermer.
Double-cliquez sur le texte de substitution de l'élément pour passer en mode de modification, sélectionnez-le, puis appuyez sur la touche Suppr pour ne conserver que l'image et l'espace réservé à la légende.
Dreamweaver peut également supprimer l'attribut alt="" de la balise dans le code HTML sous-jacent. Le cas échéant, le panneau Sortie vous signale que l'attribut alt doit avoir une valeur. L'attribut alt sert à fournir un autre texte pour les navigateurs non visuels, tels que les lecteurs d'écran pour non-voyants. Lorsqu'une image est accompagnée d'une légende ou uniquement décorative, l'attribut alt est inutile. Vous pouvez donc ignorer l'avertissement.
Double-cliquez sur le texte de substitution de la légende, puis remplacez-le par « The cable car terminus near Union Square ».
Enregistrez le fichier index.html.
Le menu contextuel du panneau Bibliothèques CC propose les options Insérer la ressource liée, Insérer la ressource non liée, Télécharger la ressource liée et Télécharger la ressource non liée. L'insertion ou le téléchargement de la ressource non liée crée simplement une version locale de l'image dans votre site. Si vous sélectionnez l’option Insérer ou Télécharger la ressource liée, la version locale sera automatiquement mise à jour à chaque modification de l’image dans la bibliothèque Creative Cloud. Découvrez tout ce qu'il faut savoir sur la
synchronisation des ressources dans Creative Cloud
.
Insertion d’une image issue d’une bibliothèque Creative Cloud par glisser-déposer
L'autre image de la page index.html doit être imbriquée dans la balise
avec l'ID hero. Dans cette section, vous apprendrez à déposer cette image sur la page directement depuis le panneau Bibliothèques CC. Cette technique peut être difficile à maîtriser du premier coup. Lisez les instructions ci-après avant de vous lancer.
Quittez le mode Fractionner en cliquant sur le bouton En direct situé en haut à gauche de la fenêtre Document, et assurez-vous que le paragraphe commençant par « Bayside Beat keeps… » apparaît immédiatement après la liste à puces.
Dans le panneau DOM, réduisez les éléments ayant des enfants imbriqués. L'élément div #hero doit toutefois être développé, comme illustré en Figure 12. Cela vous permettra de positionner l'image avec précision.
Dans le panneau Bibliothèques CC, sélectionnez l'image intitulée golden_gate, puis commencez à la faire glisser vers la fenêtre du mode En direct. Lors de cette opération, une barre verte horizontale indique où l'image va être insérée. Arrêtez-vous dès que la barre verte se trouve entre la liste à puces et le paragraphe, mais ne relâchez pas le bouton de la souris. Au bout de quelques secondes, une petite icône apparaît dans l'angle inférieur droit du pointeur de la souris (voir Figure 13).
Sans relâcher le bouton de la souris, placez le pointeur sur l'icône pour faire apparaître une version flottante du panneau DOM. Continuez à faire glisser l'image au-dessus du panneau flottant jusqu'à ce que la ligne verte se trouve entre l'élément div #hero et la balise p suivante (voir Figure 14). Une fois la position atteinte, relâchez le bouton de la souris.
Une boîte de dialogue vous demande où et dans quel format vous souhaitez stocker l'image sur votre site local (voir les Figures 9 et 10 de la section précédente).
Convertissez l'image au format JPEG, définissez la largeur et la hauteur à 1 000 et 547, Enfin, cliquez sur OK.
L'image du Golden Gate Bridge doit apparaître entre la liste à puces et le paragraphe. Ne vous inquiétez pas si sa position est incorrecte. Vous pourrez la rectifier dans un instant.
Vérifiez que l'image est toujours sélectionnée, puis cliquez sur l'icône de sandwich pour ouvrir l'inspecteur Propriétés rapide.
Saisissez « The Golden Gate Bridge » dans le champ alt, et supprimez les valeurs dans les champs width et height. Comme cette image n'aura pas de légende, l'attribut alt est requis pour les navigateurs non visuels. Les dimensions ne sont pas utiles, car l'image se redimensionnera automatiquement en fonction de la résolution de l'écran.
Dans le panneau DOM, vérifiez que l'élément img se trouve entre div #hero et p. Il doit également être indenté au même niveau que le paragraphe p (voir Figure 15).
Si l'image ne se trouve pas à la bonne place, faites-la glisser dans le panneau DOM jusqu'à ce qu'une barre verte horizontale apparaisse entre div #hero et le paragraphe p suivant, puis relâchez le bouton de la souris.
Enregistrez le fichier index.html.
L'utilisation du glisser-déposer en mode En direct et dans le panneau DOM permet de réorganiser efficacement des ressources et éléments HTML sur une page web. Il est donc utile de vous exercer pour bien maîtriser cette technique.
Si vous préférez ne pas utiliser la souris, vous pouvez insérer l'image du Golden Gate Bridge en procédant de la même manière que dans la section précédente. Commencez juste par sélectionner la balise
hero, puis choisissez Insérer la ressource non liée dans le menu contextuel. Lorsque l'assistant de position vous y invite, sélectionnez Imbriquer.
Création d'images réactives
La largeur de l'image du Golden Gate Bridge est de 1 000 px, et celle des autres images du site est de 400 px. Bien que vous ayez supprimé les attributs width et height du code HTML, les navigateurs affichent les images dans leurs dimensions naturelles, à moins de recourir à la magie des feuilles de style CSS pour les rendre réactives.
Réduisez la largeur de la fenêtre du mode En direct en faisant glisser le curseur de défilement vers la gauche (voir Figure 16). Dès que la largeur de la fenêtre est inférieure à 1 000 px, une barre de défilement horizontale apparaît, et le côté droit du Golden Gate Bridge s'obscurcit.
Vérifiez que l'image du Golden Gate Bridge est sélectionnée en mode En direct, puis créez un sélecteur dans CSS Designer. Appuyez une fois sur la flèche Haut pour remplacer le sélecteur suggéré par #hero img , puis appuyez sur la touche Entrée/Retour pour confirmer la modification.
Un sélecteur descendant constitué de deux sélecteurs ou plus séparés par un espace est alors créé. Il cible des images dans un élément avec l'ID hero.
Définissez les propriétés et les valeurs suivantes (elles se trouvent dans la section Disposition) :
La définition de la propriété max-width à 100 % garantit que l'image n'est jamais plus large que son élément parent (il s'agit ici la balise
hero).
Faites glisser le curseur de défilement en mode En direct dans les deux directions. L'image du Golden Gate Bridge se redimensionne automatiquement pour remplir l'espace horizontal disponible (voir Figure 17).
Sélectionnez l'image du funiculaire en mode En direct, et appuyez une fois sur la flèche Haut. La sélection remonte dans la hiérarchie HTML et se positionne sur l'élément parent .
Créez un sélecteur pour figure , et définissez les propriétés suivantes :
Si nécessaire, ramenez la fenêtre du mode En direct à moins de 400 px. Le repère visuel de l'élément montre que la propriété max-width définie à 92 % passe outre la largeur. De plus, l'élément est centré horizontalement, mais l'image dépasse à droite (voir Figure 18).
Pour mettre en forme les images imbriquées dans les éléments , vous devez créer un autre sélecteur descendant, figure img . Définissez ensuite la propriété max-width à 100 %.
Ainsi, l'image ne débordera pas de son conteneur parent. Lorsque la largeur de la fenêtre du mode En direct est supérieure à 435 px, l'image s'affiche à sa taille naturelle de 400 px et est centrée horizontalement.
Toujours en manipulant l'élément , créez un sélecteur pour figcaption , et définissez les propriétés et les valeurs suivantes :
Utilisation d'un filtre CSS pour mettre en forme les images
La plupart des navigateurs modernes prennent désormais en charge les filtres CSS, bien qu'ils n'en soient encore officiellement qu'au stade expérimental. Nous allons créer quelques styles simples pour convertir une image en niveaux de gris, puis nous révélerons sa version couleur en la survolant.
Sélectionnez l'image du funiculaire en mode En direct, puis cliquez sur le signe plus (+) dans l'affichage des éléments img. Saisissez .grayscale (avec un point au début) dans le champ modifiable, puis appuyez sur Tab ou Entrée/Retour pour attribuer la classe à l'image.
Assurez-vous que la feuille responsive.css est sélectionnée dans la fenêtre contextuelle qui s'affiche, puis cliquez en dehors de celle-ci pour la fermer.
Sélectionnez le sélecteur .grayscale créé par Dreamweaver dans le panneau Sélecteurs de CSS Designer, et activez la case à cocher Ensemble en haut à droite du panneau Propriétés.
Utilisez les champs ajouter une propriété et ajouter une valeur pour définir les propriétés et valeurs suivantes :
L'image ressemble maintenant à une photo en noir et blanc (voir Figure 19).
Dans le panneau Sélecteurs, cliquez avec le bouton droit sur le sélecteur .grayscale , et sélectionnez Dupliquer dans le menu contextuel. Dreamweaver crée une copie de la règle de style, mais vous laisse la possibilité de modifier le nom du nouveau sélecteur. Ajoutez la pseudo-classe :hover à la fin du nom, comme ceci :
.grayscale:hover
Vous découvrirez plus en détail les pseudo-classes dans la sixième partie de ce tutoriel.
Dans le panneau Propriétés, double-cliquez sur la valeur de chaque propriété, et remplacez-la par grayscale(0%) .
Survolez l'image en mode En direct. L'image est maintenant en couleur.
Enregistrez votre travail en sélectionnant Fichier > Enregistrer tous les fichiers associés.
Pour garantir la compatibilité avec les différents navigateurs, vous devez utiliser les propriétés -webkit-filter et filter . Les anciens navigateurs qui ne prennent pas en charge ces propriétés ignorent cette règle de style et affichent l'image en couleur.
Création d'un style unique pour un paragraphe
Dans la section précédente, vous avez appliqué à l'image du funiculaire une mise en forme différente de l'image hero via l'attribution d'une classe. Toutefois, il n'est pas toujours nécessaire d'utiliser une classe pour mettre en forme des éléments de manière différente. Le paragraphe entre l'image du Golden Gate Bridge et le premier titre
étant imbriqué dans la balise
hero, il est possible de lui appliquer une mise en forme différente de celle des autres paragraphes en créant un sélecteur descendant pour #hero p .
En mode En direct, sélectionnez le paragraphe situé juste en dessous de l'image du Golden Gate Bridge.
Comme il est préférable de laisser ensemble les règles de style liées, sélectionnez #hero img dans le panneau Sélecteurs de CSS Designer, puis cliquez sur le signe plus (+). Dreamweaver suggère le sélecteur #wrapper #hero p . Appuyez une fois sur la flèche Haut pour le remplacer par #hero p .
Désactivez la case à cocher Ensemble en haut à droite du panneau Propriétés, puis cliquez sur l'icône pour passer à la section Texte.
Cliquez sur la nuance rose dans le panneau Bibliothèques CC pour copier la valeur hexadécimale #F68979 dans le Presse-papiers, puis collez-la dans le champ de valeur de la propriété color . Seul le paragraphe de la balise
hero devient rose. Tous les autres restent gris foncé.
Définissez la propriété font-weight à 600.
Cliquez une fois à droite de la propriété font-size , et sélectionnez l'unité de mesure em. Comme vous l'avez découvert dans la quatrième partie, Dreamweaver définit toujours la valeur à 0. C'est pourquoi le texte disparaît.
L'élément value doit être défini à 1,5 em. Il existe deux façons de procéder :
Saisissez 1,5 directement dans le champ modifiable, et appuyez sur la touche Entrée/Retour pour confirmer la valeur.
Positionnez votre pointeur juste en dessous de la valeur jusqu'à ce que le curseur prenne la forme d'une flèche à double sens. Maintenez ensuite la touche Ctrl (Windows) ou Cmd (macOS) et le bouton de la souris enfoncés, puis faites défiler les valeurs en faisant glisser votre souris vers la droite. La valeur augmente par incréments de 0,1 (voir Figure 20), et vous voyez immédiatement le résultat en mode En direct. Si vous êtes allé trop loin, répétez l'opération en faisant glisser la souris vers la gauche. Cliquez en dehors de la valeur pour confirmer la modification. Cette technique est particulièrement utile si vous souhaitez visualiser le résultat en mode En direct en faisant défiler les valeurs plutôt qu'en définissant une valeur spécifique.
Lorsque vous maintenez la touche Maj. enfoncée lors du défilement, les valeurs changent par incréments de 10. Si vous faites défilez les valeurs sans appuyer sur une touche de modification, elles changent par incréments de 1.
Convertissez le texte en majuscules en cliquant sur l'icône uppercase en regard de la propriété text-transform (voir Figure 21).
Cliquez sur l'icône dans la partie supérieure du panneau Propriétés pour accéder à la section Bordure. Les propriétés border sont regroupées dans un panneau à onglets (voir Figure 22). Le premier onglet applique la même bordure de chaque côté de l'élément. Les autres onglets définissent individuellement les bordures Haut , Droite , Bas et Gauche .
Sélectionnez l'onglet de la bordure inférieure et définissez la largeur à 3 px et le style à solid. Il n'est pas nécessaire de spécifier une couleur, car la couleur par défaut d'une bordure est héritée du texte de l'élément actif.
Pour finaliser les styles de ce paragraphe, cliquez sur l'icône dans la partie supérieure du panneau Propriétés pour accéder aux propriétés de disposition. Localisez l'outil visuel padding, et définissez les côtés gauche et droit à 4 % et le côté inférieur à 20 px (voir Figure 23).
L'écart entre le haut du texte et de l'image du Golden Gate Bridge est trop important. Utilisez l'outil visuel margin pour réinitialiser la marge supérieure à 10 px.
Le paragraphe a maintenant un style unique (voir Figure 24).
Mise en forme du pied de page
Maintenant que vous savez créé des sélecteurs et des règles de style, vous allez pouvoir mettre en forme le pied de page. Essayez d'ajouter la définition du style directement en mode Code au bas de la feuille de style. Le code se présente comme suit :
N'oubliez pas d'enregistrer votre travail lorsque vous avez terminé. Si vous affichez la page dans un navigateur, elle devrait ressembler à celle illustrée en Figure 25. Le projet progresse bien.
Vous avez réalisé la moitié de la mise en forme du site Bayside Beat.
