ARTICLE DU TUTORIEL

Avancé

60 min

Changement de police et création de styles basiques

Dans la quatrième partie de ce tutoriel, vous découvrirez comment la taille des éléments web est calculée. Vous utiliserez ensuite CSS pour appliquer une mise en page et des styles généraux aux éléments et au texte sur la page.

Introduction

Bienvenue dans la quatrième partie de ce tutoriel sur l’élaboration d’un site web simple en responsive design dans Dreamweaver 2015. Les trois premières parties étaient consacrées à la définition d’un site dans Dreamweaver, puis à la création de deux pages à l’aide d’une structure HTML logique. La Figure 1 montre comment la page d’accueil s’affiche lorsque vous chargez le fichier index.html dans un navigateur.

Dans la suite de ce tutoriel, à l’exception de la toute dernière partie, vous apprendrez à transformer ce « vilain petit canard » en un site simple mais élégant via l’utilisation de styles CSS et l’ajout d’images. Dans cette partie, vous découvrirez comment simplifier les calculs de largeur et de hauteur, changer de police et utiliser le panneau CSS Designer pour créer des styles basiques.

Création d’un fragment de code pour simplifier les calculs de largeur et de hauteur

Dans CSS, chaque élément est traité comme une boîte. Dans le modèle de boîte CSS par défaut, la largeur et la hauteur d’un élément ne s’appliquent normalement qu’à ce dernier. Si vous agrandissez la marge intérieure (padding ) autour du contenu de l’élément, l’espace supplémentaire n’est pas inclus dans le calcul. Les bordures sont également exclues. Par conséquent, si vous déclarez que la largeur d’un élément est de 250 px et sa hauteur de 100 px, et si vous ajoutez 20 px de marge intérieure de chaque côté, ainsi qu’une bordure de 5 px, la largeur totale sera de 300 px, et la hauteur totale de 150 px (voir Figure 2).

Cela peut compliquer les calculs, surtout si vous voulez combiner des dimensions en pixels et en pourcentages. Il est plus logique de considérer que la marge intérieure et les bordures font intrinsèquement partie de la taille d’un élément. Pour faciliter le contrôle de la mise en page, la plupart des designers web professionnels ajoutent deux petites règles au début de leur feuille de style pour inclure la marge intérieure et les bordures dans la largeur et la hauteur totales d’un élément. Ces règles sont très utiles ; vous les enregistrerez dans le panneau Fragments de code de Dreamweaver pour pouvoir les insérer dans les styles d’autres sites web.

  1. Vérifiez que le fichier index.html est ouvert dans la fenêtre Document, puis cliquez sur responsive.css dans la barre d’outils des fichiers associés (voir Figure 3) pour ouvrir la feuille de style externe en mode Fractionner.

  1. Cliquez dans le code, créez une ligne vierge sur la ligne 2, puis saisissez /* Simplifier les calculs de largeur et de hauteur */. Dans CSS, tout ce qui se trouve entre /* et */ est considéré comme un commentaire ; il s’agit simplement d’un rappel de l’action du code.

  2. Créez une autre ligne, puis saisissez les lettres html suivies d’une accolade ouvrante ({). Les règles de style sont constituées d’un sélecteur suivi de paires de propriété/valeur placées entre des accolades. Le type de sélecteur le plus simple comprend une balise HTML sans chevrons. L’élément de niveau supérieur de chaque page web est . Par conséquent, html est un sélecteur CSS qui affecte tout le contenu de la page.

  3. Appuyez sur la touche Entrée/Retour après avoir inséré l’accolade. Dreamweaver indente la ligne suivante et affiche immédiatement des indicateurs de code pour les propriétés CSS. Commencez à saisir le terme box. Lors de la saisie, Dreamweaver filtre les indicateurs en recherchant le terme correspondant dans toutes les propriétés valables, y compris au milieu de leur nom (voir Figure 4).

  1. Repérez la propriété box-sizing . Utilisez votre souris ou les touches fléchées de votre clavier pour la sélectionner dans les indicateurs de code, puis appuyez sur la touche Entrée/Retour. Dreamweaver complète alors le nom de la propriété et la fait suivre de deux points (:). Les indicateurs de code s’affichent de nouveau. Pour améliorer la lisibilité du code, ajoutez un espace, sélectionnez la propriété border-box dans la liste, puis placez un point-virgule (;) à la fin de la ligne.

  2. Sur la ligne suivante, créez cette règle de style :

  1. Ouvrez le panneau Fragments de code (dans l’espace de travail Création, il est ancré avec le panneau Fichiers), puis sélectionnez le dossier CSS_Snippets (voir Figure 5).

  1. En mode Code, sélectionnez le commentaire et les deux règles de style que vous venez de créer, cliquez avec le bouton droit sur la sélection, puis choisissez Créer un fragment de code dans le menu contextuel (voir Figure 6).

  1. Dans le champ Nom, saisissez Box-sizing: border-box. Dans le champ Description, saisissez Inclut la marge intérieure et les bordures dans la largeur et la hauteur. En regard du type de fragment de code, sélectionnez le bouton radio Insérer le bloc. Conservez le type d’aperçu défini par défaut, à savoir Code. Le panneau doit ressembler à celui illustré en Figure 7.

  1. Cliquez sur OK pour enregistrer le fragment de code. Comme vous avez sélectionné le dossier CSS_Snippets dans le panneau Fragments de code, le nouveau fragment de code est automatiquement stocké dans celui-ci.

L’insertion de ce fragment de code dans votre feuille de style vous permet d’ajuster la marge intérieure et les bordures d’un élément sans affecter ses dimensions totales.

Vous pouvez synchroniser vos fragments de code avec Creative Cloud. Consultez la documentation en ligne pour en savoir plus sur l’utilisation des fragments de code .

Installation d’une police Adobe Edge Web Fonts

Par défaut, les navigateurs affichent le texte en Times ou Times New Roman, une police avec empattements (les empattements sont de petits traits décoratifs à l’extrémité des caractères). La propriété CSS font-family vous permet de sélectionner des polices, mais votre choix se limite normalement aux polices disponibles sur l’appareil utilisé pour afficher le site. L’utilisation d’une police web se téléchargeant avec la page lève cette restriction. Dreamweaver offre un accès intégré aux nombreuses polices web gratuites hébergées par Adobe. Vous devez d’abord les activer dans Dreamweaver.

  1. Sélectionnez Modifier > Gérer les polices pour ouvrir le panneau illustré en Figure 8.

  1. La police que vous recherchez est nommée Source Sans Pro. Dès que vous commencez à saisir son nom dans le champ de recherche, trois options vous sont proposées. Cliquez sur celle du milieu : Source Sans Pro. Une coche indique que la police a été sélectionnée (voir Figure 9).

  1. Les polices Adobe Edge Web Fonts sont gratuites mais soumises à un contrat de licence. Pour consulter les conditions d’utilisation, cliquez sur le lien dans la partie inférieure du panneau.

  2. Si les conditions d’utilisation vous conviennent, cliquez sur Terminé.

Dreamweaver installe les polices Edge Web Fonts dans votre dossier de configuration personnel, ce qui vous permet de les utiliser dans tous les sites que vous créez dans Dreamweaver.

Utilisation de CSS Designer pour ajouter des styles basiques à la page

Vous avez vu précédemment que les indicateurs de code peuvent accélérer la création de règles de style en mode Code. Dreamweaver intègre également CSS Designer, un panneau qui vous permet de mettre en forme votre page tout en visualisant directement les modifications en mode En Direct. Dans cette section, vous utiliserez CSS Designer pour ajouter des styles basiques à la feuille responsive.css, puis vous verrez comment ils affectent la page index.html.

  1. Le fichier index.html étant ouvert dans la fenêtre Document, cliquez sur le bouton En direct de sorte que ce mode occupe l’intégralité de la fenêtre.

  2. Ouvrez CSS Designer en cliquant sur l’onglet correspondant dans le groupe de panneaux à droite de l’écran (il est ancré avec le panneau Fragments de code que vous avez utilisé dans la section précédente). CSS Designer comprend quatre panneaux : Sources, @Requêtes multimédias, Sélecteurs et Propriétés (voir Figure 10).

Par défaut, CSS Designer se présente sur deux colonnes, le panneau Propriétés apparaissant à droite dans l’espace de travail Création. Si vous utilisez un moniteur de petite taille, vous pouvez afficher le contenu sur une colonne en faisant glisser le côté du groupe de panneaux vers l’intérieur.

Lorsque vous créez des règles de style, vérifiez que le bouton Tout est sélectionné dans la partie supérieure du panneau.

Voici le rôle de chaque panneau :

  • Sources: indique la provenance des différents styles de la page active. Il peut s’agir de feuilles de style externes, telles que responsive.css, dans un bloc incorporé à la page, ou dynamiquement liées.

  • @Requêtes multimédias: répertorie les requêtes multimédias utilisées dans les différentes sources. Ce panneau sera abordé plus en détail dans la septième partie du tutoriel.

  • Sélecteurs: affiche les sélecteurs CSS contenus dans la source sélectionnée. Un champ de recherche est disponible dans la partie supérieure pour faciliter la localisation des sélecteurs dans une grande feuille de style.

  • Propriétés: c’est ici que vous définissez les propriétés et valeurs d’un sélecteur. Lorsque la case à cocher Ensemble est activée, le panneau affiche uniquement les propriétés qui ont été définies. Lorsqu’elle est désactivée, vous voyez apparaître une cinquantaine de propriétés courantes pour la disposition, le texte, la bordure et l’arrière-plan.

  1. Assurez-vous que le bouton Tout est sélectionné dans la partie supérieure de CSS Designer.

    Sélectionnez responsive.css dans le panneau Sources.

    Vous n’utiliserez le panneau @Requêtes multimédias qu’à partir de la septième partie du tutoriel. Vous pouvez donc le fermer en faisant glisser le bord supérieur du panneau Sélecteurs vers le haut.

    Le panneau Sélecteurs répertorie les sélecteurs ayant déjà été créés. Le dernier (#wrapper) n’a pas encore de styles. Lorsque vous créez un sélecteur, Dreamweaver l’insère systématiquement au bas de la feuille de style, sauf si un autre sélecteur est déjà sélectionné. Il est recommandé de classer les styles dans un ordre logique. Sélectionnez * , *:before et *:after , puis désactivez la case à cocher Ensemble dans la partie supérieure droite du panneau Propriétés.

  2. Cliquez sur le signe plus (+) en haut à gauche du panneau Sélecteurs pour créer un sélecteur. Dreamweaver vous suggère un nom en se basant sur ce qui est sélectionné dans le mode En direct. Ignorez la suggestion, et saisissez body. Appuyez deux fois sur la touche Entrée/Retour pour confirmer la modification. Le nouveau sélecteur étant sélectionné (voir Figure 11), vous pouvez maintenant créer une règle de style pour l’ensemble de la page en définissant les valeurs des propriétés dans le panneau correspondant.

  1. La section Disposition située en haut du panneau Propriétés contient un outil visuel permettant de définir la propriété de la marge. Plutôt que d’utiliser cet outil, cliquez simplement sur Définir la forme courte pour ouvrir un champ modifiable, puis saisissez la valeur 0. Appuyez sur la touche Entrée/Retour pour confirmer la modification.

    En mode En direct, vous remarquerez que le contenu s’est légèrement déplacé vers le haut et la gauche, car la marge par défaut de 8 px a été supprimée de l’élément.

    Dans le panneau Propriétés, la propriété margin apparaît maintenant en gras, ce qui indique qu’elle a été définie. Par ailleurs, la valeur de chaque côté dans l’outil visuel a été définie à 0 (voir Figure 12).

  1. Cliquez sur l’icône Texte dans la partie supérieure du panneau Propriétés pour accéder à la section correspondante. La première propriété de la liste, color , sert à définir la couleur du texte. Toutes les couleurs disponibles pour ce projet sont enregistrées dans la Bibliothèque CC que vous avez installée dans la première partie du tutoriel.

  2. Cliquez sur la zone de couleur en regard de la propriété color pour ouvrir le sélecteur de couleurs.

  1. Cliquez à droite de la propriété font-family pour ouvrir un menu de piles de polices fréquemment utilisées. Sélectionnez la police Adobe Edge Web Fonts que vous avez précédemment installée. Elle est répertoriée au bas de la liste sous le nom source-sans-pro (voir Figure 14).

  1. La valeur de la propriété font-style (normal) est correcte, mais celle de la propriété font-weight (200) est extrêmement faible.

    Cliquez sur 200 pour accéder aux épaisseurs disponibles, puis sélectionnez 400, ce qui équivaut à une police normale (voir Figure 15).

  1. Cliquez en regard de la propriété font-size pour accéder aux unités de mesure et mots-clés applicables aux polices, puis sélectionnez em (voir Figure 16).

  1. Cliquez sur l’icône Arrière-plan dans la partie supérieure du panneau Propriétés pour accéder aux propriétés correspondantes.

  2. Au lieu d’utiliser le sélecteur de couleurs pour définir la propriété background-color , cliquez simplement sur la nuance bleu clair dans le panneau Bibliothèques CC (voir Figure 17) pour copier sa valeur hexadécimale dans le Presse-papiers.

  1. Activez la case à cocher Ensemble dans la partie supérieure droite du panneau Propriétés pour afficher toutes les propriétés CSS définies sur le corps de la page (voir Figure 18).

Définition de propriétés directement dans CSS Designer

La sélection de propriétés communes dans les différentes sections du panneau CSS Designer est une excellente façon de se familiariser avec le code CSS. Supposons toutefois que vous maîtrisiez déjà les styles CSS et que vous souhaitiez simplement définir d’autres propriétés et valeurs. Vous pouvez le faire dans la section Plus située au bas du panneau Propriétés. Dreamweaver accélère le processus en affichant des indicateurs de code. Faisons un test. Même si vous êtes néophyte, vous devriez pouvoir suivre ces instructions :

  1. Assurez-vous que le bouton Tout est activé dans la partie supérieure de CSS Designer et que la feuille de style responsive.css est sélectionnée dans le panneau Sources. Si nécessaire, activez la case à cocher Ensemble en haut à droite du panneau Propriétés.

  2. Dans le panneau Sélecteurs, sélectionnez #wrapper . Le symbole dièse indique qu’il s’agit d’un sélecteur d’ID. Ce dernier appliquera donc des règles de style au contenu portant l’ID wrapper . S’il n’apparaît pas dans la liste, vous pouvez le créer en cliquant sur le signe plus (+) en haut à gauche du panneau Sélecteurs, puis en saisissant #wrapper dans le champ modifiable.

    Aucun style n’ayant été défini pour ce sélecteur, le panneau Propriétés affiche uniquement la section Plus ainsi que deux champs permettant d’ajouter une propriété et une valeur.

  3. Cliquez dans le champ ajouter une propriété et commencez à saisir width. Dès le début de la saisie, des indicateurs de code affichent les propriétés correspondantes. Une fois la propriété width mise en évidence, appuyez sur la touche Tab ou Entrée/Retour pour la sélectionner.

  4. Pour éviter que l’enveloppe ne devienne trop large sur les écrans grand format, ajoutez une autre propriété, max-width , et définissez sa valeur à 1000 px.

  5. Centrez l’enveloppe en ajoutant la propriété margin et en définissant sa valeur à 0 auto. Il s’agit d’un raccourci pour supprimer les marges supérieure et inférieure et définir une marge automatique à gauche et à droite. Tant que la largeur de la fenêtre Document est supérieure à 1 000 px (la valeur de la propriété max-width ), le contenu de la page reste centré en mode En direct.

  6. Ajoutez la propriété background-color et définissez sa valeur à white. Il s’agit d’un mot-clé reconnu par tous les navigateurs. Le panneau Propriétés doit maintenant contenir quatre définitions de style pour le sélecteur #wrapper (voir Figure 19).

  1. Enregistrez votre travail en sélectionnant Fichier > Enregistrer tous les fichiers associés. Prenez l’habitude d’enregistrer régulièrement les éléments de mise en forme d’une page.

Le contenu est maintenant centré sur un arrière-plan de couleur blanche. Si la largeur de la fenêtre Document est supérieure à 1 000 px, l’arrière-plan bleu clair du corps apparaît alors de chaque côté. Il y a toutefois un écart mystérieux en haut de la page, et le texte effleure le côté gauche de l’élément

wrapper. Vous résoudrez ces problèmes dans la cinquième partie. Mais avant cela, abordons un instant les mesures en pixels dans les pages web.

Pixels et affichages haute densité

Les pixels sont les points minuscules qui composent un écran d’ordinateur. Aux débuts du web, la taille d’un point était de 1 px. Au fil des années, la technologie a progressé et les points sont devenus de plus en plus petits. Heureusement, CSS a anticipé la situation. Les pixels utilisés comme unité de mesure ne dépendent pas de la taille des pixels physiques de l’écran d’un appareil. Par conséquent, les 1 000 px définis comme largeur maximale de l’élément

devraient avoir la même taille sur les anciens moniteurs et les derniers écrans haute densité.

Le site commence à devenir plus présentable, mais il reste encore beaucoup à faire. L’étape suivante consiste à résoudre les problèmes d’espace horizontal et vertical et à ajouter des images réactives sur la page.


Contribution

David Powers

13 décembre 2022

Essayez ces tutoriels avec Dreamweaver

Créez des pages web modernes en responsive design.